@tanstack/svelte-hotkeys 0.5.0 → 0.6.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -1,10 +1,11 @@
1
- import type { HotkeyRecorderOptions } from '@tanstack/hotkeys';
1
+ import type { HotkeyRecorderOptions, HotkeySequenceRecorderOptions } from '@tanstack/hotkeys';
2
2
  import type { CreateHotkeyOptions } from './createHotkey.svelte';
3
3
  import type { Snippet } from 'svelte';
4
4
  import type { CreateHotkeySequenceOptions } from './createHotkeySequence.svelte';
5
5
  export interface HotkeysProviderOptions {
6
6
  hotkey?: Partial<CreateHotkeyOptions>;
7
7
  hotkeyRecorder?: Partial<HotkeyRecorderOptions>;
8
+ hotkeySequenceRecorder?: Partial<HotkeySequenceRecorderOptions>;
8
9
  hotkeySequence?: Partial<CreateHotkeySequenceOptions>;
9
10
  }
10
11
  export interface HotkeysProviderProps {
@@ -7,6 +7,11 @@ export interface CreateHotkeySequenceOptions extends Omit<SequenceOptions, 'targ
7
7
  /**
8
8
  * Register a global keyboard shortcut sequence for the current component.
9
9
  *
10
+ * Each step may include modifiers. You can chain the same modifier across
11
+ * steps (e.g. `Shift+R` then `Shift+T`). Modifier-only keydown events (Shift,
12
+ * Control, Alt, or Meta pressed alone) are ignored while matching—they do not
13
+ * advance the sequence or reset progress.
14
+ *
10
15
  * @example
11
16
  * ```svelte
12
17
  * <script lang="ts">
@@ -26,6 +31,11 @@ export interface CreateHotkeySequenceOptions extends Omit<SequenceOptions, 'targ
26
31
  * createHotkeySequence(['D', 'I', 'W'], () => {
27
32
  * deleteInnerWord()
28
33
  * }, { timeout: 500 })
34
+ *
35
+ * // Same modifier on consecutive steps (bare Shift between chords is ignored)
36
+ * createHotkeySequence(['Shift+R', 'Shift+T'], () => {
37
+ * nextAction()
38
+ * })
29
39
  * </script>
30
40
  *
31
41
  * <div>
@@ -16,6 +16,11 @@ function registerHotkeySequence(target, sequence, callback, options) {
16
16
  /**
17
17
  * Register a global keyboard shortcut sequence for the current component.
18
18
  *
19
+ * Each step may include modifiers. You can chain the same modifier across
20
+ * steps (e.g. `Shift+R` then `Shift+T`). Modifier-only keydown events (Shift,
21
+ * Control, Alt, or Meta pressed alone) are ignored while matching—they do not
22
+ * advance the sequence or reset progress.
23
+ *
19
24
  * @example
20
25
  * ```svelte
21
26
  * <script lang="ts">
@@ -35,6 +40,11 @@ function registerHotkeySequence(target, sequence, callback, options) {
35
40
  * createHotkeySequence(['D', 'I', 'W'], () => {
36
41
  * deleteInnerWord()
37
42
  * }, { timeout: 500 })
43
+ *
44
+ * // Same modifier on consecutive steps (bare Shift between chords is ignored)
45
+ * createHotkeySequence(['Shift+R', 'Shift+T'], () => {
46
+ * nextAction()
47
+ * })
38
48
  * </script>
39
49
  *
40
50
  * <div>
@@ -0,0 +1,15 @@
1
+ import type { HotkeySequence, HotkeySequenceRecorderOptions } from '@tanstack/hotkeys';
2
+ import type { MaybeGetter } from './internal.svelte';
3
+ export interface SvelteHotkeySequenceRecorder {
4
+ readonly isRecording: boolean;
5
+ readonly steps: HotkeySequence;
6
+ readonly recordedSequence: HotkeySequence | null;
7
+ startRecording: () => void;
8
+ stopRecording: () => void;
9
+ cancelRecording: () => void;
10
+ commitRecording: () => void;
11
+ }
12
+ /**
13
+ * Svelte helper for recording multi-chord sequences (Vim-style shortcuts).
14
+ */
15
+ export declare function createHotkeySequenceRecorder(options: MaybeGetter<HotkeySequenceRecorderOptions>): SvelteHotkeySequenceRecorder;
@@ -0,0 +1,74 @@
1
+ var __classPrivateFieldSet = (this && this.__classPrivateFieldSet) || function (receiver, state, value, kind, f) {
2
+ if (kind === "m") throw new TypeError("Private method is not writable");
3
+ if (kind === "a" && !f) throw new TypeError("Private accessor was defined without a setter");
4
+ if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver)) throw new TypeError("Cannot write private member to an object whose class did not declare it");
5
+ return (kind === "a" ? f.call(receiver, value) : f ? f.value = value : state.set(receiver, value)), value;
6
+ };
7
+ var __classPrivateFieldGet = (this && this.__classPrivateFieldGet) || function (receiver, state, kind, f) {
8
+ if (kind === "a" && !f) throw new TypeError("Private accessor was defined without a getter");
9
+ if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver)) throw new TypeError("Cannot read private member from an object whose class did not declare it");
10
+ return kind === "m" ? f : kind === "a" ? f.call(receiver) : f ? f.value : state.get(receiver);
11
+ };
12
+ var _SvelteHotkeySequenceRecorderState_recorder, _SvelteHotkeySequenceRecorderState_subscribe;
13
+ import { HotkeySequenceRecorder } from '@tanstack/hotkeys';
14
+ import { onDestroy } from 'svelte';
15
+ import { getDefaultHotkeysOptions } from './HotkeysCtx';
16
+ import { createStoreSubscriber, resolveMaybeGetter } from './internal.svelte';
17
+ class SvelteHotkeySequenceRecorderState {
18
+ constructor(options) {
19
+ _SvelteHotkeySequenceRecorderState_recorder.set(this, void 0);
20
+ _SvelteHotkeySequenceRecorderState_subscribe.set(this, void 0);
21
+ __classPrivateFieldSet(this, _SvelteHotkeySequenceRecorderState_recorder, new HotkeySequenceRecorder(options), "f");
22
+ __classPrivateFieldSet(this, _SvelteHotkeySequenceRecorderState_subscribe, createStoreSubscriber(__classPrivateFieldGet(this, _SvelteHotkeySequenceRecorderState_recorder, "f").store), "f");
23
+ }
24
+ get isRecording() {
25
+ __classPrivateFieldGet(this, _SvelteHotkeySequenceRecorderState_subscribe, "f").call(this);
26
+ return __classPrivateFieldGet(this, _SvelteHotkeySequenceRecorderState_recorder, "f").store.state.isRecording;
27
+ }
28
+ get steps() {
29
+ __classPrivateFieldGet(this, _SvelteHotkeySequenceRecorderState_subscribe, "f").call(this);
30
+ return __classPrivateFieldGet(this, _SvelteHotkeySequenceRecorderState_recorder, "f").store.state.steps;
31
+ }
32
+ get recordedSequence() {
33
+ __classPrivateFieldGet(this, _SvelteHotkeySequenceRecorderState_subscribe, "f").call(this);
34
+ return __classPrivateFieldGet(this, _SvelteHotkeySequenceRecorderState_recorder, "f").store.state.recordedSequence;
35
+ }
36
+ setOptions(options) {
37
+ __classPrivateFieldGet(this, _SvelteHotkeySequenceRecorderState_recorder, "f").setOptions(options);
38
+ }
39
+ startRecording() {
40
+ __classPrivateFieldGet(this, _SvelteHotkeySequenceRecorderState_recorder, "f").start();
41
+ }
42
+ stopRecording() {
43
+ __classPrivateFieldGet(this, _SvelteHotkeySequenceRecorderState_recorder, "f").stop();
44
+ }
45
+ cancelRecording() {
46
+ __classPrivateFieldGet(this, _SvelteHotkeySequenceRecorderState_recorder, "f").cancel();
47
+ }
48
+ commitRecording() {
49
+ __classPrivateFieldGet(this, _SvelteHotkeySequenceRecorderState_recorder, "f").commit();
50
+ }
51
+ destroy() {
52
+ __classPrivateFieldGet(this, _SvelteHotkeySequenceRecorderState_recorder, "f").destroy();
53
+ }
54
+ }
55
+ _SvelteHotkeySequenceRecorderState_recorder = new WeakMap(), _SvelteHotkeySequenceRecorderState_subscribe = new WeakMap();
56
+ /**
57
+ * Svelte helper for recording multi-chord sequences (Vim-style shortcuts).
58
+ */
59
+ export function createHotkeySequenceRecorder(options) {
60
+ const recorder = new SvelteHotkeySequenceRecorderState({
61
+ ...getDefaultHotkeysOptions().hotkeySequenceRecorder,
62
+ ...resolveMaybeGetter(options),
63
+ });
64
+ $effect(() => {
65
+ recorder.setOptions({
66
+ ...getDefaultHotkeysOptions().hotkeySequenceRecorder,
67
+ ...resolveMaybeGetter(options),
68
+ });
69
+ });
70
+ onDestroy(() => {
71
+ recorder.destroy();
72
+ });
73
+ return recorder;
74
+ }
package/dist/index.d.ts CHANGED
@@ -3,6 +3,7 @@ export * from './createHotkey.svelte';
3
3
  export * from './createHotkeys.svelte';
