@tanstack/react-devtools 0.0.0 → 0.1.1

package/README.md

@@ -0,0 +1,57 @@
+# @tanstack/react-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/react-devtools'
+import { ReactQueryDevtoolsPanel } from '@tanstack/react-query-devtools'
+import { TanStackRouterDevtoolsPanel } from '@tanstack/react-router-devtools'
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
+const queryClient = new QueryClient()
+function App() {
+  return (
+    <QueryClientProvider client={queryClient}>
+      <h1>My App</h1>
+      <TanstackDevtools
+        plugins={[
+          {
+            name: 'Tanstack Query',
+            render: <ReactQueryDevtoolsPanel />,
+          },
+          {
+            name: 'Tanstack Router',
+            render: <TanStackRouterDevtoolsPanel router={router} />,
+          },
+        ]}
+      />
+    </QueryClientProvider>
+  )
+}
+```
+
+## 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/react-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

@@ -3,9 +3,51 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const jsxRuntime = require("react/jsx-runtime");
 const react = require("react");
 const devtools = require("@tanstack/devtools");
-const Devtools = (opts) => {
+const reactDom = require("react-dom");
+const convertRender = (Component, setComponent) => {
+  setComponent(typeof Component === "function" ? Component() : Component);
+};
+const TanstackDevtools = ({
+  plugins,
+  config
+}) => {
   const devToolRef = react.useRef(null);
-  const [devtools$1] = react.useState(() => new devtools.TanStackRouterDevtoolsCore(opts));
+  const [pluginContainer, setPluginContainer] = react.useState(
+    null
+  );
+  const [titleContainer, setTitleContainer] = react.useState(null);
+  const [PluginComponent, setPluginComponent] = react.useState(
+    null
+  );
+  const [TitleComponent, setTitleComponent] = react.useState(null);
+  const [devtools$1] = react.useState(
+    () => new devtools.TanStackDevtoolsCore({
+      config,
+      plugins: plugins?.map((plugin) => {
+        return {
+          ...plugin,
+          name: typeof plugin.name === "string" ? plugin.name : (
+            // The check above confirms that `plugin.name` is of Render type
+            () => {
+              setTitleContainer(
+                document.getElementById(devtools.PLUGIN_TITLE_CONTAINER_ID) || null
+              );
+              convertRender(
+                plugin.name,
+                setTitleComponent
+              );
+            }
+          ),
+          render: () => {
+            setPluginContainer(
+              document.getElementById(devtools.PLUGIN_CONTAINER_ID) || null
+            );
+            convertRender(plugin.render, setPluginComponent);
+          }
+        };
+      })
+    })
+  );
   react.useEffect(() => {
     if (devToolRef.current) {
       devtools$1.mount(devToolRef.current);
@@ -14,7 +56,11 @@ const Devtools = (opts) => {
       devtools$1.unmount();
     };
   }, [devtools$1]);
-  return /* @__PURE__ */ jsxRuntime.jsx("div", { ref: devToolRef });
+  return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    /* @__PURE__ */ jsxRuntime.jsx("div", { ref: devToolRef }),
+    pluginContainer && PluginComponent ? reactDom.createPortal(/* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: PluginComponent }), pluginContainer) : null,
+    titleContainer && TitleComponent ? reactDom.createPortal(/* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: TitleComponent }), titleContainer) : null
+  ] });
 };
-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 React, { useEffect, useRef, useState } from 'react'\nimport { TanStackRouterDevtoolsCore } from '@tanstack/devtools'\nimport type { DevtoolsOptions } from '@tanstack/devtools'\n\nexport const Devtools = (opts: DevtoolsOptions) => {\n  const devToolRef = useRef<HTMLDivElement>(null)\n  const [devtools] = useState(() => new TanStackRouterDevtoolsCore(opts))\n  useEffect(() => {\n    if (devToolRef.current) {\n      devtools.mount(devToolRef.current)\n    }\n\n    return () => {\n      devtools.unmount()\n    }\n  }, [devtools])\n\n  return <div ref={devToolRef} />\n}\n"],"names":["useRef","devtools","useState","TanStackRouterDevtoolsCore","useEffect","jsx"],"mappings":";;;;;AAIa,MAAA,WAAW,CAAC,SAA0B;AAC3C,QAAA,aAAaA,aAAuB,IAAI;AACxC,QAAA,CAACC,UAAQ,IAAIC,MAAAA,SAAS,MAAM,IAAIC,SAAAA,2BAA2B,IAAI,CAAC;AACtEC,QAAAA,UAAU,MAAM;AACd,QAAI,WAAW,SAAS;AACbH,iBAAA,MAAM,WAAW,OAAO;AAAA,IAAA;AAGnC,WAAO,MAAM;AACXA,iBAAS,QAAQ;AAAA,IACnB;AAAA,EAAA,GACC,CAACA,UAAQ,CAAC;AAEN,SAAAI,2BAAA,IAAC,OAAI,EAAA,KAAK,WAAY,CAAA;AAC/B;;"}
+{"version":3,"file":"devtools.cjs","sources":["../../src/devtools.tsx"],"sourcesContent":["import React, { useEffect, useRef, useState } from 'react'\nimport {\n  PLUGIN_CONTAINER_ID,\n  PLUGIN_TITLE_CONTAINER_ID,\n  TanStackDevtoolsCore,\n} from '@tanstack/devtools'\nimport { createPortal } from 'react-dom'\nimport type { JSX } from 'react'\nimport type {\n  TanStackDevtoolsConfig,\n  TanStackDevtoolsPlugin,\n} from '@tanstack/devtools'\n\ntype PluginRender = JSX.Element | (() => JSX.Element)\n\nexport type TanStackDevtoolsReactPlugin = Omit<\n  TanStackDevtoolsPlugin,\n  'render' | 'name'\n> & {\n  /**\n   * The render function can be a React element or a function that returns a React 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   * ```jsx\n   *   {\n   *     render: () => <CustomPluginComponent />,\n   *   }\n   * ```\n   * or\n   * ```jsx\n   *   {\n   *     render: <CustomPluginComponent />,\n   *   }\n   * ```\n   */\n  render: PluginRender\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   * ```jsx\n   *   {\n   *     name: \"Your Plugin\",\n   *     render: () => <CustomPluginComponent />,\n   *   }\n   * ```\n   * or\n   * ```jsx\n   *   {\n   *     name:  <h1>Your Plugin title</h1>,\n   *     render: () => <CustomPluginComponent />,\n   *   }\n   * ```\n   */\n  name: string | PluginRender\n}\n\nexport interface TanStackDevtoolsReactInit {\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<TanStackDevtoolsReactPlugin>\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\nconst convertRender = (\n  Component: PluginRender,\n  setComponent: React.Dispatch<React.SetStateAction<JSX.Element | null>>,\n) => {\n  setComponent(typeof Component === 'function' ? Component() : Component)\n}\n\nexport const TanstackDevtools = ({\n  plugins,\n  config,\n}: TanStackDevtoolsReactInit) => {\n  const devToolRef = useRef<HTMLDivElement>(null)\n  const [pluginContainer, setPluginContainer] = useState<HTMLElement | null>(\n    null,\n  )\n  const [titleContainer, setTitleContainer] = useState<HTMLElement | null>(null)\n  const [PluginComponent, setPluginComponent] = useState<JSX.Element | null>(\n    null,\n  )\n  const [TitleComponent, setTitleComponent] = useState<JSX.Element | null>(null)\n  const [devtools] = useState(\n    () =>\n      new TanStackDevtoolsCore({\n        config,\n        plugins: plugins?.map((plugin) => {\n          return {\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                  () => {\n                    setTitleContainer(\n                      document.getElementById(PLUGIN_TITLE_CONTAINER_ID) ||\n                        null,\n                    )\n                    convertRender(\n                      plugin.name as PluginRender,\n                      setTitleComponent,\n                    )\n                  },\n            render: () => {\n              setPluginContainer(\n                document.getElementById(PLUGIN_CONTAINER_ID) || null,\n              )\n              convertRender(plugin.render, setPluginComponent)\n            },\n          }\n        }),\n      }),\n  )\n  useEffect(() => {\n    if (devToolRef.current) {\n      devtools.mount(devToolRef.current)\n    }\n\n    return () => {\n      devtools.unmount()\n    }\n  }, [devtools])\n\n  return (\n    <>\n      <div ref={devToolRef} />\n      {pluginContainer && PluginComponent\n        ? createPortal(<>{PluginComponent}</>, pluginContainer)\n        : null}\n      {titleContainer && TitleComponent\n        ? createPortal(<>{TitleComponent}</>, titleContainer)\n        : null}\n    </>\n  )\n}\n"],"names":["useRef","useState","devtools","TanStackDevtoolsCore","PLUGIN_TITLE_CONTAINER_ID","PLUGIN_CONTAINER_ID","useEffect","jsxs","Fragment","jsx","createPortal"],"mappings":";;;;;;AAuFA,MAAM,gBAAgB,CACpB,WACA,iBACG;AACH,eAAa,OAAO,cAAc,aAAa,UAAA,IAAc,SAAS;AACxE;AAEO,MAAM,mBAAmB,CAAC;AAAA,EAC/B;AAAA,EACA;AACF,MAAiC;AAC/B,QAAM,aAAaA,MAAAA,OAAuB,IAAI;AAC9C,QAAM,CAAC,iBAAiB,kBAAkB,IAAIC,MAAAA;AAAAA,IAC5C;AAAA,EAAA;AAEF,QAAM,CAAC,gBAAgB,iBAAiB,IAAIA,MAAAA,SAA6B,IAAI;AAC7E,QAAM,CAAC,iBAAiB,kBAAkB,IAAIA,MAAAA;AAAAA,IAC5C;AAAA,EAAA;AAEF,QAAM,CAAC,gBAAgB,iBAAiB,IAAIA,MAAAA,SAA6B,IAAI;AAC7E,QAAM,CAACC,UAAQ,IAAID,MAAAA;AAAAA,IACjB,MACE,IAAIE,SAAAA,qBAAqB;AAAA,MACvB;AAAA,MACA,SAAS,SAAS,IAAI,CAAC,WAAW;AAChC,eAAO;AAAA,UACL,GAAG;AAAA,UACH,MACE,OAAO,OAAO,SAAS,WACnB,OAAO;AAAA;AAAA,YAEP,MAAM;AACJ;AAAA,gBACE,SAAS,eAAeC,SAAAA,yBAAyB,KAC/C;AAAA,cAAA;AAEJ;AAAA,gBACE,OAAO;AAAA,gBACP;AAAA,cAAA;AAAA,YAEJ;AAAA;AAAA,UACN,QAAQ,MAAM;AACZ;AAAA,cACE,SAAS,eAAeC,SAAAA,mBAAmB,KAAK;AAAA,YAAA;AAElD,0BAAc,OAAO,QAAQ,kBAAkB;AAAA,UACjD;AAAA,QAAA;AAAA,MAEJ,CAAC;AAAA,IAAA,CACF;AAAA,EAAA;AAELC,QAAAA,UAAU,MAAM;AACd,QAAI,WAAW,SAAS;AACtBJ,iBAAS,MAAM,WAAW,OAAO;AAAA,IACnC;AAEA,WAAO,MAAM;AACXA,iBAAS,QAAA;AAAA,IACX;AAAA,EACF,GAAG,CAACA,UAAQ,CAAC;AAEb,SACEK,2BAAAA,KAAAC,qBAAA,EACE,UAAA;AAAA,IAAAC,2BAAAA,IAAC,OAAA,EAAI,KAAK,WAAA,CAAY;AAAA,IACrB,mBAAmB,kBAChBC,4EAAgB,UAAA,gBAAA,CAAgB,GAAK,eAAe,IACpD;AAAA,IACH,kBAAkB,iBACfA,SAAAA,mEAAgB,UAAA,eAAA,CAAe,GAAK,cAAc,IAClD;AAAA,EAAA,GACN;AAEJ;;"}

