@tanstack/react-devtools 0.3.0 → 0.4.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +7 -7
- package/dist/cjs/devtools.cjs +3 -3
- package/dist/cjs/devtools.cjs.map +1 -1
- package/dist/cjs/devtools.d.cts +2 -2
- package/dist/cjs/index.cjs +1 -1
- package/dist/esm/devtools.d.ts +2 -2
- package/dist/esm/devtools.js +3 -3
- package/dist/esm/devtools.js.map +1 -1
- package/dist/esm/index.js +2 -2
- package/package.json +2 -2
- package/src/devtools.tsx +3 -3
package/README.md
CHANGED
|
@@ -5,7 +5,7 @@ This package is still under active development and might have breaking changes i
|
|
|
5
5
|
## Usage
|
|
6
6
|
|
|
7
7
|
```tsx
|
|
8
|
-
import {
|
|
8
|
+
import { TanStackDevtools } from '@tanstack/react-devtools'
|
|
9
9
|
import { ReactQueryDevtoolsPanel } from '@tanstack/react-query-devtools'
|
|
10
10
|
import { TanStackRouterDevtoolsPanel } from '@tanstack/react-router-devtools'
|
|
11
11
|
import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
|
|
@@ -14,14 +14,14 @@ function App() {
|
|
|
14
14
|
return (
|
|
15
15
|
<QueryClientProvider client={queryClient}>
|
|
16
16
|
<h1>My App</h1>
|
|
17
|
-
<
|
|
17
|
+
<TanStackDevtools
|
|
18
18
|
plugins={[
|
|
19
19
|
{
|
|
20
|
-
name: '
|
|
20
|
+
name: 'TanStack Query',
|
|
21
21
|
render: <ReactQueryDevtoolsPanel />,
|
|
22
22
|
},
|
|
23
23
|
{
|
|
24
|
-
name: '
|
|
24
|
+
name: 'TanStack Router',
|
|
25
25
|
render: <TanStackRouterDevtoolsPanel router={router} />,
|
|
26
26
|
},
|
|
27
27
|
]}
|
|
@@ -33,16 +33,16 @@ function App() {
|
|
|
33
33
|
|
|
34
34
|
## Creating plugins
|
|
35
35
|
|
|
36
|
-
In order to create a plugin for TanStack Devtools, you can use the `plugins` prop of the `
|
|
36
|
+
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:
|
|
37
37
|
|
|
38
38
|
```tsx
|
|
39
|
-
import {
|
|
39
|
+
import { TanStackDevtools } from '@tanstack/react-devtools'
|
|
40
40
|
|
|
41
41
|
function App() {
|
|
42
42
|
return (
|
|
43
43
|
<div>
|
|
44
44
|
<h1>My App</h1>
|
|
45
|
-
<
|
|
45
|
+
<TanStackDevtools
|
|
46
46
|
plugins={[
|
|
47
47
|
{
|
|
48
48
|
id: 'your-plugin-id',
|
package/dist/cjs/devtools.cjs
CHANGED
|
@@ -7,7 +7,7 @@ const reactDom = require("react-dom");
|
|
|
7
7
|
const convertRender = (Component, setComponent) => {
|
|
8
8
|
setComponent(typeof Component === "function" ? Component() : Component);
|
|
9
9
|
};
|
|
10
|
-
const
|
|
10
|
+
const TanStackDevtools = ({
|
|
11
11
|
plugins,
|
|
12
12
|
config,
|
|
13
13
|
eventBusConfig
|
|
@@ -57,10 +57,10 @@ const TanstackDevtools = ({
|
|
|
57
57
|
return () => devtools$1.unmount();
|
|
58
58
|
}, [devtools$1]);
|
|
59
59
|
return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
|
|
60
|
-
/* @__PURE__ */ jsxRuntime.jsx("div", { style: {
|
|
60
|
+
/* @__PURE__ */ jsxRuntime.jsx("div", { style: { position: "absolute" }, ref: devToolRef }),
|
|
61
61
|
pluginContainer && PluginComponent ? reactDom.createPortal(/* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: PluginComponent }), pluginContainer) : null,
|
|
62
62
|
titleContainer && TitleComponent ? reactDom.createPortal(/* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: TitleComponent }), titleContainer) : null
|
|
63
63
|
] });
|
|
64
64
|
};
|
|
65
|
-
exports.
|
|
65
|
+
exports.TanStackDevtools = TanStackDevtools;
|
|
66
66
|
//# sourceMappingURL=devtools.cjs.map
|
|
@@ -1 +1 @@
|
|
|
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 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 * <
|
|
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 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) => {\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 () => {\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 () => 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":["useRef","useState","devtools","TanStackDevtoolsCore","PLUGIN_TITLE_CONTAINER_ID","PLUGIN_CONTAINER_ID","useEffect","jsxs","Fragment","jsx","createPortal"],"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,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;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,MAAMA,WAAS,QAAA;AAAA,EACxB,GAAG,CAACA,UAAQ,CAAC;AAEb,SACEK,2BAAAA,KAAAC,qBAAA,EACE,UAAA;AAAA,IAAAC,+BAAC,SAAI,OAAO,EAAE,UAAU,WAAA,GAAc,KAAK,YAAY;AAAA,IACtD,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;;"}
|
package/dist/cjs/devtools.d.cts
CHANGED
|
@@ -49,7 +49,7 @@ export interface TanStackDevtoolsReactInit {
|
|
|
49
49
|
*
|
|
50
50
|
* Example:
|
|
51
51
|
* ```jsx
|
|
52
|
-
* <
|
|
52
|
+
* <TanStackDevtools
|
|
53
53
|
* plugins={[
|
|
54
54
|
* {
|
|
55
55
|
* id: "your-plugin-id",
|
|
@@ -72,5 +72,5 @@ export interface TanStackDevtoolsReactInit {
|
|
|
72
72
|
*/
|
|
73
73
|
eventBusConfig?: ClientEventBusConfig;
|
|
74
74
|
}
|
|
75
|
-
export declare const
|
|
75
|
+
export declare const TanStackDevtools: ({ plugins, config, eventBusConfig, }: TanStackDevtoolsReactInit) => JSX.Element;
|
|
76
76
|
export {};
|
package/dist/cjs/index.cjs
CHANGED
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
|
|
3
3
|
const devtools$1 = require("@tanstack/devtools");
|
|
4
4
|
const devtools = require("./devtools.cjs");
|
|
5
|
-
exports.
|
|
5
|
+
exports.TanStackDevtools = devtools.TanStackDevtools;
|
|
6
6
|
Object.keys(devtools$1).forEach((k) => {
|
|
7
7
|
if (k !== "default" && !Object.prototype.hasOwnProperty.call(exports, k)) Object.defineProperty(exports, k, {
|
|
8
8
|
enumerable: true,
|
package/dist/esm/devtools.d.ts
CHANGED
|
@@ -49,7 +49,7 @@ export interface TanStackDevtoolsReactInit {
|
|
|
49
49
|
*
|
|
50
50
|
* Example:
|
|
51
51
|
* ```jsx
|
|
52
|
-
* <
|
|
52
|
+
* <TanStackDevtools
|
|
53
53
|
* plugins={[
|
|
54
54
|
* {
|
|
55
55
|
* id: "your-plugin-id",
|
|
@@ -72,5 +72,5 @@ export interface TanStackDevtoolsReactInit {
|
|
|
72
72
|
*/
|
|
73
73
|
eventBusConfig?: ClientEventBusConfig;
|
|
74
74
|
}
|
|
75
|
-
export declare const
|
|
75
|
+
export declare const TanStackDevtools: ({ plugins, config, eventBusConfig, }: TanStackDevtoolsReactInit) => JSX.Element;
|
|
76
76
|
export {};
|
package/dist/esm/devtools.js
CHANGED
|
@@ -5,7 +5,7 @@ import { createPortal } from "react-dom";
|
|
|
5
5
|
const convertRender = (Component, setComponent) => {
|
|
6
6
|
setComponent(typeof Component === "function" ? Component() : Component);
|
|
7
7
|
};
|
|
8
|
-
const
|
|
8
|
+
const TanStackDevtools = ({
|
|
9
9
|
plugins,
|
|
10
10
|
config,
|
|
11
11
|
eventBusConfig
|
|
@@ -55,12 +55,12 @@ const TanstackDevtools = ({
|
|
|
55
55
|
return () => devtools.unmount();
|
|
56
56
|
}, [devtools]);
|
|
57
57
|
return /* @__PURE__ */ jsxs(Fragment, { children: [
|
|
58
|
-
/* @__PURE__ */ jsx("div", { style: {
|
|
58
|
+
/* @__PURE__ */ jsx("div", { style: { position: "absolute" }, ref: devToolRef }),
|
|
59
59
|
pluginContainer && PluginComponent ? createPortal(/* @__PURE__ */ jsx(Fragment, { children: PluginComponent }), pluginContainer) : null,
|
|
60
60
|
titleContainer && TitleComponent ? createPortal(/* @__PURE__ */ jsx(Fragment, { children: TitleComponent }), titleContainer) : null
|
|
61
61
|
] });
|
|
62
62
|
};
|
|
63
63
|
export {
|
|
64
|
-
|
|
64
|
+
TanStackDevtools
|
|
65
65
|
};
|
|
66
66
|
//# sourceMappingURL=devtools.js.map
|
package/dist/esm/devtools.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
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 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 * <
|
|
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 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) => {\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 () => {\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 () => 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,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;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,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/dist/esm/index.js
CHANGED
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@tanstack/react-devtools",
|
|
3
|
-
"version": "0.
|
|
3
|
+
"version": "0.4.0",
|
|
4
4
|
"description": "TanStack Devtools is a set of tools for building advanced devtools for your React application.",
|
|
5
5
|
"author": "Tanner Linsley",
|
|
6
6
|
"license": "MIT",
|
|
@@ -44,7 +44,7 @@
|
|
|
44
44
|
"src"
|
|
45
45
|
],
|
|
46
46
|
"dependencies": {
|
|
47
|
-
"@tanstack/devtools": "0.
|
|
47
|
+
"@tanstack/devtools": "0.4.0"
|
|
48
48
|
},
|
|
49
49
|
"devDependencies": {
|
|
50
50
|
"@eslint-react/eslint-plugin": "^1.48.5",
|
package/src/devtools.tsx
CHANGED
|
@@ -66,7 +66,7 @@ export interface TanStackDevtoolsReactInit {
|
|
|
66
66
|
*
|
|
67
67
|
* Example:
|
|
68
68
|
* ```jsx
|
|
69
|
-
* <
|
|
69
|
+
* <TanStackDevtools
|
|
70
70
|
* plugins={[
|
|
71
71
|
* {
|
|
72
72
|
* id: "your-plugin-id",
|
|
@@ -97,7 +97,7 @@ const convertRender = (
|
|
|
97
97
|
setComponent(typeof Component === 'function' ? Component() : Component)
|
|
98
98
|
}
|
|
99
99
|
|
|
100
|
-
export const
|
|
100
|
+
export const TanStackDevtools = ({
|
|
101
101
|
plugins,
|
|
102
102
|
config,
|
|
103
103
|
eventBusConfig,
|
|
@@ -153,7 +153,7 @@ export const TanstackDevtools = ({
|
|
|
153
153
|
|
|
154
154
|
return (
|
|
155
155
|
<>
|
|
156
|
-
<div style={{
|
|
156
|
+
<div style={{ position: 'absolute' }} ref={devToolRef} />
|
|
157
157
|
{pluginContainer && PluginComponent
|
|
158
158
|
? createPortal(<>{PluginComponent}</>, pluginContainer)
|
|
159
159
|
: null}
|