load config using vite-plugin-svelte

Author: benmccann

.changeset/curvy-flies-carry.md

@@ -1,5 +1,5 @@
 ---
-'@sveltejs/enhanced-img': minor
+'@sveltejs/enhanced-img': patch
 ---
 
 feat: add support for targeting `enhanced\:img` in CSS

packages/enhanced-img/package.json

@@ -43,6 +43,7 @@
 		"zimmerframe": "^1.1.2"
 	},
 	"devDependencies": {
+		"@sveltejs/vite-plugin-svelte": "^5.0.1",
 		"@types/estree": "^1.0.5",
 		"@types/node": "^18.19.48",
 		"rollup": "^4.27.4",
@@ -52,6 +53,7 @@
 		"vitest": "^3.0.1"
 	},
 	"peerDependencies": {
+		"@sveltejs/vite-plugin-svelte": "^5.0.0",
 		"svelte": "^5.0.0",
 		"vite": ">= 5.0.0"
 	}

packages/enhanced-img/src/index.js

@@ -4,7 +4,7 @@ import { imagetools } from 'vite-imagetools';
 import { image_plugin } from './vite-plugin.js';
 
 /**
- * @returns {Array<import('vite').Plugin | Promise<import('vite').Plugin>>}
+ * @returns {import('vite').Plugin[]}
  */
 export function enhancedImages() {
 	const imagetools_instance = imagetools_plugin();

packages/enhanced-img/src/vite-plugin.js

@@ -2,8 +2,7 @@
 
 import { existsSync } from 'node:fs';
 import path from 'node:path';
-import process from 'node:process';
-import url from 'node:url';
+import { loadSvelteConfig } from '@sveltejs/vite-plugin-svelte';
 import MagicString from 'magic-string';
 import sharp from 'sharp';
 import { parse } from 'svelte-parse-markup';
@@ -15,9 +14,9 @@ const OPTIMIZABLE = /^[^?]+\.(avif|heif|gif|jpeg|jpg|png|tiff|webp)(\?.*)?$/;
 /**
  * Creates the Svelte image plugin.
  * @param {import('vite').Plugin<void>} imagetools_plugin
- * @returns {Promise<import('vite').Plugin<void>>}
+ * @returns {import('vite').Plugin<void>}
  */
-export async function image_plugin(imagetools_plugin) {
+export function image_plugin(imagetools_plugin) {
 	// TODO: clear this map in dev mode to avoid memory leak
 	/**
 	 * URL to image details
@@ -28,17 +27,20 @@ export async function image_plugin(imagetools_plugin) {
 	/** @type {import('vite').ResolvedConfig} */
 	let vite_config;
 
-	const svelte_config = await load_config();
-	const extensions = svelte_config.extensions || ['.svelte'];
+	/** @type {Partial<import('@sveltejs/vite-plugin-svelte').SvelteConfig | undefined>} */
+	let svelte_config;
 
 	return {
 		name: 'vite-plugin-enhanced-img-markup',
 		enforce: 'pre',
-		configResolved(config) {
+		async configResolved(config) {
 			vite_config = config;
+			svelte_config = await loadSvelteConfig();
+			if (!svelte_config) throw new Error('Could not load Svelte config file');
 		},
 		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;
@@ -378,28 +380,3 @@ function dynamic_img_to_picture(content, node, src_var_name) {
 	</picture>
 {/if}`;
 }
-
-/**
- * Loads and validates svelte.config.js
- * @param {{ cwd?: string }} options
- * @returns {Promise<{extensions?: string[]}>}
- */
-export async function load_config({ cwd = process.cwd() } = {}) {
-	const config_file = path.join(cwd, 'svelte.config.js');
-
-	if (!existsSync(config_file)) {
-		return {};
-	}
-
-	const config = await import(`${url.pathToFileURL(config_file).href}?ts=${Date.now()}`);
-
-	try {
-		return config.default;
-	} catch (e) {
-		const error = /** @type {Error} */ (e);
-
-		// redact the stack trace — it's not helpful to users
-		error.stack = `Could not load svelte.config.js: ${error.message}\n`;
-		throw error;
-	}
-}

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

@@ -7,7 +7,7 @@ const resolve = /** @param {string} file */ (file) => path.resolve(__dirname, fi
 
 it('Image preprocess snapshot test', async () => {
 	const filename = 'Input.svelte';
-	const vite_plugin = await image_plugin({
+	const vite_plugin = image_plugin({
 		name: 'vite-imagetools-mock',
 		load(id) {
 			if (id.includes('dev')) {