mostly working, but hacky raw/direct need work

Author: dominikg

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')` };
 			}
 		}

packages/vite-plugin-svelte/src/handle-hot-update.js

@@ -24,7 +24,7 @@ export async function handleHotUpdate(compileSvelte, ctx, svelteRequest, cache,
 	const { read, server, modules } = ctx;
 
 	const cachedJS = cache.getJS(svelteRequest);
-	const cachedCss = cache.getCSS(svelteRequest.cssId);
+	const cachedCss = cache.getCSS(svelteRequest);
 
 	const content = await read();
 	/** @type {import('./types/compile.d.ts').CompileData} */