Skip to content

Commit 8daea1f

Browse files
committed
minor #1664 [Doc] Misc updates in the StimulusBundle docs (javiereguiluz)
This PR was merged into the 2.x branch. Discussion ---------- [Doc] Misc updates in the StimulusBundle docs | Q | A | ------------- | --- | Bug fix? | no | New feature? | no | Issues | - | License | MIT In addition to some minor fixes, I've reordered contents to always display AssetMapper first and Webpack Encore last. Commits ------- 0fe03ca [Doc] Misc updates in the StimulusBundle docs
2 parents ed637a0 + 0fe03ca commit 8daea1f

File tree

1 file changed

+38
-39
lines changed

1 file changed

+38
-39
lines changed

src/StimulusBundle/doc/index.rst

Lines changed: 38 additions & 39 deletions
Original file line numberDiff line numberDiff line change
@@ -7,22 +7,21 @@ StimulusBundle: Symfony integration with Stimulus
77

88
This bundle adds integration between Symfony, `Stimulus`_ and the Symfony UX packages:
99

10-
A) Twig ``stimulus_`` functions & filters to add Stimulus controllers,
10+
* Twig ``stimulus_`` functions & filters to add Stimulus controllers,
1111
actions & targets in your templates;
12-
13-
B) Integration to load :ref:`UX Packages <ux-packages>` (extra Stimulus controllers)
12+
* Integration to load :ref:`UX Packages <ux-packages>` (extra Stimulus controllers)
1413

1514
Installation
1615
------------
1716

1817
First, if you don't have one yet, choose and install an asset handling system;
1918
both work great with StimulusBundle:
2019

21-
* A) `Webpack Encore`_ Node-based packaging system:
20+
* `AssetMapper`_: PHP-based system for handling assets
2221

2322
or
2423

25-
* B) `AssetMapper`_: PHP-based system for handling assets:
24+
* `Webpack Encore`_ Node-based packaging system
2625

2726
See `Encore vs AssetMapper`_ to learn which is best for your project.
2827

@@ -88,7 +87,7 @@ TypeScript Controllers
8887

8988
If you want to use `TypeScript`_ to define your controllers, you can! Install and set up the
9089
`sensiolabs/typescript-bundle`_. Then be sure to add the ``assets/controllers`` path to the
91-
`sensiolabs_typescript.source_dir` configuration. Finally, create your controller in that
90+
``sensiolabs_typescript.source_dir`` configuration. Finally, create your controller in that
9291
directory and you're good to go.
9392

9493
.. _ux-packages:
@@ -137,7 +136,7 @@ controllers in ``assets/controllers.json``) will be downloaded and loaded on
137136
every page.
138137

139138
Sometimes you may have a controller that's only used on some pages. In that case,
140-
you can make the controller "lazy". In this case, will *not be downloaded on
139+
you can make the controller "lazy". In this case, will *not* be downloaded on
141140
initial page load. Instead, as soon as an element appears on the page matching
142141
the controller (e.g. ``<div data-controller="hello">``), the controller - and anything
143142
else it imports - will be lazily-loaded via Ajax.
@@ -176,8 +175,8 @@ exist beyond the UX packages:
176175
Stimulus Twig Helpers
177176
---------------------
178177

179-
This bundle adds 3 Twig functions/filters to help add Stimulus controllers,
180-
actions & targets in your templates.
178+
This bundle adds some Twig functions/filters to help add Stimulus controllers,
179+
actions and targets in your templates.
181180

182181
.. note::
183182

@@ -186,8 +185,7 @@ actions & targets in your templates.
186185

187186
.. tip::
188187

189-
If you use PhpStorm IDE - you may want to install
190-
[Stimulus plugin](https://plugins.jetbrains.com/plugin/18940-stimulus)
188+
If you use PhpStorm IDE - you may want to install `Stimulus plugin`_
191189
to get nice auto-completion for the attributes.
192190

193191
stimulus_controller
@@ -407,34 +405,6 @@ the `StimulusBundle Flex recipe`_. Here's a summary of what's inside:
407405

408406
A few other changes depend on which asset system you're using:
409407

410-
With WebpackEncoreBundle
411-
~~~~~~~~~~~~~~~~~~~~~~~~
412-
413-
If you're using Webpack Encore, the recipe will also update your ``webpack.config.js``
414-
file to include this line:
415-
416-
.. code-block:: javascript
417-
418-
// webpack.config.js
419-
.enableStimulusBridge('./assets/controllers.json')
420-
421-
The ``assets/bootstrap.js`` file will be updated to look like this:
422-
423-
.. code-block:: javascript
424-
425-
// assets/bootstrap.js
426-
import { startStimulusApp } from '@symfony/stimulus-bridge';
427-
428-
// Registers Stimulus controllers from controllers.json and in the controllers/ directory
429-
export const app = startStimulusApp(require.context(
430-
'@symfony/stimulus-bridge/lazy-controller-loader!./controllers',
431-
true,
432-
/\.[jt]sx?$/
433-
));
434-
435-
And 2 new packages - ``@hotwired/stimulus`` and ``@symfony/stimulus-bridge`` - will
436-
be added to your ``package.json`` file.
437-
438408
With AssetMapper
439409
~~~~~~~~~~~~~~~~
440410

@@ -473,6 +443,34 @@ is running in debug mode.
473443
For AssetMapper 6.3 only, you also need a ``{{ ux_controller_link_tags() }``
474444
in ``base.html.twig``. This is not needed in AssetMapper 6.4+.
475445

446+
With WebpackEncoreBundle
447+
~~~~~~~~~~~~~~~~~~~~~~~~
448+
449+
If you're using Webpack Encore, the recipe will also update your ``webpack.config.js``
450+
file to include this line:
451+
452+
.. code-block:: javascript
453+
454+
// webpack.config.js
455+
.enableStimulusBridge('./assets/controllers.json')
456+
457+
The ``assets/bootstrap.js`` file will be updated to look like this:
458+
459+
.. code-block:: javascript
460+
461+
// assets/bootstrap.js
462+
import { startStimulusApp } from '@symfony/stimulus-bridge';
463+
464+
// Registers Stimulus controllers from controllers.json and in the controllers/ directory
465+
export const app = startStimulusApp(require.context(
466+
'@symfony/stimulus-bridge/lazy-controller-loader!./controllers',
467+
true,
468+
/\.[jt]sx?$/
469+
));
470+
471+
And 2 new packages - ``@hotwired/stimulus`` and ``@symfony/stimulus-bridge`` - will
472+
be added to your ``package.json`` file.
473+
476474
How are the Stimulus Controllers Loaded?
477475
----------------------------------------
478476

@@ -578,3 +576,4 @@ it will normalize it:
578576
.. _`stimulus-components`: https://stimulus-components.netlify.app/
579577
.. _`TypeScript`: https://www.typescriptlang.org/
580578
.. _`sensiolabs/typescript-bundle`: https://github.com/sensiolabs/AssetMapperTypeScriptBundle
579+
.. _`Stimulus plugin`: https://plugins.jetbrains.com/plugin/18940-stimulus

0 commit comments

Comments
 (0)