[Site] Remove stimulus_* helpers

Author: smnandre

ux.symfony.com/templates/components/BootstrapModal.html.twig

@@ -3,7 +3,9 @@
     tabindex: '-1',
     'aria-hidden': 'true',
     id: id ? id : false,
-}).defaults(stimulus_controller('bootstrap-modal')) }}>
+}) }}
+    data-controller="bootstrap-modal"
+>
     <div class="modal-dialog">
         <div class="modal-content">
             {% block modal_full_content %}

ux.symfony.com/templates/components/CodeBlock.html.twig

@@ -11,19 +11,19 @@
         </div>
     {% endif %}
 
-    <div class="Terminal_body" {{ stimulus_controller('code-expander') }}>
+    <div class="Terminal_body" data-controller="code-expander">
         {% if not showFilename %}
             <div class="Terminal_actions">
                 <twig:CodeBlockButtons source="{{ this.rawSource }}" link="{{ this.githubLink }}"/>
             </div>
         {% endif %}
         <div class="Terminal_content" style="height: {{ height }};"
-            {{ stimulus_target('code-expander', 'codeContent') }}
-            {{ stimulus_controller('code-highlighter') }}
+             data-code-expander-target="codeContent"
+             data-controller="code-highlighter"
         >
             {% for piece in this.prepareSource %}
                 {% if piece.highlight ?? true %}
-                    <pre><code class="language-{{ this.language }}" {{ stimulus_target('code-highlighter', 'codeBlock') }}>
+                    <pre><code class="language-{{ this.language }}" data-code-highlighter-target="codeBlock">
                         {{- piece.content -}}
                     </code></pre>
                 {% else %}
@@ -36,13 +36,13 @@
             <button
                 type="button"
                 class="btn btn-expand-code pt-2 text-center"
-                {{ stimulus_target('code-expander', 'expandCodeButton') }}
-                {{ stimulus_action('code-expander', 'expandCode') }}
+                data-code-expander-target="expandCodeButton"
+                data-action="code-expander#expandCode"
                 style="display: none;"
             >
-                <twig:Icon name="arrow-down" />
+                <twig:Icon name="arrow-down"/>
                 Expand code
-                <twig:Icon name="arrow-down" />
+                <twig:Icon name="arrow-down"/>
             </button>
         {% endblock %}
     </div>

ux.symfony.com/templates/components/CodeBlockButtons.html.twig

@@ -1,8 +1,8 @@
 {% props source, link %}
 
-<div {{ stimulus_controller('ux-clipboard', {
-    source: source,
-})|stimulus_controller('tooltips') }}
+<div
+    data-controller="ux-clipboard tooltips"
+    data-ux-clipboard-source-value="{{ source }}"
     data-ux-clipboard-success-content="Copied!"
     class="code-buttons"
 >
@@ -19,8 +19,8 @@
     <button
         type="button"
         class="btn btn-copy btn-sm"
-        {{ stimulus_action('ux-clipboard', 'copy') }}
+        data-action="ux-clipboard#copy"
     ><twig:Icon name="copy"/>
-        <span {{ stimulus_target('ux-clipboard', 'button') }}> Copy</span>
+        <span data-ux-clipboard-target="button"> Copy</span>
     </button>
 </div>

ux.symfony.com/templates/components/DinoChart.html.twig

@@ -34,7 +34,7 @@
                 data-model="currentTypes"
                 multiple
                 id="dinoTypes"
-                {{ stimulus_controller('symfony/ux-autocomplete/autocomplete') }}
+                data-controller="symfony--ux-autocomplete--autocomplete"
             >
                 {% for type in allTypes %}
                     <option value="{{ type }}">{{ type }}</option>

ux.symfony.com/templates/components/HomepageTerminalSwapper.html.twig

@@ -5,14 +5,13 @@
         {% block content -%}
             <span
                 style="font-size: 1.2em;"
-                {{ stimulus_controller('symfony/ux-typed', {
-                    strings: typedStrings,
-                    loop: true,
-                    showCursor: true,
-                    typeSpeed: 20,
-                    cursorChar: '🖱',
-                    contentType: 'html'
-                }) }}
+                data-controller="symfony--ux-typed"
+                data-symfony--ux-typed-loop-value="true"
+                data-symfony--ux-typed-show-cursor-value="true"
+                data-symfony--ux-typed-type-speed-value="20"
+                data-symfony--ux-typed-cursor-char-value="🖱"
+                data-symfony--ux-typed-content-type-value="html"
+                data-symfony--ux-typed-strings-value="{{ typedStrings|json_encode|e('html_attr') }}"
             ></span>
         {%- endblock %}
     {% endcomponent %}

ux.symfony.com/templates/components/TerminalCommand.html.twig

@@ -1,13 +1,13 @@
-<div {{ attributes.defaults({class: 'TerminalCommand'}).defaults(stimulus_controller('clipboard')) }}>
+<div {{ attributes.defaults({class: 'TerminalCommand'}) }} data-controller="ux-clipboard">
     <pre
         class="TerminalCommand_input"
         aria-label="{{ label|default }}"
