From eca6cf238c987f448259603f2696c21dfbebd68f Mon Sep 17 00:00:00 2001 From: dominikg Date: Tue, 8 Jul 2025 15:14:48 +0200 Subject: [PATCH 1/4] refactor: enhanced-img with v-p-s6 preprocessor support --- .changeset/rude-jeans-yell.md | 5 +++ packages/enhanced-img/package.json | 4 +- packages/enhanced-img/src/vite-plugin.js | 45 +++++++------------ .../enhanced-img/test/markup-plugin.spec.js | 2 +- 4 files changed, 25 insertions(+), 31 deletions(-) create mode 100644 .changeset/rude-jeans-yell.md diff --git a/.changeset/rude-jeans-yell.md b/.changeset/rude-jeans-yell.md new file mode 100644 index 000000000000..c82e0ad533fa --- /dev/null +++ b/.changeset/rude-jeans-yell.md @@ -0,0 +1,5 @@ +--- +'@sveltejs/enhanced-img': minor +--- + +Use new filters and enhancements from vite-plugin-svelte. Requires vite >= 6.3 and vite-plugin-svelte >= 6.0 diff --git a/packages/enhanced-img/package.json b/packages/enhanced-img/package.json index 26d57740a1b7..432edaa6da8b 100644 --- a/packages/enhanced-img/package.json +++ b/packages/enhanced-img/package.json @@ -53,8 +53,8 @@ "vitest": "catalog:" }, "peerDependencies": { - "@sveltejs/vite-plugin-svelte": "^5.0.0 || ^6.0.0-next.0", + "@sveltejs/vite-plugin-svelte": "^6.0.0-next.0", "svelte": "^5.0.0", - "vite": ">= 5.0.0" + "vite": "^6.3.0 || >=7.0.0" } } diff --git a/packages/enhanced-img/src/vite-plugin.js b/packages/enhanced-img/src/vite-plugin.js index cbfb7b3a1ca7..112ab8871fd5 100644 --- a/packages/enhanced-img/src/vite-plugin.js +++ b/packages/enhanced-img/src/vite-plugin.js @@ -1,8 +1,6 @@ /** @import { AST } from 'svelte/compiler' */ - import { existsSync } from 'node:fs'; import path from 'node:path'; -import { loadSvelteConfig } from '@sveltejs/vite-plugin-svelte'; import MagicString from 'magic-string'; import sharp from 'sharp'; import { parse } from 'svelte-parse-markup'; @@ -27,37 +25,27 @@ export function image_plugin(imagetools_plugin) { /** @type {import('vite').ResolvedConfig} */ let vite_config; - /** @type {Partial} */ - let svelte_config; - const name = 'vite-plugin-enhanced-img-markup'; - return { + /** @type {import('vite').Plugin} */ + const plugin = { name, - enforce: 'pre', - async configResolved(config) { + configResolved(config) { vite_config = config; - for (const plugin of config.plugins || []) { - if (plugin.name === name) { - break; - } - if (plugin.name === 'vite-plugin-svelte') { - throw new Error( - '@sveltejs/enhanced-img must come before the Svelte or SvelteKit plugins' - ); - } + const svelteConfigPlugin = config.plugins.find((p) => p.name === 'vite-plugin-svelte:config'); + if (!svelteConfigPlugin) { + throw new Error('@sveltejs/enhanced-img requires @sveltejs/vite-plugin-svelte 6 or higher'); } - svelte_config = await loadSvelteConfig(); - if (!svelte_config) throw new Error('Could not load Svelte config file'); + plugin.transform.filter.id = svelteConfigPlugin.api.idFilter; }, - async transform(content, filename) { - const plugin_context = this; - const extensions = svelte_config?.extensions || ['.svelte']; - if (extensions.some((ext) => filename.endsWith(ext))) { - if (!content.includes(' { ); const transform = /** @type {(this: import('vite').Rollup.TransformPluginContext, code: string, id: string, options?: {ssr?: boolean;}) => Promise} */ ( - vite_plugin.transform + vite_plugin.transform.handler ); const transformed = await transform.call( plugin_context, From d0be2fa6b1e61acb65f97ce6703f150592cc0ba2 Mon Sep 17 00:00:00 2001 From: dominikg Date: Tue, 8 Jul 2025 15:34:08 +0200 Subject: [PATCH 2/4] ignore type issues with vite/rollup version until that is updated in the monorepo --- packages/enhanced-img/src/vite-plugin.js | 1 + packages/enhanced-img/test/markup-plugin.spec.js | 3 ++- 2 files changed, 3 insertions(+), 1 deletion(-) diff --git a/packages/enhanced-img/src/vite-plugin.js b/packages/enhanced-img/src/vite-plugin.js index 112ab8871fd5..8a6705dc258d 100644 --- a/packages/enhanced-img/src/vite-plugin.js +++ b/packages/enhanced-img/src/vite-plugin.js @@ -36,6 +36,7 @@ export function image_plugin(imagetools_plugin) { if (!svelteConfigPlugin) { throw new Error('@sveltejs/enhanced-img requires @sveltejs/vite-plugin-svelte 6 or higher'); } + // @ts-expect-error plugin.transform is defined below before configResolved is called plugin.transform.filter.id = svelteConfigPlugin.api.idFilter; }, transform: { diff --git a/packages/enhanced-img/test/markup-plugin.spec.js b/packages/enhanced-img/test/markup-plugin.spec.js index 95a53cd6e274..13cc83133d80 100644 --- a/packages/enhanced-img/test/markup-plugin.spec.js +++ b/packages/enhanced-img/test/markup-plugin.spec.js @@ -27,7 +27,8 @@ it('Image preprocess snapshot test', async () => { }) ); const transform = - /** @type {(this: import('vite').Rollup.TransformPluginContext, code: string, id: string, options?: {ssr?: boolean;}) => Promise} */ ( + /** @type {(this: import('vite').Rollup.TransformPluginContext, code: string, id: string, options?: {ssr?: boolean;}) => Promise} */ ( + // @ts-expect-error fails until vite is updated vite_plugin.transform.handler ); const transformed = await transform.call( From a21158f9016252f0c21bad5eb7f16f8e1ae5128e Mon Sep 17 00:00:00 2001 From: dominikg Date: Tue, 8 Jul 2025 16:26:28 +0200 Subject: [PATCH 3/4] fix format --- packages/enhanced-img/test/markup-plugin.spec.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/enhanced-img/test/markup-plugin.spec.js b/packages/enhanced-img/test/markup-plugin.spec.js index 13cc83133d80..1da359e91cff 100644 --- a/packages/enhanced-img/test/markup-plugin.spec.js +++ b/packages/enhanced-img/test/markup-plugin.spec.js @@ -28,7 +28,7 @@ it('Image preprocess snapshot test', async () => { ); const transform = /** @type {(this: import('vite').Rollup.TransformPluginContext, code: string, id: string, options?: {ssr?: boolean;}) => Promise} */ ( - // @ts-expect-error fails until vite is updated + // @ts-expect-error fails until vite is updated vite_plugin.transform.handler ); const transformed = await transform.call( From 3544630a5a635af37975b3568b9b584cdaa5c7df Mon Sep 17 00:00:00 2001 From: "Dominik G." Date: Thu, 10 Jul 2025 18:46:37 +0000 Subject: [PATCH 4/4] Apply suggestions from code review Co-authored-by: Ben McCann <322311+benmccann@users.noreply.github.com> --- .changeset/rude-jeans-yell.md | 2 +- packages/enhanced-img/package.json | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/.changeset/rude-jeans-yell.md b/.changeset/rude-jeans-yell.md index c82e0ad533fa..cfd83565a30c 100644 --- a/.changeset/rude-jeans-yell.md +++ b/.changeset/rude-jeans-yell.md @@ -2,4 +2,4 @@ '@sveltejs/enhanced-img': minor --- -Use new filters and enhancements from vite-plugin-svelte. Requires vite >= 6.3 and vite-plugin-svelte >= 6.0 +breaking: use new filters and enhancements from `vite-plugin-svelte`. Requires `vite >= 6.3` and `vite-plugin-svelte >= 6.0`. diff --git a/packages/enhanced-img/package.json b/packages/enhanced-img/package.json index 432edaa6da8b..830564482681 100644 --- a/packages/enhanced-img/package.json +++ b/packages/enhanced-img/package.json @@ -53,7 +53,7 @@ "vitest": "catalog:" }, "peerDependencies": { - "@sveltejs/vite-plugin-svelte": "^6.0.0-next.0", + "@sveltejs/vite-plugin-svelte": "^6.0.0", "svelte": "^5.0.0", "vite": "^6.3.0 || >=7.0.0" }