@sveltejs/vite-plugin-svelte 2.1.1 → 2.3.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sveltejs/vite-plugin-svelte",
-  "version": "2.1.1",
+  "version": "2.3.0",
   "license": "MIT",
   "author": "dominikg",
   "files": [
@@ -15,8 +15,7 @@
       "types": "./dist/index.d.ts",
       "import": "./dist/index.js"
     },
-    "./package.json": "./package.json",
-    "./src/ui/*": "./src/ui/*"
+    "./package.json": "./package.json"
   },
   "engines": {
     "node": "^14.18.0 || >= 16"
@@ -42,7 +41,8 @@
     "kleur": "^4.1.5",
     "magic-string": "^0.30.0",
     "svelte-hmr": "^0.15.1",
-    "vitefu": "^0.2.4"
+    "vitefu": "^0.2.4",
+    "@sveltejs/vite-plugin-svelte-inspector": "^1.0.1"
   },
   "peerDependencies": {
     "svelte": "^3.54.0",
@@ -50,11 +50,11 @@
   },
   "devDependencies": {
     "@types/debug": "^4.1.7",
-    "esbuild": "^0.17.17",
-    "rollup": "^2.79.1",
-    "svelte": "^3.58.0",
+    "esbuild": "^0.17.18",
+    "rollup": "^3.21.6",
+    "svelte": "^3.59.1",
     "tsup": "^6.7.0",
-    "vite": "^4.3.1"
+    "vite": "^4.3.5"
   },
   "scripts": {
     "dev": "pnpm build:ci --sourcemap --watch src",

package/src/index.ts

@@ -9,6 +9,8 @@ import {
 	version as viteVersion
 } from 'vite';
 // eslint-disable-next-line node/no-missing-import
+import { svelteInspector } from '@sveltejs/vite-plugin-svelte-inspector';
+// eslint-disable-next-line node/no-missing-import
 import { isDepExcluded } from 'vitefu';
 import { handleHotUpdate } from './handle-hot-update';
 import { log, logCompilerWarnings } from './utils/log';
@@ -29,7 +31,6 @@ import { resolveViaPackageJsonSvelte } from './utils/resolve';
 import { PartialResolvedId } from 'rollup';
 import { toRollupError } from './utils/error';
 import { saveSvelteMetadata } from './utils/optimizer';
-import { svelteInspector } from './ui/inspector/plugin';
 import { VitePluginSvelteCache } from './utils/vite-plugin-svelte-cache';
 import { loadRaw } from './utils/load-raw';
 import { FAQ_LINK_CONFLICTS_IN_SVELTE_RESOLVE } from './utils/constants';
@@ -235,10 +236,16 @@ export function svelte(inlineOptions?: Partial<Options>): Plugin[] {
 				}
 				logCompilerWarnings(svelteRequest, compileData.compiled.warnings, options);
 				cache.update(compileData);
-				if (compileData.dependencies?.length && options.server) {
-					compileData.dependencies.forEach((d) => {
-						ensureWatchedFile(options.server!.watcher, d, options.root);
-					});
+				if (compileData.dependencies?.length) {
+					if (options.server) {
+						for (const dep of compileData.dependencies) {
+							ensureWatchedFile(options.server.watcher, dep, options.root);
+						}
+					} else if (options.isBuild && viteConfig.build.watch) {
+						for (const dep of compileData.dependencies) {
+							this.addWatchFile(dep);
+						}
+					}
 				}
 				log.debug(`transform returns compiled js for ${svelteRequest.filename}`);
 				return {
@@ -273,10 +280,10 @@ export function svelte(inlineOptions?: Partial<Options>): Plugin[] {
 					);
 				}
 			}
-		}
+		},
+		svelteInspector()
 	];
-	plugins.push(svelteInspector());
-	return plugins.filter(Boolean);
+	return plugins;
 }
 
 export { vitePreprocess } from './preprocess';

package/src/utils/compile.ts

@@ -157,8 +157,6 @@ const _createCompileSvelte = (makeHot: Function) => {
 			}
 		}
 
