@tanstack/react-devtools - npm Package Compare versions

Comparing version 0.3.1 to 0.4.0

dist/cjs/devtools.cjs

@@ -10,3 +10,3 @@ "use strict";
 };
-const TanstackDevtools = ({
+const TanStackDevtools = ({
   plugins,
@@ -66,3 +66,3 @@ config,
 };
-exports.TanstackDevtools = TanstackDevtools;
+exports.TanStackDevtools = TanStackDevtools;
 //# sourceMappingURL=devtools.cjs.map

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  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 style={{ position: 'absolute' }} 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,+BAAC,SAAI,OAAO,EAAE,UAAU,WAAA,GAAc,KAAK,YAAY;AAAA,IACtD,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 style={{ position: 'absolute' }} 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,+BAAC,SAAI,OAAO,EAAE,UAAU,WAAA,GAAc,KAAK,YAAY;AAAA,IACtD,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

@@ -52,3 +52,3 @@ import { JSX } from 'react';
      * ```jsx
-     * <TanstackDevtools
+     * <TanStackDevtools
      *   plugins={[
@@ -76,3 +76,3 @@ *     {
 }
-export declare const TanstackDevtools: ({ plugins, config, eventBusConfig, }: TanStackDevtoolsReactInit) => JSX.Element;
+export declare const TanStackDevtools: ({ plugins, config, eventBusConfig, }: TanStackDevtoolsReactInit) => JSX.Element;
 export {};

dist/cjs/index.cjs

@@ -5,3 +5,3 @@ "use strict";
 const devtools = require("./devtools.cjs");
-exports.TanstackDevtools = devtools.TanstackDevtools;
+exports.TanStackDevtools = devtools.TanStackDevtools;
 Object.keys(devtools$1).forEach((k) => {
@@ -8,0 +8,0 @@ if (k !== "default" && !Object.prototype.hasOwnProperty.call(exports, k)) Object.defineProperty(exports, k, {

dist/esm/devtools.d.ts

@@ -52,3 +52,3 @@ import { JSX } from 'react';
      * ```jsx
-     * <TanstackDevtools
+     * <TanStackDevtools
      *   plugins={[
@@ -76,3 +76,3 @@ *     {
 }
-export declare const TanstackDevtools: ({ plugins, config, eventBusConfig, }: TanStackDevtoolsReactInit) => JSX.Element;
+export declare const TanStackDevtools: ({ plugins, config, eventBusConfig, }: TanStackDevtoolsReactInit) => JSX.Element;
 export {};

dist/esm/devtools.js

@@ -8,3 +8,3 @@ import { jsxs, Fragment, jsx } from "react/jsx-runtime";
 };
-const TanstackDevtools = ({
+const TanStackDevtools = ({
   plugins,
@@ -65,4 +65,4 @@ config,
 export {
-  TanstackDevtools
+  TanStackDevtools
 };
 //# sourceMappingURL=devtools.js.map

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  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 style={{ position: 'absolute' }} 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,SAAI,OAAO,EAAE,UAAU,WAAA,GAAc,KAAK,YAAY;AAAA,IACtD,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 style={{ position: 'absolute' }} 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,SAAI,OAAO,EAAE,UAAU,WAAA,GAAc,KAAK,YAAY;AAAA,IACtD,mBAAmB,kBAChB,6CAAgB,UAAA,gBAAA,CAAgB,GAAK,eAAe,IACpD;AAAA,IACH,kBAAkB,iBACf,6CAAgB,UAAA,eAAA,CAAe,GAAK,cAAc,IAClD;AAAA,EAAA,GACN;AAEJ;"}

dist/esm/index.js

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

package.json

 {
   "name": "@tanstack/react-devtools",
-  "version": "0.3.1",
+  "version": "0.4.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.3.2"
+    "@tanstack/devtools": "0.4.0"
   },
@@ -50,0 +50,0 @@ "devDependencies": {

README.md

@@ -8,3 +8,3 @@ # @tanstack/react-devtools
 ```tsx
-import { TanstackDevtools } from '@tanstack/react-devtools'
+import { TanStackDevtools } from '@tanstack/react-devtools'
 import { ReactQueryDevtoolsPanel } from '@tanstack/react-query-devtools'
@@ -18,10 +18,10 @@ import { TanStackRouterDevtoolsPanel } from '@tanstack/react-router-devtools'
       <h1>My App</h1>
-      <TanstackDevtools
+      <TanStackDevtools
         plugins={[
           {
-            name: 'Tanstack Query',
+            name: 'TanStack Query',
             render: <ReactQueryDevtoolsPanel />,
           },
           {
-            name: 'Tanstack Router',
+            name: 'TanStack Router',
             render: <TanStackRouterDevtoolsPanel router={router} />,
@@ -38,6 +38,6 @@ },
 
-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:
+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'
+import { TanStackDevtools } from '@tanstack/react-devtools'
 
@@ -48,3 +48,3 @@ function App() {
       <h1>My App</h1>
-      <TanstackDevtools
+      <TanStackDevtools
         plugins={[
@@ -51,0 +51,0 @@ {

src/devtools.tsx

@@ -69,3 +69,3 @@ import React, { useEffect, useRef, useState } from 'react'
    * ```jsx
-   * <TanstackDevtools
+   * <TanStackDevtools
    *   plugins={[
@@ -101,3 +101,3 @@ *     {
 
-export const TanstackDevtools = ({
+export const TanStackDevtools = ({
   plugins,
@@ -104,0 +104,0 @@ config,

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

No metric changes

Dependency changes

• + Added

  @tanstack/devtools@0.4.0
  (transitive)

• - Removed

  @tanstack/devtools@0.3.2
  (transitive)

• Updated

  @tanstack/devtools@0.4.0