Skip to content

Commit c358863

Browse files
weaverryanweaverryan
committed
minor #1517 [Site] Replace stimulus_* helpers with data-attributes (smnandre)
This PR was squashed before being merged into the 2.x branch. Discussion ---------- [Site] Replace stimulus_* helpers with data-attributes Fixes #1514 - cc `@seb`-jean `@weaverryan` : I had to adapt a bit the SourceCleaner to keep data-* attributes. Commits ------- a32d41e [Site] Replace stimulus_* helpers with data-attributes
2 parents e8fce4d + a32d41e commit c358863

14 files changed

+102
-96
lines changed

‎ux.symfony.com/src/Model/RecipeFileTree.php

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -23,7 +23,7 @@ public function __construct()
2323
->addFile('assets/app.js', 'Your main JavaScript file. It\'s job is to import and load all other files.')
2424
->addFile('assets/controllers.json', 'Configures 3rd-party Stimulus controllers. This file is automatically updated when you install a UX package.')
2525
->addDirectory('assets/controllers', 'The home of your custom Stimulus controllers!')
26-
->addFile('assets/controllers/hello_controller.js', 'An example controller. Add it to any element with <code class="text-nowrap">{{ stimulus_controller(\'hello\') }}</code>')
26+
->addFile('assets/controllers/hello_controller.js', 'An example controller. Add it to any element with <code class="text-nowrap">data-controller="hello"</code>')
2727
->addDirectory('assets/styles')
2828
->addFile('assets/styles/app.css', 'Your main CSS file')
2929
->addFile('package.json', 'Holds your node dependencies, most importantly Stimulus & Webpack Encore.')

‎ux.symfony.com/src/Util/SourceCleaner.php

Lines changed: 7 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -151,7 +151,13 @@ public static function extractTwigBlock(string $content, string $targetTwigBlock
151151
public static function removeExcessHtml(string $content): string
152152
{
153153
// remove all HTML attributes and values + whitespace around them
154-
$content = preg_replace('/\s+[a-z0-9-]+="[^"]*"/', '', $content);
154+
$content = preg_replace_callback('/\s+[a-z0-9-]+="[^"]*"/', function($matches) {
155+
if (str_starts_with(trim($matches[0]), 'data-')) {
156+
return $matches[0];
157+
}
158+
159+
return '';
160+
}, $content);
155161

156162
// Find all the <div> elements without attributes
157163
preg_match_all('/<div>\s*(.*?)\s*<\/div>/s', $content, $matches);

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

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,9 @@
33
tabindex: '-1',
44
'aria-hidden': 'true',
55
id: id ? id : false,
6-
}).defaults(stimulus_controller('bootstrap-modal')) }}>
6+
}) }}
7+
data-controller="bootstrap-modal"
8+
>
79
<div class="modal-dialog">
810
<div class="modal-content">
911
{% block modal_full_content %}

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

Lines changed: 8 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -11,19 +11,19 @@
1111
</div>
1212
{% endif %}
1313

14-
<div class="Terminal_body" {{ stimulus_controller('code-expander') }}>
14+
<div class="Terminal_body" data-controller="code-expander">
1515
{% if not showFilename %}
1616
<div class="Terminal_actions">
1717
<twig:CodeBlockButtons source="{{ this.rawSource }}" link="{{ this.githubLink }}"/>
1818
</div>
1919
{% endif %}
2020
<div class="Terminal_content" style="height: {{ height }};"
21-
{{ stimulus_target('code-expander', 'codeContent') }}
22-
{{ stimulus_controller('code-highlighter') }}
21+
data-code-expander-target="codeContent"
22+
data-controller="code-highlighter"
2323
>
2424
{% for piece in this.prepareSource %}
2525
{% if piece.highlight ?? true %}
26-
<pre><code class="language-{{ this.language }}" {{ stimulus_target('code-highlighter', 'codeBlock') }}>
26+
<pre><code class="language-{{ this.language }}" data-code-highlighter-target="codeBlock">
2727
{{- piece.content -}}
2828
</code></pre>
2929
{% else %}
@@ -36,13 +36,13 @@
3636
<button
3737
type="button"
3838
class="btn btn-expand-code pt-2 text-center"
39-
{{ stimulus_target('code-expander', 'expandCodeButton') }}
40-
{{ stimulus_action('code-expander', 'expandCode') }}
39+
data-code-expander-target="expandCodeButton"
40+
data-action="code-expander#expandCode"
4141
style="display: none;"
4242
>
43-
<twig:Icon name="arrow-down" />
43+
<twig:Icon name="arrow-down"/>
4444
Expand code
45-
<twig:Icon name="arrow-down" />
45+
<twig:Icon name="arrow-down"/>
4646
</button>
4747
{% endblock %}
4848
</div>

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

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,8 @@
11
{% props source, link %}
22

3-
<div {{ stimulus_controller('ux-clipboard', {
4-
source: source,
5-
})|stimulus_controller('tooltips') }}
3+
<div
4+
data-controller="ux-clipboard tooltips"
5+
data-ux-clipboard-source-value="{{ source }}"
66
data-ux-clipboard-success-content="Copied!"
77
class="code-buttons"
88
>
@@ -19,8 +19,8 @@
1919
<button
2020
type="button"
2121
class="btn btn-copy btn-sm"
22-
{{ stimulus_action('ux-clipboard', 'copy') }}
22+
data-action="ux-clipboard#copy"
2323
><twig:Icon name="copy"/>
24-
<span {{ stimulus_target('ux-clipboard', 'button') }}> Copy</span>
24+
<span data-ux-clipboard-target="button"> Copy</span>
2525
</button>
2626
</div>

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -34,7 +34,7 @@
3434
data-model="currentTypes"
3535
multiple
3636
id="dinoTypes"
37-
{{ stimulus_controller('symfony/ux-autocomplete/autocomplete') }}
37+
data-controller="symfony--ux-autocomplete--autocomplete"
3838
>
3939
{% for type in allTypes %}
4040
<option value="{{ type }}">{{ type }}</option>

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

