svelte enhanced img patch

This commit is contained in:
2026-06-04 13:39:14 +01:00
parent 8e8a050796
commit f37cb0128d
2 changed files with 30 additions and 49 deletions
+27 -46
View File
@@ -1,8 +1,33 @@
diff --git a/src/vite-plugin.js b/src/vite-plugin.js
index c8ccb26b3f17cb69eb1e725bab1cde02c88c36cf..565ec235170b148017d191c62599c3968457e77e 100644
index c8ccb26b3f17cb69eb1e725bab1cde02c88c36cf..bf32bbd37d85e6d0d003c15e312ba74f7f3daad6 100644
--- a/src/vite-plugin.js
+++ b/src/vite-plugin.js
@@ -114,7 +114,7 @@ export function image_plugin(imagetools_plugin) {
@@ -8,6 +8,8 @@
// TODO: expose this in vite-imagetools rather than duplicating it
const OPTIMIZABLE = /^[^?]+\.(avif|heif|gif|jpeg|jpg|png|tiff|webp)(\?.*)?$/;
+// Animated formats that should bypass imagetools processing to preserve animation
+const ANIMATED = /^[^?]+\.(gif|webp)(\?.*)?$/;
/**
* Creates the Svelte image plugin.
@@ -81,7 +83,9 @@
const original_url = src_attribute.raw.trim();
let url = original_url;
- if (OPTIMIZABLE.test(url)) {
+ const is_animated = ANIMATED.test(original_url);
+
+ if (OPTIMIZABLE.test(url) && !is_animated) {
const sizes = get_attr_value(node, 'sizes');
const width = get_attr_value(node, 'width');
url += url.includes('?') ? '&' : '?';
@@ -110,11 +114,11 @@
);
}
- if (OPTIMIZABLE.test(url)) {
+ if (OPTIMIZABLE.test(url) && !is_animated) {
const image = await process_id(resolved_id, plugin_context, imagetools_plugin);
s.update(node.start, node.end, img_to_picture(content, node, image));
} else {
@@ -11,47 +36,3 @@ index c8ccb26b3f17cb69eb1e725bab1cde02c88c36cf..565ec235170b148017d191c62599c396
// this must come after the await so that we don't hand off processing between getting
// the imports.size and incrementing the imports.size
const name = imports.get(original_url) || '__IMPORTED_ASSET_' + imports.size + '__';
@@ -136,7 +136,7 @@ export function image_plugin(imagetools_plugin) {
*/
const pending_ast_updates = [];
- walk(/** @type {import('svelte/compiler').AST.TemplateNode} */ (ast), null, {
+ walk(/** @type {import('svelte/compiler').AST.TemplateNode} */(ast), null, {
RegularElement(node, { next }) {
if ('name' in node && node.name === 'enhanced:img') {
// Compare node tag match
@@ -231,7 +231,7 @@ export function parse_object(str) {
function get_attr_value(node, attr) {
if (!('type' in node) || !('attributes' in node)) return;
const attribute = node.attributes.find(
- /** @param {any} v */ (v) => v.type === 'Attribute' && v.name === attr
+ /** @param {any} v */(v) => v.type === 'Attribute' && v.name === attr
);
if (!attribute || !('value' in attribute) || typeof attribute.value === 'boolean') return;
@@ -376,8 +376,8 @@ function dynamic_img_to_picture(content, node, src_var_name) {
{${src_var_name}} was not enhanced. Cannot determine dimensions.
{:else}
<img ${serialize_img_attributes(content, attributes, {
- src: `{${src_var_name}}`
- })} />
+ src: `{${src_var_name}}`
+ })} />
{/if}
{:else}
<picture>
@@ -385,10 +385,10 @@ function dynamic_img_to_picture(content, node, src_var_name) {
<source {srcset}${sizes_string} type={'image/' + format} />
{/each}
<img ${serialize_img_attributes(content, attributes, {
- src: `{${src_var_name}.img.src}`,
- width: `{${src_var_name}.img.w}`,
- height: `{${src_var_name}.img.h}`
- })} />
+ src: `{${src_var_name}.img.src}`,
+ width: `{${src_var_name}.img.w}`,
+ height: `{${src_var_name}.img.h}`
+ })} />
</picture>
{/if}`;
}
+3 -3
View File
@@ -6,7 +6,7 @@ settings:
patchedDependencies:
'@sveltejs/enhanced-img':
hash: 9a1c9b4c9cd4aefef304f2ebee4669210b8e93cf37300e82857392a6327dfbd8
hash: 3870abe8d0cf58437ab9e677757ee9dc3f035f804ffee5c41d3be06cab748492
path: patches/@sveltejs__enhanced-img.patch
importers:
@@ -18,7 +18,7 @@ importers:
version: 3.0.10(@sveltejs/kit@2.57.1(@sveltejs/vite-plugin-svelte@6.2.4(svelte@5.55.4(@typescript-eslint/types@8.58.0))(vite@7.3.2(@types/node@25.9.1)(sass@1.99.0)))(svelte@5.55.4(@typescript-eslint/types@8.58.0))(typescript@5.9.3)(vite@7.3.2(@types/node@25.9.1)(sass@1.99.0)))
'@sveltejs/enhanced-img':
specifier: ^0.10.4
version: 0.10.4(patch_hash=9a1c9b4c9cd4aefef304f2ebee4669210b8e93cf37300e82857392a6327dfbd8)(@sveltejs/vite-plugin-svelte@6.2.4(svelte@5.55.4(@typescript-eslint/types@8.58.0))(vite@7.3.2(@types/node@25.9.1)(sass@1.99.0)))(rollup@4.60.2)(svelte@5.55.4(@typescript-eslint/types@8.58.0))(vite@7.3.2(@types/node@25.9.1)(sass@1.99.0))
version: 0.10.4(patch_hash=3870abe8d0cf58437ab9e677757ee9dc3f035f804ffee5c41d3be06cab748492)(@sveltejs/vite-plugin-svelte@6.2.4(svelte@5.55.4(@typescript-eslint/types@8.58.0))(vite@7.3.2(@types/node@25.9.1)(sass@1.99.0)))(rollup@4.60.2)(svelte@5.55.4(@typescript-eslint/types@8.58.0))(vite@7.3.2(@types/node@25.9.1)(sass@1.99.0))
'@sveltejs/kit':
specifier: ^2.57.1
version: 2.57.1(@sveltejs/vite-plugin-svelte@6.2.4(svelte@5.55.4(@typescript-eslint/types@8.58.0))(vite@7.3.2(@types/node@25.9.1)(sass@1.99.0)))(svelte@5.55.4(@typescript-eslint/types@8.58.0))(typescript@5.9.3)(vite@7.3.2(@types/node@25.9.1)(sass@1.99.0))
@@ -1435,7 +1435,7 @@ snapshots:
dependencies:
'@sveltejs/kit': 2.57.1(@sveltejs/vite-plugin-svelte@6.2.4(svelte@5.55.4(@typescript-eslint/types@8.58.0))(vite@7.3.2(@types/node@25.9.1)(sass@1.99.0)))(svelte@5.55.4(@typescript-eslint/types@8.58.0))(typescript@5.9.3)(vite@7.3.2(@types/node@25.9.1)(sass@1.99.0))
'@sveltejs/enhanced-img@0.10.4(patch_hash=9a1c9b4c9cd4aefef304f2ebee4669210b8e93cf37300e82857392a6327dfbd8)(@sveltejs/vite-plugin-svelte@6.2.4(svelte@5.55.4(@typescript-eslint/types@8.58.0))(vite@7.3.2(@types/node@25.9.1)(sass@1.99.0)))(rollup@4.60.2)(svelte@5.55.4(@typescript-eslint/types@8.58.0))(vite@7.3.2(@types/node@25.9.1)(sass@1.99.0))':
'@sveltejs/enhanced-img@0.10.4(patch_hash=3870abe8d0cf58437ab9e677757ee9dc3f035f804ffee5c41d3be06cab748492)(@sveltejs/vite-plugin-svelte@6.2.4(svelte@5.55.4(@typescript-eslint/types@8.58.0))(vite@7.3.2(@types/node@25.9.1)(sass@1.99.0)))(rollup@4.60.2)(svelte@5.55.4(@typescript-eslint/types@8.58.0))(vite@7.3.2(@types/node@25.9.1)(sass@1.99.0))':
dependencies:
'@sveltejs/vite-plugin-svelte': 6.2.4(svelte@5.55.4(@typescript-eslint/types@8.58.0))(vite@7.3.2(@types/node@25.9.1)(sass@1.99.0))
magic-string: 0.30.21