@tanstack/react-devtools - npm Package Compare versions

Comparing version 0.9.13 to 0.10.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);
+import { ClientEventBusConfig, TanStackDevtoolsConfig, TanStackDevtoolsPlugin, TanStackDevtoolsPluginProps, TanStackDevtoolsTheme } from '@tanstack/devtools';
+type PluginRender = JSX.Element | ((el: HTMLElement, props: TanStackDevtoolsPluginProps) => JSX.Element);
 type TriggerProps = {
-    theme: 'dark' | 'light';
+    theme: TanStackDevtoolsTheme;
 };
@@ -7,0 +7,0 @@ type TriggerRender = JSX.Element | ((el: HTMLElement, props: TriggerProps) => JSX.Element);

dist/esm/devtools.js

@@ -1,108 +0,81 @@
-import { jsxs, Fragment, jsx } from "react/jsx-runtime";
-import { useRef, useState, useMemo, useEffect } from "react";
+import { useEffect, useMemo, useRef, useState } from "react";
 import { TanStackDevtoolsCore } from "@tanstack/devtools";
 import { createPortal } from "react-dom";
-const convertRender = (Component, setComponents, e, theme) => {
-  const element = typeof Component === "function" ? Component(e, theme) : Component;
-  setComponents((prev) => ({
-    ...prev,
-    [e.getAttribute("id")]: element
-  }));
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+//#region src/devtools.tsx
+var convertRender = (Component, setComponents, e, props) => {
+	const element = typeof Component === "function" ? Component(e, props) : Component;
+	setComponents((prev) => ({
+		...prev,
+		[e.getAttribute("id")]: element
+	}));
 };
-const convertTrigger = (Component, setComponent, e, props) => {
-  const element = typeof Component === "function" ? Component(e, props) : Component;
-  setComponent(element);
+var convertTrigger = (Component, setComponent, e, props) => {
+	setComponent(typeof Component === "function" ? Component(e, props) : Component);
 };
-const TanStackDevtools = ({
-  plugins,
-  config,
-  eventBusConfig
-}) => {
-  const devToolRef = useRef(null);
-  const [pluginContainers, setPluginContainers] = useState({});
-  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(
-    () => 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(() => {
-    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(() => {
-    devtools.setConfig({
-      plugins: pluginsMap
-    });
-  }, [devtools, pluginsMap]);
-  useEffect(() => {
-    if (devToolRef.current) {
-      devtools.mount(devToolRef.current);
-    }
-    return () => devtools.unmount();
-  }, [devtools]);
-  const hasPlugins = Object.values(pluginContainers).length > 0 && Object.values(PluginComponents).length > 0;
-  const hasTitles = Object.values(titleContainers).length > 0 && Object.values(TitleComponents).length > 0;
-  return /* @__PURE__ */ jsxs(Fragment, { children: [
-    /* @__PURE__ */ jsx("div", { style: { position: "absolute" }, ref: devToolRef }),
-    hasPlugins ? Object.entries(pluginContainers).map(
-      ([key, pluginContainer]) => createPortal(/* @__PURE__ */ jsx(Fragment, { children: PluginComponents[key] }), pluginContainer)
-    ) : null,
-    hasTitles ? Object.entries(titleContainers).map(
-      ([key, titleContainer]) => createPortal(/* @__PURE__ */ jsx(Fragment, { children: TitleComponents[key] }), titleContainer)
-    ) : null,
-    triggerContainer && TriggerComponent ? createPortal(/* @__PURE__ */ jsx(Fragment, { children: TriggerComponent }), triggerContainer) : null
-  ] });
+var TanStackDevtools = ({ plugins, config, eventBusConfig }) => {
+	const devToolRef = useRef(null);
+	const [pluginContainers, setPluginContainers] = useState({});
+	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(() => plugins?.map((plugin) => {
+		return {
+			...plugin,
+			name: typeof plugin.name === "string" ? plugin.name : (e, props) => {
+				const id = e.getAttribute("id");
+				if (e.ownerDocument.getElementById(id)) setTitleContainers((prev) => ({
+					...prev,
+					[id]: e
+				}));
+				convertRender(plugin.name, setTitleComponents, e, props);
+			},
+			render: (e, theme) => {
+				const id = e.getAttribute("id");
+				if (e.ownerDocument.getElementById(id)) setPluginContainers((prev) => ({
+					...prev,
+					[id]: e
+				}));
+				convertRender(plugin.render, setPluginComponents, e, theme);
+			}
+		};
+	}) ?? [], [plugins]);
+	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(() => {
+		devtools.setConfig({ plugins: pluginsMap });
+	}, [devtools, pluginsMap]);
+	useEffect(() => {
+		if (devToolRef.current) devtools.mount(devToolRef.current);
+		return () => devtools.unmount();
+	}, [devtools]);
+	const hasPlugins = Object.values(pluginContainers).length > 0 && Object.values(PluginComponents).length > 0;
+	const hasTitles = Object.values(titleContainers).length > 0 && Object.values(TitleComponents).length > 0;
+	return /* @__PURE__ */ jsxs(Fragment, { children: [
+		/* @__PURE__ */ jsx("div", {
+			style: { position: "absolute" },
+			ref: devToolRef
+		}),
+		hasPlugins ? Object.entries(pluginContainers).map(([key, pluginContainer]) => createPortal(/* @__PURE__ */ jsx(Fragment, { children: PluginComponents[key] }), pluginContainer)) : null,
+		hasTitles ? Object.entries(titleContainers).map(([key, titleContainer]) => createPortal(/* @__PURE__ */ jsx(Fragment, { children: TitleComponents[key] }), titleContainer)) : null,
+		triggerContainer && TriggerComponent ? createPortal(/* @__PURE__ */ jsx(Fragment, { children: TriggerComponent }), triggerContainer) : null
+	] });
 };
-export {
-  TanStackDevtools
-};
-//# sourceMappingURL=devtools.js.map
+//#endregion
+export { 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, 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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"}
+{"version":3,"file":"devtools.js","names":[],"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  TanStackDevtoolsPluginProps,\n  TanStackDevtoolsTheme,\n} from '@tanstack/devtools'\n\ntype PluginRender =\n  | JSX.Element\n  | ((el: HTMLElement, props: TanStackDevtoolsPluginProps) => JSX.Element)\n\ntype TriggerProps = {\n  theme: TanStackDevtoolsTheme\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  props: TanStackDevtoolsPluginProps,\n) => {\n  const element =\n    typeof Component === 'function' ? Component(e, props) : 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, props) => {\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                    props,\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"],"mappings":";;;;;AAsHA,IAAM,iBACJ,WACA,eAGA,GACA,UACG;CACH,MAAM,UACJ,OAAO,cAAc,aAAa,UAAU,GAAG,MAAM,GAAG;AAE1D,gBAAe,UAAU;EACvB,GAAG;GACF,EAAE,aAAa,KAAK,GAAa;EACnC,EAAE;;AAGL,IAAM,kBACJ,WACA,cACA,GACA,UACG;AAGH,cADE,OAAO,cAAc,aAAa,UAAU,GAAG,MAAM,GAAG,UACrC;;AAGvB,IAAa,oBAAoB,EAC/B,SACA,QACA,qBACoD;CACpD,MAAM,aAAa,OAAuB,KAAK;CAE/C,MAAM,CAAC,kBAAkB,uBAAuB,SAE9C,EAAE,CAAC;CACL,MAAM,CAAC,iBAAiB,sBAAsB,SAE5C,EAAE,CAAC;CACL,MAAM,CAAC,kBAAkB,uBAAuB,SAC9C,KACD;CAED,MAAM,CAAC,kBAAkB,uBAAuB,SAE9C,EAAE,CAAC;CACL,MAAM,CAAC,iBAAiB,sBAAsB,SAE5C,EAAE,CAAC;CACL,MAAM,CAAC,kBAAkB,uBAAuB,SAC9C,KACD;CAED,MAAM,aAA4C,cAE9C,SAAS,KAAK,WAAW;AACvB,SAAO;GACL,GAAG;GACH,MACE,OAAO,OAAO,SAAS,WACnB,OAAO,QACN,GAAG,UAAU;IACZ,MAAM,KAAK,EAAE,aAAa,KAAK;AAG/B,QAFe,EAAE,cAAc,eAAe,GAAG,CAG/C,qBAAoB,UAAU;KAC5B,GAAG;MACF,KAAK;KACP,EAAE;AAGL,kBACE,OAAO,MACP,oBACA,GACA,MACD;;GAET,SAAS,GAAG,UAAU;IACpB,MAAM,KAAK,EAAE,aAAa,KAAK;AAG/B,QAFe,EAAE,cAAc,eAAe,GAAG,CAG/C,sBAAqB,UAAU;KAC7B,GAAG;MACF,KAAK;KACP,EAAE;AAGL,kBAAc,OAAO,QAAQ,qBAAqB,GAAG,MAAM;;GAE9D;GACD,IAAI,EAAE,EACV,CAAC,QAAQ,CACV;CAED,MAAM,CAAC,YAAY,eAAe;EAChC,MAAM,EAAE,eAAe,GAAG,eAAe,UAAU,EAAE;AACrD,SAAO,IAAI,qBAAqB;GAC9B,QAAQ;IACN,GAAG;IACH,eAAe,iBACV,IAAI,UAAU;AACb,yBAAoB,GAAG;AACvB,oBAAe,eAAe,qBAAqB,IAAI,MAAM;QAE/D,KAAA;IACL;GACD;GACA,SAAS;GACV,CAAC;GACF;AAEF,iBAAgB;AACd,WAAS,UAAU,EACjB,SAAS,YACV,CAAC;IACD,CAAC,UAAU,WAAW,CAAC;AAE1B,iBAAgB;AACd,MAAI,WAAW,QACb,UAAS,MAAM,WAAW,QAAQ;AAGpC,eAAa,SAAS,SAAS;IAC9B,CAAC,SAAS,CAAC;CAEd,MAAM,aACJ,OAAO,OAAO,iBAAiB,CAAC,SAAS,KACzC,OAAO,OAAO,iBAAiB,CAAC,SAAS;CAC3C,MAAM,YACJ,OAAO,OAAO,gBAAgB,CAAC,SAAS,KACxC,OAAO,OAAO,gBAAgB,CAAC,SAAS;AAE1C,QACE,qBAAA,UAAA,EAAA,UAAA;EACE,oBAAC,OAAD;GAAK,OAAO,EAAE,UAAU,YAAY;GAAE,KAAK;GAAc,CAAA;EAExD,aACG,OAAO,QAAQ,iBAAiB,CAAC,KAAK,CAAC,KAAK,qBAC1C,aAAa,oBAAA,UAAA,EAAA,UAAG,iBAAiB,MAAQ,CAAA,EAAE,gBAAgB,CAC5D,GACD;EAEH,YACG,OAAO,QAAQ,gBAAgB,CAAC,KAAK,CAAC,KAAK,oBACzC,aAAa,oBAAA,UAAA,EAAA,UAAG,gBAAgB,MAAQ,CAAA,EAAE,eAAe,CAC1D,GACD;EAEH,oBAAoB,mBACjB,aAAa,oBAAA,UAAA,EAAA,UAAG,kBAAoB,CAAA,EAAE,iBAAiB,GACvD;EACH,EAAA,CAAA"}

dist/esm/index.js

 "use client";
+"use client";
 import { TanStackDevtools as TanStackDevtools$1 } from "./devtools.js";
-const TanStackDevtools = TanStackDevtools$1;
-export {
-  TanStackDevtools
-};
-//# sourceMappingURL=index.js.map
+//#region src/index.ts
+var TanStackDevtools = TanStackDevtools$1;
+//#endregion
+export { TanStackDevtools };
+
+//# sourceMappingURL=index.js.map

dist/esm/index.js.map

@@ -1,1 +0,1 @@
-{"version":3,"file":"index.js","sources":["../../src/index.ts"],"sourcesContent":["'use client'\n\nimport * as Devtools from './devtools'\n\nexport const TanStackDevtools = Devtools.TanStackDevtools\n\nexport type {\n  TanStackDevtoolsReactPlugin,\n  TanStackDevtoolsReactInit,\n} from './devtools'\n"],"names":[],"mappings":";;AAIO;;;;"}
+{"version":3,"file":"index.js","names":[],"sources":["../../src/index.ts"],"sourcesContent":["'use client'\n\nimport * as Devtools from './devtools'\n\nexport const TanStackDevtools = Devtools.TanStackDevtools\n\nexport type {\n  TanStackDevtoolsReactPlugin,\n  TanStackDevtoolsReactInit,\n} from './devtools'\n"],"mappings":";;;;AAIA,IAAA,mBAAA"}

package.json

 {
   "name": "@tanstack/react-devtools",
-  "version": "0.9.13",
+  "version": "0.10.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.10.14"
+    "@tanstack/devtools": "0.11.0"
   },
@@ -48,3 +48,3 @@ "devDependencies": {
     "@types/react": "^19.2.0",
-    "@vitejs/plugin-react": "^5.0.4",
+    "@vitejs/plugin-react": "^6.0.1",
     "eslint-plugin-react-compiler": "19.1.0-rc.2",
@@ -51,0 +51,0 @@ "eslint-plugin-react-hooks": "^7.0.1",

src/devtools.tsx

@@ -9,2 +9,4 @@ import React, { useEffect, useMemo, useRef, useState } from 'react'
   TanStackDevtoolsPlugin,
+  TanStackDevtoolsPluginProps,
+  TanStackDevtoolsTheme,
 } from '@tanstack/devtools'
@@ -14,6 +16,6 @@
   | JSX.Element
-  | ((el: HTMLElement, theme: 'dark' | 'light') => JSX.Element)
+  | ((el: HTMLElement, props: TanStackDevtoolsPluginProps) => JSX.Element)
 
 type TriggerProps = {
-  theme: 'dark' | 'light'
+  theme: TanStackDevtoolsTheme
 }
@@ -125,6 +127,6 @@
   e: HTMLElement,
-  theme: 'dark' | 'light',
+  props: TanStackDevtoolsPluginProps,
 ) => {
   const element =
-    typeof Component === 'function' ? Component(e, theme) : Component
+    typeof Component === 'function' ? Component(e, props) : Component
 
@@ -183,3 +185,3 @@ setComponents((prev) => ({
               ? plugin.name
-              : (e, theme) => {
+              : (e, props) => {
                   const id = e.getAttribute('id')!
@@ -199,3 +201,3 @@ const target = e.ownerDocument.getElementById(id)
                     e,
-                    theme,
+                    props,
                   )
@@ -202,0 +204,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

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

Worsened metrics

Total package byte prevSize

28478

-2.4%

Lines of code

441

-5.77%

Dependency changes

• + Added

  @tanstack/devtools@0.11.0
  (transitive)

• + Added

  @tanstack/devtools-ui@0.5.1
  (transitive)

• - Removed

  @tanstack/devtools@0.10.14
  (transitive)

• - Removed

  @tanstack/devtools-ui@0.5.0
  (transitive)

• Updated

  @tanstack/devtools@0.11.0