@tanstack/solid-devtools 0.3.0 → 0.3.2

package/dist/cjs/client-only.cjs

@@ -0,0 +1,26 @@
+"use strict";
+const solidJs = require("solid-js");
+const web = require("solid-js/web");
+function clientOnly(fn, options = {}) {
+  if (web.isServer)
+    return (props) => props.fallback;
+  const [comp, setComp] = solidJs.createSignal();
+  !options.lazy && load(fn, setComp);
+  return (props) => {
+    let Comp;
+    let m;
+    const [, rest] = solidJs.splitProps(props, ["fallback"]);
+    options.lazy && load(fn, setComp);
+    if ((Comp = comp()) && !solidJs.sharedConfig.context) return Comp(rest);
+    const [mounted, setMounted] = solidJs.createSignal(!solidJs.sharedConfig.context);
+    solidJs.onMount(() => setMounted(true));
+    return solidJs.createMemo(
+      () => (Comp = comp(), m = mounted(), solidJs.untrack(() => Comp && m ? Comp(rest) : props.fallback))
+    );
+  };
+}
+function load(fn, setComp) {
+  fn().then((m) => setComp(() => m.default));
+}
+module.exports = clientOnly;
+//# sourceMappingURL=client-only.cjs.map

package/dist/cjs/client-only.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"client-only.cjs","sources":["../../src/client-only.ts"],"sourcesContent":["import {\n  createMemo,\n  createSignal,\n  onMount,\n  sharedConfig,\n  splitProps,\n  untrack,\n} from 'solid-js'\nimport { isServer } from 'solid-js/web'\nimport type { Component, ComponentProps, JSX, Setter } from 'solid-js'\n\n/**\n *\n * Read more: https://docs.solidjs.com/solid-start/reference/client/client-only\n */\n// not using Suspense\nexport default function clientOnly<T extends Component<any>>(\n  fn: () => Promise<{\n    default: T\n  }>,\n  options: { lazy?: boolean } = {},\n) {\n  if (isServer)\n    return (props: ComponentProps<T> & { fallback?: JSX.Element }) =>\n      props.fallback\n\n  const [comp, setComp] = createSignal<T>()\n  !options.lazy && load(fn, setComp)\n  return (props: ComponentProps<T>) => {\n    let Comp: T | undefined\n    let m: boolean\n    const [, rest] = splitProps(props, ['fallback'])\n    options.lazy && load(fn, setComp)\n    if ((Comp = comp()) && !sharedConfig.context) return Comp(rest)\n    const [mounted, setMounted] = createSignal(!sharedConfig.context)\n    onMount(() => setMounted(true))\n    return createMemo(\n      () => (\n        (Comp = comp()),\n        (m = mounted()),\n        untrack(() => (Comp && m ? Comp(rest) : props.fallback))\n      ),\n    )\n  }\n}\n\nfunction load<T>(\n  fn: () => Promise<{\n    default: T\n  }>,\n  setComp: Setter<T>,\n) {\n  fn().then((m) => setComp(() => m.default))\n}\n"],"names":["isServer","createSignal","splitProps","sharedConfig","onMount","createMemo","untrack"],"mappings":";;;AAgBA,SAAwB,WACtB,IAGA,UAA8B,IAC9B;AACA,MAAIA,IAAAA;AACF,WAAO,CAAC,UACN,MAAM;AAEV,QAAM,CAAC,MAAM,OAAO,IAAIC,qBAAA;AACxB,GAAC,QAAQ,QAAQ,KAAK,IAAI,OAAO;AACjC,SAAO,CAAC,UAA6B;AACnC,QAAI;AACJ,QAAI;AACJ,UAAM,CAAA,EAAG,IAAI,IAAIC,QAAAA,WAAW,OAAO,CAAC,UAAU,CAAC;AAC/C,YAAQ,QAAQ,KAAK,IAAI,OAAO;AAChC,SAAK,OAAO,WAAW,CAACC,QAAAA,aAAa,QAAS,QAAO,KAAK,IAAI;AAC9D,UAAM,CAAC,SAAS,UAAU,IAAIF,QAAAA,aAAa,CAACE,QAAAA,aAAa,OAAO;AAChEC,oBAAQ,MAAM,WAAW,IAAI,CAAC;AAC9B,WAAOC,QAAAA;AAAAA,MACL,OACG,OAAO,KAAA,GACP,IAAI,QAAA,GACLC,QAAAA,QAAQ,MAAO,QAAQ,IAAI,KAAK,IAAI,IAAI,MAAM,QAAS;AAAA,IAAA;AAAA,EAG7D;AACF;AAEA,SAAS,KACP,IAGA,SACA;AACA,KAAA,EAAK,KAAK,CAAC,MAAM,QAAQ,MAAM,EAAE,OAAO,CAAC;AAC3C;;"}

package/dist/cjs/client-only.d.cts

@@ -0,0 +1,12 @@
+import { Component, ComponentProps, JSX } from 'solid-js';
+/**
+ *
+ * Read more: https://docs.solidjs.com/solid-start/reference/client/client-only
+ */
+export default function clientOnly<T extends Component<any>>(fn: () => Promise<{
+    default: T;
+}>, options?: {
+    lazy?: boolean;
+}): (props: ComponentProps<T> & {
+    fallback?: JSX.Element;
+}) => any;

package/dist/cjs/core.cjs

@@ -0,0 +1,52 @@
+"use strict";
+const web = require("solid-js/web");
+const devtools = require("@tanstack/devtools");
+const solidJs = require("solid-js");
+var _tmpl$ = /* @__PURE__ */ web.template(`<div>`);
+const convertRender = (el, Component) => web.createComponent(web.Portal, {
+  mount: el,
+  get children() {
+    return typeof Component === "function" ? web.createComponent(Component, {}) : Component;
+  }
+});
+function SolidDevtoolsCore({
+  config,
+  plugins,
+  eventBusConfig
+}) {
+  const [devtools$1] = solidJs.createSignal(new devtools.TanStackDevtoolsCore({
+    config,
+    eventBusConfig,
+    plugins: plugins?.map((plugin) => ({
+      ...plugin,
+      name: typeof plugin.name === "string" ? plugin.name : (
+        // The check above confirms that `plugin.name` is of Render type
+        (el) => convertRender(el, plugin.name)
+      ),
+      render: (el) => convertRender(el, plugin.render)
+    }))
+  }));
+  let devToolRef;
+  solidJs.createEffect(() => {
+    devtools$1().setConfig({
+      config
+    });
+  });
+  solidJs.onMount(() => {
+    if (devToolRef) {
+      devtools$1().mount(devToolRef);
+      solidJs.onCleanup(() => {
+        devtools$1().unmount();
+      });
+    }
+  });
+  return (() => {
+    var _el$ = _tmpl$();
+    var _ref$ = devToolRef;
+    typeof _ref$ === "function" ? web.use(_ref$, _el$) : devToolRef = _el$;
+    _el$.style.setProperty("position", "absolute");
+    return _el$;
+  })();
+}
+module.exports = SolidDevtoolsCore;
+//# sourceMappingURL=core.cjs.map

