fix: inspector read file for vite 3.1 (#423)

* fix: load inspector files with a clean filename; update lock and types

* fix: one clean is enough

* docs: remove comment

.changeset/short-clocks-flow.md

@@ -0,0 +1,5 @@
+---
+'@sveltejs/vite-plugin-svelte': patch
+---
+
+fix svelte-inspector import for vite 3.1

packages/vite-plugin-svelte/src/ui/inspector/plugin.ts

@@ -4,6 +4,7 @@ import { InspectorOptions } from '../../utils/options';
 import path from 'path';
 import { fileURLToPath } from 'url';
 import fs from 'fs';
+import { idToFile } from './utils';
 
 const defaultInspectorOptions: InspectorOptions = {
 	toggleKeyCombo: process.platform === 'win32' ? 'control-shift' : 'meta-shift',
@@ -71,7 +72,12 @@ export function svelteInspector(): Plugin {
 				return `export default ${JSON.stringify(inspectorOptions ?? {})}`;
 			} else if (id.startsWith(inspectorPath)) {
 				// read file ourselves to avoid getting shut out by vites fs.allow check
-				return await fs.promises.readFile(id, 'utf-8');
+				const file = idToFile(id);
+				if (fs.existsSync(file)) {
+					return await fs.promises.readFile(file, 'utf-8');
+				} else {
+					log.error(`failed to find file for svelte-inspector: ${file}, referenced by id ${id}.`);
+				}
 			}
 		},
 

packages/vite-plugin-svelte/src/ui/inspector/utils.ts

@@ -0,0 +1,13 @@
+const FS_PREFIX = `/@fs/`;
+const IS_WINDOWS = process.platform === 'win32';
+const queryRE = /\?.*$/s;
+const hashRE = /#.*$/s;
+
+export function idToFile(id: string): string {
+	// strip /@fs/ but keep leading / on non-windows
+	if (id.startsWith(FS_PREFIX)) {
+		id = id = id.slice(IS_WINDOWS ? FS_PREFIX.length : FS_PREFIX.length - 1);
+	}
+	// strip query and hash
+	return id.replace(hashRE, '').replace(queryRE, '');
+}

packages/vite-plugin-svelte/src/utils/options.ts

@@ -138,7 +138,7 @@ export async function preResolveOptions(
 		isServe: viteEnv.command === 'serve',
 		isDebug: process.env.DEBUG != null
 	};
-	const merged = mergeConfigs<Partial<PreResolvedOptions> | undefined>(
+	const merged = mergeConfigs<PreResolvedOptions>(
 		defaultOptions,
 		svelteConfig,
 		inlineOptions,
@@ -152,15 +152,15 @@ export async function preResolveOptions(
 	return merged;
 }
 
-function mergeConfigs<T>(...configs: T[]): ResolvedOptions {
-	let result = {} as T;
-	for (const config of configs.filter(Boolean)) {
-		result = deepmerge<T>(result, config, {
+function mergeConfigs<T>(...configs: (Partial<T> | undefined)[]): T {
+	let result: Partial<T> = {};
+	for (const config of configs.filter((x) => x != null)) {
+		result = deepmerge<T>(result, config!, {
 			// replace arrays
 			arrayMerge: (target: any[], source: any[]) => source ?? target
 		});
 	}
-	return result as ResolvedOptions;
+	return result as T;
 }
 
 // used in configResolved phase, merges a contextual default config, pre-resolved options, and some preprocessors.
@@ -180,7 +180,7 @@ export function resolveOptions(
 		root: viteConfig.root,
 		isProduction: viteConfig.isProduction
 	};
-	const merged: ResolvedOptions = mergeConfigs(defaultOptions, preResolveOptions, extraOptions);
+	const merged = mergeConfigs<ResolvedOptions>(defaultOptions, preResolveOptions, extraOptions);
 
 	removeIgnoredOptions(merged);
 	addSvelteKitOptions(merged);