Feat: open file inspector (#322)

* feat: add dev mode inspector to open editor at location that defines dom element

* wip: add options to inspector, improve inspector ux

* wip: deep config merge, more inspector options, automatic sveltekit support

* wip: add custom cursor, update toggle, cleanup Inspector, add docs

* chore: add changeset and revert target change

* docs: add trigger description to docs

* chore: restore docs headline

* fix: account for experimental possibly being undefined due to new merging; update browser select for testing

* fix: remove hold, skip over node_modules locations, cleanup, docs

* feat: generic combo handling, hold disabled by default, pos and visibility options for toggle, docs

* fix: restore array overwrite behavior in config merge change to avoid a breaking change

* fix: use os dependant default combo to minimize clashes with native behavior

Author: dominikg

.changeset/green-buttons-wait.md

@@ -0,0 +1,5 @@
+---
+'@sveltejs/vite-plugin-svelte': patch
+---
+
+use deepmerge utility to merge inline config and svelte.config.js

.changeset/sweet-birds-repair.md

@@ -0,0 +1,5 @@
+---
+'@sveltejs/vite-plugin-svelte': minor
+---
+
+Add experimental Svelte Inspector to quickly jump to code from your browser.

docs/config.md

@@ -258,3 +258,58 @@ export default defineConfig({
     ]
   });
   ```
+
+### inspector
+
+- **Type:**`InspectorOptions | boolean`
+
+  ```ts
+  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;
+  }
+  ```
+
+  Set to `true` or customized `InspectorOptions` to enable svelte inspector during development.
+
+  When enabled, inspector mode shows you the file location where the element under cursor is defined and you can click to quickly open your code editor at this location.

packages/e2e-tests/kit-node/jsconfig.json

@@ -1,10 +1,4 @@
 {
-	"compilerOptions": {
-		"baseUrl": ".",
-		"paths": {
-			"$app/*": [".svelte/dev/runtime/app/*", ".svelte/build/runtime/app/*"],
-			"$lib/*": ["src/lib/*"]
-		}
-	},
+	"extends": "./.svelte-kit/tsconfig.json",
 	"include": ["src/**/*.d.ts", "src/**/*.js", "src/**/*.svelte"]
 }

packages/playground/kit-demo-app/svelte.config.js

@@ -12,6 +12,9 @@ const config = {
 		vite: {
 			css: { devSourcemap: true }
 		}
+	},
+	experimental: {
+		inspector: true
 	}
 };
 

packages/vite-plugin-svelte/package.json

@@ -19,7 +19,8 @@
       "import": "./dist/index.js",
       "require": "./dist/index.cjs"
     },
-    "./package.json": "./package.json"
+    "./package.json": "./package.json",
+    "./src/ui/*": "./src/ui/*"
   },
   "scripts": {
     "dev": "pnpm run build:ci -- --sourcemap --watch src",
@@ -47,6 +48,7 @@
   "dependencies": {
     "@rollup/pluginutils": "^4.2.1",
     "debug": "^4.3.4",
+    "deepmerge": "^4.2.2",
     "kleur": "^4.1.4",
     "magic-string": "^0.26.1",
     "svelte-hmr": "^0.14.11"