package/dist/cjs/core.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"core.cjs","sources":["../../src/core.tsx"],"sourcesContent":["import { TanStackDevtoolsCore } from '@tanstack/devtools'\nimport { createEffect, createSignal, onCleanup, onMount } from 'solid-js'\nimport { Portal } from 'solid-js/web'\nimport type { JSX } from 'solid-js'\nimport type {\n  ClientEventBusConfig,\n  TanStackDevtoolsConfig,\n  TanStackDevtoolsPlugin,\n} from '@tanstack/devtools'\n\ntype SolidPluginRender = JSX.Element | (() => JSX.Element)\nconst convertRender = (\n  el: HTMLDivElement | HTMLHeadingElement,\n  Component: SolidPluginRender,\n) => (\n  <Portal mount={el}>\n    {typeof Component === 'function' ? <Component /> : Component}\n  </Portal>\n)\n\nexport type TanStackDevtoolsSolidPlugin = Omit<\n  TanStackDevtoolsPlugin,\n  'render' | 'name'\n> & {\n  /**\n   * The render function can be a SolidJS element or a function that returns a SolidJS element.\n   * If it's a function, it will be called to render the plugin, otherwise it will be rendered directly.\n   *\n   * Example:\n   * ```ts\n   *   {\n   *     render: () => <CustomPluginComponent />,\n   *   }\n   * ```\n   * or\n   * ```ts\n   *   {\n   *     render: <CustomPluginComponent />,\n   *   }\n   * ```\n   */\n  render: SolidPluginRender\n  /**\n   * Name to be displayed in the devtools UI.\n   * If a string, it will be used as the plugin name.\n   * If a function, it will be called with the mount element.\n   *\n   * Example:\n   * ```ts\n   *   {\n   *     name: \"Your Plugin\",\n   *     render: () => <CustomPluginComponent />,\n   *   }\n   * ```\n   * or\n   * ```ts\n   *   {\n   *     name: <h1>Your Plugin title</h1>,\n   *     render: () => <CustomPluginComponent />,\n   *   }\n   * ```\n   */\n  name: string | SolidPluginRender\n}\nexport interface TanstackDevtoolsInit {\n  /**\n   * Array of plugins to be used in the devtools.\n   * Each plugin should have a `render` function that returns a React element or a function\n   *\n   * Example:\n   * ```jsx\n   * <TanstackDevtools\n   *   plugins={[\n   *     {\n   *       id: \"your-plugin-id\",\n   *       name: \"Your Plugin\",\n   *       render: <CustomPluginComponent />,\n   *     }\n   *   ]}\n   * />\n   * ```\n   */\n  plugins?: Array<TanStackDevtoolsSolidPlugin>\n  /**\n   * Configuration for the devtools shell. These configuration options are used to set the\n   * initial state of the devtools when it is started for the first time. Afterwards,\n   * the settings are persisted in local storage and changed through the settings panel.\n   */\n  config?: Partial<TanStackDevtoolsConfig>\n  /**\n   * Configuration for the TanStack Devtools client event bus.\n   */\n  eventBusConfig?: ClientEventBusConfig\n}\n\nexport default function SolidDevtoolsCore({\n  config,\n  plugins,\n  eventBusConfig,\n}: TanstackDevtoolsInit) {\n  const [devtools] = createSignal(\n    new TanStackDevtoolsCore({\n      config,\n      eventBusConfig,\n      plugins: plugins?.map((plugin) => ({\n        ...plugin,\n        name:\n          typeof plugin.name === 'string'\n            ? plugin.name\n            : // The check above confirms that `plugin.name` is of Render type\n              (el) => convertRender(el, plugin.name as SolidPluginRender),\n        render: (el: HTMLDivElement) => convertRender(el, plugin.render),\n      })),\n    }),\n  )\n  let devToolRef: HTMLDivElement | undefined\n  createEffect(() => {\n    devtools().setConfig({ config })\n  })\n  onMount(() => {\n    if (devToolRef) {\n      devtools().mount(devToolRef)\n\n      onCleanup(() => {\n        devtools().unmount()\n      })\n    }\n  })\n  return <div style={{ position: 'absolute' }} ref={devToolRef} />\n}\n"],"names":["convertRender","el","Component","_$createComponent","Portal","mount","children","SolidDevtoolsCore","config","plugins","eventBusConfig","devtools","createSignal","TanStackDevtoolsCore","map","plugin","name","render","devToolRef","createEffect","setConfig","onMount","onCleanup","unmount","_el$","_tmpl$","_ref$","_$use","style","setProperty"],"mappings":";;;;;AAWA,MAAMA,gBAAgBA,CACpBC,IACAC,cAA4BC,IAAAA,gBAE3BC,IAAAA,QAAM;AAAA,EAACC,OAAOJ;AAAAA,EAAE,IAAAK,WAAA;AAAA,WACd,OAAOJ,cAAc,aAAUC,IAAAA,gBAAID,WAAS,CAAA,CAAA,IAAMA;AAAAA,EAAS;AAAA,CAAA;AA+EhE,SAAwBK,kBAAkB;AAAA,EACxCC;AAAAA,EACAC;AAAAA,EACAC;AACoB,GAAG;AACvB,QAAM,CAACC,UAAQ,IAAIC,QAAAA,aACjB,IAAIC,SAAAA,qBAAqB;AAAA,IACvBL;AAAAA,IACAE;AAAAA,IACAD,SAASA,SAASK,IAAKC,CAAAA,YAAY;AAAA,MACjC,GAAGA;AAAAA,MACHC,MACE,OAAOD,OAAOC,SAAS,WACnBD,OAAOC;AAAAA;AAAAA,QAENf,CAAAA,OAAOD,cAAcC,IAAIc,OAAOC,IAAyB;AAAA;AAAA,MAChEC,QAAQA,CAAChB,OAAuBD,cAAcC,IAAIc,OAAOE,MAAM;AAAA,IAAA,EAC/D;AAAA,EAAA,CACH,CACH;AACA,MAAIC;AACJC,UAAAA,aAAa,MAAM;AACjBR,eAAAA,EAAWS,UAAU;AAAA,MAAEZ;AAAAA,IAAAA,CAAQ;AAAA,EACjC,CAAC;AACDa,UAAAA,QAAQ,MAAM;AACZ,QAAIH,YAAY;AACdP,iBAAAA,EAAWN,MAAMa,UAAU;AAE3BI,cAAAA,UAAU,MAAM;AACdX,mBAAAA,EAAWY,QAAAA;AAAAA,MACb,CAAC;AAAA,IACH;AAAA,EACF,CAAC;AACD,UAAA,MAAA;AAAA,QAAAC,OAAAC,OAAAA;AAAA,QAAAC,QAAkDR;AAAU,WAAAQ,UAAA,aAAAC,IAAAA,IAAAD,OAAAF,IAAA,IAAVN,aAAUM;AAAAA,SAAAI,MAAAC,YAAA,YAAA,UAAA;AAAA,WAAAL;AAAAA,EAAA,GAAA;AAC9D;;"}

package/dist/cjs/core.d.cts

@@ -0,0 +1,76 @@
+import { JSX } from 'solid-js';
+import { ClientEventBusConfig, TanStackDevtoolsConfig, TanStackDevtoolsPlugin } from '@tanstack/devtools';
+type SolidPluginRender = JSX.Element | (() => JSX.Element);
+export type TanStackDevtoolsSolidPlugin = Omit<TanStackDevtoolsPlugin, 'render' | 'name'> & {
+    /**
+     * The render function can be a SolidJS element or a function that returns a SolidJS element.
+     * If it's a function, it will be called to render the plugin, otherwise it will be rendered directly.
+     *
+     * Example:
+     * ```ts
+     *   {
+     *     render: () => <CustomPluginComponent />,
+     *   }
+     * ```
+     * or
+     * ```ts
+     *   {
+     *     render: <CustomPluginComponent />,
+     *   }
+     * ```
+     */
+    render: SolidPluginRender;
+    /**
+     * Name to be displayed in the devtools UI.
+     * If a string, it will be used as the plugin name.
+     * If a function, it will be called with the mount element.
+     *
+     * Example:
+     * ```ts
+     *   {
+     *     name: "Your Plugin",
+     *     render: () => <CustomPluginComponent />,
+     *   }
+     * ```
+     * or
+     * ```ts
+     *   {
+     *     name: <h1>Your Plugin title</h1>,
+     *     render: () => <CustomPluginComponent />,
+     *   }
+     * ```
+     */
+    name: string | SolidPluginRender;
+};
+export interface TanstackDevtoolsInit {
+    /**
+     * Array of plugins to be used in the devtools.
+     * Each plugin should have a `render` function that returns a React element or a function
+     *
+     * Example:
+     * ```jsx
+     * <TanstackDevtools
+     *   plugins={[
+     *     {
+     *       id: "your-plugin-id",
+     *       name: "Your Plugin",
+     *       render: <CustomPluginComponent />,
+     *     }
+     *   ]}
+     * />
+     * ```
+     */
+    plugins?: Array<TanStackDevtoolsSolidPlugin>;
+    /**
+     * Configuration for the devtools shell. These configuration options are used to set the
+     * initial state of the devtools when it is started for the first time. Afterwards,
+     * the settings are persisted in local storage and changed through the settings panel.
+     */
+    config?: Partial<TanStackDevtoolsConfig>;
+    /**
+     * Configuration for the TanStack Devtools client event bus.
+     */
+    eventBusConfig?: ClientEventBusConfig;
+}
+export default function SolidDevtoolsCore({ config, plugins, eventBusConfig, }: TanstackDevtoolsInit): JSX.Element;
+export {};

package/dist/cjs/devtools.cjs

