diff --git a/.changeset/tall-monkeys-shout.md b/.changeset/tall-monkeys-shout.md new file mode 100644 index 000000000..961335533 --- /dev/null +++ b/.changeset/tall-monkeys-shout.md @@ -0,0 +1,5 @@ +--- +'@sveltejs/vite-plugin-svelte-inspector': major +--- + +Change default key-combo to `alt-x` to avoid conflicts with other combos that started with the previous defaults. diff --git a/docs/inspector.md b/docs/inspector.md index 3bb8c8a7d..f62552eb5 100644 --- a/docs/inspector.md +++ b/docs/inspector.md @@ -24,7 +24,7 @@ export default { export default { vitePlugin: { inspector: { - toggleKeyCombo: 'meta-shift', + toggleKeyCombo: 'alt-x', showToggleButton: 'always', toggleButtonPos: 'bottom-right' } @@ -39,7 +39,7 @@ To allow you to use your own setup, svelte inspector can be configured via envir ```shell # just keycombo, unquoted string -SVELTE_INSPECTOR_TOGGLE=control-shift +SVELTE_INSPECTOR_TOGGLE=alt-x # options object as json SVELTE_INSPECTOR_OPTIONS='{"holdMode": false, "toggleButtonPos": "bottom-left"}' @@ -58,13 +58,13 @@ SVELTE_INSPECTOR_OPTIONS=true ### toggleKeyCombo - **Type:** `string` -- **Default:** `'meta-shift'` on mac, `'control-shift'` on other os +- **Default:** `'alt-x'` Define a key combo to toggle inspector. - The value is recommended to be any number of modifiers (e.g. `control`, `shift`, `alt`, `meta`) followed by zero or one regular key, separated by `-`. This helps avoid conflicts or accidentally typing into inputs. Note that some keys have native behavior (e.g. `alt-s` opens history menu on firefox). + The value is recommended to be any number of modifiers (e.g. `control`, `shift`, `alt`, `meta`) followed by zero or one regular key, separated by `-`. Note that some keys have native behavior (e.g. `alt-s` opens history menu on firefox). - Examples: `control-shift`, `control-o`, `control-alt-s`, `meta-x`, `control-meta`. + Examples: `control-o`, `control-alt-s`, `meta-x`, `alt-i`. ### navKeys diff --git a/packages/vite-plugin-svelte-inspector/src/options.js b/packages/vite-plugin-svelte-inspector/src/options.js index 8a4daf24f..15a24564e 100644 --- a/packages/vite-plugin-svelte-inspector/src/options.js +++ b/packages/vite-plugin-svelte-inspector/src/options.js @@ -4,7 +4,7 @@ import { debug } from './debug.js'; /** @type {import('./public.d.ts').Options} */ export const defaultInspectorOptions = { - toggleKeyCombo: process.platform === 'darwin' ? 'meta-shift' : 'control-shift', + toggleKeyCombo: 'alt-x', navKeys: { parent: 'ArrowUp', child: 'ArrowDown', next: 'ArrowRight', prev: 'ArrowLeft' }, escapeKeys: ['Backspace', 'Escape'], openKey: 'Enter', diff --git a/packages/vite-plugin-svelte-inspector/src/runtime/Inspector.svelte b/packages/vite-plugin-svelte-inspector/src/runtime/Inspector.svelte index 14dd8e593..2d0740f56 100644 --- a/packages/vite-plugin-svelte-inspector/src/runtime/Inspector.svelte +++ b/packages/vite-plugin-svelte-inspector/src/runtime/Inspector.svelte @@ -4,8 +4,10 @@ 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()); + const escape_keys = options.escapeKeys?.map((k) => k.toLowerCase()); + const nav_keys = Object.values(options.navKeys).map((k) => k?.toLowerCase()); + const open_key = options.openKey?.toLowerCase(); + let enabled = false; let has_opened = false; @@ -34,9 +36,9 @@ // eslint-disable-next-line svelte/valid-compile options.showToggleButton === 'always' || (options.showToggleButton === 'active' && enabled); - function mousemove(event) { - x = event.x; - y = event.y; + function mousemove(e) { + x = e.x; + y = e.y; } function find_selectable_parent(el, include_self = false) { @@ -123,9 +125,9 @@ } } - function open_editor(event) { + function open_editor(e) { if (file_loc) { - stop(event); + stop(e); fetch(`${options.__internal.base}/__open-in-editor?file=${encodeURIComponent(file_loc)}`); has_opened = true; if (options.holdMode && is_holding()) { @@ -134,67 +136,67 @@ } } - function is_key_active(key, event) { + function is_active(key, e) { switch (key) { case 'shift': case 'control': case 'alt': case 'meta': - return event.getModifierState(key.charAt(0).toUpperCase() + key.slice(1)); + return e.getModifierState(key.charAt(0).toUpperCase() + key.slice(1)); default: - return key === event.key.toLowerCase(); + return key === e.code.replace(/^Key/, '').toLowerCase() || key === e.key.toLowerCase(); } } - function is_combo(event) { - return is_toggle(event) && toggle_combo?.every((key) => is_key_active(key, event)); + function is_combo(e) { + return toggle_combo?.every((k) => is_active(k, e)); } - function is_escape(event) { - return escape_keys?.includes(event.key.toLowerCase()); + function is_escape(e) { + return escape_keys?.some((k) => is_active(k, e)); } - function is_toggle(event) { - return toggle_combo?.includes(event.key.toLowerCase()); + function is_toggle(e) { + return toggle_combo?.some((k) => is_active(k, e)); } - function is_nav(event) { - return nav_keys?.some((key) => is_key_active(key, event)); + function is_nav(e) { + return nav_keys?.some((k) => is_active(k, e)); } - function is_open(event) { - return options.openKey && options.openKey.toLowerCase() === event.key.toLowerCase(); + function is_open(e) { + return open_key && is_active(open_key, e); } function is_holding() { return hold_start_ts && Date.now() - hold_start_ts > 250; } - function stop(event) { - event.preventDefault(); - event.stopPropagation(); - event.stopImmediatePropagation(); + function stop(e) { + e.preventDefault(); + e.stopPropagation(); + e.stopImmediatePropagation(); } - function keydown(event) { - if (event.repeat || event.key == null || (!enabled && !is_toggle(event))) { + function keydown(e) { + if (e.repeat || e.key == null || (!enabled && !is_toggle(e))) { return; } - if (is_combo(event)) { + if (is_combo(e)) { toggle(); if (options.holdMode && enabled) { hold_start_ts = Date.now(); } } else if (enabled) { - if (is_nav(event)) { - const el = find_selectable_for_nav(event.key); + if (is_nav(e)) { + const el = find_selectable_for_nav(e.key); if (el) { activate(el); - stop(event); + stop(e); } - } else if (is_open(event)) { - open_editor(event); - } else if (is_holding() || is_escape(event)) { + } else if (is_open(e)) { + open_editor(e); + } else if (is_holding() || is_escape(e)) { // 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. @@ -204,11 +206,11 @@ } } - function keyup(event) { - if (event.repeat || event.key == null || !enabled) { + function keyup(e) { + if (e.repeat || e.key == null || !enabled) { return; } - if (is_toggle(event)) { + if (is_toggle(e)) { if (is_holding()) { disable(); } else {