diff --git a/.changeset/wild-flies-run.md b/.changeset/wild-flies-run.md new file mode 100644 index 000000000000..3f1f70ec0170 --- /dev/null +++ b/.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 diff --git a/packages/enhanced-img/src/preprocessor.js b/packages/enhanced-img/src/preprocessor.js index dbba1aa5514f..7331cff18e11 100644 --- a/packages/enhanced-img/src/preprocessor.js +++ b/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} - */ - 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. => const name = '__IMPORTED_ASSET_' + imports.size + '__'; @@ -160,7 +152,7 @@ export function image(opts) { await Promise.all(pending_ast_updates); - // add imports and consts to \n` - ); + s.prepend(`\n`); } return { @@ -318,12 +302,11 @@ function stringToNumber(param) { } /** - * @param {Map} 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 = ''; for (const [format, srcset] of Object.entries(image.sources)) { - res += ``; + res += ``; } res += ``; @@ -351,20 +334,11 @@ function img_to_picture(consts, content, node, image) { } /** - * @param {Map} 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}"`; } /** diff --git a/packages/enhanced-img/test/Output.svelte b/packages/enhanced-img/test/Output.svelte index 80a8485485ad..4d8bcc402272 100644 --- a/packages/enhanced-img/test/Output.svelte +++ b/packages/enhanced-img/test/Output.svelte @@ -1,11 +1,6 @@ - -