@@ -1,53 +1,7 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const web = require("solid-js/web");
-const devtools = require("@tanstack/devtools");
-const solidJs = require("solid-js");
-var _tmpl$ = /* @__PURE__ */ web.template(`<div>`);
-const convertRender = (el, Component) => web.createComponent(web.Portal, {
-  mount: el,
-  get children() {
-    return typeof Component === "function" ? web.createComponent(Component, {}) : Component;
-  }
-});
-const TanstackDevtools = ({
-  config,
-  plugins,
-  eventBusConfig
-}) => {
-  const [devtools$1] = solidJs.createSignal(new devtools.TanStackDevtoolsCore({
-    config,
-    eventBusConfig,
-    plugins: plugins?.map((plugin) => ({
-      ...plugin,
-      name: typeof plugin.name === "string" ? plugin.name : (
-        // The check above confirms that `plugin.name` is of Render type
-        (el) => convertRender(el, plugin.name)
-      ),
-      render: (el) => convertRender(el, plugin.render)
-    }))
-  }));
-  let devToolRef;
-  solidJs.createEffect(() => {
-    devtools$1().setConfig({
-      config
-    });
-  });
-  solidJs.onMount(() => {
-    if (devToolRef) {
-      devtools$1().mount(devToolRef);
-      solidJs.onCleanup(() => {
-        devtools$1().unmount();
-      });
-    }
-  });
-  return (() => {
-    var _el$ = _tmpl$();
-    var _ref$ = devToolRef;
-    typeof _ref$ === "function" ? web.use(_ref$, _el$) : devToolRef = _el$;
-    _el$.style.setProperty("height", "100%");
-    return _el$;
-  })();
-};
+const clientOnly = require("./client-only.cjs");
+const _interopNamespaceDefaultOnly = (e) => Object.freeze(Object.defineProperty({ __proto__: null, default: e }, Symbol.toStringTag, { value: "Module" }));
+const TanstackDevtools = clientOnly(() => Promise.resolve().then(() => /* @__PURE__ */ _interopNamespaceDefaultOnly(require("./core.cjs"))).then((m) => m));
 exports.TanstackDevtools = TanstackDevtools;
 //# sourceMappingURL=devtools.cjs.map

package/dist/cjs/devtools.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"devtools.cjs","sources":["../../src/devtools.tsx"],"sourcesContent":["import { TanStackDevtoolsCore } from '@tanstack/devtools'\nimport { createEffect, createSignal, onCleanup, onMount } from 'solid-js'\nimport { Portal } from 'solid-js/web'\nimport type { JSX } from 'solid-js'\nimport type {\n  ClientEventBusConfig,\n  TanStackDevtoolsConfig,\n  TanStackDevtoolsPlugin,\n} from '@tanstack/devtools'\n\ntype SolidPluginRender = JSX.Element | (() => JSX.Element)\nconst convertRender = (\n  el: HTMLDivElement | HTMLHeadingElement,\n  Component: SolidPluginRender,\n) => (\n  <Portal mount={el}>\n    {typeof Component === 'function' ? <Component /> : Component}\n  </Portal>\n)\n\nexport type TanStackDevtoolsSolidPlugin = Omit<\n  TanStackDevtoolsPlugin,\n  'render' | 'name'\n> & {\n  /**\n   * The render function can be a SolidJS element or a function that returns a SolidJS element.\n   * If it's a function, it will be called to render the plugin, otherwise it will be rendered directly.\n   *\n   * Example:\n   * ```ts\n   *   {\n   *     render: () => <CustomPluginComponent />,\n   *   }\n   * ```\n   * or\n   * ```ts\n   *   {\n   *     render: <CustomPluginComponent />,\n   *   }\n   * ```\n   */\n  render: SolidPluginRender\n  /**\n   * Name to be displayed in the devtools UI.\n   * If a string, it will be used as the plugin name.\n   * If a function, it will be called with the mount element.\n   *\n   * Example:\n   * ```ts\n   *   {\n   *     name: \"Your Plugin\",\n   *     render: () => <CustomPluginComponent />,\n   *   }\n   * ```\n   * or\n   * ```ts\n   *   {\n   *     name: <h1>Your Plugin title</h1>,\n   *     render: () => <CustomPluginComponent />,\n   *   }\n   * ```\n   */\n  name: string | SolidPluginRender\n}\ninterface TanstackDevtoolsInit {\n  /**\n   * Array of plugins to be used in the devtools.\n   * Each plugin should have a `render` function that returns a React element or a function\n   *\n   * Example:\n   * ```jsx\n   * <TanstackDevtools\n   *   plugins={[\n   *     {\n   *       id: \"your-plugin-id\",\n   *       name: \"Your Plugin\",\n   *       render: <CustomPluginComponent />,\n   *     }\n   *   ]}\n   * />\n   * ```\n   */\n  plugins?: Array<TanStackDevtoolsSolidPlugin>\n  /**\n   * Configuration for the devtools shell. These configuration options are used to set the\n   * initial state of the devtools when it is started for the first time. Afterwards,\n   * the settings are persisted in local storage and changed through the settings panel.\n   */\n  config?: Partial<TanStackDevtoolsConfig>\n  /**\n   * Configuration for the TanStack Devtools client event bus.\n   */\n  eventBusConfig?: ClientEventBusConfig\n}\n\nexport const TanstackDevtools = ({\n  config,\n  plugins,\n  eventBusConfig,\n}: TanstackDevtoolsInit) => {\n  const [devtools] = createSignal(\n    new TanStackDevtoolsCore({\n      config,\n      eventBusConfig,\n      plugins: plugins?.map((plugin) => ({\n        ...plugin,\n        name:\n          typeof plugin.name === 'string'\n            ? plugin.name\n            : // The check above confirms that `plugin.name` is of Render type\n              (el) => convertRender(el, plugin.name as SolidPluginRender),\n        render: (el: HTMLDivElement) => convertRender(el, plugin.render),\n      })),\n    }),\n  )\n  let devToolRef: HTMLDivElement | undefined\n  createEffect(() => {\n    devtools().setConfig({ config })\n  })\n  onMount(() => {\n    if (devToolRef) {\n      devtools().mount(devToolRef)\n\n      onCleanup(() => {\n        devtools().unmount()\n      })\n    }\n  })\n  return <div style={{ height: '100%' }} ref={devToolRef} />\n}\n"],"names":["convertRender","el","Component","_$createComponent","Portal","mount","children","TanstackDevtools","config","plugins","eventBusConfig","devtools","createSignal","TanStackDevtoolsCore","map","plugin","name","render","devToolRef","createEffect","setConfig","onMount","onCleanup","unmount","_el$","_tmpl$","_ref$","_$use","style","setProperty"],"mappings":";;;;;;AAWA,MAAMA,gBAAgBA,CACpBC,IACAC,cAA4BC,IAAAA,gBAE3BC,IAAAA,QAAM;AAAA,EAACC,OAAOJ;AAAAA,EAAE,IAAAK,WAAA;AAAA,WACd,OAAOJ,cAAc,aAAUC,IAAAA,gBAAID,WAAS,CAAA,CAAA,IAAMA;AAAAA,EAAS;AAAA,CAAA;AA+EzD,MAAMK,mBAAmBA,CAAC;AAAA,EAC/BC;AAAAA,EACAC;AAAAA,EACAC;AACoB,MAAM;AAC1B,QAAM,CAACC,UAAQ,IAAIC,QAAAA,aACjB,IAAIC,SAAAA,qBAAqB;AAAA,IACvBL;AAAAA,IACAE;AAAAA,IACAD,SAASA,SAASK,IAAKC,CAAAA,YAAY;AAAA,MACjC,GAAGA;AAAAA,MACHC,MACE,OAAOD,OAAOC,SAAS,WACnBD,OAAOC;AAAAA;AAAAA,QAENf,CAAAA,OAAOD,cAAcC,IAAIc,OAAOC,IAAyB;AAAA;AAAA,MAChEC,QAAQA,CAAChB,OAAuBD,cAAcC,IAAIc,OAAOE,MAAM;AAAA,IAAA,EAC/D;AAAA,EAAA,CACH,CACH;AACA,MAAIC;AACJC,UAAAA,aAAa,MAAM;AACjBR,eAAAA,EAAWS,UAAU;AAAA,MAAEZ;AAAAA,IAAAA,CAAQ;AAAA,EACjC,CAAC;AACDa,UAAAA,QAAQ,MAAM;AACZ,QAAIH,YAAY;AACdP,iBAAAA,EAAWN,MAAMa,UAAU;AAE3BI,cAAAA,UAAU,MAAM;AACdX,mBAAAA,EAAWY,QAAAA;AAAAA,MACb,CAAC;AAAA,IACH;AAAA,EACF,CAAC;AACD,UAAA,MAAA;AAAA,QAAAC,OAAAC,OAAAA;AAAA,QAAAC,QAA4CR;AAAU,WAAAQ,UAAA,aAAAC,IAAAA,IAAAD,OAAAF,IAAA,IAAVN,aAAUM;AAAAA,SAAAI,MAAAC,YAAA,UAAA,MAAA;AAAA,WAAAL;AAAAA,EAAA,GAAA;AACxD;;"}
+{"version":3,"file":"devtools.cjs","sources":["../../src/devtools.tsx"],"sourcesContent":["import clientOnly from './client-only'\n\nexport const TanstackDevtools = clientOnly(() =>\n  import('./core').then((m) => m),\n)\n"],"names":["TanstackDevtools","clientOnly","then","m"],"mappings":";;;;AAEO,MAAMA,mBAAmBC,WAAW,MACzC,QAAA,QAAA,EAAA,KAAA,MAAA,6CAAA,QAAO,YAAQ,CAAA,CAAA,EAAEC,KAAMC,CAAAA,MAAMA,CAAC,CAChC;;"}