-    ><code {{ stimulus_target('clipboard', 'source') }}>{{ command }}</code></pre>
+    ><code data-clipboard-target="source">{{ command }}</code></pre>
     <button
         type="button"
         class="TerminalCommand_action btn btn-copy"
         aria-label="Copy command"
-        {{ stimulus_action('clipboard', 'copy') }}
+        data-action="clipboard#copy"
     >
         <twig:Icon name="copy"/>
     </button>

ux.symfony.com/templates/main/homepage.html.twig

@@ -37,7 +37,7 @@
         </div>
 
         <div class="col-12 col-md-6 mt-3 mt-md-0">
-            <div {{ stimulus_controller('tooltips') }} class="ux-container file-tree flex-grow-1 ms-2 py-3">
+            <div data-controller="tooltips" class="ux-container file-tree flex-grow-1 ms-2 py-3">
                 <div style="height: 185px; overflow: auto;">
                     <ul class="list-unstyled file-tree-main">
                         {{ include('main/_fileTreeLevel.html.twig', {
@@ -77,19 +77,19 @@
     </div>
 
     {% block markdown_example %}
-        <div class="p-4 markdown-container background-glass shadow-blur shadow-blur--rainbow  mt-5 row" {{ stimulus_controller('markdown') }}>
+        <div class="p-4 markdown-container background-glass shadow-blur shadow-blur--rainbow  mt-5 row" data-controller="markdown">
             <div class="col-12 col-md-5">
                 <textarea rows="3" class="form-control" aria-label="Type markdown into this box"
-                    {{ stimulus_target('markdown', 'input') }}
+                          data-markdown-target="input"
                 >Writing JavaScript is a **dream** with Stimulus 🤩</textarea>
             </div>
             <div class="col-12 col-md-2 d-flex justify-content-center align-items-center py-3">
-                <button class="btn btn-dark"
-                    {{ stimulus_action('markdown', 'render') }}
-                >Convert <twig:Icon name="arrow-right"/></button>
+                <button class="btn btn-dark" data-action="markdown#render">
+                    Convert <twig:Icon name="arrow-right"/>
+                </button>
             </div>
             <div class="col-12 col-md-5">
-                <div style="min-height: 86px;" class="markdown-form-render-container p-2" {{ stimulus_target('markdown', 'preview') }} >
+                <div style="min-height: 86px;" class="markdown-form-render-container p-2" data-markdown-target="preview">
                     <small class="fw-light">(click "Convert")</small>
                 </div>
             </div>

ux.symfony.com/templates/ux_packages/lazy-image.html.twig

@@ -41,9 +41,8 @@
 {% block code_block_right %}
     <img
         src="{{ data_uri_thumbnail(legosFilePath, 40, 30) }}"
-        {{ stimulus_controller('symfony/ux-lazy-image/lazy-image', {
-            src: asset('images/legos.jpg')
-        }) }}
+        data-controller="symfony--ux-lazy-image--lazy-image"
+        data-symfony--ux-lazy-image--lazy-image-src="{{ asset('images/legos.jpg') }}"
         alt="A blurhash image that is replaced by the real image on load"
         width="578"
         height="275"

ux.symfony.com/templates/ux_packages/swup.html.twig

@@ -30,7 +30,7 @@
 
 {% block demo_content %}
     {% block swup_specific_demo_content %}
-        <div {{ stimulus_controller('symfony/ux-swup/swup') }} id="swup" data-turbo="false">
+        <div data-controller="symfony--ux-swup--swup" id="swup" data-turbo="false">
             <div class="row">
                 {% for package in pager %}
                     {{ include('main/_package_in_list.html.twig') }}

ux.symfony.com/templates/ux_packages/typed.html.twig

@@ -25,21 +25,21 @@
 
 {% block code_block_right %}
     <div class="p-5" style="font-size: 1.3em;">
+        {% set strings = [
+            'I ❤️ Symfony UX!',
+            'Symfony UX Typed loves to type',
+            'Symfony UX Typed and backspace',
+            'Control the speed',
+            'Control the cursor',
+            'Control your destiny!!!',
+            'Control your destiny... sort of',
+        ] %}
         <span
-            {{ stimulus_controller('symfony/ux-typed', {
-                strings: [
-                    'I ❤️ Symfony UX!',
-                    'Symfony UX Typed loves to type',
-                    'Symfony UX Typed and backspace',
-                    'Control the speed',
-                    'Control the cursor',
-                    'Control your destiny!!!',
-                    'Control your destiny... sort of',
-                ],
-                loop: true,
-                showCursor: true,
-                cursorChar: '✨',
-            }) }}
+            data-controller="symfony--ux-typed"
+            data-symfony--ux-typed-loop-value="true"
+            data-symfony--ux-typed-show-cursor-value="true"
+            data-symfony--ux-typed-cursor-char-value="✨"
+            data-symfony--ux-typed-strings-value="{{ strings|json_encode|e('html_attr') }}"
         ></span>
     </div>
 {% endblock %}