@tanstack/react-devtools - npm Package Compare versions

Comparing version 0.7.11 to 0.8.0

dist/esm/devtools.d.ts

 import { JSX, ReactElement } from 'react';
 import { ClientEventBusConfig, TanStackDevtoolsConfig, TanStackDevtoolsPlugin } from '@tanstack/devtools';
 type PluginRender = JSX.Element | ((el: HTMLElement, theme: 'dark' | 'light') => JSX.Element);
+type TriggerProps = {
+    theme: 'dark' | 'light';
+};
+type TriggerRender = JSX.Element | ((el: HTMLElement, props: TriggerProps) => JSX.Element);
 export type TanStackDevtoolsReactPlugin = Omit<TanStackDevtoolsPlugin, 'render' | 'name'> & {
@@ -45,2 +49,16 @@ /**
 };
+type TanStackDevtoolsReactConfig = Omit<Partial<TanStackDevtoolsConfig>, 'customTrigger'> & {
+    /**
+     * Optional custom trigger component for the devtools.
+     * It can be a React element or a function that renders one.
+     *
+     * Example:
+     * ```jsx
+     *   {
+     *     customTrigger: <CustomTriggerComponent />,
+     *   }
+     * ```
+     */
+    customTrigger?: TriggerRender;
+};
 export interface TanStackDevtoolsReactInit {
@@ -70,3 +88,3 @@ /**
      */
-    config?: Partial<TanStackDevtoolsConfig>;
+    config?: TanStackDevtoolsReactConfig;
     /**
@@ -73,0 +91,0 @@ * Configuration for the TanStack Devtools client event bus.

dist/esm/devtools.js

@@ -12,2 +12,6 @@ import { jsxs, Fragment, jsx } from "react/jsx-runtime";
 };
+const convertTrigger = (Component, setComponent, e, props) => {
+  const element = typeof Component === "function" ? Component(e, props) : Component;
+  setComponent(element);
+};
 const TanStackDevtools = ({
@@ -21,4 +25,10 @@ plugins,
   const [titleContainers, setTitleContainers] = useState({});
+  const [triggerContainer, setTriggerContainer] = useState(
+    null
+  );
   const [PluginComponents, setPluginComponents] = useState({});
   const [TitleComponents, setTitleComponents] = useState({});
+  const [TriggerComponent, setTriggerComponent] = useState(
+    null
+  );
   const pluginsMap = useMemo(
@@ -59,9 +69,16 @@ () => plugins?.map((plugin) => {
   );
-  const [devtools] = useState(
-    () => new TanStackDevtoolsCore({
-      config,
+  const [devtools] = useState(() => {
+    const { customTrigger, ...coreConfig } = config || {};
+    return new TanStackDevtoolsCore({
+      config: {
+        ...coreConfig,
+        customTrigger: customTrigger ? (el, props) => {
+          setTriggerContainer(el);
+          convertTrigger(customTrigger, setTriggerComponent, el, props);
+        } : void 0
+      },
       eventBusConfig,
       plugins: pluginsMap
-    })
-  );
+    });
+  });
   useEffect(() => {
@@ -87,3 +104,4 @@ devtools.setConfig({
       ([key, titleContainer]) => createPortal(/* @__PURE__ */ jsx(Fragment, { children: TitleComponents[key] }), titleContainer)
-    ) : null
+    ) : null,
+    triggerContainer && TriggerComponent ? createPortal(/* @__PURE__ */ jsx(Fragment, { children: TriggerComponent }), triggerContainer) : null
   ] });
@@ -90,0 +108,0 @@ };

dist/esm/devtools.js.map

@@ -1,1 +0,1 @@
-{"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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"}
+{"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\ntype TriggerProps = {\n  theme: 'dark' | 'light'\n}\n\ntype TriggerRender =\n  | JSX.Element\n  | ((el: HTMLElement, props: TriggerProps) => 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\ntype TanStackDevtoolsReactConfig = Omit<\n  Partial<TanStackDevtoolsConfig>,\n  'customTrigger'\n> & {\n  /**\n   * Optional custom trigger component for the devtools.\n   * It can be a React element or a function that renders one.\n   *\n   * Example:\n   * ```jsx\n   *   {\n   *     customTrigger: <CustomTriggerComponent />,\n   *   }\n   * ```\n   */\n  customTrigger?: TriggerRender\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?: TanStackDevtoolsReactConfig\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\nconst convertTrigger = (\n  Component: TriggerRender,\n  setComponent: React.Dispatch<React.SetStateAction<JSX.Element | null>>,\n  e: HTMLElement,\n  props: TriggerProps,\n) => {\n  const element =\n    typeof Component === 'function' ? Component(e, props) : Component\n  setComponent(element)\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  const [triggerContainer, setTriggerContainer] = useState<HTMLElement | null>(\n    null,\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  const [TriggerComponent, setTriggerComponent] = useState<JSX.Element | null>(\n    null,\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    const { customTrigger, ...coreConfig } = config || {}\n    return new TanStackDevtoolsCore({\n      config: {\n        ...coreConfig,\n        customTrigger: customTrigger\n          ? (el, props) => {\n              setTriggerContainer(el)\n              convertTrigger(customTrigger, setTriggerComponent, el, props)\n            }\n          : undefined,\n      },\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      {triggerContainer && TriggerComponent\n        ? createPortal(<>{TriggerComponent}</>, triggerContainer)\n        : null}\n    </>\n  )\n}\n"],"names":[],"mappings":"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"}

