minor #63 using stimulus_controller() everywhere (weaverryan)

weaverryan · weaverryan · commit ea8028703feb · 2021-04-05T09:47:23.000-04:00
This PR was merged into the main branch. Discussion ---------- using stimulus_controller() everywhere | Q | A | ------------- | --- | Bug fix? | no | New feature? | no | Tickets | None | License | MIT I think we should embrace `stimulus_controller()`. The controller name normalization is especially important. Also, it looks like we should also update many of the options (e.g. `data-hd-url`) to values (in a BC way, obviously). That would make things even nicer with the `stimulus_controller()` function. Cheers! Commits ------- 5fd2045 using stimulus_controller() everywhere
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
@@ -43,7 +43,7 @@ The main usage of Symfony UX Swup is to use its Stimulus controller to initializ
             {{ encore_entry_script_tags('app') }}
         {% endblock %}
     </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
@@ -69,7 +72,7 @@ additional containers, for instance to have a navigation menu that updates when
         {% endblock %}
     </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 #}
@@ -140,7 +143,10 @@ Then in your template, add your controller to the HTML attribute:
         <title>Swup</title>
         {# ... #}
     </head>
-    <body data-controller="myswup symfony--ux-swup--swup">
+    <body {{ stimulus_controller({
+        myswup: {},
+        'symfony/ux-swup/swup: {}
+    })>
         {# ... #}
     </body>
 </html>
