@tanstack/react-devtools - npm Package Compare versions

Comparing version 0.7.6 to 0.7.7

dist/esm/devtools.js

 import { jsxs, Fragment, jsx } from "react/jsx-runtime";
-import { useRef, useState, useEffect } from "react";
+import { useRef, useState, useMemo, useEffect } from "react";
 import { TanStackDevtoolsCore } from "@tanstack/devtools";
@@ -22,2 +22,37 @@ import { createPortal } from "react-dom";
   const [TitleComponents, setTitleComponents] = useState({});
+  const pluginsMap = useMemo(
+    () => plugins?.map((plugin) => {
+      return {
+        ...plugin,
+        name: typeof plugin.name === "string" ? plugin.name : (e, theme) => {
+          const id = e.getAttribute("id");
+          const target = e.ownerDocument.getElementById(id);
+          if (target) {
+            setTitleContainers((prev) => ({
+              ...prev,
+              [id]: e
+            }));
+          }
+          convertRender(
+            plugin.name,
+            setTitleComponents,
+            e,
+            theme
+          );
+        },
+        render: (e, theme) => {
+          const id = e.getAttribute("id");
+          const target = e.ownerDocument.getElementById(id);
+          if (target) {
+            setPluginContainers((prev) => ({
+              ...prev,
+              [id]: e
+            }));
+          }
+          convertRender(plugin.render, setPluginComponents, e, theme);
+        }
+      };
+    }) ?? [],
+    [plugins]
+  );
   const [devtools] = useState(
@@ -27,37 +62,11 @@ () => new TanStackDevtoolsCore({
       eventBusConfig,
-      plugins: plugins?.map((plugin) => {
-        return {
-          ...plugin,
-          name: typeof plugin.name === "string" ? plugin.name : (e, theme) => {
-            const id = e.getAttribute("id");
-            const target = e.ownerDocument.getElementById(id);
-            if (target) {
-              setTitleContainers((prev) => ({
-                ...prev,
-                [id]: e
-              }));
-            }
-            convertRender(
-              plugin.name,
-              setTitleComponents,
-              e,
-              theme
-            );
-          },
-          render: (e, theme) => {
-            const id = e.getAttribute("id");
-            const target = e.ownerDocument.getElementById(id);
-            if (target) {
-              setPluginContainers((prev) => ({
-                ...prev,
-                [id]: e
-              }));
-            }
-            convertRender(plugin.render, setPluginComponents, e, theme);
-          }
-        };
-      })
+      plugins: pluginsMap
     })
   );
   useEffect(() => {
+    devtools.setConfig({
+      plugins: pluginsMap
+    });
+  }, [devtools, pluginsMap]);
+  useEffect(() => {
     if (devToolRef.current) {
@@ -64,0 +73,0 @@ devtools.mount(devToolRef.current);

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 { TanStackDevtoolsCore } from '@tanstack/devtools'\nimport { createPortal } from 'react-dom'\nimport type { JSX, ReactElement } from 'react'\nimport type {\n  ClientEventBusConfig,\n  TanStackDevtoolsConfig,\n  TanStackDevtoolsPlugin,\n} from '@tanstack/devtools'\n\ntype PluginRender =\n  | JSX.Element\n  | ((el: HTMLElement, theme: 'dark' | 'light') => JSX.Element)\n\nexport type TanStackDevtoolsReactPlugin = Omit<\n  TanStackDevtoolsPlugin,\n  'render' | 'name'\n> & {\n  /**\n   * The render function can be a React element or a function that returns a React element.\n   * If it's a function, it will be called to render the plugin, otherwise it will be rendered directly.\n   *\n   * Example:\n   * ```jsx\n   *   {\n   *     render: () => <CustomPluginComponent />,\n   *   }\n   * ```\n   * or\n   * ```jsx\n   *   {\n   *     render: <CustomPluginComponent />,\n   *   }\n   * ```\n   */\n  render: PluginRender\n  /**\n   * Name to be displayed in the devtools UI.\n   * If a string, it will be used as the plugin name.\n   * If a function, it will be called with the mount element.\n   *\n   * Example:\n   * ```jsx\n   *   {\n   *     name: \"Your Plugin\",\n   *     render: () => <CustomPluginComponent />,\n   *   }\n   * ```\n   * or\n   * ```jsx\n   *   {\n   *     name:  <h1>Your Plugin title</h1>,\n   *     render: () => <CustomPluginComponent />,\n   *   }\n   * ```\n   */\n  name: string | PluginRender\n}\n\nexport interface TanStackDevtoolsReactInit {\n  /**\n   * Array of plugins to be used in the devtools.\n   * Each plugin should have a `render` function that returns a React element or a function\n   *\n   * Example:\n   * ```jsx\n   * <TanStackDevtools\n   *   plugins={[\n   *     {\n   *       id: \"your-plugin-id\",\n   *       name: \"Your Plugin\",\n   *       render: <CustomPluginComponent />,\n   *     }\n   *   ]}\n   * />\n   * ```\n   */\n  plugins?: Array<TanStackDevtoolsReactPlugin>\n  /**\n   * Configuration for the devtools shell. These configuration options are used to set the\n   * initial state of the devtools when it is started for the first time. Afterwards,\n   * the settings are persisted in local storage and changed through the settings panel.\n   */\n  config?: Partial<TanStackDevtoolsConfig>\n  /**\n   * Configuration for the TanStack Devtools client event bus.\n   */\n  eventBusConfig?: ClientEventBusConfig\n}\n\nconst convertRender = (\n  Component: PluginRender,\n  setComponents: React.Dispatch<\n    React.SetStateAction<Record<string, JSX.Element>>\n  >,\n  e: HTMLElement,\n  theme: 'dark' | 'light',\n) => {\n  const element =\n    typeof Component === 'function' ? Component(e, theme) : Component\n\n  setComponents((prev) => ({\n    ...prev,\n    [e.getAttribute('id') as string]: element,\n  }))\n}\n\nexport const TanStackDevtools = ({\n  plugins,\n  config,\n  eventBusConfig,\n}: TanStackDevtoolsReactInit): ReactElement | null => {\n  const devToolRef = useRef<HTMLDivElement>(null)\n\n  const [pluginContainers, setPluginContainers] = useState<\n    Record<string, HTMLElement>\n  >({})\n  const [titleContainers, setTitleContainers] = useState<\n    Record<string, HTMLElement>\n  >({})\n\n  const [PluginComponents, setPluginComponents] = useState<\n    Record<string, JSX.Element>\n  >({})\n  const [TitleComponents, setTitleComponents] = useState<\n    Record<string, JSX.Element>\n  >({})\n\n  const [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                : (e, theme) => {\n                    const id = e.getAttribute('id')!\n                    const target = e.ownerDocument.getElementById(id)\n\n                    if (target) {\n                      setTitleContainers((prev) => ({\n                        ...prev,\n                        [id]: e,\n                      }))\n                    }\n\n                    convertRender(\n                      plugin.name as PluginRender,\n                      setTitleComponents,\n                      e,\n                      theme,\n                    )\n                  },\n            render: (e, theme) => {\n              const id = e.getAttribute('id')!\n              const target = e.ownerDocument.getElementById(id)\n\n              if (target) {\n                setPluginContainers((prev) => ({\n                  ...prev,\n                  [id]: e,\n                }))\n              }\n\n              convertRender(plugin.render, setPluginComponents, e, theme)\n            },\n          }\n        }),\n      }),\n  )\n\n  useEffect(() => {\n    if (devToolRef.current) {\n      devtools.mount(devToolRef.current)\n    }\n\n    return () => devtools.unmount()\n  }, [devtools])\n\n  const hasPlugins =\n    Object.values(pluginContainers).length > 0 &&\n    Object.values(PluginComponents).length > 0\n  const hasTitles =\n    Object.values(titleContainers).length > 0 &&\n    Object.values(TitleComponents).length > 0\n\n  return (\n    <>\n      <div style={{ position: 'absolute' }} ref={devToolRef} />\n\n      {hasPlugins\n        ? Object.entries(pluginContainers).map(([key, pluginContainer]) =>\n            createPortal(<>{PluginComponents[key]}</>, pluginContainer),\n          )\n        : null}\n\n      {hasTitles\n        ? Object.entries(titleContainers).map(([key, titleContainer]) =>\n            createPortal(<>{TitleComponents[key]}</>, titleContainer),\n          )\n        : null}\n    </>\n  )\n}\n"],"names":[],"mappings":";;;;AA0FA,MAAM,gBAAgB,CACpB,WACA,eAGA,GACA,UACG;AACH,QAAM,UACJ,OAAO,cAAc,aAAa,UAAU,GAAG,KAAK,IAAI;AAE1D,gBAAc,CAAC,UAAU;AAAA,IACvB,GAAG;AAAA,IACH,CAAC,EAAE,aAAa,IAAI,CAAW,GAAG;AAAA,EAAA,EAClC;AACJ;AAEO,MAAM,mBAAmB,CAAC;AAAA,EAC/B;AAAA,EACA;AAAA,EACA;AACF,MAAsD;AACpD,QAAM,aAAa,OAAuB,IAAI;AAE9C,QAAM,CAAC,kBAAkB,mBAAmB,IAAI,SAE9C,CAAA,CAAE;AACJ,QAAM,CAAC,iBAAiB,kBAAkB,IAAI,SAE5C,CAAA,CAAE;AAEJ,QAAM,CAAC,kBAAkB,mBAAmB,IAAI,SAE9C,CAAA,CAAE;AACJ,QAAM,CAAC,iBAAiB,kBAAkB,IAAI,SAE5C,CAAA,CAAE;AAEJ,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,OACP,CAAC,GAAG,UAAU;AACZ,kBAAM,KAAK,EAAE,aAAa,IAAI;AAC9B,kBAAM,SAAS,EAAE,cAAc,eAAe,EAAE;AAEhD,gBAAI,QAAQ;AACV,iCAAmB,CAAC,UAAU;AAAA,gBAC5B,GAAG;AAAA,gBACH,CAAC,EAAE,GAAG;AAAA,cAAA,EACN;AAAA,YACJ;AAEA;AAAA,cACE,OAAO;AAAA,cACP;AAAA,cACA;AAAA,cACA;AAAA,YAAA;AAAA,UAEJ;AAAA,UACN,QAAQ,CAAC,GAAG,UAAU;AACpB,kBAAM,KAAK,EAAE,aAAa,IAAI;AAC9B,kBAAM,SAAS,EAAE,cAAc,eAAe,EAAE;AAEhD,gBAAI,QAAQ;AACV,kCAAoB,CAAC,UAAU;AAAA,gBAC7B,GAAG;AAAA,gBACH,CAAC,EAAE,GAAG;AAAA,cAAA,EACN;AAAA,YACJ;AAEA,0BAAc,OAAO,QAAQ,qBAAqB,GAAG,KAAK;AAAA,UAC5D;AAAA,QAAA;AAAA,MAEJ,CAAC;AAAA,IAAA,CACF;AAAA,EAAA;AAGL,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,QAAM,aACJ,OAAO,OAAO,gBAAgB,EAAE,SAAS,KACzC,OAAO,OAAO,gBAAgB,EAAE,SAAS;AAC3C,QAAM,YACJ,OAAO,OAAO,eAAe,EAAE,SAAS,KACxC,OAAO,OAAO,eAAe,EAAE,SAAS;AAE1C,SACE,qBAAA,UAAA,EACE,UAAA;AAAA,IAAA,oBAAC,SAAI,OAAO,EAAE,UAAU,WAAA,GAAc,KAAK,YAAY;AAAA,IAEtD,aACG,OAAO,QAAQ,gBAAgB,EAAE;AAAA,MAAI,CAAC,CAAC,KAAK,eAAe,MACzD,aAAa,oBAAA,UAAA,EAAG,UAAA,iBAAiB,GAAG,EAAA,CAAE,GAAK,eAAe;AAAA,IAAA,IAE5D;AAAA,IAEH,YACG,OAAO,QAAQ,eAAe,EAAE;AAAA,MAAI,CAAC,CAAC,KAAK,cAAc,MACvD,aAAa,oBAAA,UAAA,EAAG,UAAA,gBAAgB,GAAG,EAAA,CAAE,GAAK,cAAc;AAAA,IAAA,IAE1D;AAAA,EAAA,GACN;AAEJ;"}
+{"version":3,"file":"devtools.js","sources":["../../src/devtools.tsx"],"sourcesContent":["import React, { useEffect, useMemo, useRef, useState } from 'react'\nimport { TanStackDevtoolsCore } from '@tanstack/devtools'\nimport { createPortal } from 'react-dom'\nimport type { JSX, ReactElement } from 'react'\nimport type {\n  ClientEventBusConfig,\n  TanStackDevtoolsConfig,\n  TanStackDevtoolsPlugin,\n} from '@tanstack/devtools'\n\ntype PluginRender =\n  | JSX.Element\n  | ((el: HTMLElement, theme: 'dark' | 'light') => JSX.Element)\n\nexport type TanStackDevtoolsReactPlugin = Omit<\n  TanStackDevtoolsPlugin,\n  'render' | 'name'\n> & {\n  /**\n   * The render function can be a React element or a function that returns a React element.\n   * If it's a function, it will be called to render the plugin, otherwise it will be rendered directly.\n   *\n   * Example:\n   * ```jsx\n   *   {\n   *     render: () => <CustomPluginComponent />,\n   *   }\n   * ```\n   * or\n   * ```jsx\n   *   {\n   *     render: <CustomPluginComponent />,\n   *   }\n   * ```\n   */\n  render: PluginRender\n  /**\n   * Name to be displayed in the devtools UI.\n   * If a string, it will be used as the plugin name.\n   * If a function, it will be called with the mount element.\n   *\n   * Example:\n   * ```jsx\n   *   {\n   *     name: \"Your Plugin\",\n   *     render: () => <CustomPluginComponent />,\n   *   }\n   * ```\n   * or\n   * ```jsx\n   *   {\n   *     name:  <h1>Your Plugin title</h1>,\n   *     render: () => <CustomPluginComponent />,\n   *   }\n   * ```\n   */\n  name: string | PluginRender\n}\n\nexport interface TanStackDevtoolsReactInit {\n  /**\n   * Array of plugins to be used in the devtools.\n   * Each plugin should have a `render` function that returns a React element or a function\n   *\n   * Example:\n   * ```jsx\n   * <TanStackDevtools\n   *   plugins={[\n   *     {\n   *       id: \"your-plugin-id\",\n   *       name: \"Your Plugin\",\n   *       render: <CustomPluginComponent />,\n   *     }\n   *   ]}\n   * />\n   * ```\n   */\n  plugins?: Array<TanStackDevtoolsReactPlugin>\n  /**\n   * Configuration for the devtools shell. These configuration options are used to set the\n   * initial state of the devtools when it is started for the first time. Afterwards,\n   * the settings are persisted in local storage and changed through the settings panel.\n   */\n  config?: Partial<TanStackDevtoolsConfig>\n  /**\n   * Configuration for the TanStack Devtools client event bus.\n   */\n  eventBusConfig?: ClientEventBusConfig\n}\n\nconst convertRender = (\n  Component: PluginRender,\n  setComponents: React.Dispatch<\n    React.SetStateAction<Record<string, JSX.Element>>\n  >,\n  e: HTMLElement,\n  theme: 'dark' | 'light',\n) => {\n  const element =\n    typeof Component === 'function' ? Component(e, theme) : Component\n\n  setComponents((prev) => ({\n    ...prev,\n    [e.getAttribute('id') as string]: element,\n  }))\n}\n\nexport const TanStackDevtools = ({\n  plugins,\n  config,\n  eventBusConfig,\n}: TanStackDevtoolsReactInit): ReactElement | null => {\n  const devToolRef = useRef<HTMLDivElement>(null)\n\n  const [pluginContainers, setPluginContainers] = useState<\n    Record<string, HTMLElement>\n  >({})\n  const [titleContainers, setTitleContainers] = useState<\n    Record<string, HTMLElement>\n  >({})\n\n  const [PluginComponents, setPluginComponents] = useState<\n    Record<string, JSX.Element>\n  >({})\n  const [TitleComponents, setTitleComponents] = useState<\n    Record<string, JSX.Element>\n  >({})\n\n  const pluginsMap: Array<TanStackDevtoolsPlugin> = useMemo(\n    () =>\n      plugins?.map((plugin) => {\n        return {\n          ...plugin,\n          name:\n            typeof plugin.name === 'string'\n              ? plugin.name\n              : (e, theme) => {\n                  const id = e.getAttribute('id')!\n                  const target = e.ownerDocument.getElementById(id)\n\n                  if (target) {\n                    setTitleContainers((prev) => ({\n                      ...prev,\n                      [id]: e,\n                    }))\n                  }\n\n                  convertRender(\n                    plugin.name as PluginRender,\n                    setTitleComponents,\n                    e,\n                    theme,\n                  )\n                },\n          render: (e, theme) => {\n            const id = e.getAttribute('id')!\n            const target = e.ownerDocument.getElementById(id)\n\n            if (target) {\n              setPluginContainers((prev) => ({\n                ...prev,\n                [id]: e,\n              }))\n            }\n\n            convertRender(plugin.render, setPluginComponents, e, theme)\n          },\n        }\n      }) ?? [],\n    [plugins],\n  )\n\n  const [devtools] = useState(\n    () =>\n      new TanStackDevtoolsCore({\n        config,\n        eventBusConfig,\n        plugins: pluginsMap,\n      }),\n  )\n\n  useEffect(() => {\n    devtools.setConfig({\n      plugins: pluginsMap,\n    })\n  }, [devtools, pluginsMap])\n\n  useEffect(() => {\n    if (devToolRef.current) {\n      devtools.mount(devToolRef.current)\n    }\n\n    return () => devtools.unmount()\n  }, [devtools])\n\n  const hasPlugins =\n    Object.values(pluginContainers).length > 0 &&\n    Object.values(PluginComponents).length > 0\n  const hasTitles =\n    Object.values(titleContainers).length > 0 &&\n    Object.values(TitleComponents).length > 0\n\n  return (\n    <>\n      <div style={{ position: 'absolute' }} ref={devToolRef} />\n\n      {hasPlugins\n        ? Object.entries(pluginContainers).map(([key, pluginContainer]) =>\n            createPortal(<>{PluginComponents[key]}</>, pluginContainer),\n          )\n        : null}\n\n      {hasTitles\n        ? Object.entries(titleContainers).map(([key, titleContainer]) =>\n            createPortal(<>{TitleComponents[key]}</>, titleContainer),\n          )\n        : null}\n    </>\n  )\n}\n"],"names":[],"mappings":"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"}

