@tanstack/vue-hotkeys-devtools 0.11.1 → 0.12.0

package/dist/VueHotkeysDevtools.d.ts

@@ -1,12 +1,16 @@
-import { DevtoolsPanelProps } from "@tanstack/devtools-utils/vue";
-//#region src/VueHotkeysDevtools.d.ts
-export interface HotkeysDevtoolsVueInit extends DevtoolsPanelProps {}
-declare const HotkeysDevtoolsPanel: import("vue").DefineComponent<{
-  theme?: DevtoolsPanelProps["theme"];
-  devtoolsProps: DevtoolsPanelProps;
-}>, HotkeysDevtoolsPanelNoOp: import("vue").DefineComponent<{
-  theme?: DevtoolsPanelProps["theme"];
-  devtoolsProps: DevtoolsPanelProps;
-}>;
+import { DefineComponent } from "vue";
+import { HotkeysDevtoolsPanelProps, HotkeysDevtoolsTheme } from "@tanstack/hotkeys-devtools";
+declare namespace VueHotkeysDevtools_d_exports {
+  export { HotkeysDevtoolsPanel, HotkeysDevtoolsPanelNoOp, HotkeysDevtoolsVueInit, HotkeysDevtoolsVuePanelProps };
+}
+export interface HotkeysDevtoolsVueInit extends Partial<HotkeysDevtoolsPanelProps> {}
+type ThemeProp = HotkeysDevtoolsTheme | Partial<HotkeysDevtoolsPanelProps>;
+/** Props of `HotkeysDevtoolsPanel`. */
+export interface HotkeysDevtoolsVuePanelProps {
+  theme?: ThemeProp;
+  devtoolsOpen?: boolean;
+}
+export declare const HotkeysDevtoolsPanel: DefineComponent<HotkeysDevtoolsVuePanelProps>;
+export declare const HotkeysDevtoolsPanelNoOp: DefineComponent<HotkeysDevtoolsVuePanelProps>;
 //#endregion
-export { HotkeysDevtoolsPanel };
+export { VueHotkeysDevtools_d_exports };

package/dist/VueHotkeysDevtools.js

@@ -1,8 +1,59 @@
-import { createVuePanel } from "@tanstack/devtools-utils/vue";
+import { defineComponent, h, onMounted, onUnmounted, ref, watch } from "vue";
 import { HotkeysDevtoolsCore } from "@tanstack/hotkeys-devtools";
 
-//#region src/VueHotkeysDevtools.tsx
-const [HotkeysDevtoolsPanel, HotkeysDevtoolsPanelNoOp] = createVuePanel(HotkeysDevtoolsCore);
+//#region src/VueHotkeysDevtools.ts
+function resolveProps(props) {
+	const dock = typeof props.theme === "object" ? props.theme : void 0;
+	return {
+		theme: (dock ? dock.theme : props.theme) ?? "dark",
+		devtoolsOpen: dock?.devtoolsOpen ?? props.devtoolsOpen ?? true
+	};
+}
+function createPanel(Core) {
+	return defineComponent({
+		name: "HotkeysDevtoolsPanel",
+		inheritAttrs: false,
+		props: {
+			theme: {
+				type: [String, Object],
+				default: void 0
+			},
+			devtoolsOpen: {
+				type: Boolean,
+				default: void 0
+			}
+		},
+		setup(props) {
+			if (!Core) return () => null;
+			const el = ref(null);
+			let devtools = null;
+			const mount = () => {
+				if (!el.value) return;
+				devtools = new Core();
+				devtools.mount(el.value, resolveProps(props));
+			};
+			const unmount = () => {
+				devtools?.unmount();
+				devtools = null;
+			};
+			onMounted(mount);
+			watch(() => {
+				const { theme, devtoolsOpen } = resolveProps(props);
+				return `${theme}:${devtoolsOpen}`;
+			}, () => {
+				unmount();
+				mount();
+			});
+			onUnmounted(unmount);
+			return () => h("div", {
+				ref: el,
+				style: { height: "100%" }
+			});
+		}
+	});
+}
+const HotkeysDevtoolsPanel = createPanel(HotkeysDevtoolsCore);
+const HotkeysDevtoolsPanelNoOp = createPanel(null);
 
 //#endregion
 export { HotkeysDevtoolsPanel, HotkeysDevtoolsPanelNoOp };

