@sveltejs/vite-plugin-svelte 1.0.0-next.40 → 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/esbuild.ts

@@ -8,7 +8,6 @@ import { toESBuildError } from './error';
 
 type EsbuildOptions = NonNullable<DepOptimizationOptions['esbuildOptions']>;
 type EsbuildPlugin = NonNullable<EsbuildOptions['plugins']>[number];
-type EsbuildPluginBuild = Parameters<EsbuildPlugin['setup']>[0];
 
 export const facadeEsbuildSveltePluginName = 'vite-plugin-svelte:facade';
 
@@ -16,7 +15,9 @@ export function esbuildSveltePlugin(options: ResolvedOptions): EsbuildPlugin {
 	return {
 		name: 'vite-plugin-svelte:optimize-svelte',
 		setup(build) {
-			disableVitePrebundleSvelte(build);
+			// Skip in scanning phase as Vite already handles scanning Svelte files.
+			// Otherwise this would heavily slow down the scanning phase.
+			if (build.initialOptions.plugins?.some((v) => v.name === 'vite:dep-scan')) return;
 
 			const svelteExtensions = (options.extensions ?? ['.svelte']).map((ext) => ext.slice(1));
 			const svelteFilter = new RegExp(`\\.(` + svelteExtensions.join('|') + `)(\\?.*)?$`);
@@ -34,30 +35,6 @@ export function esbuildSveltePlugin(options: ResolvedOptions): EsbuildPlugin {
 	};
 }
 
-function disableVitePrebundleSvelte(build: EsbuildPluginBuild) {
-	const viteDepPrebundlePlugin = build.initialOptions.plugins?.find(
-		(v) => v.name === 'vite:dep-pre-bundle'
-	);
-
-	if (!viteDepPrebundlePlugin) return;
-
-	// Prevent vite:dep-pre-bundle from externalizing svelte files
-	const _setup = viteDepPrebundlePlugin.setup.bind(viteDepPrebundlePlugin);
-	viteDepPrebundlePlugin.setup = function (build) {
-		const _onResolve = build.onResolve.bind(build);
-		build.onResolve = function (options, callback) {
-			if (options.filter.source.includes('svelte')) {
-				options.filter = new RegExp(
-					options.filter.source.replace('|svelte', ''),
-					options.filter.flags
-				);
-			}
-			return _onResolve(options, callback);
-		};
-		return _setup(build);
-	};
-}
-
 async function compileSvelte(
 	options: ResolvedOptions,
 	{ filename, code }: { filename: string; code: string }

package/src/utils/hash.ts

@@ -14,7 +14,7 @@ export function safeBase64Hash(input: string) {
 	// OR DON'T USE A HASH AT ALL, what about a simple counter?
 	const md5 = crypto.createHash('md5');
 	md5.update(input);
-	const hash = toSafe(md5.digest('base64')).substr(0, hash_length);
+	const hash = toSafe(md5.digest('base64')).slice(0, hash_length);
 	hashes[input] = hash;
 	return hash;
 }

package/src/utils/load-svelte-config.ts

@@ -29,6 +29,9 @@ export async function loadSvelteConfig(
 	viteConfig: UserConfig,
 	inlineOptions: Partial<Options>
 ): Promise<Partial<Options> | undefined> {
+	if (inlineOptions.configFile === false) {
+		return;
+	}
 	const configFile = findConfigToLoad(viteConfig, inlineOptions);
 	if (configFile) {
 		let err;

package/src/utils/optimizer.ts

@@ -1,6 +1,5 @@
-import fs from 'fs';
+import { promises as fs } from 'fs';
 import path from 'path';
-import { optimizeDeps, ResolvedConfig } from 'vite';
 import { ResolvedOptions } from './options';
 
 // List of options that changes the prebundling result
@@ -13,24 +12,28 @@ const PREBUNDLE_SENSITIVE_OPTIONS: (keyof ResolvedOptions)[] = [
 	'preprocess'
 ];
 
-export async function handleOptimizeDeps(options: ResolvedOptions, viteConfig: ResolvedConfig) {
-	if (!options.experimental.prebundleSvelteLibraries || !viteConfig.cacheDir) return;
+/**
+ * @returns Whether the Svelte metadata has changed
+ */
+export async function saveSvelteMetadata(cacheDir: string, options: ResolvedOptions) {
+	const svelteMetadata = generateSvelteMetadata(options);
+	const svelteMetadataPath = path.resolve(cacheDir, '_svelte_metadata.json');
 
-	const viteMetadataPath = findViteMetadataPath(viteConfig.cacheDir);
-	if (!viteMetadataPath) return;
-
-	const svelteMetadataPath = path.resolve(viteMetadataPath, '../_svelte_metadata.json');
-	const currentSvelteMetadata = JSON.stringify(generateSvelteMetadata(options), (_, value) => {
+	const currentSvelteMetadata = JSON.stringify(svelteMetadata, (_, value) => {
+		// Handle preprocessors
 		return typeof value === 'function' ? value.toString() : value;
 	});
 
-	if (fs.existsSync(svelteMetadataPath)) {
-		const existingSvelteMetadata = fs.readFileSync(svelteMetadataPath, 'utf8');
-		if (existingSvelteMetadata === currentSvelteMetadata) return;
+	let existingSvelteMetadata: string | undefined;
+	try {
+		existingSvelteMetadata = await fs.readFile(svelteMetadataPath, 'utf8');
+	} catch {
+		// ignore
 	}
 
-	await optimizeDeps(viteConfig, true);
-	fs.writeFileSync(svelteMetadataPath, currentSvelteMetadata);
+	await fs.mkdir(cacheDir, { recursive: true });
+	await fs.writeFile(svelteMetadataPath, currentSvelteMetadata);
+	return currentSvelteMetadata !== existingSvelteMetadata;
 }
 
 function generateSvelteMetadata(options: ResolvedOptions) {
@@ -40,11 +43,3 @@ function generateSvelteMetadata(options: ResolvedOptions) {
 	}
 	return metadata;
 }
-
-function findViteMetadataPath(cacheDir: string) {
-	const metadataPaths = ['_metadata.json', 'deps/_metadata.json'];
-	for (const metadataPath of metadataPaths) {
-		const viteMetadataPath = path.resolve(cacheDir, metadataPath);
-		if (fs.existsSync(viteMetadataPath)) return viteMetadataPath;
-	}
-}

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,6 +209,21 @@ export function buildExtraViteConfig(
 		);
 	}
 
+	if (options.experimental?.prebundleSvelteLibraries) {
+		extraViteConfig.optimizeDeps = {
+			...extraViteConfig.optimizeDeps,
+			// Experimental Vite API to allow these extensions to be scanned and prebundled
+			// @ts-ignore
+			extensions: options.extensions ?? ['.svelte'],
+			// Add esbuild plugin to prebundle Svelte files.
+			// Currently a placeholder as more information is needed after Vite config is resolved,
+			// the real Svelte plugin is added in `patchResolvedViteConfig()`
+			esbuildOptions: {
+				plugins: [{ name: facadeEsbuildSveltePluginName, setup: () => {} }]
+			}
+		};
+	}
+
 	// @ts-ignore
 	extraViteConfig.ssr = buildSSROptionsForSvelte(svelteDeps, options, config, extraViteConfig);
 
@@ -241,14 +258,8 @@ function buildOptimizeDepsForSvelte(
 	}
 
 	// If we prebundle svelte libraries, we can skip the whole prebundling dance below
-	if (options.experimental.prebundleSvelteLibraries) {
-		return {
-			include,
-			exclude,
-			esbuildOptions: {
-				plugins: [{ name: facadeEsbuildSveltePluginName, setup: () => {} }]
-			}
-		};
+	if (options.experimental?.prebundleSvelteLibraries) {
+		return { include, exclude };
 	}
 
 	// only svelte component libraries needs to be processed for optimizeDeps, js libraries work fine
@@ -346,9 +357,11 @@ export interface Options {
 	/**
 	 * Path to a svelte config file, either absolute or relative to Vite root
 	 *
+	 * set to `false` to ignore the svelte config file
+	 *
 	 * @see https://vitejs.dev/config/#root
 	 */
-	configFile?: string;
+	configFile?: string | false;
 
 	/**
 	 * A `picomatch` pattern, or array of patterns, which specifies the files the plugin should
@@ -498,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/preprocess.ts

@@ -11,6 +11,7 @@ import { Preprocessor, PreprocessorGroup, Processed, ResolvedOptions } from './o
 import { TransformPluginContext } from 'rollup';
 import { log } from './log';
 import { buildSourceMap } from './sourcemap';
+import path from 'path';
 
 const supportedStyleLangs = ['css', 'less', 'sass', 'scss', 'styl', 'stylus', 'postcss'];
 
@@ -57,7 +58,7 @@ function createViteStylePreprocessor(config: ResolvedConfig): Preprocessor {
 		)) as TransformResult;
 		// patch sourcemap source to point back to original filename
 		if (transformResult.map?.sources?.[0] === moduleId) {
-			transformResult.map.sources[0] = filename;
+			transformResult.map.sources[0] = path.basename(filename);
 		}
 		return {
 			code: transformResult.code,
@@ -94,7 +95,10 @@ function createInjectScopeEverythingRulePreprocessorGroup(): PreprocessorGroup {
 			s.append(' *{}');
 			return {
 				code: s.toString(),
-				map: s.generateDecodedMap({ source: filename, hires: true })
+				map: s.generateDecodedMap({
+					source: filename ? path.basename(filename) : undefined,
+					hires: true
+				})
 			};
 		}
 	};

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]) => {