Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

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

Draft
wants to merge 1 commit into
base: main
Choose a base branch
from
Draft

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

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
5 changes: 5 additions & 0 deletions .changeset/wild-flies-run.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
---
'@sveltejs/enhanced-img': patch
---

perf: directly inline values since Svelte no longer inlines variables into template
48 changes: 11 additions & 37 deletions packages/enhanced-img/src/preprocessor.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down Expand Up @@ -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
Expand Down Expand Up @@ -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 + '__';
Expand Down Expand Up @@ -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 {
Expand Down Expand Up @@ -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(
Expand All @@ -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
})} />`;
Expand All @@ -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}"`;
}

/**
Expand Down
11 changes: 3 additions & 8 deletions packages/enhanced-img/test/Output.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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';

Expand All @@ -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>

Expand Down
Loading