@tanstack/devtools-utils - npm Package Compare versions

Comparing version 0.3.4 to 0.4.0

dist/solid/esm/chunk/7TSS377A.js

+import { render, createComponent, Portal, insert, template } from 'solid-js/web';
+import { lazy } from 'solid-js';
+
+// src/solid/class-mount-impl.tsx
+var _tmpl$ = /* @__PURE__ */ template(`<div style=height:100%>`);
+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 };

dist/solid/esm/chunk/WUD4VD3N.js

+import { render, createComponent, Portal, ssr, ssrStyleProperty, escape } from 'solid-js/web';
+import { lazy } from 'solid-js';
+
+// src/solid/class-mount-impl.tsx
+var _tmpl$ = ['<div style="', '">', "</div>"];
+function __mountComponent(el, props, importFn) {
+  const Component = lazy(importFn);
+  return render(() => createComponent(Portal, {
+    mount: el,
+    get children() {
+      return ssr(_tmpl$, ssrStyleProperty("height:", "100%"), escape(createComponent(Component, props)));
+    }
+  }), el);
+}
+
+export { __mountComponent };

dist/solid/esm/class-mount-impl/5TF6RAHJ.js

+export { __mountComponent } from '../chunk/WUD4VD3N.js';

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

+export { __mountComponent } from '../chunk/7TSS377A.js';

dist/preact/esm/index.js

 import { createPreactPanel } from "./panel.js";
 import { createPreactPlugin } from "./plugin.js";
-export {
-  createPreactPanel,
-  createPreactPlugin
-};
-//# sourceMappingURL=index.js.map
+export { createPreactPanel, createPreactPlugin };

dist/preact/esm/panel.d.ts

@@ -1,4 +0,3 @@
-/** @jsxImportSource preact */
-export interface DevtoolsPanelProps {
-    theme?: 'light' | 'dark';
+import { TanStackDevtoolsPluginProps } from '@tanstack/devtools';
+export interface DevtoolsPanelProps extends TanStackDevtoolsPluginProps {
 }
@@ -22,5 +21,5 @@ /**
  */
-export declare function createPreactPanel<TComponentProps extends DevtoolsPanelProps | undefined, TCoreDevtoolsClass extends {
-    mount: (el: HTMLElement, theme: 'light' | 'dark') => void;
+export declare function createPreactPanel<TComponentProps extends DevtoolsPanelProps, TCoreDevtoolsClass extends {
+    mount: (el: HTMLElement, props: TanStackDevtoolsPluginProps) => void;
     unmount: () => void;
 }>(CoreClass: new () => TCoreDevtoolsClass): readonly [(props: TComponentProps) => import("preact").JSX.Element, (_props: TComponentProps) => import("preact").JSX.Element];

dist/preact/esm/panel.js

@@ -1,30 +0,50 @@
-import { jsx, Fragment } from "preact/jsx-runtime";
-import { useRef, useEffect } from "preact/hooks";
+import { useEffect, useRef } from "preact/hooks";
+import { Fragment, jsx } from "preact/jsx-runtime";
+//#region src/preact/panel.tsx
+/** @jsxImportSource preact */
+/**
+* Creates a Preact component that dynamically imports and mounts a devtools panel. SSR friendly.
+* @param devtoolsPackageName The name of the devtools package to be imported, e.g., '@tanstack/devtools-preact'
+* @param importName The name of the export to be imported from the devtools package (e.g., 'default' or 'DevtoolsCore')
+* @returns A Preact component that mounts the devtools
+* @example
+* ```tsx
+* // if the export is default
+* const [PreactDevtoolsPanel, NoOpPreactDevtoolsPanel] = createPreactPanel('@tanstack/devtools-preact')
+* ```
+*
+* @example
+* ```tsx
+* // if the export is named differently
+* const [PreactDevtoolsPanel, NoOpPreactDevtoolsPanel] = createPreactPanel('@tanstack/devtools-preact', 'DevtoolsCore')
+* ```
+*/
 function createPreactPanel(CoreClass) {
-  function Panel(props) {
-    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");
-      }
-      return () => {
-        if (devToolRef.current) {
-          devtools.current?.unmount();
-          devtools.current = null;
-        }
-      };
-    }, [props?.theme]);
-    return /* @__PURE__ */ jsx("div", { style: { height: "100%" }, ref: devToolRef });
-  }
-  function NoOpPanel(_props) {
-    return /* @__PURE__ */ jsx(Fragment, {});
-  }
-  return [Panel, NoOpPanel];
+	function Panel(props) {
+		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);
+			return () => {
+				if (devToolRef.current) {
+					devtools.current?.unmount();
+					devtools.current = null;
+				}
+			};
+		}, [props]);
+		return /* @__PURE__ */ jsx("div", {
+			style: { height: "100%" },
+			ref: devToolRef
+		});
+	}
+	function NoOpPanel(_props) {
+		return /* @__PURE__ */ jsx(Fragment, {});
+	}
+	return [Panel, NoOpPanel];
 }
-export {
-  createPreactPanel
-};
-//# sourceMappingURL=panel.js.map
+//#endregion
+export { createPreactPanel };
+
+//# sourceMappingURL=panel.js.map

dist/preact/esm/panel.js.map

@@ -1,1 +0,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      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;"}
+{"version":3,"file":"panel.js","names":[],"sources":["../../../src/preact/panel.tsx"],"sourcesContent":["/** @jsxImportSource preact */\n\nimport { useEffect, useRef } from 'preact/hooks'\nimport type { TanStackDevtoolsPluginProps } from '@tanstack/devtools'\n\nexport interface DevtoolsPanelProps extends TanStackDevtoolsPluginProps {}\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,\n  TCoreDevtoolsClass extends {\n    mount: (el: HTMLElement, props: TanStackDevtoolsPluginProps) => 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)\n      }\n\n      return () => {\n        if (devToolRef.current) {\n          devtools.current?.unmount()\n          devtools.current = null\n        }\n      }\n    }, [props])\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"],"mappings":";;;;;;;;;;;;;;;;;;;;;AAwBA,SAAgB,kBAMd,WAAyC;CACzC,SAAS,MAAM,OAAwB;EACrC,MAAM,aAAa,OAAuB,KAAK;EAC/C,MAAM,WAAW,OAAkC,KAAK;AACxD,kBAAgB;AACd,OAAI,SAAS,QAAS;AACtB,YAAS,UAAU,IAAI,WAAW;AAElC,OAAI,WAAW,QACb,UAAS,QAAQ,MAAM,WAAW,SAAS,MAAM;AAGnD,gBAAa;AACX,QAAI,WAAW,SAAS;AACtB,cAAS,SAAS,SAAS;AAC3B,cAAS,UAAU;;;KAGtB,CAAC,MAAM,CAAC;AAEX,SAAO,oBAAC,OAAD;GAAK,OAAO,EAAE,QAAQ,QAAQ;GAAE,KAAK;GAAc,CAAA;;CAG5D,SAAS,UAAU,QAAyB;AAC1C,SAAO,oBAAA,UAAA,EAAK,CAAA;;AAEd,QAAO,CAAC,OAAO,UAAU"}

