Converting LazyImage to use values

Author: weaverryan

src/LazyImage/README.md

@@ -34,15 +34,35 @@ page has been rendered:
 ```twig
 <img
     src="{{ asset('image/small.png') }}"
-    {{ stimulus_controller('symfony/ux-lazy-image/lazy-image') }}
-    data-hd-src="{{ asset('image/large.png') }}"
-
-    srcset="{{ asset('image/small.png') }} 1x, {{ asset('image/small2x.png') }} 2x"
-    data-hd-srcset="{{ asset('image/large.png') }} 1x, {{ asset('image/large2x.png') }} 2x"
+    {{ stimulus_controller('symfony/ux-lazy-image/lazy-image', {
+        hdSrc: asset('image/large.png')
+    }) }}
 
     {# Optional but avoids having a page jump when the image is loaded #}
     width="200"
     height="150"
+>
+```
+
+With this setup, the user will initially see `images/small.png`. Then,
+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:
+
+```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: {
+            '1x': asset('image/large.png'),
+            '2x': asset('image/large2x.png')
+        }
+    }) }}
 />
 ```
 
@@ -55,8 +75,9 @@ the BlurHash algorithm to create a light, blurred, data-uri thumbnail of the ima
 ```twig
 <img
     src="{{ data_uri_thumbnail('public/image/large.png', 100, 75) }}"
-    {{ stimulus_controller('symfony/ux-lazy-image/lazy-image') }}
-    data-hd-src="{{ asset('image/large.png') }}"
+    {{ stimulus_controller('symfony/ux-lazy-image/lazy-image', {
+        hdSrc: asset('image/large.png')
+    }) }}
 
     {# Using BlurHash, the size is required #}
     width="200"
@@ -112,9 +133,10 @@ Then in your template, add your controller to the HTML attribute:
     src="{{ data_uri_thumbnail('public/image/large.png', 100, 75) }}"
     {{ stimulus_controller({
         mylazyimage: {},
-        'symfony/ux-lazy-image/lazy-image': {}
+        'symfony/ux-lazy-image/lazy-image': {
+            hdSrc: asset('image/large.png')
+        }
     }) }}
-    data-hd-src="{{ asset('image/large.png') }}"
 
     {# Using BlurHash, the size is required #}
     width="200"

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

@@ -1,26 +1,40 @@
 import { Controller } from '@hotwired/stimulus';
 
-class controller extends Controller {
+class default_1 extends Controller {
     connect() {
         const hd = new Image();
+        const srcsetString = this._calculateSrcsetString();
         hd.addEventListener('load', () => {
-            this.element.src = this.element.getAttribute('data-hd-src');
-            if (this.element.getAttribute('data-hd-srcset')) {
-                this.element.srcset = this.element.getAttribute('data-hd-srcset');
+            this.element.src = this.hdSrcValue;
+            if (srcsetString) {
+                this.element.srcset = srcsetString;
             }
             this._dispatchEvent('lazy-image:ready', { hd });
         });
-        hd.src = this.element.getAttribute('data-hd-src');
-        if (this.element.getAttribute('data-hd-srcset')) {
-            hd.srcset = this.element.getAttribute('data-hd-srcset');
+        hd.src = this.hdSrcValue;
+        if (srcsetString) {
+            hd.srcset = srcsetString;
         }
         this._dispatchEvent('lazy-image:connect', { hd });
     }
+    _calculateSrcsetString() {
+        if (!this.hasHdSrcsetValue) {
+            return '';
+        }
+        const sets = Object.keys(this.hdSrcsetValue).map((size => {
+            return `${this.hdSrcsetValue[size]} ${size}`;
+        }));
+        return sets.join(', ').trimEnd();
+    }
     _dispatchEvent(name, payload = null, canBubble = false, cancelable = false) {
         const userEvent = document.createEvent('CustomEvent');
         userEvent.initCustomEvent(name, canBubble, cancelable, payload);
         this.element.dispatchEvent(userEvent);
     }
 }
+default_1.values = {
+    hdSrc: String,
+    hdSrcset: Object
+};
 
-export { controller as default };
+export { default_1 as default };

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

@@ -12,25 +12,44 @@
 import { Controller } from '@hotwired/stimulus';
 
 export default class extends Controller {
+    static values = {
+        hdSrc: String,
+        hdSrcset: Object
+    };
+
     connect() {
         const hd = new Image();
 
+        const srcsetString = this._calculateSrcsetString();
+
         hd.addEventListener('load', () => {
-            this.element.src = this.element.getAttribute('data-hd-src');
-            if (this.element.getAttribute('data-hd-srcset')) {
-                this.element.srcset = this.element.getAttribute('data-hd-srcset');
+            this.element.src = this.hdSrcValue;
+            if (srcsetString) {
+                this.element.srcset = srcsetString;
             }
             this._dispatchEvent('lazy-image:ready', { hd });
         });
 
-        hd.src = this.element.getAttribute('data-hd-src');
-        if (this.element.getAttribute('data-hd-srcset')) {
-            hd.srcset = this.element.getAttribute('data-hd-srcset');
+        hd.src = this.hdSrcValue;
+        if (srcsetString) {
+            hd.srcset = srcsetString;
         }
 
         this._dispatchEvent('lazy-image:connect', { hd });
     }
 
+    _calculateSrcsetString(): string {
+        if (!this.hasHdSrcsetValue) {
+            return '';
+        }
+
+        const sets = Object.keys(this.hdSrcsetValue).map((size => {
+            return `${this.hdSrcsetValue[size]} ${size}`;
+        }));
+
+        return sets.join(', ').trimEnd();
+    }
+
     _dispatchEvent(name, payload = null, canBubble = false, cancelable = false) {
         const userEvent = document.createEvent('CustomEvent');
         userEvent.initCustomEvent(name, canBubble, cancelable, payload);

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

@@ -17,7 +17,10 @@ import LazyImageController from '../src/controller';
 // Controller used to check the actual controller was properly booted
 class CheckController extends Controller {
     connect() {
-        this.element.addEventListener('lazy-image:connect', () => {
+        this.element.addEventListener('lazy-image:connect', (event) => {
+            // the Image won't natively have its "load" method in this test
+            // so we trigger it manually, to "fake" the Image loading.
+            event.detail.hd.dispatchEvent(new Event('load'));
             this.element.classList.add('connected');
         });
     }
@@ -38,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-hd-src="https://symfony.com/logos/symfony_black_03.png" 
-              data-hd-srcset="https://symfony.com/logos/symfony_black_03.png 1x, https://symfony.com/logos/symfony_black_03.png 2x"
+              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-controller="check lazy-image" />
         `);
     });
@@ -49,9 +52,13 @@ describe('LazyImageController', () => {
     });
 
     it('connect', async () => {
-        expect(getByTestId(container, 'img')).not.toHaveClass('connected');
+        const img = getByTestId(container, 'img');
+        expect(img).not.toHaveClass('connected');
+        expect(img).toHaveAttribute('src', 'https://symfony.com/logos/symfony_black_02.png');
 
         startStimulus();
-        await waitFor(() => expect(getByTestId(container, 'img')).toHaveClass('connected'));
+        await waitFor(() => expect(img).toHaveClass('connected'));
+        expect(img).toHaveAttribute('src', 'https://symfony.com/logos/symfony_black_03.png');
+        expect(img).toHaveAttribute('srcset', 'https://symfony.com/logos/symfony_black_03.png 1x, https://symfony.com/logos/symfony_black_03_2x.png 2x');
     });
 });