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

package/src/ui/inspector/plugin.ts

@@ -0,0 +1,106 @@
+import { Plugin, normalizePath } from 'vite';
+import { log } from '../../utils/log';
+import { InspectorOptions } from '../../utils/options';
+import path from 'path';
+import { fileURLToPath } from 'url';
+import fs from 'fs';
+
+const defaultInspectorOptions: InspectorOptions = {
+	toggleKeyCombo: process.platform === 'win32' ? 'control-shift' : 'meta-shift',
+	holdMode: false,
+	showToggleButton: 'active',
+	toggleButtonPos: 'top-right',
+	customStyles: true
+};
+
+function getInspectorPath() {
+	const pluginPath = normalizePath(path.dirname(fileURLToPath(import.meta.url)));
+	return pluginPath.replace(/\/vite-plugin-svelte\/dist$/, '/vite-plugin-svelte/src/ui/inspector/');
+}
+
+export function svelteInspector(): Plugin {
+	const inspectorPath = getInspectorPath();
+	log.debug.enabled && log.debug(`svelte inspector path: ${inspectorPath}`);
+	let inspectorOptions: InspectorOptions;
+	let appendTo: string | undefined;
+	let disabled = false;
+
+	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) {
+				log.debug('inspector disabled, could not find config');
+				disabled = true;
+			} else {
+				if (vps.api.options.kit && !inspectorOptions.appendTo) {
+					const out_dir = path.basename(vps.api.options.kit.outDir || '.svelte-kit');
+					inspectorOptions.appendTo = `${out_dir}/runtime/client/start.js`;
+				}
+				appendTo = inspectorOptions.appendTo;
+			}
+		},
+
+		async resolveId(importee: string, importer, options) {
+			if (options?.ssr || disabled) {
+				return;
+			}
+			if (importee.startsWith('virtual:svelte-inspector-options')) {
+				return importee;
+			} else if (importee.startsWith('virtual:svelte-inspector-path:')) {
+				const resolved = importee.replace('virtual:svelte-inspector-path:', inspectorPath);
+				log.debug.enabled && log.debug(`resolved ${importee} with ${resolved}`);
+				return resolved;
+			}
+		},
+
+		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
+				return await fs.promises.readFile(id, 'utf-8');
+			}
+		},
+
+		transform(code: string, id: string, options?: { ssr?: boolean }) {
+			if (options?.ssr || disabled || !appendTo) {
+				return;
+			}
+			if (id.endsWith(appendTo)) {
+				return { code: `${code}\nimport 'virtual:svelte-inspector-path:load-inspector.js'` };
+			}
+		},
+		transformIndexHtml(html) {
+			if (disabled || appendTo) {
+				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-path:load-inspector.js'
+						}
+					}
+				]
+			};
+		}
+	};
+}

package/src/utils/__tests__/dependencies.spec.ts

@@ -1,6 +1,10 @@
+import { describe, it, expect } from 'vitest';
 import { findRootSvelteDependencies, needsOptimization } from '../dependencies';
 import * as path from 'path';
 import { createRequire } from 'module';
