From 62da8b1130f86c6fa238313c91013ca6b00e304f Mon Sep 17 00:00:00 2001
From: Plamen <plamen@Plamens-MacBook-Air-M1.local>
Date: Mon, 29 Nov 2021 07:27:55 +0200
Subject: [PATCH] Rebasing srcset addition

---
 src/LazyImage/README.md                               |  3 +++
 src/LazyImage/Resources/assets/dist/controller.js     |  6 ++++++
 src/LazyImage/Resources/assets/src/controller.ts      |  6 ++++++
 .../Resources/assets/test/controller.test.ts          | 11 +++++++----
 4 files changed, 22 insertions(+), 4 deletions(-)

diff --git a/src/LazyImage/README.md b/src/LazyImage/README.md
index 36b8b8e2380..b912ac2b95f 100644
--- a/src/LazyImage/README.md
+++ b/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"
diff --git a/src/LazyImage/Resources/assets/dist/controller.js b/src/LazyImage/Resources/assets/dist/controller.js
index ef8a138fe1f..309c5d97baa 100644
--- a/src/LazyImage/Resources/assets/dist/controller.js
+++ b/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) {
diff --git a/src/LazyImage/Resources/assets/src/controller.ts b/src/LazyImage/Resources/assets/src/controller.ts
index 403cab71875..5d0354342da 100644
--- a/src/LazyImage/Resources/assets/src/controller.ts
+++ b/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 });
     }
diff --git a/src/LazyImage/Resources/assets/test/controller.test.ts b/src/LazyImage/Resources/assets/test/controller.test.ts
index aee473991e8..3d96b621f3e 100644
--- a/src/LazyImage/Resources/assets/test/controller.test.ts
+++ b/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" />
         `);
     });