@tanstack/hotkeys-devtools 0.4.4 → 0.7.0

package/README.md

@@ -37,7 +37,7 @@
 # TanStack Hotkeys
 
 > [!NOTE]
-> TanStack Hotkeys is pre-alpha (prototyping phase). We are actively developing the library and are open to feedback and contributions.
+> TanStack Hotkeys is alpha. We are actively developing the library and are open to feedback and contributions.
 
 Type-safe keyboard shortcuts for the web. Template-string bindings, parsed objects, a cross-platform `Mod` key, a singleton Hotkey Manager, and utilities for cheatsheet UIs—built to stay SSR-friendly.
 

package/dist/HotkeysContextProvider.js

@@ -1,3 +1,4 @@
+import { needsSequenceProgressClock } from "./sequence-progress.js";
 import { createComponent } from "solid-js/web";
 import { createContext, createEffect, createSignal, onCleanup, useContext } from "solid-js";
 import { HotkeyManager, KeyStateTracker, SequenceManager } from "@tanstack/hotkeys";
@@ -7,7 +8,8 @@ const HotkeysDevtoolsContext = createContext({
 	registrations: () => [],
 	sequenceRegistrations: () => [],
 	heldKeys: () => [],
-	heldCodes: () => ({})
+	heldCodes: () => ({}),
+	sequenceProgressNow: () => Date.now()
 });
 function HotkeysContextProvider(props) {
 	const manager = HotkeyManager.getInstance();
@@ -36,12 +38,33 @@ function HotkeysContextProvider(props) {
 		}).unsubscribe;
 		onCleanup(() => unsubscribe());
 	});