dist/preact/esm/plugin.d.ts

 import { JSX } from 'preact';
 import { DevtoolsPanelProps } from './panel.js';
+import { TanStackDevtoolsPluginProps } from '@tanstack/devtools';
 export declare function createPreactPlugin({ Component, ...config }: {
@@ -9,3 +10,3 @@ name: string;
 }): readonly [() => {
-    render: (_el: HTMLElement, theme: "light" | "dark") => JSX.Element;
+    render: (_el: HTMLElement, props: TanStackDevtoolsPluginProps) => JSX.Element;
     name: string;
@@ -15,3 +16,3 @@ id?: string;
 }, () => {
-    render: (_el: HTMLElement, _theme: "light" | "dark") => JSX.Element;
+    render: (_el: HTMLElement, _props: TanStackDevtoolsPluginProps) => JSX.Element;
     name: string;
@@ -18,0 +19,0 @@ id?: string;

dist/preact/esm/plugin.js

@@ -1,23 +0,21 @@
-import { jsx, Fragment } from "preact/jsx-runtime";
-function createPreactPlugin({
-  Component,
-  ...config
-}) {
-  function Plugin() {
-    return {
-      ...config,
-      render: (_el, theme) => /* @__PURE__ */ jsx(Component, { theme })
-    };
-  }
-  function NoOpPlugin() {
-    return {
-      ...config,
-      render: (_el, _theme) => /* @__PURE__ */ jsx(Fragment, {})
-    };
-  }
-  return [Plugin, NoOpPlugin];
+import { Fragment, jsx } from "preact/jsx-runtime";
+//#region src/preact/plugin.tsx
+function createPreactPlugin({ Component, ...config }) {
+	function Plugin() {
+		return {
+			...config,
+			render: (_el, props) => /* @__PURE__ */ jsx(Component, { ...props })
+		};
+	}
+	function NoOpPlugin() {
+		return {
+			...config,
+			render: (_el, _props) => /* @__PURE__ */ jsx(Fragment, {})
+		};
+	}
+	return [Plugin, NoOpPlugin];
 }
-export {
-  createPreactPlugin
-};
-//# sourceMappingURL=plugin.js.map
+//#endregion
+export { createPreactPlugin };
+
+//# sourceMappingURL=plugin.js.map

dist/preact/esm/plugin.js.map

@@ -1,1 +0,1 @@
-{"version":3,"file":"plugin.js","sources":["../../../src/preact/plugin.tsx"],"sourcesContent":["/** @jsxImportSource preact */\n\nimport type { JSX } from 'preact'\nimport type { DevtoolsPanelProps } from './panel'\n\nexport function createPreactPlugin({\n  Component,\n  ...config\n}: {\n  name: string\n  id?: string\n  defaultOpen?: boolean\n  Component: (props: DevtoolsPanelProps) => JSX.Element\n}) {\n  function Plugin() {\n    return {\n      ...config,\n      render: (_el: HTMLElement, theme: 'light' | 'dark') => (\n        <Component theme={theme} />\n      ),\n    }\n  }\n  function NoOpPlugin() {\n    return {\n      ...config,\n      render: (_el: HTMLElement, _theme: 'light' | 'dark') => <></>,\n    }\n  }\n  return [Plugin, NoOpPlugin] as const\n}\n"],"names":[],"mappings":";AAKO,SAAS,mBAAmB;AAAA,EACjC;AAAA,EACA,GAAG;AACL,GAKG;AACD,WAAS,SAAS;AAChB,WAAO;AAAA,MACL,GAAG;AAAA,MACH,QAAQ,CAAC,KAAkB,UACzB,oBAAC,aAAU,MAAA,CAAc;AAAA,IAAA;AAAA,EAG/B;AACA,WAAS,aAAa;AACpB,WAAO;AAAA,MACL,GAAG;AAAA,MACH,QAAQ,CAAC,KAAkB,WAA6B,oBAAA,UAAA,CAAA,CAAE;AAAA,IAAA;AAAA,EAE9D;AACA,SAAO,CAAC,QAAQ,UAAU;AAC5B;"}
+{"version":3,"file":"plugin.js","names":[],"sources":["../../../src/preact/plugin.tsx"],"sourcesContent":["/** @jsxImportSource preact */\n\nimport type { JSX } from 'preact'\nimport type { DevtoolsPanelProps } from './panel'\nimport type { TanStackDevtoolsPluginProps } from '@tanstack/devtools'\n\nexport function createPreactPlugin({\n  Component,\n  ...config\n}: {\n  name: string\n  id?: string\n  defaultOpen?: boolean\n  Component: (props: DevtoolsPanelProps) => JSX.Element\n}) {\n  function Plugin() {\n    return {\n      ...config,\n      render: (_el: HTMLElement, props: TanStackDevtoolsPluginProps) => (\n        <Component {...props} />\n      ),\n    }\n  }\n  function NoOpPlugin() {\n    return {\n      ...config,\n      render: (_el: HTMLElement, _props: TanStackDevtoolsPluginProps) => <></>,\n    }\n  }\n  return [Plugin, NoOpPlugin] as const\n}\n"],"mappings":";;AAMA,SAAgB,mBAAmB,EACjC,WACA,GAAG,UAMF;CACD,SAAS,SAAS;AAChB,SAAO;GACL,GAAG;GACH,SAAS,KAAkB,UACzB,oBAAC,WAAD,EAAW,GAAI,OAAS,CAAA;GAE3B;;CAEH,SAAS,aAAa;AACpB,SAAO;GACL,GAAG;GACH,SAAS,KAAkB,WAAwC,oBAAA,UAAA,EAAK,CAAA;GACzE;;AAEH,QAAO,CAAC,QAAQ,WAAW"}

dist/react/esm/index.js

 import { createReactPanel } from "./panel.js";
 import { createReactPlugin } from "./plugin.js";
-export {
-  createReactPanel,
-  createReactPlugin
-};
-//# sourceMappingURL=index.js.map
+export { createReactPanel, createReactPlugin };

dist/react/esm/panel.d.ts

@@ -1,3 +0,3 @@
-export interface DevtoolsPanelProps {
-    theme?: 'light' | 'dark';
+import { TanStackDevtoolsPluginProps } from '@tanstack/devtools';
+export interface DevtoolsPanelProps extends TanStackDevtoolsPluginProps {
 }
@@ -21,5 +21,5 @@ /**
  */
-export declare function createReactPanel<TComponentProps extends DevtoolsPanelProps | undefined, TCoreDevtoolsClass extends {
-    mount: (el: HTMLElement, theme: 'light' | 'dark') => void;
+export declare function createReactPanel<TComponentProps extends TanStackDevtoolsPluginProps, TCoreDevtoolsClass extends {
+    mount: (el: HTMLElement, props: TanStackDevtoolsPluginProps) => void;
     unmount: () => void;
 }>(CoreClass: new () => TCoreDevtoolsClass): readonly [(props: TComponentProps) => import("react/jsx-runtime").JSX.Element, (_props: TComponentProps) => import("react/jsx-runtime").JSX.Element];

dist/react/esm/panel.js

@@ -1,30 +0,49 @@
-import { jsx, Fragment } from "react/jsx-runtime";
-import { useRef, useEffect } from "react";
+import { useEffect, useRef } from "react";
+import { Fragment, jsx } from "react/jsx-runtime";
+//#region src/react/panel.tsx
+/**
+* Creates a React component that dynamically imports and mounts a devtools panel. SSR friendly.
+* @param devtoolsPackageName The name of the devtools package to be imported, e.g., '@tanstack/devtools-react'
+* @param importName The name of the export to be imported from the devtools package (e.g., 'default' or 'DevtoolsCore')
+* @returns A React component that mounts the devtools
+* @example
+* ```tsx
+* // if the export is default
+* const [ReactDevtoolsPanel, NoOpReactDevtoolsPanel] = createReactPanel('@tanstack/devtools-react')
+* ```
+*
+* @example
+* ```tsx
+* // if the export is named differently
+* const [ReactDevtoolsPanel, NoOpReactDevtoolsPanel] = createReactPanel('@tanstack/devtools-react', 'DevtoolsCore')
+* ```
+*/
 function createReactPanel(CoreClass) {
-  function Panel(props) {
-    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");
-      }
-      return () => {
-        if (devToolRef.current) {
-          devtools.current?.unmount();
-          devtools.current = null;
-        }
-      };
-    }, [props?.theme]);
-    return /* @__PURE__ */ jsx("div", { style: { height: "100%" }, ref: devToolRef });
-  }
-  function NoOpPanel(_props) {
-    return /* @__PURE__ */ jsx(Fragment, {});
-  }
-  return [Panel, NoOpPanel];
+	function Panel(props) {
+		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);
+			return () => {
+				if (devToolRef.current) {
+					devtools.current?.unmount();
+					devtools.current = null;
+				}
+			};
+		}, [props]);
+		return /* @__PURE__ */ jsx("div", {
+			style: { height: "100%" },
+			ref: devToolRef
+		});
+	}
+	function NoOpPanel(_props) {
+		return /* @__PURE__ */ jsx(Fragment, {});
+	}
+	return [Panel, NoOpPanel];
 }
