Escape keys (#880)

* Implements `escapeKeys` to close the inspector

* `inspector` is no longer experimental

* Changelog entry for `escapeKeys` enhancement

* Generate types for `escapeKeys`

Author: ryangclark

.changeset/witty-games-shout.md

@@ -0,0 +1,5 @@
+---
+'@sveltejs/vite-plugin-svelte-inspector': minor
+---
+
+Implements `escapeKeys` to close the inspector via hotkey (default keys are `Backspace` and `Escape`).

docs/inspector.md

@@ -75,6 +75,13 @@ SVELTE_INSPECTOR_OPTIONS=true
 
   Define key to open the editor for the currently selected dom node.
 
+### escapeKeys
+
+- **Type:** `string[]`
+- **Default:** `['Backspace', 'Escape']`
+
+  Define keys to close the inspector.
+
 ### holdMode
 
 - **Type:** `boolean`

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

@@ -6,10 +6,7 @@ const config = {
 		adapter: adapter()
 	},
 	vitePlugin: {
-		experimental: {
-			inspector: true
-		}
+		inspector: true
 	}
 };
-
 export default config;

packages/vite-plugin-svelte-inspector/src/options.js

@@ -5,6 +5,7 @@ import { debug } from './debug.js';
 export const defaultInspectorOptions = {
 	toggleKeyCombo: process.platform === 'darwin' ? 'meta-shift' : 'control-shift',
 	navKeys: { parent: 'ArrowUp', child: 'ArrowDown', next: 'ArrowRight', prev: 'ArrowLeft' },
+	escapeKeys: ['Backspace', 'Escape'],
 	openKey: 'Enter',
 	holdMode: true,
 	showToggleButton: 'active',

packages/vite-plugin-svelte-inspector/src/public.d.ts

@@ -36,6 +36,12 @@ export interface Options {
 	 */
 	openKey?: string;
 
+	/**
+	 * define keys to close the inspector
+	 * @default ['Backspace', 'Escape']
+	 */
+	escapeKeys?: string[];
+
 	/**
 	 * inspector is automatically disabled when releasing toggleKeyCombo after holding it for a longpress
 	 * @default true

packages/vite-plugin-svelte-inspector/src/runtime/Inspector.svelte

@@ -4,6 +4,7 @@
 
 	import options from 'virtual:svelte-inspector-options';
 	const toggle_combo = options.toggleKeyCombo?.toLowerCase().split('-');
+	const escape_keys = options.escapeKeys?.map((key) => key?.toLowerCase());
 	const nav_keys = Object.values(options.navKeys).map((k) => k.toLowerCase());
 	let enabled = false;
 	let has_opened = false;
@@ -148,6 +149,10 @@
 		return is_toggle(event) && toggle_combo?.every((key) => is_key_active(key, event));
 	}
 
+	function is_escape(event) {
+		return escape_keys?.includes(event.key.toLowerCase());
+	}
+
 	function is_toggle(event) {
 		return toggle_combo?.includes(event.key.toLowerCase());
 	}
@@ -188,8 +193,11 @@
 				}
 			} else if (is_open(event)) {
 				open_editor(event);
-			} else if (is_holding()) {
-				// unhandled additional key pressed while holding, possibly another shortcut, disable again
+			} else if (is_holding() || is_escape(event)) {
+				// is_holding() checks for unhandled additional key pressed
+				// while holding the toggle keys, which is possibly another
+				// shortcut (e.g. 'meta-shift-x'), so disable again.
+
 				disable();
 			}
 		}

packages/vite-plugin-svelte-inspector/types/index.d.ts

@@ -37,6 +37,12 @@ declare module '@sveltejs/vite-plugin-svelte-inspector' {
 		 */
 		openKey?: string;
 
+		/**
+		 * define keys to close the inspector
+		 * @default ['Backspace', 'Escape']
+		 */
+		escapeKeys?: string[];
+
 		/**
 		 * inspector is automatically disabled when releasing toggleKeyCombo after holding it for a longpress
 		 * @default true

packages/vite-plugin-svelte-inspector/types/index.d.ts.map

@@ -13,5 +13,5 @@
 		null,
 		null
 	],
-	"mappings": ";kBAAiBA,OAAOA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;iBCoBRC,eAAeA"
+	"mappings": ";kBAAiBA,OAAOA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;iBCoBRC,eAAeA"
 }