@tanstack/devtools-utils 0.0.1

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2025 TanStack
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,3 @@
+# @tanstack/devtools-utils
+
+This package is still under active development and might have breaking changes in the future. Please use it with caution.

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

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

package/dist/react/esm/index.js

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

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

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

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

@@ -0,0 +1,24 @@
+export interface DevtoolsPanelProps {
+    theme?: 'light' | 'dark';
+}
+/**
+ * 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')
+ * ```
+ */
+export declare function createReactPanel<TComponentProps extends DevtoolsPanelProps | undefined, TCoreDevtoolsClass extends {
+    mount: (el: HTMLElement, theme: 'light' | 'dark') => 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

@@ -0,0 +1,27 @@
+import { jsx, Fragment } from "react/jsx-runtime";
+import { useRef, useEffect } from "react";
+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 () => {
+        devtools.current?.unmount();
+      };
+    }, [props?.theme]);
+    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

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

@@ -0,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\n      devtools.current = new CoreClass()\n\n      if (devToolRef.current) {\n        devtools.current.mount(devToolRef.current, props?.theme ?? 'dark')\n      }\n\n      return () => {\n        devtools.current?.unmount()\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;AAEtB,eAAS,UAAU,IAAI,UAAA;AAEvB,UAAI,WAAW,SAAS;AACtB,iBAAS,QAAQ,MAAM,WAAW,SAAS,OAAO,SAAS,MAAM;AAAA,MACnE;AAEA,aAAO,MAAM;AACX,iBAAS,SAAS,QAAA;AAAA,MACpB;AAAA,IACF,GAAG,CAAC,OAAO,KAAK,CAAC;AAEjB,WAAO,oBAAC,SAAI,OAAO,EAAE,QAAQ,OAAA,GAAU,KAAK,YAAY;AAAA,EAC1D;AAEA,WAAS,UAAU,QAAyB;AAC1C,WAAO,oBAAA,UAAA,EAAE;AAAA,EACX;AACA,SAAO,CAAC,OAAO,SAAS;AAC1B;"}

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

@@ -0,0 +1,9 @@
+import { JSX } from 'react';
+import { DevtoolsPanelProps } from './panel.js';
+export declare function createReactPlugin(name: string, Component: (props: DevtoolsPanelProps) => JSX.Element): readonly [() => {
+    name: string;
+    render: (_el: HTMLElement, theme: "light" | "dark") => import("react/jsx-runtime").JSX.Element;
+}, () => {
+    name: string;
+    render: (_el: HTMLElement, _theme: "light" | "dark") => import("react/jsx-runtime").JSX.Element;
+}];

package/dist/react/esm/plugin.js

@@ -0,0 +1,20 @@
+import { jsx, Fragment } from "react/jsx-runtime";
+function createReactPlugin(name, Component) {
+  function Plugin() {
+    return {
+      name,
+      render: (_el, theme) => /* @__PURE__ */ jsx(Component, { theme })
+    };
+  }
+  function NoOpPlugin() {
+    return {
+      name,
+      render: (_el, _theme) => /* @__PURE__ */ jsx(Fragment, {})
+    };
+  }
+  return [Plugin, NoOpPlugin];
+}
+export {
+  createReactPlugin
+};
+//# sourceMappingURL=plugin.js.map

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

@@ -0,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  name: string,\n  Component: (props: DevtoolsPanelProps) => JSX.Element,\n) {\n  function Plugin() {\n    return {\n      name: name,\n      render: (_el: HTMLElement, theme: 'light' | 'dark') => (\n        <Component theme={theme} />\n      ),\n    }\n  }\n  function NoOpPlugin() {\n    return {\n      name: name,\n      render: (_el: HTMLElement, _theme: 'light' | 'dark') => <></>,\n    }\n  }\n  return [Plugin, NoOpPlugin] as const\n}\n"],"names":[],"mappings":";AAGO,SAAS,kBACd,MACA,WACA;AACA,WAAS,SAAS;AAChB,WAAO;AAAA,MACL;AAAA,MACA,QAAQ,CAAC,KAAkB,UACzB,oBAAC,aAAU,MAAA,CAAc;AAAA,IAAA;AAAA,EAG/B;AACA,WAAS,aAAa;AACpB,WAAO;AAAA,MACL;AAAA,MACA,QAAQ,CAAC,KAAkB,WAA6B,oBAAA,UAAA,CAAA,CAAE;AAAA,IAAA;AAAA,EAE9D;AACA,SAAO,CAAC,QAAQ,UAAU;AAC5B;"}

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

