@sveltejs/vite-plugin-svelte 2.1.1 → 2.2.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sveltejs/vite-plugin-svelte",
-  "version": "2.1.1",
+  "version": "2.2.0",
   "license": "MIT",
   "author": "dominikg",
   "files": [
@@ -50,11 +50,11 @@
   },
   "devDependencies": {
     "@types/debug": "^4.1.7",
-    "esbuild": "^0.17.17",
-    "rollup": "^2.79.1",
+    "esbuild": "^0.17.18",
+    "rollup": "^3.21.2",
     "svelte": "^3.58.0",
     "tsup": "^6.7.0",
-    "vite": "^4.3.1"
+    "vite": "^4.3.3"
   },
   "scripts": {
     "dev": "pnpm build:ci --sourcemap --watch src",

package/src/index.ts

@@ -273,10 +273,10 @@ export function svelte(inlineOptions?: Partial<Options>): Plugin[] {
 					);
 				}
 			}
-		}
+		},
+		svelteInspector()
 	];
-	plugins.push(svelteInspector());
-	return plugins.filter(Boolean);
+	return plugins;
 }
 
 export { vitePreprocess } from './preprocess';

package/src/ui/inspector/Inspector.svelte

@@ -6,6 +6,7 @@
 	const toggle_combo = options.toggleKeyCombo?.toLowerCase().split('-');
 	const nav_keys = Object.values(options.navKeys).map((k) => k.toLowerCase());
 	let enabled = false;
+	let hasOpened = false;
 
 	const icon = `data:image/svg+xml;base64,${btoa(
 		`
@@ -123,7 +124,8 @@
 	function open_editor(event) {
 		if (file_loc) {
 			stop(event);
-			fetch(`/__open-in-editor?file=${encodeURIComponent(file_loc)}`);
+			fetch(`${options.__internal.base}/__open-in-editor?file=${encodeURIComponent(file_loc)}`);
+			hasOpened = true;
 			if (options.holdMode && is_holding()) {
 				disable();
 			}
@@ -247,6 +249,7 @@
 
 	function disable() {
 		enabled = false;
+		hasOpened = false;
 		enabled_ts = null;
 		const b = document.body;
 		listeners(b, enabled);
@@ -257,6 +260,18 @@
 		active_el = null;
 	}
 
+	function visibilityChange() {
+		if (document.visibilityState === 'hidden') {
+			onLeave();
+		}
+	}
+
+	function onLeave() {
+		if (hasOpened) {
+			disable();
+		}
+	}
+
 	onMount(() => {
 		const s = document.createElement('style');
 		s.setAttribute('type', 'text/css');
@@ -269,6 +284,8 @@
 				document.body.addEventListener('keyup', keyup);
 			}
 		}
+		document.addEventListener('visibilitychange', visibilityChange);
+		document.documentElement.addEventListener('mouseleave', onLeave);
 		return () => {
 			// make sure we get rid of everything
 			disable();
@@ -279,9 +296,11 @@
 			if (toggle_combo) {
 				document.body.removeEventListener('keydown', keydown);
 				if (options.holdMode) {
-					document.body.addEventListener('keyup', keyup);
+					document.body.removeEventListener('keyup', keyup);
 				}
 			}
+			document.removeEventListener('visibilitychange', visibilityChange);
+			document.documentElement.removeEventListener('mouseleave', onLeave);
 		};
 	});
 </script>

package/src/ui/inspector/load-inspector.js

@@ -8,7 +8,7 @@ function create_inspector_host() {
 	}
 	const el = document.createElement('div');
 	el.setAttribute('id', id);
-	document.getElementsByTagName('body')[0].appendChild(el);
+	document.documentElement.appendChild(el);
 	return el;
 }
 

package/src/ui/inspector/options.ts

