fix: mark subtree dynamic for img with loading attribute

Author: paoloricciuti

.changeset/rotten-turkeys-sniff.md

@@ -0,0 +1,5 @@
+---
+'svelte': patch
+---
+
+fix: mark subtree dynamic for img with loading attribute

packages/svelte/src/compiler/phases/2-analyze/visitors/Attribute.js

@@ -25,6 +25,13 @@ export function Attribute(node, context) {
 		}
 	}
 
+	// special case loading="lazy"
+	if (node.name === 'loading') {
+		if (parent.type === 'RegularElement' && parent.name === 'img') {
+			mark_subtree_dynamic(context.path);
+		}
+	}
+
 	if (node.name.startsWith('on')) {
 		mark_subtree_dynamic(context.path);
 	}

packages/svelte/tests/snapshot/samples/skip-static-subtree/_expected/client/index.svelte.js

@@ -1,7 +1,7 @@
 import "svelte/internal/disclose-version";
 import * as $ from "svelte/internal/client";
 
-var root = $.template(`<header><nav><a href="/">Home</a> <a href="/away">Away</a></nav></header> <main><h1> </h1> <div class="static"><p>we don't need to traverse these nodes</p></div> <p>or</p> <p>these</p> <p>ones</p> <!> <p>these</p> <p>trailing</p> <p>nodes</p> <p>can</p> <p>be</p> <p>completely</p> <p>ignored</p></main> <cant-skip><custom-elements></custom-elements></cant-skip> <div><input></div> <div><source></div> <select><option>a</option></select> <img src="..." alt="" loading="lazy">`, 3);
+var root = $.template(`<header><nav><a href="/">Home</a> <a href="/away">Away</a></nav></header> <main><h1> </h1> <div class="static"><p>we don't need to traverse these nodes</p></div> <p>or</p> <p>these</p> <p>ones</p> <!> <p>these</p> <p>trailing</p> <p>nodes</p> <p>can</p> <p>be</p> <p>completely</p> <p>ignored</p></main> <cant-skip><custom-elements></custom-elements></cant-skip> <div><input></div> <div><source></div> <select><option>a</option></select> <img src="..." alt="" loading="lazy"> <div><img src="..." alt="" loading="lazy"></div>`, 3);
 
 export default function Skip_static_subtree($$anchor, $$props) {
 	var fragment = root();
@@ -42,8 +42,12 @@ export default function Skip_static_subtree($$anchor, $$props) {
 	$.reset(select);
 
 	var img = $.sibling(select, 2);
+	var div_2 = $.sibling(img, 2);
+	var img_1 = $.child(div_2);
 
+	$.reset(div_2);
 	$.template_effect(() => $.set_text(text, $$props.title));
 	$.handle_lazy_img(img);
+	$.handle_lazy_img(img_1);
 	$.append($$anchor, fragment);
 }

packages/svelte/tests/snapshot/samples/skip-static-subtree/_expected/server/index.svelte.js

@@ -3,5 +3,5 @@ import * as $ from "svelte/internal/server";
 export default function Skip_static_subtree($$payload, $$props) {
 	let { title, content } = $$props;
 
-	$$payload.out += `<header><nav><a href="/">Home</a> <a href="/away">Away</a></nav></header> <main><h1>${$.escape(title)}</h1> <div class="static"><p>we don't need to traverse these nodes</p></div> <p>or</p> <p>these</p> <p>ones</p> ${$.html(content)} <p>these</p> <p>trailing</p> <p>nodes</p> <p>can</p> <p>be</p> <p>completely</p> <p>ignored</p></main> <cant-skip><custom-elements with="attributes"></custom-elements></cant-skip> <div><input autofocus></div> <div><source muted></div> <select><option value="a">a</option></select> <img src="..." alt="" loading="lazy">`;
+	$$payload.out += `<header><nav><a href="/">Home</a> <a href="/away">Away</a></nav></header> <main><h1>${$.escape(title)}</h1> <div class="static"><p>we don't need to traverse these nodes</p></div> <p>or</p> <p>these</p> <p>ones</p> ${$.html(content)} <p>these</p> <p>trailing</p> <p>nodes</p> <p>can</p> <p>be</p> <p>completely</p> <p>ignored</p></main> <cant-skip><custom-elements with="attributes"></custom-elements></cant-skip> <div><input autofocus></div> <div><source muted></div> <select><option value="a">a</option></select> <img src="..." alt="" loading="lazy"> <div><img src="..." alt="" loading="lazy"></div>`;
 }

packages/svelte/tests/snapshot/samples/skip-static-subtree/index.svelte

@@ -44,4 +44,7 @@
 	<option value="a">a</option>
 </select>
 
-<img src="..." alt="" loading="lazy" />
+<img src="..." alt="" loading="lazy" />
+<div>
+	<img src="..." alt="" loading="lazy" />
+</div>