@@ -0,0 +1,30 @@
+import { JSX } from 'solid-js';
+/**
+ * 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 importPath The path to the Solid component to be lazily imported
+ * @returns Tuple containing the DevtoolsCore class and a NoOpDevtoolsCore class
+ */
+export declare function constructCoreClass(Component: () => JSX.Element): readonly [{
+    new (): {
+        #isMounted: boolean;
+        #dispose?: () => void;
+        #Component: any;
+        #ThemeProvider: any;
+        mount<T extends HTMLElement>(el: T, theme: "light" | "dark"): Promise<void>;
+        unmount(): void;
+    };
+}, {
+    new (): {
+        mount<T extends HTMLElement>(_el: T, _theme: "light" | "dark"): Promise<void>;
+        unmount(): void;
+        #isMounted: boolean;
+        #dispose?: () => void;
+        #Component: any;
+        #ThemeProvider: any;
+    };
+}];
+export type ClassType = ReturnType<typeof constructCoreClass>[0];

package/dist/solid/esm/class.js

@@ -0,0 +1,72 @@
+import { createComponent, getNextElement, template, insert } from "solid-js/web";
+var _tmpl$ = /* @__PURE__ */ template(`<div>`);
+function constructCoreClass(Component) {
+  class DevtoolsCore {
+    #isMounted = false;
+    #dispose;
+    #Component;
+    #ThemeProvider;
+    constructor() {
+    }
+    async mount(el, theme) {
+      const {
+        lazy
+      } = await import("solid-js");
+      const {
+        render,
+        Portal
+      } = await import("solid-js/web");
+      if (this.#isMounted) {
+        throw new Error("Devtools is already mounted");
+      }
+      const mountTo = el;
+      const dispose = render(() => {
+        this.#Component = lazy(async () => ({
+          default: Component
+        }));
+        this.#ThemeProvider = lazy(() => import("@tanstack/devtools-ui").then((mod) => ({
+          default: mod.ThemeContextProvider
+        })));
+        const Devtools = this.#Component;
+        const ThemeProvider = this.#ThemeProvider;
+        return createComponent(Portal, {
+          mount: mountTo,
+          get children() {
+            var _el$ = getNextElement(_tmpl$);
+            _el$.style.setProperty("height", "100%");
+            insert(_el$, createComponent(ThemeProvider, {
+              theme,
+              get children() {
+                return createComponent(Devtools, {});
+              }
+            }));
+            return _el$;
+          }
+        });
+      }, mountTo);
+      this.#isMounted = true;
+      this.#dispose = dispose;
+    }
+    unmount() {
+      if (!this.#isMounted) {
+        throw new Error("Devtools is not mounted");
+      }
+      this.#dispose?.();
+      this.#isMounted = false;
+    }
+  }
+  class NoOpDevtoolsCore extends DevtoolsCore {
+    constructor() {
+      super();
+    }
+    async mount(_el, _theme) {
+    }
+    unmount() {
+    }
+  }
+  return [DevtoolsCore, NoOpDevtoolsCore];
+}
+export {
+  constructCoreClass
+};
+//# sourceMappingURL=class.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"class.js","sources":["../../../src/solid/class.tsx"],"sourcesContent":["/** @jsxImportSource solid-js - we use Solid.js as JSX here */\n\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 importPath The path to the Solid component to be lazily imported\n * @returns Tuple containing the DevtoolsCore class and a NoOpDevtoolsCore class\n */\nexport function constructCoreClass(Component: () => JSX.Element) {\n  class DevtoolsCore {\n    #isMounted = false\n    #dispose?: () => void\n    #Component: any\n    #ThemeProvider: any\n\n    constructor() {}\n\n    async mount<T extends HTMLElement>(el: T, theme: 'light' | 'dark') {\n      const { lazy } = await import('solid-js')\n      const { render, Portal } = await import('solid-js/web')\n      if (this.#isMounted) {\n        throw new Error('Devtools is already mounted')\n      }\n      const mountTo = el\n      const dispose = render(() => {\n        // eslint-disable-next-line @typescript-eslint/require-await\n        this.#Component = lazy(async () => ({ default: Component }))\n\n        this.#ThemeProvider = lazy(() =>\n          import('@tanstack/devtools-ui').then((mod) => ({\n            default: mod.ThemeContextProvider,\n          })),\n        )\n        const Devtools = this.#Component\n        const ThemeProvider = this.#ThemeProvider\n\n        return (\n          <Portal mount={mountTo}>\n            <div style={{ height: '100%' }}>\n              <ThemeProvider theme={theme}>\n                <Devtools />\n              </ThemeProvider>\n            </div>\n          </Portal>\n        )\n      }, mountTo)\n      this.#isMounted = true\n      this.#dispose = dispose\n    }\n\n    unmount() {\n      if (!this.#isMounted) {\n        throw new Error('Devtools is not mounted')\n      }\n      this.#dispose?.()\n      this.#isMounted = false\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  return [DevtoolsCore, NoOpDevtoolsCore] as const\n}\n\nexport type ClassType = ReturnType<typeof constructCoreClass>[0]\n"],"names":["constructCoreClass","Component","DevtoolsCore","constructor","mount","el","theme","lazy","render","Portal","Error","mountTo","dispose","default","then","mod","ThemeContextProvider","Devtools","ThemeProvider","_$createComponent","children","_el$","_$getNextElement","_tmpl$","style","setProperty","_$insert","unmount","NoOpDevtoolsCore","_el","_theme"],"mappings":";;AAaO,SAASA,mBAAmBC,WAA8B;AAAA,EAC/D,MAAMC,aAAa;AAAA,IACjB,aAAa;AAAA,IACb;AAAA,IACA;AAAA,IACA;AAAA,IAEAC,cAAc;AAAA,IAAC;AAAA,IAEf,MAAMC,MAA6BC,IAAOC,OAAyB;AACjE,YAAM;AAAA,QAAEC;AAAAA,MAAAA,IAAS,MAAM,OAAO,UAAU;AACxC,YAAM;AAAA,QAAEC;AAAAA,QAAQC;AAAAA,MAAAA,IAAW,MAAM,OAAO,cAAc;AACtD,UAAI,KAAK,YAAY;AACnB,cAAM,IAAIC,MAAM,6BAA6B;AAAA,MAC/C;AACA,YAAMC,UAAUN;AAChB,YAAMO,UAAUJ,OAAO,MAAM;AAE3B,aAAK,aAAaD,KAAK,aAAa;AAAA,UAAEM,SAASZ;AAAAA,QAAAA,EAAY;AAE3D,aAAK,iBAAiBM,KAAK,MACzB,OAAO,uBAAuB,EAAEO,KAAMC,CAAAA,SAAS;AAAA,UAC7CF,SAASE,IAAIC;AAAAA,QAAAA,EACb,CACJ;AACA,cAAMC,WAAW,KAAK;AACtB,cAAMC,gBAAgB,KAAK;AAE3B,eAAAC,gBACGV,QAAM;AAAA,UAACL,OAAOO;AAAAA,UAAO,IAAAS,WAAA;AAAA,gBAAAC,OAAAC,eAAAC,MAAA;AAAAF,iBAAAG,MAAAC,YAAA,UAAA,MAAA;AAAAC,mBAAAL,MAAAF,gBAEjBD,eAAa;AAAA,cAACZ;AAAAA,cAAY,IAAAc,WAAA;AAAA,uBAAAD,gBACxBF,UAAQ,EAAA;AAAA,cAAA;AAAA,YAAA,CAAA,CAAA;AAAA,mBAAAI;AAAAA,UAAA;AAAA,QAAA,CAAA;AAAA,MAKnB,GAAGV,OAAO;AACV,WAAK,aAAa;AAClB,WAAK,WAAWC;AAAAA,IAClB;AAAA,IAEAe,UAAU;AACR,UAAI,CAAC,KAAK,YAAY;AACpB,cAAM,IAAIjB,MAAM,yBAAyB;AAAA,MAC3C;AACA,WAAK,WAAA;AACL,WAAK,aAAa;AAAA,IACpB;AAAA,EAAA;AAAA,EAEF,MAAMkB,yBAAyB1B,aAAa;AAAA,IAC1CC,cAAc;AACZ,YAAA;AAAA,IACF;AAAA,IACA,MAAMC,MAA6ByB,KAAQC,QAA0B;AAAA,IAAC;AAAA,IACtEH,UAAU;AAAA,IAAC;AAAA,EAAA;AAEb,SAAO,CAACzB,cAAc0B,gBAAgB;AACxC;"}

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

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

