@tanstack/hotkeys-devtools 0.4.0 → 0.4.2

package/README.md

@@ -44,7 +44,7 @@ Type-safe keyboard shortcuts for the web. Template-string bindings, parsed objec
 - Type-safe bindings — template strings (`Mod+Shift+S`, `Escape`) or parsed objects for full control
 - Flexible options — `keydown`/`keyup`, `preventDefault`, `stopPropagation`, conditional enabled, `requireReset`
 - Cross-platform Mod — maps to Cmd on macOS and Ctrl on Windows/Linux
-- Batteries included — validation + matching, sequences (Vim-style), key-state tracking, recorder UI helpers, React hooks, and devtools (in progress)
+- Batteries included — validation + matching, sequences (Vim-style), key-state tracking, recorder UI helpers, framework adapters, and devtools
 
 ### <a href="https://tanstack.com/hotkeys">Read the docs →</a>
 
@@ -57,8 +57,8 @@ Type-safe keyboard shortcuts for the web. Template-string bindings, parsed objec
 > - [**Preact Hotkeys**](https://tanstack.com/hotkeys/latest/docs/framework/preact/preact-hotkeys)
 > - [**Solid Hotkeys**](https://tanstack.com/hotkeys/latest/docs/framework/solid/reference)
 > - [**Angular Hotkeys**](https://tanstack.com/hotkeys/latest/docs/framework/angular/reference)
-> - Svelte Hotkeys – needs a contributor!
-> - Vue Hotkeys – needs a contributor!
+> - [**Vue Hotkeys**](https://tanstack.com/hotkeys/latest/docs/framework/vue/reference)
+> - [**Svelte Hotkeys**](https://tanstack.com/hotkeys/latest/docs/framework/svelte/reference)
 
 ## Get Involved
 

package/dist/components/Shell.js

@@ -4,8 +4,8 @@ import { HeldKeysBar } from "./HeldKeysTopbar.js";
 import { HotkeyList } from "./HotkeyList.js";
 import { DetailsPanel } from "./DetailsPanel.js";
 import { className, createComponent, delegateEvents, effect, insert, setStyleProperty, template } from "solid-js/web";
-import { createMemo, createSignal, onCleanup, onMount } from "solid-js";
 import { Header, HeaderLogo, MainPanel } from "@tanstack/devtools-ui";
+import { createMemo, createSignal, onCleanup, onMount } from "solid-js";
 
 //#region src/components/Shell.tsx
 var _tmpl$ = /* @__PURE__ */ template(`<div><div><div style=min-width:150px;max-width:800px></div><div></div><div style=flex:1><div>Details`);

package/dist/components/index.js

@@ -0,0 +1,22 @@
+import { HotkeysContextProvider } from "../HotkeysContextProvider.js";
+import { Shell } from "./Shell.js";
+import { createComponent } from "solid-js/web";
+import { ThemeContextProvider } from "@tanstack/devtools-ui";
+
+//#region src/components/index.tsx
+function HotkeysDevtools(props) {
+	return createComponent(ThemeContextProvider, {
+		get theme() {
+			return props.theme;
+		},
+		get children() {
+			return createComponent(HotkeysContextProvider, { get children() {
+				return createComponent(Shell, {});
+			} });
+		}
+	});
+}
+
+//#endregion
+export { HotkeysDevtools as default };
+//# sourceMappingURL=index.js.map

package/dist/components/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":["ThemeContextProvider","HotkeysContextProvider","Shell","TanStackDevtoolsTheme","DevtoolsProps","theme","HotkeysDevtools","props","_$createComponent","children"],"sources":["../../src/components/index.tsx"],"sourcesContent":["import { ThemeContextProvider } from '@tanstack/devtools-ui'\nimport { HotkeysContextProvider } from '../HotkeysContextProvider'\nimport { Shell } from './Shell'\n\nimport type { TanStackDevtoolsTheme } from '@tanstack/devtools-ui'\n\ninterface DevtoolsProps {\n  theme: TanStackDevtoolsTheme\n}\n\nexport default function HotkeysDevtools(props: DevtoolsProps) {\n  return (\n    <ThemeContextProvider theme={props.theme}>\n      <HotkeysContextProvider>\n        <Shell />\n      </HotkeysContextProvider>\n    </ThemeContextProvider>\n  )\n}\n"],"mappings":";;;;;;AAUA,SAAwBM,gBAAgBC,OAAsB;AAC5D,QAAAC,gBACGR,sBAAoB;EAAA,IAACK,QAAK;AAAA,UAAEE,MAAMF;;EAAK,IAAAI,WAAA;AAAA,UAAAD,gBACrCP,wBAAsB,EAAA,IAAAQ,WAAA;AAAA,WAAAD,gBACpBN,OAAK,EAAA,CAAA;MAAA,CAAA;;EAAA,CAAA"}

package/dist/core.d.ts

@@ -5,10 +5,10 @@ declare const HotkeysDevtoolsCore: new () => {
     "__#private@#isMounting": boolean;
     "__#private@#abortMount": boolean;
     "__#private@#dispose"?: () => void;
-    mount<T extends HTMLElement>(el: T, theme: "light" | "dark"): Promise<void>;
+    mount<T extends HTMLElement>(el: T, props: TanStackDevtoolsPluginProps): Promise<void>;
     unmount(): void;
   }, HotkeysDevtoolsCoreNoOp: new () => {
-    mount<T extends HTMLElement>(_el: T, _theme: "light" | "dark"): Promise<void>;
+    mount<T extends HTMLElement>(_el: T, _props: TanStackDevtoolsPluginProps): Promise<void>;
     unmount(): void;
     "__#private@#isMounted": boolean;
     "__#private@#isMounting": boolean;

package/dist/core.js

@@ -1,7 +1,7 @@
 import { constructCoreClass } from "@tanstack/devtools-utils/solid";
 
 //#region src/core.tsx
-const loadComponent = () => import("./HotkeysDevtools.js");
+const loadComponent = () => import("./components/index.js");
 const [HotkeysDevtoolsCore, HotkeysDevtoolsCoreNoOp] = constructCoreClass(loadComponent);
 
 //#endregion

package/dist/core.js.map

@@ -1 +1 @@
-{"version":3,"file":"core.js","names":["constructCoreClass","loadComponent","HotkeysDevtoolsInit","HotkeysDevtoolsCore","HotkeysDevtoolsCoreNoOp"],"sources":["../src/core.tsx"],"sourcesContent":["import { constructCoreClass } from '@tanstack/devtools-utils/solid'\n\nconst loadComponent = () => import('./HotkeysDevtools')\n\nexport interface HotkeysDevtoolsInit {}\n\nconst [HotkeysDevtoolsCore, HotkeysDevtoolsCoreNoOp] =\n  constructCoreClass(loadComponent)\n\nexport { HotkeysDevtoolsCore, HotkeysDevtoolsCoreNoOp }\n"],"mappings":";;;AAEA,MAAMC,sBAAsB,OAAO;AAInC,MAAM,CAACE,qBAAqBC,2BAC1BJ,mBAAmBC,cAAc"}
+{"version":3,"file":"core.js","names":["constructCoreClass","loadComponent","HotkeysDevtoolsInit","HotkeysDevtoolsCore","HotkeysDevtoolsCoreNoOp"],"sources":["../src/core.tsx"],"sourcesContent":["import { constructCoreClass } from '@tanstack/devtools-utils/solid'\n\nconst loadComponent = () => import('./components/index')\n\nexport interface HotkeysDevtoolsInit {}\n\nconst [HotkeysDevtoolsCore, HotkeysDevtoolsCoreNoOp] =\n  constructCoreClass(loadComponent)\n\nexport { HotkeysDevtoolsCore, HotkeysDevtoolsCoreNoOp }\n"],"mappings":";;;AAEA,MAAMC,sBAAsB,OAAO;AAInC,MAAM,CAACE,qBAAqBC,2BAC1BJ,mBAAmBC,cAAc"}

package/dist/index.d.ts

@@ -6,7 +6,7 @@ declare const HotkeysDevtoolsCore: new () => {
   "__#private@#isMounting": boolean;
   "__#private@#abortMount": boolean;
   "__#private@#dispose"?: () => void;
-  mount<T extends HTMLElement>(el: T, theme: "light" | "dark"): Promise<void>;
+  mount<T extends HTMLElement>(el: T, props: TanStackDevtoolsPluginProps): Promise<void>;
   unmount(): void;
 };
 //#endregion

package/dist/styles/use-styles.js

@@ -1,6 +1,6 @@
 import { tokens } from "./tokens.js";
-import { createEffect, createSignal } from "solid-js";
 import { useTheme } from "@tanstack/devtools-ui";
+import { createEffect, createSignal } from "solid-js";
 import * as goober from "goober";
 
 //#region src/styles/use-styles.ts

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tanstack/hotkeys-devtools",
-  "version": "0.4.0",
+  "version": "0.4.2",
   "description": "Devtools for TanStack Hotkeys",
   "author": "Tanner Linsley",
   "license": "MIT",
@@ -37,11 +37,11 @@
     "src"
   ],
   "peerDependencies": {
-    "@tanstack/hotkeys": "0.4.0"
+    "@tanstack/hotkeys": "0.4.1"
   },
   "dependencies": {
-    "@tanstack/devtools-ui": "^0.5.0",
-    "@tanstack/devtools-utils": "^0.3.2",
+    "@tanstack/devtools-ui": "^0.5.1",
+    "@tanstack/devtools-utils": "^0.4.0",
     "clsx": "^2.1.1",
     "goober": "^2.1.18",
     "solid-js": "^1.9.11"

package/src/components/index.tsx

@@ -0,0 +1,19 @@
+import { ThemeContextProvider } from '@tanstack/devtools-ui'
+import { HotkeysContextProvider } from '../HotkeysContextProvider'
+import { Shell } from './Shell'
+
+import type { TanStackDevtoolsTheme } from '@tanstack/devtools-ui'
+
+interface DevtoolsProps {
+  theme: TanStackDevtoolsTheme
+}
+
+export default function HotkeysDevtools(props: DevtoolsProps) {
+  return (
+    <ThemeContextProvider theme={props.theme}>
+      <HotkeysContextProvider>
+        <Shell />
+      </HotkeysContextProvider>
+    </ThemeContextProvider>
+  )
+}

package/src/core.tsx

@@ -1,6 +1,6 @@
 import { constructCoreClass } from '@tanstack/devtools-utils/solid'
 
-const loadComponent = () => import('./HotkeysDevtools')
+const loadComponent = () => import('./components/index')
 
 export interface HotkeysDevtoolsInit {}
 

package/dist/HotkeysDevtools.js

@@ -1,14 +0,0 @@
-import { HotkeysContextProvider } from "./HotkeysContextProvider.js";
-import { Shell } from "./components/Shell.js";
-import { createComponent } from "solid-js/web";
-
-//#region src/HotkeysDevtools.tsx
-function HotkeysDevtools() {
-	return createComponent(HotkeysContextProvider, { get children() {
-		return createComponent(Shell, {});
-	} });
-}
-
-//#endregion
-export { HotkeysDevtools as default };
-//# sourceMappingURL=HotkeysDevtools.js.map

package/dist/HotkeysDevtools.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"HotkeysDevtools.js","names":["HotkeysContextProvider","Shell","HotkeysDevtools","_$createComponent","children"],"sources":["../src/HotkeysDevtools.tsx"],"sourcesContent":["import { HotkeysContextProvider } from './HotkeysContextProvider'\nimport { Shell } from './components/Shell'\n\nexport default function HotkeysDevtools() {\n  return (\n    <HotkeysContextProvider>\n      <Shell />\n    </HotkeysContextProvider>\n  )\n}\n"],"mappings":";;;;;AAGA,SAAwBE,kBAAkB;AACxC,QAAAC,gBACGH,wBAAsB,EAAA,IAAAI,WAAA;AAAA,SAAAD,gBACpBF,OAAK,EAAA,CAAA;IAAA,CAAA"}

package/src/HotkeysDevtools.tsx

@@ -1,10 +0,0 @@
-import { HotkeysContextProvider } from './HotkeysContextProvider'
-import { Shell } from './components/Shell'
-
-export default function HotkeysDevtools() {
-  return (
-    <HotkeysContextProvider>
-      <Shell />
-    </HotkeysContextProvider>
-  )
-}