+import { fileURLToPath } from 'url';
+const __dir = path.dirname(fileURLToPath(import.meta.url));
+const e2eTestRoot = path.resolve(__dir, '../../../../../packages/e2e-tests');
 
 describe('dependencies', () => {
 	describe('findRootSvelteDependencies', () => {
@@ -11,9 +15,7 @@ describe('dependencies', () => {
 			expect(deps[0].path).toEqual([]);
 		});
 		it('should find nested svelte dependencies in packages/e2e-test/package-json-svelte-field', () => {
-			const deps = findRootSvelteDependencies(
-				path.resolve('packages/e2e-tests/package-json-svelte-field')
-			);
+			const deps = findRootSvelteDependencies(path.join(e2eTestRoot, 'package-json-svelte-field'));
 			expect(deps).toHaveLength(3);
 			const hybrid = deps.find((dep) => dep.name === 'e2e-test-dep-svelte-hybrid');
 			expect(hybrid).toBeTruthy();
@@ -29,7 +31,8 @@ describe('dependencies', () => {
 	});
 	describe('needsOptimization', () => {
 		it('should optimize cjs deps only', () => {
-			const localRequire = createRequire(path.resolve('packages/e2e-tests/dependencies'));
+			const testDepsPath = path.join(e2eTestRoot, 'dependencies/package.json');
+			const localRequire = createRequire(testDepsPath);
 			expect(needsOptimization('e2e-test-dep-cjs-and-esm', localRequire)).toBe(false);
 			expect(needsOptimization('e2e-test-dep-cjs-only', localRequire)).toBe(true);
 			expect(needsOptimization('e2e-test-dep-esm-only', localRequire)).toBe(false);

package/src/utils/__tests__/sourcemap.spec.ts

@@ -1,3 +1,4 @@
+import { describe, it, expect } from 'vitest';
 import { buildMagicString, buildSourceMap } from '../sourcemap';
 
 describe('sourcemap', () => {

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,
@@ -19,7 +21,8 @@ const _createCompileSvelte = (makeHot: Function) =>
 		const compileOptions: CompileOptions = {
 			...options.compilerOptions,
 			filename,
-			generate: ssr ? 'ssr' : 'dom'
+			generate: ssr ? 'ssr' : 'dom',
+			format: 'esm'
 		};
 		if (options.hot && options.emitCss) {
 			const hash = `s-${safeBase64Hash(normalizedFilename)}`;
@@ -88,6 +91,7 @@ const _createCompileSvelte = (makeHot: Function) =>
 		return {
 			filename,
 			normalizedFilename,
+			lang: code.match(scriptLangRE)?.[1] || 'js',
 			// @ts-ignore
 			compiled,
 			ssr,
@@ -148,6 +152,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>) {
@@ -59,32 +61,22 @@ export async function preResolveOptions(
 	};
 	const defaultOptions: Partial<Options> = {
 		extensions: ['.svelte'],
-		emitCss: true,
-		compilerOptions: {
-			format: 'esm'
-		}
+		emitCss: true
 	};
 	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 +85,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 +109,13 @@ 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);
+
+	removeIgnoredOptions(merged);
 	addExtraPreprocessors(merged, viteConfig);
 	enforceOptionsForHmr(merged);
 	enforceOptionsForProduction(merged);
@@ -175,6 +175,26 @@ function enforceOptionsForProduction(options: ResolvedOptions) {
 	}
 }
 
+function removeIgnoredOptions(options: ResolvedOptions) {
+	const ignoredCompilerOptions = ['generate', 'format', 'filename'];
+	if (options.hot && options.emitCss) {
+		ignoredCompilerOptions.push('cssHash');
+	}
+	const passedCompilerOptions = Object.keys(options.compilerOptions || {});
+	const passedIgnored = passedCompilerOptions.filter((o) => ignoredCompilerOptions.includes(o));
+	if (passedIgnored.length) {
+		log.warn(
+			`The following Svelte compilerOptions are controlled by vite-plugin-svelte and essential to its functionality. User-specified values are ignored. Please remove them from your configuration: ${passedIgnored.join(
+				', '
+			)}`
+		);
+		passedIgnored.forEach((ignored) => {
+			// @ts-expect-error string access
+			delete options.compilerOptions[ignored];
+		});
+	}
+}
+
 // vite passes unresolved `root`option to config hook but we need the resolved value, so do it here
 // https://github.com/sveltejs/vite-plugin-svelte/issues/113
 // https://github.com/vitejs/vite/blob/43c957de8a99bb326afd732c962f42127b0a4d1e/packages/vite/src/node/config.ts#L293
@@ -207,7 +227,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 +276,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 +375,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
 	 */
@@ -399,11 +419,13 @@ export interface Options {
 	emitCss?: boolean;
 
 	/**
-	 * The options to be passed to the Svelte compiler
+	 * The options to be passed to the Svelte compiler. A few options are set by default,
+	 * including `dev` and `css`. However, some options are non-configurable, like
+	 * `filename`, `format`, `generate`, and `cssHash` (in dev).
 	 *
 	 * @see https://svelte.dev/docs#svelte_compile
 	 */
-	compilerOptions?: CompileOptions;
+	compilerOptions?: Omit<CompileOptions, 'filename' | 'format' | 'generate'>;
 
 	/**
 	 * Handles warning emitted from the Svelte compiler
@@ -509,6 +531,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]) => {