package/dist/solid/esm/index.js

@@ -0,0 +1,9 @@
+import { constructCoreClass } from "./class.js";
+import { createSolidPanel } from "./panel.js";
+import { createSolidPlugin } from "./plugin.js";
+export {
+  constructCoreClass,
+  createSolidPanel,
+  createSolidPlugin
+};
+//# sourceMappingURL=index.js.map

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

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

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

@@ -0,0 +1,5 @@
+import { ClassType } from './class.js';
+export interface DevtoolsPanelProps {
+    theme?: 'light' | 'dark';
+}
+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];

package/dist/solid/esm/panel.js

@@ -0,0 +1,32 @@
+import { getNextElement, template, use } from "solid-js/web";
+import { onMount, onCleanup } from "solid-js";
+var _tmpl$ = /* @__PURE__ */ template(`<div>`);
+function createSolidPanel(CoreClass) {
+  function Panel(props) {
+    let devToolRef;
+    onMount(() => {
+      const devtools = new CoreClass();
+      if (devToolRef) {
+        devtools.mount(devToolRef, props?.theme ?? "dark");
+        onCleanup(() => {
+          devtools.unmount();
+        });
+      }
+    });
+    return (() => {
+      var _el$ = getNextElement(_tmpl$);
+      var _ref$ = devToolRef;
+      typeof _ref$ === "function" ? use(_ref$, _el$) : devToolRef = _el$;
+      _el$.style.setProperty("height", "100%");
+      return _el$;
+    })();
+  }
+  function NoOpPanel(_props) {
+    return [];
+  }
+  return [Panel, NoOpPanel];
+}
+export {
+  createSolidPanel
+};
+//# sourceMappingURL=panel.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"panel.js","sources":["../../../src/solid/panel.tsx"],"sourcesContent":["/** @jsxImportSource solid-js - we use Solid.js as JSX here */\n\nimport { onCleanup, onMount } from 'solid-js'\nimport type { ClassType } from './class'\n\nexport interface DevtoolsPanelProps {\n  theme?: 'light' | 'dark'\n}\n\nexport function createSolidPanel<\n  TComponentProps extends DevtoolsPanelProps | undefined,\n>(CoreClass: ClassType) {\n  function Panel(props: TComponentProps) {\n    let devToolRef: HTMLDivElement | undefined\n\n    onMount(() => {\n      const devtools = new CoreClass()\n\n      if (devToolRef) {\n        devtools.mount(devToolRef, props?.theme ?? 'dark')\n\n        onCleanup(() => {\n          devtools.unmount()\n        })\n      }\n    })\n\n    return <div style={{ height: '100%' }} ref={devToolRef} />\n  }\n\n  function NoOpPanel(_props: TComponentProps) {\n    return <></>\n  }\n\n  return [Panel, NoOpPanel] as const\n}\n"],"names":["createSolidPanel","CoreClass","Panel","props","devToolRef","onMount","devtools","mount","theme","onCleanup","unmount","_el$","_$getNextElement","_tmpl$","_ref$","_$use","style","setProperty","NoOpPanel","_props"],"mappings":";;;AASO,SAASA,iBAEdC,WAAsB;AACtB,WAASC,MAAMC,OAAwB;AACrC,QAAIC;AAEJC,YAAQ,MAAM;AACZ,YAAMC,WAAW,IAAIL,UAAAA;AAErB,UAAIG,YAAY;AACdE,iBAASC,MAAMH,YAAYD,OAAOK,SAAS,MAAM;AAEjDC,kBAAU,MAAM;AACdH,mBAASI,QAAAA;AAAAA,QACX,CAAC;AAAA,MACH;AAAA,IACF,CAAC;AAED,YAAA,MAAA;AAAA,UAAAC,OAAAC,eAAAC,MAAA;AAAA,UAAAC,QAA4CV;AAAU,aAAAU,UAAA,aAAAC,IAAAD,OAAAH,IAAA,IAAVP,aAAUO;AAAAA,WAAAK,MAAAC,YAAA,UAAA,MAAA;AAAA,aAAAN;AAAAA,IAAA,GAAA;AAAA,EACxD;AAEA,WAASO,UAAUC,QAAyB;AAC1C,WAAA,CAAA;AAAA,EACF;AAEA,SAAO,CAACjB,OAAOgB,SAAS;AAC1B;"}

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

