feature #186 Rebasing srcset addition (Plamen)

This PR was squashed before being merged into the 2.x branch.

Discussion
----------

Rebasing srcset addition

| Q             | A
| ------------- | ---
| Bug fix?      | no
| New feature?  | yes
| Tickets       | Fixes #148
| License       | MIT

Just a rebase of #176 to get the new build system in there.

Cheers!

Commits
-------

62da8b1 Rebasing srcset addition

Author: weaverryan

src/LazyImage/README.md

@@ -37,6 +37,9 @@ page has been rendered:
     {{ 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"
+
     {# Optional but avoids having a page jump when the image is loaded #}
     width="200"
     height="150"

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

@@ -5,9 +5,15 @@ class controller extends Controller {
         const hd = new Image();
         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._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');
+        }
         this._dispatchEvent('lazy-image:connect', { hd });
     }
     _dispatchEvent(name, payload = null, canBubble = false, cancelable = false) {

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

@@ -17,10 +17,16 @@ export default class extends Controller {
 
         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._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');
+        }
 
         this._dispatchEvent('lazy-image:connect', { hd });
     }

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

@@ -34,10 +34,13 @@ describe('LazyImageController', () => {
 
     beforeEach(() => {
         container = mountDOM(`
-            <img src="https://symfony.com/logos/symfony_black_02.png"
-                data-testid="img"
-                data-hd-src="https://symfony.com/logos/symfony_black_03.png" 
-                data-controller="check lazy-image" />
+          <img 
+              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-controller="check lazy-image" />
         `);
     });