package/dist/cjs/devtools.d.cts

@@ -1,76 +1,3 @@
-import { JSX } from 'solid-js';
-import { ClientEventBusConfig, TanStackDevtoolsConfig, TanStackDevtoolsPlugin } from '@tanstack/devtools';
-type SolidPluginRender = JSX.Element | (() => JSX.Element);
-export type TanStackDevtoolsSolidPlugin = Omit<TanStackDevtoolsPlugin, 'render' | 'name'> & {
-    /**
-     * The render function can be a SolidJS element or a function that returns a SolidJS element.
-     * If it's a function, it will be called to render the plugin, otherwise it will be rendered directly.
-     *
-     * Example:
-     * ```ts
-     *   {
-     *     render: () => <CustomPluginComponent />,
-     *   }
-     * ```
-     * or
-     * ```ts
-     *   {
-     *     render: <CustomPluginComponent />,
-     *   }
-     * ```
-     */
-    render: SolidPluginRender;
-    /**
-     * Name to be displayed in the devtools UI.
-     * If a string, it will be used as the plugin name.
-     * If a function, it will be called with the mount element.
-     *
-     * Example:
-     * ```ts
-     *   {
-     *     name: "Your Plugin",
-     *     render: () => <CustomPluginComponent />,
-     *   }
-     * ```
-     * or
-     * ```ts
-     *   {
-     *     name: <h1>Your Plugin title</h1>,
-     *     render: () => <CustomPluginComponent />,
-     *   }
-     * ```
-     */
-    name: string | SolidPluginRender;
-};
-interface TanstackDevtoolsInit {
-    /**
-     * Array of plugins to be used in the devtools.
-     * Each plugin should have a `render` function that returns a React element or a function
-     *
-     * Example:
-     * ```jsx
-     * <TanstackDevtools
-     *   plugins={[
-     *     {
-     *       id: "your-plugin-id",
-     *       name: "Your Plugin",
-     *       render: <CustomPluginComponent />,
-     *     }
-     *   ]}
-     * />
-     * ```
-     */
-    plugins?: Array<TanStackDevtoolsSolidPlugin>;
-    /**
-     * Configuration for the devtools shell. These configuration options are used to set the
-     * initial state of the devtools when it is started for the first time. Afterwards,
-     * the settings are persisted in local storage and changed through the settings panel.
-     */
-    config?: Partial<TanStackDevtoolsConfig>;
-    /**
-     * Configuration for the TanStack Devtools client event bus.
-     */
-    eventBusConfig?: ClientEventBusConfig;
-}
-export declare const TanstackDevtools: ({ config, plugins, eventBusConfig, }: TanstackDevtoolsInit) => JSX.Element;
-export {};
+export declare const TanstackDevtools: (props: import('./core.cjs').TanstackDevtoolsInit & {
+    fallback?: import("solid-js").JSX.Element;
+}) => any;

package/dist/cjs/index.d.cts

@@ -3,4 +3,4 @@ export * from '@tanstack/devtools';
  * Export every hook individually - DON'T export from barrel files
  */
 export { TanstackDevtools } from './devtools.cjs';
-export type { TanStackDevtoolsSolidPlugin } from './devtools.cjs';
+export type { TanStackDevtoolsSolidPlugin } from './core.cjs';

package/dist/esm/client-only.d.ts

@@ -0,0 +1,12 @@
+import { Component, ComponentProps, JSX } from 'solid-js';
+/**
+ *
+ * Read more: https://docs.solidjs.com/solid-start/reference/client/client-only
+ */
+export default function clientOnly<T extends Component<any>>(fn: () => Promise<{
+    default: T;
+}>, options?: {
+    lazy?: boolean;
+}): (props: ComponentProps<T> & {
+    fallback?: JSX.Element;
+}) => any;

package/dist/esm/client-only.js

@@ -0,0 +1,27 @@
+import { createSignal, splitProps, sharedConfig, onMount, createMemo, untrack } from "solid-js";
+import { isServer } from "solid-js/web";
+function clientOnly(fn, options = {}) {
+  if (isServer)
+    return (props) => props.fallback;
+  const [comp, setComp] = createSignal();
+  !options.lazy && load(fn, setComp);
+  return (props) => {
+    let Comp;
+    let m;
+    const [, rest] = splitProps(props, ["fallback"]);
+    options.lazy && load(fn, setComp);
+    if ((Comp = comp()) && !sharedConfig.context) return Comp(rest);
+    const [mounted, setMounted] = createSignal(!sharedConfig.context);
+    onMount(() => setMounted(true));
+    return createMemo(
+      () => (Comp = comp(), m = mounted(), untrack(() => Comp && m ? Comp(rest) : props.fallback))
+    );
+  };
+}
+function load(fn, setComp) {
+  fn().then((m) => setComp(() => m.default));
+}
+export {
+  clientOnly as default
+};
+//# sourceMappingURL=client-only.js.map

package/dist/esm/client-only.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"client-only.js","sources":["../../src/client-only.ts"],"sourcesContent":["import {\n  createMemo,\n  createSignal,\n  onMount,\n  sharedConfig,\n  splitProps,\n  untrack,\n} from 'solid-js'\nimport { isServer } from 'solid-js/web'\nimport type { Component, ComponentProps, JSX, Setter } from 'solid-js'\n\n/**\n *\n * Read more: https://docs.solidjs.com/solid-start/reference/client/client-only\n */\n// not using Suspense\nexport default function clientOnly<T extends Component<any>>(\n  fn: () => Promise<{\n    default: T\n  }>,\n  options: { lazy?: boolean } = {},\n) {\n  if (isServer)\n    return (props: ComponentProps<T> & { fallback?: JSX.Element }) =>\n      props.fallback\n\n  const [comp, setComp] = createSignal<T>()\n  !options.lazy && load(fn, setComp)\n  return (props: ComponentProps<T>) => {\n    let Comp: T | undefined\n    let m: boolean\n    const [, rest] = splitProps(props, ['fallback'])\n    options.lazy && load(fn, setComp)\n    if ((Comp = comp()) && !sharedConfig.context) return Comp(rest)\n    const [mounted, setMounted] = createSignal(!sharedConfig.context)\n    onMount(() => setMounted(true))\n    return createMemo(\n      () => (\n        (Comp = comp()),\n        (m = mounted()),\n        untrack(() => (Comp && m ? Comp(rest) : props.fallback))\n      ),\n    )\n  }\n}\n\nfunction load<T>(\n  fn: () => Promise<{\n    default: T\n  }>,\n  setComp: Setter<T>,\n) {\n  fn().then((m) => setComp(() => m.default))\n}\n"],"names":[],"mappings":";;AAgBA,SAAwB,WACtB,IAGA,UAA8B,IAC9B;AACA,MAAI;AACF,WAAO,CAAC,UACN,MAAM;AAEV,QAAM,CAAC,MAAM,OAAO,IAAI,aAAA;AACxB,GAAC,QAAQ,QAAQ,KAAK,IAAI,OAAO;AACjC,SAAO,CAAC,UAA6B;AACnC,QAAI;AACJ,QAAI;AACJ,UAAM,CAAA,EAAG,IAAI,IAAI,WAAW,OAAO,CAAC,UAAU,CAAC;AAC/C,YAAQ,QAAQ,KAAK,IAAI,OAAO;AAChC,SAAK,OAAO,WAAW,CAAC,aAAa,QAAS,QAAO,KAAK,IAAI;AAC9D,UAAM,CAAC,SAAS,UAAU,IAAI,aAAa,CAAC,aAAa,OAAO;AAChE,YAAQ,MAAM,WAAW,IAAI,CAAC;AAC9B,WAAO;AAAA,MACL,OACG,OAAO,KAAA,GACP,IAAI,QAAA,GACL,QAAQ,MAAO,QAAQ,IAAI,KAAK,IAAI,IAAI,MAAM,QAAS;AAAA,IAAA;AAAA,EAG7D;AACF;AAEA,SAAS,KACP,IAGA,SACA;AACA,KAAA,EAAK,KAAK,CAAC,MAAM,QAAQ,MAAM,EAAE,OAAO,CAAC;AAC3C;"}

