Support for live preview hot reload

resources/views/responsiveImage.blade.php

@@ -1,25 +1,43 @@
 @once
     <script>
-        window.addEventListener('load', function () {
+        document.addEventListener('DOMContentLoaded', function () {
             window.responsiveResizeObserver = new ResizeObserver((entries) => {
-                entries.forEach(entry => {
-                    const imgWidth = entry.target.getBoundingClientRect().width;
-                    entry.target.parentNode.querySelectorAll('source').forEach((source) => {
-                        source.sizes = Math.ceil(imgWidth / window.innerWidth * 100) + 'vw';
-                    });
+                entries.forEach(({ target, contentRect }) => {
+                    const vw = Math.ceil(contentRect.width / window.innerWidth * 100) + 'vw';
+
+                    target.parentNode.querySelectorAll('source').forEach(source => source.sizes = vw);
                 });
             });
 
-            document.querySelectorAll('[data-statamic-responsive-images]').forEach(responsiveImage => {
-                responsiveResizeObserver.onload = null;
-                responsiveResizeObserver.observe(responsiveImage);
+            document.querySelectorAll('[data-statamic-responsive-images]').forEach(img => {
+                window.responsiveResizeObserver.observe(img);
             });
+
+            @if(request()->isLivePreview())
+                new MutationObserver(mutations => {
+                    for (const { addedNodes } of mutations) {
+                        for (const node of addedNodes) {
+                            if (node.nodeType !== Node.ELEMENT_NODE) {
+                                continue;
+                            }
+
+                            if (node.hasAttribute('data-statamic-responsive-images')) {
+                                window.responsiveResizeObserver.observe(node);
+                            }
+
+                            node.querySelectorAll('[data-statamic-responsive-images]').forEach(img => {
+                                window.responsiveResizeObserver.observe(img);
+                            });
+                        }
+                    }
+                }).observe(document.body, { childList: true, subtree: true });
+            @endif
         });
     </script>
 @endonce
 
 <picture>
-    @foreach (($breakpoints ?? []) as $breakpoint)
+    @foreach(($breakpoints ?? []) as $breakpoint)
         @foreach($breakpoint->sources() ?? [] as $source)
             @php
                 $srcSet = $source->getSrcset();
@@ -39,7 +57,7 @@
     <img
         {!! $attributeString ?? '' !!}
         src="{{ $src }}"
-        @unless (\Illuminate\Support\Str::contains($attributeString, 'alt'))
+        @unless(\Illuminate\Support\Str::contains($attributeString, 'alt'))
         alt="{{ (string) $asset['alt'] ?: (string) $asset['title'] }}"
         @endunless
         @isset($width) width="{{ $width }}" @endisset

tests/Feature/ResponsiveTagTest.php

@@ -327,6 +327,16 @@ function assertMatchesSnapshotWithoutSvg($value)
     ]));
 });
 
+it('includes MutationObserver script for live preview', function () {
+    Request::macro('isLivePreview', fn () => true);
+
+    expect(ResponsiveTag::render($this->asset))->toContain('MutationObserver');
+});
+
+it('does not include MutationObserver script outside of live preview', function () {
+    expect(ResponsiveTag::render($this->asset))->not->toContain('MutationObserver');
+});
+
 it('does not output <source> when no dimensions are returned from dimension calculator', function () {
     $this->mock(DimensionCalculator::class, function ($mock) {
         $mock->shouldReceive('calculateForBreakpoint')->andReturn(collect([]));

tests/__snapshots__/ResponsiveTagTest__format_quality_is_set_on_breakpoints__1.txt

@@ -1,19 +1,18 @@
 <script>
-        window.addEventListener('load', function () {
+        document.addEventListener('DOMContentLoaded', function () {
             window.responsiveResizeObserver = new ResizeObserver((entries) => {
-                entries.forEach(entry => {
-                    const imgWidth = entry.target.getBoundingClientRect().width;
-                    entry.target.parentNode.querySelectorAll('source').forEach((source) => {
-                        source.sizes = Math.ceil(imgWidth / window.innerWidth * 100) + 'vw';
-                    });
+                entries.forEach(({ target, contentRect }) => {
+                    const vw = Math.ceil(contentRect.width / window.innerWidth * 100) + 'vw';
+
+                    target.parentNode.querySelectorAll('source').forEach(source => source.sizes = vw);
                 });
             });
 
-            document.querySelectorAll('[data-statamic-responsive-images]').forEach(responsiveImage => {
-                responsiveResizeObserver.onload = null;
-                responsiveResizeObserver.observe(responsiveImage);
+            document.querySelectorAll('[data-statamic-responsive-images]').forEach(img => {
+                window.responsiveResizeObserver.observe(img);
             });
-        });
+
+                    });
     </script>
 
 <picture>

tests/__snapshots__/ResponsiveTagTest__it_adds_custom_parameters_to_the_attribute_string__1.txt

@@ -1,19 +1,18 @@
 <script>
-        window.addEventListener('load', function () {
+        document.addEventListener('DOMContentLoaded', function () {
             window.responsiveResizeObserver = new ResizeObserver((entries) => {
-                entries.forEach(entry => {
-                    const imgWidth = entry.target.getBoundingClientRect().width;
-                    entry.target.parentNode.querySelectorAll('source').forEach((source) => {
-                        source.sizes = Math.ceil(imgWidth / window.innerWidth * 100) + 'vw';
-                    });
+                entries.forEach(({ target, contentRect }) => {
+                    const vw = Math.ceil(contentRect.width / window.innerWidth * 100) + 'vw';
+
+                    target.parentNode.querySelectorAll('source').forEach(source => source.sizes = vw);
                 });
             });
 
-            document.querySelectorAll('[data-statamic-responsive-images]').forEach(responsiveImage => {
-                responsiveResizeObserver.onload = null;
-                responsiveResizeObserver.observe(responsiveImage);
+            document.querySelectorAll('[data-statamic-responsive-images]').forEach(img => {
+                window.responsiveResizeObserver.observe(img);
             });
-        });
+
+                    });
     </script>
 
 <picture>

tests/__snapshots__/ResponsiveTagTest__it_can_add_custom_glide_parameters__1.txt

@@ -1,19 +1,18 @@
 <script>
-        window.addEventListener('load', function () {
+        document.addEventListener('DOMContentLoaded', function () {
             window.responsiveResizeObserver = new ResizeObserver((entries) => {
-                entries.forEach(entry => {
-                    const imgWidth = entry.target.getBoundingClientRect().width;
-                    entry.target.parentNode.querySelectorAll('source').forEach((source) => {
-                        source.sizes = Math.ceil(imgWidth / window.innerWidth * 100) + 'vw';
-                    });
+                entries.forEach(({ target, contentRect }) => {
+                    const vw = Math.ceil(contentRect.width / window.innerWidth * 100) + 'vw';
+
+                    target.parentNode.querySelectorAll('source').forEach(source => source.sizes = vw);
                 });
             });
 
-            document.querySelectorAll('[data-statamic-responsive-images]').forEach(responsiveImage => {
-                responsiveResizeObserver.onload = null;
-                responsiveResizeObserver.observe(responsiveImage);
+            document.querySelectorAll('[data-statamic-responsive-images]').forEach(img => {
+                window.responsiveResizeObserver.observe(img);
             });
-        });
+
+                    });
     </script>
 
 <picture>

tests/__snapshots__/ResponsiveTagTest__it_can_render_a_responsive_image_with_the_directive__1.txt

@@ -1,19 +1,18 @@
 <script>
-        window.addEventListener('load', function () {
+        document.addEventListener('DOMContentLoaded', function () {
             window.responsiveResizeObserver = new ResizeObserver((entries) => {
-                entries.forEach(entry => {
-                    const imgWidth = entry.target.getBoundingClientRect().width;
-                    entry.target.parentNode.querySelectorAll('source').forEach((source) => {
-                        source.sizes = Math.ceil(imgWidth / window.innerWidth * 100) + 'vw';
-                    });
+                entries.forEach(({ target, contentRect }) => {
+                    const vw = Math.ceil(contentRect.width / window.innerWidth * 100) + 'vw';
+
+                    target.parentNode.querySelectorAll('source').forEach(source => source.sizes = vw);
                 });
             });
 
-            document.querySelectorAll('[data-statamic-responsive-images]').forEach(responsiveImage => {
-                responsiveResizeObserver.onload = null;
-                responsiveResizeObserver.observe(responsiveImage);
+            document.querySelectorAll('[data-statamic-responsive-images]').forEach(img => {
+                window.responsiveResizeObserver.observe(img);
             });
-        });
+
+                    });
     </script>
 
 <picture>

tests/__snapshots__/ResponsiveTagTest__it_can_render_an_art_directed_image_as_array_with_the_directive__1.txt

@@ -1,19 +1,18 @@
 <script>
-        window.addEventListener('load', function () {
+        document.addEventListener('DOMContentLoaded', function () {
             window.responsiveResizeObserver = new ResizeObserver((entries) => {
-                entries.forEach(entry => {
-                    const imgWidth = entry.target.getBoundingClientRect().width;
-                    entry.target.parentNode.querySelectorAll('source').forEach((source) => {
-                        source.sizes = Math.ceil(imgWidth / window.innerWidth * 100) + 'vw';
-                    });
+                entries.forEach(({ target, contentRect }) => {
+                    const vw = Math.ceil(contentRect.width / window.innerWidth * 100) + 'vw';
+
+                    target.parentNode.querySelectorAll('source').forEach(source => source.sizes = vw);
                 });
             });
 
-            document.querySelectorAll('[data-statamic-responsive-images]').forEach(responsiveImage => {
-                responsiveResizeObserver.onload = null;
-                responsiveResizeObserver.observe(responsiveImage);
+            document.querySelectorAll('[data-statamic-responsive-images]').forEach(img => {
+                window.responsiveResizeObserver.observe(img);
             });
-        });
+
+                    });
     </script>
 
 <picture>

tests/__snapshots__/ResponsiveTagTest__it_can_render_an_art_directed_image_with_the_directive__1.txt

@@ -1,19 +1,18 @@
 <script>
-        window.addEventListener('load', function () {
+        document.addEventListener('DOMContentLoaded', function () {
             window.responsiveResizeObserver = new ResizeObserver((entries) => {
-                entries.forEach(entry => {
-                    const imgWidth = entry.target.getBoundingClientRect().width;
-                    entry.target.parentNode.querySelectorAll('source').forEach((source) => {
-                        source.sizes = Math.ceil(imgWidth / window.innerWidth * 100) + 'vw';
-                    });
+                entries.forEach(({ target, contentRect }) => {
+                    const vw = Math.ceil(contentRect.width / window.innerWidth * 100) + 'vw';
+
+                    target.parentNode.querySelectorAll('source').forEach(source => source.sizes = vw);
                 });
             });
 
-            document.querySelectorAll('[data-statamic-responsive-images]').forEach(responsiveImage => {
-                responsiveResizeObserver.onload = null;
-                responsiveResizeObserver.observe(responsiveImage);
+            document.querySelectorAll('[data-statamic-responsive-images]').forEach(img => {
+                window.responsiveResizeObserver.observe(img);
             });
-        });
+
+                    });
     </script>
 
 <picture>

tests/__snapshots__/ResponsiveTagTest__it_generates_no_conversions_for_gifs__1.txt

@@ -1,19 +1,18 @@
 <script>
-        window.addEventListener('load', function () {
+        document.addEventListener('DOMContentLoaded', function () {
             window.responsiveResizeObserver = new ResizeObserver((entries) => {
-                entries.forEach(entry => {
-                    const imgWidth = entry.target.getBoundingClientRect().width;
-                    entry.target.parentNode.querySelectorAll('source').forEach((source) => {
-                        source.sizes = Math.ceil(imgWidth / window.innerWidth * 100) + 'vw';
-                    });
+                entries.forEach(({ target, contentRect }) => {
+                    const vw = Math.ceil(contentRect.width / window.innerWidth * 100) + 'vw';
+
+                    target.parentNode.querySelectorAll('source').forEach(source => source.sizes = vw);
                 });
             });
 
-            document.querySelectorAll('[data-statamic-responsive-images]').forEach(responsiveImage => {
-                responsiveResizeObserver.onload = null;
-                responsiveResizeObserver.observe(responsiveImage);
+            document.querySelectorAll('[data-statamic-responsive-images]').forEach(img => {
+                window.responsiveResizeObserver.observe(img);
             });
-        });
+
+                    });
     </script>
 
 <picture>

tests/__snapshots__/ResponsiveTagTest__it_generates_no_conversions_for_svgs__1.txt

@@ -1,19 +1,18 @@
 <script>
-        window.addEventListener('load', function () {
+        document.addEventListener('DOMContentLoaded', function () {
             window.responsiveResizeObserver = new ResizeObserver((entries) => {
-                entries.forEach(entry => {
-                    const imgWidth = entry.target.getBoundingClientRect().width;
-                    entry.target.parentNode.querySelectorAll('source').forEach((source) => {
-                        source.sizes = Math.ceil(imgWidth / window.innerWidth * 100) + 'vw';
-                    });
+                entries.forEach(({ target, contentRect }) => {
+                    const vw = Math.ceil(contentRect.width / window.innerWidth * 100) + 'vw';
+
+                    target.parentNode.querySelectorAll('source').forEach(source => source.sizes = vw);
                 });
             });
 
-            document.querySelectorAll('[data-statamic-responsive-images]').forEach(responsiveImage => {
-                responsiveResizeObserver.onload = null;
-                responsiveResizeObserver.observe(responsiveImage);
+            document.querySelectorAll('[data-statamic-responsive-images]').forEach(img => {
+                window.responsiveResizeObserver.observe(img);
             });
-        });
+
+                    });
     </script>
 
 <picture>

tests/__snapshots__/ResponsiveTagTest__it_generates_responsive_images__1.txt

@@ -1,19 +1,18 @@
 <script>
-        window.addEventListener('load', function () {
+        document.addEventListener('DOMContentLoaded', function () {
             window.responsiveResizeObserver = new ResizeObserver((entries) => {
-                entries.forEach(entry => {
-                    const imgWidth = entry.target.getBoundingClientRect().width;
-                    entry.target.parentNode.querySelectorAll('source').forEach((source) => {
-                        source.sizes = Math.ceil(imgWidth / window.innerWidth * 100) + 'vw';
-                    });
+                entries.forEach(({ target, contentRect }) => {
+                    const vw = Math.ceil(contentRect.width / window.innerWidth * 100) + 'vw';
+
+                    target.parentNode.querySelectorAll('source').forEach(source => source.sizes = vw);
                 });
             });
 
-            document.querySelectorAll('[data-statamic-responsive-images]').forEach(responsiveImage => {
-                responsiveResizeObserver.onload = null;
-                responsiveResizeObserver.observe(responsiveImage);
+            document.querySelectorAll('[data-statamic-responsive-images]').forEach(img => {
+                window.responsiveResizeObserver.observe(img);
             });
-        });
+
+                    });
     </script>
 
 <picture>

tests/__snapshots__/ResponsiveTagTest__it_generates_responsive_images_in_webp_and_avif_formats__1.txt

@@ -1,19 +1,18 @@
 <script>
-        window.addEventListener('load', function () {
+        document.addEventListener('DOMContentLoaded', function () {
             window.responsiveResizeObserver = new ResizeObserver((entries) => {
-                entries.forEach(entry => {
-                    const imgWidth = entry.target.getBoundingClientRect().width;
-                    entry.target.parentNode.querySelectorAll('source').forEach((source) => {
-                        source.sizes = Math.ceil(imgWidth / window.innerWidth * 100) + 'vw';
-                    });
+                entries.forEach(({ target, contentRect }) => {
+                    const vw = Math.ceil(contentRect.width / window.innerWidth * 100) + 'vw';
+
+                    target.parentNode.querySelectorAll('source').forEach(source => source.sizes = vw);
                 });
             });
 
-            document.querySelectorAll('[data-statamic-responsive-images]').forEach(responsiveImage => {
-                responsiveResizeObserver.onload = null;
-                responsiveResizeObserver.observe(responsiveImage);
+            document.querySelectorAll('[data-statamic-responsive-images]').forEach(img => {
+                window.responsiveResizeObserver.observe(img);
             });
-        });
+
+                    });
     </script>
 
 <picture>

tests/__snapshots__/ResponsiveTagTest__it_generates_responsive_images_in_webp_and_avif_formats__2.txt

@@ -1,19 +1,18 @@
 <script>
-        window.addEventListener('load', function () {
+        document.addEventListener('DOMContentLoaded', function () {
             window.responsiveResizeObserver = new ResizeObserver((entries) => {
-                entries.forEach(entry => {
-                    const imgWidth = entry.target.getBoundingClientRect().width;
-                    entry.target.parentNode.querySelectorAll('source').forEach((source) => {
-                        source.sizes = Math.ceil(imgWidth / window.innerWidth * 100) + 'vw';
-                    });
+                entries.forEach(({ target, contentRect }) => {
+                    const vw = Math.ceil(contentRect.width / window.innerWidth * 100) + 'vw';
+
+                    target.parentNode.querySelectorAll('source').forEach(source => source.sizes = vw);
                 });
             });
 
-            document.querySelectorAll('[data-statamic-responsive-images]').forEach(responsiveImage => {
-                responsiveResizeObserver.onload = null;
-                responsiveResizeObserver.observe(responsiveImage);
+            document.querySelectorAll('[data-statamic-responsive-images]').forEach(img => {
+                window.responsiveResizeObserver.observe(img);
             });
-        });
+
+                    });
     </script>
 
 <picture>