@sveltejs/vite-plugin-svelte 1.0.0-next.42 → 1.0.0-next.43

package/src/ui/inspector/plugin.ts

@@ -0,0 +1,101 @@
+import { createRequire } from 'module';
+import { Plugin } from 'vite';
+import { log } from '../../utils/log';
+import { InspectorOptions } from '../../utils/options';
+
+const defaultInspectorOptions: InspectorOptions = {
+	toggleKeyCombo: process.platform === 'win32' ? 'control-shift' : 'meta-shift',
+	holdMode: false,
+	showToggleButton: 'active',
+	toggleButtonPos: 'top-right',
+	customStyles: true
+};
+
+export function svelteInspector(): Plugin {
+	let root: string;
+	let rootRequire: NodeRequire;
+	let inspectorOptions: InspectorOptions;
+	let append_to: string | undefined;
+
+	return {
+		name: 'vite-plugin-svelte:inspector',
+		apply: 'serve',
+		enforce: 'pre',
+
+		configResolved(config) {
+			const vps = config.plugins.find((p) => p.name === 'vite-plugin-svelte');
+			if (vps?.api?.options?.experimental?.inspector) {
+				inspectorOptions = {
+					...defaultInspectorOptions,
+					...vps.api.options.experimental.inspector
+				};
+			}
+			if (!vps || !inspectorOptions) {
+				// disabled, turn all hooks into noops
+				this.resolveId = this.load = this.transformIndexHtml = this.transform = () => {};
+			} else {
+				root = config.root || process.cwd();
+				rootRequire = createRequire(root);
+				if (vps.api.options.kit && !inspectorOptions.appendTo) {
+					const out_dir = vps.api.options.kit.outDir || '.svelte-kit';
+					inspectorOptions.appendTo = `${out_dir}/runtime/client/start.js`;
+				}
+				append_to = inspectorOptions.appendTo;
+			}
+		},
+
+		async resolveId(importee: string, importer, options) {
+			if (options?.ssr) {
+				return;
+			}
+			if (importee === 'virtual:svelte-inspector-options') {
+				return importee;
+			}
+			if (importee.startsWith('virtual:svelte-inspector:')) {
+				// this is needed because the plugin itself is not a dependency of the app so regular resolve may not find it
+				const file = importee.replace(
+					'virtual:svelte-inspector:',
+					'@sveltejs/vite-plugin-svelte/src/ui/inspector/'
+				);
+				const path = rootRequire.resolve(file);
+				if (path) {
+					return path;
+				} else {
+					log.error.once(`failed to resolve ${file} for ${importee} from ${root}`);
+				}
+			}
+		},
+		load(id) {
+			if (id === 'virtual:svelte-inspector-options') {
+				return `export default ${JSON.stringify(inspectorOptions ?? {})}`;
+			}
+		},
+		transform(code: string, id: string, options?: { ssr?: boolean }) {
+			if (options?.ssr || !append_to) {
+				return;
+			}
+			if (id.endsWith(append_to)) {
+				return { code: `${code}\nimport 'virtual:svelte-inspector:load-inspector.ts'` };
+			}
+		},
+		transformIndexHtml(html) {
+			if (append_to) {
+				return;
+			}
+			return {
+				html,
+				tags: [
+					{
+						tag: 'script',
+						injectTo: 'body',
+						attrs: {
+							type: 'module',
+							// /@id/ is needed, otherwise the virtual: is seen as protocol by browser and cors error happens
+							src: '/@id/virtual:svelte-inspector:load-inspector.ts'
+						}
+					}
+				]
+			};
+		}
+	};
+}

package/src/utils/compile.ts

@@ -6,6 +6,8 @@ import { SvelteRequest } from './id';
 import { safeBase64Hash } from './hash';
 import { log } from './log';
 