@@ -0,0 +1,9 @@
+import { JSX } from 'solid-js';
+import { DevtoolsPanelProps } from './panel.js';
+export declare function createSolidPlugin(name: string, Component: (props: DevtoolsPanelProps) => JSX.Element): readonly [() => {
+    name: string;
+    render: (_el: HTMLElement, theme: "light" | "dark") => JSX.Element;
+}, () => {
+    name: string;
+    render: (_el: HTMLElement, _theme: "light" | "dark") => JSX.Element;
+}];

package/dist/solid/esm/plugin.js

@@ -0,0 +1,24 @@
+import { createComponent } from "solid-js/web";
+function createSolidPlugin(name, Component) {
+  function Plugin() {
+    return {
+      name,
+      render: (_el, theme) => {
+        return createComponent(Component, {
+          theme
+        });
+      }
+    };
+  }
+  function NoOpPlugin() {
+    return {
+      name,
+      render: (_el, _theme) => []
+    };
+  }
+  return [Plugin, NoOpPlugin];
+}
+export {
+  createSolidPlugin
+};
+//# sourceMappingURL=plugin.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"plugin.js","sources":["../../../src/solid/plugin.tsx"],"sourcesContent":["/** @jsxImportSource solid-js - we use Solid.js as JSX here */\n\nimport type { JSX } from 'solid-js'\nimport type { DevtoolsPanelProps } from './panel'\n\nexport function createSolidPlugin(\n  name: string,\n  Component: (props: DevtoolsPanelProps) => JSX.Element,\n) {\n  function Plugin() {\n    return {\n      name: name,\n      render: (_el: HTMLElement, theme: 'light' | 'dark') => {\n        return <Component theme={theme} />\n      },\n    }\n  }\n  function NoOpPlugin() {\n    return {\n      name: name,\n      render: (_el: HTMLElement, _theme: 'light' | 'dark') => <></>,\n    }\n  }\n  return [Plugin, NoOpPlugin] as const\n}\n"],"names":["createSolidPlugin","name","Component","Plugin","render","_el","theme","_$createComponent","NoOpPlugin","_theme"],"mappings":";AAKO,SAASA,kBACdC,MACAC,WACA;AACA,WAASC,SAAS;AAChB,WAAO;AAAA,MACLF;AAAAA,MACAG,QAAQA,CAACC,KAAkBC,UAA4B;AACrD,eAAAC,gBAAQL,WAAS;AAAA,UAACI;AAAAA,QAAAA,CAAY;AAAA,MAChC;AAAA,IAAA;AAAA,EAEJ;AACA,WAASE,aAAa;AACpB,WAAO;AAAA,MACLP;AAAAA,MACAG,QAAQA,CAACC,KAAkBI,WAAwB,CAAA;AAAA,IAAA;AAAA,EAEvD;AACA,SAAO,CAACN,QAAQK,UAAU;AAC5B;"}

