@tanstack/devtools-utils 0.3.4 → 0.4.0

package/dist/solid/esm/index.js

@@ -1,4 +1,4 @@
-export { __mountComponent } from './chunk/ZXPCWXRH.js';
+export { __mountComponent } from './chunk/7TSS377A.js';
 import { use, createComponent, template } from 'solid-js/web';
 import { createSignal, onMount, onCleanup } from 'solid-js';
 
@@ -11,19 +11,19 @@ function constructCoreClass(importFn) {
     #dispose;
     constructor() {
     }
-    async mount(el, theme) {
+    async mount(el, props) {
       if (this.#isMounted || this.#isMounting) {
         throw new Error("Devtools is already mounted");
       }
       this.#isMounting = true;
       this.#abortMount = false;
       try {
-        const { __mountComponent: __mountComponent2 } = await import('./class-mount-impl/ZAIAXV4M.js');
+        const { __mountComponent: __mountComponent2 } = await import('./class-mount-impl/VN5QTPB3.js');
         if (this.#abortMount) {
           this.#isMounting = false;
           return;
         }
-        this.#dispose = __mountComponent2(el, theme, importFn);
+        this.#dispose = __mountComponent2(el, props, importFn);
         this.#isMounted = true;
         this.#isMounting = false;
       } catch (err) {
@@ -48,7 +48,7 @@ function constructCoreClass(importFn) {
     constructor() {
       super();
     }
-    async mount(_el, _theme) {
+    async mount(_el, _props) {
     }
     unmount() {
     }
@@ -62,7 +62,7 @@ function createSolidPanel(CoreClass) {
     const [devtools] = createSignal(new CoreClass());
     onMount(() => {
       if (devToolRef) {
-        devtools().mount(devToolRef, props?.theme ?? "dark");
+        devtools().mount(devToolRef, props);
       }
       onCleanup(() => {
         devtools().unmount();
@@ -87,17 +87,15 @@ function createSolidPlugin({
   function Plugin() {
     return {
       ...config,
-      render: (_el, theme) => {
-        return createComponent(Component, {
-          theme
-        });
+      render: (_el, props) => {
+        return createComponent(Component, props);
       }
     };
   }
   function NoOpPlugin() {
     return {
       ...config,
-      render: (_el, _theme) => []
+      render: (_el, _props) => []
     };
   }
   return [Plugin, NoOpPlugin];

package/dist/solid/esm/server.js

@@ -1,4 +1,4 @@
-export { __mountComponent } from './chunk/UX5ZZ4MG.js';
+export { __mountComponent } from './chunk/WUD4VD3N.js';
 import { ssr, ssrStyleProperty, createComponent } from 'solid-js/web';
 import { createSignal, onMount, onCleanup } from 'solid-js';
 
@@ -11,19 +11,19 @@ function constructCoreClass(importFn) {
     #dispose;
     constructor() {
     }
-    async mount(el, theme) {
+    async mount(el, props) {
       if (this.#isMounted || this.#isMounting) {
         throw new Error("Devtools is already mounted");
       }
       this.#isMounting = true;
       this.#abortMount = false;
       try {
-        const { __mountComponent: __mountComponent2 } = await import('./class-mount-impl/LK7V47IP.js');
+        const { __mountComponent: __mountComponent2 } = await import('./class-mount-impl/5TF6RAHJ.js');
         if (this.#abortMount) {
           this.#isMounting = false;
           return;
         }
-        this.#dispose = __mountComponent2(el, theme, importFn);
+        this.#dispose = __mountComponent2(el, props, importFn);
         this.#isMounted = true;
         this.#isMounting = false;
       } catch (err) {
@@ -48,7 +48,7 @@ function constructCoreClass(importFn) {
     constructor() {
       super();
     }
-    async mount(_el, _theme) {
+    async mount(_el, _props) {
     }
     unmount() {
     }
@@ -78,17 +78,15 @@ function createSolidPlugin({
   function Plugin() {
     return {
       ...config,
-      render: (_el, theme) => {
-        return createComponent(Component, {
-          theme
-        });
+      render: (_el, props) => {
+        return createComponent(Component, props);
       }
     };
   }
   function NoOpPlugin() {
     return {
       ...config,
-      render: (_el, _theme) => []
+      render: (_el, _props) => []
     };
   }
   return [Plugin, NoOpPlugin];

package/dist/solid-class/esm/class-mount-impl.d.ts

@@ -1,4 +1,5 @@
 import { JSX } from 'solid-js';
-export declare function __mountComponent(el: HTMLElement, theme: 'light' | 'dark', importFn: () => Promise<{
-    default: () => JSX.Element;
+import { TanStackDevtoolsPluginProps } from '@tanstack/devtools';
+export declare function __mountComponent(el: HTMLElement, props: TanStackDevtoolsPluginProps, importFn: () => Promise<{
+    default: (props: TanStackDevtoolsPluginProps) => JSX.Element;
 }>): () => void;

package/dist/solid-class/esm/class-mount-impl.js

@@ -1,26 +1,20 @@
-import { render, createComponent, Portal, insert, template } from "solid-js/web";
+import { Portal, createComponent, insert, render, template } from "solid-js/web";
 import { lazy } from "solid-js";
+//#region src/solid/class-mount-impl.tsx
+/** @jsxImportSource solid-js - we use Solid.js as JSX here */
 var _tmpl$ = /* @__PURE__ */ template(`<div style=height:100%>`);
-function __mountComponent(el, theme, importFn) {
-  const Component = lazy(importFn);
-  const ThemeProvider = lazy(() => import("@tanstack/devtools-ui").then((m) => ({
-    default: m.ThemeContextProvider
-  })));
-  return render(() => createComponent(Portal, {
-    mount: el,
-    get children() {
-      var _el$ = _tmpl$();
-      insert(_el$, createComponent(ThemeProvider, {
-        theme,
-        get children() {
-          return createComponent(Component, {});
-        }
-      }));
-      return _el$;
-    }
-  }), el);
+function __mountComponent(el, props, importFn) {
+	const Component = lazy(importFn);
+	return render(() => createComponent(Portal, {
+		mount: el,
+		get children() {
+			var _el$ = _tmpl$();
+			insert(_el$, createComponent(Component, props));
+			return _el$;
+		}
+	}), el);
 }
-export {
-  __mountComponent
-};
-//# sourceMappingURL=class-mount-impl.js.map
+//#endregion
+export { __mountComponent };
+
+//# sourceMappingURL=class-mount-impl.js.map

package/dist/solid-class/esm/class-mount-impl.js.map

@@ -1 +1 @@
-{"version":3,"file":"class-mount-impl.js","sources":["../../../src/solid/class-mount-impl.tsx"],"sourcesContent":["/** @jsxImportSource solid-js - we use Solid.js as JSX here */\n\nimport { lazy } from 'solid-js'\nimport { Portal, render } from 'solid-js/web'\nimport type { JSX } from 'solid-js'\n\nexport function __mountComponent(\n  el: HTMLElement,\n  theme: 'light' | 'dark',\n  importFn: () => Promise<{ default: () => JSX.Element }>,\n): () => void {\n  const Component = lazy(importFn)\n  const ThemeProvider = lazy(() =>\n    import('@tanstack/devtools-ui').then((m) => ({\n      default: m.ThemeContextProvider,\n    })),\n  )\n\n  return render(\n    () => (\n      <Portal mount={el}>\n        <div style={{ height: '100%' }}>\n          <ThemeProvider theme={theme}>\n            <Component />\n          </ThemeProvider>\n        </div>\n      </Portal>\n    ),\n    el,\n  )\n}\n"],"names":["__mountComponent","el","theme","importFn","Component","lazy","ThemeProvider","then","m","default","ThemeContextProvider","render","_$createComponent","Portal","mount","children","_el$","_tmpl$","_$insert"],"mappings":";;;AAMO,SAASA,iBACdC,IACAC,OACAC,UACY;AACZ,QAAMC,YAAYC,KAAKF,QAAQ;AAC/B,QAAMG,gBAAgBD,KAAK,MACzB,OAAO,uBAAuB,EAAEE,KAAMC,CAAAA,OAAO;AAAA,IAC3CC,SAASD,EAAEE;AAAAA,EAAAA,EACX,CACJ;AAEA,SAAOC,OACL,MAAAC,gBACGC,QAAM;AAAA,IAACC,OAAOb;AAAAA,IAAE,IAAAc,WAAA;AAAA,UAAAC,OAAAC,OAAAA;AAAAC,aAAAF,MAAAJ,gBAEZN,eAAa;AAAA,QAACJ;AAAAA,QAAY,IAAAa,WAAA;AAAA,iBAAAH,gBACxBR,WAAS,EAAA;AAAA,QAAA;AAAA,MAAA,CAAA,CAAA;AAAA,aAAAY;AAAAA,IAAA;AAAA,EAAA,CAAA,GAKlBf,EACF;AACF;"}
+{"version":3,"file":"class-mount-impl.js","names":["lazy","Portal","render","JSX","TanStackDevtoolsPluginProps","__mountComponent","el","HTMLElement","props","importFn","Promise","default","Element","Component","_$createComponent","mount","children","_el$","_tmpl$","_$insert"],"sources":["../../../src/solid/class-mount-impl.tsx"],"sourcesContent":["/** @jsxImportSource solid-js - we use Solid.js as JSX here */\n\nimport { lazy } from 'solid-js'\nimport { Portal, render } from 'solid-js/web'\n\nimport type { JSX } from 'solid-js'\nimport type { TanStackDevtoolsPluginProps } from '@tanstack/devtools'\n\nexport function __mountComponent(\n  el: HTMLElement,\n  props: TanStackDevtoolsPluginProps,\n  importFn: () => Promise<{\n    default: (props: TanStackDevtoolsPluginProps) => JSX.Element\n  }>,\n): () => void {\n  const Component = lazy(importFn)\n\n  return render(\n    () => (\n      <Portal mount={el}>\n        <div style={{ height: '100%' }}>\n          <Component {...props} />\n        </div>\n      </Portal>\n    ),\n    el,\n  )\n}\n"],"mappings":";;;;;AAQA,SAAgBK,iBACdC,IACAE,OACAC,UAGY;CACZ,MAAMI,YAAYb,KAAKS,SAAS;AAEhC,QAAOP,aACLY,gBACGb,QAAM;EAACc,OAAOT;EAAE,IAAAU,WAAA;GAAA,IAAAC,OAAAC,QAAA;AAAAC,UAAAF,MAAAH,gBAEZD,WAAcL,MAAK,CAAA;AAAA,UAAAS;;EAAA,CAGzB,EACDX,GACD"}

package/dist/solid-class/esm/class.d.ts

@@ -1,3 +1,4 @@
+import { TanStackDevtoolsPluginProps } from '@tanstack/devtools';
 import { JSX } from 'solid-js';
 /**
  * Constructs the core class for the Devtools.
@@ -9,19 +10,19 @@ import { JSX } from 'solid-js';
  * @returns Tuple containing the DevtoolsCore class and a NoOpDevtoolsCore class
  */
 export declare function constructCoreClass(importFn: () => Promise<{
-    default: () => JSX.Element;
+    default: (props: TanStackDevtoolsPluginProps) => JSX.Element;
 }>): readonly [{
     new (): {
         "__#private@#isMounted": boolean;
         "__#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;
     };
 }, {
     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/solid-class/esm/class.js

@@ -1,56 +1,59 @@
+//#region src/solid/class.ts
+/**
+* Constructs the core class for the Devtools.
+* This utility is used to construct a lazy loaded Solid component for the Devtools.
+* It returns a tuple containing the main DevtoolsCore class and a NoOpDevtoolsCore class.
+* The NoOpDevtoolsCore class is a no-op implementation that can be used for production if you want to explicitly exclude
+* the Devtools from your application.
+* @param importFn A function that returns a dynamic import of the Solid component
+* @returns Tuple containing the DevtoolsCore class and a NoOpDevtoolsCore class
+*/
 function constructCoreClass(importFn) {
-  class DevtoolsCore {
-    #isMounted = false;
-    #isMounting = false;
-    #abortMount = false;
-    #dispose;
-    constructor() {
-    }
-    async mount(el, theme) {
-      if (this.#isMounted || this.#isMounting) {
-        throw new Error("Devtools is already mounted");
-      }
-      this.#isMounting = true;
-      this.#abortMount = false;
-      try {
-        const { __mountComponent } = await import("./class-mount-impl.js");
-        if (this.#abortMount) {
-          this.#isMounting = false;
-          return;
-        }
-        this.#dispose = __mountComponent(el, theme, importFn);
-        this.#isMounted = true;
-        this.#isMounting = false;
-      } catch (err) {
-        this.#isMounting = false;
-        console.error("[TanStack Devtools] Failed to load:", err);
-      }
-    }
-    unmount() {
-      if (!this.#isMounted && !this.#isMounting) {
-        throw new Error("Devtools is not mounted");
-      }
-      if (this.#isMounting) {
-        this.#abortMount = true;
-        this.#isMounting = false;
-        return;
-      }
-      this.#dispose?.();
-      this.#isMounted = false;
-    }
-  }
-  class NoOpDevtoolsCore extends DevtoolsCore {
-    constructor() {
-      super();
-    }
-    async mount(_el, _theme) {
-    }
-    unmount() {
-    }
-  }
-  return [DevtoolsCore, NoOpDevtoolsCore];
+	class DevtoolsCore {
+		#isMounted = false;
+		#isMounting = false;
+		#abortMount = false;
+		#dispose;
+		constructor() {}
+		async mount(el, props) {
+			if (this.#isMounted || this.#isMounting) throw new Error("Devtools is already mounted");
+			this.#isMounting = true;
+			this.#abortMount = false;
+			try {
+				const { __mountComponent } = await import("./class-mount-impl.js");
+				if (this.#abortMount) {
+					this.#isMounting = false;
+					return;
+				}
+				this.#dispose = __mountComponent(el, props, importFn);
+				this.#isMounted = true;
+				this.#isMounting = false;
+			} catch (err) {
+				this.#isMounting = false;
+				console.error("[TanStack Devtools] Failed to load:", err);
+			}
+		}
+		unmount() {
+			if (!this.#isMounted && !this.#isMounting) throw new Error("Devtools is not mounted");
+			if (this.#isMounting) {
+				this.#abortMount = true;
+				this.#isMounting = false;
+				return;
+			}
+			this.#dispose?.();
+			this.#isMounted = false;
+		}
+	}
+	class NoOpDevtoolsCore extends DevtoolsCore {
+		constructor() {
+			super();
+		}
+		async mount(_el, _props) {}
+		unmount() {}
+	}
+	return [DevtoolsCore, NoOpDevtoolsCore];
 }
-export {
-  constructCoreClass
-};
-//# sourceMappingURL=class.js.map
+//#endregion
+export { constructCoreClass };
+
+//# sourceMappingURL=class.js.map

package/dist/solid-class/esm/class.js.map

@@ -1 +1 @@
-{"version":3,"file":"class.js","sources":["../../../src/solid/class.ts"],"sourcesContent":["import type { JSX } from 'solid-js'\n\n/**\n * Constructs the core class for the Devtools.\n * This utility is used to construct a lazy loaded Solid component for the Devtools.\n * It returns a tuple containing the main DevtoolsCore class and a NoOpDevtoolsCore class.\n * The NoOpDevtoolsCore class is a no-op implementation that can be used for production if you want to explicitly exclude\n * the Devtools from your application.\n * @param importFn A function that returns a dynamic import of the Solid component\n * @returns Tuple containing the DevtoolsCore class and a NoOpDevtoolsCore class\n */\nexport function constructCoreClass(\n  importFn: () => Promise<{ default: () => JSX.Element }>,\n) {\n  class DevtoolsCore {\n    #isMounted = false\n    #isMounting = false\n    #abortMount = false\n    #dispose?: () => void\n\n    constructor() {}\n\n    async mount<T extends HTMLElement>(el: T, theme: 'light' | 'dark') {\n      if (this.#isMounted || this.#isMounting) {\n        throw new Error('Devtools is already mounted')\n      }\n      this.#isMounting = true\n      this.#abortMount = false\n\n      try {\n        const { __mountComponent } = await import('./class-mount-impl')\n        // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition -- can be set by unmount() during await\n        if (this.#abortMount) {\n          this.#isMounting = false\n          return\n        }\n\n        this.#dispose = __mountComponent(el, theme, importFn)\n        this.#isMounted = true\n        this.#isMounting = false\n      } catch (err) {\n        this.#isMounting = false\n        console.error('[TanStack Devtools] Failed to load:', err)\n      }\n    }\n\n    unmount() {\n      if (!this.#isMounted && !this.#isMounting) {\n        throw new Error('Devtools is not mounted')\n      }\n      if (this.#isMounting) {\n        this.#abortMount = true\n        this.#isMounting = false\n        return\n      }\n      this.#dispose?.()\n      this.#isMounted = false\n    }\n  }\n\n  class NoOpDevtoolsCore extends DevtoolsCore {\n    constructor() {\n      super()\n    }\n    async mount<T extends HTMLElement>(_el: T, _theme: 'light' | 'dark') {}\n    unmount() {}\n  }\n\n  return [DevtoolsCore, NoOpDevtoolsCore] as const\n}\n\nexport type ClassType = ReturnType<typeof constructCoreClass>[0]\n"],"names":[],"mappings":"AAWO,SAAS,mBACd,UACA;AAAA,EACA,MAAM,aAAa;AAAA,IACjB,aAAa;AAAA,IACb,cAAc;AAAA,IACd,cAAc;AAAA,IACd;AAAA,IAEA,cAAc;AAAA,IAAC;AAAA,IAEf,MAAM,MAA6B,IAAO,OAAyB;AACjE,UAAI,KAAK,cAAc,KAAK,aAAa;AACvC,cAAM,IAAI,MAAM,6BAA6B;AAAA,MAC/C;AACA,WAAK,cAAc;AACnB,WAAK,cAAc;AAEnB,UAAI;AACF,cAAM,EAAE,iBAAA,IAAqB,MAAM,OAAO,uBAAoB;AAE9D,YAAI,KAAK,aAAa;AACpB,eAAK,cAAc;AACnB;AAAA,QACF;AAEA,aAAK,WAAW,iBAAiB,IAAI,OAAO,QAAQ;AACpD,aAAK,aAAa;AAClB,aAAK,cAAc;AAAA,MACrB,SAAS,KAAK;AACZ,aAAK,cAAc;AACnB,gBAAQ,MAAM,uCAAuC,GAAG;AAAA,MAC1D;AAAA,IACF;AAAA,IAEA,UAAU;AACR,UAAI,CAAC,KAAK,cAAc,CAAC,KAAK,aAAa;AACzC,cAAM,IAAI,MAAM,yBAAyB;AAAA,MAC3C;AACA,UAAI,KAAK,aAAa;AACpB,aAAK,cAAc;AACnB,aAAK,cAAc;AACnB;AAAA,MACF;AACA,WAAK,WAAA;AACL,WAAK,aAAa;AAAA,IACpB;AAAA,EAAA;AAAA,EAGF,MAAM,yBAAyB,aAAa;AAAA,IAC1C,cAAc;AACZ,YAAA;AAAA,IACF;AAAA,IACA,MAAM,MAA6B,KAAQ,QAA0B;AAAA,IAAC;AAAA,IACtE,UAAU;AAAA,IAAC;AAAA,EAAA;AAGb,SAAO,CAAC,cAAc,gBAAgB;AACxC;"}
+{"version":3,"file":"class.js","names":["#isMounted","#isMounting","#abortMount","#dispose"],"sources":["../../../src/solid/class.ts"],"sourcesContent":["import type { TanStackDevtoolsPluginProps } from '@tanstack/devtools'\nimport type { JSX } from 'solid-js'\n\n/**\n * Constructs the core class for the Devtools.\n * This utility is used to construct a lazy loaded Solid component for the Devtools.\n * It returns a tuple containing the main DevtoolsCore class and a NoOpDevtoolsCore class.\n * The NoOpDevtoolsCore class is a no-op implementation that can be used for production if you want to explicitly exclude\n * the Devtools from your application.\n * @param importFn A function that returns a dynamic import of the Solid component\n * @returns Tuple containing the DevtoolsCore class and a NoOpDevtoolsCore class\n */\nexport function constructCoreClass(\n  importFn: () => Promise<{\n    default: (props: TanStackDevtoolsPluginProps) => JSX.Element\n  }>,\n) {\n  class DevtoolsCore {\n    #isMounted = false\n    #isMounting = false\n    #abortMount = false\n    #dispose?: () => void\n\n    constructor() {}\n\n    async mount<T extends HTMLElement>(\n      el: T,\n      props: TanStackDevtoolsPluginProps,\n    ) {\n      if (this.#isMounted || this.#isMounting) {\n        throw new Error('Devtools is already mounted')\n      }\n      this.#isMounting = true\n      this.#abortMount = false\n\n      try {\n        const { __mountComponent } = await import('./class-mount-impl')\n        // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition -- can be set by unmount() during await\n        if (this.#abortMount) {\n          this.#isMounting = false\n          return\n        }\n\n        this.#dispose = __mountComponent(el, props, importFn)\n        this.#isMounted = true\n        this.#isMounting = false\n      } catch (err) {\n        this.#isMounting = false\n        console.error('[TanStack Devtools] Failed to load:', err)\n      }\n    }\n\n    unmount() {\n      if (!this.#isMounted && !this.#isMounting) {\n        throw new Error('Devtools is not mounted')\n      }\n\n      if (this.#isMounting) {\n        this.#abortMount = true\n        this.#isMounting = false\n        return\n      }\n\n      this.#dispose?.()\n      this.#isMounted = false\n    }\n  }\n\n  class NoOpDevtoolsCore extends DevtoolsCore {\n    constructor() {\n      super()\n    }\n    async mount<T extends HTMLElement>(\n      _el: T,\n      _props: TanStackDevtoolsPluginProps,\n    ) {}\n    unmount() {}\n  }\n\n  return [DevtoolsCore, NoOpDevtoolsCore] as const\n}\n\nexport type ClassType = ReturnType<typeof constructCoreClass>[0]\n"],"mappings":";;;;;;;;;;AAYA,SAAgB,mBACd,UAGA;CACA,MAAM,aAAa;EACjB,aAAa;EACb,cAAc;EACd,cAAc;EACd;EAEA,cAAc;EAEd,MAAM,MACJ,IACA,OACA;AACA,OAAI,MAAA,aAAmB,MAAA,WACrB,OAAM,IAAI,MAAM,8BAA8B;AAEhD,SAAA,aAAmB;AACnB,SAAA,aAAmB;AAEnB,OAAI;IACF,MAAM,EAAE,qBAAqB,MAAM,OAAO;AAE1C,QAAI,MAAA,YAAkB;AACpB,WAAA,aAAmB;AACnB;;AAGF,UAAA,UAAgB,iBAAiB,IAAI,OAAO,SAAS;AACrD,UAAA,YAAkB;AAClB,UAAA,aAAmB;YACZ,KAAK;AACZ,UAAA,aAAmB;AACnB,YAAQ,MAAM,uCAAuC,IAAI;;;EAI7D,UAAU;AACR,OAAI,CAAC,MAAA,aAAmB,CAAC,MAAA,WACvB,OAAM,IAAI,MAAM,0BAA0B;AAG5C,OAAI,MAAA,YAAkB;AACpB,UAAA,aAAmB;AACnB,UAAA,aAAmB;AACnB;;AAGF,SAAA,WAAiB;AACjB,SAAA,YAAkB;;;CAItB,MAAM,yBAAyB,aAAa;EAC1C,cAAc;AACZ,UAAO;;EAET,MAAM,MACJ,KACA,QACA;EACF,UAAU;;AAGZ,QAAO,CAAC,cAAc,iBAAiB"}

package/dist/solid-class/esm/panel.d.ts

@@ -1,5 +1,5 @@
 import { ClassType } from './class.js';
-export interface DevtoolsPanelProps {
-    theme?: 'light' | 'dark';
+import { TanStackDevtoolsPluginProps } from '@tanstack/devtools';
+export interface DevtoolsPanelProps extends TanStackDevtoolsPluginProps {
 }
-export declare function createSolidPanel<TComponentProps extends DevtoolsPanelProps | undefined>(CoreClass: ClassType): readonly [(props: TComponentProps) => import("solid-js").JSX.Element, (_props: TComponentProps) => import("solid-js").JSX.Element];
+export declare function createSolidPanel<TComponentProps extends DevtoolsPanelProps>(CoreClass: ClassType): readonly [(props: TComponentProps) => import("solid-js").JSX.Element, (_props: TComponentProps) => import("solid-js").JSX.Element];

package/dist/solid-class/esm/plugin.d.ts

@@ -1,17 +1,18 @@
 import { JSX } from 'solid-js';
 import { DevtoolsPanelProps } from './panel.js';
+import { TanStackDevtoolsPluginProps } from '@tanstack/devtools';
 export declare function createSolidPlugin({ Component, ...config }: {
     name: string;
     id?: string;
     defaultOpen?: boolean;
     Component: (props: DevtoolsPanelProps) => JSX.Element;
 }): readonly [() => {
-    render: (_el: HTMLElement, theme: "light" | "dark") => JSX.Element;
+    render: (_el: HTMLElement, props: TanStackDevtoolsPluginProps) => JSX.Element;
     name: string;
     id?: string;
     defaultOpen?: boolean;
 }, () => {
-    render: (_el: HTMLElement, _theme: "light" | "dark") => JSX.Element;
+    render: (_el: HTMLElement, _props: TanStackDevtoolsPluginProps) => JSX.Element;
     name: string;
     id?: string;
     defaultOpen?: boolean;

package/dist/vue/esm/index.js

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

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

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

package/dist/vue/esm/panel.js

@@ -1,47 +1,38 @@
-import { defineComponent, ref, onMounted, onUnmounted, h } from "vue";
+import { defineComponent, h, onMounted, onUnmounted, ref } from "vue";
+//#region src/vue/panel.ts
 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];
+	const props = {
+		props: { type: Object },
+		devtoolsProps: { type: Object }
+	};
+	return [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.props);
+			});
+			onUnmounted(() => {
+				if (devToolRef.value && devtools.value) devtools.value.unmount();
+			});
+			return () => {
+				return h("div", {
+					style: { height: "100%" },
+					ref: devToolRef
+				});
+			};
+		}
+	}), defineComponent({
+		props,
+		setup() {
+			return () => null;
+		}
+	})];
 }
-export {
-  createVuePanel
-};
-//# sourceMappingURL=panel.js.map
+//#endregion
+export { createVuePanel };
+
+//# sourceMappingURL=panel.js.map

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

@@ -1 +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;"}
+{"version":3,"file":"panel.js","names":[],"sources":["../../../src/vue/panel.ts"],"sourcesContent":["import { defineComponent, h, onMounted, onUnmounted, ref } from 'vue'\nimport type { TanStackDevtoolsPluginProps } from '@tanstack/devtools'\nimport type { DefineComponent } from 'vue'\n\nexport interface DevtoolsPanelProps extends TanStackDevtoolsPluginProps {}\n\nexport function createVuePanel<\n  TComponentProps extends DevtoolsPanelProps,\n  TCoreDevtoolsClass extends {\n    mount: (el: HTMLElement, props?: TanStackDevtoolsPluginProps) => void\n    unmount: () => void\n  },\n>(CoreClass: new (props: TComponentProps) => TCoreDevtoolsClass) {\n  const props = {\n    props: {\n      type: Object as () => DevtoolsPanelProps,\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.props)\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"],"mappings":";;AAMA,SAAgB,eAMd,WAA+D;CAC/D,MAAM,QAAQ;EACZ,OAAO,EACL,MAAM,QACP;EACD,eAAe,EACb,MAAM,QACP;EACF;AAuCD,QAAO,CArCO,gBAAgB;EAC5B;EACA,MAAM,QAAQ;GACZ,MAAM,aAAa,IAAwB,KAAK;GAChD,MAAM,WAAW,IAA+B,KAAK;AAErD,mBAAgB;IACd,MAAM,WAAW,IAAI,UAAU,OAAO,cAAiC;AACvE,aAAS,QAAQ;AAEjB,QAAI,WAAW,MACb,UAAS,MAAM,WAAW,OAAO,OAAO,MAAM;KAEhD;AAEF,qBAAkB;AAChB,QAAI,WAAW,SAAS,SAAS,MAC/B,UAAS,MAAM,SAAS;KAE1B;AAEF,gBAAa;AACX,WAAO,EAAE,OAAO;KACd,OAAO,EAAE,QAAQ,QAAQ;KACzB,KAAK;KACN,CAAC;;;EAGP,CAAC,EAEgB,gBAAgB;EAChC;EACA,QAAQ;AACN,gBAAa;;EAEhB,CAAC,CAEuB"}

package/dist/vue/esm/plugin.js

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

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

@@ -1 +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;"}
+{"version":3,"file":"plugin.js","names":[],"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"],"mappings":";;AAGA,SAAgB,gBACd,MACA,WACA;CACA,SAAS,OAAO,OAAwB;AACtC,SAAO;GACL;GACA;GACA;GACD;;CAEH,SAAS,WAAW,OAAwB;AAC1C,SAAO;GACL;GACA,WAAW;GACX;GACD;;AAEH,QAAO,CAAC,QAAQ,WAAW"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tanstack/devtools-utils",
-  "version": "0.3.4",
+  "version": "0.4.0",
   "description": "TanStack Devtools utilities for creating your own devtools.",
   "author": "Tanner Linsley",
   "license": "MIT",
@@ -72,8 +72,11 @@
   "engines": {
     "node": ">=18"
   },
-  "dependencies": {
-    "@tanstack/devtools-ui": "^0.5.0"
+  "devDependencies": {
+    "tsup": "^8.5.0",
+    "tsup-preset-solid": "^2.2.0",
+    "vite-plugin-solid": "^2.11.11",
+    "@tanstack/devtools": "^0.11.0"
   },
   "peerDependencies": {
     "@types/react": ">=17.0.0",
@@ -105,11 +108,6 @@
     "skills",
     "bin"
   ],
-  "devDependencies": {
-    "tsup": "^8.5.0",
-    "tsup-preset-solid": "^2.2.0",
-    "vite-plugin-solid": "^2.11.8"
-  },
   "scripts": {
     "clean": "premove ./build ./dist",
     "lint:fix": "eslint ./src --fix",

package/src/preact/panel.tsx

@@ -1,10 +1,9 @@
 /** @jsxImportSource preact */
 
 import { useEffect, useRef } from 'preact/hooks'
+import type { TanStackDevtoolsPluginProps } from '@tanstack/devtools'
 
-export interface DevtoolsPanelProps {
-  theme?: 'light' | 'dark'
-}
+export interface DevtoolsPanelProps extends TanStackDevtoolsPluginProps {}
 
 /**
  * Creates a Preact component that dynamically imports and mounts a devtools panel. SSR friendly.
@@ -24,9 +23,9 @@ export interface DevtoolsPanelProps {
  * ```
  */
 export function createPreactPanel<
-  TComponentProps extends DevtoolsPanelProps | undefined,
+  TComponentProps extends DevtoolsPanelProps,
   TCoreDevtoolsClass extends {
-    mount: (el: HTMLElement, theme: 'light' | 'dark') => void
+    mount: (el: HTMLElement, props: TanStackDevtoolsPluginProps) => void
     unmount: () => void
   },
 >(CoreClass: new () => TCoreDevtoolsClass) {
@@ -38,7 +37,7 @@ export function createPreactPanel<
       devtools.current = new CoreClass()
 
       if (devToolRef.current) {
-        devtools.current.mount(devToolRef.current, props?.theme ?? 'dark')
+        devtools.current.mount(devToolRef.current, props)
       }
 
       return () => {
@@ -47,7 +46,7 @@ export function createPreactPanel<
           devtools.current = null
         }
       }
-    }, [props?.theme])
+    }, [props])
 
     return <div style={{ height: '100%' }} ref={devToolRef} />
   }