@tanstack/devtools-utils 0.3.4 → 0.4.0

package/dist/preact/esm/index.js

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

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

@@ -1,6 +1,5 @@
-/** @jsxImportSource preact */
-export interface DevtoolsPanelProps {
-    theme?: 'light' | 'dark';
+import { TanStackDevtoolsPluginProps } from '@tanstack/devtools';
+export interface DevtoolsPanelProps extends TanStackDevtoolsPluginProps {
 }
 /**
  * Creates a Preact component that dynamically imports and mounts a devtools panel. SSR friendly.
@@ -19,7 +18,7 @@ export interface DevtoolsPanelProps {
  * const [PreactDevtoolsPanel, NoOpPreactDevtoolsPanel] = createPreactPanel('@tanstack/devtools-preact', 'DevtoolsCore')
  * ```
  */
-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];

package/dist/preact/esm/panel.js

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

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

@@ -1 +1 @@
-{"version":3,"file":"panel.js","sources":["../../../src/preact/panel.tsx"],"sourcesContent":["/** @jsxImportSource preact */\n\nimport { useEffect, useRef } from 'preact/hooks'\n\nexport interface DevtoolsPanelProps {\n  theme?: 'light' | 'dark'\n}\n\n/**\n * Creates a Preact component that dynamically imports and mounts a devtools panel. SSR friendly.\n * @param devtoolsPackageName The name of the devtools package to be imported, e.g., '@tanstack/devtools-preact'\n * @param importName The name of the export to be imported from the devtools package (e.g., 'default' or 'DevtoolsCore')\n * @returns A Preact component that mounts the devtools\n * @example\n * ```tsx\n * // if the export is default\n * const [PreactDevtoolsPanel, NoOpPreactDevtoolsPanel] = createPreactPanel('@tanstack/devtools-preact')\n * ```\n *\n * @example\n * ```tsx\n * // if the export is named differently\n * const [PreactDevtoolsPanel, NoOpPreactDevtoolsPanel] = createPreactPanel('@tanstack/devtools-preact', 'DevtoolsCore')\n * ```\n */\nexport function createPreactPanel<\n  TComponentProps extends DevtoolsPanelProps | undefined,\n  TCoreDevtoolsClass extends {\n    mount: (el: HTMLElement, theme: 'light' | 'dark') => void\n    unmount: () => void\n  },\n>(CoreClass: new () => TCoreDevtoolsClass) {\n  function Panel(props: TComponentProps) {\n    const devToolRef = useRef<HTMLDivElement>(null)\n    const devtools = useRef<TCoreDevtoolsClass | null>(null)\n    useEffect(() => {\n      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"}

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

@@ -1,17 +1,18 @@
 import { JSX } from 'preact';
 import { DevtoolsPanelProps } from './panel.js';
+import { TanStackDevtoolsPluginProps } from '@tanstack/devtools';
 export declare function createPreactPlugin({ 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/preact/esm/plugin.js

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

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

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

package/dist/react/esm/index.js

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

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

@@ -1,5 +1,5 @@
-export interface DevtoolsPanelProps {
-    theme?: 'light' | 'dark';
+import { TanStackDevtoolsPluginProps } from '@tanstack/devtools';
+export interface DevtoolsPanelProps extends TanStackDevtoolsPluginProps {
 }
 /**
  * Creates a React component that dynamically imports and mounts a devtools panel. SSR friendly.
@@ -18,7 +18,7 @@ export interface DevtoolsPanelProps {
  * const [ReactDevtoolsPanel, NoOpReactDevtoolsPanel] = createReactPanel('@tanstack/devtools-react', 'DevtoolsCore')
  * ```
  */
-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];

package/dist/react/esm/panel.js

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

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

@@ -1 +1 @@
-{"version":3,"file":"panel.js","sources":["../../../src/react/panel.tsx"],"sourcesContent":["import { useEffect, useRef } from 'react'\n\nexport interface DevtoolsPanelProps {\n  theme?: 'light' | 'dark'\n}\n\n/**\n * Creates a React component that dynamically imports and mounts a devtools panel. SSR friendly.\n * @param devtoolsPackageName The name of the devtools package to be imported, e.g., '@tanstack/devtools-react'\n * @param importName The name of the export to be imported from the devtools package (e.g., 'default' or 'DevtoolsCore')\n * @returns A React component that mounts the devtools\n * @example\n * ```tsx\n * // if the export is default\n * const [ReactDevtoolsPanel, NoOpReactDevtoolsPanel] = createReactPanel('@tanstack/devtools-react')\n * ```\n *\n * @example\n * ```tsx\n * // if the export is named differently\n * const [ReactDevtoolsPanel, NoOpReactDevtoolsPanel] = createReactPanel('@tanstack/devtools-react', 'DevtoolsCore')\n * ```\n */\nexport function createReactPanel<\n  TComponentProps extends DevtoolsPanelProps | undefined,\n  TCoreDevtoolsClass extends {\n    mount: (el: HTMLElement, theme: 'light' | 'dark') => void\n    unmount: () => void\n  },\n>(CoreClass: new () => TCoreDevtoolsClass) {\n  function Panel(props: TComponentProps) {\n    const devToolRef = useRef<HTMLDivElement>(null)\n    const devtools = useRef<TCoreDevtoolsClass | null>(null)\n    useEffect(() => {\n      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"}

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

@@ -1,17 +1,18 @@
 import { JSX } from 'react';
 import { DevtoolsPanelProps } from './panel.js';
+import { TanStackDevtoolsPluginProps } from '@tanstack/devtools';
 export declare function createReactPlugin({ Component, ...config }: {
     name: string;
     id?: string;
     defaultOpen?: boolean;
     Component: (props: DevtoolsPanelProps) => JSX.Element;
 }): 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;
     id?: string;
     defaultOpen?: boolean;
 }, () => {
-    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;
     id?: string;
     defaultOpen?: boolean;

package/dist/react/esm/plugin.js

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

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

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

package/dist/solid/esm/chunk/{ZXPCWXRH.js → 7TSS377A.js}

@@ -3,21 +3,13 @@ import { lazy } from 'solid-js';
 
 // src/solid/class-mount-impl.tsx
 var _tmpl$ = /* @__PURE__ */ template(`<div style=height:100%>`);
-function __mountComponent(el, theme, importFn) {
+function __mountComponent(el, props, 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, {});
-        }
-      }));
+      insert(_el$, createComponent(Component, props));
       return _el$;
     }
   }), el);

