feat: svelte inspector updates and promote from experimental (#631)

* fix(inspector): move inspector host out of body to decrease risk of it getting removed by something overwriting body content

* feat(inspector): promote from experimental to regular, warn users to update config

* feat(inspector): enable inspector by default

* feat(inspector): enable holdMode by default

* fix(inspector): automatically disable on leave after a file has been opened

* fix(inspector): prepend vite base when calling __openInEditor

* feat(inspector): allow configuration via environment

* fix: disable inspector in CI and use eager disable if found via env

* fix: revert previous change, fix testcase and make sure inspector is only enabled for devserver

* fix: don't enable inspector by default

* fix(inspector): return void if no environment option is set

* fix: remove extra check for serve mode, it is already covered by apply: serve

* fix(inspector): remove keyup listener on destroy

Author: dominikg

.changeset/bright-fans-count.md

@@ -0,0 +1,5 @@
+---
+'@sveltejs/vite-plugin-svelte': minor
+---
+
+feat(inspector): Promote experimental.inspector to regular option

.changeset/cold-tips-lay.md

@@ -0,0 +1,5 @@
+---
+'@sveltejs/vite-plugin-svelte': minor
+---
+
+feat(inspector): allow configuration via environment SVELTE_INSPECTOR_OPTIONS or SVELTE_INSPECTOR_TOGGLE

.changeset/funny-suits-grin.md

@@ -0,0 +1,5 @@
+---
+'@sveltejs/vite-plugin-svelte': patch
+---
+
+fix(inspector): prepend vite base when calling \_\_openInEditor

.changeset/green-rats-cry.md

@@ -0,0 +1,5 @@
+---
+'@sveltejs/vite-plugin-svelte': patch
+---
+
+fix(inspector): after a file has been opened, automatically disable inspector on leaving browser

.changeset/orange-lobsters-cross.md

@@ -0,0 +1,5 @@
+---
+'@sveltejs/vite-plugin-svelte': patch
+---
+
+fix(inspector): use control-shift as default keycombo on linux to avoid problems in firefox

.changeset/perfect-nails-rescue.md

@@ -0,0 +1,5 @@
+---
+'@sveltejs/vite-plugin-svelte': minor
+---
+
+feat(inspector): enable holdMode by default

.changeset/weak-crabs-type.md

@@ -0,0 +1,5 @@
+---
+'@sveltejs/vite-plugin-svelte': patch
+---
+
+fix(svelte-inspector): mount outside body to avoid hydration claiming body removing it

docs/config.md

@@ -212,81 +212,16 @@ A [picomatch pattern](https://github.com/micromatch/picomatch), or array of patt
 
   See the [FAQ](./faq.md#what-is-going-on-with-vite-and-pre-bundling-dependencies) for details and how to fine-tune it for huge libraries.
 
-## Experimental options
-
-These options are considered experimental and breaking changes to them can occur in any release! Specify them under the `experimental` option.
-
-Either in Vite config:
-
-```js
-// vite.config.js
-export default defineConfig({
-  plugins: [
-    svelte({
-      experimental: {
-        // experimental options
-      }
-    })
-  ]
-});
-```
-
-or in Svelte config:
-
-```js
-// svelte.config.js
-export default {
-  vitePlugin: {
-    experimental: {
-      // experimental options
-    }
-  }
-};
-```
-
-### dynamicCompileOptions
-
-- **Type:**
-
-  ```ts
-  type DynamicCompileOptions = (data: {
-    filename: string; // The file to be compiled
-    code: string; // The preprocessed Svelte code
-    compileOptions: Partial<CompileOptions>; // The current compiler options
-  }) => Promise<Partial<CompileOptions> | void> | Partial<CompileOptions> | void;
-  ```
-
-  A function to update the `compilerOptions` before compilation. To change part of the compiler options, return an object with the changes you need.
-
-  **Example:**
-
-  ```js
-  // vite.config.js
-  export default defineConfig({
-    plugins: [
-      svelte({
-        experimental: {
-          dynamicCompileOptions({ filename, compileOptions }) {
-            // Dynamically set hydration per Svelte file
-            if (compileWithHydratable(filename) && !compileOptions.hydratable) {
-              return { hydratable: true };
-            }
-          }
-        }
-      })
-    ]
-  });
-  ```
-
 ### inspector
 
 - **Type:**`InspectorOptions | boolean`
+- **Default:** `unset` for dev, always `false` for build
 
   ```ts
   interface InspectorOptions {
     /**
      * define a key combo to toggle inspector,
-     * @default 'control-shift' on windows, 'meta-shift' on other os
+     * @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
@@ -318,7 +253,7 @@ export default {
 
     /**
      * inspector is automatically disabled when releasing toggleKeyCombo after holding it for a longpress
-     * @default false
+     * @default true
      */
     holdMode?: boolean;
 
@@ -341,9 +276,94 @@ export default {
   }
   ```
 
-  Set to `true` or customized `InspectorOptions` to enable svelte inspector during development.
+  Set to `true` or options object to enable svelte inspector during development.
+
+  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.
+
+  **Example:**
+
+  ```js
+  // vite.config.js
+  export default defineConfig({
+    plugins: [
+      svelte({
+        inspector: {
+          toggleKeyCombo: 'meta-shift',
+          holdMode: true,
+          showToggleButton: 'always',
+          toggleButtonPos: 'bottom-right'
+        }
+      })
+    ]
+  });
+  ```
+
+#### Customizing Inspector options via environment
+
+Svelte Inspector toggle keys and other options are personal preferences. As such it isn't always convenient to define them in a shared svelte config file.
+To allow you to use your own setup, svelte inspector can be configured via environment variables, both from shell and dotenv files.
+
+```shell
+# just keycombo, unquoted string
+SVELTE_INSPECTOR_TOGGLE=control-shift
+
+# options object as json, all options except appendTo are supported
+SVELTE_INSPECTOR_OPTIONS='{"holdMode": false, "toggleButtonPos": "bottom-left"}'
+
+# disable completely
+SVELTE_INSPECTOR_OPTIONS=false
+
+# force default options
+SVELTE_INSPECTOR_OPTIONS=true
+```
 
-  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.
+> Inspector options set on the environment take precedence over values set in svelte config and automatically enable svelte inspector during dev.
+
+## Experimental options
+
+These options are considered experimental and breaking changes to them can occur in any release! Specify them under the `experimental` option.
+
+Either in Vite config:
+
+```js
+// vite.config.js
+export default defineConfig({
+  plugins: [
+    svelte({
+      experimental: {
+        // experimental options
+      }
+    })
+  ]
+});
+```
+
+or in Svelte config:
+
+```js
+// svelte.config.js
+export default {
+  vitePlugin: {
+    experimental: {
+      // experimental options
+    }
+  }
+};
+```
+
+### dynamicCompileOptions
+
+- **Type:**
+
+  ```ts
+  type DynamicCompileOptions = (data: {
+    filename: string; // The file to be compiled
+    code: string; // The preprocessed Svelte code
+    compileOptions: Partial<CompileOptions>; // The current compiler options
+  }) => Promise<Partial<CompileOptions> | void> | Partial<CompileOptions> | void;
+  ```
+
+  A function to update the `compilerOptions` before compilation. To change part of the compiler options, return an object with the changes you need.
 
   **Example:**
 
@@ -353,11 +373,11 @@ export default {
     plugins: [
       svelte({
         experimental: {
-          inspector: {
-            toggleKeyCombo: 'meta-shift',
-            holdMode: true,
-            showToggleButton: 'always',
-            toggleButtonPos: 'bottom-right'
+          dynamicCompileOptions({ filename, compileOptions }) {
+            // Dynamically set hydration per Svelte file
+            if (compileWithHydratable(filename) && !compileOptions.hydratable) {
+              return { hydratable: true };
+            }
           }
         }
       })

packages/e2e-tests/css-dev-sourcemap/__tests__/css-dev-sourcemap.spec.ts

@@ -16,7 +16,7 @@ test('should apply css compiled from scss', async () => {
 
 if (!isBuild) {
 	test('should generate sourcemap', async () => {
-		const style = await getText('style');
+		const style = await getText('style[data-vite-dev-id*="App.svelte"]');
 		const lines = style.split(`\n`).map((l) => l.trim());
 		const css = lines[0];
 		const mapComment = lines[1];

packages/vite-plugin-svelte/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';