@tanstack/react-router-devtools 1.119.0 → 1.120.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/dist/cjs/TanStackRouterDevtoolsPanel.cjs +1 -1
- package/dist/cjs/TanStackRouterDevtoolsPanel.cjs.map +1 -1
- package/dist/esm/TanStackRouterDevtoolsPanel.js +1 -1
- package/dist/esm/TanStackRouterDevtoolsPanel.js.map +1 -1
- package/package.json +2 -2
- package/src/TanStackRouterDevtoolsPanel.tsx +1 -1
|
@@ -6,7 +6,7 @@ const routerDevtoolsCore = require("@tanstack/router-devtools-core");
|
|
|
6
6
|
const react = require("react");
|
|
7
7
|
const TanStackRouterDevtoolsPanel = (props) => {
|
|
8
8
|
const { router: propsRouter, ...rest } = props;
|
|
9
|
-
const hookRouter = reactRouter.useRouter({ warn:
|
|
9
|
+
const hookRouter = reactRouter.useRouter({ warn: false });
|
|
10
10
|
const activeRouter = propsRouter ?? hookRouter;
|
|
11
11
|
const activeRouterState = reactRouter.useRouterState({ router: activeRouter });
|
|
12
12
|
const devToolRef = react.useRef(null);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"TanStackRouterDevtoolsPanel.cjs","sources":["../../src/TanStackRouterDevtoolsPanel.tsx"],"sourcesContent":["import { useRouter, useRouterState } from '@tanstack/react-router'\nimport { TanStackRouterDevtoolsPanelCore } from '@tanstack/router-devtools-core'\nimport React, { useEffect, useRef, useState } from 'react'\nimport type { AnyRouter } from '@tanstack/react-router'\n\nexport interface DevtoolsPanelOptions {\n /**\n * The standard React style object used to style a component with inline styles\n */\n style?: any\n /**\n * The standard React class property used to style a component with classes\n */\n className?: string\n /**\n * A boolean variable indicating whether the panel is open or closed\n */\n isOpen?: boolean\n /**\n * A function that toggles the open and close state of the panel\n */\n setIsOpen?: (isOpen: boolean) => void\n /**\n * Handles the opening and closing the devtools panel\n */\n handleDragStart?: (e: any) => void\n /**\n * A boolean variable indicating if the \"lite\" version of the library is being used\n */\n router?: AnyRouter\n /**\n * Use this to attach the devtool's styles to specific element in the DOM.\n */\n shadowDOMTarget?: ShadowRoot\n}\n\nexport const TanStackRouterDevtoolsPanel: React.FC<DevtoolsPanelOptions> = (\n props,\n): React.ReactElement | null => {\n const { router: propsRouter, ...rest } = props\n const hookRouter = useRouter({ warn:
|
|
1
|
+
{"version":3,"file":"TanStackRouterDevtoolsPanel.cjs","sources":["../../src/TanStackRouterDevtoolsPanel.tsx"],"sourcesContent":["import { useRouter, useRouterState } from '@tanstack/react-router'\nimport { TanStackRouterDevtoolsPanelCore } from '@tanstack/router-devtools-core'\nimport React, { useEffect, useRef, useState } from 'react'\nimport type { AnyRouter } from '@tanstack/react-router'\n\nexport interface DevtoolsPanelOptions {\n /**\n * The standard React style object used to style a component with inline styles\n */\n style?: any\n /**\n * The standard React class property used to style a component with classes\n */\n className?: string\n /**\n * A boolean variable indicating whether the panel is open or closed\n */\n isOpen?: boolean\n /**\n * A function that toggles the open and close state of the panel\n */\n setIsOpen?: (isOpen: boolean) => void\n /**\n * Handles the opening and closing the devtools panel\n */\n handleDragStart?: (e: any) => void\n /**\n * A boolean variable indicating if the \"lite\" version of the library is being used\n */\n router?: AnyRouter\n /**\n * Use this to attach the devtool's styles to specific element in the DOM.\n */\n shadowDOMTarget?: ShadowRoot\n}\n\nexport const TanStackRouterDevtoolsPanel: React.FC<DevtoolsPanelOptions> = (\n props,\n): React.ReactElement | null => {\n const { router: propsRouter, ...rest } = props\n const hookRouter = useRouter({ warn: false })\n const activeRouter = propsRouter ?? hookRouter\n const activeRouterState = useRouterState({ router: activeRouter })\n\n const devToolRef = useRef<HTMLDivElement>(null)\n const [devtools] = useState(\n () =>\n new TanStackRouterDevtoolsPanelCore({\n ...rest,\n router: activeRouter,\n routerState: activeRouterState,\n }),\n )\n\n // Update devtools when props change\n useEffect(() => {\n devtools.setRouter(activeRouter)\n }, [devtools, activeRouter])\n\n useEffect(() => {\n devtools.setRouterState(activeRouterState)\n }, [devtools, activeRouterState])\n\n useEffect(() => {\n devtools.setOptions({\n className: props.className,\n style: props.style,\n shadowDOMTarget: props.shadowDOMTarget,\n })\n }, [devtools, props.className, props.style, props.shadowDOMTarget])\n\n useEffect(() => {\n if (devToolRef.current) {\n devtools.mount(devToolRef.current)\n }\n\n return () => {\n devtools.unmount()\n }\n }, [devtools])\n\n return (\n <>\n <div ref={devToolRef} />\n </>\n )\n}\n"],"names":["useRouter","useRouterState","useRef","useState","TanStackRouterDevtoolsPanelCore","useEffect","jsx","Fragment"],"mappings":";;;;;;AAoCa,MAAA,8BAA8D,CACzE,UAC8B;AAC9B,QAAM,EAAE,QAAQ,aAAa,GAAG,KAAS,IAAA;AACzC,QAAM,aAAaA,YAAA,UAAU,EAAE,MAAM,OAAO;AAC5C,QAAM,eAAe,eAAe;AACpC,QAAM,oBAAoBC,YAAA,eAAe,EAAE,QAAQ,cAAc;AAE3D,QAAA,aAAaC,aAAuB,IAAI;AACxC,QAAA,CAAC,QAAQ,IAAIC,MAAA;AAAA,IACjB,MACE,IAAIC,mBAAAA,gCAAgC;AAAA,MAClC,GAAG;AAAA,MACH,QAAQ;AAAA,MACR,aAAa;AAAA,IACd,CAAA;AAAA,EACL;AAGAC,QAAAA,UAAU,MAAM;AACd,aAAS,UAAU,YAAY;AAAA,EAAA,GAC9B,CAAC,UAAU,YAAY,CAAC;AAE3BA,QAAAA,UAAU,MAAM;AACd,aAAS,eAAe,iBAAiB;AAAA,EAAA,GACxC,CAAC,UAAU,iBAAiB,CAAC;AAEhCA,QAAAA,UAAU,MAAM;AACd,aAAS,WAAW;AAAA,MAClB,WAAW,MAAM;AAAA,MACjB,OAAO,MAAM;AAAA,MACb,iBAAiB,MAAM;AAAA,IAAA,CACxB;AAAA,EAAA,GACA,CAAC,UAAU,MAAM,WAAW,MAAM,OAAO,MAAM,eAAe,CAAC;AAElEA,QAAAA,UAAU,MAAM;AACd,QAAI,WAAW,SAAS;AACb,eAAA,MAAM,WAAW,OAAO;AAAA,IAAA;AAGnC,WAAO,MAAM;AACX,eAAS,QAAQ;AAAA,IACnB;AAAA,EAAA,GACC,CAAC,QAAQ,CAAC;AAEb,SAEIC,2BAAA,IAAAC,qBAAA,EAAA,UAAAD,2BAAAA,IAAC,OAAI,EAAA,KAAK,WAAY,CAAA,GACxB;AAEJ;;"}
|
|
@@ -4,7 +4,7 @@ import { TanStackRouterDevtoolsPanelCore } from "@tanstack/router-devtools-core"
|
|
|
4
4
|
import { useRef, useState, useEffect } from "react";
|
|
5
5
|
const TanStackRouterDevtoolsPanel = (props) => {
|
|
6
6
|
const { router: propsRouter, ...rest } = props;
|
|
7
|
-
const hookRouter = useRouter({ warn:
|
|
7
|
+
const hookRouter = useRouter({ warn: false });
|
|
8
8
|
const activeRouter = propsRouter ?? hookRouter;
|
|
9
9
|
const activeRouterState = useRouterState({ router: activeRouter });
|
|
10
10
|
const devToolRef = useRef(null);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"TanStackRouterDevtoolsPanel.js","sources":["../../src/TanStackRouterDevtoolsPanel.tsx"],"sourcesContent":["import { useRouter, useRouterState } from '@tanstack/react-router'\nimport { TanStackRouterDevtoolsPanelCore } from '@tanstack/router-devtools-core'\nimport React, { useEffect, useRef, useState } from 'react'\nimport type { AnyRouter } from '@tanstack/react-router'\n\nexport interface DevtoolsPanelOptions {\n /**\n * The standard React style object used to style a component with inline styles\n */\n style?: any\n /**\n * The standard React class property used to style a component with classes\n */\n className?: string\n /**\n * A boolean variable indicating whether the panel is open or closed\n */\n isOpen?: boolean\n /**\n * A function that toggles the open and close state of the panel\n */\n setIsOpen?: (isOpen: boolean) => void\n /**\n * Handles the opening and closing the devtools panel\n */\n handleDragStart?: (e: any) => void\n /**\n * A boolean variable indicating if the \"lite\" version of the library is being used\n */\n router?: AnyRouter\n /**\n * Use this to attach the devtool's styles to specific element in the DOM.\n */\n shadowDOMTarget?: ShadowRoot\n}\n\nexport const TanStackRouterDevtoolsPanel: React.FC<DevtoolsPanelOptions> = (\n props,\n): React.ReactElement | null => {\n const { router: propsRouter, ...rest } = props\n const hookRouter = useRouter({ warn:
|
|
1
|
+
{"version":3,"file":"TanStackRouterDevtoolsPanel.js","sources":["../../src/TanStackRouterDevtoolsPanel.tsx"],"sourcesContent":["import { useRouter, useRouterState } from '@tanstack/react-router'\nimport { TanStackRouterDevtoolsPanelCore } from '@tanstack/router-devtools-core'\nimport React, { useEffect, useRef, useState } from 'react'\nimport type { AnyRouter } from '@tanstack/react-router'\n\nexport interface DevtoolsPanelOptions {\n /**\n * The standard React style object used to style a component with inline styles\n */\n style?: any\n /**\n * The standard React class property used to style a component with classes\n */\n className?: string\n /**\n * A boolean variable indicating whether the panel is open or closed\n */\n isOpen?: boolean\n /**\n * A function that toggles the open and close state of the panel\n */\n setIsOpen?: (isOpen: boolean) => void\n /**\n * Handles the opening and closing the devtools panel\n */\n handleDragStart?: (e: any) => void\n /**\n * A boolean variable indicating if the \"lite\" version of the library is being used\n */\n router?: AnyRouter\n /**\n * Use this to attach the devtool's styles to specific element in the DOM.\n */\n shadowDOMTarget?: ShadowRoot\n}\n\nexport const TanStackRouterDevtoolsPanel: React.FC<DevtoolsPanelOptions> = (\n props,\n): React.ReactElement | null => {\n const { router: propsRouter, ...rest } = props\n const hookRouter = useRouter({ warn: false })\n const activeRouter = propsRouter ?? hookRouter\n const activeRouterState = useRouterState({ router: activeRouter })\n\n const devToolRef = useRef<HTMLDivElement>(null)\n const [devtools] = useState(\n () =>\n new TanStackRouterDevtoolsPanelCore({\n ...rest,\n router: activeRouter,\n routerState: activeRouterState,\n }),\n )\n\n // Update devtools when props change\n useEffect(() => {\n devtools.setRouter(activeRouter)\n }, [devtools, activeRouter])\n\n useEffect(() => {\n devtools.setRouterState(activeRouterState)\n }, [devtools, activeRouterState])\n\n useEffect(() => {\n devtools.setOptions({\n className: props.className,\n style: props.style,\n shadowDOMTarget: props.shadowDOMTarget,\n })\n }, [devtools, props.className, props.style, props.shadowDOMTarget])\n\n useEffect(() => {\n if (devToolRef.current) {\n devtools.mount(devToolRef.current)\n }\n\n return () => {\n devtools.unmount()\n }\n }, [devtools])\n\n return (\n <>\n <div ref={devToolRef} />\n </>\n )\n}\n"],"names":[],"mappings":";;;;AAoCa,MAAA,8BAA8D,CACzE,UAC8B;AAC9B,QAAM,EAAE,QAAQ,aAAa,GAAG,KAAS,IAAA;AACzC,QAAM,aAAa,UAAU,EAAE,MAAM,OAAO;AAC5C,QAAM,eAAe,eAAe;AACpC,QAAM,oBAAoB,eAAe,EAAE,QAAQ,cAAc;AAE3D,QAAA,aAAa,OAAuB,IAAI;AACxC,QAAA,CAAC,QAAQ,IAAI;AAAA,IACjB,MACE,IAAI,gCAAgC;AAAA,MAClC,GAAG;AAAA,MACH,QAAQ;AAAA,MACR,aAAa;AAAA,IACd,CAAA;AAAA,EACL;AAGA,YAAU,MAAM;AACd,aAAS,UAAU,YAAY;AAAA,EAAA,GAC9B,CAAC,UAAU,YAAY,CAAC;AAE3B,YAAU,MAAM;AACd,aAAS,eAAe,iBAAiB;AAAA,EAAA,GACxC,CAAC,UAAU,iBAAiB,CAAC;AAEhC,YAAU,MAAM;AACd,aAAS,WAAW;AAAA,MAClB,WAAW,MAAM;AAAA,MACjB,OAAO,MAAM;AAAA,MACb,iBAAiB,MAAM;AAAA,IAAA,CACxB;AAAA,EAAA,GACA,CAAC,UAAU,MAAM,WAAW,MAAM,OAAO,MAAM,eAAe,CAAC;AAElE,YAAU,MAAM;AACd,QAAI,WAAW,SAAS;AACb,eAAA,MAAM,WAAW,OAAO;AAAA,IAAA;AAGnC,WAAO,MAAM;AACX,eAAS,QAAQ;AAAA,IACnB;AAAA,EAAA,GACC,CAAC,QAAQ,CAAC;AAEb,SAEI,oBAAA,UAAA,EAAA,UAAA,oBAAC,OAAI,EAAA,KAAK,WAAY,CAAA,GACxB;AAEJ;"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@tanstack/react-router-devtools",
|
|
3
|
-
"version": "1.
|
|
3
|
+
"version": "1.120.0",
|
|
4
4
|
"description": "Modern and scalable routing for React applications",
|
|
5
5
|
"author": "Tanner Linsley",
|
|
6
6
|
"license": "MIT",
|
|
@@ -60,7 +60,7 @@
|
|
|
60
60
|
"peerDependencies": {
|
|
61
61
|
"react": ">=18.0.0 || >=19.0.0",
|
|
62
62
|
"react-dom": ">=18.0.0 || >=19.0.0",
|
|
63
|
-
"@tanstack/react-router": "^1.
|
|
63
|
+
"@tanstack/react-router": "^1.120.0"
|
|
64
64
|
},
|
|
65
65
|
"scripts": {}
|
|
66
66
|
}
|
|
@@ -38,7 +38,7 @@ export const TanStackRouterDevtoolsPanel: React.FC<DevtoolsPanelOptions> = (
|
|
|
38
38
|
props,
|
|
39
39
|
): React.ReactElement | null => {
|
|
40
40
|
const { router: propsRouter, ...rest } = props
|
|
41
|
-
const hookRouter = useRouter({ warn:
|
|
41
|
+
const hookRouter = useRouter({ warn: false })
|
|
42
42
|
const activeRouter = propsRouter ?? hookRouter
|
|
43
43
|
const activeRouterState = useRouterState({ router: activeRouter })
|
|
44
44
|
|