@@ -7,22 +7,21 @@ StimulusBundle: Symfony integration with Stimulus
7
7
8
8
This bundle adds integration between Symfony, `Stimulus `_ and the Symfony UX packages:
9
9
10
- A) Twig ``stimulus_ `` functions & filters to add Stimulus controllers,
10
+ * Twig ``stimulus_ `` functions & filters to add Stimulus controllers,
11
11
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)
14
13
15
14
Installation
16
15
------------
17
16
18
17
First, if you don't have one yet, choose and install an asset handling system;
19
18
both work great with StimulusBundle:
20
19
21
- * A) ` Webpack Encore `_ Node -based packaging system:
20
+ * ` AssetMapper `_: PHP -based system for handling assets
22
21
23
22
or
24
23
25
- * B) ` AssetMapper `_: PHP -based system for handling assets:
24
+ * ` Webpack Encore `_ Node -based packaging system
26
25
27
26
See `Encore vs AssetMapper `_ to learn which is best for your project.
28
27
@@ -88,7 +87,7 @@ TypeScript Controllers
88
87
89
88
If you want to use `TypeScript `_ to define your controllers, you can! Install and set up the
90
89
`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
92
91
directory and you're good to go.
93
92
94
93
.. _ux-packages :
@@ -137,7 +136,7 @@ controllers in ``assets/controllers.json``) will be downloaded and loaded on
137
136
every page.
138
137
139
138
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
141
140
initial page load. Instead, as soon as an element appears on the page matching
142
141
the controller (e.g. ``<div data-controller="hello"> ``), the controller - and anything
143
142
else it imports - will be lazily-loaded via Ajax.
@@ -176,8 +175,8 @@ exist beyond the UX packages:
176
175
Stimulus Twig Helpers
177
176
---------------------
178
177
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.
181
180
182
181
.. note ::
183
182
@@ -186,8 +185,7 @@ actions & targets in your templates.
186
185
187
186
.. tip ::
188
187
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 `_
191
189
to get nice auto-completion for the attributes.
192
190
193
191
stimulus_controller
@@ -407,34 +405,6 @@ the `StimulusBundle Flex recipe`_. Here's a summary of what's inside:
407
405
408
406
A few other changes depend on which asset system you're using:
409
407
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
-
438
408
With AssetMapper
439
409
~~~~~~~~~~~~~~~~
440
410
@@ -473,6 +443,34 @@ is running in debug mode.
473
443
For AssetMapper 6.3 only, you also need a ``{{ ux_controller_link_tags() } ``
474
444
in ``base.html.twig ``. This is not needed in AssetMapper 6.4+.
475
445
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
+
476
474
How are the Stimulus Controllers Loaded?
477
475
----------------------------------------
478
476
@@ -578,3 +576,4 @@ it will normalize it:
578
576
.. _`stimulus-components` : https://stimulus-components.netlify.app/
579
577
.. _`TypeScript` : https://www.typescriptlang.org/
580
578
.. _`sensiolabs/typescript-bundle` : https://github.com/sensiolabs/AssetMapperTypeScriptBundle
579
+ .. _`Stimulus plugin` : https://plugins.jetbrains.com/plugin/18940-stimulus
0 commit comments