diff --git a/.changeset/rude-jeans-yell.md b/.changeset/rude-jeans-yell.md new file mode 100644 index 000000000000..cfd83565a30c --- /dev/null +++ b/.changeset/rude-jeans-yell.md @@ -0,0 +1,5 @@ +--- +'@sveltejs/enhanced-img': minor +--- + +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 26d57740a1b7..830564482681 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", "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..8a6705dc258d 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,28 @@ 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'); + // @ts-expect-error plugin.transform is defined below before configResolved is called + 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 + /** @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( plugin_context,