+const scriptLangRE = /<script [^>]*lang=["']?([^"' >]+)["']?[^>]*>/;
+
 const _createCompileSvelte = (makeHot: Function) =>
 	async function compileSvelte(
 		svelteRequest: SvelteRequest,
@@ -88,6 +90,7 @@ const _createCompileSvelte = (makeHot: Function) =>
 		return {
 			filename,
 			normalizedFilename,
+			lang: code.match(scriptLangRE)?.[1] || 'js',
 			// @ts-ignore
 			compiled,
 			ssr,
@@ -148,6 +151,7 @@ export interface Compiled {
 export interface CompileData {
 	filename: string;
 	normalizedFilename: string;
+	lang: string;
 	compiled: Compiled;
 	ssr: boolean | undefined;
 	dependencies: string[];

package/src/utils/options.ts

@@ -24,6 +24,7 @@ import { findRootSvelteDependencies, needsOptimization, SvelteDependency } from
 import { createRequire } from 'module';
 import { esbuildSveltePlugin, facadeEsbuildSveltePluginName } from './esbuild';
 import { addExtraPreprocessors } from './preprocess';
+import deepmerge from 'deepmerge';
 
 const knownOptions = new Set([
 	'configFile',
@@ -37,7 +38,8 @@ const knownOptions = new Set([
 	'hot',
 	'ignorePluginPreprocessors',
 	'disableDependencyReinclusion',
-	'experimental'
+	'experimental',
+	'kit'
 ]);
 
 export function validateInlineOptions(inlineOptions?: Partial<Options>) {
@@ -65,26 +67,19 @@ export async function preResolveOptions(
 		}
 	};
 	const svelteConfig = await loadSvelteConfig(viteConfigWithResolvedRoot, inlineOptions);
-	const merged = {
-		...defaultOptions,
-		...svelteConfig,
-		...inlineOptions,
-		compilerOptions: {
-			...defaultOptions?.compilerOptions,
-			...svelteConfig?.compilerOptions,
-			...inlineOptions?.compilerOptions
-		},
-		experimental: {
-			...defaultOptions?.experimental,
-			...svelteConfig?.experimental,
-			...inlineOptions?.experimental
-		},
-		// extras
+	const extraOptions: Partial<PreResolvedOptions> = {
 		root: viteConfigWithResolvedRoot.root!,
 		isBuild: viteEnv.command === 'build',
 		isServe: viteEnv.command === 'serve',
 		isDebug: process.env.DEBUG != null
 	};
+	const merged = mergeConfigs<Partial<PreResolvedOptions> | undefined>(
+		defaultOptions,
+		svelteConfig,
+		inlineOptions,
+		extraOptions
+	);
+
 	// configFile of svelteConfig contains the absolute path it was loaded from,
 	// prefer it over the possibly relative inline path
 	if (svelteConfig?.configFile) {
@@ -93,6 +88,17 @@ export async function preResolveOptions(
 	return merged;
 }
 
+function mergeConfigs<T>(...configs: T[]): ResolvedOptions {
+	let result = {};
+	for (const config of configs.filter(Boolean)) {
+		result = deepmerge<T>(result, config, {
+			// replace arrays
+			arrayMerge: (target: any[], source: any[]) => source ?? target
+		});
+	}
+	return result as ResolvedOptions;
+}
+
 // used in configResolved phase, merges a contextual default config, pre-resolved options, and some preprocessors.
 // also validates the final config.
 export function resolveOptions(
@@ -106,16 +112,12 @@ export function resolveOptions(
 			dev: !viteConfig.isProduction
 		}
 	};
-	const merged: ResolvedOptions = {
-		...defaultOptions,
-		...preResolveOptions,
-		compilerOptions: {
-			...defaultOptions.compilerOptions,
-			...preResolveOptions.compilerOptions
-		},
+	const extraOptions: Partial<ResolvedOptions> = {
 		root: viteConfig.root,
 		isProduction: viteConfig.isProduction
 	};
+	const merged: ResolvedOptions = mergeConfigs(defaultOptions, preResolveOptions, extraOptions);
+
 	addExtraPreprocessors(merged, viteConfig);
 	enforceOptionsForHmr(merged);
 	enforceOptionsForProduction(merged);
@@ -207,7 +209,7 @@ export function buildExtraViteConfig(
 		);
 	}
 
-	if (options.experimental.prebundleSvelteLibraries) {
+	if (options.experimental?.prebundleSvelteLibraries) {
 		extraViteConfig.optimizeDeps = {
 			...extraViteConfig.optimizeDeps,
 			// Experimental Vite API to allow these extensions to be scanned and prebundled
@@ -256,7 +258,7 @@ function buildOptimizeDepsForSvelte(
 	}
 
 	// If we prebundle svelte libraries, we can skip the whole prebundling dance below
-	if (options.experimental.prebundleSvelteLibraries) {
+	if (options.experimental?.prebundleSvelteLibraries) {
 		return { include, exclude };
 	}
 
@@ -355,7 +357,7 @@ export interface Options {
 	/**
 	 * Path to a svelte config file, either absolute or relative to Vite root
 	 *
-	 * set to `false` to skip reading config from a file
+	 * set to `false` to ignore the svelte config file
 	 *
 	 * @see https://vitejs.dev/config/#root
 	 */
@@ -509,6 +511,55 @@ export interface ExperimentalOptions {
 		code: string;
 		compileOptions: Partial<CompileOptions>;
 	}) => Promise<Partial<CompileOptions> | void> | Partial<CompileOptions> | void;
+
+	/**
+	 * enable svelte inspector
+	 */
+	inspector?: InspectorOptions | boolean;
+}
+
+export interface InspectorOptions {
+	/**
+	 * define a key combo to toggle inspector,
+	 * @default 'control-shift' on windows, 'meta-shift' on other os
+	 *
+	 * any number of modifiers `control` `shift` `alt` `meta` followed by zero or one regular key, separated by -
+	 * examples: control-shift, control-o, control-alt-s  meta-x control-meta
+	 * Some keys have native behavior (e.g. alt-s opens history menu on firefox).
+	 * To avoid conflicts or accidentally typing into inputs, modifier only combinations are recommended.
+	 */
+	toggleKeyCombo?: string;
+
+	/**
+	 * inspector is automatically disabled when releasing toggleKeyCombo after holding it for a longpress
+	 * @default false
+	 */
+	holdMode?: boolean;
+	/**
+	 * when to show the toggle button
+	 * @default 'active'
+	 */
+	showToggleButton?: 'always' | 'active' | 'never';
+
+	/**
+	 * where to display the toggle button
+	 * @default top-right
+	 */
+	toggleButtonPos?: 'top-right' | 'top-left' | 'bottom-right' | 'bottom-left';
+
+	/**
+	 * inject custom styles when inspector is active
+	 */
+	customStyles?: boolean;
+
+	/**
+	 * append an import to the module id ending with `appendTo` instead of adding a script into body
+	 * useful for frameworks that do not support trannsformIndexHtml hook
+	 *
+	 * WARNING: only set this if you know exactly what it does.
+	 * Regular users of vite-plugin-svelte or SvelteKit do not need it
+	 */
+	appendTo?: string;
 }
 
 export interface PreResolvedOptions extends Options {

package/src/utils/watch.ts

@@ -58,30 +58,34 @@ export function setupWatchers(
 		}
 	};
 
-	const possibleSvelteConfigs = knownSvelteConfigNames.map((cfg) => path.join(root, cfg));
-	const restartOnConfigAdd = (filename: string) => {
-		if (possibleSvelteConfigs.includes(filename)) {
-			triggerViteRestart(filename);
-		}
-	};
-
-	const restartOnConfigChange = (filename: string) => {
-		if (filename === svelteConfigFile) {
-			triggerViteRestart(filename);
-		}
-	};
-
 	// collection of watcher listeners by event
 	const listenerCollection = {
 		add: [] as Array<Function>,
 		change: [emitChangeEventOnDependants],
 		unlink: [removeUnlinkedFromCache, emitChangeEventOnDependants]
 	};
-	if (svelteConfigFile) {
-		listenerCollection.change.push(restartOnConfigChange);
-		listenerCollection.unlink.push(restartOnConfigChange);
-	} else {
-		listenerCollection.add.push(restartOnConfigAdd);
+
+	if (svelteConfigFile !== false) {
+		// configFile false means we ignore the file and external process is responsible
+		const possibleSvelteConfigs = knownSvelteConfigNames.map((cfg) => path.join(root, cfg));
+		const restartOnConfigAdd = (filename: string) => {
+			if (possibleSvelteConfigs.includes(filename)) {
+				triggerViteRestart(filename);
+			}
+		};
+
+		const restartOnConfigChange = (filename: string) => {
+			if (filename === svelteConfigFile) {
+				triggerViteRestart(filename);
+			}
+		};
+
+		if (svelteConfigFile) {
+			listenerCollection.change.push(restartOnConfigChange);
+			listenerCollection.unlink.push(restartOnConfigChange);
+		} else {
+			listenerCollection.add.push(restartOnConfigAdd);
+		}
 	}
 
 	Object.entries(listenerCollection).forEach(([evt, listeners]) => {