@@ -0,0 +1,131 @@
+import * as process from 'process';
+import { log } from '../../utils/log';
+import { loadEnv, ResolvedConfig } from 'vite';
+export const defaultInspectorOptions: InspectorOptions = {
+	toggleKeyCombo: process.platform === 'darwin' ? 'meta-shift' : 'control-shift',
+	navKeys: { parent: 'ArrowUp', child: 'ArrowDown', next: 'ArrowRight', prev: 'ArrowLeft' },
+	openKey: 'Enter',
+	holdMode: true,
+	showToggleButton: 'active',
+	toggleButtonPos: 'top-right',
+	customStyles: true
+};
+
+export function parseEnvironmentOptions(
+	config: ResolvedConfig
+): Partial<InspectorOptions> | boolean | void {
+	const env = loadEnv(config.mode, config.envDir ?? process.cwd(), 'SVELTE_INSPECTOR');
+	const options = env?.SVELTE_INSPECTOR_OPTIONS;
+	const toggle = env?.SVELTE_INSPECTOR_TOGGLE;
+	if (options) {
+		try {
+			const parsed = JSON.parse(options);
+			const parsedType = typeof parsed;
+			if (parsedType === 'boolean') {
+				return parsed;
+			} else if (parsedType === 'object') {
+				if (Array.isArray(parsed)) {
+					throw new Error('invalid type, expected object map but got array');
+				}
+				const parsedKeys = Object.keys(parsed);
+				const defaultKeys = Object.keys(defaultInspectorOptions);
+				const unknownKeys = parsedKeys.filter((k) => !defaultKeys.includes(k));
+				if (unknownKeys.length) {
+					log.warn(
+						`ignoring unknown options in environment SVELTE_INSPECTOR_OPTIONS:  ${unknownKeys.join(
+							', '
+						)}.`,
+						undefined,
+						'inspector'
+					);
+					for (const key of unknownKeys) {
+						delete parsed[key];
+					}
+				}
+				log.debug('loaded environment config', parsed, 'inspector');
+				return parsed;
+			}
+		} catch (e) {
+			log.error(
+				`failed to parse inspector options from environment SVELTE_INSPECTOR_OPTIONS="${options}"`,
+				e,
+				'inspector'
+			);
+		}
+	} else if (toggle) {
+		const keyConfig = {
+			toggleKeyCombo: toggle
+		};
+		log.debug('loaded environment config', keyConfig, 'inspector');
+		return keyConfig;
+	}
+}
+
+export interface InspectorOptions {
+	/**
+	 * define a key combo to toggle inspector,
+	 * @default 'meta-shift' on mac, 'control-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;
+
+	/**
+	 * define keys to select elements with via keyboard
+	 * @default {parent: 'ArrowUp', child: 'ArrowDown', next: 'ArrowRight', prev: 'ArrowLeft' }
+	 *
+	 * improves accessibility and also helps when you want to select elements that do not have a hoverable surface area
+	 * due to tight wrapping
+	 *
+	 * A note for users of screen-readers:
+	 * If you are using arrow keys to navigate the page itself, change the navKeys to avoid conflicts.
+	 * e.g. navKeys: {parent: 'w', prev: 'a', child: 's', next: 'd'}
+	 *
+	 *
+	 * parent: select closest parent
+	 * child: select first child (or grandchild)
+	 * next: next sibling (or parent if no next sibling exists)
+	 * prev: previous sibling (or parent if no prev sibling exists)
+	 */
+	navKeys?: { parent: string; child: string; next: string; prev: string };
+
+	/**
+	 * define key to open the editor for the currently selected dom node
+	 *
+	 * @default 'Enter'
+	 */
+	openKey?: string;
+
+	/**
+	 * inspector is automatically disabled when releasing toggleKeyCombo after holding it for a longpress
+	 * @default true
+	 */
+	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;
+
+	/**
+	 * internal options that are automatically set, not to be set or used by users
+	 */
+	__internal?: {
+		// vite base url
+		base: string;
+	};
+}

package/src/ui/inspector/plugin.ts

@@ -1,20 +1,10 @@
 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';
 import { idToFile } from './utils';
