@tanstack/react-devtools 0.7.11 → 0.8.0

package/dist/esm/devtools.d.ts

@@ -1,6 +1,10 @@
 import { JSX, ReactElement } from 'react';
 import { ClientEventBusConfig, TanStackDevtoolsConfig, TanStackDevtoolsPlugin } from '@tanstack/devtools';
 type PluginRender = JSX.Element | ((el: HTMLElement, theme: 'dark' | 'light') => JSX.Element);
+type TriggerProps = {
+    theme: 'dark' | 'light';
+};
+type TriggerRender = JSX.Element | ((el: HTMLElement, props: TriggerProps) => 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.
@@ -42,6 +46,20 @@ export type TanStackDevtoolsReactPlugin = Omit<TanStackDevtoolsPlugin, 'render'
      */
     name: string | PluginRender;
 };
+type TanStackDevtoolsReactConfig = Omit<Partial<TanStackDevtoolsConfig>, 'customTrigger'> & {
+    /**
+     * Optional custom trigger component for the devtools.
+     * It can be a React element or a function that renders one.
+     *
+     * Example:
+     * ```jsx
+     *   {
+     *     customTrigger: <CustomTriggerComponent />,
+     *   }
+     * ```
+     */
+    customTrigger?: TriggerRender;
+};
 export interface TanStackDevtoolsReactInit {
     /**
      * Array of plugins to be used in the devtools.
@@ -66,7 +84,7 @@ export interface TanStackDevtoolsReactInit {
      * 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>;
+    config?: TanStackDevtoolsReactConfig;
     /**
      * Configuration for the TanStack Devtools client event bus.
      */

package/dist/esm/devtools.js

@@ -9,6 +9,10 @@ const convertRender = (Component, setComponents, e, theme) => {
     [e.getAttribute("id")]: element
   }));
 };
