fix: fix nested images in enhanced-img (#12945)

sveltejs · Nov 4, 2024 · c484ced · c484ced
1 parent c4b76d0
commit c484ced
Show file tree

Hide file tree

Showing 4 changed files with 18 additions and 2 deletions.
diff --git a/.changeset/stale-moons-walk.md b/.changeset/stale-moons-walk.md
@@ -0,0 +1,5 @@
+---
+'@sveltejs/enhanced-img': patch
+---
+
+fix: correctly handle `<enhanced:img />` elements nested in other DOM elements
diff --git a/packages/enhanced-img/src/preprocessor.js b/packages/enhanced-img/src/preprocessor.js
@@ -131,7 +131,6 @@ export function image(opts) {
 			 * @type {Array<ReturnType<typeof update_element>>}
 			 */
 			const pending_ast_updates = [];
-			// TODO: switch to zimmerframe with Svelte 5
 
 			walk(
 				/** @type {import('svelte/compiler').AST.Root} */ (ast),
@@ -142,15 +141,19 @@ export function image(opts) {
 					},
 					/** @param {import('svelte/compiler').AST.RegularElement} node */
 					// @ts-ignore
-					RegularElement(node) {
+					RegularElement(node, { next }) {
 						if ('name' in node && node.name === 'enhanced:img') {
 							// Compare node tag match
 							const src = get_attr_value(node, 'src');
 
 							if (!src || typeof src === 'boolean') return;
 
 							pending_ast_updates.push(update_element(node, src));
+
+							return;
 						}
+
+						next();
 					}
 				}
 			);

diff --git a/packages/enhanced-img/test/Input.svelte b/packages/enhanced-img/test/Input.svelte
@@ -15,6 +15,10 @@
 
 <enhanced:img src="./dev.png" alt="dev test" />
 
+<div>
+	<enhanced:img src="./dev.png" alt="nested test" />
+</div>
+
 <enhanced:img src="./prod.png" alt="production test" />
 
 <enhanced:img src="./dev.png" width="5" height="10" alt="dimensions test" />

diff --git a/packages/enhanced-img/test/Output.svelte b/packages/enhanced-img/test/Output.svelte
@@ -24,6 +24,10 @@
 
 <picture><source srcset="/1 1440w, /2 960w" type="image/avif" /><source srcset="/3 1440w, /4 960w" type="image/webp" /><source srcset="5 1440w, /6 960w" type="image/png" /><img src="/7" alt="dev test" width=1440 height=1440 /></picture>
 
+<div>
+	<picture><source srcset="/1 1440w, /2 960w" type="image/avif" /><source srcset="/3 1440w, /4 960w" type="image/webp" /><source srcset="5 1440w, /6 960w" type="image/png" /><img src="/7" alt="nested test" width=1440 height=1440 /></picture>
+</div>
+
 <picture><source srcset={__DECLARED_ASSET_0__} type="image/avif" /><source srcset={__DECLARED_ASSET_1__} type="image/webp" /><source srcset={__DECLARED_ASSET_2__} type="image/png" /><img src={__DECLARED_ASSET_3__} alt="production test" width=1440 height=1440 /></picture>
 
 <picture><source srcset="/1 1440w, /2 960w" type="image/avif" /><source srcset="/3 1440w, /4 960w" type="image/webp" /><source srcset="5 1440w, /6 960w" type="image/png" /><img src="/7" width="5" height="10" alt="dimensions test" /></picture>