package/package.json

@@ -0,0 +1,76 @@
+{
+  "name": "@tanstack/devtools-utils",
+  "version": "0.0.1",
+  "description": "TanStack Devtools utilities for creating your own devtools.",
+  "author": "Tanner Linsley",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/TanStack/devtools.git",
+    "directory": "packages/devtools"
+  },
+  "homepage": "https://tanstack.com/devtools",
+  "funding": {
+    "type": "github",
+    "url": "https://github.com/sponsors/tannerlinsley"
+  },
+  "keywords": [
+    "devtools"
+  ],
+  "type": "module",
+  "exports": {
+    "./react": {
+      "import": {
+        "types": "./dist/react/esm/index.d.ts",
+        "default": "./dist/react/esm/index.js"
+      }
+    },
+    "./solid": {
+      "import": {
+        "types": "./dist/solid/esm/index.d.ts",
+        "default": "./dist/solid/esm/index.js"
+      }
+    },
+    "./package.json": "./package.json"
+  },
+  "sideEffects": false,
+  "engines": {
+    "node": ">=18"
+  },
+  "dependencies": {
+    "@tanstack/devtools-ui": "^0.3.5"
+  },
+  "peerDependencies": {
+    "@types/react": ">=19.0.0",
+    "react": ">=19.0.0",
+    "solid-js": ">=1.9.7"
+  },
+  "peerDependenciesMeta": {
+    "react": {
+      "optional": true
+    },
+    "@types/react": {
+      "optional": true
+    },
+    "solid-js": {
+      "optional": true
+    }
+  },
+  "files": [
+    "dist/",
+    "src"
+  ],
+  "devDependencies": {
+    "vite-plugin-solid": "^2.11.8"
+  },
+  "scripts": {
+    "clean": "premove ./build ./dist",
+    "lint:fix": "eslint ./src --fix",
+    "test:eslint": "eslint ./src",
+    "test:lib": "vitest",
+    "test:lib:dev": "pnpm test:lib --watch",
+    "test:types": "tsc",
+    "test:build": "publint --strict",
+    "build": "vite build && vite build --config ./vite.config.solid.ts "
+  }
+}