4
4
  export * from './createHotkeySequence.svelte';
5
5
  export * from './createHotkeyRecorder.svelte';
6
+ export * from './createHotkeySequenceRecorder.svelte';
6
7
  export * from './getHeldKeys.svelte';
7
8
  export * from './getHeldKeyCodesMap.svelte';
8
9
  export * from './getIsKeyHeld.svelte';
package/dist/index.js CHANGED
@@ -4,6 +4,7 @@ export * from './createHotkey.svelte';
4
4
  export * from './createHotkeys.svelte';
5
5
  export * from './createHotkeySequence.svelte';
6
6
  export * from './createHotkeyRecorder.svelte';
7
+ export * from './createHotkeySequenceRecorder.svelte';
7
8
  export * from './getHeldKeys.svelte';
8
9
  export * from './getHeldKeyCodesMap.svelte';
9
10
  export * from './getIsKeyHeld.svelte';
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@tanstack/svelte-hotkeys",
3
- "version": "0.5.0",
3
+ "version": "0.6.0",
4
4
  "description": "Svelte adapter for TanStack Hotkeys",
5
5
  "author": "Kunal Rao",
6
6
  "license": "MIT",
@@ -40,7 +40,7 @@
40
40
  "src"
41
41
  ],
42
42
  "dependencies": {
43
- "@tanstack/hotkeys": "0.4.2"
43
+ "@tanstack/hotkeys": "0.5.0"
44
44
  },
