Skip to content

Commit 3847e39

Browse files
tgalopintgalopin
committed
bug #43 Implement normalized controller names (tgalopin)
This PR was merged into the main branch. Discussion ---------- Implement normalized controller names | Q | A | ------------- | --- | Bug fix? | yes | New feature? | no | Tickets | Fix #33 | License | MIT Following symfony/stimulus-bridge#12, implement controller names normalizing. This will be a BC break for lazy-image and Swup users but it only requires a small change and is necessary for the development of additional UX packages based on Stimulus 2. Commits ------- 6cfd4a8 Implement normalized controller names
2 parents a2dd769 + 6cfd4a8 commit 3847e39

File tree

11 files changed

+33
-33
lines changed

11 files changed

+33
-33
lines changed

‎src/Chartjs/Tests/Twig/ChartExtensionTest.php

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -59,7 +59,7 @@ public function testRenderChart()
5959

6060
$this->assertSame(
6161
'<canvas
62-
data-controller="mycontroller @symfony/ux-chartjs/chart"
62+
data-controller="mycontroller symfony--ux-chartjs--chart"
6363
data-view="&#x7B;&quot;type&quot;&#x3A;&quot;line&quot;,&quot;data&quot;&#x3A;&#x7B;&quot;labels&quot;&#x3A;&#x5B;&quot;January&quot;,&quot;February&quot;,&quot;March&quot;,&quot;April&quot;,&quot;May&quot;,&quot;June&quot;,&quot;July&quot;&#x5D;,&quot;datasets&quot;&#x3A;&#x5B;&#x7B;&quot;label&quot;&#x3A;&quot;My&#x20;First&#x20;dataset&quot;,&quot;backgroundColor&quot;&#x3A;&quot;rgb&#x28;255,&#x20;99,&#x20;132&#x29;&quot;,&quot;borderColor&quot;&#x3A;&quot;rgb&#x28;255,&#x20;99,&#x20;132&#x29;&quot;,&quot;data&quot;&#x3A;&#x5B;0,10,5,2,20,30,45&#x5D;&#x7D;&#x5D;&#x7D;,&quot;options&quot;&#x3A;&#x7B;&quot;showLines&quot;&#x3A;false&#x7D;&#x7D;"
6464
class="myclass"></canvas>',
6565
$rendered

‎src/Chartjs/Twig/ChartExtension.php

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -37,7 +37,7 @@ public function renderChart(Environment $env, Chart $chart, array $attributes =
3737

3838
$html = '
3939
<canvas
40-
data-controller="'.trim($chart->getDataController().' @symfony/ux-chartjs/chart').'"
40+
data-controller="'.trim($chart->getDataController().' symfony--ux-chartjs--chart').'"
4141
data-view="'.twig_escape_filter($env, json_encode($chart->createView()), 'html_attr').'"
4242
';
4343

‎src/Cropperjs/Form/CropperType.php

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -33,7 +33,7 @@ public function buildForm(FormBuilderInterface $builder, array $options)
3333
->add('options', HiddenType::class, [
3434
'error_bubbling' => true,
3535
'attr' => [
36-
'data-controller' => trim(($options['attr']['data-controller'] ?? '').' @symfony/ux-cropperjs/cropper'),
36+
'data-controller' => trim(($options['attr']['data-controller'] ?? '').' symfony--ux-cropperjs--cropper'),
3737
'data-public-url' => $options['public_url'],
3838
'data-view-mode' => $options['view_mode'],
3939
'data-drag-mode' => $options['drag_mode'],

‎src/Cropperjs/Resources/assets/dist/controller.js

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,8 @@
88
*/
99
'use strict';
1010

11+
function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
12+
1113
Object.defineProperty(exports, "__esModule", {
1214
value: true
1315
});
@@ -19,8 +21,6 @@ var _cropperjs = _interopRequireDefault(require("cropperjs"));
1921

2022
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
2123

22-
function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
23-
2424
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
2525

2626
function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } }

‎src/Cropperjs/Tests/Form/CropperTypeTest.php

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -77,7 +77,7 @@ public function testRenderFull()
7777
'<div>'.
7878
'<div id="form_photo" class="cropperjs">'.
7979
'<input type="hidden" id="form_photo_options" name="form[photo][options]" '.
80-
'data-controller="mycropper @symfony/ux-cropperjs/cropper" '.
80+
'data-controller="mycropper symfony--ux-cropperjs--cropper" '.
8181
'data-public-url="/public/url.jpg" '.
8282
'data-view-mode="1" '.
8383
'data-drag-mode="move" '.
@@ -141,7 +141,7 @@ public function testRenderNoOptions()
141141
'<div>'.
142142
'<div id="form_photo" class="cropperjs">'.
143143
'<input type="hidden" id="form_photo_options" name="form[photo][options]" '.
144-
'data-controller="mycropper @symfony/ux-cropperjs/cropper" '.
144+
'data-controller="mycropper symfony--ux-cropperjs--cropper" '.
145145
'data-public-url="/public/url.jpg" '.
146146
'data-view-mode="0" '.
147147
'data-drag-mode="crop" '.

‎src/Dropzone/Resources/views/form_theme.html.twig

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,24 +1,24 @@
11
{% block dropzone_widget -%}
2-
{%- set dataController = (attr['data-controller']|default('') ~ ' @symfony/ux-dropzone/dropzone')|trim -%}
2+
{%- set dataController = (attr['data-controller']|default('') ~ ' symfony--ux-dropzone--dropzone')|trim -%}
33
{%- set attr = attr|merge({ 'data-controller': '', class: (attr.class|default('') ~ ' dropzone-input')|trim}) -%}
44

55
<div class="dropzone-container" data-controller="{{ dataController }}">
6-
<input type="file" {{ block('widget_attributes') }} data-target="@symfony/ux-dropzone/dropzone.input" />
6+
<input type="file" {{ block('widget_attributes') }} data-symfony--ux-dropzone--dropzone-target="input" />
77

8-
<div class="dropzone-placeholder" data-target="@symfony/ux-dropzone/dropzone.placeholder">
8+
<div class="dropzone-placeholder" data-symfony--ux-dropzone--dropzone-target="placeholder">
99
{%- if attr.placeholder is defined and attr.placeholder is not none -%}
1010
{{- translation_domain is same as(false) ? attr.placeholder : attr.placeholder|trans({}, translation_domain) -}}
1111
{%- endif -%}
1212
</div>
1313

14-
<div class="dropzone-preview" data-target="@symfony/ux-dropzone/dropzone.preview" style="display: none">
14+
<div class="dropzone-preview" data-symfony--ux-dropzone--dropzone-target="preview" style="display: none">
1515
<button class="dropzone-preview-button" type="button"
16-
data-target="@symfony/ux-dropzone/dropzone.previewClearButton"></button>
16+
data-symfony--ux-dropzone--dropzone-target="previewClearButton"></button>
1717

1818
<div class="dropzone-preview-image" style="display: none"
19-
data-target="@symfony/ux-dropzone/dropzone.previewImage"></div>
19+
data-symfony--ux-dropzone--dropzone-target="previewImage"></div>
2020

21-
<div data-target="@symfony/ux-dropzone/dropzone.previewFilename" class="dropzone-preview-filename"></div>
21+
<div data-symfony--ux-dropzone--dropzone-target="previewFilename" class="dropzone-preview-filename"></div>
2222
</div>
2323
</div>
2424
{%- endblock %}

‎src/Dropzone/Tests/Form/DropzoneTypeTest.php

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -38,19 +38,19 @@ public function testRenderForm()
3838
$rendered = $container->get(Environment::class)->render('dropzone_form.html.twig', ['form' => $form->createView()]);
3939

4040
$this->assertSame(
41-
'<form name="form" method="post" enctype="multipart/form-data"><div id="form"><div><label for="form_photo" class="required">Photo</label><div class="dropzone-container" data-controller="mydropzone @symfony/ux-dropzone/dropzone">
42-
<input type="file" id="form_photo" name="form[photo]" required="required" data-controller="" class="dropzone-input" data-target="@symfony/ux-dropzone/dropzone.input" />
41+
'<form name="form" method="post" enctype="multipart/form-data"><div id="form"><div><label for="form_photo" class="required">Photo</label><div class="dropzone-container" data-controller="mydropzone symfony--ux-dropzone--dropzone">
42+
<input type="file" id="form_photo" name="form[photo]" required="required" data-controller="" class="dropzone-input" data-symfony--ux-dropzone--dropzone-target="input" />
4343
44-
<div class="dropzone-placeholder" data-target="@symfony/ux-dropzone/dropzone.placeholder"></div>
44+
<div class="dropzone-placeholder" data-symfony--ux-dropzone--dropzone-target="placeholder"></div>
4545
46-
<div class="dropzone-preview" data-target="@symfony/ux-dropzone/dropzone.preview" style="display: none">
46+
<div class="dropzone-preview" data-symfony--ux-dropzone--dropzone-target="preview" style="display: none">
4747
<button class="dropzone-preview-button" type="button"
48-
data-target="@symfony/ux-dropzone/dropzone.previewClearButton"></button>
48+
data-symfony--ux-dropzone--dropzone-target="previewClearButton"></button>
4949
5050
<div class="dropzone-preview-image" style="display: none"
51-
data-target="@symfony/ux-dropzone/dropzone.previewImage"></div>
51+
data-symfony--ux-dropzone--dropzone-target="previewImage"></div>
5252
53-
<div data-target="@symfony/ux-dropzone/dropzone.previewFilename" class="dropzone-preview-filename"></div>
53+
<div data-symfony--ux-dropzone--dropzone-target="previewFilename" class="dropzone-preview-filename"></div>
5454
</div>
5555
</div></div></div></form>
5656
',

‎src/LazyImage/README.md

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -31,7 +31,7 @@ page has been rendered:
3131
```twig
3232
<img
3333
src="{{ asset('image/small.png') }}"
34-
data-controller="@symfony/ux-lazy-image/lazy-image"
34+
data-controller="symfony--ux-lazy-image--lazy-image"
3535
data-hd-src="{{ asset('image/large.png') }}"
3636
3737
{# Optional but avoids having a page jump when the image is loaded #}
@@ -46,7 +46,7 @@ the BlurHash algorithm to create a light, blurred, data-uri thumbnail of the ima
4646
```twig
4747
<img
4848
src="{{ data_uri_thumbnail('public/image/large.png', 100, 75) }}"
49-
data-controller="@symfony/ux-lazy-image/lazy-image"
49+
data-controller="symfony--ux-lazy-image--lazy-image"
5050
data-hd-src="{{ asset('image/large.png') }}"
5151
5252
{# Using BlurHash, the size is required #}
@@ -101,7 +101,7 @@ Then in your template, add your controller to the HTML attribute:
101101
```twig
102102
<img
103103
src="{{ data_uri_thumbnail('public/image/large.png', 100, 75) }}"
104-
data-controller="mylazyimage @symfony/ux-lazy-image/lazy-image"
104+
data-controller="mylazyimage symfony--ux-lazy-image--lazy-image"
105105
data-hd-src="{{ asset('image/large.png') }}"
106106
107107
{# Using BlurHash, the size is required #}

‎src/LazyImage/Resources/assets/dist/controller.js

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -8,15 +8,15 @@
88
*/
99
'use strict';
1010

11+
function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
12+
1113
Object.defineProperty(exports, "__esModule", {
1214
value: true
1315
});
1416
exports["default"] = void 0;
1517

1618
var _stimulus = require("stimulus");
1719

18-
function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
19-
2020
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
2121

2222
function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } }

‎src/Swup/README.md

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -36,7 +36,7 @@ The main usage of Symfony UX Swup is to use its Stimulus controller to initializ
3636
<head>
3737
<title>Swup</title>
3838
</head>
39-
<body data-controller="@symfony/ux-swup/swup">
39+
<body data-controller="symfony--ux-swup--swup">
4040
{# ... #}
4141
4242
<main id="swup">
@@ -62,7 +62,7 @@ additional containers, for instance to have a navigation menu that updates when
6262
<title>Swup</title>
6363
</head>
6464
<body
65-
data-controller="@symfony/ux-swup/swup"
65+
data-controller="symfony--ux-swup--swup"
6666
data-containers="#swup #nav" {# list of selectors separated by spaces #}
6767
>
6868
{# ... #}
@@ -90,7 +90,7 @@ You can configure several other options using data-attributes on the `body` tag:
9090
<title>Swup</title>
9191
</head>
9292
<body
93-
data-controller="@symfony/ux-swup/swup"
93+
data-controller="symfony--ux-swup--swup"
9494
data-containers="#swup #nav"
9595
data-theme="slide" {# or "fade", the default #}
9696
data-debug="data-debug" {# add this attribute to enable debug #}
@@ -136,7 +136,7 @@ Then in your template, add your controller to the HTML attribute:
136136
<head>
137137
<title>Swup</title>
138138
</head>
139-
<body data-controller="myswup @symfony/ux-swup/swup">
139+
<body data-controller="myswup symfony--ux-swup--swup">
140140
{# ... #}
141141
</body>
142142
</html>

‎src/Swup/Resources/assets/dist/controller.js

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,8 @@
88
*/
99
'use strict';
1010

11+
function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
12+
1113
Object.defineProperty(exports, "__esModule", {
1214
value: true
1315
});
@@ -27,8 +29,6 @@ var _slideTheme = _interopRequireDefault(require("@swup/slide-theme"));
2729

2830
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
2931

30-
function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
31-
3232
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
3333

3434
function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } }
@@ -67,7 +67,7 @@ var _default = /*#__PURE__*/function (_Controller) {
6767
containers: ['#swup'],
6868
cache: this.element.hasAttribute('data-cache'),
6969
animateHistoryBrowsing: this.element.hasAttribute('data-animate-history-browsing'),
70-
plugins: ['slide' === this.element.hasAttribute('data-theme') ? new _slideTheme["default"]() : new _fadeTheme["default"](), new _formsPlugin["default"]()]
70+
plugins: ['slide' === this.element.getAttribute('data-theme') ? new _slideTheme["default"]() : new _fadeTheme["default"](), new _formsPlugin["default"]()]
7171
};
7272

7373
if (this.element.getAttribute('data-containers')) {

0 commit comments

Comments
 (0)