package/src/react/index.ts

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

package/src/react/panel.tsx

@@ -0,0 +1,55 @@
+import { useEffect, useRef } from 'react'
+
+export interface DevtoolsPanelProps {
+  theme?: 'light' | 'dark'
+}
+
+/**
+ * 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')
+ * ```
+ */
+export function createReactPanel<
+  TComponentProps extends DevtoolsPanelProps | undefined,
+  TCoreDevtoolsClass extends {
+    mount: (el: HTMLElement, theme: 'light' | 'dark') => void
+    unmount: () => void
+  },
+>(CoreClass: new () => TCoreDevtoolsClass) {
+  function Panel(props: TComponentProps) {
+    const devToolRef = useRef<HTMLDivElement>(null)
+    const devtools = useRef<TCoreDevtoolsClass | null>(null)
+    useEffect(() => {
+      if (devtools.current) return
+
+      devtools.current = new CoreClass()
+
+      if (devToolRef.current) {
+        devtools.current.mount(devToolRef.current, props?.theme ?? 'dark')
+      }
+
+      return () => {
+        devtools.current?.unmount()
+      }
+    }, [props?.theme])
+
+    return <div style={{ height: '100%' }} ref={devToolRef} />
+  }
+
+  function NoOpPanel(_props: TComponentProps) {
+    return <></>
+  }
+  return [Panel, NoOpPanel] as const
+}

package/src/react/plugin.tsx

@@ -0,0 +1,23 @@
+import type { JSX } from 'react'
+import type { DevtoolsPanelProps } from './panel'
+
+export function createReactPlugin(
+  name: string,
+  Component: (props: DevtoolsPanelProps) => JSX.Element,
+) {
+  function Plugin() {
+    return {
+      name: name,
+      render: (_el: HTMLElement, theme: 'light' | 'dark') => (
+        <Component theme={theme} />
+      ),
+    }
+  }
+  function NoOpPlugin() {
+    return {
+      name: name,
+      render: (_el: HTMLElement, _theme: 'light' | 'dark') => <></>,
+    }
+  }
+  return [Plugin, NoOpPlugin] as const
+}

package/src/solid/class.test.tsx