package/dist/cjs/devtools.d.cts

@@ -1,3 +1,72 @@
-import { default as React } from 'react';
-import { DevtoolsOptions } from '@tanstack/devtools';
-export declare const Devtools: (opts: DevtoolsOptions) => React.JSX.Element;
+import { JSX } from 'react';
+import { TanStackDevtoolsConfig, TanStackDevtoolsPlugin } from '@tanstack/devtools';
+type PluginRender = JSX.Element | (() => JSX.Element);
+export type TanStackDevtoolsReactPlugin = Omit<TanStackDevtoolsPlugin, 'render' | 'name'> & {
+    /**
+     * The render function can be a React element or a function that returns a React element.
+     * If it's a function, it will be called to render the plugin, otherwise it will be rendered directly.
+     *
+     * Example:
+     * ```jsx
+     *   {
+     *     render: () => <CustomPluginComponent />,
+     *   }
+     * ```
+     * or
+     * ```jsx
+     *   {
+     *     render: <CustomPluginComponent />,
+     *   }
+     * ```
+     */
+    render: PluginRender;
+    /**
+     * 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:
+     * ```jsx
+     *   {
+     *     name: "Your Plugin",
+     *     render: () => <CustomPluginComponent />,
+     *   }
+     * ```
+     * or
+     * ```jsx
+     *   {
+     *     name:  <h1>Your Plugin title</h1>,
+     *     render: () => <CustomPluginComponent />,
+     *   }
+     * ```
+     */
+    name: string | PluginRender;
+};
+export interface TanStackDevtoolsReactInit {
+    /**
+     * 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<TanStackDevtoolsReactPlugin>;
+    /**
+     * 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: ({ plugins, config, }: TanStackDevtoolsReactInit) => 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 * from './devtools.cjs';
+export type { TanStackDevtoolsReactPlugin } from './devtools.cjs';

package/dist/esm/devtools.d.ts

@@ -1,3 +1,72 @@
-import { default as React } from 'react';
-import { DevtoolsOptions } from '@tanstack/devtools';
-export declare const Devtools: (opts: DevtoolsOptions) => React.JSX.Element;
+import { JSX } from 'react';
+import { TanStackDevtoolsConfig, TanStackDevtoolsPlugin } from '@tanstack/devtools';
+type PluginRender = JSX.Element | (() => JSX.Element);
+export type TanStackDevtoolsReactPlugin = Omit<TanStackDevtoolsPlugin, 'render' | 'name'> & {
+    /**
+     * The render function can be a React element or a function that returns a React element.
+     * If it's a function, it will be called to render the plugin, otherwise it will be rendered directly.
+     *
+     * Example:
+     * ```jsx
+     *   {
+     *     render: () => <CustomPluginComponent />,
+     *   }
+     * ```
+     * or
+     * ```jsx
+     *   {
+     *     render: <CustomPluginComponent />,
+     *   }
+     * ```
+     */
+    render: PluginRender;
+    /**
+     * 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:
+     * ```jsx
+     *   {
+     *     name: "Your Plugin",
+     *     render: () => <CustomPluginComponent />,
+     *   }
+     * ```
+     * or
+     * ```jsx
+     *   {
+     *     name:  <h1>Your Plugin title</h1>,
+     *     render: () => <CustomPluginComponent />,
+     *   }
+     * ```
+     */
+    name: string | PluginRender;
+};
+export interface TanStackDevtoolsReactInit {
+    /**
+     * 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<TanStackDevtoolsReactPlugin>;
+    /**
+     * 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: ({ plugins, config, }: TanStackDevtoolsReactInit) => JSX.Element;
+export {};

package/dist/esm/devtools.js

@@ -1,9 +1,51 @@
-import { jsx } from "react/jsx-runtime";
+import { jsxs, Fragment, jsx } from "react/jsx-runtime";
 import { useRef, useState, useEffect } from "react";
-import { TanStackRouterDevtoolsCore } from "@tanstack/devtools";
-const Devtools = (opts) => {
+import { TanStackDevtoolsCore, PLUGIN_CONTAINER_ID, PLUGIN_TITLE_CONTAINER_ID } from "@tanstack/devtools";
+import { createPortal } from "react-dom";
+const convertRender = (Component, setComponent) => {
+  setComponent(typeof Component === "function" ? Component() : Component);
+};
+const TanstackDevtools = ({
+  plugins,
+  config
+}) => {
   const devToolRef = useRef(null);
-  const [devtools] = useState(() => new TanStackRouterDevtoolsCore(opts));
+  const [pluginContainer, setPluginContainer] = useState(
+    null
+  );
+  const [titleContainer, setTitleContainer] = useState(null);
+  const [PluginComponent, setPluginComponent] = useState(
+    null
+  );
+  const [TitleComponent, setTitleComponent] = useState(null);
+  const [devtools] = useState(
+    () => new TanStackDevtoolsCore({
+      config,
+      plugins: plugins?.map((plugin) => {
+        return {
+          ...plugin,
+          name: typeof plugin.name === "string" ? plugin.name : (
+            // The check above confirms that `plugin.name` is of Render type
+            () => {
+              setTitleContainer(
+                document.getElementById(PLUGIN_TITLE_CONTAINER_ID) || null
+              );
+              convertRender(
+                plugin.name,
+                setTitleComponent
+              );
+            }
+          ),
+          render: () => {
+            setPluginContainer(
+              document.getElementById(PLUGIN_CONTAINER_ID) || null
+            );
+            convertRender(plugin.render, setPluginComponent);
+          }
+        };
+      })
+    })
+  );
   useEffect(() => {
     if (devToolRef.current) {
       devtools.mount(devToolRef.current);
@@ -12,9 +54,13 @@ const Devtools = (opts) => {
       devtools.unmount();
     };
   }, [devtools]);
-  return /* @__PURE__ */ jsx("div", { ref: devToolRef });
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx("div", { ref: devToolRef }),
+    pluginContainer && PluginComponent ? createPortal(/* @__PURE__ */ jsx(Fragment, { children: PluginComponent }), pluginContainer) : null,
+    titleContainer && TitleComponent ? createPortal(/* @__PURE__ */ jsx(Fragment, { children: TitleComponent }), titleContainer) : null
+  ] });
 };
 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 React, { useEffect, useRef, useState } from 'react'\nimport { TanStackRouterDevtoolsCore } from '@tanstack/devtools'\nimport type { DevtoolsOptions } from '@tanstack/devtools'\n\nexport const Devtools = (opts: DevtoolsOptions) => {\n  const devToolRef = useRef<HTMLDivElement>(null)\n  const [devtools] = useState(() => new TanStackRouterDevtoolsCore(opts))\n  useEffect(() => {\n    if (devToolRef.current) {\n      devtools.mount(devToolRef.current)\n    }\n\n    return () => {\n      devtools.unmount()\n    }\n  }, [devtools])\n\n  return <div ref={devToolRef} />\n}\n"],"names":[],"mappings":";;;AAIa,MAAA,WAAW,CAAC,SAA0B;AAC3C,QAAA,aAAa,OAAuB,IAAI;AACxC,QAAA,CAAC,QAAQ,IAAI,SAAS,MAAM,IAAI,2BAA2B,IAAI,CAAC;AACtE,YAAU,MAAM;AACd,QAAI,WAAW,SAAS;AACb,eAAA,MAAM,WAAW,OAAO;AAAA,IAAA;AAGnC,WAAO,MAAM;AACX,eAAS,QAAQ;AAAA,IACnB;AAAA,EAAA,GACC,CAAC,QAAQ,CAAC;AAEN,SAAA,oBAAC,OAAI,EAAA,KAAK,WAAY,CAAA;AAC/B;"}