package.json

 {
   "name": "@tanstack/react-devtools",
-  "version": "0.7.6",
+  "version": "0.7.7",
   "description": "TanStack Devtools is a set of tools for building advanced devtools for your React application.",
@@ -42,3 +42,3 @@ "author": "Tanner Linsley",
   "dependencies": {
-    "@tanstack/devtools": "0.6.20"
+    "@tanstack/devtools": "0.6.21"
   },
@@ -45,0 +45,0 @@ "devDependencies": {

src/devtools.tsx

@@ -1,2 +0,2 @@
-import React, { useEffect, useRef, useState } from 'react'
+import React, { useEffect, useMemo, useRef, useState } from 'react'
 import { TanStackDevtoolsCore } from '@tanstack/devtools'
@@ -129,2 +129,46 @@ import { createPortal } from 'react-dom'
 
+  const pluginsMap: Array<TanStackDevtoolsPlugin> = useMemo(
+    () =>
+      plugins?.map((plugin) => {
+        return {
+          ...plugin,
+          name:
+            typeof plugin.name === 'string'
+              ? plugin.name
+              : (e, theme) => {
+                  const id = e.getAttribute('id')!
+                  const target = e.ownerDocument.getElementById(id)
+
+                  if (target) {
+                    setTitleContainers((prev) => ({
+                      ...prev,
+                      [id]: e,
+                    }))
+                  }
+
+                  convertRender(
+                    plugin.name as PluginRender,
+                    setTitleComponents,
+                    e,
+                    theme,
+                  )
+                },
+          render: (e, theme) => {
+            const id = e.getAttribute('id')!
+            const target = e.ownerDocument.getElementById(id)
+
+            if (target) {
+              setPluginContainers((prev) => ({
+                ...prev,
+                [id]: e,
+              }))
+            }
+
+            convertRender(plugin.render, setPluginComponents, e, theme)
+          },
+        }
+      }) ?? [],
+    [plugins],
+  )
+
   const [devtools] = useState(
@@ -135,41 +179,3 @@ () =>
         eventBusConfig,
-        plugins: plugins?.map((plugin) => {
-          return {
-            ...plugin,
-            name:
-              typeof plugin.name === 'string'
-                ? plugin.name
-                : (e, theme) => {
-                    const id = e.getAttribute('id')!
-                    const target = e.ownerDocument.getElementById(id)
-
-                    if (target) {
-                      setTitleContainers((prev) => ({
-                        ...prev,
-                        [id]: e,
-                      }))
-                    }
-
-                    convertRender(
-                      plugin.name as PluginRender,
-                      setTitleComponents,
-                      e,
-                      theme,
-                    )
-                  },
-            render: (e, theme) => {
-              const id = e.getAttribute('id')!
-              const target = e.ownerDocument.getElementById(id)
-
-              if (target) {
-                setPluginContainers((prev) => ({
-                  ...prev,
-                  [id]: e,
-                }))
-              }
-
-              convertRender(plugin.render, setPluginComponents, e, theme)
-            },
-          }
-        }),
+        plugins: pluginsMap,
       }),
@@ -179,2 +185,8 @@ )
   useEffect(() => {
+    devtools.setConfig({
+      plugins: pluginsMap,
+    })
+  }, [devtools, pluginsMap])
+
+  useEffect(() => {
     if (devToolRef.current) {
@@ -181,0 +193,0 @@ devtools.mount(devToolRef.current)

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

24483

2.68%

Lines of code

382

5.23%

Worsened metrics

Number of low supply chain risk alerts

2

100%

Dependency changes

• + Added

  @solid-primitives/resize-observer@2.1.5
  (transitive)

• + Added

  @solid-primitives/static-store@0.1.3
  (transitive)

• + Added

  @tanstack/devtools@0.6.21
  (transitive)

• + Added

  @tanstack/devtools-client@0.0.3
  (transitive)

• + Added

  @tanstack/devtools-event-client@0.3.5
  (transitive)

• + Added

  @tanstack/devtools-ui@0.4.3
  (transitive)

• - Removed

  @tanstack/devtools@0.6.20
  (transitive)

• - Removed

  @tanstack/devtools-ui@0.4.2
  (transitive)

• Updated

  @tanstack/devtools@0.6.21