@@ -0,0 +1,118 @@
+/** @jsxImportSource solid-js - we use Solid.js as JSX here */
+import { beforeEach, describe, expect, it, vi } from 'vitest'
+import { constructCoreClass } from './class'
+
+const lazyImportMock = vi.fn((fn) => fn())
+const renderMock = vi.fn()
+const portalMock = vi.fn((props: any) => <div>{props.children}</div>)
+
+vi.mock('solid-js', async () => {
+  const actual = await vi.importActual<any>('solid-js')
+  return {
+    ...actual,
+    lazy: lazyImportMock,
+  }
+})
+
+vi.mock('solid-js/web', async () => {
+  const actual = await vi.importActual<any>('solid-js/web')
+  return {
+    ...actual,
+    render: renderMock,
+    Portal: portalMock,
+  }
+})
+
+describe('constructCoreClass', () => {
+  beforeEach(() => {
+    vi.clearAllMocks()
+  })
+  it('should export DevtoolsCore and NoOpDevtoolsCore classes and make no calls to Solid.js primitives', () => {
+    const [DevtoolsCore, NoOpDevtoolsCore] = constructCoreClass(() => (
+      <div>Test Component</div>
+    ))
+    expect(DevtoolsCore).toBeDefined()
+    expect(NoOpDevtoolsCore).toBeDefined()
+    expect(lazyImportMock).not.toHaveBeenCalled()
+  })
+
+  it('DevtoolsCore should call solid primitives when mount is called', async () => {
+    const [DevtoolsCore, _] = constructCoreClass(() => (
+      <div>Test Component</div>
+    ))
+    const instance = new DevtoolsCore()
+    await instance.mount(document.createElement('div'), 'dark')
+    expect(renderMock).toHaveBeenCalled()
+  })
+
+  it('DevtoolsCore should throw if mount is called twice without unmounting', async () => {
+    const [DevtoolsCore, _] = constructCoreClass(() => (
+      <div>Test Component</div>
+    ))
+    const instance = new DevtoolsCore()
+    await instance.mount(document.createElement('div'), 'dark')
+    await expect(
+      instance.mount(document.createElement('div'), 'dark'),
+    ).rejects.toThrow('Devtools is already mounted')
+  })
+
+  it('DevtoolsCore should throw if unmount is called before mount', () => {
+    const [DevtoolsCore, _] = constructCoreClass(() => (
+      <div>Test Component</div>
+    ))
+    const instance = new DevtoolsCore()
+    expect(() => instance.unmount()).toThrow('Devtools is not mounted')
+  })
+
+  it('DevtoolsCore should allow mount after unmount', async () => {
+    const [DevtoolsCore, _] = constructCoreClass(() => (
+      <div>Test Component</div>
+    ))
+    const instance = new DevtoolsCore()
+    await instance.mount(document.createElement('div'), 'dark')
+    instance.unmount()
+    await expect(
+      instance.mount(document.createElement('div'), 'dark'),
+    ).resolves.not.toThrow()
+  })
+
+  it('NoOpDevtoolsCore should not call any solid primitives when mount is called', async () => {
+    const [_, NoOpDevtoolsCore] = constructCoreClass(() => (
+      <div>Test Component</div>
+    ))
+    const noOpInstance = new NoOpDevtoolsCore()
+    await noOpInstance.mount(document.createElement('div'), 'dark')
+
+    expect(lazyImportMock).not.toHaveBeenCalled()
+    expect(renderMock).not.toHaveBeenCalled()
+    expect(portalMock).not.toHaveBeenCalled()
+  })
+
+  it('NoOpDevtoolsCore should not throw if mount is called multiple times', async () => {
+    const [_, NoOpDevtoolsCore] = constructCoreClass(() => (
+      <div>Test Component</div>
+    ))
+    const noOpInstance = new NoOpDevtoolsCore()
+    await noOpInstance.mount(document.createElement('div'), 'dark')
+    await expect(
+      noOpInstance.mount(document.createElement('div'), 'dark'),
+    ).resolves.not.toThrow()
+  })
+
+  it('NoOpDevtoolsCore should not throw if unmount is called before mount', () => {
+    const [_, NoOpDevtoolsCore] = constructCoreClass(() => (
+      <div>Test Component</div>
+    ))
+    const noOpInstance = new NoOpDevtoolsCore()
+    expect(() => noOpInstance.unmount()).not.toThrow()
+  })
+
+  it('NoOpDevtoolsCore should not throw if unmount is called after mount', async () => {
+    const [_, NoOpDevtoolsCore] = constructCoreClass(() => (
+      <div>Test Component</div>
+    ))
+    const noOpInstance = new NoOpDevtoolsCore()
+    await noOpInstance.mount(document.createElement('div'), 'dark')
+    expect(() => noOpInstance.unmount()).not.toThrow()
+  })
+})

package/src/solid/class.tsx

