@tanstack/devtools-utils 0.2.3 → 0.3.0

package/dist/preact/esm/panel.js

@@ -5,6 +5,7 @@ function createPreactPanel(CoreClass) {
     const devToolRef = useRef(null);
     const devtools = useRef(null);
     useEffect(() => {
+      if (devtools.current) return;
       devtools.current = new CoreClass();
       if (devToolRef.current) {
         devtools.current.mount(devToolRef.current, props?.theme ?? "dark");

package/dist/preact/esm/panel.js.map

@@ -1 +1 @@
-{"version":3,"file":"panel.js","sources":["../../../src/preact/panel.tsx"],"sourcesContent":["/** @jsxImportSource preact */\n\nimport { useEffect, useRef } from 'preact/hooks'\n\nexport interface DevtoolsPanelProps {\n  theme?: 'light' | 'dark'\n}\n\n/**\n * Creates a Preact component that dynamically imports and mounts a devtools panel. SSR friendly.\n * @param devtoolsPackageName The name of the devtools package to be imported, e.g., '@tanstack/devtools-preact'\n * @param importName The name of the export to be imported from the devtools package (e.g., 'default' or 'DevtoolsCore')\n * @returns A Preact component that mounts the devtools\n * @example\n * ```tsx\n * // if the export is default\n * const [PreactDevtoolsPanel, NoOpPreactDevtoolsPanel] = createPreactPanel('@tanstack/devtools-preact')\n * ```\n *\n * @example\n * ```tsx\n * // if the export is named differently\n * const [PreactDevtoolsPanel, NoOpPreactDevtoolsPanel] = createPreactPanel('@tanstack/devtools-preact', 'DevtoolsCore')\n * ```\n */\nexport function createPreactPanel<\n  TComponentProps extends DevtoolsPanelProps | undefined,\n  TCoreDevtoolsClass extends {\n    mount: (el: HTMLElement, theme: 'light' | 'dark') => void\n    unmount: () => void\n  },\n>(CoreClass: new () => TCoreDevtoolsClass) {\n  function Panel(props: TComponentProps) {\n    const devToolRef = useRef<HTMLDivElement>(null)\n    const devtools = useRef<TCoreDevtoolsClass | null>(null)\n    useEffect(() => {\n      devtools.current = new CoreClass()\n\n      if (devToolRef.current) {\n        devtools.current.mount(devToolRef.current, props?.theme ?? 'dark')\n      }\n\n      return () => {\n        if (devToolRef.current) {\n          devtools.current?.unmount()\n          devtools.current = null\n        }\n      }\n    }, [props?.theme])\n\n    return <div style={{ height: '100%' }} ref={devToolRef} />\n  }\n\n  function NoOpPanel(_props: TComponentProps) {\n    return <></>\n  }\n  return [Panel, NoOpPanel] as const\n}\n"],"names":[],"mappings":";;AAyBO,SAAS,kBAMd,WAAyC;AACzC,WAAS,MAAM,OAAwB;AACrC,UAAM,aAAa,OAAuB,IAAI;AAC9C,UAAM,WAAW,OAAkC,IAAI;AACvD,cAAU,MAAM;AACd,eAAS,UAAU,IAAI,UAAA;AAEvB,UAAI,WAAW,SAAS;AACtB,iBAAS,QAAQ,MAAM,WAAW,SAAS,OAAO,SAAS,MAAM;AAAA,MACnE;AAEA,aAAO,MAAM;AACX,YAAI,WAAW,SAAS;AACtB,mBAAS,SAAS,QAAA;AAClB,mBAAS,UAAU;AAAA,QACrB;AAAA,MACF;AAAA,IACF,GAAG,CAAC,OAAO,KAAK,CAAC;AAEjB,WAAO,oBAAC,SAAI,OAAO,EAAE,QAAQ,OAAA,GAAU,KAAK,YAAY;AAAA,EAC1D;AAEA,WAAS,UAAU,QAAyB;AAC1C,WAAO,oBAAA,UAAA,EAAE;AAAA,EACX;AACA,SAAO,CAAC,OAAO,SAAS;AAC1B;"}
+{"version":3,"file":"panel.js","sources":["../../../src/preact/panel.tsx"],"sourcesContent":["/** @jsxImportSource preact */\n\nimport { useEffect, useRef } from 'preact/hooks'\n\nexport interface DevtoolsPanelProps {\n  theme?: 'light' | 'dark'\n}\n\n/**\n * Creates a Preact component that dynamically imports and mounts a devtools panel. SSR friendly.\n * @param devtoolsPackageName The name of the devtools package to be imported, e.g., '@tanstack/devtools-preact'\n * @param importName The name of the export to be imported from the devtools package (e.g., 'default' or 'DevtoolsCore')\n * @returns A Preact component that mounts the devtools\n * @example\n * ```tsx\n * // if the export is default\n * const [PreactDevtoolsPanel, NoOpPreactDevtoolsPanel] = createPreactPanel('@tanstack/devtools-preact')\n * ```\n *\n * @example\n * ```tsx\n * // if the export is named differently\n * const [PreactDevtoolsPanel, NoOpPreactDevtoolsPanel] = createPreactPanel('@tanstack/devtools-preact', 'DevtoolsCore')\n * ```\n */\nexport function createPreactPanel<\n  TComponentProps extends DevtoolsPanelProps | undefined,\n  TCoreDevtoolsClass extends {\n    mount: (el: HTMLElement, theme: 'light' | 'dark') => void\n    unmount: () => void\n  },\n>(CoreClass: new () => TCoreDevtoolsClass) {\n  function Panel(props: TComponentProps) {\n    const devToolRef = useRef<HTMLDivElement>(null)\n    const devtools = useRef<TCoreDevtoolsClass | null>(null)\n    useEffect(() => {\n      if (devtools.current) return\n      devtools.current = new CoreClass()\n\n      if (devToolRef.current) {\n        devtools.current.mount(devToolRef.current, props?.theme ?? 'dark')\n      }\n\n      return () => {\n        if (devToolRef.current) {\n          devtools.current?.unmount()\n          devtools.current = null\n        }\n      }\n    }, [props?.theme])\n\n    return <div style={{ height: '100%' }} ref={devToolRef} />\n  }\n\n  function NoOpPanel(_props: TComponentProps) {\n    return <></>\n  }\n  return [Panel, NoOpPanel] as const\n}\n"],"names":[],"mappings":";;AAyBO,SAAS,kBAMd,WAAyC;AACzC,WAAS,MAAM,OAAwB;AACrC,UAAM,aAAa,OAAuB,IAAI;AAC9C,UAAM,WAAW,OAAkC,IAAI;AACvD,cAAU,MAAM;AACd,UAAI,SAAS,QAAS;AACtB,eAAS,UAAU,IAAI,UAAA;AAEvB,UAAI,WAAW,SAAS;AACtB,iBAAS,QAAQ,MAAM,WAAW,SAAS,OAAO,SAAS,MAAM;AAAA,MACnE;AAEA,aAAO,MAAM;AACX,YAAI,WAAW,SAAS;AACtB,mBAAS,SAAS,QAAA;AAClB,mBAAS,UAAU;AAAA,QACrB;AAAA,MACF;AAAA,IACF,GAAG,CAAC,OAAO,KAAK,CAAC;AAEjB,WAAO,oBAAC,SAAI,OAAO,EAAE,QAAQ,OAAA,GAAU,KAAK,YAAY;AAAA,EAC1D;AAEA,WAAS,UAAU,QAAyB;AAC1C,WAAO,oBAAA,UAAA,EAAE;AAAA,EACX;AACA,SAAO,CAAC,OAAO,SAAS;AAC1B;"}

package/dist/react/esm/panel.js

@@ -5,6 +5,7 @@ function createReactPanel(CoreClass) {
     const devToolRef = useRef(null);
     const devtools = useRef(null);
     useEffect(() => {
+      if (devtools.current) return;
       devtools.current = new CoreClass();
       if (devToolRef.current) {
         devtools.current.mount(devToolRef.current, props?.theme ?? "dark");

package/dist/react/esm/panel.js.map

@@ -1 +1 @@
-{"version":3,"file":"panel.js","sources":["../../../src/react/panel.tsx"],"sourcesContent":["import { useEffect, useRef } from 'react'\n\nexport interface DevtoolsPanelProps {\n  theme?: 'light' | 'dark'\n}\n\n/**\n * Creates a React component that dynamically imports and mounts a devtools panel. SSR friendly.\n * @param devtoolsPackageName The name of the devtools package to be imported, e.g., '@tanstack/devtools-react'\n * @param importName The name of the export to be imported from the devtools package (e.g., 'default' or 'DevtoolsCore')\n * @returns A React component that mounts the devtools\n * @example\n * ```tsx\n * // if the export is default\n * const [ReactDevtoolsPanel, NoOpReactDevtoolsPanel] = createReactPanel('@tanstack/devtools-react')\n * ```\n *\n * @example\n * ```tsx\n * // if the export is named differently\n * const [ReactDevtoolsPanel, NoOpReactDevtoolsPanel] = createReactPanel('@tanstack/devtools-react', 'DevtoolsCore')\n * ```\n */\nexport function createReactPanel<\n  TComponentProps extends DevtoolsPanelProps | undefined,\n  TCoreDevtoolsClass extends {\n    mount: (el: HTMLElement, theme: 'light' | 'dark') => void\n    unmount: () => void\n  },\n>(CoreClass: new () => TCoreDevtoolsClass) {\n  function Panel(props: TComponentProps) {\n    const devToolRef = useRef<HTMLDivElement>(null)\n    const devtools = useRef<TCoreDevtoolsClass | null>(null)\n    useEffect(() => {\n      devtools.current = new CoreClass()\n\n      if (devToolRef.current) {\n        devtools.current.mount(devToolRef.current, props?.theme ?? 'dark')\n      }\n\n      return () => {\n        if (devToolRef.current) {\n          devtools.current?.unmount()\n          devtools.current = null\n        }\n      }\n    }, [props?.theme])\n\n    return <div style={{ height: '100%' }} ref={devToolRef} />\n  }\n\n  function NoOpPanel(_props: TComponentProps) {\n    return <></>\n  }\n  return [Panel, NoOpPanel] as const\n}\n"],"names":[],"mappings":";;AAuBO,SAAS,iBAMd,WAAyC;AACzC,WAAS,MAAM,OAAwB;AACrC,UAAM,aAAa,OAAuB,IAAI;AAC9C,UAAM,WAAW,OAAkC,IAAI;AACvD,cAAU,MAAM;AACd,eAAS,UAAU,IAAI,UAAA;AAEvB,UAAI,WAAW,SAAS;AACtB,iBAAS,QAAQ,MAAM,WAAW,SAAS,OAAO,SAAS,MAAM;AAAA,MACnE;AAEA,aAAO,MAAM;AACX,YAAI,WAAW,SAAS;AACtB,mBAAS,SAAS,QAAA;AAClB,mBAAS,UAAU;AAAA,QACrB;AAAA,MACF;AAAA,IACF,GAAG,CAAC,OAAO,KAAK,CAAC;AAEjB,WAAO,oBAAC,SAAI,OAAO,EAAE,QAAQ,OAAA,GAAU,KAAK,YAAY;AAAA,EAC1D;AAEA,WAAS,UAAU,QAAyB;AAC1C,WAAO,oBAAA,UAAA,EAAE;AAAA,EACX;AACA,SAAO,CAAC,OAAO,SAAS;AAC1B;"}
+{"version":3,"file":"panel.js","sources":["../../../src/react/panel.tsx"],"sourcesContent":["import { useEffect, useRef } from 'react'\n\nexport interface DevtoolsPanelProps {\n  theme?: 'light' | 'dark'\n}\n\n/**\n * Creates a React component that dynamically imports and mounts a devtools panel. SSR friendly.\n * @param devtoolsPackageName The name of the devtools package to be imported, e.g., '@tanstack/devtools-react'\n * @param importName The name of the export to be imported from the devtools package (e.g., 'default' or 'DevtoolsCore')\n * @returns A React component that mounts the devtools\n * @example\n * ```tsx\n * // if the export is default\n * const [ReactDevtoolsPanel, NoOpReactDevtoolsPanel] = createReactPanel('@tanstack/devtools-react')\n * ```\n *\n * @example\n * ```tsx\n * // if the export is named differently\n * const [ReactDevtoolsPanel, NoOpReactDevtoolsPanel] = createReactPanel('@tanstack/devtools-react', 'DevtoolsCore')\n * ```\n */\nexport function createReactPanel<\n  TComponentProps extends DevtoolsPanelProps | undefined,\n  TCoreDevtoolsClass extends {\n    mount: (el: HTMLElement, theme: 'light' | 'dark') => void\n    unmount: () => void\n  },\n>(CoreClass: new () => TCoreDevtoolsClass) {\n  function Panel(props: TComponentProps) {\n    const devToolRef = useRef<HTMLDivElement>(null)\n    const devtools = useRef<TCoreDevtoolsClass | null>(null)\n    useEffect(() => {\n      if (devtools.current) return\n      devtools.current = new CoreClass()\n\n      if (devToolRef.current) {\n        devtools.current.mount(devToolRef.current, props?.theme ?? 'dark')\n      }\n\n      return () => {\n        if (devToolRef.current) {\n          devtools.current?.unmount()\n          devtools.current = null\n        }\n      }\n    }, [props?.theme])\n\n    return <div style={{ height: '100%' }} ref={devToolRef} />\n  }\n\n  function NoOpPanel(_props: TComponentProps) {\n    return <></>\n  }\n  return [Panel, NoOpPanel] as const\n}\n"],"names":[],"mappings":";;AAuBO,SAAS,iBAMd,WAAyC;AACzC,WAAS,MAAM,OAAwB;AACrC,UAAM,aAAa,OAAuB,IAAI;AAC9C,UAAM,WAAW,OAAkC,IAAI;AACvD,cAAU,MAAM;AACd,UAAI,SAAS,QAAS;AACtB,eAAS,UAAU,IAAI,UAAA;AAEvB,UAAI,WAAW,SAAS;AACtB,iBAAS,QAAQ,MAAM,WAAW,SAAS,OAAO,SAAS,MAAM;AAAA,MACnE;AAEA,aAAO,MAAM;AACX,YAAI,WAAW,SAAS;AACtB,mBAAS,SAAS,QAAA;AAClB,mBAAS,UAAU;AAAA,QACrB;AAAA,MACF;AAAA,IACF,GAAG,CAAC,OAAO,KAAK,CAAC;AAEjB,WAAO,oBAAC,SAAI,OAAO,EAAE,QAAQ,OAAA,GAAU,KAAK,YAAY;AAAA,EAC1D;AAEA,WAAS,UAAU,QAAyB;AAC1C,WAAO,oBAAA,UAAA,EAAE;AAAA,EACX;AACA,SAAO,CAAC,OAAO,SAAS;AAC1B;"}

package/dist/vue/esm/index.d.ts

@@ -0,0 +1,2 @@
+export * from './panel.js';
+export * from './plugin.js';

package/dist/vue/esm/index.js

@@ -0,0 +1,7 @@
+import { createVuePanel } from "./panel.js";
+import { createVuePlugin } from "./plugin.js";
+export {
+  createVuePanel,
+  createVuePlugin
+};
+//# sourceMappingURL=index.js.map

package/dist/vue/esm/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;"}

package/dist/vue/esm/panel.d.ts

@@ -0,0 +1,14 @@
+import { DefineComponent } from 'vue';
+export interface DevtoolsPanelProps {
+    theme?: 'dark' | 'light' | 'system';
+}
+export declare function createVuePanel<TComponentProps extends DevtoolsPanelProps, TCoreDevtoolsClass extends {
+    mount: (el: HTMLElement, theme?: DevtoolsPanelProps['theme']) => void;
+    unmount: () => void;
+}>(CoreClass: new (props: TComponentProps) => TCoreDevtoolsClass): [DefineComponent<{
+    theme?: DevtoolsPanelProps["theme"];
+    devtoolsProps: TComponentProps;
+}>, DefineComponent<{
+    theme?: DevtoolsPanelProps["theme"];
+    devtoolsProps: TComponentProps;
+}>];

package/dist/vue/esm/panel.js

@@ -0,0 +1,47 @@
+import { defineComponent, ref, onMounted, onUnmounted, h } from "vue";
+function createVuePanel(CoreClass) {
+  const props = {
+    theme: {
+      type: String
+    },
+    devtoolsProps: {
+      type: Object
+    }
+  };
+  const Panel = defineComponent({
+    props,
+    setup(config) {
+      const devToolRef = ref(null);
+      const devtools = ref(null);
+      onMounted(() => {
+        const instance = new CoreClass(config.devtoolsProps);
+        devtools.value = instance;
+        if (devToolRef.value) {
+          instance.mount(devToolRef.value, config.theme);
+        }
+      });
+      onUnmounted(() => {
+        if (devToolRef.value && devtools.value) {
+          devtools.value.unmount();
+        }
+      });
+      return () => {
+        return h("div", {
+          style: { height: "100%" },
+          ref: devToolRef
+        });
+      };
+    }
+  });
+  const NoOpPanel = defineComponent({
+    props,
+    setup() {
+      return () => null;
+    }
+  });
+  return [Panel, NoOpPanel];
+}
+export {
+  createVuePanel
+};
+//# sourceMappingURL=panel.js.map

package/dist/vue/esm/panel.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"panel.js","sources":["../../../src/vue/panel.ts"],"sourcesContent":["import { defineComponent, h, onMounted, onUnmounted, ref } from 'vue'\nimport type { DefineComponent } from 'vue'\n\nexport interface DevtoolsPanelProps {\n  theme?: 'dark' | 'light' | 'system'\n}\n\nexport function createVuePanel<\n  TComponentProps extends DevtoolsPanelProps,\n  TCoreDevtoolsClass extends {\n    mount: (el: HTMLElement, theme?: DevtoolsPanelProps['theme']) => void\n    unmount: () => void\n  },\n>(CoreClass: new (props: TComponentProps) => TCoreDevtoolsClass) {\n  const props = {\n    theme: {\n      type: String as () => DevtoolsPanelProps['theme'],\n    },\n    devtoolsProps: {\n      type: Object as () => TComponentProps,\n    },\n  }\n\n  const Panel = defineComponent({\n    props,\n    setup(config) {\n      const devToolRef = ref<HTMLElement | null>(null)\n      const devtools = ref<TCoreDevtoolsClass | null>(null)\n\n      onMounted(() => {\n        const instance = new CoreClass(config.devtoolsProps as TComponentProps)\n        devtools.value = instance\n\n        if (devToolRef.value) {\n          instance.mount(devToolRef.value, config.theme)\n        }\n      })\n\n      onUnmounted(() => {\n        if (devToolRef.value && devtools.value) {\n          devtools.value.unmount()\n        }\n      })\n\n      return () => {\n        return h('div', {\n          style: { height: '100%' },\n          ref: devToolRef,\n        })\n      }\n    },\n  })\n\n  const NoOpPanel = defineComponent({\n    props,\n    setup() {\n      return () => null\n    },\n  })\n\n  return [Panel, NoOpPanel] as unknown as [\n    DefineComponent<{\n      theme?: DevtoolsPanelProps['theme']\n      devtoolsProps: TComponentProps\n    }>,\n    DefineComponent<{\n      theme?: DevtoolsPanelProps['theme']\n      devtoolsProps: TComponentProps\n    }>,\n  ]\n}\n"],"names":[],"mappings":";AAOO,SAAS,eAMd,WAA+D;AAC/D,QAAM,QAAQ;AAAA,IACZ,OAAO;AAAA,MACL,MAAM;AAAA,IAAA;AAAA,IAER,eAAe;AAAA,MACb,MAAM;AAAA,IAAA;AAAA,EACR;AAGF,QAAM,QAAQ,gBAAgB;AAAA,IAC5B;AAAA,IACA,MAAM,QAAQ;AACZ,YAAM,aAAa,IAAwB,IAAI;AAC/C,YAAM,WAAW,IAA+B,IAAI;AAEpD,gBAAU,MAAM;AACd,cAAM,WAAW,IAAI,UAAU,OAAO,aAAgC;AACtE,iBAAS,QAAQ;AAEjB,YAAI,WAAW,OAAO;AACpB,mBAAS,MAAM,WAAW,OAAO,OAAO,KAAK;AAAA,QAC/C;AAAA,MACF,CAAC;AAED,kBAAY,MAAM;AAChB,YAAI,WAAW,SAAS,SAAS,OAAO;AACtC,mBAAS,MAAM,QAAA;AAAA,QACjB;AAAA,MACF,CAAC;AAED,aAAO,MAAM;AACX,eAAO,EAAE,OAAO;AAAA,UACd,OAAO,EAAE,QAAQ,OAAA;AAAA,UACjB,KAAK;AAAA,QAAA,CACN;AAAA,MACH;AAAA,IACF;AAAA,EAAA,CACD;AAED,QAAM,YAAY,gBAAgB;AAAA,IAChC;AAAA,IACA,QAAQ;AACN,aAAO,MAAM;AAAA,IACf;AAAA,EAAA,CACD;AAED,SAAO,CAAC,OAAO,SAAS;AAU1B;"}

package/dist/vue/esm/plugin.d.ts

@@ -0,0 +1,15 @@
+import { DefineComponent } from 'vue';
+export declare function createVuePlugin<TComponentProps extends Record<string, any>>(name: string, component: DefineComponent<TComponentProps, {}, unknown>): readonly [(props: TComponentProps) => {
+    name: string;
+    component: DefineComponent<TComponentProps, {}, unknown>;
+    props: TComponentProps;
+}, (props: TComponentProps) => {
+    name: string;
+    component: {
+        new (): {
+            $props: import('vue').VNodeProps;
+        };
+        __isFragment: true;
+    };
+    props: TComponentProps;
+}];

package/dist/vue/esm/plugin.js

@@ -0,0 +1,22 @@
+import { Fragment } from "vue";
+function createVuePlugin(name, component) {
+  function Plugin(props) {
+    return {
+      name,
+      component,
+      props
+    };
+  }
+  function NoOpPlugin(props) {
+    return {
+      name,
+      component: Fragment,
+      props
+    };
+  }
+  return [Plugin, NoOpPlugin];
+}
+export {
+  createVuePlugin
+};
+//# sourceMappingURL=plugin.js.map

package/dist/vue/esm/plugin.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"plugin.js","sources":["../../../src/vue/plugin.ts"],"sourcesContent":["import { Fragment } from 'vue'\nimport type { DefineComponent } from 'vue'\n\nexport function createVuePlugin<TComponentProps extends Record<string, any>>(\n  name: string,\n  component: DefineComponent<TComponentProps, {}, unknown>,\n) {\n  function Plugin(props: TComponentProps) {\n    return {\n      name,\n      component,\n      props,\n    }\n  }\n  function NoOpPlugin(props: TComponentProps) {\n    return {\n      name,\n      component: Fragment,\n      props,\n    }\n  }\n  return [Plugin, NoOpPlugin] as const\n}\n"],"names":[],"mappings":";AAGO,SAAS,gBACd,MACA,WACA;AACA,WAAS,OAAO,OAAwB;AACtC,WAAO;AAAA,MACL;AAAA,MACA;AAAA,MACA;AAAA,IAAA;AAAA,EAEJ;AACA,WAAS,WAAW,OAAwB;AAC1C,WAAO;AAAA,MACL;AAAA,MACA,WAAW;AAAA,MACX;AAAA,IAAA;AAAA,EAEJ;AACA,SAAO,CAAC,QAAQ,UAAU;AAC5B;"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tanstack/devtools-utils",
-  "version": "0.2.3",
+  "version": "0.3.0",
   "description": "TanStack Devtools utilities for creating your own devtools.",
   "author": "Tanner Linsley",
   "license": "MIT",
@@ -47,6 +47,12 @@
       "types": "./dist/solid/esm/index.d.ts",
       "import": "./dist/solid/esm/index.js"
     },
+    "./vue": {
+      "import": {
+        "types": "./dist/vue/esm/index.d.ts",
+        "default": "./dist/vue/esm/index.js"
+      }
+    },
     "./package.json": "./package.json"
   },
   "sideEffects": false,
@@ -97,6 +103,6 @@
     "test:lib:dev": "pnpm test:lib --watch",
     "test:types": "tsc",
     "test:build": "publint --strict",
-    "build": "vite build && vite build --config vite.config.preact.ts && tsup "
+    "build": "vite build && vite build --config vite.config.preact.ts && vite build --config vite.config.vue.ts && tsup "
   }
 }

package/src/preact/panel.tsx

@@ -34,6 +34,7 @@ export function createPreactPanel<
     const devToolRef = useRef<HTMLDivElement>(null)
     const devtools = useRef<TCoreDevtoolsClass | null>(null)
     useEffect(() => {
+      if (devtools.current) return
       devtools.current = new CoreClass()
 
       if (devToolRef.current) {

package/src/react/panel.tsx

@@ -32,6 +32,7 @@ export function createReactPanel<
     const devToolRef = useRef<HTMLDivElement>(null)
     const devtools = useRef<TCoreDevtoolsClass | null>(null)
     useEffect(() => {
+      if (devtools.current) return
       devtools.current = new CoreClass()
 
       if (devToolRef.current) {