-export {
-  createReactPanel
-};
-//# sourceMappingURL=panel.js.map
+//#endregion
+export { createReactPanel };
+
+//# sourceMappingURL=panel.js.map

dist/react/esm/panel.js.map

@@ -1,1 +0,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      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;"}
+{"version":3,"file":"panel.js","names":[],"sources":["../../../src/react/panel.tsx"],"sourcesContent":["import { useEffect, useRef } from 'react'\nimport type { TanStackDevtoolsPluginProps } from '@tanstack/devtools'\n\nexport interface DevtoolsPanelProps extends TanStackDevtoolsPluginProps {}\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 TanStackDevtoolsPluginProps,\n  TCoreDevtoolsClass extends {\n    mount: (el: HTMLElement, props: TanStackDevtoolsPluginProps) => 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)\n      }\n\n      return () => {\n        if (devToolRef.current) {\n          devtools.current?.unmount()\n          devtools.current = null\n        }\n      }\n    }, [props])\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"],"mappings":";;;;;;;;;;;;;;;;;;;;AAsBA,SAAgB,iBAMd,WAAyC;CACzC,SAAS,MAAM,OAAwB;EACrC,MAAM,aAAa,OAAuB,KAAK;EAC/C,MAAM,WAAW,OAAkC,KAAK;AACxD,kBAAgB;AACd,OAAI,SAAS,QAAS;AACtB,YAAS,UAAU,IAAI,WAAW;AAElC,OAAI,WAAW,QACb,UAAS,QAAQ,MAAM,WAAW,SAAS,MAAM;AAGnD,gBAAa;AACX,QAAI,WAAW,SAAS;AACtB,cAAS,SAAS,SAAS;AAC3B,cAAS,UAAU;;;KAGtB,CAAC,MAAM,CAAC;AAEX,SAAO,oBAAC,OAAD;GAAK,OAAO,EAAE,QAAQ,QAAQ;GAAE,KAAK;GAAc,CAAA;;CAG5D,SAAS,UAAU,QAAyB;AAC1C,SAAO,oBAAA,UAAA,EAAK,CAAA;;AAEd,QAAO,CAAC,OAAO,UAAU"}

dist/react/esm/plugin.d.ts

 import { JSX } from 'react';
 import { DevtoolsPanelProps } from './panel.js';
