symfony · weaverryan · Feb 20, 2024 · Feb 18, 2024
diff --git a/ux.symfony.com/src/Model/RecipeFileTree.php b/ux.symfony.com/src/Model/RecipeFileTree.php
@@ -23,7 +23,7 @@ public function __construct()
             ->addFile('assets/app.js', 'Your main JavaScript file. It\'s job is to import and load all other files.')
             ->addFile('assets/controllers.json', 'Configures 3rd-party Stimulus controllers. This file is automatically updated when you install a UX package.')
             ->addDirectory('assets/controllers', 'The home of your custom Stimulus controllers!')
-            ->addFile('assets/controllers/hello_controller.js', 'An example controller. Add it to any element with <code class="text-nowrap">{{ stimulus_controller(\'hello\') }}</code>')
+            ->addFile('assets/controllers/hello_controller.js', 'An example controller. Add it to any element with <code class="text-nowrap">data-controller="hello"</code>')
             ->addDirectory('assets/styles')
             ->addFile('assets/styles/app.css', 'Your main CSS file')
             ->addFile('package.json', 'Holds your node dependencies, most importantly Stimulus & Webpack Encore.')

diff --git a/ux.symfony.com/src/Util/SourceCleaner.php b/ux.symfony.com/src/Util/SourceCleaner.php
@@ -151,7 +151,13 @@ public static function extractTwigBlock(string $content, string $targetTwigBlock
     public static function removeExcessHtml(string $content): string
     {
         // remove all HTML attributes and values + whitespace around them
-        $content = preg_replace('/\s+[a-z0-9-]+="[^"]*"/', '', $content);
+        $content = preg_replace_callback('/\s+[a-z0-9-]+="[^"]*"/', function($matches) {
+            if (str_starts_with(trim($matches[0]), 'data-')) {
+                return $matches[0];
+            }
+
+            return '';
+        }, $content);
 
         // Find all the <div> elements without attributes
         preg_match_all('/<div>\s*(.*?)\s*<\/div>/s', $content, $matches);

diff --git a/ux.symfony.com/templates/components/BootstrapModal.html.twig b/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 %}

diff --git a/ux.symfony.com/templates/components/CodeBlock.html.twig b/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>

diff --git a/ux.symfony.com/templates/components/CodeBlockButtons.html.twig b/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>
diff --git a/ux.symfony.com/templates/components/DinoChart.html.twig b/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>

diff --git a/ux.symfony.com/templates/components/HomepageTerminalSwapper.html.twig b/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 %}

diff --git a/ux.symfony.com/templates/components/TerminalCommand.html.twig b/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>

diff --git a/ux.symfony.com/templates/main/homepage.html.twig b/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>

diff --git a/ux.symfony.com/templates/ux_packages/lazy-image.html.twig b/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"

diff --git a/ux.symfony.com/templates/ux_packages/swup.html.twig b/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') }}