package/dist/solid/esm/chunk/{UX5ZZ4MG.js → WUD4VD3N.js}

@@ -3,20 +3,12 @@ import { lazy } from 'solid-js';
 
 // src/solid/class-mount-impl.tsx
 var _tmpl$ = ['<div style="', '">', "</div>"];
-function __mountComponent(el, theme, importFn) {
+function __mountComponent(el, props, 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, {});
-        }
-      })));
+      return ssr(_tmpl$, ssrStyleProperty("height:", "100%"), escape(createComponent(Component, props)));
     }
   }), el);
 }

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

@@ -0,0 +1 @@
+export { __mountComponent } from '../chunk/WUD4VD3N.js';

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

@@ -0,0 +1 @@
+export { __mountComponent } from '../chunk/7TSS377A.js';

package/dist/solid/esm/dev.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/index.d.ts

@@ -1,3 +1,4 @@
+import { TanStackDevtoolsPluginProps } from '@tanstack/devtools';
 import * as solid_js from 'solid-js';
 import { JSX } from 'solid-js';
 
@@ -11,19 +12,19 @@ import { JSX } from 'solid-js';
  * @returns Tuple containing the DevtoolsCore class and a NoOpDevtoolsCore class
  */
 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;
@@ -33,10 +34,9 @@ declare function constructCoreClass(importFn: () => Promise<{
 }];
 type ClassType = ReturnType<typeof constructCoreClass>[0];
 
-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];
 
 /** @jsxImportSource solid-js - we use Solid.js as JSX here */
 
@@ -46,12 +46,12 @@ declare function createSolidPlugin({ Component, ...config }: {
     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;
@@ -59,8 +59,8 @@ declare function createSolidPlugin({ Component, ...config }: {
 
 /** @jsxImportSource solid-js - we use Solid.js as JSX here */
 
-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 };