-
-const defaultInspectorOptions: InspectorOptions = {
-	toggleKeyCombo: process.platform === 'win32' ? 'control-shift' : 'meta-shift',
-	navKeys: { parent: 'ArrowUp', child: 'ArrowDown', next: 'ArrowRight', prev: 'ArrowLeft' },
-	openKey: 'Enter',
-	holdMode: false,
-	showToggleButton: 'active',
-	toggleButtonPos: 'top-right',
-	customStyles: true
-};
+import { defaultInspectorOptions, type InspectorOptions, parseEnvironmentOptions } from './options';
 
 function getInspectorPath() {
 	const pluginPath = normalizePath(path.dirname(fileURLToPath(import.meta.url)));
@@ -25,7 +15,6 @@ 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 {
@@ -35,23 +24,30 @@ export function svelteInspector(): Plugin {
 
 		configResolved(config) {
 			const vps = config.plugins.find((p) => p.name === 'vite-plugin-svelte');
-			const options = vps?.api?.options?.experimental?.inspector;
-			if (!vps || !options) {
-				log.debug('inspector disabled, could not find config');
+			if (!vps) {
+				log.warn('vite-plugin-svelte is missing, inspector disabled', undefined, 'inspector');
 				disabled = true;
 				return;
 			}
-			inspectorOptions = {
-				...defaultInspectorOptions,
-				...options
-			};
-			const isSvelteKit = config.plugins.some((p) => p.name.startsWith('vite-plugin-sveltekit'));
-			if (isSvelteKit && !inspectorOptions.appendTo) {
-				// this could append twice if a user had a file that ends with /generated/root.svelte
-				// but that should be rare and inspector doesn't execute twice
-				inspectorOptions.appendTo = `/generated/root.svelte`;
+			const configFileOptions = vps?.api?.options?.inspector;
+			const environmentOptions = parseEnvironmentOptions(config);
+			if (!configFileOptions && !environmentOptions) {
+				log.debug('no options found, inspector disabled', undefined, 'inspector');
+				disabled = true;
+				return;
+			}
+			if (environmentOptions === true) {
+				inspectorOptions = defaultInspectorOptions;
+			} else {
+				inspectorOptions = {
+					...defaultInspectorOptions,
+					...configFileOptions,
+					...(environmentOptions || {})
+				};
 			}
-			appendTo = inspectorOptions.appendTo;
+			inspectorOptions.__internal = {
+				base: config.base?.replace(/\/$/, '') || ''
+			};
 		},
 
 		async resolveId(importee: string, importer, options) {
@@ -62,7 +58,8 @@ export function svelteInspector(): Plugin {
 				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}`);
+				log.debug.enabled &&
+					log.debug(`resolved ${importee} with ${resolved}`, undefined, 'inspector');
 				return resolved;
 			}
 		},
@@ -79,37 +76,22 @@ export function svelteInspector(): Plugin {
 				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}.`);
+					log.error(
+						`failed to find file for svelte-inspector: ${file}, referenced by id ${id}.`,
+						undefined,
+						'inspector'
+					);
 				}
 			}
 		},
 
-		transform(code: string, id: string, options?: { ssr?: boolean }) {
-			if (options?.ssr || disabled || !appendTo) {
+		transform(code, id, options) {
+			if (options?.ssr || disabled) {
 				return;
 			}
-			if (id.endsWith(appendTo)) {
-				return { code: `${code}\nimport 'virtual:svelte-inspector-path:load-inspector.js'` };
+			if (id.includes('vite/dist/client/client.mjs')) {
+				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/options.ts

@@ -1,5 +1,5 @@
 /* eslint-disable no-unused-vars */
-import { ConfigEnv, ResolvedConfig, UserConfig, ViteDevServer, normalizePath } from 'vite';
+import { ConfigEnv, normalizePath, ResolvedConfig, UserConfig, ViteDevServer } from 'vite';
 import { isDebugNamespaceEnabled, log } from './log';
 import { loadSvelteConfig } from './load-svelte-config';
 import {
@@ -35,6 +35,7 @@ import {
 import { isCommonDepWithoutSvelteField } from './dependencies';
 import { VitePluginSvelteStats } from './vite-plugin-svelte-stats';
 import { VitePluginSvelteCache } from './vite-plugin-svelte-cache';
+import type { InspectorOptions } from '../ui/inspector/options';
 
 const allowedPluginOptions = new Set([
 	'include',
@@ -44,17 +45,13 @@ const allowedPluginOptions = new Set([
 	'ignorePluginPreprocessors',
 	'disableDependencyReinclusion',
 	'prebundleSvelteLibraries',
+	'inspector',
 	'experimental'
 ]);
 
 const knownRootOptions = new Set(['extensions', 'compilerOptions', 'preprocess', 'onwarn']);
 
-const allowedInlineOptions = new Set([
-	'configFile',
-	'kit', // only for internal use by sveltekit
-	...allowedPluginOptions,
-	...knownRootOptions
-]);
+const allowedInlineOptions = new Set(['configFile', ...allowedPluginOptions, ...knownRootOptions]);
 
 export function validateInlineOptions(inlineOptions?: Partial<Options>) {
 	const invalidKeys = Object.keys(inlineOptions || {}).filter(
@@ -203,7 +200,6 @@ export function resolveOptions(
 
 	removeIgnoredOptions(merged);
 	handleDeprecatedOptions(merged);
-	addSvelteKitOptions(merged);
 	addExtraPreprocessors(merged, viteConfig);
 	enforceOptionsForHmr(merged);
 	enforceOptionsForProduction(merged);
@@ -291,24 +287,22 @@ function removeIgnoredOptions(options: ResolvedOptions) {
 	}
 }
 
-// some SvelteKit options need compilerOptions to work, so set them here.
-function addSvelteKitOptions(options: ResolvedOptions) {
-	// @ts-expect-error kit is not typed to avoid dependency on sveltekit
-	if (options?.kit != null && options.compilerOptions.hydratable == null) {
-		log.debug(`Setting compilerOptions.hydratable = true for SvelteKit`);
-		options.compilerOptions.hydratable = true;
-	}
-}
-
 function handleDeprecatedOptions(options: ResolvedOptions) {
-	if ((options.experimental as any)?.prebundleSvelteLibraries) {
-		options.prebundleSvelteLibraries = (options.experimental as any)?.prebundleSvelteLibraries;
-		log.warn(
-			'experimental.prebundleSvelteLibraries is no longer experimental and has moved to prebundleSvelteLibraries'
-		);
-	}
-	if ((options.experimental as any)?.generateMissingPreprocessorSourcemaps) {
-		log.warn('experimental.generateMissingPreprocessorSourcemaps has been removed.');
+	const experimental = options.experimental as any;
+	if (experimental) {
+		for (const promoted of ['prebundleSvelteLibraries', 'inspector']) {
+			if (experimental[promoted]) {
+				//@ts-expect-error untyped assign
+				options[promoted] = experimental[promoted];
+				delete experimental[promoted];
+				log.warn(
+					`Option "vitePlugin.experimental.${promoted}" is no longer experimental and has moved to "vitePlugin.${promoted}". Please update your svelte config.`
+				);
+			}
+		}
+		if (experimental.generateMissingPreprocessorSourcemaps) {
+			log.warn('experimental.generateMissingPreprocessorSourcemaps has been removed.');
+		}
 	}
 }
 
@@ -643,6 +637,13 @@ export interface PluginOptions {
 	 */
 	prebundleSvelteLibraries?: boolean;
 
+	/**
+	 * toggle/configure Svelte Inspector
+	 *
+	 * @default true
+	 */
+	inspector?: InspectorOptions | boolean;
+
 	/**
 	 * These options are considered experimental and breaking changes to them can occur in any release
 	 */
@@ -713,11 +714,6 @@ export interface ExperimentalOptions {
 		compileOptions: Partial<CompileOptions>;
 	}) => Promise<Partial<CompileOptions> | void> | Partial<CompileOptions> | void;
 
-	/**
-	 * enable svelte inspector
-	 */
-	inspector?: InspectorOptions | boolean;
-
 	/**
 	 * send a websocket message with svelte compiler warnings during dev
 	 *
@@ -732,76 +728,6 @@ export interface ExperimentalOptions {
 	disableSvelteResolveWarnings?: 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;
-
-	/**
-	 * define keys to select elements with via keyboard
-	 * @default {parent: 'ArrowUp', child: 'ArrowDown', next: 'ArrowRight', prev: 'ArrowLeft' }
-	 *
-	 * improves accessibility and also helps when you want to select elements that do not have a hoverable surface area
-	 * due to tight wrapping
-	 *
-	 * A note for users of screen-readers:
-	 * If you are using arrow keys to navigate the page itself, change the navKeys to avoid conflicts.
-	 * e.g. navKeys: {parent: 'w', prev: 'a', child: 's', next: 'd'}
-	 *
-	 *
-	 * parent: select closest parent
-	 * child: select first child (or grandchild)
-	 * next: next sibling (or parent if no next sibling exists)
-	 * prev: previous sibling (or parent if no prev sibling exists)
-	 */
-	navKeys?: { parent: string; child: string; next: string; prev: string };
-
-	/**
-	 * define key to open the editor for the currently selected dom node
-	 *
-	 * @default 'Enter'
-	 */
-	openKey?: 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 {
 	// these options are non-nullable after resolve
 	compilerOptions: CompileOptions;