@tanstack/solid-devtools 0.0.0 → 0.1.1

package/README.md

@@ -0,0 +1,51 @@
+# @tanstack/solid-devtools
+
+This package is still under active development and might have breaking changes in the future. Please use it with caution.
+
+## Usage
+
+```tsx
+import { TanstackDevtools } from '@tanstack/solid-devtools'
+import { TanStackRouterDevtoolsPanel } from '@tanstack/solid-router-devtools'
+
+function App() {
+  return (
+    <div>
+      <h1>My App</h1>
+      <TanstackDevtools
+        plugins={[
+          {
+            name: 'Tanstack Router',
+            render: <TanStackRouterDevtoolsPanel router={router} />,
+          },
+        ]}
+      />
+    </div>
+  )
+}
+```
+
+## 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

@@ -4,11 +4,32 @@ const web = require("solid-js/web");
 const devtools = require("@tanstack/devtools");
 const solidJs = require("solid-js");
 var _tmpl$ = /* @__PURE__ */ web.template(`<div>`);
-const Devtools = (opts) => {
-  const [devtools$1] = solidJs.createSignal(new devtools.TanStackRouterDevtoolsCore(opts));
+const convertRender = (el, Component) => web.createComponent(web.Portal, {
+  mount: el,
+  get children() {
+    return typeof Component === "function" ? web.createComponent(Component, {}) : Component;
+  }
+});
+const TanstackDevtools = ({
+  config,
+  plugins
+}) => {
+  const [devtools$1] = solidJs.createSignal(new devtools.TanStackDevtoolsCore({
+    config,
+    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().setOptions(opts);
+    devtools$1().setConfig({
+      config
+    });
   });
   solidJs.onMount(() => {
     if (devToolRef) {
@@ -25,5 +46,5 @@ const Devtools = (opts) => {
     return _el$;
   })();
 };
-exports.Devtools = Devtools;
+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 { TanStackRouterDevtoolsCore } from '@tanstack/devtools'\nimport { createEffect, createSignal, onCleanup, onMount } from 'solid-js'\nimport type { DevtoolsOptions } from '@tanstack/devtools'\n\nexport const Devtools = (opts: DevtoolsOptions) => {\n  const [devtools] = createSignal(new TanStackRouterDevtoolsCore(opts))\n  let devToolRef: HTMLDivElement | undefined\n  createEffect(() => {\n    devtools().setOptions(opts)\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":["Devtools","opts","devtools","createSignal","TanStackRouterDevtoolsCore","devToolRef","createEffect","setOptions","onMount","mount","onCleanup","unmount","_el$","_tmpl$","_ref$","_$use"],"mappings":";;;;;;AAIaA,MAAAA,WAAWA,CAACC,SAA0B;AACjD,QAAM,CAACC,UAAQ,IAAIC,QAAAA,aAAa,IAAIC,SAAAA,2BAA2BH,IAAI,CAAC;AAChEI,MAAAA;AACJC,UAAAA,aAAa,MAAM;AACRJ,eAAA,EAAEK,WAAWN,IAAI;AAAA,EAAA,CAC3B;AACDO,UAAAA,QAAQ,MAAM;AACZ,QAAIH,YAAY;AACLH,iBAAA,EAAEO,MAAMJ,UAAU;AAE3BK,cAAAA,UAAU,MAAM;AACdR,mBAAAA,EAAWS,QAAQ;AAAA,MAAA,CACpB;AAAA,IAAA;AAAA,EACH,CACD;AACD,UAAA,MAAA;AAAA,QAAAC,OAAAC,OAAA;AAAA,QAAAC,QAAiBT;AAAU,WAAAS,UAAAC,aAAAA,IAAAA,IAAAD,OAAAF,IAAA,IAAVP,aAAUO;AAAAA,WAAAA;AAAAA,EAAAA,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  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?: 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;AA2EzD,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;;"}

package/dist/cjs/devtools.d.cts

@@ -1,2 +1,72 @@
-import { DevtoolsOptions } from '@tanstack/devtools';
-export declare const Devtools: (opts: DevtoolsOptions) => import("solid-js").JSX.Element;
+import { JSX } from 'solid-js';
+import { 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?: TanStackDevtoolsConfig;
+}
+export declare const TanstackDevtools: ({ config, plugins }: TanstackDevtoolsInit) => JSX.Element;
+export {};

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.Devtools = devtools.Devtools;
+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,4 +2,5 @@ export * from '@tanstack/devtools';
 /**
  * Export every hook individually - DON'T export from barrel files
  */
-export { Devtools } from './devtools.cjs';
+export { TanstackDevtools } from './devtools.cjs';
+export type { TanStackDevtoolsSolidPlugin } from './devtools.cjs';

package/dist/esm/devtools.d.ts

@@ -1,2 +1,72 @@
-import { DevtoolsOptions } from '@tanstack/devtools';
-export declare const Devtools: (opts: DevtoolsOptions) => import("solid-js").JSX.Element;
+import { JSX } from 'solid-js';
+import { 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?: TanStackDevtoolsConfig;
+}
+export declare const TanstackDevtools: ({ config, plugins }: TanstackDevtoolsInit) => JSX.Element;
+export {};

package/dist/esm/devtools.js

@@ -1,12 +1,33 @@
-import { template, use } from "solid-js/web";
-import { TanStackRouterDevtoolsCore } from "@tanstack/devtools";
+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 Devtools = (opts) => {
-  const [devtools] = createSignal(new TanStackRouterDevtoolsCore(opts));
+const convertRender = (el, Component) => createComponent(Portal, {
+  mount: el,
+  get children() {
+    return typeof Component === "function" ? createComponent(Component, {}) : Component;
+  }
+});
+const TanstackDevtools = ({
+  config,
+  plugins
+}) => {
+  const [devtools] = createSignal(new TanStackDevtoolsCore({
+    config,
+    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().setOptions(opts);
+    devtools().setConfig({
+      config
+    });
   });
   onMount(() => {
     if (devToolRef) {
@@ -24,6 +45,6 @@ const Devtools = (opts) => {
   })();
 };
 export {
-  Devtools
+  TanstackDevtools
 };
 //# sourceMappingURL=devtools.js.map

package/dist/esm/devtools.js.map

@@ -1 +1 @@
-{"version":3,"file":"devtools.js","sources":["../../src/devtools.tsx"],"sourcesContent":["import { TanStackRouterDevtoolsCore } from '@tanstack/devtools'\nimport { createEffect, createSignal, onCleanup, onMount } from 'solid-js'\nimport type { DevtoolsOptions } from '@tanstack/devtools'\n\nexport const Devtools = (opts: DevtoolsOptions) => {\n  const [devtools] = createSignal(new TanStackRouterDevtoolsCore(opts))\n  let devToolRef: HTMLDivElement | undefined\n  createEffect(() => {\n    devtools().setOptions(opts)\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":["Devtools","opts","devtools","createSignal","TanStackRouterDevtoolsCore","devToolRef","createEffect","setOptions","onMount","mount","onCleanup","unmount","_el$","_tmpl$","_ref$","_$use"],"mappings":";;;;AAIaA,MAAAA,WAAWA,CAACC,SAA0B;AACjD,QAAM,CAACC,QAAQ,IAAIC,aAAa,IAAIC,2BAA2BH,IAAI,CAAC;AAChEI,MAAAA;AACJC,eAAa,MAAM;AACR,aAAA,EAAEC,WAAWN,IAAI;AAAA,EAAA,CAC3B;AACDO,UAAQ,MAAM;AACZ,QAAIH,YAAY;AACL,eAAA,EAAEI,MAAMJ,UAAU;AAE3BK,gBAAU,MAAM;AACdR,iBAAAA,EAAWS,QAAQ;AAAA,MAAA,CACpB;AAAA,IAAA;AAAA,EACH,CACD;AACD,UAAA,MAAA;AAAA,QAAAC,OAAAC,OAAA;AAAA,QAAAC,QAAiBT;AAAU,WAAAS,UAAAC,aAAAA,IAAAD,OAAAF,IAAA,IAAVP,aAAUO;AAAAA,WAAAA;AAAAA,EAAAA,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  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?: 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;AA2EzD,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;"}

package/dist/esm/index.d.ts

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

package/dist/esm/index.js

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

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@tanstack/solid-devtools",
-  "version": "0.0.0",
-  "description": "Headless UI for creating advanced custom devtools, autocomplete, and dropdown components in Solid.",
+  "version": "0.1.1",
+  "description": "TanStack Devtools is a set of tools for building advanced devtools for your Solid application.",
   "author": "Tanner Linsley",
   "license": "MIT",
   "repository": {
@@ -16,12 +16,7 @@
   },
   "keywords": [
     "solid",
-    "devtools",
-    "autocomplete",
-    "dropdown",
-    "menu",
-    "headless-ui",
-    "nested"
+    "devtools"
   ],
   "type": "module",
   "types": "dist/esm/index.d.ts",
@@ -49,14 +44,14 @@
     "src"
   ],
   "dependencies": {
-    "@tanstack/devtools": "0.0.0"
+    "@tanstack/devtools": "0.1.1"
   },
   "devDependencies": {
-    "solid-js": "^1.9.5",
+    "solid-js": "^1.9.7",
     "vite-plugin-solid": "^2.11.6"
   },
   "peerDependencies": {
-    "solid-js": ">=1.9.5"
+    "solid-js": ">=1.9.7"
   },
   "scripts": {
     "clean": "premove ./build ./dist",

package/src/devtools.tsx

@@ -1,12 +1,111 @@
-import { TanStackRouterDevtoolsCore } from '@tanstack/devtools'
+import { TanStackDevtoolsCore } from '@tanstack/devtools'
 import { createEffect, createSignal, onCleanup, onMount } from 'solid-js'
-import type { DevtoolsOptions } from '@tanstack/devtools'
+import { Portal } from 'solid-js/web'
+import type { JSX } from 'solid-js'
+import type {
+  TanStackDevtoolsConfig,
+  TanStackDevtoolsPlugin,
+} from '@tanstack/devtools'
 
-export const Devtools = (opts: DevtoolsOptions) => {
-  const [devtools] = createSignal(new TanStackRouterDevtoolsCore(opts))
+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
+}
+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?: TanStackDevtoolsConfig
+}
+
+export const TanstackDevtools = ({ config, plugins }: TanstackDevtoolsInit) => {
+  const [devtools] = createSignal(
+    new TanStackDevtoolsCore({
+      config,
+      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().setOptions(opts)
+    devtools().setConfig({ config })
   })
   onMount(() => {
     if (devToolRef) {

package/src/index.ts

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