Skip to content

Commit 03d8fd7

Browse files
benmccannbenmccann
committed
perf: prefer string values to expression values
1 parent 960eca6 commit 03d8fd7

File tree

3 files changed

+26
-16
lines changed

3 files changed

+26
-16
lines changed

‎.changeset/shy-roses-judge.md‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
---
2+
'@sveltejs/enhanced-img': patch
3+
---
4+
5+
perf: prefer string values to expression values

‎packages/enhanced-img/src/preprocessor.js‎

Lines changed: 13 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -280,23 +280,28 @@ function img_to_picture(content, node, image) {
280280

281281
let res = '<picture>';
282282
for (const [format, srcset] of Object.entries(image.sources)) {
283-
res += `<source srcset={"${srcset}"}${sizes_string} type="image/${format}" />`;
283+
res += `<source srcset=${to_value(srcset)}${sizes_string} type="image/${format}" />`;
284284
}
285-
// Need to handle src differently when using either Vite's renderBuiltUrl or relative base path in Vite.
286-
// See https://github.com/vitejs/vite/blob/b93dfe3e08f56cafe2e549efd80285a12a3dc2f0/packages/vite/src/node/plugins/asset.ts#L132
287-
const src =
288-
image.img.src.startsWith('"+') && image.img.src.endsWith('+"')
289-
? `{"${image.img.src.substring(2, image.img.src.length - 2)}"}`
290-
: `"${image.img.src}"`;
291285
res += `<img ${img_attributes_to_markdown(content, attributes, {
292-
src,
286+
src: to_value(image.img.src),
293287
width: image.img.w,
294288
height: image.img.h
295289
})} />`;
296290
res += '</picture>';
297291
return res;
298292
}
299293

294+
/**
295+
* Need to handle src differently when using either Vite's renderBuiltUrl or relative base path in Vite.
296+
* See https://github.com/vitejs/vite/blob/b93dfe3e08f56cafe2e549efd80285a12a3dc2f0/packages/vite/src/node/plugins/asset.ts#L132
297+
* @param {string} src
298+
*/
299+
function to_value(src) {
300+
return src.startsWith('"+') && src.endsWith('+"')
301+
? `{"${src.substring(2, src.length - 2)}"}`
302+
: `"${src}"`;
303+
}
304+
300305
/**
301306
* For images like `<img src={manually_imported} />`
302307
* @param {string} content

‎packages/enhanced-img/test/Output.svelte‎

Lines changed: 8 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -15,21 +15,21 @@
1515

1616
<img src="./foo.png" alt="non-enhanced test" />
1717

18-
<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="basic test" width=1440 height=1440 /></picture>
18+
<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="basic test" width=1440 height=1440 /></picture>
1919

20-
<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" width=1440 height=1440 /></picture>
20+
<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" width=1440 height=1440 /></picture>
2121

22-
<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="directive test" width=1440 height=1440 /></picture>
22+
<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="directive test" width=1440 height=1440 /></picture>
2323

24-
<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" {...{ foo }} alt="spread attributes test" width=1440 height=1440 /></picture>
24+
<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" {...{ foo }} alt="spread attributes test" width=1440 height=1440 /></picture>
2525

26-
<picture><source srcset={"/1 1440w, /2 960w"} sizes="(min-width: 60rem) 80vw, (min-width: 40rem) 90vw, 100vw" type="image/avif" /><source srcset={"/3 1440w, /4 960w"} sizes="(min-width: 60rem) 80vw, (min-width: 40rem) 90vw, 100vw" type="image/webp" /><source srcset={"5 1440w, /6 960w"} sizes="(min-width: 60rem) 80vw, (min-width: 40rem) 90vw, 100vw" type="image/png" /><img src="/7" alt="sizes test" width=1440 height=1440 /></picture>
26+
<picture><source srcset="/1 1440w, /2 960w" sizes="(min-width: 60rem) 80vw, (min-width: 40rem) 90vw, 100vw" type="image/avif" /><source srcset="/3 1440w, /4 960w" sizes="(min-width: 60rem) 80vw, (min-width: 40rem) 90vw, 100vw" type="image/webp" /><source srcset="5 1440w, /6 960w" sizes="(min-width: 60rem) 80vw, (min-width: 40rem) 90vw, 100vw" type="image/png" /><img src="/7" alt="sizes test" width=1440 height=1440 /></picture>
2727

28-
<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" on:click={(foo = 'clicked an image!')} alt="event handler test" width=1440 height=1440 /></picture>
28+
<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" on:click={(foo = 'clicked an image!')} alt="event handler test" width=1440 height=1440 /></picture>
2929

30-
<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="alias test" width=1440 height=1440 /></picture>
30+
<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="alias test" width=1440 height=1440 /></picture>
3131

32-
<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="absolute path test" width=1440 height=1440 /></picture>
32+
<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="absolute path test" width=1440 height=1440 /></picture>
3333

3434
{#if typeof src === 'string'}
3535
<img src={src.img.src} alt="attribute shorthand test" width={src.img.w} height={src.img.h} />

0 commit comments

Comments
 (0)