@tanstack/solid-devtools 0.0.0 → 0.1.0

package/README.md

@@ -0,0 +1,26 @@
+# @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>
+  )
+}
+```

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  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;;"}

package/dist/cjs/devtools.d.cts

@@ -1,2 +1,13 @@
-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'> & {
+    render: SolidPluginRender;
+    name: string | SolidPluginRender;
+};
+interface TanstackDevtoolsInit {
+    plugins?: Array<TanStackDevtoolsSolidPlugin>;
+    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,13 @@
-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'> & {
+    render: SolidPluginRender;
+    name: string | SolidPluginRender;
+};
+interface TanstackDevtoolsInit {
+    plugins?: Array<TanStackDevtoolsSolidPlugin>;
+    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  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;"}

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.0",
+  "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.0"
   },
   "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,52 @@
-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'
+> & {
+  render: SolidPluginRender
+  name: string | SolidPluginRender
+}
+interface TanstackDevtoolsInit {
+  plugins?: Array<TanStackDevtoolsSolidPlugin>
+  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'