+	const [sequenceProgressNow, setSequenceProgressNow] = createSignal(Date.now());
+	createEffect(() => {
+		const regs = sequenceRegistrations();
+		let id;
+		const tick = () => {
+			const t = Date.now();
+			setSequenceProgressNow(t);
+			if (!needsSequenceProgressClock(sequenceRegistrations(), t)) {
+				if (id !== void 0) {
+					clearInterval(id);
+					id = void 0;
+				}
+			}
+		};
+		if (needsSequenceProgressClock(regs, Date.now())) id = setInterval(tick, 50);
+		else setSequenceProgressNow(Date.now());
+		onCleanup(() => {
+			if (id !== void 0) clearInterval(id);
+		});
+	});
 	return createComponent(HotkeysDevtoolsContext.Provider, {
 		value: {
 			registrations,
 			sequenceRegistrations,
 			heldKeys,
-			heldCodes
+			heldCodes,
+			sequenceProgressNow
 		},
 		get children() {
 			return props.children;

package/dist/HotkeysContextProvider.js.map

@@ -1 +1 @@
-{"version":3,"file":"HotkeysContextProvider.js","names":["createContext","createEffect","createSignal","onCleanup","useContext","HotkeyManager","KeyStateTracker","SequenceManager","Accessor","HotkeyRegistration","SequenceRegistrationView","HotkeysDevtoolsContextType","registrations","Array","sequenceRegistrations","heldKeys","heldCodes","Record","HotkeysDevtoolsContext","HotkeysContextProvider","props","children","manager","getInstance","sequenceManager","tracker","setRegistrations","from","state","values","setSequenceRegistrations","setHeldKeys","store","setHeldCodes","unsubscribe","subscribe","_$createComponent","Provider","value","useHotkeysDevtoolsState"],"sources":["../src/HotkeysContextProvider.tsx"],"sourcesContent":["import {\n  createContext,\n  createEffect,\n  createSignal,\n  onCleanup,\n  useContext,\n} from 'solid-js'\nimport {\n  HotkeyManager,\n  KeyStateTracker,\n  SequenceManager,\n} from '@tanstack/hotkeys'\nimport type { Accessor } from 'solid-js'\nimport type {\n  HotkeyRegistration,\n  SequenceRegistrationView,\n} from '@tanstack/hotkeys'\n\ninterface HotkeysDevtoolsContextType {\n  registrations: Accessor<Array<HotkeyRegistration>>\n  sequenceRegistrations: Accessor<Array<SequenceRegistrationView>>\n  heldKeys: Accessor<Array<string>>\n  heldCodes: Accessor<Record<string, string>>\n}\n\nconst HotkeysDevtoolsContext = createContext<HotkeysDevtoolsContextType>({\n  registrations: () => [],\n  sequenceRegistrations: () => [],\n  heldKeys: () => [],\n  heldCodes: () => ({}),\n})\n\nexport function HotkeysContextProvider(props: { children: any }) {\n  const manager = HotkeyManager.getInstance()\n  const sequenceManager = SequenceManager.getInstance()\n  const tracker = KeyStateTracker.getInstance()\n\n  // Create local signals that will be updated by subscriptions\n  const [registrations, setRegistrations] = createSignal<\n    Array<HotkeyRegistration>\n  >(Array.from(manager.registrations.state.values()))\n  const [sequenceRegistrations, setSequenceRegistrations] = createSignal<\n    Array<SequenceRegistrationView>\n  >(Array.from(sequenceManager.registrations.state.values()))\n  const [heldKeys, setHeldKeys] = createSignal<Array<string>>(\n    tracker.store.state.heldKeys,\n  )\n  const [heldCodes, setHeldCodes] = createSignal<Record<string, string>>(\n    tracker.store.state.heldCodes,\n  )\n\n  // Subscribe to HotkeyManager registrations store\n  createEffect(() => {\n    const unsubscribe = manager.registrations.subscribe(() => {\n      setRegistrations(Array.from(manager.registrations.state.values()))\n    }).unsubscribe\n    onCleanup(() => unsubscribe())\n  })\n\n  // Subscribe to SequenceManager registrations store\n  createEffect(() => {\n    const unsubscribe = sequenceManager.registrations.subscribe(() => {\n      setSequenceRegistrations(\n        Array.from(sequenceManager.registrations.state.values()),\n      )\n    }).unsubscribe\n    onCleanup(() => unsubscribe())\n  })\n\n  // Subscribe to KeyStateTracker store\n  createEffect(() => {\n    const unsubscribe = tracker.store.subscribe(() => {\n      setHeldKeys(tracker.store.state.heldKeys)\n      setHeldCodes(tracker.store.state.heldCodes)\n    }).unsubscribe\n    onCleanup(() => unsubscribe())\n  })\n\n  return (\n    <HotkeysDevtoolsContext.Provider\n      value={{\n        registrations,\n        sequenceRegistrations,\n        heldKeys,\n        heldCodes,\n      }}\n    >\n      {props.children}\n    </HotkeysDevtoolsContext.Provider>\n  )\n}\n\nexport function useHotkeysDevtoolsState() {\n  return useContext(HotkeysDevtoolsContext)\n}\n"],"mappings":";;;;;AAyBA,MAAMkB,yBAAyBlB,cAA0C;CACvEY,qBAAqB,EAAE;CACvBE,6BAA6B,EAAE;CAC/BC,gBAAgB,EAAE;CAClBC,kBAAkB,EAAE;CACrB,CAAC;AAEF,SAAgBG,uBAAuBC,OAA0B;CAC/D,MAAME,UAAUjB,cAAckB,aAAa;CAC3C,MAAMC,kBAAkBjB,gBAAgBgB,aAAa;CACrD,MAAME,UAAUnB,gBAAgBiB,aAAa;CAG7C,MAAM,CAACX,eAAec,oBAAoBxB,aAExCW,MAAMc,KAAKL,QAAQV,cAAcgB,MAAMC,QAAQ,CAAC,CAAC;CACnD,MAAM,CAACf,uBAAuBgB,4BAA4B5B,aAExDW,MAAMc,KAAKH,gBAAgBZ,cAAcgB,MAAMC,QAAQ,CAAC,CAAC;CAC3D,MAAM,CAACd,UAAUgB,eAAe7B,aAC9BuB,QAAQO,MAAMJ,MAAMb,SACrB;CACD,MAAM,CAACC,WAAWiB,gBAAgB/B,aAChCuB,QAAQO,MAAMJ,MAAMZ,UACrB;AAGDf,oBAAmB;EACjB,MAAMiC,cAAcZ,QAAQV,cAAcuB,gBAAgB;AACxDT,oBAAiBb,MAAMc,KAAKL,QAAQV,cAAcgB,MAAMC,QAAQ,CAAC,CAAC;IAClE,CAACK;AACH/B,kBAAgB+B,aAAa,CAAC;GAC9B;AAGFjC,oBAAmB;EACjB,MAAMiC,cAAcV,gBAAgBZ,cAAcuB,gBAAgB;AAChEL,4BACEjB,MAAMc,KAAKH,gBAAgBZ,cAAcgB,MAAMC,QAAQ,CACzD,CAAC;IACD,CAACK;AACH/B,kBAAgB+B,aAAa,CAAC;GAC9B;AAGFjC,oBAAmB;EACjB,MAAMiC,cAAcT,QAAQO,MAAMG,gBAAgB;AAChDJ,eAAYN,QAAQO,MAAMJ,MAAMb,SAAS;AACzCkB,gBAAaR,QAAQO,MAAMJ,MAAMZ,UAAU;IAC3C,CAACkB;AACH/B,kBAAgB+B,aAAa,CAAC;GAC9B;AAEF,QAAAE,gBACGlB,uBAAuBmB,UAAQ;EAC9BC,OAAO;GACL1B;GACAE;GACAC;GACAC;GACD;EAAA,IAAAK,WAAA;AAAA,UAEAD,MAAMC;;EAAQ,CAAA;;AAKrB,SAAgBkB,0BAA0B;AACxC,QAAOnC,WAAWc,uBAAuB"}
+{"version":3,"file":"HotkeysContextProvider.js","names":["createContext","createEffect","createSignal","onCleanup","useContext","HotkeyManager","KeyStateTracker","SequenceManager","needsSequenceProgressClock","Accessor","HotkeyRegistration","SequenceRegistrationView","HotkeysDevtoolsContextType","registrations","Array","sequenceRegistrations","heldKeys","heldCodes","Record","sequenceProgressNow","HotkeysDevtoolsContext","Date","now","HotkeysContextProvider","props","children","manager","getInstance","sequenceManager","tracker","setRegistrations","from","state","values","setSequenceRegistrations","setHeldKeys","store","setHeldCodes","unsubscribe","subscribe","setSequenceProgressNow","regs","id","ReturnType","setInterval","tick","t","undefined","clearInterval","_$createComponent","Provider","value","useHotkeysDevtoolsState"],"sources":["../src/HotkeysContextProvider.tsx"],"sourcesContent":["import {\n  createContext,\n  createEffect,\n  createSignal,\n  onCleanup,\n  useContext,\n} from 'solid-js'\nimport {\n  HotkeyManager,\n  KeyStateTracker,\n  SequenceManager,\n} from '@tanstack/hotkeys'\nimport { needsSequenceProgressClock } from './sequence-progress'\nimport type { Accessor } from 'solid-js'\nimport type {\n  HotkeyRegistration,\n  SequenceRegistrationView,\n} from '@tanstack/hotkeys'\n\ninterface HotkeysDevtoolsContextType {\n  registrations: Accessor<Array<HotkeyRegistration>>\n  sequenceRegistrations: Accessor<Array<SequenceRegistrationView>>\n  heldKeys: Accessor<Array<string>>\n  heldCodes: Accessor<Record<string, string>>\n  /** Monotonic clock for sequence in-progress UI (updates while a sequence match is active). */\n  sequenceProgressNow: Accessor<number>\n}\n\nconst HotkeysDevtoolsContext = createContext<HotkeysDevtoolsContextType>({\n  registrations: () => [],\n  sequenceRegistrations: () => [],\n  heldKeys: () => [],\n  heldCodes: () => ({}),\n  sequenceProgressNow: () => Date.now(),\n})\n\nexport function HotkeysContextProvider(props: { children: any }) {\n  const manager = HotkeyManager.getInstance()\n  const sequenceManager = SequenceManager.getInstance()\n  const tracker = KeyStateTracker.getInstance()\n\n  // Create local signals that will be updated by subscriptions\n  const [registrations, setRegistrations] = createSignal<\n    Array<HotkeyRegistration>\n  >(Array.from(manager.registrations.state.values()))\n  const [sequenceRegistrations, setSequenceRegistrations] = createSignal<\n    Array<SequenceRegistrationView>\n  >(Array.from(sequenceManager.registrations.state.values()))\n  const [heldKeys, setHeldKeys] = createSignal<Array<string>>(\n    tracker.store.state.heldKeys,\n  )\n  const [heldCodes, setHeldCodes] = createSignal<Record<string, string>>(\n    tracker.store.state.heldCodes,\n  )\n\n  // Subscribe to HotkeyManager registrations store\n  createEffect(() => {\n    const unsubscribe = manager.registrations.subscribe(() => {\n      setRegistrations(Array.from(manager.registrations.state.values()))\n    }).unsubscribe\n    onCleanup(() => unsubscribe())\n  })\n\n  // Subscribe to SequenceManager registrations store\n  createEffect(() => {\n    const unsubscribe = sequenceManager.registrations.subscribe(() => {\n      setSequenceRegistrations(\n        Array.from(sequenceManager.registrations.state.values()),\n      )\n    }).unsubscribe\n    onCleanup(() => unsubscribe())\n  })\n\n  // Subscribe to KeyStateTracker store\n  createEffect(() => {\n    const unsubscribe = tracker.store.subscribe(() => {\n      setHeldKeys(tracker.store.state.heldKeys)\n      setHeldCodes(tracker.store.state.heldCodes)\n    }).unsubscribe\n    onCleanup(() => unsubscribe())\n  })\n\n  const [sequenceProgressNow, setSequenceProgressNow] = createSignal(Date.now())\n\n  createEffect(() => {\n    const regs = sequenceRegistrations()\n    let id: ReturnType<typeof setInterval> | undefined\n\n    const tick = () => {\n      const t = Date.now()\n      setSequenceProgressNow(t)\n      if (!needsSequenceProgressClock(sequenceRegistrations(), t)) {\n        if (id !== undefined) {\n          clearInterval(id)\n          id = undefined\n        }\n      }\n    }\n\n    if (needsSequenceProgressClock(regs, Date.now())) {\n      id = setInterval(tick, 50)\n    } else {\n      setSequenceProgressNow(Date.now())\n    }\n\n    onCleanup(() => {\n      if (id !== undefined) {\n        clearInterval(id)\n      }\n    })\n  })\n\n  return (\n    <HotkeysDevtoolsContext.Provider\n      value={{\n        registrations,\n        sequenceRegistrations,\n        heldKeys,\n        heldCodes,\n        sequenceProgressNow,\n      }}\n    >\n      {props.children}\n    </HotkeysDevtoolsContext.Provider>\n  )\n}\n\nexport function useHotkeysDevtoolsState() {\n  return useContext(HotkeysDevtoolsContext)\n}\n"],"mappings":";;;;;;AA4BA,MAAMoB,yBAAyBpB,cAA0C;CACvEa,qBAAqB,EAAE;CACvBE,6BAA6B,EAAE;CAC/BC,gBAAgB,EAAE;CAClBC,kBAAkB,EAAE;CACpBE,2BAA2BE,KAAKC,KAAI;CACrC,CAAC;AAEF,SAAgBC,uBAAuBC,OAA0B;CAC/D,MAAME,UAAUrB,cAAcsB,aAAa;CAC3C,MAAMC,kBAAkBrB,gBAAgBoB,aAAa;CACrD,MAAME,UAAUvB,gBAAgBqB,aAAa;CAG7C,MAAM,CAACd,eAAeiB,oBAAoB5B,aAExCY,MAAMiB,KAAKL,QAAQb,cAAcmB,MAAMC,QAAQ,CAAC,CAAC;CACnD,MAAM,CAAClB,uBAAuBmB,4BAA4BhC,aAExDY,MAAMiB,KAAKH,gBAAgBf,cAAcmB,MAAMC,QAAQ,CAAC,CAAC;CAC3D,MAAM,CAACjB,UAAUmB,eAAejC,aAC9B2B,QAAQO,MAAMJ,MAAMhB,SACrB;CACD,MAAM,CAACC,WAAWoB,gBAAgBnC,aAChC2B,QAAQO,MAAMJ,MAAMf,UACrB;AAGDhB,oBAAmB;EACjB,MAAMqC,cAAcZ,QAAQb,cAAc0B,gBAAgB;AACxDT,oBAAiBhB,MAAMiB,KAAKL,QAAQb,cAAcmB,MAAMC,QAAQ,CAAC,CAAC;IAClE,CAACK;AACHnC,kBAAgBmC,aAAa,CAAC;GAC9B;AAGFrC,oBAAmB;EACjB,MAAMqC,cAAcV,gBAAgBf,cAAc0B,gBAAgB;AAChEL,4BACEpB,MAAMiB,KAAKH,gBAAgBf,cAAcmB,MAAMC,QAAQ,CACzD,CAAC;IACD,CAACK;AACHnC,kBAAgBmC,aAAa,CAAC;GAC9B;AAGFrC,oBAAmB;EACjB,MAAMqC,cAAcT,QAAQO,MAAMG,gBAAgB;AAChDJ,eAAYN,QAAQO,MAAMJ,MAAMhB,SAAS;AACzCqB,gBAAaR,QAAQO,MAAMJ,MAAMf,UAAU;IAC3C,CAACqB;AACHnC,kBAAgBmC,aAAa,CAAC;GAC9B;CAEF,MAAM,CAACnB,qBAAqBqB,0BAA0BtC,aAAamB,KAAKC,KAAK,CAAC;AAE9ErB,oBAAmB;EACjB,MAAMwC,OAAO1B,uBAAuB;EACpC,IAAI2B;EAEJ,MAAMG,aAAa;GACjB,MAAMC,IAAIzB,KAAKC,KAAK;AACpBkB,0BAAuBM,EAAE;AACzB,OAAI,CAACtC,2BAA2BO,uBAAuB,EAAE+B,EAAE,EACzD;QAAIJ,OAAOK,QAAW;AACpBC,mBAAcN,GAAG;AACjBA,UAAKK;;;;AAKX,MAAIvC,2BAA2BiC,MAAMpB,KAAKC,KAAK,CAAC,CAC9CoB,MAAKE,YAAYC,MAAM,GAAG;MAE1BL,wBAAuBnB,KAAKC,KAAK,CAAC;AAGpCnB,kBAAgB;AACd,OAAIuC,OAAOK,OACTC,eAAcN,GAAG;IAEnB;GACF;AAEF,QAAAO,gBACG7B,uBAAuB8B,UAAQ;EAC9BC,OAAO;GACLtC;GACAE;GACAC;GACAC;GACAE;GACD;EAAA,IAAAM,WAAA;AAAA,UAEAD,MAAMC;;EAAQ,CAAA;;AAKrB,SAAgB2B,0BAA0B;AACxC,QAAOhD,WAAWgB,uBAAuB"}