+{"version":3,"file":"devtools.js","sources":["../../src/devtools.tsx"],"sourcesContent":["import React, { useEffect, useRef, useState } from 'react'\nimport {\n  PLUGIN_CONTAINER_ID,\n  PLUGIN_TITLE_CONTAINER_ID,\n  TanStackDevtoolsCore,\n} from '@tanstack/devtools'\nimport { createPortal } from 'react-dom'\nimport type { JSX } from 'react'\nimport type {\n  TanStackDevtoolsConfig,\n  TanStackDevtoolsPlugin,\n} from '@tanstack/devtools'\n\ntype PluginRender = JSX.Element | (() => JSX.Element)\n\nexport type TanStackDevtoolsReactPlugin = Omit<\n  TanStackDevtoolsPlugin,\n  'render' | 'name'\n> & {\n  /**\n   * The render function can be a React element or a function that returns a React 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   * ```jsx\n   *   {\n   *     render: () => <CustomPluginComponent />,\n   *   }\n   * ```\n   * or\n   * ```jsx\n   *   {\n   *     render: <CustomPluginComponent />,\n   *   }\n   * ```\n   */\n  render: PluginRender\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   * ```jsx\n   *   {\n   *     name: \"Your Plugin\",\n   *     render: () => <CustomPluginComponent />,\n   *   }\n   * ```\n   * or\n   * ```jsx\n   *   {\n   *     name:  <h1>Your Plugin title</h1>,\n   *     render: () => <CustomPluginComponent />,\n   *   }\n   * ```\n   */\n  name: string | PluginRender\n}\n\nexport interface TanStackDevtoolsReactInit {\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<TanStackDevtoolsReactPlugin>\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\nconst convertRender = (\n  Component: PluginRender,\n  setComponent: React.Dispatch<React.SetStateAction<JSX.Element | null>>,\n) => {\n  setComponent(typeof Component === 'function' ? Component() : Component)\n}\n\nexport const TanstackDevtools = ({\n  plugins,\n  config,\n}: TanStackDevtoolsReactInit) => {\n  const devToolRef = useRef<HTMLDivElement>(null)\n  const [pluginContainer, setPluginContainer] = useState<HTMLElement | null>(\n    null,\n  )\n  const [titleContainer, setTitleContainer] = useState<HTMLElement | null>(null)\n  const [PluginComponent, setPluginComponent] = useState<JSX.Element | null>(\n    null,\n  )\n  const [TitleComponent, setTitleComponent] = useState<JSX.Element | null>(null)\n  const [devtools] = useState(\n    () =>\n      new TanStackDevtoolsCore({\n        config,\n        plugins: plugins?.map((plugin) => {\n          return {\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                  () => {\n                    setTitleContainer(\n                      document.getElementById(PLUGIN_TITLE_CONTAINER_ID) ||\n                        null,\n                    )\n                    convertRender(\n                      plugin.name as PluginRender,\n                      setTitleComponent,\n                    )\n                  },\n            render: () => {\n              setPluginContainer(\n                document.getElementById(PLUGIN_CONTAINER_ID) || null,\n              )\n              convertRender(plugin.render, setPluginComponent)\n            },\n          }\n        }),\n      }),\n  )\n  useEffect(() => {\n    if (devToolRef.current) {\n      devtools.mount(devToolRef.current)\n    }\n\n    return () => {\n      devtools.unmount()\n    }\n  }, [devtools])\n\n  return (\n    <>\n      <div ref={devToolRef} />\n      {pluginContainer && PluginComponent\n        ? createPortal(<>{PluginComponent}</>, pluginContainer)\n        : null}\n      {titleContainer && TitleComponent\n        ? createPortal(<>{TitleComponent}</>, titleContainer)\n        : null}\n    </>\n  )\n}\n"],"names":[],"mappings":";;;;AAuFA,MAAM,gBAAgB,CACpB,WACA,iBACG;AACH,eAAa,OAAO,cAAc,aAAa,UAAA,IAAc,SAAS;AACxE;AAEO,MAAM,mBAAmB,CAAC;AAAA,EAC/B;AAAA,EACA;AACF,MAAiC;AAC/B,QAAM,aAAa,OAAuB,IAAI;AAC9C,QAAM,CAAC,iBAAiB,kBAAkB,IAAI;AAAA,IAC5C;AAAA,EAAA;AAEF,QAAM,CAAC,gBAAgB,iBAAiB,IAAI,SAA6B,IAAI;AAC7E,QAAM,CAAC,iBAAiB,kBAAkB,IAAI;AAAA,IAC5C;AAAA,EAAA;AAEF,QAAM,CAAC,gBAAgB,iBAAiB,IAAI,SAA6B,IAAI;AAC7E,QAAM,CAAC,QAAQ,IAAI;AAAA,IACjB,MACE,IAAI,qBAAqB;AAAA,MACvB;AAAA,MACA,SAAS,SAAS,IAAI,CAAC,WAAW;AAChC,eAAO;AAAA,UACL,GAAG;AAAA,UACH,MACE,OAAO,OAAO,SAAS,WACnB,OAAO;AAAA;AAAA,YAEP,MAAM;AACJ;AAAA,gBACE,SAAS,eAAe,yBAAyB,KAC/C;AAAA,cAAA;AAEJ;AAAA,gBACE,OAAO;AAAA,gBACP;AAAA,cAAA;AAAA,YAEJ;AAAA;AAAA,UACN,QAAQ,MAAM;AACZ;AAAA,cACE,SAAS,eAAe,mBAAmB,KAAK;AAAA,YAAA;AAElD,0BAAc,OAAO,QAAQ,kBAAkB;AAAA,UACjD;AAAA,QAAA;AAAA,MAEJ,CAAC;AAAA,IAAA,CACF;AAAA,EAAA;AAEL,YAAU,MAAM;AACd,QAAI,WAAW,SAAS;AACtB,eAAS,MAAM,WAAW,OAAO;AAAA,IACnC;AAEA,WAAO,MAAM;AACX,eAAS,QAAA;AAAA,IACX;AAAA,EACF,GAAG,CAAC,QAAQ,CAAC;AAEb,SACE,qBAAA,UAAA,EACE,UAAA;AAAA,IAAA,oBAAC,OAAA,EAAI,KAAK,WAAA,CAAY;AAAA,IACrB,mBAAmB,kBAChB,6CAAgB,UAAA,gBAAA,CAAgB,GAAK,eAAe,IACpD;AAAA,IACH,kBAAkB,iBACf,6CAAgB,UAAA,eAAA,CAAe,GAAK,cAAc,IAClD;AAAA,EAAA,GACN;AAEJ;"}

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 * from './devtools.js';
+export type { TanStackDevtoolsReactPlugin } 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/react-devtools",
-  "version": "0.0.0",
-  "description": "Headless UI for creating advanced custom devtools, autocomplete, and dropdown components in React.",
+  "version": "0.1.1",
+  "description": "TanStack Devtools is a set of tools for building advanced devtools for your React application.",
   "author": "Tanner Linsley",
   "license": "MIT",
   "repository": {
@@ -16,12 +16,7 @@
   },
   "keywords": [
     "react",
-    "devtools",
-    "autocomplete",
-    "dropdown",
-    "menu",
-    "headless-ui",
-    "nested"
+    "devtools"
   ],
   "type": "module",
   "types": "dist/esm/index.d.ts",
