@tanstack/devtools-utils 0.0.1 → 0.0.3

package/dist/react/esm/panel.js

@@ -11,7 +11,9 @@ function createReactPanel(CoreClass) {
         devtools.current.mount(devToolRef.current, props?.theme ?? "dark");
       }
       return () => {
-        devtools.current?.unmount();
+        if (devToolRef.current) {
+          devtools.current?.unmount();
+        }
       };
     }, [props?.theme]);
     return /* @__PURE__ */ jsx("div", { style: { height: "100%" }, ref: devToolRef });

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\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;"}
+{"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        if (devToolRef.current) {\n          devtools.current?.unmount()\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;AAEtB,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;AAAA,QACpB;AAAA,MACF;AAAA,IACF,GAAG,CAAC,OAAO,KAAK,CAAC;AAEjB,WAAO,oBAAC,SAAI,OAAO,EAAE,QAAQ,OAAA,GAAU,KAAK,YAAY;AAAA,EAC1D;AAEA,WAAS,UAAU,QAAyB;AAC1C,WAAO,oBAAA,UAAA,EAAE;AAAA,EACX;AACA,SAAO,CAAC,OAAO,SAAS;AAC1B;"}

package/dist/solid/esm/dev.js

@@ -0,0 +1,116 @@
+import { createComponent, template, insert, use } from 'solid-js/web';
+import { createSignal, onMount, onCleanup } from 'solid-js';
+
+// src/solid/class.tsx
+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 = 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$ = _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];
+}
+var _tmpl$2 = /* @__PURE__ */ template(`<div>`);
+function createSolidPanel(CoreClass) {
+  function Panel(props) {
+    let devToolRef;
+    const [devtools] = createSignal(new CoreClass());
+    onMount(() => {
+      if (devToolRef) {
+        devtools().mount(devToolRef, props?.theme ?? "dark");
+      }
+      onCleanup(() => {
+        devtools().unmount();
+      });
+    });
+    return (() => {
+      var _el$ = _tmpl$2();
+      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];
+}
+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 { constructCoreClass, createSolidPanel, createSolidPlugin };

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

@@ -1,3 +1,51 @@
-export * from './class.js';
-export * from './panel.js';
-export * from './plugin.js';
+import * as solid_js from 'solid-js';
+import { JSX } from 'solid-js';
+
+/** @jsxImportSource solid-js - we use Solid.js as JSX here */
+
+/**
+ * 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
+ */
+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;
+    };
+}];
+type ClassType = ReturnType<typeof constructCoreClass>[0];
+
+interface DevtoolsPanelProps {
+    theme?: 'light' | 'dark';
+}
+declare function createSolidPanel<TComponentProps extends DevtoolsPanelProps | undefined>(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 */
+
+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;
+}];
+
+export { type ClassType, type DevtoolsPanelProps, constructCoreClass, createSolidPanel, createSolidPlugin };

package/dist/solid/esm/index.js

@@ -1,9 +1,116 @@
-import { constructCoreClass } from "./class.js";
-import { createSolidPanel } from "./panel.js";
-import { createSolidPlugin } from "./plugin.js";
-export {
-  constructCoreClass,
-  createSolidPanel,
-  createSolidPlugin
-};
-//# sourceMappingURL=index.js.map
+import { createComponent, template, insert, use } from 'solid-js/web';
+import { createSignal, onMount, onCleanup } from 'solid-js';
+
+// src/solid/class.tsx
+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 = 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$ = _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];
+}
+var _tmpl$2 = /* @__PURE__ */ template(`<div>`);
+function createSolidPanel(CoreClass) {
+  function Panel(props) {
+    let devToolRef;
+    const [devtools] = createSignal(new CoreClass());
+    onMount(() => {
+      if (devToolRef) {
+        devtools().mount(devToolRef, props?.theme ?? "dark");
+      }
+      onCleanup(() => {
+        devtools().unmount();
+      });
+    });
+    return (() => {
+      var _el$ = _tmpl$2();
+      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];
+}
+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 { constructCoreClass, createSolidPanel, createSolidPlugin };

package/dist/solid/esm/server.js

@@ -0,0 +1,103 @@
+import { createComponent, ssr, escape } from 'solid-js/web';
+import { createSignal, onMount, onCleanup } from 'solid-js';
+
+// src/solid/class.tsx
+var _tmpl$ = ['<div style="', '">', "</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 = 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() {
+            return ssr(_tmpl$, "height:100%", escape(createComponent(ThemeProvider, {
+              theme,
+              get children() {
+                return createComponent(Devtools, {});
+              }
+            })));
+          }
+        });
+      }, 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];
+}
+var _tmpl$2 = ['<div style="', '"></div>'];
+function createSolidPanel(CoreClass) {
+  function Panel(props) {
+    const [devtools] = createSignal(new CoreClass());
+    onMount(() => {
+      onCleanup(() => {
+        devtools().unmount();
+      });
+    });
+    return ssr(_tmpl$2, "height:100%");
+  }
+  function NoOpPanel(_props) {
+    return [];
+  }
+  return [Panel, NoOpPanel];
+}
+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 { constructCoreClass, createSolidPanel, createSolidPlugin };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tanstack/devtools-utils",
-  "version": "0.0.1",
+  "version": "0.0.3",
   "description": "TanStack Devtools utilities for creating your own devtools.",
   "author": "Tanner Linsley",
   "license": "MIT",
@@ -26,10 +26,20 @@
       }
     },
     "./solid": {
-      "import": {
+      "browser": {
+        "development": {
+          "types": "./dist/solid/esm/index.d.ts",
+          "import": "./dist/solid/esm/dev.js"
+        },
         "types": "./dist/solid/esm/index.d.ts",
-        "default": "./dist/solid/esm/index.js"
-      }
+        "import": "./dist/solid/esm/index.js"
+      },
+      "node": {
+        "types": "./dist/solid/esm/index.d.ts",
+        "import": "./dist/solid/esm/server.js"
+      },
+      "types": "./dist/solid/esm/index.d.ts",
+      "import": "./dist/solid/esm/index.js"
     },
     "./package.json": "./package.json"
   },
@@ -61,6 +71,8 @@
     "src"
   ],
   "devDependencies": {
+    "tsup": "^8.5.0",
+    "tsup-preset-solid": "^2.2.0",
     "vite-plugin-solid": "^2.11.8"
   },
   "scripts": {
@@ -71,6 +83,6 @@
     "test:lib:dev": "pnpm test:lib --watch",
     "test:types": "tsc",
     "test:build": "publint --strict",
-    "build": "vite build && vite build --config ./vite.config.solid.ts "
+    "build": "vite build && tsup "
   }
 }

package/src/react/panel.tsx

@@ -41,7 +41,9 @@ export function createReactPanel<
       }
 
       return () => {
-        devtools.current?.unmount()
+        if (devToolRef.current) {
+          devtools.current?.unmount()
+        }
       }
     }, [props?.theme])
 

package/src/solid/class.tsx

@@ -28,8 +28,7 @@ export function constructCoreClass(Component: () => JSX.Element) {
       }
       const mountTo = el
       const dispose = render(() => {
-        // eslint-disable-next-line @typescript-eslint/require-await
-        this.#Component = lazy(async () => ({ default: Component }))
+        this.#Component = Component
 
         this.#ThemeProvider = lazy(() =>
           import('@tanstack/devtools-ui').then((mod) => ({

package/src/solid/panel.tsx

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

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

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

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

@@ -1 +0,0 @@
-{"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.js.map

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

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

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

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

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

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

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

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