Add Srcset Functionality

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

@@ -29,7 +29,7 @@ function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf || func
 
 function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
 
-function _possibleConstructorReturn(self, call) { if (call && (_typeof(call) === "object" || typeof call === "function")) { return call; } return _assertThisInitialized(self); }
+function _possibleConstructorReturn(self, call) { if (call && (_typeof(call) === "object" || typeof call === "function")) { return call; } else if (call !== void 0) { throw new TypeError("Derived constructors may only return object or undefined"); } return _assertThisInitialized(self); }
 
 function _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; }
 
@@ -57,12 +57,20 @@ var _default = /*#__PURE__*/function (_Controller) {
       hd.addEventListener('load', function () {
         _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
         });
       });
       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: hd
       });

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

@@ -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.js

@@ -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" />
         `);
     });