package/dist/_virtual/_rolldown/runtime.js

@@ -0,0 +1,18 @@
+//#region \0rolldown/runtime.js
+var __defProp = Object.defineProperty;
+var __exportAll = (all, no_symbols) => {
+	let target = {};
+	for (var name in all) {
+		__defProp(target, name, {
+			get: all[name],
+			enumerable: true
+		});
+	}
+	if (!no_symbols) {
+		__defProp(target, Symbol.toStringTag, { value: "Module" });
+	}
+	return target;
+};
+
+//#endregion
+export { __exportAll };

package/dist/index.d.ts

@@ -1,37 +1,7 @@
-import { HotkeysDevtoolsVueInit } from "./VueHotkeysDevtools.js";
+import { HotkeysDevtoolsPanel as HotkeysDevtoolsPanel$1, HotkeysDevtoolsVueInit, VueHotkeysDevtools_d_exports } from "./VueHotkeysDevtools.js";
+import { HotkeysDevtoolsVuePlugin, hotkeysDevtoolsPlugin as hotkeysDevtoolsPlugin$1, plugin_d_exports } from "./plugin.js";
 //#region src/index.d.ts
-export declare const HotkeysDevtoolsPanel: import("vue").DefineComponent<{
-  theme?: import("@tanstack/devtools-utils/vue").DevtoolsPanelProps["theme"];
-  devtoolsProps: import("@tanstack/devtools-utils/vue").DevtoolsPanelProps;
-}>;
-export declare const hotkeysDevtoolsPlugin: ((props: {
-  theme?: import("@tanstack/devtools-utils/vue").DevtoolsPanelProps["theme"];
-  devtoolsProps: import("@tanstack/devtools-utils/vue").DevtoolsPanelProps;
-}) => {
-  name: string;
-  component: import("vue").DefineComponent<{
-    theme?: import("@tanstack/devtools-utils/vue").DevtoolsPanelProps["theme"];
-    devtoolsProps: import("@tanstack/devtools-utils/vue").DevtoolsPanelProps;
-  }, {}, unknown>;
-  props: {
-    theme?: import("@tanstack/devtools-utils/vue").DevtoolsPanelProps["theme"];
-    devtoolsProps: import("@tanstack/devtools-utils/vue").DevtoolsPanelProps;
-  };
-}) | ((props: {
-  theme?: import("@tanstack/devtools-utils/vue").DevtoolsPanelProps["theme"];
-  devtoolsProps: import("@tanstack/devtools-utils/vue").DevtoolsPanelProps;
-}) => {
-  name: string;
-  component: {
-    new (): {
-      $props: import("vue").VNodeProps;
-    };
-    __isFragment: true;
-  };
-  props: {
-    theme?: import("@tanstack/devtools-utils/vue").DevtoolsPanelProps["theme"];
-    devtoolsProps: import("@tanstack/devtools-utils/vue").DevtoolsPanelProps;
-  };
-});
+export declare const HotkeysDevtoolsPanel: typeof HotkeysDevtoolsPanel$1;
+export declare const hotkeysDevtoolsPlugin: typeof hotkeysDevtoolsPlugin$1;
 //#endregion
-export type { HotkeysDevtoolsVueInit };
+export type { HotkeysDevtoolsVueInit, HotkeysDevtoolsVuePlugin };

package/dist/plugin.d.ts

