[LazyImage] Renaming values to just src and srcset

Author: weaverryan

src/LazyImage/CHANGELOG.md

@@ -5,4 +5,6 @@
 -   Support for `stimulus` version 2 was removed and support for `@hotwired/stimulus`
     version 3 was added. See the [@symfony/stimulus-bridge CHANGELOG](https://github.com/symfony/stimulus-bridge/blob/main/CHANGELOG.md#300)
     for more details.
+-   The `data-hd-src` attribute was changed to use a Stimulus value called `src`. See the
+    updated README for usage.
 -   Support added for Symfony 6

src/LazyImage/README.md

@@ -35,7 +35,7 @@ page has been rendered:
 <img
     src="{{ asset('image/small.png') }}"
     {{ stimulus_controller('symfony/ux-lazy-image/lazy-image', {
-        hdSrc: asset('image/large.png')
+        src: asset('image/large.png')
     }) }}
 
     {# Optional but avoids having a page jump when the image is loaded #}
@@ -49,16 +49,16 @@ once the page has loaded and the user's browser has downloaded the larger
 image, the `src` attribute will change to `image/large.png`.
 
 There is also support for the `srcset` attribute by passing an
-`hdSrcset` value to the controller:
+`srcset` value to the controller:
 
 ```twig
 <img
     src="{{ asset('image/small.png') }}"
     srcset="{{ asset('image/small.png') }} 1x, {{ asset('image/small2x.png') }} 2x"
 
     {{ stimulus_controller('symfony/ux-lazy-image/lazy-image', {
-        hdSrc: asset('image/large.png'),
-        hdSrcset: {
+        src: asset('image/large.png'),
+        srcset: {
             '1x': asset('image/large.png'),
             '2x': asset('image/large2x.png')
         }
@@ -76,7 +76,7 @@ the BlurHash algorithm to create a light, blurred, data-uri thumbnail of the ima
 <img
     src="{{ data_uri_thumbnail('public/image/large.png', 100, 75) }}"
     {{ stimulus_controller('symfony/ux-lazy-image/lazy-image', {
-        hdSrc: asset('image/large.png')
+        src: asset('image/large.png')
     }) }}
 
     {# Using BlurHash, the size is required #}
@@ -134,7 +134,7 @@ Then in your template, add your controller to the HTML attribute:
     {{ stimulus_controller({
         mylazyimage: {},
         'symfony/ux-lazy-image/lazy-image': {
-            hdSrc: asset('image/large.png')
+            src: asset('image/large.png')
         }
     }) }}
 

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

@@ -5,25 +5,25 @@ class default_1 extends Controller {
         const hd = new Image();
         const srcsetString = this._calculateSrcsetString();
         hd.addEventListener('load', () => {
-            this.element.src = this.hdSrcValue;
+            this.element.src = this.srcValue;
             if (srcsetString) {
                 this.element.srcset = srcsetString;
             }
             this._dispatchEvent('lazy-image:ready', { hd });
         });
-        hd.src = this.hdSrcValue;
+        hd.src = this.srcValue;
         if (srcsetString) {
             hd.srcset = srcsetString;
         }
         this._dispatchEvent('lazy-image:connect', { hd });
     }
     _calculateSrcsetString() {
-        if (!this.hasHdSrcsetValue) {
+        if (!this.hasSrcsetValue) {
             return '';
         }
-        const sets = Object.keys(this.hdSrcsetValue).map((size => {
-            return `${this.hdSrcsetValue[size]} ${size}`;
-        }));
+        const sets = Object.keys(this.srcsetValue).map((size) => {
+            return `${this.srcsetValue[size]} ${size}`;
+        });
         return sets.join(', ').trimEnd();
     }
     _dispatchEvent(name, payload = null, canBubble = false, cancelable = false) {
@@ -33,8 +33,8 @@ class default_1 extends Controller {
     }
 }
 default_1.values = {
-    hdSrc: String,
-    hdSrcset: Object
+    src: String,
+    srcset: Object,
 };
 
 export { default_1 as default };

src/LazyImage/Resources/assets/src/controller.ts

@@ -13,8 +13,8 @@ import { Controller } from '@hotwired/stimulus';
 
 export default class extends Controller {
     static values = {
-        hdSrc: String,
-        hdSrcset: Object
+        src: String,
+        srcset: Object,
     };
 
     connect() {
@@ -23,14 +23,14 @@ export default class extends Controller {
         const srcsetString = this._calculateSrcsetString();
 
         hd.addEventListener('load', () => {
-            this.element.src = this.hdSrcValue;
+            this.element.src = this.srcValue;
             if (srcsetString) {
                 this.element.srcset = srcsetString;
             }
             this._dispatchEvent('lazy-image:ready', { hd });
         });
 
-        hd.src = this.hdSrcValue;
+        hd.src = this.srcValue;
         if (srcsetString) {
             hd.srcset = srcsetString;
         }
@@ -39,13 +39,13 @@ export default class extends Controller {
     }
 
     _calculateSrcsetString(): string {
-        if (!this.hasHdSrcsetValue) {
+        if (!this.hasSrcsetValue) {
             return '';
         }
 
-        const sets = Object.keys(this.hdSrcsetValue).map((size => {
-            return `${this.hdSrcsetValue[size]} ${size}`;
-        }));
+        const sets = Object.keys(this.srcsetValue).map((size) => {
+            return `${this.srcsetValue[size]} ${size}`;
+        });
 
         return sets.join(', ').trimEnd();
     }

src/LazyImage/Resources/assets/test/controller.test.ts

@@ -41,8 +41,8 @@ describe('LazyImageController', () => {
               src="https://symfony.com/logos/symfony_black_02.png"
               srcset="https://symfony.com/logos/symfony_black_02.png 1x, https://symfony.com/logos/symfony_black_02.png 2x"
               data-testid="img"
-              data-lazy-image-hd-src-value="https://symfony.com/logos/symfony_black_03.png"
-              data-lazy-image-hd-srcset-value="{"1x": "https://symfony.com/logos/symfony_black_03.png", "2x": "https://symfony.com/logos/symfony_black_03_2x.png"}"
+              data-lazy-image-src-value="https://symfony.com/logos/symfony_black_03.png"
+              data-lazy-image-srcset-value="{"1x": "https://symfony.com/logos/symfony_black_03.png", "2x": "https://symfony.com/logos/symfony_black_03_2x.png"}"
               data-controller="check lazy-image" />
         `);
     });