perf: directly inline values since Svelte no longer inlines (#13035)

Author: benmccann

.changeset/wild-flies-run.md

@@ -0,0 +1,5 @@
+---
+'@sveltejs/enhanced-img': patch
+---
+
+perf: directly inline values since Svelte no longer inlines variables into template

packages/enhanced-img/src/preprocessor.js

@@ -5,7 +5,6 @@ import * as path from 'node:path';
 
 import MagicString from 'magic-string';
 import { walk } from 'zimmerframe';
-import { VERSION } from 'svelte/compiler';
 import { parse } from 'svelte-parse-markup';
 
 // TODO: expose this in vite-imagetools rather than duplicating it
@@ -43,13 +42,6 @@ export function image(opts) {
 			 */
 			const imports = new Map();
 
-			/**
-			 * Vite name to declaration name
-			 * e.g. __VITE_ASSET_0__ => __DECLARED_ASSET_0__
-			 * @type {Map<string, string>}
-			 */
-			const consts = new Map();
-
 			/**
 			 * @param {import('svelte/compiler').AST.RegularElement} node
 			 * @param {AST.Text | AST.ExpressionTag} src_attribute
@@ -110,7 +102,7 @@ export function image(opts) {
 						image = await process(resolved_id, opts);
 						images.set(resolved_id, image);
 					}
-					s.update(node.start, node.end, img_to_picture(consts, content, node, image));
+					s.update(node.start, node.end, img_to_picture(content, node, image));
 				} else {
 					// e.g. <img src="./foo.svg" /> => <img src={__IMPORTED_ASSET_0__} />
 					const name = '__IMPORTED_ASSET_' + imports.size + '__';
@@ -160,27 +152,19 @@ export function image(opts) {
 
 			await Promise.all(pending_ast_updates);
 
-			// add imports and consts to <script module> block
+			// add imports
 			let text = '';
 			if (imports.size) {
 				for (const [path, import_name] of imports.entries()) {
 					text += `\timport ${import_name} from "${path}";\n`;
 				}
 			}
 
-			if (consts.size) {
-				for (const [vite_name, declaration_name] of consts.entries()) {
-					text += `\tconst ${declaration_name} = "${vite_name}";\n`;
-				}
-			}
-
-			if (ast.module) {
+			if (ast.instance) {
 				// @ts-ignore
-				s.appendLeft(ast.module.content.start, text);
+				s.appendLeft(ast.instance.content.start, text);
 			} else {
-				s.prepend(
-					`<script ${VERSION.startsWith('4') ? 'context="module"' : 'module'}>${text}</script>\n`
-				);
+				s.prepend(`<script>${text}</script>\n`);
 			}
 
 			return {
@@ -318,12 +302,11 @@ function stringToNumber(param) {
 }
 
 /**
- * @param {Map<string,string>} consts
  * @param {string} content
  * @param {import('svelte/compiler').AST.RegularElement} node
  * @param {import('vite-imagetools').Picture} image
  */
-function img_to_picture(consts, content, node, image) {
+function img_to_picture(content, node, image) {
 	/** @type {import('../types/internal.ts').Attribute[]} attributes */
 	const attributes = node.attributes;
 	const index = attributes.findIndex(
@@ -338,11 +321,11 @@ function img_to_picture(consts, content, node, image) {
 	let res = '<picture>';
 
 	for (const [format, srcset] of Object.entries(image.sources)) {
-		res += `<source srcset=${to_value(consts, srcset)}${sizes_string} type="image/${format}" />`;
+		res += `<source srcset=${to_value(srcset)}${sizes_string} type="image/${format}" />`;
 	}
 
 	res += `<img ${serialize_img_attributes(content, attributes, {
-		src: to_value(consts, image.img.src),
+		src: to_value(image.img.src),
 		width: image.img.w,
 		height: image.img.h
 	})} />`;
@@ -351,20 +334,11 @@ function img_to_picture(consts, content, node, image) {
 }
 
 /**
- * @param {Map<string, string>} consts
  * @param {string} src
  */
-function to_value(consts, src) {
-	if (src.startsWith('__VITE_ASSET__')) {
-		let var_name = consts.get(src);
-		if (!var_name) {
-			var_name = '__DECLARED_ASSET_' + consts.size + '__';
-			consts.set(src, var_name);
-		}
-		return `{${var_name}}`;
-	}
-
-	return `"${src}"`;
+function to_value(src) {
+	// __VITE_ASSET__ needs to be contained in double quotes to work with Vite asset plugin
+	return src.startsWith('__VITE_ASSET__') ? `{"${src}"}` : `"${src}"`;
 }
 
 /**

packages/enhanced-img/test/Output.svelte

@@ -1,11 +1,6 @@
-<script module>	
+<script lang="ts">	
 	import __IMPORTED_ASSET_0__ from "./foo.svg";
-	const __DECLARED_ASSET_0__ = "__VITE_ASSET__2AM7_y_a__ 1440w, __VITE_ASSET__2AM7_y_b__ 960w";
-	const __DECLARED_ASSET_1__ = "__VITE_ASSET__2AM7_y_c__ 1440w, __VITE_ASSET__2AM7_y_d__ 960w";
-	const __DECLARED_ASSET_2__ = "__VITE_ASSET__2AM7_y_e__ 1440w, __VITE_ASSET__2AM7_y_f__ 960w";
-	const __DECLARED_ASSET_3__ = "__VITE_ASSET__2AM7_y_g__";
-</script>
-<script lang="ts">
+
 	
 	import manual_image1 from './no.png';
 	
@@ -28,7 +23,7 @@
 	<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={"__VITE_ASSET__2AM7_y_a__ 1440w, __VITE_ASSET__2AM7_y_b__ 960w"} type="image/avif" /><source srcset={"__VITE_ASSET__2AM7_y_c__ 1440w, __VITE_ASSET__2AM7_y_d__ 960w"} type="image/webp" /><source srcset={"__VITE_ASSET__2AM7_y_e__ 1440w, __VITE_ASSET__2AM7_y_f__ 960w"} type="image/png" /><img src={"__VITE_ASSET__2AM7_y_g__"} 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>