-		compiled.js.dependencies = dependencies;
-
 		return {
 			filename,
 			normalizedFilename,
@@ -195,7 +193,6 @@ export function createCompileSvelte(options: ResolvedOptions) {
 export interface Code {
 	code: string;
 	map?: any;
-	dependencies?: any[];
 }
 
 export interface Compiled {

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 {
@@ -18,6 +18,8 @@ import type {
 	Processed
 	// eslint-disable-next-line node/no-missing-import
 } from 'svelte/types/compiler/preprocess';
+// eslint-disable-next-line node/no-missing-import
+import type { Options as InspectorOptions } from '@sveltejs/vite-plugin-svelte-inspector';
 
 import path from 'path';
 import { esbuildSveltePlugin, facadeEsbuildSveltePluginName } from './esbuild';
@@ -44,17 +46,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 +201,6 @@ export function resolveOptions(
 
 	removeIgnoredOptions(merged);
 	handleDeprecatedOptions(merged);
-	addSvelteKitOptions(merged);
 	addExtraPreprocessors(merged, viteConfig);
 	enforceOptionsForHmr(merged);
 	enforceOptionsForProduction(merged);
@@ -291,24 +288,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 +638,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 +715,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 +729,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;

package/src/ui/inspector/Inspector.svelte

@@ -1,365 +0,0 @@
-<script>
-	// do not use TS here so that this component works in non-ts projects too
-	import { onMount } from 'svelte';
-	// eslint-disable-next-line node/no-missing-import
-	import options from 'virtual:svelte-inspector-options';
-	const toggle_combo = options.toggleKeyCombo?.toLowerCase().split('-');
-	const nav_keys = Object.values(options.navKeys).map((k) => k.toLowerCase());
-	let enabled = false;
-
-	const icon = `data:image/svg+xml;base64,${btoa(
-		`
-<svg xmlns="http://www.w3.org/2000/svg" width="21" height="25" viewBox="0 0 107 128">
-  <title>svelte-inspector-logo</title>
-  <path d="M94.1566,22.8189c-10.4-14.8851-30.94-19.2971-45.7914-9.8348L22.2825,29.6078A29.9234,29.9234,0,0,0,8.7639,49.6506a31.5136,31.5136,0,0,0,3.1076,20.2318A30.0061,30.0061,0,0,0,7.3953,81.0653a31.8886,31.8886,0,0,0,5.4473,24.1157c10.4022,14.8865,30.9423,19.2966,45.7914,9.8348L84.7167,98.3921A29.9177,29.9177,0,0,0,98.2353,78.3493,31.5263,31.5263,0,0,0,95.13,58.117a30,30,0,0,0,4.4743-11.1824,31.88,31.88,0,0,0-5.4473-24.1157" style="fill:#ff3e00"/><path d="M45.8171,106.5815A20.7182,20.7182,0,0,1,23.58,98.3389a19.1739,19.1739,0,0,1-3.2766-14.5025,18.1886,18.1886,0,0,1,.6233-2.4357l.4912-1.4978,1.3363.9815a33.6443,33.6443,0,0,0,10.203,5.0978l.9694.2941-.0893.9675a5.8474,5.8474,0,0,0,1.052,3.8781,6.2389,6.2389,0,0,0,6.6952,2.485,5.7449,5.7449,0,0,0,1.6021-.7041L69.27,76.281a5.4306,5.4306,0,0,0,2.4506-3.631,5.7948,5.7948,0,0,0-.9875-4.3712,6.2436,6.2436,0,0,0-6.6978-2.4864,5.7427,5.7427,0,0,0-1.6.7036l-9.9532,6.3449a19.0329,19.0329,0,0,1-5.2965,2.3259,20.7181,20.7181,0,0,1-22.2368-8.2427,19.1725,19.1725,0,0,1-3.2766-14.5024,17.9885,17.9885,0,0,1,8.13-12.0513L55.8833,23.7472a19.0038,19.0038,0,0,1,5.3-2.3287A20.7182,20.7182,0,0,1,83.42,29.6611a19.1739,19.1739,0,0,1,3.2766,14.5025,18.4,18.4,0,0,1-.6233,2.4357l-.4912,1.4978-1.3356-.98a33.6175,33.6175,0,0,0-10.2037-5.1l-.9694-.2942.0893-.9675a5.8588,5.8588,0,0,0-1.052-3.878,6.2389,6.2389,0,0,0-6.6952-2.485,5.7449,5.7449,0,0,0-1.6021.7041L37.73,51.719a5.4218,5.4218,0,0,0-2.4487,3.63,5.7862,5.7862,0,0,0,.9856,4.3717,6.2437,6.2437,0,0,0,6.6978,2.4864,5.7652,5.7652,0,0,0,1.602-.7041l9.9519-6.3425a18.978,18.978,0,0,1,5.2959-2.3278,20.7181,20.7181,0,0,1,22.2368,8.2427,19.1725,19.1725,0,0,1,3.2766,14.5024,17.9977,17.9977,0,0,1-8.13,12.0532L51.1167,104.2528a19.0038,19.0038,0,0,1-5.3,2.3287" style="fill:#fff"/>
-  <polygon points="0,0 15,40 40,20" stroke="#ff3e00" fill="#ff3e00"></polygon>
-</svg>
-`
-			.replace(/[\n\r\t\s]+/g, ' ')
-			.trim()
-	)}`;
-
-	// location of code in file
-	let file_loc;
-	// cursor pos and width for file_loc overlay positioning
-	let x, y, w;
-
-	let active_el;
-
-	let enabled_ts;
-
-	$: show_toggle =
-		options.showToggleButton === 'always' || (options.showToggleButton === 'active' && enabled);
-
-	function mousemove(event) {
-		x = event.x;
-		y = event.y;
-	}
-
-	function find_selectable_parent(el, include_self = false) {
-		if (!include_self) {
-			el = el.parentNode;
-		}
-		while (el) {
-			if (is_selectable(el)) {
-				return el;
-			}
-			el = el.parentNode;
-		}
-	}
-
-	function find_selectable_child(el) {
-		return [...el.querySelectorAll('*')].find(is_selectable);
-	}
-
-	function find_selectable_sibling(el, prev = false) {
-		do {
-			el = prev ? el.previousElementSibling : el.nextElementSibling;
-			if (is_selectable(el)) {
-				return el;
-			}
-		} while (el);
-	}
-
-	function find_selectable_for_nav(key) {
-		const el = active_el;
-		if (!el) {
-			return find_selectable_child(document?.body);
-		}
-		switch (key) {
-			case options.navKeys.parent:
-				return find_selectable_parent(el);
-			case options.navKeys.child:
-				return find_selectable_child(el);
-			case options.navKeys.next:
-				return find_selectable_sibling(el) || find_selectable_parent(el);
-			case options.navKeys.prev:
-				return find_selectable_sibling(el, true) || find_selectable_parent(el);
-			default:
-				return;
-		}
-	}
-
-	function is_selectable(el) {
-		const file = el?.__svelte_meta?.loc?.file;
-		if (!file || file.includes('node_modules/')) {
-			return false; // no file or 3rd party
-		}
-		const id = el.getAttribute('id');
-		if (id === 'svelte-announcer' || id?.startsWith('svelte-inspector-')) {
-			return false; // ignore some elements by id that would be selectable from keyboard nav otherwise
-		}
-		return true;
-	}
-
-	function mouseover({ target }) {
-		const el = find_selectable_parent(target, true);
-		activate(el, false);
-	}
-
-	function activate(el, set_bubble_pos = true) {
-		if (options.customStyles && el !== active_el) {
-			if (active_el) {
-				active_el.classList.remove('svelte-inspector-active-target');
-			}
-			if (el) {
-				el.classList.add('svelte-inspector-active-target');
-			}
-		}
-		if (el) {
-			const { file, line, column } = el.__svelte_meta.loc;
-			file_loc = `${file}:${line + 1}:${column + 1}`;
-		} else {
-			file_loc = null;
-		}
-		active_el = el;
-		if (set_bubble_pos) {
-			const pos = el.getBoundingClientRect();
-			x = Math.ceil(pos.left);
-			y = Math.ceil(pos.bottom - 20);
-		}
-	}
-
-	function open_editor(event) {
-		if (file_loc) {
-			stop(event);
-			fetch(`/__open-in-editor?file=${encodeURIComponent(file_loc)}`);
-			if (options.holdMode && is_holding()) {
-				disable();
-			}
-		}
-	}
-
-	function is_key_active(key, event) {
-		switch (key) {
-			case 'shift':
-			case 'control':
-			case 'alt':
-			case 'meta':
-				return event.getModifierState(key.charAt(0).toUpperCase() + key.slice(1));
-			default:
-				return key === event.key.toLowerCase();
-		}
-	}
-
-	function is_combo(event) {
-		return toggle_combo?.every((key) => is_key_active(key, event));
-	}
-
-	function is_nav(event) {
-		return nav_keys?.some((key) => is_key_active(key, event));
-	}
-
-	function is_open(event) {
-		return options.openKey && options.openKey.toLowerCase() === event.key.toLowerCase();
-	}
-
-	function is_holding() {
-		return enabled_ts && Date.now() - enabled_ts > 250;
-	}
-
-	function stop(event) {
-		event.preventDefault();
-		event.stopPropagation();
-		event.stopImmediatePropagation();
-	}
-
-	function keydown(event) {
-		if (event.repeat || event.key == null) {
-			return;
-		}
-
-		if (is_combo(event)) {
-			toggle();
-			if (options.holdMode && enabled) {
-				enabled_ts = Date.now();
-			}
-		} else if (enabled) {
-			if (is_nav(event)) {
-				const el = find_selectable_for_nav(event.key);
-				if (el) {
-					activate(el);
-					stop(event);
-				}
-			} else if (is_open(event)) {
-				open_editor(event);
-			}
-		}
-	}
-
-	function keyup(event) {
-		if (event.repeat || event.key == null) {
-			return;
-		}
-		const k = event.key.toLowerCase();
-		if (enabled && is_holding() && toggle_combo.includes(k)) {
-			disable();
-		} else {
-			enabled_ts = null;
-		}
-	}
-
-	function toggle() {
-		enabled ? disable() : enable();
-	}
-
-	function listeners(body, enabled) {
-		const l = enabled ? body.addEventListener : body.removeEventListener;
-		l('mousemove', mousemove);
-		l('mouseover', mouseover);
-		l('click', open_editor, true);
-	}
-
-	function enable() {
-		enabled = true;
-		const b = document.body;
-		if (options.customStyles) {
-			b.classList.add('svelte-inspector-enabled');
-		}
-		listeners(b, enabled);
-		activate_initial_el();
-	}
-
-	function activate_initial_el() {
-		const hov = innermost_hover_el();
-		let el = find_selectable_parent(hov, true);
-		if (!el) {
-			const act = document.activeElement;
-			el = find_selectable_parent(act, true);
-		}
-		if (!el) {
-			el = find_selectable_child(document.body);
-		}
-		if (el) {
-			activate(el);
-		}
-	}
-
-	function innermost_hover_el() {
-		let e = document.body.querySelector(':hover');
-		let result;
-		while (e) {
-			result = e;
-			e = e.querySelector(':hover');
-		}
-		return result;
-	}
-
-	function disable() {
-		enabled = false;
-		enabled_ts = null;
-		const b = document.body;
-		listeners(b, enabled);
-		if (options.customStyles) {
-			b.classList.remove('svelte-inspector-enabled');
-			active_el?.classList.remove('svelte-inspector-active-target');
-		}
-		active_el = null;
-	}
-
-	onMount(() => {
-		const s = document.createElement('style');
-		s.setAttribute('type', 'text/css');
-		s.setAttribute('id', 'svelte-inspector-style');
-		s.textContent = `:root { --svelte-inspector-icon: url(${icon})};`;
-		document.head.append(s);
-		if (toggle_combo) {
-			document.body.addEventListener('keydown', keydown);
-			if (options.holdMode) {
-				document.body.addEventListener('keyup', keyup);
-			}
-		}
-		return () => {
-			// make sure we get rid of everything
-			disable();
-			const s = document.head.querySelector('#svelte-inspector-style');
-			if (s) {
-				document.head.removeChild(s);
-			}
-			if (toggle_combo) {
-				document.body.removeEventListener('keydown', keydown);
-				if (options.holdMode) {
-					document.body.addEventListener('keyup', keyup);
-				}
-			}
-		};
-	});
-</script>
-
-{#if show_toggle}
-	<button
-		id="svelte-inspector-toggle"
-		class:enabled
-		style={`background-image: var(--svelte-inspector-icon);${options.toggleButtonPos
-			.split('-')
-			.map((p) => `${p}: 8px;`)
-			.join('')}`}
-		on:click={() => toggle()}
-		aria-label={`${enabled ? 'disable' : 'enable'} svelte-inspector`}
-	/>
-{/if}
-{#if enabled && active_el && file_loc}
-	{@const loc = active_el.__svelte_meta.loc}
-	<div
-		id="svelte-inspector-overlay"
-		style:left="{Math.min(x + 3, document.documentElement.clientWidth - w - 10)}px"
-		style:top="{document.documentElement.clientHeight < y + 50 ? y - 30 : y + 30}px"
-		bind:offsetWidth={w}
-	>
-		&lt;{active_el.tagName.toLowerCase()}&gt;&nbsp;{file_loc}
-	</div>
-	<div id="svelte-inspector-announcer" aria-live="assertive" aria-atomic="true">
-		{active_el.tagName.toLowerCase()} in file {loc.file} on line {loc.line} column {loc.column}
-	</div>
-{/if}
-
-<style>
-	:global(body.svelte-inspector-enabled *) {
-		cursor: var(--svelte-inspector-icon), crosshair !important;
-	}
-	:global(.svelte-inspector-active-target) {
-		outline: 2px dashed #ff3e00 !important;
-	}
-
-	#svelte-inspector-overlay {
-		position: fixed;
-		background-color: rgba(0, 0, 0, 0.8);
-		color: #fff;
-		padding: 2px 4px;
-		border-radius: 5px;
-		z-index: 999999;
-		pointer-events: none;
-	}
-
-	#svelte-inspector-toggle {
-		all: unset;
-		border: 1px solid #ff3e00;
-		border-radius: 8px;
-		position: fixed;
-		height: 32px;
-		width: 32px;
-		background-color: white;
-		background-position: center;
-		background-repeat: no-repeat;
-		cursor: pointer;
-	}
-
-	#svelte-inspector-announcer {
-		position: absolute;
-		left: 0px;
-		top: 0px;
-		clip: rect(0px, 0px, 0px, 0px);
-		clip-path: inset(50%);
-		overflow: hidden;
-		white-space: nowrap;
-		width: 1px;
-		height: 1px;
-	}
-
-	#svelte-inspector-toggle:not(.enabled) {
-		filter: grayscale(1);
-	}
-	#svelte-inspector-toggle:hover {
-		background-color: #facece;
-	}
-</style>

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

@@ -1,15 +0,0 @@
-// eslint-disable-next-line node/no-missing-import
-import Inspector from 'virtual:svelte-inspector-path:Inspector.svelte';
-
-function create_inspector_host() {
-	const id = 'svelte-inspector-host';
-	if (document.getElementById(id) != null) {
-		throw new Error('svelte-inspector-host element already exists');
-	}
-	const el = document.createElement('div');
-	el.setAttribute('id', id);
-	document.getElementsByTagName('body')[0].appendChild(el);
-	return el;
-}
-
-new Inspector({ target: create_inspector_host() });