refactor: modular plugins

.changeset/shiny-hats-move.md

@@ -0,0 +1,6 @@
+---
+'@sveltejs/vite-plugin-svelte-inspector': patch
+'@sveltejs/vite-plugin-svelte': patch
+---
+
+use vite environment api internally

.changeset/thirty-roses-tell.md

@@ -0,0 +1,5 @@
+---
+'@sveltejs/vite-plugin-svelte': major
+---
+
+split preprocess and compile into separate plugins

packages/e2e-tests/autoprefixer-browerslist/src/main.js

@@ -1,7 +1,3 @@
 import App from './App.svelte';
-
-if (App.toString().startsWith('class ')) {
-	new App({ target: document.body });
-} else {
-	import('svelte').then(({ mount }) => mount(App, { target: document.body }));
-}
+import { mount } from 'svelte';
+mount(App, { target: document.body });

packages/e2e-tests/configfile-custom/svelte.config.ts

@@ -0,0 +1,2 @@
+console.log('default svelte config loaded');
+export default {};

packages/vite-plugin-svelte-inspector/src/index.js

@@ -33,6 +33,10 @@ export function svelteInspector(options) {
 		apply: 'serve',
 		enforce: 'pre',
 
+		applyToEnvironment(env) {
+			return env.config.consumer === 'client';
+		},
+
 		configResolved(config) {
 			viteConfig = config;
 			const environmentOptions = parseEnvironmentOptions(config);
@@ -43,7 +47,7 @@ export function svelteInspector(options) {
 			}
 
 			// Handle config from svelte.config.js through vite-plugin-svelte
-			const vps = config.plugins.find((p) => p.name === 'vite-plugin-svelte');
+			const vps = config.plugins.find((p) => p.name === 'vite-plugin-svelte:config');
 			const configFileOptions = vps?.api?.options?.inspector;
 
 			// vite-plugin-svelte can only pass options through it's `api` instead of `options`.
@@ -69,42 +73,53 @@ export function svelteInspector(options) {
 				base: config.base?.replace(/\/$/, '') || ''
 			};
 		},
-
-		async resolveId(importee, _, options) {
-			if (options?.ssr || disabled) {
-				return;
-			}
-			if (importee.startsWith('virtual:svelte-inspector-options')) {
-				return importee;
-			} else if (importee.startsWith('virtual:svelte-inspector-path:')) {
-				return importee.replace('virtual:svelte-inspector-path:', inspectorPath);
+		resolveId: {
+			filter: {
+				id: /^virtual:svelte-inspector-/
+			},
+			async handler(importee, _, options) {
+				if (options?.ssr || disabled) {
+					return;
+				}
+				if (importee.startsWith('virtual:svelte-inspector-options')) {
+					return importee;
+				} else if (importee.startsWith('virtual:svelte-inspector-path:')) {
+					return importee.replace('virtual:svelte-inspector-path:', inspectorPath);
+				}
 			}
 		},
-
-		async load(id, options) {
-			if (options?.ssr || disabled) {
-				return;
-			}
-			if (id === 'virtual:svelte-inspector-options') {
-				return `export default ${JSON.stringify(inspectorOptions ?? {})}`;
-			} else if (id.startsWith(inspectorPath)) {
-				// read file ourselves to avoid getting shut out by vites fs.allow check
-				const file = cleanUrl(id);
-				if (fs.existsSync(id)) {
-					return await fs.promises.readFile(file, 'utf-8');
-				} else {
-					viteConfig.logger.error(
-						`[vite-plugin-svelte-inspector] failed to find svelte-inspector: ${id}`
-					);
+		load: {
+			filter: {
+				id: {
+					include: [`${inspectorPath}/**`, /^virtual:svelte-inspector-options$/],
+					exclude: [/style&lang\.css$/]
+				}
+			},
+			async handler(id) {
+				if (disabled) {
+					return;
+				}
+				if (id === 'virtual:svelte-inspector-options') {
+					return `export default ${JSON.stringify(inspectorOptions ?? {})}`;
+				} else if (id.startsWith(inspectorPath)) {
+					// read file ourselves to avoid getting shut out by vites fs.allow check
+					const file = cleanUrl(id);
+					if (fs.existsSync(id)) {
+						return await fs.promises.readFile(file, 'utf-8');
+					} else {
+						viteConfig.logger.error(
+							`[vite-plugin-svelte-inspector] failed to find svelte-inspector: ${id}`
+						);
+					}
 				}
 			}
 		},
-
-		transform(code, id, options) {
-			if (options?.ssr || disabled) {
-				return;
-			}
-			if (id.includes('vite/dist/client/client.mjs')) {
+		transform: {
+			filter: { id: /vite\/dist\/client\/client\.mjs(?:\?|$)/ },
+			handler(code) {
+				if (disabled) {
+					return;
+				}
 				return { code: `${code}\nimport('virtual:svelte-inspector-path:load-inspector.js')` };
 			}
 		}