@tanstack/react-devtools - npm Package Compare versions

Comparing version 0.1.0 to 0.1.1

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  render: PluginRender\n  name: string | PluginRender\n}\n\nexport interface TanStackDevtoolsReactInit {\n  plugins?: Array<TanStackDevtoolsReactPlugin>\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":";;;;;;AA4BA,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  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;;"}

dist/cjs/devtools.d.cts

@@ -5,7 +5,66 @@ import { JSX } from 'react';
 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;
@@ -12,0 +71,0 @@ }

dist/esm/devtools.d.ts

@@ -5,7 +5,66 @@ import { JSX } from 'react';
 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;
@@ -12,0 +71,0 @@ }

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  render: PluginRender\n  name: string | PluginRender\n}\n\nexport interface TanStackDevtoolsReactInit {\n  plugins?: Array<TanStackDevtoolsReactPlugin>\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":";;;;AA4BA,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  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.json

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

README.md

@@ -11,6 +11,7 @@ # @tanstack/react-devtools
 import { TanStackRouterDevtoolsPanel } from '@tanstack/react-router-devtools'
-
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
+const queryClient = new QueryClient()
 function App() {
   return (
-    <div>
+    <QueryClientProvider client={queryClient}>
       <h1>My App</h1>
@@ -29,2 +30,27 @@ <TanstackDevtools
       />
+    </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>
@@ -31,0 +57,0 @@ )

src/devtools.tsx

@@ -20,3 +20,40 @@ import React, { useEffect, useRef, useState } from 'react'
 > & {
+  /**
+   * 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
@@ -26,3 +63,25 @@ }
 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
@@ -29,0 +88,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

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

31133

38.78%

Lines of code

388

43.7%

Number of lines in readme file

58

81.25%

Number of medium supply chain risk alerts

0

-100%

Worsened metrics

Number of low supply chain risk alerts

2

100%

Dependency changes

• + Added

  @tanstack/devtools@0.1.1
  (transitive)

• - Removed

  @tanstack/devtools@0.1.0
  (transitive)

• Updated

  @tanstack/devtools@0.1.1