@@ -204,160 +204,11 @@ different ways:
204204Stimulus / Symfony UX Helper
205205----------------------------
206206
207- stimulus_controller
208- ~~~~~~~~~~~~~~~~~~~
209-
210- This bundle also ships with a special ``stimulus_controller() `` Twig function
211- that can be used to render `Stimulus Controllers & Values `_ and `CSS Classes `_.
212- See `stimulus-bridge `_ for more details.
213-
214- For example:
215-
216- .. code-block :: html+twig
217-
218- <div {{ stimulus_controller('chart', { 'name': 'Likes', 'data': [1, 2, 3, 4] }) }}>
219- Hello
220- </div>
221-
222- <!-- would render -->
223- <div
224- data-controller="chart"
225- data-chart-name-value="Likes"
226- data-chart-data-value="[1,2,3,4]"
227- >
228- Hello
229- </div>
230-
231- If you want to set CSS classes:
232-
233- .. code-block :: html+twig
234-
235- <div {{ stimulus_controller('chart', { 'name': 'Likes', 'data': [1, 2, 3, 4] }, { 'loading': 'spinner' }) }}>
236- Hello
237- </div>
238-
239- <!-- would render -->
240- <div
241- data-controller="chart"
242- data-chart-name-value="Likes"
243- data-chart-data-value="[1,2,3,4]"
244- data-chart-loading-class="spinner"
245- >
246- Hello
247- </div>
248-
249- <!-- or without values -->
250- <div {{ stimulus_controller('chart', controllerClasses = { 'loading': 'spinner' }) }}>
251- Hello
252- </div>
253-
254- Any non-scalar values (like ``data: [1, 2, 3, 4] ``) are JSON-encoded. And all
255- values are properly escaped (the string ``[ `` is an escaped
256- ``[ `` character, so the attribute is really ``[1,2,3,4] ``).
257-
258- If you have multiple controllers on the same element, you can chain them as there's also a ``stimulus_controller `` filter:
259-
260- .. code-block :: html+twig
261-
262- <div {{ stimulus_controller('chart', { 'name': 'Likes' })|stimulus_controller('other-controller') }}>
263- Hello
264- </div>
265-
266- You can also retrieve the generated attributes as an array, which can be helpful e.g. for forms:
267-
268- .. code-block :: twig
269-
270- {{ form_start(form, { attr: stimulus_controller('chart', { 'name': 'Likes' }).toArray() }) }}
271-
272- stimulus_action
273- ~~~~~~~~~~~~~~~
274-
275- The ``stimulus_action() `` Twig function can be used to render `Stimulus Actions `_.
276-
277- For example:
278-
279- .. code-block :: html+twig
280-
281- <div {{ stimulus_action('controller', 'method') }}>Hello</div>
282- <div {{ stimulus_action('controller', 'method', 'click') }}>Hello</div>
283-
284- <!-- would render -->
285- <div data-action="controller#method">Hello</div>
286- <div data-action="click->controller#method">Hello</div>
287-
288- If you have multiple actions and/or methods on the same element, you can chain them as there's also a
289- ``stimulus_action `` filter:
290-
291- .. code-block :: html+twig
292-
293- <div {{ stimulus_action('controller', 'method')|stimulus_action('other-controller', 'test') }}>
294- Hello
295- </div>
296-
297- <!-- would render -->
298- <div data-action="controller#method other-controller#test">
299- Hello
300- </div>
301-
302- You can also retrieve the generated attributes as an array, which can be helpful e.g. for forms:
303-
304- .. code-block :: twig
305-
306- {{ form_row(form.password, { attr: stimulus_action('hello-controller', 'checkPasswordStrength').toArray() }) }}
307-
308- You can also pass `parameters `_ to actions:
309-
310- .. code-block :: html+twig
311-
312- <div {{ stimulus_action('hello-controller', 'method', 'click', { 'count': 3 }) }}>Hello</div>
313-
314- <!-- would render -->
315- <div data-action="click->hello-controller#method" data-hello-controller-count-param="3">Hello</div>
316-
317- stimulus_target
318- ~~~~~~~~~~~~~~~
319-
320- The ``stimulus_target() `` Twig function can be used to render `Stimulus Targets `_.
321-
322- For example:
323-
324- .. code-block :: html+twig
325-
326- <div {{ stimulus_target('controller', 'a-target') }}>Hello</div>
327- <div {{ stimulus_target('controller', 'a-target second-target') }}>Hello</div>
328-
329- <!-- would render -->
330- <div data-controller-target="a-target">Hello</div>
331- <div data-controller-target="a-target second-target">Hello</div>
332-
333- If you have multiple targets on the same element, you can chain them as there's also a `stimulus_target ` filter:
334-
335- .. code-block :: html+twig
336-
337- <div {{ stimulus_target('controller', 'a-target')|stimulus_target('other-controller', 'another-target') }}>
338- Hello
339- </div>
340-
341- <!-- would render -->
342- <div data-controller-target="a-target" data-other-controller-target="another-target">
343- Hello
344- </div>
345-
346- You can also retrieve the generated attributes as an array, which can be helpful e.g. for forms:
347-
348- .. code-block :: twig
349-
350- {{ form_row(form.password, { attr: stimulus_target('hello-controller', 'a-target').toArray() }) }}
351-
352- Ok, have fun!
353-
207+ The ``stimulus_controller() ``, ``stimulus_action() `` and ``stimulus_target() ``
208+ Twig functions are deprecated in WebpackEncoreBundle 1.17.0. Install and
209+ use `symfony/stimulus-bundle `_ for that functionality.
354210
355211.. _`Webpack Encore` : https://symfony.com/doc/current/frontend.html
356212.. _`enable the bundle manually` : https://symfony.com/doc/current/bundles.html
357213.. _`"splits" your files` : https://webpack.js.org/plugins/split-chunks-plugin/
358- .. _`Stimulus Controllers & Values` : https://stimulus.hotwired.dev/reference/values
359- .. _`CSS Classes` : https://stimulus.hotwired.dev/reference/css-classes
360- .. _`stimulus-bridge` : https://github.com/symfony/stimulus-bridge
361- .. _`Stimulus Actions` : https://stimulus.hotwired.dev/reference/actions
362- .. _`parameters` : https://stimulus.hotwired.dev/reference/actions#action-parameters
363- .. _`Stimulus Targets` : https://stimulus.hotwired.dev/reference/targets
214+ .. _`symfony/stimulus-bundle` : https://symfony.com/bundles/StimulusBundle/current/index.html
0 commit comments