@tanstack/solid-devtools 0.3.1 → 0.4.0

package/README.md

@@ -5,17 +5,17 @@ This package is still under active development and might have breaking changes i
 ## Usage
 
 ```tsx
-import { TanstackDevtools } from '@tanstack/solid-devtools'
+import { TanStackDevtools } from '@tanstack/solid-devtools'
 import { TanStackRouterDevtoolsPanel } from '@tanstack/solid-router-devtools'
 
 function App() {
   return (
     <div>
       <h1>My App</h1>
-      <TanstackDevtools
+      <TanStackDevtools
         plugins={[
           {
-            name: 'Tanstack Router',
+            name: 'TanStack Router',
             render: <TanStackRouterDevtoolsPanel router={router} />,
           },
         ]}
@@ -27,16 +27,16 @@ function App() {
 
 ## Creating plugins
 
-In order to create a plugin for TanStack Devtools, you can use the `plugins` prop of the `TanstackDevtools` component. Here's an example of how to create a simple plugin:
+In order to create a plugin for TanStack Devtools, you can use the `plugins` prop of the `TanStackDevtools` component. Here's an example of how to create a simple plugin:
 
 ```tsx
-import { TanstackDevtools } from '@tanstack/solid-devtools'
+import { TanStackDevtools } from '@tanstack/solid-devtools'
 
 function App() {
   return (
     <div>
       <h1>My App</h1>
-      <TanstackDevtools
+      <TanStackDevtools
         plugins={[
           {
             id: 'your-plugin-id',

package/dist/cjs/core.cjs

@@ -44,7 +44,7 @@ function SolidDevtoolsCore({
     var _el$ = _tmpl$();
     var _ref$ = devToolRef;
     typeof _ref$ === "function" ? web.use(_ref$, _el$) : devToolRef = _el$;
-    _el$.style.setProperty("height", "100%");
+    _el$.style.setProperty("position", "absolute");
     return _el$;
   })();
 }

package/dist/cjs/core.cjs.map

@@ -1 +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={{ height: '100%' }} 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,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":"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

@@ -42,14 +42,14 @@ export type TanStackDevtoolsSolidPlugin = Omit<TanStackDevtoolsPlugin, 'render'
      */
     name: string | SolidPluginRender;
 };
-export interface TanstackDevtoolsInit {
+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
+     * <TanStackDevtools
      *   plugins={[
      *     {
      *       id: "your-plugin-id",
@@ -72,5 +72,5 @@ export interface TanstackDevtoolsInit {
      */
     eventBusConfig?: ClientEventBusConfig;
 }
-export default function SolidDevtoolsCore({ config, plugins, eventBusConfig, }: TanstackDevtoolsInit): JSX.Element;
+export default function SolidDevtoolsCore({ config, plugins, eventBusConfig, }: TanStackDevtoolsInit): JSX.Element;
 export {};

package/dist/cjs/devtools.cjs

@@ -2,6 +2,6 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 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;
+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 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;;"}
+{"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,3 +1,3 @@
-export declare const TanstackDevtools: (props: import('./core.cjs').TanstackDevtoolsInit & {
+export declare const TanStackDevtools: (props: import('./core.cjs').TanStackDevtoolsInit & {
     fallback?: import("solid-js").JSX.Element;
 }) => any;

package/dist/cjs/index.cjs

@@ -2,7 +2,7 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const devtools$1 = require("@tanstack/devtools");
 const devtools = require("./devtools.cjs");
-exports.TanstackDevtools = devtools.TanstackDevtools;
+exports.TanStackDevtools = devtools.TanStackDevtools;
 Object.keys(devtools$1).forEach((k) => {
   if (k !== "default" && !Object.prototype.hasOwnProperty.call(exports, k)) Object.defineProperty(exports, k, {
     enumerable: true,

package/dist/cjs/index.d.cts

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

package/dist/esm/core.d.ts

@@ -42,14 +42,14 @@ export type TanStackDevtoolsSolidPlugin = Omit<TanStackDevtoolsPlugin, 'render'
      */
     name: string | SolidPluginRender;
 };
-export interface TanstackDevtoolsInit {
+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
+     * <TanStackDevtools
      *   plugins={[
      *     {
      *       id: "your-plugin-id",
@@ -72,5 +72,5 @@ export interface TanstackDevtoolsInit {
      */
     eventBusConfig?: ClientEventBusConfig;
 }
-export default function SolidDevtoolsCore({ config, plugins, eventBusConfig, }: TanstackDevtoolsInit): JSX.Element;
+export default function SolidDevtoolsCore({ config, plugins, eventBusConfig, }: TanStackDevtoolsInit): JSX.Element;
 export {};

package/dist/esm/core.js

@@ -43,7 +43,7 @@ function SolidDevtoolsCore({
     var _el$ = _tmpl$();
     var _ref$ = devToolRef;
     typeof _ref$ === "function" ? use(_ref$, _el$) : devToolRef = _el$;
-    _el$.style.setProperty("height", "100%");
+    _el$.style.setProperty("position", "absolute");
     return _el$;
   })();
 }

package/dist/esm/core.js.map

@@ -1 +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={{ height: '100%' }} 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,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":"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,3 +1,3 @@
-export declare const TanstackDevtools: (props: import('./core.js').TanstackDevtoolsInit & {
+export declare const TanStackDevtools: (props: import('./core.js').TanStackDevtoolsInit & {
     fallback?: import("solid-js").JSX.Element;
 }) => any;

package/dist/esm/devtools.js

@@ -1,6 +1,6 @@
 import clientOnly from "./client-only.js";
-const TanstackDevtools = clientOnly(() => import("./core.js").then((m) => m));
+const TanStackDevtools = clientOnly(() => import("./core.js").then((m) => m));
 export {
-  TanstackDevtools
+  TanStackDevtools
 };
 //# sourceMappingURL=devtools.js.map

package/dist/esm/devtools.js.map

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

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

package/dist/esm/index.js

@@ -1,6 +1,6 @@
 export * from "@tanstack/devtools";
-import { TanstackDevtools } from "./devtools.js";
+import { TanStackDevtools } from "./devtools.js";
 export {
-  TanstackDevtools
+  TanStackDevtools
 };
 //# sourceMappingURL=index.js.map

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tanstack/solid-devtools",
-  "version": "0.3.1",
+  "version": "0.4.0",
   "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.4.0"
   },
   "devDependencies": {
     "solid-js": "^1.9.7",

package/src/core.tsx

@@ -62,14 +62,14 @@ export type TanStackDevtoolsSolidPlugin = Omit<
    */
   name: string | SolidPluginRender
 }
-export interface TanstackDevtoolsInit {
+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
+   * <TanStackDevtools
    *   plugins={[
    *     {
    *       id: "your-plugin-id",
@@ -97,7 +97,7 @@ export default function SolidDevtoolsCore({
   config,
   plugins,
   eventBusConfig,
-}: TanstackDevtoolsInit) {
+}: TanStackDevtoolsInit) {
   const [devtools] = createSignal(
     new TanStackDevtoolsCore({
       config,
@@ -126,5 +126,5 @@ export default function SolidDevtoolsCore({
       })
     }
   })
-  return <div style={{ height: '100%' }} ref={devToolRef} />
+  return <div style={{ position: 'absolute' }} ref={devToolRef} />
 }

package/src/devtools.tsx

@@ -1,5 +1,5 @@
 import clientOnly from './client-only'
 
-export const TanstackDevtools = clientOnly(() =>
+export const TanStackDevtools = clientOnly(() =>
   import('./core').then((m) => m),
 )

package/src/index.ts

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