@tanstack/react-devtools - npm Package Compare versions

Comparing version 0.5.5 to 0.6.1

dist/esm/devtools.d.ts

 import { JSX, ReactElement } from 'react';
 import { ClientEventBusConfig, TanStackDevtoolsConfig, TanStackDevtoolsPlugin } from '@tanstack/devtools';
-type PluginRender = JSX.Element | (() => JSX.Element);
+type PluginRender = JSX.Element | ((el: HTMLElement, theme: 'dark' | 'light') => JSX.Element);
 export type TanStackDevtoolsReactPlugin = Omit<TanStackDevtoolsPlugin, 'render' | 'name'> & {
@@ -5,0 +5,0 @@ /**

dist/esm/devtools.js

@@ -5,4 +5,6 @@ import { jsxs, Fragment, jsx } from "react/jsx-runtime";
 import { createPortal } from "react-dom";
-const convertRender = (Component, setComponent) => {
-  setComponent(typeof Component === "function" ? Component() : Component);
+const convertRender = (Component, setComponent, e, theme) => {
+  setComponent(
+    typeof Component === "function" ? Component(e, theme) : Component
+  );
 };
@@ -32,3 +34,3 @@ const TanStackDevtools = ({
             // The check above confirms that `plugin.name` is of Render type
-            (e) => {
+            (e, theme) => {
               setTitleContainer(
@@ -41,11 +43,13 @@ e.ownerDocument.getElementById(
                 plugin.name,
-                setTitleComponent
+                setTitleComponent,
+                e,
+                theme
               );
             }
           ),
-          render: (e) => {
+          render: (e, theme) => {
             setPluginContainer(
               e.ownerDocument.getElementById(PLUGIN_CONTAINER_ID) || null
             );
-            convertRender(plugin.render, setPluginComponent);
+            convertRender(plugin.render, setPluginComponent, e, theme);
           }
@@ -52,0 +56,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, ReactElement } 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): ReactElement | null => {\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                  (e) => {\n                    setTitleContainer(\n                      e.ownerDocument.getElementById(\n                        PLUGIN_TITLE_CONTAINER_ID,\n                      ) || null,\n                    )\n                    convertRender(\n                      plugin.name as PluginRender,\n                      setTitleComponent,\n                    )\n                  },\n            render: (e) => {\n              setPluginContainer(\n                e.ownerDocument.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,MAAsD;AACpD,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,CAAC,MAAM;AACL;AAAA,gBACE,EAAE,cAAc;AAAA,kBACd;AAAA,gBAAA,KACG;AAAA,cAAA;AAEP;AAAA,gBACE,OAAO;AAAA,gBACP;AAAA,cAAA;AAAA,YAEJ;AAAA;AAAA,UACN,QAAQ,CAAC,MAAM;AACb;AAAA,cACE,EAAE,cAAc,eAAe,mBAAmB,KAAK;AAAA,YAAA;AAEzD,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, 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  setComponent: React.Dispatch<React.SetStateAction<JSX.Element | null>>,\n  e: HTMLElement,\n  theme: 'dark' | 'light',\n) => {\n  setComponent(\n    typeof Component === 'function' ? Component(e, theme) : Component,\n  )\n}\n\nexport const TanStackDevtools = ({\n  plugins,\n  config,\n  eventBusConfig,\n}: TanStackDevtoolsReactInit): ReactElement | null => {\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                  (e, theme) => {\n                    setTitleContainer(\n                      e.ownerDocument.getElementById(\n                        PLUGIN_TITLE_CONTAINER_ID,\n                      ) || null,\n                    )\n                    convertRender(\n                      plugin.name as PluginRender,\n                      setTitleComponent,\n                      e,\n                      theme,\n                    )\n                  },\n            render: (e, theme) => {\n              setPluginContainer(\n                e.ownerDocument.getElementById(PLUGIN_CONTAINER_ID) || null,\n              )\n              convertRender(plugin.render, setPluginComponent, e, theme)\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":";;;;AA8FA,MAAM,gBAAgB,CACpB,WACA,cACA,GACA,UACG;AACH;AAAA,IACE,OAAO,cAAc,aAAa,UAAU,GAAG,KAAK,IAAI;AAAA,EAAA;AAE5D;AAEO,MAAM,mBAAmB,CAAC;AAAA,EAC/B;AAAA,EACA;AAAA,EACA;AACF,MAAsD;AACpD,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,CAAC,GAAG,UAAU;AACZ;AAAA,gBACE,EAAE,cAAc;AAAA,kBACd;AAAA,gBAAA,KACG;AAAA,cAAA;AAEP;AAAA,gBACE,OAAO;AAAA,gBACP;AAAA,gBACA;AAAA,gBACA;AAAA,cAAA;AAAA,YAEJ;AAAA;AAAA,UACN,QAAQ,CAAC,GAAG,UAAU;AACpB;AAAA,cACE,EAAE,cAAc,eAAe,mBAAmB,KAAK;AAAA,YAAA;AAEzD,0BAAc,OAAO,QAAQ,oBAAoB,GAAG,KAAK;AAAA,UAC3D;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;"}

package.json

 {
   "name": "@tanstack/react-devtools",
-  "version": "0.5.5",
+  "version": "0.6.1",
   "description": "TanStack Devtools is a set of tools for building advanced devtools for your React application.",
@@ -48,3 +48,3 @@ "author": "Tanner Linsley",
   "dependencies": {
-    "@tanstack/devtools": "0.6.3"
+    "@tanstack/devtools": "0.6.5"
   },
@@ -51,0 +51,0 @@ "devDependencies": {

src/devtools.tsx

@@ -15,3 +15,5 @@ import React, { useEffect, useRef, useState } from 'react'
 
-type PluginRender = JSX.Element | (() => JSX.Element)
+type PluginRender =
+  | JSX.Element
+  | ((el: HTMLElement, theme: 'dark' | 'light') => JSX.Element)
 
@@ -97,4 +99,8 @@ export type TanStackDevtoolsReactPlugin = Omit<
   setComponent: React.Dispatch<React.SetStateAction<JSX.Element | null>>,
+  e: HTMLElement,
+  theme: 'dark' | 'light',
 ) => {
-  setComponent(typeof Component === 'function' ? Component() : Component)
+  setComponent(
+    typeof Component === 'function' ? Component(e, theme) : Component,
+  )
 }
@@ -128,3 +134,3 @@
                 : // The check above confirms that `plugin.name` is of Render type
-                  (e) => {
+                  (e, theme) => {
                     setTitleContainer(
@@ -138,9 +144,11 @@ e.ownerDocument.getElementById(
                       setTitleComponent,
+                      e,
+                      theme,
                     )
                   },
-            render: (e) => {
+            render: (e, theme) => {
               setPluginContainer(
                 e.ownerDocument.getElementById(PLUGIN_CONTAINER_ID) || null,
               )
-              convertRender(plugin.render, setPluginComponent)
+              convertRender(plugin.render, setPluginComponent, e, theme)
             },
@@ -147,0 +155,0 @@ }

New alerts

Environment variable access

Supply chain risk

Package accesses environment variables, which may be a sign of credential stuffing or data theft.

Found 1 instance in 1 package

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

Environment variable access

Supply chain risk

Package accesses environment variables, which may be a sign of credential stuffing or data theft.

Found 1 instance in 1 package

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

22821

2.63%

Lines of code

356

3.49%

Worsened metrics

Number of low supply chain risk alerts

5

25%

Dependency changes

• + Added

  @tanstack/devtools@0.6.5
  (transitive)

• + Added

  @tanstack/devtools-ui@0.3.4
  (transitive)

• - Removed

  @tanstack/devtools@0.6.3
  (transitive)

• - Removed

  @tanstack/devtools-ui@0.3.3
  (transitive)

• Updated

  @tanstack/devtools@0.6.5