@tanstack/hotkeys-devtools 0.2.0 → 0.3.0

package/dist/HotkeysContextProvider.js

@@ -1,17 +1,20 @@
 import { createContext, createEffect, createSignal, onCleanup, useContext } from "solid-js";
 import { createComponent } from "solid-js/web";
-import { HotkeyManager, KeyStateTracker } from "@tanstack/hotkeys";
+import { HotkeyManager, KeyStateTracker, SequenceManager } from "@tanstack/hotkeys";
 
 //#region src/HotkeysContextProvider.tsx
 const HotkeysDevtoolsContext = createContext({
 	registrations: () => [],
+	sequenceRegistrations: () => [],
 	heldKeys: () => [],
 	heldCodes: () => ({})
 });
 function HotkeysContextProvider(props) {
 	const manager = HotkeyManager.getInstance();
+	const sequenceManager = SequenceManager.getInstance();
 	const tracker = KeyStateTracker.getInstance();
 	const [registrations, setRegistrations] = createSignal(Array.from(manager.registrations.state.values()));
+	const [sequenceRegistrations, setSequenceRegistrations] = createSignal(Array.from(sequenceManager.registrations.state.values()));
 	const [heldKeys, setHeldKeys] = createSignal(tracker.store.state.heldKeys);
 	const [heldCodes, setHeldCodes] = createSignal(tracker.store.state.heldCodes);
 	createEffect(() => {
@@ -20,6 +23,12 @@ function HotkeysContextProvider(props) {
 		}).unsubscribe;
 		onCleanup(() => unsubscribe());
 	});