package/dist/esm/core.d.ts

@@ -0,0 +1,76 @@
+import { JSX } from 'solid-js';
+import { ClientEventBusConfig, TanStackDevtoolsConfig, TanStackDevtoolsPlugin } from '@tanstack/devtools';
+type SolidPluginRender = JSX.Element | (() => JSX.Element);
+export type TanStackDevtoolsSolidPlugin = Omit<TanStackDevtoolsPlugin, 'render' | 'name'> & {
+    /**
+     * The render function can be a SolidJS element or a function that returns a SolidJS element.
+     * If it's a function, it will be called to render the plugin, otherwise it will be rendered directly.
+     *
+     * Example:
+     * ```ts
+     *   {
+     *     render: () => <CustomPluginComponent />,
+     *   }
+     * ```
+     * or
+     * ```ts
+     *   {
+     *     render: <CustomPluginComponent />,
+     *   }
+     * ```
+     */
+    render: SolidPluginRender;
+    /**
+     * Name to be displayed in the devtools UI.
+     * If a string, it will be used as the plugin name.
+     * If a function, it will be called with the mount element.
+     *
+     * Example:
+     * ```ts
+     *   {
+     *     name: "Your Plugin",
+     *     render: () => <CustomPluginComponent />,
+     *   }
+     * ```
+     * or
+     * ```ts
+     *   {
+     *     name: <h1>Your Plugin title</h1>,
+     *     render: () => <CustomPluginComponent />,
+     *   }
+     * ```
+     */
+    name: string | SolidPluginRender;
+};
+export interface TanstackDevtoolsInit {
+    /**
+     * Array of plugins to be used in the devtools.
+     * Each plugin should have a `render` function that returns a React element or a function
+     *
+     * Example:
+     * ```jsx
+     * <TanstackDevtools
+     *   plugins={[
+     *     {
+     *       id: "your-plugin-id",
+     *       name: "Your Plugin",
+     *       render: <CustomPluginComponent />,
+     *     }
+     *   ]}
+     * />
+     * ```
+     */
+    plugins?: Array<TanStackDevtoolsSolidPlugin>;
+    /**
+     * Configuration for the devtools shell. These configuration options are used to set the
+     * initial state of the devtools when it is started for the first time. Afterwards,
+     * the settings are persisted in local storage and changed through the settings panel.
+     */
+    config?: Partial<TanStackDevtoolsConfig>;
+    /**
+     * Configuration for the TanStack Devtools client event bus.
+     */
+    eventBusConfig?: ClientEventBusConfig;
+}
+export default function SolidDevtoolsCore({ config, plugins, eventBusConfig, }: TanstackDevtoolsInit): JSX.Element;
+export {};

package/dist/esm/core.js

@@ -0,0 +1,53 @@
+import { createComponent, template, use, Portal } from "solid-js/web";
+import { TanStackDevtoolsCore } from "@tanstack/devtools";
+import { createSignal, createEffect, onMount, onCleanup } from "solid-js";
+var _tmpl$ = /* @__PURE__ */ template(`<div>`);
+const convertRender = (el, Component) => createComponent(Portal, {
+  mount: el,
+  get children() {
+    return typeof Component === "function" ? createComponent(Component, {}) : Component;
+  }
+});
+function SolidDevtoolsCore({
+  config,
+  plugins,
+  eventBusConfig
+}) {
+  const [devtools] = createSignal(new TanStackDevtoolsCore({
+    config,
+    eventBusConfig,
+    plugins: plugins?.map((plugin) => ({
+      ...plugin,
+      name: typeof plugin.name === "string" ? plugin.name : (
+        // The check above confirms that `plugin.name` is of Render type
+        (el) => convertRender(el, plugin.name)
+      ),
+      render: (el) => convertRender(el, plugin.render)
+    }))
+  }));
+  let devToolRef;
+  createEffect(() => {
+    devtools().setConfig({
+      config
+    });
+  });
+  onMount(() => {
+    if (devToolRef) {
+      devtools().mount(devToolRef);
+      onCleanup(() => {
+        devtools().unmount();
+      });
+    }
+  });
+  return (() => {
+    var _el$ = _tmpl$();
+    var _ref$ = devToolRef;
+    typeof _ref$ === "function" ? use(_ref$, _el$) : devToolRef = _el$;
+    _el$.style.setProperty("position", "absolute");
+    return _el$;
+  })();
+}
+export {
+  SolidDevtoolsCore as default
+};
+//# sourceMappingURL=core.js.map

package/dist/esm/core.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"core.js","sources":["../../src/core.tsx"],"sourcesContent":["import { TanStackDevtoolsCore } from '@tanstack/devtools'\nimport { createEffect, createSignal, onCleanup, onMount } from 'solid-js'\nimport { Portal } from 'solid-js/web'\nimport type { JSX } from 'solid-js'\nimport type {\n  ClientEventBusConfig,\n  TanStackDevtoolsConfig,\n  TanStackDevtoolsPlugin,\n} from '@tanstack/devtools'\n\ntype SolidPluginRender = JSX.Element | (() => JSX.Element)\nconst convertRender = (\n  el: HTMLDivElement | HTMLHeadingElement,\n  Component: SolidPluginRender,\n) => (\n  <Portal mount={el}>\n    {typeof Component === 'function' ? <Component /> : Component}\n  </Portal>\n)\n\nexport type TanStackDevtoolsSolidPlugin = Omit<\n  TanStackDevtoolsPlugin,\n  'render' | 'name'\n> & {\n  /**\n   * The render function can be a SolidJS element or a function that returns a SolidJS element.\n   * If it's a function, it will be called to render the plugin, otherwise it will be rendered directly.\n   *\n   * Example:\n   * ```ts\n   *   {\n   *     render: () => <CustomPluginComponent />,\n   *   }\n   * ```\n   * or\n   * ```ts\n   *   {\n   *     render: <CustomPluginComponent />,\n   *   }\n   * ```\n   */\n  render: SolidPluginRender\n  /**\n   * Name to be displayed in the devtools UI.\n   * If a string, it will be used as the plugin name.\n   * If a function, it will be called with the mount element.\n   *\n   * Example:\n   * ```ts\n   *   {\n   *     name: \"Your Plugin\",\n   *     render: () => <CustomPluginComponent />,\n   *   }\n   * ```\n   * or\n   * ```ts\n   *   {\n   *     name: <h1>Your Plugin title</h1>,\n   *     render: () => <CustomPluginComponent />,\n   *   }\n   * ```\n   */\n  name: string | SolidPluginRender\n}\nexport interface TanstackDevtoolsInit {\n  /**\n   * Array of plugins to be used in the devtools.\n   * Each plugin should have a `render` function that returns a React element or a function\n   *\n   * Example:\n   * ```jsx\n   * <TanstackDevtools\n   *   plugins={[\n   *     {\n   *       id: \"your-plugin-id\",\n   *       name: \"Your Plugin\",\n   *       render: <CustomPluginComponent />,\n   *     }\n   *   ]}\n   * />\n   * ```\n   */\n  plugins?: Array<TanStackDevtoolsSolidPlugin>\n  /**\n   * Configuration for the devtools shell. These configuration options are used to set the\n   * initial state of the devtools when it is started for the first time. Afterwards,\n   * the settings are persisted in local storage and changed through the settings panel.\n   */\n  config?: Partial<TanStackDevtoolsConfig>\n  /**\n   * Configuration for the TanStack Devtools client event bus.\n   */\n  eventBusConfig?: ClientEventBusConfig\n}\n\nexport default function SolidDevtoolsCore({\n  config,\n  plugins,\n  eventBusConfig,\n}: TanstackDevtoolsInit) {\n  const [devtools] = createSignal(\n    new TanStackDevtoolsCore({\n      config,\n      eventBusConfig,\n      plugins: plugins?.map((plugin) => ({\n        ...plugin,\n        name:\n          typeof plugin.name === 'string'\n            ? plugin.name\n            : // The check above confirms that `plugin.name` is of Render type\n              (el) => convertRender(el, plugin.name as SolidPluginRender),\n        render: (el: HTMLDivElement) => convertRender(el, plugin.render),\n      })),\n    }),\n  )\n  let devToolRef: HTMLDivElement | undefined\n  createEffect(() => {\n    devtools().setConfig({ config })\n  })\n  onMount(() => {\n    if (devToolRef) {\n      devtools().mount(devToolRef)\n\n      onCleanup(() => {\n        devtools().unmount()\n      })\n    }\n  })\n  return <div style={{ position: 'absolute' }} ref={devToolRef} />\n}\n"],"names":["convertRender","el","Component","_$createComponent","Portal","mount","children","SolidDevtoolsCore","config","plugins","eventBusConfig","devtools","createSignal","TanStackDevtoolsCore","map","plugin","name","render","devToolRef","createEffect","setConfig","onMount","onCleanup","unmount","_el$","_tmpl$","_ref$","_$use","style","setProperty"],"mappings":";;;;AAWA,MAAMA,gBAAgBA,CACpBC,IACAC,cAA4BC,gBAE3BC,QAAM;AAAA,EAACC,OAAOJ;AAAAA,EAAE,IAAAK,WAAA;AAAA,WACd,OAAOJ,cAAc,aAAUC,gBAAID,WAAS,CAAA,CAAA,IAAMA;AAAAA,EAAS;AAAA,CAAA;AA+EhE,SAAwBK,kBAAkB;AAAA,EACxCC;AAAAA,EACAC;AAAAA,EACAC;AACoB,GAAG;AACvB,QAAM,CAACC,QAAQ,IAAIC,aACjB,IAAIC,qBAAqB;AAAA,IACvBL;AAAAA,IACAE;AAAAA,IACAD,SAASA,SAASK,IAAKC,CAAAA,YAAY;AAAA,MACjC,GAAGA;AAAAA,MACHC,MACE,OAAOD,OAAOC,SAAS,WACnBD,OAAOC;AAAAA;AAAAA,QAENf,CAAAA,OAAOD,cAAcC,IAAIc,OAAOC,IAAyB;AAAA;AAAA,MAChEC,QAAQA,CAAChB,OAAuBD,cAAcC,IAAIc,OAAOE,MAAM;AAAA,IAAA,EAC/D;AAAA,EAAA,CACH,CACH;AACA,MAAIC;AACJC,eAAa,MAAM;AACjBR,aAAAA,EAAWS,UAAU;AAAA,MAAEZ;AAAAA,IAAAA,CAAQ;AAAA,EACjC,CAAC;AACDa,UAAQ,MAAM;AACZ,QAAIH,YAAY;AACdP,eAAAA,EAAWN,MAAMa,UAAU;AAE3BI,gBAAU,MAAM;AACdX,iBAAAA,EAAWY,QAAAA;AAAAA,MACb,CAAC;AAAA,IACH;AAAA,EACF,CAAC;AACD,UAAA,MAAA;AAAA,QAAAC,OAAAC,OAAAA;AAAA,QAAAC,QAAkDR;AAAU,WAAAQ,UAAA,aAAAC,IAAAD,OAAAF,IAAA,IAAVN,aAAUM;AAAAA,SAAAI,MAAAC,YAAA,YAAA,UAAA;AAAA,WAAAL;AAAAA,EAAA,GAAA;AAC9D;"}

