@tanstack/react-devtools - npm Package Compare versions

Comparing version 0.1.1 to 0.2.0

dist/cjs/devtools.cjs

@@ -12,3 +12,4 @@ "use strict";
   plugins,
-  config
+  config,
+  eventBusConfig
 }) => {
@@ -27,2 +28,3 @@ const devToolRef = react.useRef(null);
       config,
+      eventBusConfig,
       plugins: plugins?.map((plugin) => {
@@ -57,5 +59,3 @@ return {
     }
-    return () => {
-      devtools$1.unmount();
-    };
+    return () => devtools$1.unmount();
   }, [devtools$1]);
@@ -62,0 +62,0 @@ return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [

dist/cjs/devtools.cjs.map

@@ -1,1 +0,1 @@
-{"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;;"}
+{"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  ClientEventBusConfig,\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?: Partial<TanStackDevtoolsConfig>\n  /**\n   * Configuration for the TanStack Devtools client event bus.\n   */\n  eventBusConfig?: ClientEventBusConfig\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  eventBusConfig,\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        eventBusConfig,\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 () => devtools.unmount()\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":";;;;;;AA4FA,MAAM,gBAAgB,CACpB,WACA,iBACG;AACH,eAAa,OAAO,cAAc,aAAa,UAAA,IAAc,SAAS;AACxE;AAEO,MAAM,mBAAmB,CAAC;AAAA,EAC/B;AAAA,EACA;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;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,MAAMA,WAAS,QAAA;AAAA,EACxB,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;;"}

dist/cjs/devtools.d.cts

 import { JSX } from 'react';
-import { TanStackDevtoolsConfig, TanStackDevtoolsPlugin } from '@tanstack/devtools';
+import { ClientEventBusConfig, TanStackDevtoolsConfig, TanStackDevtoolsPlugin } from '@tanstack/devtools';
 type PluginRender = JSX.Element | (() => JSX.Element);
@@ -69,5 +69,9 @@ export type TanStackDevtoolsReactPlugin = Omit<TanStackDevtoolsPlugin, 'render' | 'name'> & {
      */
-    config?: TanStackDevtoolsConfig;
+    config?: Partial<TanStackDevtoolsConfig>;
+    /**
+     * Configuration for the TanStack Devtools client event bus.
+     */
+    eventBusConfig?: ClientEventBusConfig;
 }
-export declare const TanstackDevtools: ({ plugins, config, }: TanStackDevtoolsReactInit) => JSX.Element;
+export declare const TanstackDevtools: ({ plugins, config, eventBusConfig, }: TanStackDevtoolsReactInit) => JSX.Element;
 export {};

dist/esm/devtools.d.ts

 import { JSX } from 'react';
-import { TanStackDevtoolsConfig, TanStackDevtoolsPlugin } from '@tanstack/devtools';
+import { ClientEventBusConfig, TanStackDevtoolsConfig, TanStackDevtoolsPlugin } from '@tanstack/devtools';
 type PluginRender = JSX.Element | (() => JSX.Element);
@@ -69,5 +69,9 @@ export type TanStackDevtoolsReactPlugin = Omit<TanStackDevtoolsPlugin, 'render' | 'name'> & {
      */
-    config?: TanStackDevtoolsConfig;
+    config?: Partial<TanStackDevtoolsConfig>;
+    /**
+     * Configuration for the TanStack Devtools client event bus.
+     */
+    eventBusConfig?: ClientEventBusConfig;
 }
-export declare const TanstackDevtools: ({ plugins, config, }: TanStackDevtoolsReactInit) => JSX.Element;
+export declare const TanstackDevtools: ({ plugins, config, eventBusConfig, }: TanStackDevtoolsReactInit) => JSX.Element;
 export {};

dist/esm/devtools.js

@@ -10,3 +10,4 @@ import { jsxs, Fragment, jsx } from "react/jsx-runtime";
   plugins,
-  config
+  config,
+  eventBusConfig
 }) => {
@@ -25,2 +26,3 @@ const devToolRef = useRef(null);
       config,
+      eventBusConfig,
       plugins: plugins?.map((plugin) => {
@@ -55,5 +57,3 @@ return {
     }
-    return () => {
-      devtools.unmount();
-    };
+    return () => devtools.unmount();
   }, [devtools]);
@@ -60,0 +60,0 @@ return /* @__PURE__ */ jsxs(Fragment, { children: [

dist/esm/devtools.js.map

@@ -1,1 +0,1 @@
-{"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;"}
+{"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  ClientEventBusConfig,\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?: Partial<TanStackDevtoolsConfig>\n  /**\n   * Configuration for the TanStack Devtools client event bus.\n   */\n  eventBusConfig?: ClientEventBusConfig\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  eventBusConfig,\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        eventBusConfig,\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 () => devtools.unmount()\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":";;;;AA4FA,MAAM,gBAAgB,CACpB,WACA,iBACG;AACH,eAAa,OAAO,cAAc,aAAa,UAAA,IAAc,SAAS;AACxE;AAEO,MAAM,mBAAmB,CAAC;AAAA,EAC/B;AAAA,EACA;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;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,SAAS,QAAA;AAAA,EACxB,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.json

 {
   "name": "@tanstack/react-devtools",
-  "version": "0.1.1",
+  "version": "0.2.0",
   "description": "TanStack Devtools is a set of tools for building advanced devtools for your React application.",
@@ -47,3 +47,3 @@ "author": "Tanner Linsley",
   "dependencies": {
-    "@tanstack/devtools": "0.1.1"
+    "@tanstack/devtools": "0.2.0"
   },
@@ -53,3 +53,3 @@ "devDependencies": {
     "@types/react": "^19.1.2",
-    "@vitejs/plugin-react": "^4.4.1",
+    "@vitejs/plugin-react": "^4.5.2",
     "eslint-plugin-react-compiler": "19.1.0-rc.1",
@@ -56,0 +56,0 @@ "eslint-plugin-react-hooks": "^5.2.0",

src/devtools.tsx

@@ -10,2 +10,3 @@ import React, { useEffect, useRef, useState } from 'react'
 import type {
+  ClientEventBusConfig,
   TanStackDevtoolsConfig,
@@ -86,3 +87,7 @@ TanStackDevtoolsPlugin,
    */
-  config?: TanStackDevtoolsConfig
+  config?: Partial<TanStackDevtoolsConfig>
+  /**
+   * Configuration for the TanStack Devtools client event bus.
+   */
+  eventBusConfig?: ClientEventBusConfig
 }
@@ -100,2 +105,3 @@
   config,
+  eventBusConfig,
 }: TanStackDevtoolsReactInit) => {
@@ -115,2 +121,3 @@ const devToolRef = useRef<HTMLDivElement>(null)
         config,
+        eventBusConfig,
         plugins: plugins?.map((plugin) => {
@@ -148,5 +155,3 @@ return {
 
-    return () => {
-      devtools.unmount()
-    }
+    return () => devtools.unmount()
   }, [devtools])
@@ -153,0 +158,0 @@

New alerts

Long strings

Supply chain risk

Contains long string literals, which may be a sign of obfuscated or packed code.

Found 1 instance in 1 package

Fixed alerts

Long strings

Supply chain risk

Contains long string literals, which may be a sign of obfuscated or packed code.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

32074

3.02%

Lines of code

397

2.32%

Dependency changes

• + Added

  @tanstack/devtools@0.2.0
  (transitive)

• + Added

  @tanstack/devtools-event-bus@0.2.0
  (transitive)

• + Added

  ws@8.20.0
  (transitive)

• - Removed

  @tanstack/devtools@0.1.1
  (transitive)

• Updated

  @tanstack/devtools@0.2.0