+	createEffect(() => {
+		const unsubscribe = sequenceManager.registrations.subscribe(() => {
+			setSequenceRegistrations(Array.from(sequenceManager.registrations.state.values()));
+		}).unsubscribe;
+		onCleanup(() => unsubscribe());
+	});
 	createEffect(() => {
 		const unsubscribe = tracker.store.subscribe(() => {
 			setHeldKeys(tracker.store.state.heldKeys);
@@ -30,6 +39,7 @@ function HotkeysContextProvider(props) {
 	return createComponent(HotkeysDevtoolsContext.Provider, {
 		value: {
 			registrations,
+			sequenceRegistrations,
 			heldKeys,
 			heldCodes
 		},

package/dist/HotkeysContextProvider.js.map

@@ -1 +1 @@
-{"version":3,"file":"HotkeysContextProvider.js","names":["createContext","createEffect","createSignal","onCleanup","useContext","HotkeyManager","KeyStateTracker","Accessor","HotkeyRegistration","HotkeysDevtoolsContextType","registrations","Array","heldKeys","heldCodes","Record","HotkeysDevtoolsContext","HotkeysContextProvider","props","children","manager","getInstance","tracker","setRegistrations","from","state","values","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 { HotkeyManager, KeyStateTracker } from '@tanstack/hotkeys'\nimport type { Accessor } from 'solid-js'\nimport type { HotkeyRegistration } from '@tanstack/hotkeys'\n\ninterface HotkeysDevtoolsContextType {\n  registrations: Accessor<Array<HotkeyRegistration>>\n  heldKeys: Accessor<Array<string>>\n  heldCodes: Accessor<Record<string, string>>\n}\n\nconst HotkeysDevtoolsContext = createContext<HotkeysDevtoolsContextType>({\n  registrations: () => [],\n  heldKeys: () => [],\n  heldCodes: () => ({}),\n})\n\nexport function HotkeysContextProvider(props: { children: any }) {\n  const manager = HotkeyManager.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 [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 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={{ registrations, heldKeys, heldCodes }}\n    >\n      {props.children}\n    </HotkeysDevtoolsContext.Provider>\n  )\n}\n\nexport function useHotkeysDevtoolsState() {\n  return useContext(HotkeysDevtoolsContext)\n}\n"],"mappings":";;;;;AAiBA,MAAMe,yBAAyBf,cAA0C;CACvEU,qBAAqB,EAAE;CACvBE,gBAAgB,EAAE;CAClBC,kBAAkB,EAAE;CACrB,CAAC;AAEF,SAAgBG,uBAAuBC,OAA0B;CAC/D,MAAME,UAAUd,cAAce,aAAa;CAC3C,MAAMC,UAAUf,gBAAgBc,aAAa;CAG7C,MAAM,CAACV,eAAeY,oBAAoBpB,aAExCS,MAAMY,KAAKJ,QAAQT,cAAcc,MAAMC,QAAQ,CAAC,CAAC;CACnD,MAAM,CAACb,UAAUc,eAAexB,aAC9BmB,QAAQM,MAAMH,MAAMZ,SACrB;CACD,MAAM,CAACC,WAAWe,gBAAgB1B,aAChCmB,QAAQM,MAAMH,MAAMX,UACrB;AAGDZ,oBAAmB;EACjB,MAAM4B,cAAcV,QAAQT,cAAcoB,gBAAgB;AACxDR,oBAAiBX,MAAMY,KAAKJ,QAAQT,cAAcc,MAAMC,QAAQ,CAAC,CAAC;IAClE,CAACI;AACH1B,kBAAgB0B,aAAa,CAAC;GAC9B;AAGF5B,oBAAmB;EACjB,MAAM4B,cAAcR,QAAQM,MAAMG,gBAAgB;AAChDJ,eAAYL,QAAQM,MAAMH,MAAMZ,SAAS;AACzCgB,gBAAaP,QAAQM,MAAMH,MAAMX,UAAU;IAC3C,CAACgB;AACH1B,kBAAgB0B,aAAa,CAAC;GAC9B;AAEF,QAAAE,gBACGhB,uBAAuBiB,UAAQ;EAC9BC,OAAO;GAAEvB;GAAeE;GAAUC;GAAW;EAAA,IAAAK,WAAA;AAAA,UAE5CD,MAAMC;;EAAQ,CAAA;;AAKrB,SAAgBgB,0BAA0B;AACxC,QAAO9B,WAAWW,uBAAuB"}
+{"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"}

package/dist/components/ActionButtons.js

@@ -1,13 +1,18 @@
 import { useStyles } from "../styles/use-styles.js";
 import { className, delegateEvents, effect, template } from "solid-js/web";
-import { HotkeyManager } from "@tanstack/hotkeys";
+import { HotkeyManager, SequenceManager } from "@tanstack/hotkeys";
 
 //#region src/components/ActionButtons.tsx
 var _tmpl$ = /* @__PURE__ */ template(`<div><button><span></span>Trigger`);
+function isSequenceRegistration(reg) {
+	return "sequence" in reg && Array.isArray(reg.sequence);
+}
 function ActionButtons(props) {
 	const styles = useStyles();
 	const handleTrigger = () => {
-		HotkeyManager.getInstance().triggerRegistration(props.registration.id);
+		const reg = props.registration;
+		if (isSequenceRegistration(reg)) SequenceManager.getInstance().triggerSequence(reg.id);
+		else HotkeyManager.getInstance().triggerRegistration(reg.id);
 	};
 	return (() => {
 		var _el$ = _tmpl$(), _el$2 = _el$.firstChild, _el$3 = _el$2.firstChild;

package/dist/components/ActionButtons.js.map

@@ -1 +1 @@
-{"version":3,"file":"ActionButtons.js","names":["HotkeyManager","useStyles","HotkeyRegistration","ActionButtonsProps","registration","ActionButtons","props","styles","handleTrigger","manager","getInstance","triggerRegistration","id","_el$","_tmpl$","_el$2","firstChild","_el$3","$$mousedown","_$effect","_p$","_v$","actionsRow","_v$2","actionButton","_v$3","actionDotGreen","e","_$className","t","a","undefined","_$delegateEvents"],"sources":["../../src/components/ActionButtons.tsx"],"sourcesContent":["import { HotkeyManager } from '@tanstack/hotkeys'\nimport { useStyles } from '../styles/use-styles'\nimport type { HotkeyRegistration } from '@tanstack/hotkeys'\n\ntype ActionButtonsProps = {\n  registration: HotkeyRegistration\n}\n\nexport function ActionButtons(props: ActionButtonsProps) {\n  const styles = useStyles()\n\n  const handleTrigger = () => {\n    const manager = HotkeyManager.getInstance()\n    manager.triggerRegistration(props.registration.id)\n  }\n\n  return (\n    <div class={styles().actionsRow}>\n      <button class={styles().actionButton} onMouseDown={handleTrigger}>\n        <span class={styles().actionDotGreen} />\n        Trigger\n      </button>\n    </div>\n  )\n}\n"],"mappings":";;;;;;AAQA,SAAgBK,cAAcC,OAA2B;CACvD,MAAMC,SAASN,WAAW;CAE1B,MAAMO,sBAAsB;AAE1BC,EADgBT,cAAcU,aAAa,CACnCC,oBAAoBL,MAAMF,aAAaQ,GAAG;;AAGpD,eAAA;EAAA,IAAAC,OAAAC,QAAA,EAAAC,QAAAF,KAAAG,YAAAC,QAAAF,MAAAC;AAAAD,QAAAG,cAEuDV;AAAaW,UAAAC,QAAA;GAAA,IAAAC,MADtDd,QAAQ,CAACe,YAAUC,OACdhB,QAAQ,CAACiB,cAAYC,OACrBlB,QAAQ,CAACmB;AAAcL,WAAAD,IAAAO,KAAAC,UAAAf,MAAAO,IAAAO,IAAAN,IAAA;AAAAE,YAAAH,IAAAS,KAAAD,UAAAb,OAAAK,IAAAS,IAAAN,KAAA;AAAAE,YAAAL,IAAAU,KAAAF,UAAAX,OAAAG,IAAAU,IAAAL,KAAA;AAAA,UAAAL;KAAA;GAAAO,GAAAI;GAAAF,GAAAE;GAAAD,GAAAC;GAAA,CAAA;AAAA,SAAAlB;KAAA;;AAK3CmB,eAAA,CAAA,YAAA,CAAA"}
+{"version":3,"file":"ActionButtons.js","names":["HotkeyManager","SequenceManager","useStyles","HotkeyRegistration","SequenceRegistrationView","ActionButtonsProps","registration","isSequenceRegistration","reg","Array","isArray","sequence","ActionButtons","props","styles","handleTrigger","getInstance","triggerSequence","id","triggerRegistration","_el$","_tmpl$","_el$2","firstChild","_el$3","$$mousedown","_$effect","_p$","_v$","actionsRow","_v$2","actionButton","_v$3","actionDotGreen","e","_$className","t","a","undefined","_$delegateEvents"],"sources":["../../src/components/ActionButtons.tsx"],"sourcesContent":["import { HotkeyManager, SequenceManager } from '@tanstack/hotkeys'\nimport { useStyles } from '../styles/use-styles'\nimport type {\n  HotkeyRegistration,\n  SequenceRegistrationView,\n} from '@tanstack/hotkeys'\n\ntype ActionButtonsProps = {\n  registration: HotkeyRegistration | SequenceRegistrationView\n}\n\nfunction isSequenceRegistration(\n  reg: HotkeyRegistration | SequenceRegistrationView,\n): reg is SequenceRegistrationView {\n  return 'sequence' in reg && Array.isArray(reg.sequence)\n}\n\nexport function ActionButtons(props: ActionButtonsProps) {\n  const styles = useStyles()\n\n  const handleTrigger = () => {\n    const reg = props.registration\n    if (isSequenceRegistration(reg)) {\n      SequenceManager.getInstance().triggerSequence(reg.id)\n    } else {\n      HotkeyManager.getInstance().triggerRegistration(reg.id)\n    }\n  }\n\n  return (\n    <div class={styles().actionsRow}>\n      <button class={styles().actionButton} onMouseDown={handleTrigger}>\n        <span class={styles().actionDotGreen} />\n        Trigger\n      </button>\n    </div>\n  )\n}\n"],"mappings":";;;;;;AAWA,SAASO,uBACPC,KACiC;AACjC,QAAO,cAAcA,OAAOC,MAAMC,QAAQF,IAAIG,SAAS;;AAGzD,SAAgBC,cAAcC,OAA2B;CACvD,MAAMC,SAASZ,WAAW;CAE1B,MAAMa,sBAAsB;EAC1B,MAAMP,MAAMK,MAAMP;AAClB,MAAIC,uBAAuBC,IAAI,CAC7BP,iBAAgBe,aAAa,CAACC,gBAAgBT,IAAIU,GAAG;MAErDlB,eAAcgB,aAAa,CAACG,oBAAoBX,IAAIU,GAAG;;AAI3D,eAAA;EAAA,IAAAE,OAAAC,QAAA,EAAAC,QAAAF,KAAAG,YAAAC,QAAAF,MAAAC;AAAAD,QAAAG,cAEuDV;AAAaW,UAAAC,QAAA;GAAA,IAAAC,MADtDd,QAAQ,CAACe,YAAUC,OACdhB,QAAQ,CAACiB,cAAYC,OACrBlB,QAAQ,CAACmB;AAAcL,WAAAD,IAAAO,KAAAC,UAAAf,MAAAO,IAAAO,IAAAN,IAAA;AAAAE,YAAAH,IAAAS,KAAAD,UAAAb,OAAAK,IAAAS,IAAAN,KAAA;AAAAE,YAAAL,IAAAU,KAAAF,UAAAX,OAAAG,IAAAU,IAAAL,KAAA;AAAA,UAAAL;KAAA;GAAAO,GAAAI;GAAAF,GAAAE;GAAAD,GAAAC;GAAA,CAAA;AAAA,SAAAlB;KAAA;;AAK3CmB,eAAA,CAAA,YAAA,CAAA"}