@@ -49,7 +44,7 @@
     "src"
   ],
   "dependencies": {
-    "@tanstack/devtools": "0.0.0"
+    "@tanstack/devtools": "0.1.1"
   },
   "devDependencies": {
     "@eslint-react/eslint-plugin": "^1.48.5",

package/src/devtools.tsx

@@ -1,10 +1,141 @@
 import React, { useEffect, useRef, useState } from 'react'
-import { TanStackRouterDevtoolsCore } from '@tanstack/devtools'
-import type { DevtoolsOptions } from '@tanstack/devtools'
+import {
+  PLUGIN_CONTAINER_ID,
+  PLUGIN_TITLE_CONTAINER_ID,
+  TanStackDevtoolsCore,
+} from '@tanstack/devtools'
+import { createPortal } from 'react-dom'
+import type { JSX } from 'react'
+import type {
+  TanStackDevtoolsConfig,
+  TanStackDevtoolsPlugin,
+} from '@tanstack/devtools'
 
-export const Devtools = (opts: DevtoolsOptions) => {
+type PluginRender = JSX.Element | (() => JSX.Element)
+
+export type TanStackDevtoolsReactPlugin = Omit<
+  TanStackDevtoolsPlugin,
+  'render' | 'name'
+> & {
+  /**
+   * The render function can be a React element or a function that returns a React element.
+   * If it's a function, it will be called to render the plugin, otherwise it will be rendered directly.
+   *
+   * Example:
+   * ```jsx
+   *   {
+   *     render: () => <CustomPluginComponent />,
+   *   }
+   * ```
+   * or
+   * ```jsx
+   *   {
+   *     render: <CustomPluginComponent />,
+   *   }
+   * ```
+   */
+  render: PluginRender
+  /**
+   * 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:
+   * ```jsx
+   *   {
+   *     name: "Your Plugin",
+   *     render: () => <CustomPluginComponent />,
+   *   }
+   * ```
+   * or
+   * ```jsx
+   *   {
+   *     name:  <h1>Your Plugin title</h1>,
+   *     render: () => <CustomPluginComponent />,
+   *   }
+   * ```
+   */
+  name: string | PluginRender
+}
+
+export interface TanStackDevtoolsReactInit {
+  /**
+   * 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<TanStackDevtoolsReactPlugin>
+  /**
+   * 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
+}
+
+const convertRender = (
+  Component: PluginRender,
+  setComponent: React.Dispatch<React.SetStateAction<JSX.Element | null>>,
+) => {
+  setComponent(typeof Component === 'function' ? Component() : Component)
+}
+
+export const TanstackDevtools = ({
+  plugins,
+  config,
+}: TanStackDevtoolsReactInit) => {
   const devToolRef = useRef<HTMLDivElement>(null)
-  const [devtools] = useState(() => new TanStackRouterDevtoolsCore(opts))
+  const [pluginContainer, setPluginContainer] = useState<HTMLElement | null>(
+    null,
+  )
+  const [titleContainer, setTitleContainer] = useState<HTMLElement | null>(null)
+  const [PluginComponent, setPluginComponent] = useState<JSX.Element | null>(
+    null,
+  )
+  const [TitleComponent, setTitleComponent] = useState<JSX.Element | null>(null)
+  const [devtools] = useState(
+    () =>
+      new TanStackDevtoolsCore({
+        config,
+        plugins: plugins?.map((plugin) => {
+          return {
+            ...plugin,
+            name:
+              typeof plugin.name === 'string'
+                ? plugin.name
+                : // The check above confirms that `plugin.name` is of Render type
+                  () => {
+                    setTitleContainer(
+                      document.getElementById(PLUGIN_TITLE_CONTAINER_ID) ||
+                        null,
+                    )
+                    convertRender(
+                      plugin.name as PluginRender,
+                      setTitleComponent,
+                    )
+                  },
+            render: () => {
+              setPluginContainer(
+                document.getElementById(PLUGIN_CONTAINER_ID) || null,
+              )
+              convertRender(plugin.render, setPluginComponent)
+            },
+          }
+        }),
+      }),
+  )
   useEffect(() => {
     if (devToolRef.current) {
       devtools.mount(devToolRef.current)
@@ -15,5 +146,15 @@ export const Devtools = (opts: DevtoolsOptions) => {
     }
   }, [devtools])
 
-  return <div ref={devToolRef} />
+  return (
+    <>
+      <div ref={devToolRef} />
+      {pluginContainer && PluginComponent
+        ? createPortal(<>{PluginComponent}</>, pluginContainer)
+        : null}
+      {titleContainer && TitleComponent
+        ? createPortal(<>{TitleComponent}</>, titleContainer)
+        : null}
+    </>
+  )
 }

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 * from './devtools'
+export type { TanStackDevtoolsReactPlugin } from './devtools'