@@ -1,32 +1,14 @@
-//#region src/plugin.d.ts
-declare const hotkeysDevtoolsPlugin: (props: {
-  theme?: import("@tanstack/devtools-utils/vue").DevtoolsPanelProps["theme"];
-  devtoolsProps: import("@tanstack/devtools-utils/vue").DevtoolsPanelProps;
-}) => {
+import { HotkeysDevtoolsPanel, HotkeysDevtoolsVueInit } from "./VueHotkeysDevtools.js";
+declare namespace plugin_d_exports {
+  export { HotkeysDevtoolsVuePlugin, hotkeysDevtoolsNoOpPlugin, hotkeysDevtoolsPlugin };
+}
+/** A plugin for `TanStackDevtools` from `@tanstack/vue-devtools`. */
+export interface HotkeysDevtoolsVuePlugin {
   name: string;
-  component: import("vue").DefineComponent<{
-    theme?: import("@tanstack/devtools-utils/vue").DevtoolsPanelProps["theme"];
-    devtoolsProps: import("@tanstack/devtools-utils/vue").DevtoolsPanelProps;
-  }, {}, unknown>;
-  props: {
-    theme?: import("@tanstack/devtools-utils/vue").DevtoolsPanelProps["theme"];
-    devtoolsProps: import("@tanstack/devtools-utils/vue").DevtoolsPanelProps;
-  };
-}, hotkeysDevtoolsNoOpPlugin: (props: {
-  theme?: import("@tanstack/devtools-utils/vue").DevtoolsPanelProps["theme"];
-  devtoolsProps: import("@tanstack/devtools-utils/vue").DevtoolsPanelProps;
-}) => {
-  name: string;
-  component: {
-    new (): {
-      $props: import("vue").VNodeProps;
-    };
-    __isFragment: true;
-  };
-  props: {
-    theme?: import("@tanstack/devtools-utils/vue").DevtoolsPanelProps["theme"];
-    devtoolsProps: import("@tanstack/devtools-utils/vue").DevtoolsPanelProps;
-  };
-};
+  component: typeof HotkeysDevtoolsPanel;
+  props?: HotkeysDevtoolsVueInit;
+}
+export declare function hotkeysDevtoolsPlugin(props?: HotkeysDevtoolsVueInit): HotkeysDevtoolsVuePlugin;
+export declare function hotkeysDevtoolsNoOpPlugin(props?: HotkeysDevtoolsVueInit): HotkeysDevtoolsVuePlugin;
 //#endregion
-export { hotkeysDevtoolsPlugin };
+export { plugin_d_exports };

package/dist/plugin.js

@@ -1,8 +1,21 @@
-import { HotkeysDevtoolsPanel } from "./VueHotkeysDevtools.js";
-import { createVuePlugin } from "@tanstack/devtools-utils/vue";
+import { HotkeysDevtoolsPanel, HotkeysDevtoolsPanelNoOp } from "./VueHotkeysDevtools.js";
 
 //#region src/plugin.ts
-const [hotkeysDevtoolsPlugin, hotkeysDevtoolsNoOpPlugin] = createVuePlugin("TanStack Hotkeys", HotkeysDevtoolsPanel);
+const name = "TanStack Hotkeys";
+function hotkeysDevtoolsPlugin(props) {
+	return {
+		name,
+		component: HotkeysDevtoolsPanel,
+		props
+	};
+}
+function hotkeysDevtoolsNoOpPlugin(props) {
+	return {
+		name,
+		component: HotkeysDevtoolsPanelNoOp,
+		props
+	};
+}
 
 //#endregion
 export { hotkeysDevtoolsNoOpPlugin, hotkeysDevtoolsPlugin };

package/dist/production.d.ts

@@ -1,3 +1,3 @@
 import { HotkeysDevtoolsPanel, HotkeysDevtoolsVueInit } from "./VueHotkeysDevtools.js";
-import { hotkeysDevtoolsPlugin } from "./plugin.js";
-export { HotkeysDevtoolsPanel, type HotkeysDevtoolsVueInit, hotkeysDevtoolsPlugin };
+import { HotkeysDevtoolsVuePlugin, hotkeysDevtoolsPlugin } from "./plugin.js";
+export { HotkeysDevtoolsPanel, type HotkeysDevtoolsVueInit, type HotkeysDevtoolsVuePlugin, hotkeysDevtoolsPlugin };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tanstack/vue-hotkeys-devtools",
-  "version": "0.11.1",
+  "version": "0.12.0",
   "description": "Vue devtools for TanStack Hotkeys",
   "author": "Tanner Linsley",
   "license": "MIT",
@@ -38,11 +38,16 @@
     "dist"
   ],
   "peerDependencies": {
-    "vue": ">=3.0.0"
+    "@tanstack/vue-devtools": ">=0.2.28",
+    "vue": ">=3.3.0"
+  },
+  "peerDependenciesMeta": {
+    "@tanstack/vue-devtools": {
+      "optional": true
+    }
   },
   "dependencies": {
-    "@tanstack/devtools-utils": "^0.7.0",
-    "@tanstack/hotkeys-devtools": "1.6.0"
+    "@tanstack/hotkeys-devtools": "1.7.0"
   },
   "devDependencies": {
     "@vitejs/plugin-vue": "^6.0.9",