+const convertTrigger = (Component, setComponent, e, props) => {
+  const element = typeof Component === "function" ? Component(e, props) : Component;
+  setComponent(element);
+};
 const TanStackDevtools = ({
   plugins,
   config,
@@ -17,8 +21,14 @@ const TanStackDevtools = ({
   const devToolRef = useRef(null);
   const [pluginContainers, setPluginContainers] = useState({});
   const [titleContainers, setTitleContainers] = useState({});
+  const [triggerContainer, setTriggerContainer] = useState(
+    null
+  );
   const [PluginComponents, setPluginComponents] = useState({});
   const [TitleComponents, setTitleComponents] = useState({});
+  const [TriggerComponent, setTriggerComponent] = useState(
+    null
+  );
   const pluginsMap = useMemo(
     () => plugins?.map((plugin) => {
       return {
@@ -54,13 +64,20 @@ const TanStackDevtools = ({
     }) ?? [],
     [plugins]
   );
-  const [devtools] = useState(
-    () => new TanStackDevtoolsCore({
-      config,
+  const [devtools] = useState(() => {
+    const { customTrigger, ...coreConfig } = config || {};
+    return new TanStackDevtoolsCore({
+      config: {
+        ...coreConfig,
+        customTrigger: customTrigger ? (el, props) => {
+          setTriggerContainer(el);
+          convertTrigger(customTrigger, setTriggerComponent, el, props);
+        } : void 0
+      },
       eventBusConfig,
       plugins: pluginsMap
-    })
-  );
+    });
+  });
   useEffect(() => {
     devtools.setConfig({
       plugins: pluginsMap
@@ -81,7 +98,8 @@ const TanStackDevtools = ({
     ) : null,
     hasTitles ? Object.entries(titleContainers).map(
       ([key, titleContainer]) => createPortal(/* @__PURE__ */ jsx(Fragment, { children: TitleComponents[key] }), titleContainer)
-    ) : null
+    ) : null,
+    triggerContainer && TriggerComponent ? createPortal(/* @__PURE__ */ jsx(Fragment, { children: TriggerComponent }), triggerContainer) : null
   ] });
 };
 export {

package/dist/esm/devtools.js.map

@@ -1 +1 @@
-{"version":3,"file":"devtools.js","sources":["../../src/devtools.tsx"],"sourcesContent":["import React, { useEffect, useMemo, useRef, useState } from 'react'\nimport { TanStackDevtoolsCore } from '@tanstack/devtools'\nimport { createPortal } from 'react-dom'\nimport type { JSX, ReactElement } from 'react'\nimport type {\n  ClientEventBusConfig,\n  TanStackDevtoolsConfig,\n  TanStackDevtoolsPlugin,\n} from '@tanstack/devtools'\n\ntype PluginRender =\n  | JSX.Element\n  | ((el: HTMLElement, theme: 'dark' | 'light') => 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?: Partial<TanStackDevtoolsConfig>\n  /**\n   * Configuration for the TanStack Devtools client event bus.\n   */\n  eventBusConfig?: ClientEventBusConfig\n}\n\nconst convertRender = (\n  Component: PluginRender,\n  setComponents: React.Dispatch<\n    React.SetStateAction<Record<string, JSX.Element>>\n  >,\n  e: HTMLElement,\n  theme: 'dark' | 'light',\n) => {\n  const element =\n    typeof Component === 'function' ? Component(e, theme) : Component\n\n  setComponents((prev) => ({\n    ...prev,\n    [e.getAttribute('id') as string]: element,\n  }))\n}\n\nexport const TanStackDevtools = ({\n  plugins,\n  config,\n  eventBusConfig,\n}: TanStackDevtoolsReactInit): ReactElement | null => {\n  const devToolRef = useRef<HTMLDivElement>(null)\n\n  const [pluginContainers, setPluginContainers] = useState<\n    Record<string, HTMLElement>\n  >({})\n  const [titleContainers, setTitleContainers] = useState<\n    Record<string, HTMLElement>\n  >({})\n\n  const [PluginComponents, setPluginComponents] = useState<\n    Record<string, JSX.Element>\n  >({})\n  const [TitleComponents, setTitleComponents] = useState<\n    Record<string, JSX.Element>\n  >({})\n\n  const pluginsMap: Array<TanStackDevtoolsPlugin> = useMemo(\n    () =>\n      plugins?.map((plugin) => {\n        return {\n          ...plugin,\n          name:\n            typeof plugin.name === 'string'\n              ? plugin.name\n              : (e, theme) => {\n                  const id = e.getAttribute('id')!\n                  const target = e.ownerDocument.getElementById(id)\n\n                  if (target) {\n                    setTitleContainers((prev) => ({\n                      ...prev,\n                      [id]: e,\n                    }))\n                  }\n\n                  convertRender(\n                    plugin.name as PluginRender,\n                    setTitleComponents,\n                    e,\n                    theme,\n                  )\n                },\n          render: (e, theme) => {\n            const id = e.getAttribute('id')!\n            const target = e.ownerDocument.getElementById(id)\n\n            if (target) {\n              setPluginContainers((prev) => ({\n                ...prev,\n                [id]: e,\n              }))\n            }\n\n            convertRender(plugin.render, setPluginComponents, e, theme)\n          },\n        }\n      }) ?? [],\n    [plugins],\n  )\n\n  const [devtools] = useState(\n    () =>\n      new TanStackDevtoolsCore({\n        config,\n        eventBusConfig,\n        plugins: pluginsMap,\n      }),\n  )\n\n  useEffect(() => {\n    devtools.setConfig({\n      plugins: pluginsMap,\n    })\n  }, [devtools, pluginsMap])\n\n  useEffect(() => {\n    if (devToolRef.current) {\n      devtools.mount(devToolRef.current)\n    }\n\n    return () => devtools.unmount()\n  }, [devtools])\n\n  const hasPlugins =\n    Object.values(pluginContainers).length > 0 &&\n    Object.values(PluginComponents).length > 0\n  const hasTitles =\n    Object.values(titleContainers).length > 0 &&\n    Object.values(TitleComponents).length > 0\n\n  return (\n    <>\n      <div style={{ position: 'absolute' }} ref={devToolRef} />\n\n      {hasPlugins\n        ? Object.entries(pluginContainers).map(([key, pluginContainer]) =>\n            createPortal(<>{PluginComponents[key]}</>, pluginContainer),\n          )\n        : null}\n\n      {hasTitles\n        ? Object.entries(titleContainers).map(([key, titleContainer]) =>\n            createPortal(<>{TitleComponents[key]}</>, titleContainer),\n          )\n        : null}\n    </>\n  )\n}\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"devtools.js","sources":["../../src/devtools.tsx"],"sourcesContent":["import React, { useEffect, useMemo, useRef, useState } from 'react'\nimport { TanStackDevtoolsCore } from '@tanstack/devtools'\nimport { createPortal } from 'react-dom'\nimport type { JSX, ReactElement } from 'react'\nimport type {\n  ClientEventBusConfig,\n  TanStackDevtoolsConfig,\n  TanStackDevtoolsPlugin,\n} from '@tanstack/devtools'\n\ntype PluginRender =\n  | JSX.Element\n  | ((el: HTMLElement, theme: 'dark' | 'light') => JSX.Element)\n\ntype TriggerProps = {\n  theme: 'dark' | 'light'\n}\n\ntype TriggerRender =\n  | JSX.Element\n  | ((el: HTMLElement, props: TriggerProps) => 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\ntype TanStackDevtoolsReactConfig = Omit<\n  Partial<TanStackDevtoolsConfig>,\n  'customTrigger'\n> & {\n  /**\n   * Optional custom trigger component for the devtools.\n   * It can be a React element or a function that renders one.\n   *\n   * Example:\n   * ```jsx\n   *   {\n   *     customTrigger: <CustomTriggerComponent />,\n   *   }\n   * ```\n   */\n  customTrigger?: TriggerRender\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?: TanStackDevtoolsReactConfig\n  /**\n   * Configuration for the TanStack Devtools client event bus.\n   */\n  eventBusConfig?: ClientEventBusConfig\n}\n\nconst convertRender = (\n  Component: PluginRender,\n  setComponents: React.Dispatch<\n    React.SetStateAction<Record<string, JSX.Element>>\n  >,\n  e: HTMLElement,\n  theme: 'dark' | 'light',\n) => {\n  const element =\n    typeof Component === 'function' ? Component(e, theme) : Component\n\n  setComponents((prev) => ({\n    ...prev,\n    [e.getAttribute('id') as string]: element,\n  }))\n}\n\nconst convertTrigger = (\n  Component: TriggerRender,\n  setComponent: React.Dispatch<React.SetStateAction<JSX.Element | null>>,\n  e: HTMLElement,\n  props: TriggerProps,\n) => {\n  const element =\n    typeof Component === 'function' ? Component(e, props) : Component\n  setComponent(element)\n}\n\nexport const TanStackDevtools = ({\n  plugins,\n  config,\n  eventBusConfig,\n}: TanStackDevtoolsReactInit): ReactElement | null => {\n  const devToolRef = useRef<HTMLDivElement>(null)\n\n  const [pluginContainers, setPluginContainers] = useState<\n    Record<string, HTMLElement>\n  >({})\n  const [titleContainers, setTitleContainers] = useState<\n    Record<string, HTMLElement>\n  >({})\n  const [triggerContainer, setTriggerContainer] = useState<HTMLElement | null>(\n    null,\n  )\n\n  const [PluginComponents, setPluginComponents] = useState<\n    Record<string, JSX.Element>\n  >({})\n  const [TitleComponents, setTitleComponents] = useState<\n    Record<string, JSX.Element>\n  >({})\n  const [TriggerComponent, setTriggerComponent] = useState<JSX.Element | null>(\n    null,\n  )\n\n  const pluginsMap: Array<TanStackDevtoolsPlugin> = useMemo(\n    () =>\n      plugins?.map((plugin) => {\n        return {\n          ...plugin,\n          name:\n            typeof plugin.name === 'string'\n              ? plugin.name\n              : (e, theme) => {\n                  const id = e.getAttribute('id')!\n                  const target = e.ownerDocument.getElementById(id)\n\n                  if (target) {\n                    setTitleContainers((prev) => ({\n                      ...prev,\n                      [id]: e,\n                    }))\n                  }\n\n                  convertRender(\n                    plugin.name as PluginRender,\n                    setTitleComponents,\n                    e,\n                    theme,\n                  )\n                },\n          render: (e, theme) => {\n            const id = e.getAttribute('id')!\n            const target = e.ownerDocument.getElementById(id)\n\n            if (target) {\n              setPluginContainers((prev) => ({\n                ...prev,\n                [id]: e,\n              }))\n            }\n\n            convertRender(plugin.render, setPluginComponents, e, theme)\n          },\n        }\n      }) ?? [],\n    [plugins],\n  )\n\n  const [devtools] = useState(() => {\n    const { customTrigger, ...coreConfig } = config || {}\n    return new TanStackDevtoolsCore({\n      config: {\n        ...coreConfig,\n        customTrigger: customTrigger\n          ? (el, props) => {\n              setTriggerContainer(el)\n              convertTrigger(customTrigger, setTriggerComponent, el, props)\n            }\n          : undefined,\n      },\n      eventBusConfig,\n      plugins: pluginsMap,\n    })\n  })\n\n  useEffect(() => {\n    devtools.setConfig({\n      plugins: pluginsMap,\n    })\n  }, [devtools, pluginsMap])\n\n  useEffect(() => {\n    if (devToolRef.current) {\n      devtools.mount(devToolRef.current)\n    }\n\n    return () => devtools.unmount()\n  }, [devtools])\n\n  const hasPlugins =\n    Object.values(pluginContainers).length > 0 &&\n    Object.values(PluginComponents).length > 0\n  const hasTitles =\n    Object.values(titleContainers).length > 0 &&\n    Object.values(TitleComponents).length > 0\n\n  return (\n    <>\n      <div style={{ position: 'absolute' }} ref={devToolRef} />\n\n      {hasPlugins\n        ? Object.entries(pluginContainers).map(([key, pluginContainer]) =>\n            createPortal(<>{PluginComponents[key]}</>, pluginContainer),\n          )\n        : null}\n\n      {hasTitles\n        ? Object.entries(titleContainers).map(([key, titleContainer]) =>\n            createPortal(<>{TitleComponents[key]}</>, titleContainer),\n          )\n        : null}\n\n      {triggerContainer && TriggerComponent\n        ? createPortal(<>{TriggerComponent}</>, triggerContainer)\n        : null}\n    </>\n  )\n}\n"],"names":[],"mappings":"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tanstack/react-devtools",
-  "version": "0.7.11",
+  "version": "0.8.0",
   "description": "TanStack Devtools is a set of tools for building advanced devtools for your React application.",
   "author": "Tanner Linsley",
   "license": "MIT",
@@ -39,7 +39,7 @@
     "src"
   ],
   "dependencies": {
-    "@tanstack/devtools": "0.7.0"
+    "@tanstack/devtools": "0.8.0"
   },
   "devDependencies": {
     "@eslint-react/eslint-plugin": "^1.53.1",

package/src/devtools.tsx

@@ -12,6 +12,14 @@ type PluginRender =
   | JSX.Element
   | ((el: HTMLElement, theme: 'dark' | 'light') => JSX.Element)
 
+type TriggerProps = {
+  theme: 'dark' | 'light'
+}
+
+type TriggerRender =
+  | JSX.Element
+  | ((el: HTMLElement, props: TriggerProps) => JSX.Element)
+
 export type TanStackDevtoolsReactPlugin = Omit<
   TanStackDevtoolsPlugin,
   'render' | 'name'
@@ -57,6 +65,24 @@ export type TanStackDevtoolsReactPlugin = Omit<
   name: string | PluginRender
 }
 
+type TanStackDevtoolsReactConfig = Omit<
+  Partial<TanStackDevtoolsConfig>,
+  'customTrigger'
+> & {
+  /**
+   * Optional custom trigger component for the devtools.
+   * It can be a React element or a function that renders one.
+   *
+   * Example:
+   * ```jsx
+   *   {
+   *     customTrigger: <CustomTriggerComponent />,
+   *   }
+   * ```
+   */
+  customTrigger?: TriggerRender
+}
+
 export interface TanStackDevtoolsReactInit {
   /**
    * Array of plugins to be used in the devtools.
@@ -81,7 +107,7 @@ export interface TanStackDevtoolsReactInit {
    * 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>
+  config?: TanStackDevtoolsReactConfig
   /**
    * Configuration for the TanStack Devtools client event bus.
    */
@@ -105,6 +131,17 @@ const convertRender = (
   }))
 }
 
+const convertTrigger = (
+  Component: TriggerRender,
+  setComponent: React.Dispatch<React.SetStateAction<JSX.Element | null>>,
+  e: HTMLElement,
+  props: TriggerProps,
+) => {
+  const element =
+    typeof Component === 'function' ? Component(e, props) : Component
+  setComponent(element)
+}
+
 export const TanStackDevtools = ({
   plugins,
   config,
@@ -118,6 +155,9 @@ export const TanStackDevtools = ({
   const [titleContainers, setTitleContainers] = useState<
     Record<string, HTMLElement>
   >({})
+  const [triggerContainer, setTriggerContainer] = useState<HTMLElement | null>(
+    null,
+  )
 
   const [PluginComponents, setPluginComponents] = useState<
     Record<string, JSX.Element>
@@ -125,6 +165,9 @@ export const TanStackDevtools = ({
   const [TitleComponents, setTitleComponents] = useState<
     Record<string, JSX.Element>
   >({})
+  const [TriggerComponent, setTriggerComponent] = useState<JSX.Element | null>(
+    null,
+  )
 
   const pluginsMap: Array<TanStackDevtoolsPlugin> = useMemo(
     () =>
@@ -170,14 +213,22 @@ export const TanStackDevtools = ({
     [plugins],
   )
 
-  const [devtools] = useState(
-    () =>
-      new TanStackDevtoolsCore({
-        config,
-        eventBusConfig,
-        plugins: pluginsMap,
-      }),
-  )
+  const [devtools] = useState(() => {
+    const { customTrigger, ...coreConfig } = config || {}
+    return new TanStackDevtoolsCore({
+      config: {
+        ...coreConfig,
+        customTrigger: customTrigger
+          ? (el, props) => {
+              setTriggerContainer(el)
+              convertTrigger(customTrigger, setTriggerComponent, el, props)
+            }
+          : undefined,
+      },
+      eventBusConfig,
+      plugins: pluginsMap,
+    })
+  })
 
   useEffect(() => {
     devtools.setConfig({
@@ -215,6 +266,10 @@ export const TanStackDevtools = ({
             createPortal(<>{TitleComponents[key]}</>, titleContainer),
           )
         : null}
+
+      {triggerContainer && TriggerComponent
+        ? createPortal(<>{TriggerComponent}</>, triggerContainer)
+        : null}
     </>
   )
 }