package/dist/esm/devtools.d.ts

@@ -1,76 +1,3 @@
-import { JSX } from 'solid-js';
-import { ClientEventBusConfig, TanStackDevtoolsConfig, TanStackDevtoolsPlugin } from '@tanstack/devtools';
-type SolidPluginRender = JSX.Element | (() => JSX.Element);
-export type TanStackDevtoolsSolidPlugin = Omit<TanStackDevtoolsPlugin, 'render' | 'name'> & {
-    /**
-     * The render function can be a SolidJS element or a function that returns a SolidJS element.
-     * If it's a function, it will be called to render the plugin, otherwise it will be rendered directly.
-     *
-     * Example:
-     * ```ts
-     *   {
-     *     render: () => <CustomPluginComponent />,
-     *   }
-     * ```
-     * or
-     * ```ts
-     *   {
-     *     render: <CustomPluginComponent />,
-     *   }
-     * ```
-     */
-    render: SolidPluginRender;
-    /**
-     * Name to be displayed in the devtools UI.
-     * If a string, it will be used as the plugin name.
-     * If a function, it will be called with the mount element.
-     *
-     * Example:
-     * ```ts
-     *   {
-     *     name: "Your Plugin",
-     *     render: () => <CustomPluginComponent />,
-     *   }
-     * ```
-     * or
-     * ```ts
-     *   {
-     *     name: <h1>Your Plugin title</h1>,
-     *     render: () => <CustomPluginComponent />,
-     *   }
-     * ```
-     */
-    name: string | SolidPluginRender;
-};
-interface TanstackDevtoolsInit {
-    /**
-     * Array of plugins to be used in the devtools.
-     * Each plugin should have a `render` function that returns a React element or a function
-     *
-     * Example:
-     * ```jsx
-     * <TanstackDevtools
-     *   plugins={[
-     *     {
-     *       id: "your-plugin-id",
-     *       name: "Your Plugin",
-     *       render: <CustomPluginComponent />,
-     *     }
-     *   ]}
-     * />
-     * ```
-     */
-    plugins?: Array<TanStackDevtoolsSolidPlugin>;
-    /**
-     * Configuration for the devtools shell. These configuration options are used to set the
-     * initial state of the devtools when it is started for the first time. Afterwards,
-     * the settings are persisted in local storage and changed through the settings panel.
-     */
-    config?: Partial<TanStackDevtoolsConfig>;
-    /**
-     * Configuration for the TanStack Devtools client event bus.
-     */
-    eventBusConfig?: ClientEventBusConfig;
-}
-export declare const TanstackDevtools: ({ config, plugins, eventBusConfig, }: TanstackDevtoolsInit) => JSX.Element;
-export {};
+export declare const TanstackDevtools: (props: import('./core.js').TanstackDevtoolsInit & {
+    fallback?: import("solid-js").JSX.Element;
+}) => any;

package/dist/esm/devtools.js

@@ -1,52 +1,5 @@
-import { createComponent, template, use, Portal } from "solid-js/web";
-import { TanStackDevtoolsCore } from "@tanstack/devtools";
-import { createSignal, createEffect, onMount, onCleanup } from "solid-js";
-var _tmpl$ = /* @__PURE__ */ template(`<div>`);
-const convertRender = (el, Component) => createComponent(Portal, {
-  mount: el,
-  get children() {
-    return typeof Component === "function" ? createComponent(Component, {}) : Component;
-  }
-});
-const TanstackDevtools = ({
-  config,
-  plugins,
-  eventBusConfig
-}) => {
-  const [devtools] = createSignal(new TanStackDevtoolsCore({
-    config,
-    eventBusConfig,
-    plugins: plugins?.map((plugin) => ({
-      ...plugin,
-      name: typeof plugin.name === "string" ? plugin.name : (
-        // The check above confirms that `plugin.name` is of Render type
-        (el) => convertRender(el, plugin.name)
-      ),
-      render: (el) => convertRender(el, plugin.render)
-    }))
-  }));
-  let devToolRef;
-  createEffect(() => {
-    devtools().setConfig({
-      config
-    });
-  });
-  onMount(() => {
-    if (devToolRef) {
-      devtools().mount(devToolRef);
-      onCleanup(() => {
-        devtools().unmount();
-      });
-    }
-  });
-  return (() => {
-    var _el$ = _tmpl$();
-    var _ref$ = devToolRef;
-    typeof _ref$ === "function" ? use(_ref$, _el$) : devToolRef = _el$;
-    _el$.style.setProperty("height", "100%");
-    return _el$;
-  })();
-};
+import clientOnly from "./client-only.js";
+const TanstackDevtools = clientOnly(() => import("./core.js").then((m) => m));
 export {
   TanstackDevtools
 };

package/dist/esm/devtools.js.map