+import { TanStackDevtoolsPluginProps } from '@tanstack/devtools';
 export declare function createReactPlugin({ Component, ...config }: {
@@ -9,3 +10,3 @@ name: string;
 }): readonly [() => {
-    render: (_el: HTMLElement, theme: "light" | "dark") => import("react/jsx-runtime").JSX.Element;
+    render: (_el: HTMLElement, props: TanStackDevtoolsPluginProps) => import("react/jsx-runtime").JSX.Element;
     name: string;
@@ -15,3 +16,3 @@ id?: string;
 }, () => {
-    render: (_el: HTMLElement, _theme: "light" | "dark") => import("react/jsx-runtime").JSX.Element;
+    render: (_el: HTMLElement, _props: TanStackDevtoolsPluginProps) => import("react/jsx-runtime").JSX.Element;
     name: string;
@@ -18,0 +19,0 @@ id?: string;

dist/react/esm/plugin.js

@@ -1,23 +0,21 @@
-import { jsx, Fragment } from "react/jsx-runtime";
-function createReactPlugin({
-  Component,
-  ...config
-}) {
-  function Plugin() {
-    return {
-      ...config,
-      render: (_el, theme) => /* @__PURE__ */ jsx(Component, { theme })
-    };
-  }
-  function NoOpPlugin() {
-    return {
-      ...config,
-      render: (_el, _theme) => /* @__PURE__ */ jsx(Fragment, {})
-    };
-  }
-  return [Plugin, NoOpPlugin];
+import { Fragment, jsx } from "react/jsx-runtime";
+//#region src/react/plugin.tsx
+function createReactPlugin({ Component, ...config }) {
+	function Plugin() {
+		return {
+			...config,
+			render: (_el, props) => /* @__PURE__ */ jsx(Component, { ...props })
+		};
+	}
+	function NoOpPlugin() {
+		return {
+			...config,
+			render: (_el, _props) => /* @__PURE__ */ jsx(Fragment, {})
+		};
+	}
+	return [Plugin, NoOpPlugin];
 }
-export {
-  createReactPlugin
-};
-//# sourceMappingURL=plugin.js.map
+//#endregion
+export { createReactPlugin };
+
+//# sourceMappingURL=plugin.js.map

dist/react/esm/plugin.js.map

@@ -1,1 +0,1 @@
-{"version":3,"file":"plugin.js","sources":["../../../src/react/plugin.tsx"],"sourcesContent":["import type { JSX } from 'react'\nimport type { DevtoolsPanelProps } from './panel'\n\nexport function createReactPlugin({\n  Component,\n  ...config\n}: {\n  name: string\n  id?: string\n  defaultOpen?: boolean\n  Component: (props: DevtoolsPanelProps) => JSX.Element\n}) {\n  function Plugin() {\n    return {\n      ...config,\n      render: (_el: HTMLElement, theme: 'light' | 'dark') => (\n        <Component theme={theme} />\n      ),\n    }\n  }\n  function NoOpPlugin() {\n    return {\n      ...config,\n      render: (_el: HTMLElement, _theme: 'light' | 'dark') => <></>,\n    }\n  }\n  return [Plugin, NoOpPlugin] as const\n}\n"],"names":[],"mappings":";AAGO,SAAS,kBAAkB;AAAA,EAChC;AAAA,EACA,GAAG;AACL,GAKG;AACD,WAAS,SAAS;AAChB,WAAO;AAAA,MACL,GAAG;AAAA,MACH,QAAQ,CAAC,KAAkB,UACzB,oBAAC,aAAU,MAAA,CAAc;AAAA,IAAA;AAAA,EAG/B;AACA,WAAS,aAAa;AACpB,WAAO;AAAA,MACL,GAAG;AAAA,MACH,QAAQ,CAAC,KAAkB,WAA6B,oBAAA,UAAA,CAAA,CAAE;AAAA,IAAA;AAAA,EAE9D;AACA,SAAO,CAAC,QAAQ,UAAU;AAC5B;"}
+{"version":3,"file":"plugin.js","names":[],"sources":["../../../src/react/plugin.tsx"],"sourcesContent":["import type { JSX } from 'react'\nimport type { DevtoolsPanelProps } from './panel'\nimport type { TanStackDevtoolsPluginProps } from '@tanstack/devtools'\n\nexport function createReactPlugin({\n  Component,\n  ...config\n}: {\n  name: string\n  id?: string\n  defaultOpen?: boolean\n  Component: (props: DevtoolsPanelProps) => JSX.Element\n}) {\n  function Plugin() {\n    return {\n      ...config,\n      render: (_el: HTMLElement, props: TanStackDevtoolsPluginProps) => (\n        <Component {...props} />\n      ),\n    }\n  }\n  function NoOpPlugin() {\n    return {\n      ...config,\n      render: (_el: HTMLElement, _props: TanStackDevtoolsPluginProps) => <></>,\n    }\n  }\n  return [Plugin, NoOpPlugin] as const\n}\n"],"mappings":";;AAIA,SAAgB,kBAAkB,EAChC,WACA,GAAG,UAMF;CACD,SAAS,SAAS;AAChB,SAAO;GACL,GAAG;GACH,SAAS,KAAkB,UACzB,oBAAC,WAAD,EAAW,GAAI,OAAS,CAAA;GAE3B;;CAEH,SAAS,aAAa;AACpB,SAAO;GACL,GAAG;GACH,SAAS,KAAkB,WAAwC,oBAAA,UAAA,EAAK,CAAA;GACzE;;AAEH,QAAO,CAAC,QAAQ,WAAW"}

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

 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;

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

@@ -1,26 +0,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

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

@@ -1,1 +0,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"}

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

@@ -0,1 +1,2 @@
+import { TanStackDevtoolsPluginProps } from '@tanstack/devtools';
 import { JSX } from 'solid-js';
@@ -12,3 +13,3 @@ /**
 export declare function constructCoreClass(importFn: () => Promise<{
-    default: () => JSX.Element;
+    default: (props: TanStackDevtoolsPluginProps) => JSX.Element;
 }>): readonly [{
@@ -20,3 +21,3 @@ new (): {
         "__#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;
@@ -26,3 +27,3 @@ };
     new (): {
-        mount<T extends HTMLElement>(_el: T, _theme: "light" | "dark"): Promise<void>;
+        mount<T extends HTMLElement>(_el: T, _props: TanStackDevtoolsPluginProps): Promise<void>;
         unmount(): void;
@@ -29,0 +30,0 @@ "__#private@#isMounted": boolean;

dist/solid-class/esm/class.js

@@ -0,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

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

@@ -1,1 +0,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"}

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

 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];

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

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

dist/solid/esm/dev.js

@@ -1,2 +0,2 @@
-export { __mountComponent } from './chunk/ZXPCWXRH.js';
+export { __mountComponent } from './chunk/7TSS377A.js';
 import { use, createComponent, template } from 'solid-js/web';
@@ -14,3 +14,3 @@ import { createSignal, onMount, onCleanup } from 'solid-js';
     }
-    async mount(el, theme) {
+    async mount(el, props) {
       if (this.#isMounted || this.#isMounting) {
@@ -22,3 +22,3 @@ throw new Error("Devtools is already mounted");
       try {
-        const { __mountComponent: __mountComponent2 } = await import('./class-mount-impl/ZAIAXV4M.js');
+        const { __mountComponent: __mountComponent2 } = await import('./class-mount-impl/VN5QTPB3.js');
         if (this.#abortMount) {
@@ -28,3 +28,3 @@ this.#isMounting = false;
         }
-        this.#dispose = __mountComponent2(el, theme, importFn);
+        this.#dispose = __mountComponent2(el, props, importFn);
         this.#isMounted = true;
@@ -54,3 +54,3 @@ this.#isMounting = false;
     }
-    async mount(_el, _theme) {
+    async mount(_el, _props) {
     }
@@ -69,3 +69,3 @@ unmount() {
       if (devToolRef) {
-        devtools().mount(devToolRef, props?.theme ?? "dark");
+        devtools().mount(devToolRef, props);
       }
@@ -95,6 +95,4 @@ onCleanup(() => {
       ...config,
-      render: (_el, theme) => {
-        return createComponent(Component, {
-          theme
-        });
+      render: (_el, props) => {
+        return createComponent(Component, props);
       }
@@ -106,3 +104,3 @@ };
       ...config,
-      render: (_el, _theme) => []
+      render: (_el, _props) => []
     };
@@ -109,0 +107,0 @@ }

dist/solid/esm/index.d.ts

@@ -0,1 +1,2 @@
+import { TanStackDevtoolsPluginProps } from '@tanstack/devtools';
 import * as solid_js from 'solid-js';
@@ -14,3 +15,3 @@ import { JSX } from 'solid-js';
 declare function constructCoreClass(importFn: () => Promise<{
-    default: () => JSX.Element;
+    default: (props: TanStackDevtoolsPluginProps) => JSX.Element;
 }>): readonly [{
@@ -22,3 +23,3 @@ new (): {
         "__#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;
@@ -28,3 +29,3 @@ };
     new (): {
-        mount<T extends HTMLElement>(_el: T, _theme: "light" | "dark"): Promise<void>;
+        mount<T extends HTMLElement>(_el: T, _props: TanStackDevtoolsPluginProps): Promise<void>;
         unmount(): void;
@@ -39,6 +40,5 @@ "__#private@#isMounted": boolean;
 
-interface DevtoolsPanelProps {
-    theme?: 'light' | 'dark';
+interface DevtoolsPanelProps extends TanStackDevtoolsPluginProps {
 }
-declare function createSolidPanel<TComponentProps extends DevtoolsPanelProps | undefined>(CoreClass: ClassType): readonly [(props: TComponentProps) => solid_js.JSX.Element, (_props: TComponentProps) => solid_js.JSX.Element];
+declare function createSolidPanel<TComponentProps extends DevtoolsPanelProps>(CoreClass: ClassType): readonly [(props: TComponentProps) => solid_js.JSX.Element, (_props: TComponentProps) => solid_js.JSX.Element];
 
@@ -53,3 +53,3 @@ /** @jsxImportSource solid-js - we use Solid.js as JSX here */
 }): readonly [() => {
-    render: (_el: HTMLElement, theme: "light" | "dark") => JSX.Element;
+    render: (_el: HTMLElement, props: TanStackDevtoolsPluginProps) => JSX.Element;
     name: string;
@@ -59,3 +59,3 @@ id?: string;
 }, () => {
-    render: (_el: HTMLElement, _theme: "light" | "dark") => JSX.Element;
+    render: (_el: HTMLElement, _props: TanStackDevtoolsPluginProps) => JSX.Element;
     name: string;
@@ -68,6 +68,6 @@ id?: string;
 
-declare function __mountComponent(el: HTMLElement, theme: 'light' | 'dark', importFn: () => Promise<{
-    default: () => JSX.Element;
+declare function __mountComponent(el: HTMLElement, props: TanStackDevtoolsPluginProps, importFn: () => Promise<{
+    default: (props: TanStackDevtoolsPluginProps) => JSX.Element;
 }>): () => void;
 
 export { type ClassType, type DevtoolsPanelProps, __mountComponent, constructCoreClass, createSolidPanel, createSolidPlugin };

dist/solid/esm/index.js

@@ -1,2 +0,2 @@
-export { __mountComponent } from './chunk/ZXPCWXRH.js';
+export { __mountComponent } from './chunk/7TSS377A.js';
 import { use, createComponent, template } from 'solid-js/web';
@@ -14,3 +14,3 @@ import { createSignal, onMount, onCleanup } from 'solid-js';
     }
-    async mount(el, theme) {
+    async mount(el, props) {
       if (this.#isMounted || this.#isMounting) {
@@ -22,3 +22,3 @@ throw new Error("Devtools is already mounted");
       try {
-        const { __mountComponent: __mountComponent2 } = await import('./class-mount-impl/ZAIAXV4M.js');
+        const { __mountComponent: __mountComponent2 } = await import('./class-mount-impl/VN5QTPB3.js');
         if (this.#abortMount) {
@@ -28,3 +28,3 @@ this.#isMounting = false;
         }
-        this.#dispose = __mountComponent2(el, theme, importFn);
+        this.#dispose = __mountComponent2(el, props, importFn);
         this.#isMounted = true;
@@ -54,3 +54,3 @@ this.#isMounting = false;
     }
-    async mount(_el, _theme) {
+    async mount(_el, _props) {
     }
@@ -69,3 +69,3 @@ unmount() {
       if (devToolRef) {
-        devtools().mount(devToolRef, props?.theme ?? "dark");
+        devtools().mount(devToolRef, props);
       }
@@ -95,6 +95,4 @@ onCleanup(() => {
       ...config,
-      render: (_el, theme) => {
-        return createComponent(Component, {
-          theme
-        });
+      render: (_el, props) => {
+        return createComponent(Component, props);
       }
@@ -106,3 +104,3 @@ };
       ...config,
-      render: (_el, _theme) => []
+      render: (_el, _props) => []
     };
@@ -109,0 +107,0 @@ }

dist/solid/esm/server.js

@@ -1,2 +0,2 @@
-export { __mountComponent } from './chunk/UX5ZZ4MG.js';
+export { __mountComponent } from './chunk/WUD4VD3N.js';
 import { ssr, ssrStyleProperty, createComponent } from 'solid-js/web';
@@ -14,3 +14,3 @@ import { createSignal, onMount, onCleanup } from 'solid-js';
     }
-    async mount(el, theme) {
+    async mount(el, props) {
       if (this.#isMounted || this.#isMounting) {
@@ -22,3 +22,3 @@ throw new Error("Devtools is already mounted");
       try {
-        const { __mountComponent: __mountComponent2 } = await import('./class-mount-impl/LK7V47IP.js');
+        const { __mountComponent: __mountComponent2 } = await import('./class-mount-impl/5TF6RAHJ.js');
         if (this.#abortMount) {
@@ -28,3 +28,3 @@ this.#isMounting = false;
         }
-        this.#dispose = __mountComponent2(el, theme, importFn);
+        this.#dispose = __mountComponent2(el, props, importFn);
         this.#isMounted = true;
@@ -54,3 +54,3 @@ this.#isMounting = false;
     }
-    async mount(_el, _theme) {
+    async mount(_el, _props) {
     }
@@ -85,6 +85,4 @@ unmount() {
       ...config,
-      render: (_el, theme) => {
-        return createComponent(Component, {
-          theme
-        });
+      render: (_el, props) => {
+        return createComponent(Component, props);
       }
@@ -96,3 +94,3 @@ };
       ...config,
-      render: (_el, _theme) => []
+      render: (_el, _props) => []
     };
@@ -99,0 +97,0 @@ }

dist/vue/esm/index.js

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

dist/vue/esm/panel.d.ts

@@ -0,7 +1,7 @@
+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;
@@ -8,0 +8,0 @@ }>(CoreClass: new (props: TComponentProps) => TCoreDevtoolsClass): [DefineComponent<{

dist/vue/esm/panel.js

@@ -1,47 +0,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

dist/vue/esm/panel.js.map

@@ -1,1 +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;"}
+{"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"}

dist/vue/esm/plugin.js

 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

dist/vue/esm/plugin.js.map

@@ -1,1 +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;"}
+{"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.json

 {
   "name": "@tanstack/devtools-utils",
-  "version": "0.3.4",
+  "version": "0.4.0",
   "description": "TanStack Devtools utilities for creating your own devtools.",
@@ -75,4 +75,7 @@ "author": "Tanner Linsley",
   },
-  "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"
   },
@@ -109,7 +112,2 @@ "peerDependencies": {
   ],
-  "devDependencies": {
-    "tsup": "^8.5.0",
-    "tsup-preset-solid": "^2.2.0",
-    "vite-plugin-solid": "^2.11.8"
-  },
   "scripts": {
@@ -116,0 +114,0 @@ "clean": "premove ./build ./dist",

src/preact/panel.tsx

 /** @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 {}
 
@@ -27,5 +26,5 @@ /**
 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
@@ -42,3 +41,3 @@ },
       if (devToolRef.current) {
-        devtools.current.mount(devToolRef.current, props?.theme ?? 'dark')
+        devtools.current.mount(devToolRef.current, props)
       }
@@ -52,3 +51,3 @@
       }
-    }, [props?.theme])
+    }, [props])
 
@@ -55,0 +54,0 @@ return <div style={{ height: '100%' }} ref={devToolRef} />

src/preact/plugin.tsx

@@ -5,2 +5,3 @@ /** @jsxImportSource preact */
 import type { DevtoolsPanelProps } from './panel'
+import type { TanStackDevtoolsPluginProps } from '@tanstack/devtools'
 
@@ -19,4 +20,4 @@ export function createPreactPlugin({
       ...config,
-      render: (_el: HTMLElement, theme: 'light' | 'dark') => (
-        <Component theme={theme} />
+      render: (_el: HTMLElement, props: TanStackDevtoolsPluginProps) => (
+        <Component {...props} />
       ),
@@ -28,3 +29,3 @@ }
       ...config,
-      render: (_el: HTMLElement, _theme: 'light' | 'dark') => <></>,
+      render: (_el: HTMLElement, _props: TanStackDevtoolsPluginProps) => <></>,
     }
@@ -31,0 +32,0 @@ }

src/react/panel.tsx

 import { useEffect, useRef } from 'react'
+import type { TanStackDevtoolsPluginProps } from '@tanstack/devtools'
 
-export interface DevtoolsPanelProps {
-  theme?: 'light' | 'dark'
-}
+export interface DevtoolsPanelProps extends TanStackDevtoolsPluginProps {}
 
@@ -25,5 +24,5 @@ /**
 export function createReactPanel<
-  TComponentProps extends DevtoolsPanelProps | undefined,
+  TComponentProps extends TanStackDevtoolsPluginProps,
   TCoreDevtoolsClass extends {
-    mount: (el: HTMLElement, theme: 'light' | 'dark') => void
+    mount: (el: HTMLElement, props: TanStackDevtoolsPluginProps) => void
     unmount: () => void
@@ -40,3 +39,3 @@ },
       if (devToolRef.current) {
-        devtools.current.mount(devToolRef.current, props?.theme ?? 'dark')
+        devtools.current.mount(devToolRef.current, props)
       }
@@ -50,3 +49,3 @@
       }
-    }, [props?.theme])
+    }, [props])
 
@@ -53,0 +52,0 @@ return <div style={{ height: '100%' }} ref={devToolRef} />

src/react/plugin.tsx

 import type { JSX } from 'react'
 import type { DevtoolsPanelProps } from './panel'
+import type { TanStackDevtoolsPluginProps } from '@tanstack/devtools'
 
@@ -16,4 +17,4 @@ export function createReactPlugin({
       ...config,
-      render: (_el: HTMLElement, theme: 'light' | 'dark') => (
-        <Component theme={theme} />
+      render: (_el: HTMLElement, props: TanStackDevtoolsPluginProps) => (
+        <Component {...props} />
       ),
@@ -25,3 +26,3 @@ }
       ...config,
-      render: (_el: HTMLElement, _theme: 'light' | 'dark') => <></>,
+      render: (_el: HTMLElement, _props: TanStackDevtoolsPluginProps) => <></>,
     }
@@ -28,0 +29,0 @@ }

src/solid/class-mount-impl.tsx

@@ -5,15 +5,14 @@ /** @jsxImportSource solid-js - we use Solid.js as JSX here */
 import { Portal, render } from 'solid-js/web'
+
 import type { JSX } from 'solid-js'
+import type { TanStackDevtoolsPluginProps } from '@tanstack/devtools'
 
 export function __mountComponent(
   el: HTMLElement,
-  theme: 'light' | 'dark',
-  importFn: () => Promise<{ default: () => JSX.Element }>,
+  props: TanStackDevtoolsPluginProps,
+  importFn: () => Promise<{
+    default: (props: TanStackDevtoolsPluginProps) => JSX.Element
+  }>,
 ): () => void {
   const Component = lazy(importFn)
-  const ThemeProvider = lazy(() =>
-    import('@tanstack/devtools-ui').then((m) => ({
-      default: m.ThemeContextProvider,
-    })),
-  )
 
@@ -24,5 +23,3 @@ return render(
         <div style={{ height: '100%' }}>
-          <ThemeProvider theme={theme}>
-            <Component />
-          </ThemeProvider>
+          <Component {...props} />
         </div>
@@ -29,0 +26,0 @@ </Portal>

src/solid/class.test.tsx

@@ -31,4 +31,5 @@ /** @jsxImportSource solid-js - we use Solid.js as JSX here */
     const el = document.createElement('div')
-    await instance.mount(el, 'dark')
-    expect(mountComponentMock).toHaveBeenCalledWith(el, 'dark', importFn)
+    const props = { theme: 'dark' as const, devtoolsOpen: true }
+    await instance.mount(el, props)
+    expect(mountComponentMock).toHaveBeenCalledWith(el, props, importFn)
   })
@@ -39,5 +40,11 @@
     const instance = new DevtoolsCore()
-    await instance.mount(document.createElement('div'), 'dark')
+    await instance.mount(document.createElement('div'), {
+      theme: 'dark',
+      devtoolsOpen: true,
+    })
     await expect(
-      instance.mount(document.createElement('div'), 'dark'),
+      instance.mount(document.createElement('div'), {
+        theme: 'dark',
+        devtoolsOpen: true,
+      }),
     ).rejects.toThrow('Devtools is already mounted')
@@ -55,6 +62,12 @@ })
     const instance = new DevtoolsCore()
-    await instance.mount(document.createElement('div'), 'dark')
+    await instance.mount(document.createElement('div'), {
+      theme: 'dark',
+      devtoolsOpen: true,
+    })
     instance.unmount()
     await expect(
-      instance.mount(document.createElement('div'), 'dark'),
+      instance.mount(document.createElement('div'), {
+        theme: 'dark',
+        devtoolsOpen: true,
+      }),
     ).resolves.not.toThrow()
@@ -66,3 +79,6 @@ })
     const instance = new DevtoolsCore()
-    await instance.mount(document.createElement('div'), 'dark')
+    await instance.mount(document.createElement('div'), {
+      theme: 'dark',
+      devtoolsOpen: true,
+    })
     instance.unmount()
@@ -75,3 +91,6 @@ expect(disposeMock).toHaveBeenCalled()
     const instance = new DevtoolsCore()
-    const mountPromise = instance.mount(document.createElement('div'), 'dark')
+    const mountPromise = instance.mount(document.createElement('div'), {
+      theme: 'dark',
+      devtoolsOpen: true,
+    })
     // Unmount while mount is in progress — triggers abort path
@@ -88,3 +107,6 @@ // Note: since the mock resolves immediately, this tests the #abortMount flag
     const noOpInstance = new NoOpDevtoolsCore()
-    await noOpInstance.mount(document.createElement('div'), 'dark')
+    await noOpInstance.mount(document.createElement('div'), {
+      theme: 'dark',
+      devtoolsOpen: true,
+    })
     expect(mountComponentMock).not.toHaveBeenCalled()
@@ -96,5 +118,11 @@ })
     const noOpInstance = new NoOpDevtoolsCore()
-    await noOpInstance.mount(document.createElement('div'), 'dark')
+    await noOpInstance.mount(document.createElement('div'), {
+      theme: 'dark',
+      devtoolsOpen: true,
+    })
     await expect(
-      noOpInstance.mount(document.createElement('div'), 'dark'),
+      noOpInstance.mount(document.createElement('div'), {
+        theme: 'dark',
+        devtoolsOpen: true,
+      }),
     ).resolves.not.toThrow()
@@ -112,5 +140,8 @@ })
     const noOpInstance = new NoOpDevtoolsCore()
-    await noOpInstance.mount(document.createElement('div'), 'dark')
+    await noOpInstance.mount(document.createElement('div'), {
+      theme: 'dark',
+      devtoolsOpen: true,
+    })
     expect(() => noOpInstance.unmount()).not.toThrow()
   })
 })

src/solid/class.ts

@@ -0,1 +1,2 @@
+import type { TanStackDevtoolsPluginProps } from '@tanstack/devtools'
 import type { JSX } from 'solid-js'
@@ -13,3 +14,5 @@
 export function constructCoreClass(
-  importFn: () => Promise<{ default: () => JSX.Element }>,
+  importFn: () => Promise<{
+    default: (props: TanStackDevtoolsPluginProps) => JSX.Element
+  }>,
 ) {
@@ -24,3 +27,6 @@ class DevtoolsCore {
 
-    async mount<T extends HTMLElement>(el: T, theme: 'light' | 'dark') {
+    async mount<T extends HTMLElement>(
+      el: T,
+      props: TanStackDevtoolsPluginProps,
+    ) {
       if (this.#isMounted || this.#isMounting) {
@@ -40,3 +46,3 @@ throw new Error('Devtools is already mounted')
 
-        this.#dispose = __mountComponent(el, theme, importFn)
+        this.#dispose = __mountComponent(el, props, importFn)
         this.#isMounted = true
@@ -54,2 +60,3 @@ this.#isMounting = false
       }
+
       if (this.#isMounting) {
@@ -60,2 +67,3 @@ this.#abortMount = true
       }
+
       this.#dispose?.()
@@ -70,3 +78,6 @@ this.#isMounted = false
     }
-    async mount<T extends HTMLElement>(_el: T, _theme: 'light' | 'dark') {}
+    async mount<T extends HTMLElement>(
+      _el: T,
+      _props: TanStackDevtoolsPluginProps,
+    ) {}
     unmount() {}
@@ -73,0 +84,0 @@ }

src/solid/panel.tsx

@@ -5,10 +5,9 @@ /** @jsxImportSource solid-js - we use Solid.js as JSX here */
 import type { ClassType } from './class'
+import type { TanStackDevtoolsPluginProps } from '@tanstack/devtools'
 
-export interface DevtoolsPanelProps {
-  theme?: 'light' | 'dark'
-}
+export interface DevtoolsPanelProps extends TanStackDevtoolsPluginProps {}
 
-export function createSolidPanel<
-  TComponentProps extends DevtoolsPanelProps | undefined,
->(CoreClass: ClassType) {
+export function createSolidPanel<TComponentProps extends DevtoolsPanelProps>(
+  CoreClass: ClassType,
+) {
   function Panel(props: TComponentProps) {
@@ -19,3 +18,3 @@ let devToolRef: HTMLDivElement | undefined
       if (devToolRef) {
-        devtools().mount(devToolRef, props?.theme ?? 'dark')
+        devtools().mount(devToolRef, props)
       }
@@ -22,0 +21,0 @@ onCleanup(() => {

src/solid/plugin.tsx

@@ -5,2 +5,3 @@ /** @jsxImportSource solid-js - we use Solid.js as JSX here */
 import type { DevtoolsPanelProps } from './panel'
+import type { TanStackDevtoolsPluginProps } from '@tanstack/devtools'
 
@@ -19,4 +20,4 @@ export function createSolidPlugin({
       ...config,
-      render: (_el: HTMLElement, theme: 'light' | 'dark') => {
-        return <Component theme={theme} />
+      render: (_el: HTMLElement, props: TanStackDevtoolsPluginProps) => {
+        return <Component {...props} />
       },
@@ -28,3 +29,3 @@ }
       ...config,
-      render: (_el: HTMLElement, _theme: 'light' | 'dark') => <></>,
+      render: (_el: HTMLElement, _props: TanStackDevtoolsPluginProps) => <></>,
     }
@@ -31,0 +32,0 @@ }

src/vue/panel.ts

 import { defineComponent, h, onMounted, onUnmounted, ref } from 'vue'
+import type { TanStackDevtoolsPluginProps } from '@tanstack/devtools'
 import type { DefineComponent } from 'vue'
 
-export interface DevtoolsPanelProps {
-  theme?: 'dark' | 'light' | 'system'
-}
+export interface DevtoolsPanelProps extends TanStackDevtoolsPluginProps {}
 
@@ -11,3 +10,3 @@ export function createVuePanel<
   TCoreDevtoolsClass extends {
-    mount: (el: HTMLElement, theme?: DevtoolsPanelProps['theme']) => void
+    mount: (el: HTMLElement, props?: TanStackDevtoolsPluginProps) => void
     unmount: () => void
@@ -17,4 +16,4 @@ },
   const props = {
-    theme: {
-      type: String as () => DevtoolsPanelProps['theme'],
+    props: {
+      type: Object as () => DevtoolsPanelProps,
     },
@@ -37,3 +36,3 @@ devtoolsProps: {
         if (devToolRef.value) {
-          instance.mount(devToolRef.value, config.theme)
+          instance.mount(devToolRef.value, config.props)
         }
@@ -40,0 +39,0 @@ })

dist/preact/esm/index.js.map

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

dist/react/esm/index.js.map

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

dist/solid/esm/chunk/UX5ZZ4MG.js

-import { render, createComponent, Portal, ssr, ssrStyleProperty, escape } from 'solid-js/web';
-import { lazy } from 'solid-js';
-
-// src/solid/class-mount-impl.tsx
-var _tmpl$ = ['<div style="', '">', "</div>"];
-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() {
-      return ssr(_tmpl$, ssrStyleProperty("height:", "100%"), escape(createComponent(ThemeProvider, {
-        theme,
-        get children() {
-          return createComponent(Component, {});
-        }
-      })));
-    }
-  }), el);
-}
-
-export { __mountComponent };

dist/solid/esm/chunk/ZXPCWXRH.js

-import { render, createComponent, Portal, insert, template } from 'solid-js/web';
-import { lazy } from 'solid-js';
-
-// src/solid/class-mount-impl.tsx
-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);
-}
-
-export { __mountComponent };

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

-export { __mountComponent } from '../chunk/UX5ZZ4MG.js';

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

-export { __mountComponent } from '../chunk/ZXPCWXRH.js';

dist/vue/esm/index.js.map

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

No alert changes

Improved metrics

Total package byte prevSize

106085

2.15%

Dependency count

5

-16.67%

Lines of code

1396

0.94%

Worsened metrics

Dev dependency count

4

33.33%

Number of package files

66

-4.35%

Dependency changes

• - Removed

  @tanstack/devtools-ui@^0.5.0

• - Removed

  @tanstack/devtools-ui@0.5.3
  (transitive)

• - Removed

  clsx@2.1.1
  (transitive)

• - Removed

  dayjs@1.11.21
  (transitive)

• - Removed

  goober@2.1.19
  (transitive)