diff --git a/.changeset/witty-games-shout.md b/.changeset/witty-games-shout.md new file mode 100644 index 000000000..4ee64e44a --- /dev/null +++ b/.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`). diff --git a/docs/inspector.md b/docs/inspector.md index 1c9b7d318..a3251e541 100644 --- a/docs/inspector.md +++ b/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` diff --git a/packages/playground/kit-demo-app/svelte.config.js b/packages/playground/kit-demo-app/svelte.config.js index a53158667..d4a2ce79e 100644 --- a/packages/playground/kit-demo-app/svelte.config.js +++ b/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; diff --git a/packages/vite-plugin-svelte-inspector/src/options.js b/packages/vite-plugin-svelte-inspector/src/options.js index d53561520..a4537b995 100644 --- a/packages/vite-plugin-svelte-inspector/src/options.js +++ b/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', diff --git a/packages/vite-plugin-svelte-inspector/src/public.d.ts b/packages/vite-plugin-svelte-inspector/src/public.d.ts index 538d7cb42..7932bb75d 100644 --- a/packages/vite-plugin-svelte-inspector/src/public.d.ts +++ b/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 diff --git a/packages/vite-plugin-svelte-inspector/src/runtime/Inspector.svelte b/packages/vite-plugin-svelte-inspector/src/runtime/Inspector.svelte index 1df2f401d..7bcf719fa 100644 --- a/packages/vite-plugin-svelte-inspector/src/runtime/Inspector.svelte +++ b/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(); } } diff --git a/packages/vite-plugin-svelte-inspector/types/index.d.ts b/packages/vite-plugin-svelte-inspector/types/index.d.ts index fbba16c60..cb804b807 100644 --- a/packages/vite-plugin-svelte-inspector/types/index.d.ts +++ b/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 diff --git a/packages/vite-plugin-svelte-inspector/types/index.d.ts.map b/packages/vite-plugin-svelte-inspector/types/index.d.ts.map index 15d752e59..08ac04586 100644 --- a/packages/vite-plugin-svelte-inspector/types/index.d.ts.map +++ b/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" } \ No newline at end of file