breaking: enhanced-img with v-p-s6 preprocessor support (#13967)

Author: dominikg

.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`.

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"
 	}
 }

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,30 @@ export function image_plugin(imagetools_plugin) {
 	/** @type {import('vite').ResolvedConfig} */
 	let vite_config;
 
-	/** @type {Partial<import('@sveltejs/vite-plugin-svelte').SvelteConfig | undefined>} */
-	let svelte_config;
-
 	const name = 'vite-plugin-enhanced-img-markup';
 
-	return {
+	/** @type {import('vite').Plugin<void>} */
+	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 to be installed'
+				);
 			}
-			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('<enhanced:img')) {
-					return;
-				}
-
+		transform: {
+			order: 'pre', // puts it before vite-plugin-svelte:compile
+			filter: {
+				code: /<enhanced:img/ // code filter must match in addition to the id filter set in configResolved hook above
+			},
+
+			async handler(content, filename) {
+				const plugin_context = this;
 				const s = new MagicString(content);
 				const ast = parse(content, { filename, modern: true });
 
@@ -196,11 +187,12 @@ export function image_plugin(imagetools_plugin) {
 
 				return {
 					code: s.toString(),
-					map: s.generateMap()
+					map: s.generateMap({ hires: 'boundary' })
 				};
 			}
 		}
 	};
+	return plugin;
 }
 
 /**

packages/enhanced-img/test/markup-plugin.spec.js

@@ -27,8 +27,9 @@ it('Image preprocess snapshot test', async () => {
 		})
 	);
 	const transform =
-		/** @type {(this: import('vite').Rollup.TransformPluginContext, code: string, id: string, options?: {ssr?: boolean;}) => Promise<import('rollup').TransformResult>} */ (
-			vite_plugin.transform
+		/** @type {(this: import('vite').Rollup.TransformPluginContext, code: string, id: string, options?: {ssr?: boolean;}) => Promise<import('vite').Rollup.TransformResult>} */ (
+			// @ts-expect-error fails until vite is updated
+			vite_plugin.transform.handler
 		);
 	const transformed = await transform.call(
 		plugin_context,