using stimulus_controller() everywhere

weaverryan · weaverryan · commit 5fd2045198d8 · 2021-03-01T10:59:28.000-05:00
diff --git a/src/LazyImage/README.md b/src/LazyImage/README.md
@@ -34,7 +34,7 @@ page has been rendered:
 ```twig
 <img
     src="{{ asset('image/small.png') }}"
-    data-controller="symfony--ux-lazy-image--lazy-image"
+    {{ stimulus_controller('symfony/ux-lazy-image/lazy-image') }}
     data-hd-src="{{ asset('image/large.png') }}"
 
     {# Optional but avoids having a page jump when the image is loaded #}
@@ -43,13 +43,16 @@ page has been rendered:
 />
 ```
 
+**Note** The `stimulus_controller()` function comes from
+[WebpackEncoreBundle v1.10](https://github.com/symfony/webpack-encore-bundle).
+
 Instead of using a generated thumbnail that would exist on your filesystem, you can use
 the BlurHash algorithm to create a light, blurred, data-uri thumbnail of the image:
 
 ```twig
 <img
     src="{{ data_uri_thumbnail('public/image/large.png', 100, 75) }}"
-    data-controller="symfony--ux-lazy-image--lazy-image"
+    {{ stimulus_controller('symfony/ux-lazy-image/lazy-image') }}
     data-hd-src="{{ asset('image/large.png') }}"
 
     {# Using BlurHash, the size is required #}
@@ -104,7 +107,10 @@ Then in your template, add your controller to the HTML attribute:
 ```twig
 <img
     src="{{ data_uri_thumbnail('public/image/large.png', 100, 75) }}"
-    data-controller="mylazyimage symfony--ux-lazy-image--lazy-image"
+    {{ stimulus_controller({
+        mylazyimage: {},
+        'symfony/ux-lazy-image/lazy-image: {}
+    }) }}
     data-hd-src="{{ asset('image/large.png') }}"
 
     {# Using BlurHash, the size is required #}
diff --git a/src/Swup/README.md b/src/Swup/README.md
@@ -39,7 +39,7 @@ The main usage of Symfony UX Swup is to use its Stimulus controller to initializ
     <head>
         <title>Swup</title>
     </head>
-    <body data-controller="symfony--ux-swup--swup">
+    <body {{ stimulus_controller('symfony/ux-swup/swup') }}>
         {# ... #}
 
         <main id="swup">
@@ -53,6 +53,9 @@ The main usage of Symfony UX Swup is to use its Stimulus controller to initializ
 </html>
 ```
 
+**Note** The `stimulus_controller()` function comes from
+[WebpackEncoreBundle v1.10](https://github.com/symfony/webpack-encore-bundle).
+
 That's it! Swup now reacts to a link click and run the default fade-in transition.
 
 By default, Swup will use the `#swup` selector as a container, meaning it will only swap
@@ -65,7 +68,7 @@ additional containers, for instance to have a navigation menu that updates when
         <title>Swup</title>
     </head>
     <body
-        data-controller="symfony--ux-swup--swup"
+        {{ stimulus_controller('symfony/ux-swup/swup') }}
         data-containers="#swup #nav" {# list of selectors separated by spaces #}
     >
         {# ... #}
@@ -93,7 +96,7 @@ You can configure several other options using data-attributes on the `body` tag:
         <title>Swup</title>
     </head>
     <body
-        data-controller="symfony--ux-swup--swup"
+        {{ stimulus_controller('symfony/ux-swup/swup') }}
         data-containers="#swup #nav"
         data-theme="slide" {# or "fade", the default #}
         data-debug="data-debug" {# add this attribute to enable debug #}
@@ -139,7 +142,10 @@ Then in your template, add your controller to the HTML attribute:
     <head>
         <title>Swup</title>
     </head>
-    <body data-controller="myswup symfony--ux-swup--swup">
+    <body {{ stimulus_controller({
+        myswup: {},
+        'symfony/ux-swup/swup: {}
+    })>
         {# ... #}
     </body>
 </html>