45
45
  "devDependencies": {
46
46
  "@sveltejs/package": "^2.5.7",
package/src/HotkeysCtx.ts CHANGED
@@ -1,5 +1,8 @@
1
1
  import { createContext } from 'svelte'
2
- import type { HotkeyRecorderOptions } from '@tanstack/hotkeys'
2
+ import type {
3
+ HotkeyRecorderOptions,
4
+ HotkeySequenceRecorderOptions,
5
+ } from '@tanstack/hotkeys'
3
6
  import type { CreateHotkeyOptions } from './createHotkey.svelte'
4
7
  import type { Snippet } from 'svelte'
5
8
  import type { CreateHotkeySequenceOptions } from './createHotkeySequence.svelte'
@@ -7,6 +10,7 @@ import type { CreateHotkeySequenceOptions } from './createHotkeySequence.svelte'
7
10
  export interface HotkeysProviderOptions {
8
11
  hotkey?: Partial<CreateHotkeyOptions>
9
12
  hotkeyRecorder?: Partial<HotkeyRecorderOptions>
13
+ hotkeySequenceRecorder?: Partial<HotkeySequenceRecorderOptions>
10
14
  hotkeySequence?: Partial<CreateHotkeySequenceOptions>
11
15
  }
12
16
 
@@ -38,6 +38,11 @@ function registerHotkeySequence(
38
38
  /**
39
39
  * Register a global keyboard shortcut sequence for the current component.
40
40
  *
41
+ * Each step may include modifiers. You can chain the same modifier across
42
+ * steps (e.g. `Shift+R` then `Shift+T`). Modifier-only keydown events (Shift,
43
+ * Control, Alt, or Meta pressed alone) are ignored while matching—they do not
44
+ * advance the sequence or reset progress.
45
+ *
41
46
  * @example
42
47
  * ```svelte
43
48
  * <script lang="ts">
@@ -57,6 +62,11 @@ function registerHotkeySequence(
57
62
  * createHotkeySequence(['D', 'I', 'W'], () => {
58
63
  * deleteInnerWord()
59
64
  * }, { timeout: 500 })
65
+ *
66
+ * // Same modifier on consecutive steps (bare Shift between chords is ignored)
67
+ * createHotkeySequence(['Shift+R', 'Shift+T'], () => {
68
+ * nextAction()
69
+ * })
60
70
  * </script>
61
71
  *
62
72
  * <div>
@@ -0,0 +1,93 @@
1
+ import { HotkeySequenceRecorder } from '@tanstack/hotkeys'
2
+ import { onDestroy } from 'svelte'
3
+ import { getDefaultHotkeysOptions } from './HotkeysCtx'
4
+ import { createStoreSubscriber, resolveMaybeGetter } from './internal.svelte'
5
+ import type {
6
+ HotkeySequence,
7
+ HotkeySequenceRecorderOptions,
8
+ } from '@tanstack/hotkeys'
9
+ import type { MaybeGetter } from './internal.svelte'
10
+
11
+ export interface SvelteHotkeySequenceRecorder {
12
+ readonly isRecording: boolean
13
+ readonly steps: HotkeySequence
14
+ readonly recordedSequence: HotkeySequence | null
15
+ startRecording: () => void
16
+ stopRecording: () => void
17
+ cancelRecording: () => void
18
+ commitRecording: () => void
19
+ }
20
+
21
+ class SvelteHotkeySequenceRecorderState implements SvelteHotkeySequenceRecorder {
22
+ #recorder: HotkeySequenceRecorder
23
+ #subscribe: () => void
24
+
25
+ constructor(options: HotkeySequenceRecorderOptions) {
26
+ this.#recorder = new HotkeySequenceRecorder(options)
27
+ this.#subscribe = createStoreSubscriber(this.#recorder.store)
28
+ }
29
+
30
+ get isRecording(): boolean {
31
+ this.#subscribe()
32
+ return this.#recorder.store.state.isRecording
33
+ }
34
+
35
+ get steps(): HotkeySequence {
36
+ this.#subscribe()
37
+ return this.#recorder.store.state.steps
38
+ }
39
+
40
+ get recordedSequence(): HotkeySequence | null {
41
+ this.#subscribe()
42
+ return this.#recorder.store.state.recordedSequence
43
+ }
44
+
45
+ setOptions(options: HotkeySequenceRecorderOptions): void {
46
+ this.#recorder.setOptions(options)
47
+ }
48
+
49
+ startRecording(): void {
50
+ this.#recorder.start()
51
+ }
52
+
53
+ stopRecording(): void {
54
+ this.#recorder.stop()
55
+ }
56
+
57
+ cancelRecording(): void {
58
+ this.#recorder.cancel()
59
+ }
60
+
61
+ commitRecording(): void {
62
+ this.#recorder.commit()
63
+ }
64
+
65
+ destroy(): void {
66
+ this.#recorder.destroy()
67
+ }
68
+ }
69
+
70
+ /**
71
+ * Svelte helper for recording multi-chord sequences (Vim-style shortcuts).
72
+ */
73
+ export function createHotkeySequenceRecorder(
74
+ options: MaybeGetter<HotkeySequenceRecorderOptions>,
75
+ ): SvelteHotkeySequenceRecorder {
76
+ const recorder = new SvelteHotkeySequenceRecorderState({
77
+ ...getDefaultHotkeysOptions().hotkeySequenceRecorder,
78
+ ...resolveMaybeGetter(options),
79
+ } as HotkeySequenceRecorderOptions)
80
+
81
+ $effect(() => {
82
+ recorder.setOptions({
83
+ ...getDefaultHotkeysOptions().hotkeySequenceRecorder,
84
+ ...resolveMaybeGetter(options),
85
+ } as HotkeySequenceRecorderOptions)
86
+ })
87
+
88
+ onDestroy(() => {
89
+ recorder.destroy()
90
+ })
91
+
92
+ return recorder
93
+ }
package/src/index.ts CHANGED
@@ -5,6 +5,7 @@ export * from './createHotkey.svelte'
5
5
  export * from './createHotkeys.svelte'
6
6
  export * from './createHotkeySequence.svelte'
7
7
  export * from './createHotkeyRecorder.svelte'
8
+ export * from './createHotkeySequenceRecorder.svelte'
8
9
  export * from './getHeldKeys.svelte'
9
10
  export * from './getHeldKeyCodesMap.svelte'
10
11
  export * from './getIsKeyHeld.svelte'