package.json

 {
   "name": "@tanstack/react-devtools",
-  "version": "0.7.11",
+  "version": "0.8.0",
   "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.7.0"
+    "@tanstack/devtools": "0.8.0"
   },
@@ -45,0 +45,0 @@ "devDependencies": {

src/devtools.tsx

@@ -15,2 +15,10 @@ import React, { useEffect, useMemo, useRef, useState } from 'react'
 
+type TriggerProps = {
+  theme: 'dark' | 'light'
+}
+
+type TriggerRender =
+  | JSX.Element
+  | ((el: HTMLElement, props: TriggerProps) => JSX.Element)
+
 export type TanStackDevtoolsReactPlugin = Omit<
@@ -61,2 +69,20 @@ TanStackDevtoolsPlugin,
 
+type TanStackDevtoolsReactConfig = Omit<
+  Partial<TanStackDevtoolsConfig>,
+  'customTrigger'
+> & {
+  /**
+   * Optional custom trigger component for the devtools.
+   * It can be a React element or a function that renders one.
+   *
+   * Example:
+   * ```jsx
+   *   {
+   *     customTrigger: <CustomTriggerComponent />,
+   *   }
+   * ```
+   */
+  customTrigger?: TriggerRender
+}
+
 export interface TanStackDevtoolsReactInit {
@@ -86,3 +112,3 @@ /**
    */
-  config?: Partial<TanStackDevtoolsConfig>
+  config?: TanStackDevtoolsReactConfig
   /**
@@ -111,2 +137,13 @@ * Configuration for the TanStack Devtools client event bus.
 
+const convertTrigger = (
+  Component: TriggerRender,
+  setComponent: React.Dispatch<React.SetStateAction<JSX.Element | null>>,
+  e: HTMLElement,
+  props: TriggerProps,
+) => {
+  const element =
+    typeof Component === 'function' ? Component(e, props) : Component
+  setComponent(element)
+}
+
 export const TanStackDevtools = ({
@@ -125,2 +162,5 @@ plugins,
   >({})
+  const [triggerContainer, setTriggerContainer] = useState<HTMLElement | null>(
+    null,
+  )
 
@@ -133,2 +173,5 @@ const [PluginComponents, setPluginComponents] = useState<
   >({})
+  const [TriggerComponent, setTriggerComponent] = useState<JSX.Element | null>(
+    null,
+  )
 
@@ -179,10 +222,18 @@ const pluginsMap: Array<TanStackDevtoolsPlugin> = useMemo(
 
-  const [devtools] = useState(
-    () =>
-      new TanStackDevtoolsCore({
-        config,
-        eventBusConfig,
-        plugins: pluginsMap,
-      }),
-  )
+  const [devtools] = useState(() => {
+    const { customTrigger, ...coreConfig } = config || {}
+    return new TanStackDevtoolsCore({
+      config: {
+        ...coreConfig,
+        customTrigger: customTrigger
+          ? (el, props) => {
+              setTriggerContainer(el)
+              convertTrigger(customTrigger, setTriggerComponent, el, props)
+            }
+          : undefined,
+      },
+      eventBusConfig,
+      plugins: pluginsMap,
+    })
+  })
 
@@ -225,4 +276,8 @@ useEffect(() => {
         : null}
+
+      {triggerContainer && TriggerComponent
+        ? createPortal(<>{TriggerComponent}</>, triggerContainer)
+        : null}
     </>
   )
 }

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

29171

19.15%

Lines of code

468

22.51%

Dependency changes

• + Added

  @tanstack/devtools@0.8.0
  (transitive)

• + Added

  @tanstack/devtools-client@0.0.4
  (transitive)

• - Removed

  @tanstack/devtools@0.7.0
  (transitive)

• - Removed

  @tanstack/devtools-client@0.0.3
  (transitive)

• Updated

  @tanstack/devtools@0.8.0