@tanstack/solid-devtools 0.1.0 → 0.2.0

package/README.md

@@ -24,3 +24,28 @@ 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:
+
+```tsx
+import { TanstackDevtools } from '@tanstack/solid-devtools'
+
+function App() {
+  return (
+    <div>
+      <h1>My App</h1>
+      <TanstackDevtools
+        plugins={[
+          {
+            id: 'your-plugin-id',
+            name: 'Your Plugin',
+            render: <CustomPluginComponent />,
+          },
+        ]}
+      />
+    </div>
+  )
+}
+```

package/dist/cjs/devtools.cjs

@@ -12,10 +12,12 @@ const convertRender = (el, Component) => web.createComponent(web.Portal, {
 });
 const TanstackDevtools = ({
   config,
-  plugins
+  plugins,
+  eventBusConfig
 }) => {
   const [devtools$1] = solidJs.createSignal(new devtools.TanStackDevtoolsCore({
     config,
+    eventBusConfig,
     plugins: plugins?.map((plugin) => ({
       ...plugin,
       name: typeof plugin.name === "string" ? plugin.name : (

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  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  render: SolidPluginRender\n  name: string | SolidPluginRender\n}\ninterface TanstackDevtoolsInit {\n  plugins?: Array<TanStackDevtoolsSolidPlugin>\n  config?: TanStackDevtoolsConfig\n}\n\nexport const TanstackDevtools = ({ config, plugins }: TanstackDevtoolsInit) => {\n  const [devtools] = createSignal(\n    new TanStackDevtoolsCore({\n      config,\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 ref={devToolRef} />\n}\n"],"names":["convertRender","el","Component","_$createComponent","Portal","mount","children","TanstackDevtools","config","plugins","devtools","createSignal","TanStackDevtoolsCore","map","plugin","name","render","devToolRef","createEffect","setConfig","onMount","onCleanup","unmount","_el$","_tmpl$","_ref$","_$use"],"mappings":";;;;;;AAUA,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;AAgBzD,MAAMK,mBAAmBA,CAAC;AAAA,EAAEC;AAAAA,EAAQC;AAA8B,MAAM;AAC7E,QAAM,CAACC,UAAQ,IAAIC,QAAAA,aACjB,IAAIC,SAAAA,qBAAqB;AAAA,IACvBJ;AAAAA,IACAC,SAASA,SAASI,IAAKC,CAAAA,YAAY;AAAA,MACjC,GAAGA;AAAAA,MACHC,MACE,OAAOD,OAAOC,SAAS,WACnBD,OAAOC;AAAAA;AAAAA,QAENd,CAAAA,OAAOD,cAAcC,IAAIa,OAAOC,IAAyB;AAAA;AAAA,MAChEC,QAAQA,CAACf,OAAuBD,cAAcC,IAAIa,OAAOE,MAAM;AAAA,IAAA,EAC/D;AAAA,EAAA,CACH,CACH;AACA,MAAIC;AACJC,UAAAA,aAAa,MAAM;AACjBR,eAAAA,EAAWS,UAAU;AAAA,MAAEX;AAAAA,IAAAA,CAAQ;AAAA,EACjC,CAAC;AACDY,UAAAA,QAAQ,MAAM;AACZ,QAAIH,YAAY;AACdP,iBAAAA,EAAWL,MAAMY,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,QAAiBR;AAAU,WAAAQ,UAAA,aAAAC,IAAAA,IAAAD,OAAAF,IAAA,IAAVN,aAAUM;AAAA,WAAAA;AAAAA,EAAA,GAAA;AAC7B;;"}
+{"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 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"],"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,QAAiBR;AAAU,WAAAQ,UAAA,aAAAC,IAAAA,IAAAD,OAAAF,IAAA,IAAVN,aAAUM;AAAA,WAAAA;AAAAA,EAAA,GAAA;AAC7B;;"}

package/dist/cjs/devtools.d.cts

@@ -1,13 +1,76 @@
 import { JSX } from 'solid-js';
-import { TanStackDevtoolsConfig, TanStackDevtoolsPlugin } from '@tanstack/devtools';
+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>;
-    config?: TanStackDevtoolsConfig;
+    /**
+     * 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 }: TanstackDevtoolsInit) => JSX.Element;
+export declare const TanstackDevtools: ({ config, plugins, eventBusConfig, }: TanstackDevtoolsInit) => JSX.Element;
 export {};

package/dist/esm/devtools.d.ts

@@ -1,13 +1,76 @@
 import { JSX } from 'solid-js';
-import { TanStackDevtoolsConfig, TanStackDevtoolsPlugin } from '@tanstack/devtools';
+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>;
-    config?: TanStackDevtoolsConfig;
+    /**
+     * 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 }: TanstackDevtoolsInit) => JSX.Element;
+export declare const TanstackDevtools: ({ config, plugins, eventBusConfig, }: TanstackDevtoolsInit) => JSX.Element;
 export {};

package/dist/esm/devtools.js

@@ -10,10 +10,12 @@ const convertRender = (el, Component) => createComponent(Portal, {
 });
 const TanstackDevtools = ({
   config,
-  plugins
+  plugins,
+  eventBusConfig
 }) => {
   const [devtools] = createSignal(new TanStackDevtoolsCore({
     config,
+    eventBusConfig,
     plugins: plugins?.map((plugin) => ({
       ...plugin,
       name: typeof plugin.name === "string" ? plugin.name : (

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  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  render: SolidPluginRender\n  name: string | SolidPluginRender\n}\ninterface TanstackDevtoolsInit {\n  plugins?: Array<TanStackDevtoolsSolidPlugin>\n  config?: TanStackDevtoolsConfig\n}\n\nexport const TanstackDevtools = ({ config, plugins }: TanstackDevtoolsInit) => {\n  const [devtools] = createSignal(\n    new TanStackDevtoolsCore({\n      config,\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 ref={devToolRef} />\n}\n"],"names":["convertRender","el","Component","_$createComponent","Portal","mount","children","TanstackDevtools","config","plugins","devtools","createSignal","TanStackDevtoolsCore","map","plugin","name","render","devToolRef","createEffect","setConfig","onMount","onCleanup","unmount","_el$","_tmpl$","_ref$","_$use"],"mappings":";;;;AAUA,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;AAgBzD,MAAMK,mBAAmBA,CAAC;AAAA,EAAEC;AAAAA,EAAQC;AAA8B,MAAM;AAC7E,QAAM,CAACC,QAAQ,IAAIC,aACjB,IAAIC,qBAAqB;AAAA,IACvBJ;AAAAA,IACAC,SAASA,SAASI,IAAKC,CAAAA,YAAY;AAAA,MACjC,GAAGA;AAAAA,MACHC,MACE,OAAOD,OAAOC,SAAS,WACnBD,OAAOC;AAAAA;AAAAA,QAENd,CAAAA,OAAOD,cAAcC,IAAIa,OAAOC,IAAyB;AAAA;AAAA,MAChEC,QAAQA,CAACf,OAAuBD,cAAcC,IAAIa,OAAOE,MAAM;AAAA,IAAA,EAC/D;AAAA,EAAA,CACH,CACH;AACA,MAAIC;AACJC,eAAa,MAAM;AACjBR,aAAAA,EAAWS,UAAU;AAAA,MAAEX;AAAAA,IAAAA,CAAQ;AAAA,EACjC,CAAC;AACDY,UAAQ,MAAM;AACZ,QAAIH,YAAY;AACdP,eAAAA,EAAWL,MAAMY,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,QAAiBR;AAAU,WAAAQ,UAAA,aAAAC,IAAAD,OAAAF,IAAA,IAAVN,aAAUM;AAAA,WAAAA;AAAAA,EAAA,GAAA;AAC7B;"}
+{"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 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"],"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,QAAiBR;AAAU,WAAAQ,UAAA,aAAAC,IAAAD,OAAAF,IAAA,IAAVN,aAAUM;AAAA,WAAAA;AAAAA,EAAA,GAAA;AAC7B;"}

package/package.json

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

package/src/devtools.tsx

@@ -3,6 +3,7 @@ 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'
@@ -21,18 +22,86 @@ 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>
-  config?: TanStackDevtoolsConfig
+  /**
+   * 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 }: TanstackDevtoolsInit) => {
+export const TanstackDevtools = ({
+  config,
+  plugins,
+  eventBusConfig,
+}: TanstackDevtoolsInit) => {
   const [devtools] = createSignal(
     new TanStackDevtoolsCore({
       config,
+      eventBusConfig,
       plugins: plugins?.map((plugin) => ({
         ...plugin,
         name: