@tanstack/hotkeys-devtools 1.6.0 → 1.7.0

package/dist/_trigger.js

@@ -0,0 +1,41 @@
+import { HotkeyManager } from "@tanstack/hotkeys";
+
+//#region src/_trigger.ts
+/**
+* Runs a registration's callback as if its hotkey, or a sequence's last step,
+* was pressed, and counts it like a real press. The event names the physical
+* code for physical bindings and the key otherwise.
+*
+* @returns False when no registration has the id
+*/
+function triggerRegistration(id, manager = HotkeyManager.getInstance()) {
+	const registration = manager.registrations.state.get(id);
+	if (!registration) return false;
+	const context = registration.kind === "chord" ? {
+		kind: "chord",
+		hotkey: registration.hotkey,
+		parsedChord: registration.parsedChord
+	} : {
+		kind: "sequence",
+		hotkey: registration.hotkey,
+		parsedSequence: registration.parsedSequence
+	};
+	const parsed = registration.kind === "chord" ? registration.parsedChord : registration.parsedSequence[registration.parsedSequence.length - 1];
+	const event = new KeyboardEvent(registration.options.eventType ?? "keydown", {
+		...parsed.code !== void 0 ? { code: parsed.code } : { key: parsed.key },
+		ctrlKey: parsed.ctrl,
+		shiftKey: parsed.shift,
+		altKey: parsed.alt,
+		metaKey: parsed.meta,
+		bubbles: true,
+		cancelable: true
+	});
+	registration.triggerCount++;
+	if (registration.kind === "sequence") registration.hasFired = true;
+	manager.registrations.setState((prev) => new Map(prev));
+	registration.callback(event, context);
+	return true;
+}
+
+//#endregion
+export { triggerRegistration };

package/dist/components/ActionButtons.js

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

package/dist/components/HeldKeysTopbar.js

@@ -33,7 +33,7 @@ function HeldKeysBar() {
 					},
 					children: (key) => {
 						const code = () => state.heldCodes()[key];
-						const label = () => formatForDisplay(key, {
+						const label = () => formatForDisplay({ key }, {
 							platform,
 							useSymbols: true
 						});

package/dist/core.d.ts

@@ -1,5 +1,5 @@
-import { ClassType } from "@tanstack/devtools-utils/solid";
+import { HotkeysDevtoolsCoreClass } from "./types.js";
 //#region src/core.d.ts
 export interface HotkeysDevtoolsInit {}
-export declare const HotkeysDevtoolsCore: ClassType;
+export declare const HotkeysDevtoolsCore: HotkeysDevtoolsCoreClass;
 //#endregion

package/dist/index.d.ts

@@ -1,6 +1,6 @@
+import { HotkeysDevtoolsCoreClass, HotkeysDevtoolsPanelProps, HotkeysDevtoolsTheme } from "./types.js";
 import { HotkeysDevtoolsInit } from "./core.js";
-import { ClassType } from "@tanstack/devtools-utils/solid";
 //#region src/index.d.ts
-export declare const HotkeysDevtoolsCore: ClassType;
+export declare const HotkeysDevtoolsCore: HotkeysDevtoolsCoreClass;
 //#endregion
-export type { HotkeysDevtoolsInit };
+export type { HotkeysDevtoolsCoreClass, HotkeysDevtoolsInit, HotkeysDevtoolsPanelProps, HotkeysDevtoolsTheme };

package/dist/production.d.ts

@@ -1,2 +1,3 @@
+import { HotkeysDevtoolsCoreClass, HotkeysDevtoolsPanelProps, HotkeysDevtoolsTheme } from "./types.js";
 import { HotkeysDevtoolsCore, HotkeysDevtoolsInit } from "./core.js";
-export { HotkeysDevtoolsCore, type HotkeysDevtoolsInit };
+export { HotkeysDevtoolsCore, type HotkeysDevtoolsCoreClass, type HotkeysDevtoolsInit, type HotkeysDevtoolsPanelProps, type HotkeysDevtoolsTheme };

package/dist/types.d.ts

@@ -0,0 +1,21 @@
+//#region src/types.d.ts
+/** The devtools color theme. */
+export type HotkeysDevtoolsTheme = 'light' | 'dark';
+/**
+ * Props a devtools host passes to the Hotkeys panel.
+ *
+ * These match `TanStackDevtoolsPluginProps` from `@tanstack/devtools`. They
+ * are declared here because the `@tanstack/devtools-utils` types import
+ * `@tanstack/devtools` without depending on it, so published types that use
+ * them fail to resolve.
+ */
+export interface HotkeysDevtoolsPanelProps {
+  theme: HotkeysDevtoolsTheme;
+  devtoolsOpen: boolean;
+}
+/** The class each framework panel creates and mounts the devtools with. */
+export type HotkeysDevtoolsCoreClass = new () => {
+  mount: (el: HTMLElement, props: HotkeysDevtoolsPanelProps) => Promise<void>;
+  unmount: () => void;
+};
+//#endregion

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tanstack/hotkeys-devtools",
-  "version": "1.6.0",
+  "version": "1.7.0",
   "description": "Devtools for TanStack Hotkeys",
   "author": "Tanner Linsley",
   "license": "MIT",
@@ -36,11 +36,11 @@
     "dist"
   ],
   "peerDependencies": {
-    "@tanstack/hotkeys": "0.18.0"
+    "@tanstack/hotkeys": "0.20.0"
   },
   "dependencies": {
-    "@tanstack/devtools-ui": "^0.7.1",
-    "@tanstack/devtools-utils": "^0.7.0",
+    "@tanstack/devtools-ui": "^0.7.2",
+    "@tanstack/devtools-utils": "^0.7.2",
     "clsx": "^2.1.1",
     "goober": "^2.1.19",
     "match-sorter": "^8.3.0",