@@ -0,0 +1,74 @@
+/** @jsxImportSource solid-js - we use Solid.js as JSX here */
+
+import type { JSX } from 'solid-js'
+
+/**
+ * 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 importPath The path to the Solid component to be lazily imported
+ * @returns Tuple containing the DevtoolsCore class and a NoOpDevtoolsCore class
+ */
+export function constructCoreClass(Component: () => JSX.Element) {
+  class DevtoolsCore {
+    #isMounted = false
+    #dispose?: () => void
+    #Component: any
+    #ThemeProvider: any
+
+    constructor() {}
+
+    async mount<T extends HTMLElement>(el: T, theme: 'light' | 'dark') {
+      const { lazy } = await import('solid-js')
+      const { render, Portal } = await import('solid-js/web')
+      if (this.#isMounted) {
+        throw new Error('Devtools is already mounted')
+      }
+      const mountTo = el
+      const dispose = render(() => {
+        // eslint-disable-next-line @typescript-eslint/require-await
+        this.#Component = lazy(async () => ({ default: Component }))
+
+        this.#ThemeProvider = lazy(() =>
+          import('@tanstack/devtools-ui').then((mod) => ({
+            default: mod.ThemeContextProvider,
+          })),
+        )
+        const Devtools = this.#Component
+        const ThemeProvider = this.#ThemeProvider
+
+        return (
+          <Portal mount={mountTo}>
+            <div style={{ height: '100%' }}>
+              <ThemeProvider theme={theme}>
+                <Devtools />
+              </ThemeProvider>
+            </div>
+          </Portal>
+        )
+      }, mountTo)
+      this.#isMounted = true
+      this.#dispose = dispose
+    }
+
+    unmount() {
+      if (!this.#isMounted) {
+        throw new Error('Devtools is not mounted')
+      }
+      this.#dispose?.()
+      this.#isMounted = false
+    }
+  }
+  class NoOpDevtoolsCore extends DevtoolsCore {
+    constructor() {
+      super()
+    }
+    async mount<T extends HTMLElement>(_el: T, _theme: 'light' | 'dark') {}
+    unmount() {}
+  }
+  return [DevtoolsCore, NoOpDevtoolsCore] as const
+}
+
+export type ClassType = ReturnType<typeof constructCoreClass>[0]

package/src/solid/index.ts

@@ -0,0 +1,3 @@
+export * from './class'
+export * from './panel'
+export * from './plugin'

package/src/solid/panel.tsx

@@ -0,0 +1,36 @@
+/** @jsxImportSource solid-js - we use Solid.js as JSX here */
+
+import { onCleanup, onMount } from 'solid-js'
+import type { ClassType } from './class'
+
+export interface DevtoolsPanelProps {
+  theme?: 'light' | 'dark'
+}
+
+export function createSolidPanel<
+  TComponentProps extends DevtoolsPanelProps | undefined,
+>(CoreClass: ClassType) {
+  function Panel(props: TComponentProps) {
+    let devToolRef: HTMLDivElement | undefined
+
+    onMount(() => {
+      const devtools = new CoreClass()
+
+      if (devToolRef) {
+        devtools.mount(devToolRef, props?.theme ?? 'dark')
+
+        onCleanup(() => {
+          devtools.unmount()
+        })
+      }
+    })
+
+    return <div style={{ height: '100%' }} ref={devToolRef} />
+  }
+
+  function NoOpPanel(_props: TComponentProps) {
+    return <></>
+  }
+
+  return [Panel, NoOpPanel] as const
+}

package/src/solid/plugin.tsx

@@ -0,0 +1,25 @@
+/** @jsxImportSource solid-js - we use Solid.js as JSX here */
+
+import type { JSX } from 'solid-js'
+import type { DevtoolsPanelProps } from './panel'
+
+export function createSolidPlugin(
+  name: string,
+  Component: (props: DevtoolsPanelProps) => JSX.Element,
+) {
+  function Plugin() {
+    return {
+      name: name,
+      render: (_el: HTMLElement, theme: 'light' | 'dark') => {
+        return <Component theme={theme} />
+      },
+    }
+  }
+  function NoOpPlugin() {
+    return {
+      name: name,
+      render: (_el: HTMLElement, _theme: 'light' | 'dark') => <></>,
+    }
+  }
+  return [Plugin, NoOpPlugin] as const
+}