Lines changed: 7 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -5,14 +5,13 @@
55
{% block content -%}
66
<span
77
style="font-size: 1.2em;"
8-
{{ stimulus_controller('symfony/ux-typed', {
9-
strings: typedStrings,
10-
loop: true,
11-
showCursor: true,
12-
typeSpeed: 20,
13-
cursorChar: '🖱',
14-
contentType: 'html'
15-
}) }}
8+
data-controller="symfony--ux-typed"
9+
data-symfony--ux-typed-loop-value="true"
10+
data-symfony--ux-typed-show-cursor-value="true"
11+
data-symfony--ux-typed-type-speed-value="20"
12+
data-symfony--ux-typed-cursor-char-value="🖱"
13+
data-symfony--ux-typed-content-type-value="html"
14+
data-symfony--ux-typed-strings-value="{{ typedStrings|json_encode|e('html_attr') }}"
1615
></span>
1716
{%- endblock %}
1817
{% endcomponent %}

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

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,13 @@
1-
<div {{ attributes.defaults({class: 'TerminalCommand'}).defaults(stimulus_controller('clipboard')) }}>
1+
<div {{ attributes.defaults({class: 'TerminalCommand'}) }} data-controller="ux-clipboard">
22
<pre
33
class="TerminalCommand_input"
44
aria-label="{{ label|default }}"
5-
><code {{ stimulus_target('clipboard', 'source') }}>{{ command }}</code></pre>
5+
><code data-clipboard-target="source">{{ command }}</code></pre>
66
<button
77
type="button"
88
class="TerminalCommand_action btn btn-copy"
99
aria-label="Copy command"
10-
{{ stimulus_action('clipboard', 'copy') }}
10+
data-action="clipboard#copy"
1111
>
1212
<twig:Icon name="copy"/>
1313
</button>

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

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -37,7 +37,7 @@
3737
</div>
3838

3939
<div class="col-12 col-md-6 mt-3 mt-md-0">
40-
<div {{ stimulus_controller('tooltips') }} class="ux-container file-tree flex-grow-1 ms-2 py-3">
40+
<div data-controller="tooltips" class="ux-container file-tree flex-grow-1 ms-2 py-3">
4141
<div style="height: 185px; overflow: auto;">
4242
<ul class="list-unstyled file-tree-main">
4343
{{ include('main/_fileTreeLevel.html.twig', {
@@ -77,19 +77,19 @@
7777
</div>
7878

7979
{% block markdown_example %}
80-
<div class="p-4 markdown-container background-glass shadow-blur shadow-blur--rainbow mt-5 row" {{ stimulus_controller('markdown') }}>
80+
<div class="p-4 markdown-container background-glass shadow-blur shadow-blur--rainbow mt-5 row" data-controller="markdown">
8181
<div class="col-12 col-md-5">
8282
<textarea rows="3" class="form-control" aria-label="Type markdown into this box"
83-
{{ stimulus_target('markdown', 'input') }}
83+
data-markdown-target="input"
8484
>Writing JavaScript is a **dream** with Stimulus 🤩</textarea>
8585
</div>
8686
<div class="col-12 col-md-2 d-flex justify-content-center align-items-center py-3">
87-
<button class="btn btn-dark"
88-
{{ stimulus_action('markdown', 'render') }}
89-
>Convert <twig:Icon name="arrow-right"/></button>
87+
<button class="btn btn-dark" data-action="markdown#render">
88+
Convert <twig:Icon name="arrow-right"/>
89+
</button>
9090
</div>
9191
<div class="col-12 col-md-5">
92-
<div style="min-height: 86px;" class="markdown-form-render-container p-2" {{ stimulus_target('markdown', 'preview') }} >
92+
<div style="min-height: 86px;" class="markdown-form-render-container p-2" data-markdown-target="preview">
9393
<small class="fw-light">(click "Convert")</small>
9494
</div>
9595
</div>

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

Lines changed: 2 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -41,9 +41,8 @@
4141
{% block code_block_right %}
4242
<img
4343
src="{{ data_uri_thumbnail(legosFilePath, 40, 30) }}"
44-
{{ stimulus_controller('symfony/ux-lazy-image/lazy-image', {
45-
src: asset('images/legos.jpg')
46-
}) }}
44+
data-controller="symfony--ux-lazy-image--lazy-image"
45+
data-symfony--ux-lazy-image--lazy-image-src="{{ asset('images/legos.jpg') }}"
4746
alt="A blurhash image that is replaced by the real image on load"
4847
width="578"
4948
height="275"

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -30,7 +30,7 @@
3030

3131
{% block demo_content %}
3232
{% block swup_specific_demo_content %}
33-
<div {{ stimulus_controller('symfony/ux-swup/swup') }} id="swup" data-turbo="false">
33+
<div data-controller="symfony--ux-swup--swup" id="swup" data-turbo="false">
3434
<div class="row">
3535
{% for package in pager %}
3636
{{ include('main/_package_in_list.html.twig') }}

0 commit comments

Comments
 (0)