Update SourceCleaner to keep data-*

Author: smnandre

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.')

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);

ux.symfony.com/tests/Unit/Util/SourceCleanerTest.php

@@ -109,34 +109,34 @@ public function testItExtractsTwigBlock(): void
     public function testItRemovesExcessHtml(): void
     {
         $input = <<<EOF
-            <div class="p-4 markdown-container shadow-blur shadow-blur--rainbow mt-5 row" {{ stimulus_controller('markdown') }}>
+            <div class="p-4 markdown-container 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 text-center">
-                    <button class="btn btn-sm btn-dark mt-3" {{ stimulus_action('markdown', 'render') }}>
+                    <button class="btn btn-sm btn-dark mt-3" data-action="markdown#render">
                         Convert <i class="fa fa-arrow-right"></i>
                     </button>
                 </div>
                 <div class="col-12 col-md-5 mt-3 mt-md-0">
-                    <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>
             </div>
             EOF;
 
         $expected = <<<EOF
-            <div {{ stimulus_controller('markdown') }}>
+            <div data-controller="markdown">
                 <textarea
-                    {{ stimulus_target('markdown', 'input') }}
+                    data-markdown-target="input"
                 >Writing JavaScript is a **dream** with Stimulus 🤩</textarea>
-                <button {{ stimulus_action('markdown', 'render') }}>
+                <button data-action="markdown#render">
                     Convert <i></i>
                 </button>
-                <div {{ stimulus_target('markdown', 'preview') }} >
+                <div data-markdown-target="preview">
                     <small>(click "Convert")</small>
                 </div>
             </div>