@@ -1 +1 @@
-{"version":3,"file":"devtools.js","sources":["../../src/devtools.tsx"],"sourcesContent":["import { TanStackDevtoolsCore } from '@tanstack/devtools'\nimport { createEffect, createSignal, onCleanup, onMount } from 'solid-js'\nimport { Portal } from 'solid-js/web'\nimport type { JSX } from 'solid-js'\nimport type {\n  ClientEventBusConfig,\n  TanStackDevtoolsConfig,\n  TanStackDevtoolsPlugin,\n} from '@tanstack/devtools'\n\ntype SolidPluginRender = JSX.Element | (() => JSX.Element)\nconst convertRender = (\n  el: HTMLDivElement | HTMLHeadingElement,\n  Component: SolidPluginRender,\n) => (\n  <Portal mount={el}>\n    {typeof Component === 'function' ? <Component /> : Component}\n  </Portal>\n)\n\nexport type TanStackDevtoolsSolidPlugin = Omit<\n  TanStackDevtoolsPlugin,\n  'render' | 'name'\n> & {\n  /**\n   * The render function can be a SolidJS element or a function that returns a SolidJS element.\n   * If it's a function, it will be called to render the plugin, otherwise it will be rendered directly.\n   *\n   * Example:\n   * ```ts\n   *   {\n   *     render: () => <CustomPluginComponent />,\n   *   }\n   * ```\n   * or\n   * ```ts\n   *   {\n   *     render: <CustomPluginComponent />,\n   *   }\n   * ```\n   */\n  render: SolidPluginRender\n  /**\n   * Name to be displayed in the devtools UI.\n   * If a string, it will be used as the plugin name.\n   * If a function, it will be called with the mount element.\n   *\n   * Example:\n   * ```ts\n   *   {\n   *     name: \"Your Plugin\",\n   *     render: () => <CustomPluginComponent />,\n   *   }\n   * ```\n   * or\n   * ```ts\n   *   {\n   *     name: <h1>Your Plugin title</h1>,\n   *     render: () => <CustomPluginComponent />,\n   *   }\n   * ```\n   */\n  name: string | SolidPluginRender\n}\ninterface TanstackDevtoolsInit {\n  /**\n   * Array of plugins to be used in the devtools.\n   * Each plugin should have a `render` function that returns a React element or a function\n   *\n   * Example:\n   * ```jsx\n   * <TanstackDevtools\n   *   plugins={[\n   *     {\n   *       id: \"your-plugin-id\",\n   *       name: \"Your Plugin\",\n   *       render: <CustomPluginComponent />,\n   *     }\n   *   ]}\n   * />\n   * ```\n   */\n  plugins?: Array<TanStackDevtoolsSolidPlugin>\n  /**\n   * Configuration for the devtools shell. These configuration options are used to set the\n   * initial state of the devtools when it is started for the first time. Afterwards,\n   * the settings are persisted in local storage and changed through the settings panel.\n   */\n  config?: Partial<TanStackDevtoolsConfig>\n  /**\n   * Configuration for the TanStack Devtools client event bus.\n   */\n  eventBusConfig?: ClientEventBusConfig\n}\n\nexport const TanstackDevtools = ({\n  config,\n  plugins,\n  eventBusConfig,\n}: TanstackDevtoolsInit) => {\n  const [devtools] = createSignal(\n    new TanStackDevtoolsCore({\n      config,\n      eventBusConfig,\n      plugins: plugins?.map((plugin) => ({\n        ...plugin,\n        name:\n          typeof plugin.name === 'string'\n            ? plugin.name\n            : // The check above confirms that `plugin.name` is of Render type\n              (el) => convertRender(el, plugin.name as SolidPluginRender),\n        render: (el: HTMLDivElement) => convertRender(el, plugin.render),\n      })),\n    }),\n  )\n  let devToolRef: HTMLDivElement | undefined\n  createEffect(() => {\n    devtools().setConfig({ config })\n  })\n  onMount(() => {\n    if (devToolRef) {\n      devtools().mount(devToolRef)\n\n      onCleanup(() => {\n        devtools().unmount()\n      })\n    }\n  })\n  return <div style={{ height: '100%' }} ref={devToolRef} />\n}\n"],"names":["convertRender","el","Component","_$createComponent","Portal","mount","children","TanstackDevtools","config","plugins","eventBusConfig","devtools","createSignal","TanStackDevtoolsCore","map","plugin","name","render","devToolRef","createEffect","setConfig","onMount","onCleanup","unmount","_el$","_tmpl$","_ref$","_$use","style","setProperty"],"mappings":";;;;AAWA,MAAMA,gBAAgBA,CACpBC,IACAC,cAA4BC,gBAE3BC,QAAM;AAAA,EAACC,OAAOJ;AAAAA,EAAE,IAAAK,WAAA;AAAA,WACd,OAAOJ,cAAc,aAAUC,gBAAID,WAAS,CAAA,CAAA,IAAMA;AAAAA,EAAS;AAAA,CAAA;AA+EzD,MAAMK,mBAAmBA,CAAC;AAAA,EAC/BC;AAAAA,EACAC;AAAAA,EACAC;AACoB,MAAM;AAC1B,QAAM,CAACC,QAAQ,IAAIC,aACjB,IAAIC,qBAAqB;AAAA,IACvBL;AAAAA,IACAE;AAAAA,IACAD,SAASA,SAASK,IAAKC,CAAAA,YAAY;AAAA,MACjC,GAAGA;AAAAA,MACHC,MACE,OAAOD,OAAOC,SAAS,WACnBD,OAAOC;AAAAA;AAAAA,QAENf,CAAAA,OAAOD,cAAcC,IAAIc,OAAOC,IAAyB;AAAA;AAAA,MAChEC,QAAQA,CAAChB,OAAuBD,cAAcC,IAAIc,OAAOE,MAAM;AAAA,IAAA,EAC/D;AAAA,EAAA,CACH,CACH;AACA,MAAIC;AACJC,eAAa,MAAM;AACjBR,aAAAA,EAAWS,UAAU;AAAA,MAAEZ;AAAAA,IAAAA,CAAQ;AAAA,EACjC,CAAC;AACDa,UAAQ,MAAM;AACZ,QAAIH,YAAY;AACdP,eAAAA,EAAWN,MAAMa,UAAU;AAE3BI,gBAAU,MAAM;AACdX,iBAAAA,EAAWY,QAAAA;AAAAA,MACb,CAAC;AAAA,IACH;AAAA,EACF,CAAC;AACD,UAAA,MAAA;AAAA,QAAAC,OAAAC,OAAAA;AAAA,QAAAC,QAA4CR;AAAU,WAAAQ,UAAA,aAAAC,IAAAD,OAAAF,IAAA,IAAVN,aAAUM;AAAAA,SAAAI,MAAAC,YAAA,UAAA,MAAA;AAAA,WAAAL;AAAAA,EAAA,GAAA;AACxD;"}
+{"version":3,"file":"devtools.js","sources":["../../src/devtools.tsx"],"sourcesContent":["import clientOnly from './client-only'\n\nexport const TanstackDevtools = clientOnly(() =>\n  import('./core').then((m) => m),\n)\n"],"names":["TanstackDevtools","clientOnly","then","m"],"mappings":";AAEO,MAAMA,mBAAmBC,WAAW,MACzC,OAAO,WAAQ,EAAEC,KAAMC,CAAAA,MAAMA,CAAC,CAChC;"}

package/dist/esm/index.d.ts

@@ -3,4 +3,4 @@ export * from '@tanstack/devtools';
  * Export every hook individually - DON'T export from barrel files
  */
 export { TanstackDevtools } from './devtools.js';
-export type { TanStackDevtoolsSolidPlugin } from './devtools.js';
+export type { TanStackDevtoolsSolidPlugin } from './core.js';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tanstack/solid-devtools",
-  "version": "0.3.0",
+  "version": "0.3.2",
   "description": "TanStack Devtools is a set of tools for building advanced devtools for your Solid application.",
   "author": "Tanner Linsley",
   "license": "MIT",
@@ -44,7 +44,7 @@
     "src"
   ],
   "dependencies": {
-    "@tanstack/devtools": "0.3.1"
+    "@tanstack/devtools": "0.3.2"
   },
   "devDependencies": {
     "solid-js": "^1.9.7",

package/src/client-only.ts

@@ -0,0 +1,54 @@
+import {
+  createMemo,
+  createSignal,
+  onMount,
+  sharedConfig,
+  splitProps,
+  untrack,
+} from 'solid-js'
+import { isServer } from 'solid-js/web'
+import type { Component, ComponentProps, JSX, Setter } from 'solid-js'
+
+/**
+ *
+ * Read more: https://docs.solidjs.com/solid-start/reference/client/client-only
+ */
+// not using Suspense
+export default function clientOnly<T extends Component<any>>(
+  fn: () => Promise<{
+    default: T
+  }>,
+  options: { lazy?: boolean } = {},
+) {
+  if (isServer)
+    return (props: ComponentProps<T> & { fallback?: JSX.Element }) =>
+      props.fallback
+
+  const [comp, setComp] = createSignal<T>()
+  !options.lazy && load(fn, setComp)
+  return (props: ComponentProps<T>) => {
+    let Comp: T | undefined
+    let m: boolean
+    const [, rest] = splitProps(props, ['fallback'])
+    options.lazy && load(fn, setComp)
+    if ((Comp = comp()) && !sharedConfig.context) return Comp(rest)
+    const [mounted, setMounted] = createSignal(!sharedConfig.context)
+    onMount(() => setMounted(true))
+    return createMemo(
+      () => (
+        (Comp = comp()),
+        (m = mounted()),
+        untrack(() => (Comp && m ? Comp(rest) : props.fallback))
+      ),
+    )
+  }
+}
+
+function load<T>(
+  fn: () => Promise<{
+    default: T
+  }>,
+  setComp: Setter<T>,
+) {
+  fn().then((m) => setComp(() => m.default))
+}

package/src/core.tsx

@@ -0,0 +1,130 @@
+import { TanStackDevtoolsCore } from '@tanstack/devtools'
+import { createEffect, createSignal, onCleanup, onMount } from 'solid-js'
+import { Portal } from 'solid-js/web'
+import type { JSX } from 'solid-js'
+import type {
+  ClientEventBusConfig,
+  TanStackDevtoolsConfig,
+  TanStackDevtoolsPlugin,
+} from '@tanstack/devtools'
+
+type SolidPluginRender = JSX.Element | (() => JSX.Element)
+const convertRender = (
+  el: HTMLDivElement | HTMLHeadingElement,
+  Component: SolidPluginRender,
+) => (
+  <Portal mount={el}>
+    {typeof Component === 'function' ? <Component /> : Component}
+  </Portal>
+)
+
+export type TanStackDevtoolsSolidPlugin = Omit<
+  TanStackDevtoolsPlugin,
+  'render' | 'name'
+> & {
+  /**
+   * The render function can be a SolidJS element or a function that returns a SolidJS element.
+   * If it's a function, it will be called to render the plugin, otherwise it will be rendered directly.
+   *
+   * Example:
+   * ```ts
+   *   {
+   *     render: () => <CustomPluginComponent />,
+   *   }
+   * ```
+   * or
+   * ```ts
+   *   {
+   *     render: <CustomPluginComponent />,
+   *   }
+   * ```
+   */
+  render: SolidPluginRender
+  /**
+   * Name to be displayed in the devtools UI.
+   * If a string, it will be used as the plugin name.
+   * If a function, it will be called with the mount element.
+   *
+   * Example:
+   * ```ts
+   *   {
+   *     name: "Your Plugin",
+   *     render: () => <CustomPluginComponent />,
+   *   }
+   * ```
+   * or
+   * ```ts
+   *   {
+   *     name: <h1>Your Plugin title</h1>,
+   *     render: () => <CustomPluginComponent />,
+   *   }
+   * ```
+   */
+  name: string | SolidPluginRender
+}
+export interface TanstackDevtoolsInit {
+  /**
+   * Array of plugins to be used in the devtools.
+   * Each plugin should have a `render` function that returns a React element or a function
+   *
+   * Example:
+   * ```jsx
+   * <TanstackDevtools
+   *   plugins={[
+   *     {
+   *       id: "your-plugin-id",
+   *       name: "Your Plugin",
+   *       render: <CustomPluginComponent />,
+   *     }
+   *   ]}
+   * />
+   * ```
+   */
+  plugins?: Array<TanStackDevtoolsSolidPlugin>
+  /**
+   * Configuration for the devtools shell. These configuration options are used to set the
+   * initial state of the devtools when it is started for the first time. Afterwards,
+   * the settings are persisted in local storage and changed through the settings panel.
+   */
+  config?: Partial<TanStackDevtoolsConfig>
+  /**
+   * Configuration for the TanStack Devtools client event bus.
+   */
+  eventBusConfig?: ClientEventBusConfig
+}
+
+export default function SolidDevtoolsCore({
+  config,
+  plugins,
+  eventBusConfig,
+}: TanstackDevtoolsInit) {
+  const [devtools] = createSignal(
+    new TanStackDevtoolsCore({
+      config,
+      eventBusConfig,
+      plugins: plugins?.map((plugin) => ({
+        ...plugin,
+        name:
+          typeof plugin.name === 'string'
+            ? plugin.name
+            : // The check above confirms that `plugin.name` is of Render type
+              (el) => convertRender(el, plugin.name as SolidPluginRender),
+        render: (el: HTMLDivElement) => convertRender(el, plugin.render),
+      })),
+    }),
+  )
+  let devToolRef: HTMLDivElement | undefined
+  createEffect(() => {
+    devtools().setConfig({ config })
+  })
+  onMount(() => {
+    if (devToolRef) {
+      devtools().mount(devToolRef)
+
+      onCleanup(() => {
+        devtools().unmount()
+      })
+    }
+  })
+  return <div style={{ position: 'absolute' }} ref={devToolRef} />
+}

package/src/devtools.tsx

@@ -1,130 +1,5 @@
-import { TanStackDevtoolsCore } from '@tanstack/devtools'
-import { createEffect, createSignal, onCleanup, onMount } from 'solid-js'
-import { Portal } from 'solid-js/web'
-import type { JSX } from 'solid-js'
-import type {
-  ClientEventBusConfig,
-  TanStackDevtoolsConfig,
-  TanStackDevtoolsPlugin,
-} from '@tanstack/devtools'
+import clientOnly from './client-only'
 
-type SolidPluginRender = JSX.Element | (() => JSX.Element)
-const convertRender = (
-  el: HTMLDivElement | HTMLHeadingElement,
-  Component: SolidPluginRender,
-) => (
-  <Portal mount={el}>
-    {typeof Component === 'function' ? <Component /> : Component}
-  </Portal>
+export const TanstackDevtools = clientOnly(() =>
+  import('./core').then((m) => m),
 )
-
-export type TanStackDevtoolsSolidPlugin = Omit<
-  TanStackDevtoolsPlugin,
-  'render' | 'name'
-> & {
-  /**
-   * The render function can be a SolidJS element or a function that returns a SolidJS element.
-   * If it's a function, it will be called to render the plugin, otherwise it will be rendered directly.
-   *
-   * Example:
-   * ```ts
-   *   {
-   *     render: () => <CustomPluginComponent />,
-   *   }
-   * ```
-   * or
-   * ```ts
-   *   {
-   *     render: <CustomPluginComponent />,
-   *   }
-   * ```
-   */
-  render: SolidPluginRender
-  /**
-   * Name to be displayed in the devtools UI.
-   * If a string, it will be used as the plugin name.
-   * If a function, it will be called with the mount element.
-   *
-   * Example:
-   * ```ts
-   *   {
-   *     name: "Your Plugin",
-   *     render: () => <CustomPluginComponent />,
-   *   }
-   * ```
-   * or
-   * ```ts
-   *   {
-   *     name: <h1>Your Plugin title</h1>,
-   *     render: () => <CustomPluginComponent />,
-   *   }
-   * ```
-   */
-  name: string | SolidPluginRender
-}
-interface TanstackDevtoolsInit {
-  /**
-   * Array of plugins to be used in the devtools.
-   * Each plugin should have a `render` function that returns a React element or a function
-   *
-   * Example:
-   * ```jsx
-   * <TanstackDevtools
-   *   plugins={[
-   *     {
-   *       id: "your-plugin-id",
-   *       name: "Your Plugin",
-   *       render: <CustomPluginComponent />,
-   *     }
-   *   ]}
-   * />
-   * ```
-   */
-  plugins?: Array<TanStackDevtoolsSolidPlugin>
-  /**
-   * Configuration for the devtools shell. These configuration options are used to set the
-   * initial state of the devtools when it is started for the first time. Afterwards,
-   * the settings are persisted in local storage and changed through the settings panel.
-   */
-  config?: Partial<TanStackDevtoolsConfig>
-  /**
-   * Configuration for the TanStack Devtools client event bus.
-   */
-  eventBusConfig?: ClientEventBusConfig
-}
-
-export const TanstackDevtools = ({
-  config,
-  plugins,
-  eventBusConfig,
-}: TanstackDevtoolsInit) => {
-  const [devtools] = createSignal(
-    new TanStackDevtoolsCore({
-      config,
-      eventBusConfig,
-      plugins: plugins?.map((plugin) => ({
-        ...plugin,
-        name:
-          typeof plugin.name === 'string'
-            ? plugin.name
-            : // The check above confirms that `plugin.name` is of Render type
-              (el) => convertRender(el, plugin.name as SolidPluginRender),
-        render: (el: HTMLDivElement) => convertRender(el, plugin.render),
-      })),
-    }),
-  )
-  let devToolRef: HTMLDivElement | undefined
-  createEffect(() => {
-    devtools().setConfig({ config })
-  })
-  onMount(() => {
-    if (devToolRef) {
-      devtools().mount(devToolRef)
-
-      onCleanup(() => {
-        devtools().unmount()
-      })
-    }
-  })
-  return <div style={{ height: '100%' }} ref={devToolRef} />
-}

package/src/index.ts

@@ -5,4 +5,4 @@ export * from '@tanstack/devtools'
  */
 
 export { TanstackDevtools } from './devtools'
-export type { TanStackDevtoolsSolidPlugin } from './devtools'
+export type { TanStackDevtoolsSolidPlugin } from './core'