🚨 Active Supply Chain Attack:node-ipc Package Compromised.Learn More
Socket
Book a DemoSign in
Socket

@tanstack/react-router-devtools

Package Overview
Dependencies
Maintainers
6
Versions
435
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

@tanstack/react-router-devtools - npm Package Compare versions

Comparing version
1.166.8
to
1.166.9
+23
dist/cjs/_virtual/_rolldown/runtime.cjs
//#region \0rolldown/runtime.js
var __create = Object.create;
var __defProp = Object.defineProperty;
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
var __getOwnPropNames = Object.getOwnPropertyNames;
var __getProtoOf = Object.getPrototypeOf;
var __hasOwnProp = Object.prototype.hasOwnProperty;
var __copyProps = (to, from, except, desc) => {
if (from && typeof from === "object" || typeof from === "function") for (var keys = __getOwnPropNames(from), i = 0, n = keys.length, key; i < n; i++) {
key = keys[i];
if (!__hasOwnProp.call(to, key) && key !== except) __defProp(to, key, {
get: ((k) => from[k]).bind(null, key),
enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable
});
}
return to;
};
var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", {
value: mod,
enumerable: true
}) : target, mod));
//#endregion
exports.__toESM = __toESM;
+14
-12

@@ -1,13 +0,14 @@

"use strict";
Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
const TanStackRouterDevtools$1 = require("./TanStackRouterDevtools.cjs");
const TanStackRouterDevtoolsPanel$1 = require("./TanStackRouterDevtoolsPanel.cjs");
const TanStackRouterDevtools = process.env.NODE_ENV !== "development" ? function() {
return null;
} : TanStackRouterDevtools$1.TanStackRouterDevtools;
const TanStackRouterDevtoolsInProd = TanStackRouterDevtools$1.TanStackRouterDevtools;
const TanStackRouterDevtoolsPanel = process.env.NODE_ENV !== "development" ? function() {
return null;
} : TanStackRouterDevtoolsPanel$1.TanStackRouterDevtoolsPanel;
const TanStackRouterDevtoolsPanelInProd = TanStackRouterDevtoolsPanel$1.TanStackRouterDevtoolsPanel;
const require_TanStackRouterDevtools = require("./TanStackRouterDevtools.cjs");
const require_TanStackRouterDevtoolsPanel = require("./TanStackRouterDevtoolsPanel.cjs");
//#region src/index.ts
var TanStackRouterDevtools = process.env.NODE_ENV !== "development" ? function() {
return null;
} : require_TanStackRouterDevtools.TanStackRouterDevtools;
var TanStackRouterDevtoolsInProd = require_TanStackRouterDevtools.TanStackRouterDevtools;
var TanStackRouterDevtoolsPanel = process.env.NODE_ENV !== "development" ? function() {
return null;
} : require_TanStackRouterDevtoolsPanel.TanStackRouterDevtoolsPanel;
var TanStackRouterDevtoolsPanelInProd = require_TanStackRouterDevtoolsPanel.TanStackRouterDevtoolsPanel;
//#endregion
exports.TanStackRouterDevtools = TanStackRouterDevtools;

@@ -17,2 +18,3 @@ exports.TanStackRouterDevtoolsInProd = TanStackRouterDevtoolsInProd;

exports.TanStackRouterDevtoolsPanelInProd = TanStackRouterDevtoolsPanelInProd;
//# sourceMappingURL=index.cjs.map
//# sourceMappingURL=index.cjs.map

@@ -1,1 +0,1 @@

{"version":3,"file":"index.cjs","sources":["../../src/index.ts"],"sourcesContent":["import * as Devtools from './TanStackRouterDevtools'\nimport * as DevtoolsPanel from './TanStackRouterDevtoolsPanel'\n\nexport const TanStackRouterDevtools: (typeof Devtools)['TanStackRouterDevtools'] =\n process.env.NODE_ENV !== 'development'\n ? function () {\n return null\n }\n : Devtools.TanStackRouterDevtools\n\nexport const TanStackRouterDevtoolsInProd: (typeof Devtools)['TanStackRouterDevtools'] =\n Devtools.TanStackRouterDevtools\n\nexport const TanStackRouterDevtoolsPanel: (typeof DevtoolsPanel)['TanStackRouterDevtoolsPanel'] =\n process.env.NODE_ENV !== 'development'\n ? function () {\n return null\n }\n : DevtoolsPanel.TanStackRouterDevtoolsPanel\n\nexport const TanStackRouterDevtoolsPanelInProd: (typeof DevtoolsPanel)['TanStackRouterDevtoolsPanel'] =\n DevtoolsPanel.TanStackRouterDevtoolsPanel\n"],"names":["Devtools.TanStackRouterDevtools","DevtoolsPanel.TanStackRouterDevtoolsPanel"],"mappings":";;;;AAGO,MAAM,yBACX,QAAQ,IAAI,aAAa,gBACrB,WAAY;AACV,SAAO;AACT,IACAA,yBAAAA;AAEC,MAAM,+BACXA,yBAAAA;AAEK,MAAM,8BACX,QAAQ,IAAI,aAAa,gBACrB,WAAY;AACV,SAAO;AACT,IACAC,8BAAAA;AAEC,MAAM,oCACXA,8BAAAA;;;;;"}
{"version":3,"file":"index.cjs","names":[],"sources":["../../src/index.ts"],"sourcesContent":["import * as Devtools from './TanStackRouterDevtools'\nimport * as DevtoolsPanel from './TanStackRouterDevtoolsPanel'\n\nexport const TanStackRouterDevtools: (typeof Devtools)['TanStackRouterDevtools'] =\n process.env.NODE_ENV !== 'development'\n ? function () {\n return null\n }\n : Devtools.TanStackRouterDevtools\n\nexport const TanStackRouterDevtoolsInProd: (typeof Devtools)['TanStackRouterDevtools'] =\n Devtools.TanStackRouterDevtools\n\nexport const TanStackRouterDevtoolsPanel: (typeof DevtoolsPanel)['TanStackRouterDevtoolsPanel'] =\n process.env.NODE_ENV !== 'development'\n ? function () {\n return null\n }\n : DevtoolsPanel.TanStackRouterDevtoolsPanel\n\nexport const TanStackRouterDevtoolsPanelInProd: (typeof DevtoolsPanel)['TanStackRouterDevtoolsPanel'] =\n DevtoolsPanel.TanStackRouterDevtoolsPanel\n"],"mappings":";;;;AAGA,IAAa,yBAAA,QAAA,IAAA,aACc,gBACrB,WAAY;AACV,QAAO;;AAIf,IAAa,+BAAA,+BAAA;AAGb,IAAa,8BAAA,QAAA,IAAA,aACc,gBACrB,WAAY;AACV,QAAO;;AAIf,IAAa,oCAAA,oCAAA"}

@@ -1,72 +0,61 @@

"use strict";
Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
const jsxRuntime = require("react/jsx-runtime");
const routerDevtoolsCore = require("@tanstack/router-devtools-core");
const react = require("react");
const reactRouter = require("@tanstack/react-router");
require("./_virtual/_rolldown/runtime.cjs");
let _tanstack_router_devtools_core = require("@tanstack/router-devtools-core");
let react = require("react");
let _tanstack_react_router = require("@tanstack/react-router");
let react_jsx_runtime = require("react/jsx-runtime");
//#region src/TanStackRouterDevtools.tsx
function TanStackRouterDevtools(props) {
const {
initialIsOpen,
panelProps,
closeButtonProps,
toggleButtonProps,
position,
containerElement,
shadowDOMTarget,
router: propsRouter
} = props;
const hookRouter = reactRouter.useRouter({ warn: false });
const activeRouter = propsRouter ?? hookRouter;
const activeRouterState = reactRouter.useRouterState({ router: activeRouter });
const devToolRef = react.useRef(null);
const [devtools] = react.useState(
() => new routerDevtoolsCore.TanStackRouterDevtoolsCore({
initialIsOpen,
panelProps,
closeButtonProps,
toggleButtonProps,
position,
containerElement,
shadowDOMTarget,
router: activeRouter,
routerState: activeRouterState
})
);
react.useEffect(() => {
devtools.setRouter(activeRouter);
}, [devtools, activeRouter]);
react.useEffect(() => {
devtools.setRouterState(activeRouterState);
}, [devtools, activeRouterState]);
react.useEffect(() => {
devtools.setOptions({
initialIsOpen,
panelProps,
closeButtonProps,
toggleButtonProps,
position,
containerElement,
shadowDOMTarget
});
}, [
devtools,
initialIsOpen,
panelProps,
closeButtonProps,
toggleButtonProps,
position,
containerElement,
shadowDOMTarget
]);
react.useEffect(() => {
if (devToolRef.current) {
devtools.mount(devToolRef.current);
}
return () => {
devtools.unmount();
};
}, [devtools]);
return /* @__PURE__ */ jsxRuntime.jsx(react.Fragment, { children: /* @__PURE__ */ jsxRuntime.jsx("div", { ref: devToolRef }) });
const { initialIsOpen, panelProps, closeButtonProps, toggleButtonProps, position, containerElement, shadowDOMTarget, router: propsRouter } = props;
const hookRouter = (0, _tanstack_react_router.useRouter)({ warn: false });
const activeRouter = propsRouter ?? hookRouter;
const activeRouterState = (0, _tanstack_react_router.useRouterState)({ router: activeRouter });
const devToolRef = (0, react.useRef)(null);
const [devtools] = (0, react.useState)(() => new _tanstack_router_devtools_core.TanStackRouterDevtoolsCore({
initialIsOpen,
panelProps,
closeButtonProps,
toggleButtonProps,
position,
containerElement,
shadowDOMTarget,
router: activeRouter,
routerState: activeRouterState
}));
(0, react.useEffect)(() => {
devtools.setRouter(activeRouter);
}, [devtools, activeRouter]);
(0, react.useEffect)(() => {
devtools.setRouterState(activeRouterState);
}, [devtools, activeRouterState]);
(0, react.useEffect)(() => {
devtools.setOptions({
initialIsOpen,
panelProps,
closeButtonProps,
toggleButtonProps,
position,
containerElement,
shadowDOMTarget
});
}, [
devtools,
initialIsOpen,
panelProps,
closeButtonProps,
toggleButtonProps,
position,
containerElement,
shadowDOMTarget
]);
(0, react.useEffect)(() => {
if (devToolRef.current) devtools.mount(devToolRef.current);
return () => {
devtools.unmount();
};
}, [devtools]);
return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react.Fragment, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", { ref: devToolRef }) });
}
//#endregion
exports.TanStackRouterDevtools = TanStackRouterDevtools;
//# sourceMappingURL=TanStackRouterDevtools.cjs.map
//# sourceMappingURL=TanStackRouterDevtools.cjs.map

@@ -1,1 +0,1 @@

{"version":3,"file":"TanStackRouterDevtools.cjs","sources":["../../src/TanStackRouterDevtools.tsx"],"sourcesContent":["import { TanStackRouterDevtoolsCore } from '@tanstack/router-devtools-core'\nimport { Fragment, useEffect, useRef, useState } from 'react'\nimport { useRouter, useRouterState } from '@tanstack/react-router'\nimport type { ButtonHTMLAttributes, HTMLAttributes } from 'react'\nimport type { AnyRouter } from '@tanstack/react-router'\nimport type React from 'react'\n\nexport interface TanStackRouterDevtoolsOptions {\n /**\n * Set this true if you want the dev tools to default to being open\n */\n initialIsOpen?: boolean\n /**\n * Use this to add props to the panel. For example, you can add className, style (merge and override default style), etc.\n */\n panelProps?: HTMLAttributes<HTMLDivElement>\n /**\n * Use this to add props to the close button. For example, you can add className, style (merge and override default style), onClick (extend default handler), etc.\n */\n closeButtonProps?: ButtonHTMLAttributes<HTMLButtonElement>\n /**\n * Use this to add props to the toggle button. For example, you can add className, style (merge and override default style), onClick (extend default handler), etc.\n */\n toggleButtonProps?: ButtonHTMLAttributes<HTMLButtonElement>\n /**\n * The position of the TanStack Router logo to open and close the devtools panel.\n * Defaults to 'bottom-left'.\n */\n position?: 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right'\n /**\n * Use this to render the devtools inside a different type of container element for a11y purposes.\n * Any string which corresponds to a valid intrinsic JSX element is allowed.\n * Defaults to 'footer'.\n */\n containerElement?: string | any\n /**\n * The router instance to use for the devtools.\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 function TanStackRouterDevtools(\n props: TanStackRouterDevtoolsOptions,\n): React.ReactElement | null {\n const {\n initialIsOpen,\n panelProps,\n closeButtonProps,\n toggleButtonProps,\n position,\n containerElement,\n shadowDOMTarget,\n router: propsRouter,\n } = props\n\n const hookRouter = useRouter({ warn: false })\n const activeRouter = propsRouter ?? hookRouter\n\n const activeRouterState = useRouterState({ router: activeRouter })\n\n const devToolRef = useRef<HTMLDivElement>(null)\n const [devtools] = useState(\n () =>\n new TanStackRouterDevtoolsCore({\n initialIsOpen,\n panelProps,\n closeButtonProps,\n toggleButtonProps,\n position,\n containerElement,\n shadowDOMTarget,\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 initialIsOpen: initialIsOpen,\n panelProps: panelProps,\n closeButtonProps: closeButtonProps,\n toggleButtonProps: toggleButtonProps,\n position: position,\n containerElement: containerElement,\n shadowDOMTarget: shadowDOMTarget,\n })\n }, [\n devtools,\n initialIsOpen,\n panelProps,\n closeButtonProps,\n toggleButtonProps,\n position,\n containerElement,\n shadowDOMTarget,\n ])\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 <Fragment>\n <div ref={devToolRef} />\n </Fragment>\n )\n}\n"],"names":["useRouter","useRouterState","useRef","useState","TanStackRouterDevtoolsCore","useEffect","Fragment","jsx"],"mappings":";;;;;;AA6CO,SAAS,uBACd,OAC2B;AAC3B,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,QAAQ;AAAA,EAAA,IACN;AAEJ,QAAM,aAAaA,YAAAA,UAAU,EAAE,MAAM,OAAO;AAC5C,QAAM,eAAe,eAAe;AAEpC,QAAM,oBAAoBC,YAAAA,eAAe,EAAE,QAAQ,cAAc;AAEjE,QAAM,aAAaC,MAAAA,OAAuB,IAAI;AAC9C,QAAM,CAAC,QAAQ,IAAIC,MAAAA;AAAAA,IACjB,MACE,IAAIC,mBAAAA,2BAA2B;AAAA,MAC7B;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA,QAAQ;AAAA,MACR,aAAa;AAAA,IAAA,CACd;AAAA,EAAA;AAILC,QAAAA,UAAU,MAAM;AACd,aAAS,UAAU,YAAY;AAAA,EACjC,GAAG,CAAC,UAAU,YAAY,CAAC;AAE3BA,QAAAA,UAAU,MAAM;AACd,aAAS,eAAe,iBAAiB;AAAA,EAC3C,GAAG,CAAC,UAAU,iBAAiB,CAAC;AAEhCA,QAAAA,UAAU,MAAM;AACd,aAAS,WAAW;AAAA,MAClB;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IAAA,CACD;AAAA,EACH,GAAG;AAAA,IACD;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EAAA,CACD;AAEDA,QAAAA,UAAU,MAAM;AACd,QAAI,WAAW,SAAS;AACtB,eAAS,MAAM,WAAW,OAAO;AAAA,IACnC;AAEA,WAAO,MAAM;AACX,eAAS,QAAA;AAAA,IACX;AAAA,EACF,GAAG,CAAC,QAAQ,CAAC;AAEb,wCACGC,gBAAA,EACC,UAAAC,2BAAAA,IAAC,OAAA,EAAI,KAAK,YAAY,GACxB;AAEJ;;"}
{"version":3,"file":"TanStackRouterDevtools.cjs","names":[],"sources":["../../src/TanStackRouterDevtools.tsx"],"sourcesContent":["import { TanStackRouterDevtoolsCore } from '@tanstack/router-devtools-core'\nimport { Fragment, useEffect, useRef, useState } from 'react'\nimport { useRouter, useRouterState } from '@tanstack/react-router'\nimport type { ButtonHTMLAttributes, HTMLAttributes } from 'react'\nimport type { AnyRouter } from '@tanstack/react-router'\nimport type React from 'react'\n\nexport interface TanStackRouterDevtoolsOptions {\n /**\n * Set this true if you want the dev tools to default to being open\n */\n initialIsOpen?: boolean\n /**\n * Use this to add props to the panel. For example, you can add className, style (merge and override default style), etc.\n */\n panelProps?: HTMLAttributes<HTMLDivElement>\n /**\n * Use this to add props to the close button. For example, you can add className, style (merge and override default style), onClick (extend default handler), etc.\n */\n closeButtonProps?: ButtonHTMLAttributes<HTMLButtonElement>\n /**\n * Use this to add props to the toggle button. For example, you can add className, style (merge and override default style), onClick (extend default handler), etc.\n */\n toggleButtonProps?: ButtonHTMLAttributes<HTMLButtonElement>\n /**\n * The position of the TanStack Router logo to open and close the devtools panel.\n * Defaults to 'bottom-left'.\n */\n position?: 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right'\n /**\n * Use this to render the devtools inside a different type of container element for a11y purposes.\n * Any string which corresponds to a valid intrinsic JSX element is allowed.\n * Defaults to 'footer'.\n */\n containerElement?: string | any\n /**\n * The router instance to use for the devtools.\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 function TanStackRouterDevtools(\n props: TanStackRouterDevtoolsOptions,\n): React.ReactElement | null {\n const {\n initialIsOpen,\n panelProps,\n closeButtonProps,\n toggleButtonProps,\n position,\n containerElement,\n shadowDOMTarget,\n router: propsRouter,\n } = props\n\n const hookRouter = useRouter({ warn: false })\n const activeRouter = propsRouter ?? hookRouter\n\n const activeRouterState = useRouterState({ router: activeRouter })\n\n const devToolRef = useRef<HTMLDivElement>(null)\n const [devtools] = useState(\n () =>\n new TanStackRouterDevtoolsCore({\n initialIsOpen,\n panelProps,\n closeButtonProps,\n toggleButtonProps,\n position,\n containerElement,\n shadowDOMTarget,\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 initialIsOpen: initialIsOpen,\n panelProps: panelProps,\n closeButtonProps: closeButtonProps,\n toggleButtonProps: toggleButtonProps,\n position: position,\n containerElement: containerElement,\n shadowDOMTarget: shadowDOMTarget,\n })\n }, [\n devtools,\n initialIsOpen,\n panelProps,\n closeButtonProps,\n toggleButtonProps,\n position,\n containerElement,\n shadowDOMTarget,\n ])\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 <Fragment>\n <div ref={devToolRef} />\n </Fragment>\n )\n}\n"],"mappings":";;;;;;AA6CA,SAAgB,uBACd,OAC2B;CAC3B,MAAM,EACJ,eACA,YACA,kBACA,mBACA,UACA,kBACA,iBACA,QAAQ,gBACN;CAEJ,MAAM,cAAA,GAAA,uBAAA,WAAuB,EAAE,MAAM,OAAO,CAAC;CAC7C,MAAM,eAAe,eAAe;CAEpC,MAAM,qBAAA,GAAA,uBAAA,gBAAmC,EAAE,QAAQ,cAAc,CAAC;CAElE,MAAM,cAAA,GAAA,MAAA,QAAoC,KAAK;CAC/C,MAAM,CAAC,aAAA,GAAA,MAAA,gBAEH,IAAI,+BAAA,2BAA2B;EAC7B;EACA;EACA;EACA;EACA;EACA;EACA;EACA,QAAQ;EACR,aAAa;EACd,CAAC,CACL;AAGD,EAAA,GAAA,MAAA,iBAAgB;AACd,WAAS,UAAU,aAAa;IAC/B,CAAC,UAAU,aAAa,CAAC;AAE5B,EAAA,GAAA,MAAA,iBAAgB;AACd,WAAS,eAAe,kBAAkB;IACzC,CAAC,UAAU,kBAAkB,CAAC;AAEjC,EAAA,GAAA,MAAA,iBAAgB;AACd,WAAS,WAAW;GACH;GACH;GACM;GACC;GACT;GACQ;GACD;GAClB,CAAC;IACD;EACD;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACD,CAAC;AAEF,EAAA,GAAA,MAAA,iBAAgB;AACd,MAAI,WAAW,QACb,UAAS,MAAM,WAAW,QAAQ;AAGpC,eAAa;AACX,YAAS,SAAS;;IAEnB,CAAC,SAAS,CAAC;AAEd,QACE,iBAAA,GAAA,kBAAA,KAAC,MAAA,UAAD,EAAA,UACE,iBAAA,GAAA,kBAAA,KAAC,OAAD,EAAK,KAAK,YAAc,CAAA,EACf,CAAA"}

@@ -1,44 +0,48 @@

"use strict";
Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
const jsxRuntime = require("react/jsx-runtime");
const reactRouter = require("@tanstack/react-router");
const routerDevtoolsCore = require("@tanstack/router-devtools-core");
const react = require("react");
const TanStackRouterDevtoolsPanel = (props) => {
const { router: propsRouter, ...rest } = props;
const hookRouter = reactRouter.useRouter({ warn: false });
const activeRouter = propsRouter ?? hookRouter;
const activeRouterState = reactRouter.useRouterState({ router: activeRouter });
const devToolRef = react.useRef(null);
const [devtools] = react.useState(
() => new routerDevtoolsCore.TanStackRouterDevtoolsPanelCore({
...rest,
router: activeRouter,
routerState: activeRouterState
})
);
react.useEffect(() => {
devtools.setRouter(activeRouter);
}, [devtools, activeRouter]);
react.useEffect(() => {
devtools.setRouterState(activeRouterState);
}, [devtools, activeRouterState]);
react.useEffect(() => {
devtools.setOptions({
className: props.className,
style: props.style,
shadowDOMTarget: props.shadowDOMTarget
});
}, [devtools, props.className, props.style, props.shadowDOMTarget]);
react.useEffect(() => {
if (devToolRef.current) {
devtools.mount(devToolRef.current);
}
return () => {
devtools.unmount();
};
}, [devtools]);
return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: /* @__PURE__ */ jsxRuntime.jsx("div", { ref: devToolRef }) });
const require_runtime = require("./_virtual/_rolldown/runtime.cjs");
let _tanstack_router_devtools_core = require("@tanstack/router-devtools-core");
let react = require("react");
react = require_runtime.__toESM(react);
let _tanstack_react_router = require("@tanstack/react-router");
let react_jsx_runtime = require("react/jsx-runtime");
//#region src/TanStackRouterDevtoolsPanel.tsx
var TanStackRouterDevtoolsPanel = (props) => {
const { router: propsRouter, ...rest } = props;
const hookRouter = (0, _tanstack_react_router.useRouter)({ warn: false });
const activeRouter = propsRouter ?? hookRouter;
const activeRouterState = (0, _tanstack_react_router.useRouterState)({ router: activeRouter });
const devToolRef = (0, react.useRef)(null);
const [devtools] = (0, react.useState)(() => new _tanstack_router_devtools_core.TanStackRouterDevtoolsPanelCore({
...rest,
router: activeRouter,
routerState: activeRouterState
}));
(0, react.useEffect)(() => {
devtools.setRouter(activeRouter);
}, [devtools, activeRouter]);
(0, react.useEffect)(() => {
devtools.setRouterState(activeRouterState);
}, [devtools, activeRouterState]);
(0, react.useEffect)(() => {
devtools.setOptions({
className: props.className,
style: props.style,
shadowDOMTarget: props.shadowDOMTarget
});
}, [
devtools,
props.className,
props.style,
props.shadowDOMTarget
]);
(0, react.useEffect)(() => {
if (devToolRef.current) devtools.mount(devToolRef.current);
return () => {
devtools.unmount();
};
}, [devtools]);
return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_jsx_runtime.Fragment, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", { ref: devToolRef }) });
};
//#endregion
exports.TanStackRouterDevtoolsPanel = TanStackRouterDevtoolsPanel;
//# sourceMappingURL=TanStackRouterDevtoolsPanel.cjs.map
//# sourceMappingURL=TanStackRouterDevtoolsPanel.cjs.map

@@ -1,1 +0,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 TanStackRouterDevtoolsPanelOptions {\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<\n TanStackRouterDevtoolsPanelOptions\n> = (props): 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":";;;;;;AAoCO,MAAM,8BAET,CAAC,UAAqC;AACxC,QAAM,EAAE,QAAQ,aAAa,GAAG,SAAS;AACzC,QAAM,aAAaA,YAAAA,UAAU,EAAE,MAAM,OAAO;AAC5C,QAAM,eAAe,eAAe;AACpC,QAAM,oBAAoBC,YAAAA,eAAe,EAAE,QAAQ,cAAc;AAEjE,QAAM,aAAaC,MAAAA,OAAuB,IAAI;AAC9C,QAAM,CAAC,QAAQ,IAAIC,MAAAA;AAAAA,IACjB,MACE,IAAIC,mBAAAA,gCAAgC;AAAA,MAClC,GAAG;AAAA,MACH,QAAQ;AAAA,MACR,aAAa;AAAA,IAAA,CACd;AAAA,EAAA;AAILC,QAAAA,UAAU,MAAM;AACd,aAAS,UAAU,YAAY;AAAA,EACjC,GAAG,CAAC,UAAU,YAAY,CAAC;AAE3BA,QAAAA,UAAU,MAAM;AACd,aAAS,eAAe,iBAAiB;AAAA,EAC3C,GAAG,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,EACH,GAAG,CAAC,UAAU,MAAM,WAAW,MAAM,OAAO,MAAM,eAAe,CAAC;AAElEA,QAAAA,UAAU,MAAM;AACd,QAAI,WAAW,SAAS;AACtB,eAAS,MAAM,WAAW,OAAO;AAAA,IACnC;AAEA,WAAO,MAAM;AACX,eAAS,QAAA;AAAA,IACX;AAAA,EACF,GAAG,CAAC,QAAQ,CAAC;AAEb,SACEC,2BAAAA,IAAAC,qBAAA,EACE,UAAAD,2BAAAA,IAAC,OAAA,EAAI,KAAK,YAAY,GACxB;AAEJ;;"}
{"version":3,"file":"TanStackRouterDevtoolsPanel.cjs","names":[],"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 TanStackRouterDevtoolsPanelOptions {\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<\n TanStackRouterDevtoolsPanelOptions\n> = (props): 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"],"mappings":";;;;;;;AAoCA,IAAa,+BAER,UAAqC;CACxC,MAAM,EAAE,QAAQ,aAAa,GAAG,SAAS;CACzC,MAAM,cAAA,GAAA,uBAAA,WAAuB,EAAE,MAAM,OAAO,CAAC;CAC7C,MAAM,eAAe,eAAe;CACpC,MAAM,qBAAA,GAAA,uBAAA,gBAAmC,EAAE,QAAQ,cAAc,CAAC;CAElE,MAAM,cAAA,GAAA,MAAA,QAAoC,KAAK;CAC/C,MAAM,CAAC,aAAA,GAAA,MAAA,gBAEH,IAAI,+BAAA,gCAAgC;EAClC,GAAG;EACH,QAAQ;EACR,aAAa;EACd,CAAC,CACL;AAGD,EAAA,GAAA,MAAA,iBAAgB;AACd,WAAS,UAAU,aAAa;IAC/B,CAAC,UAAU,aAAa,CAAC;AAE5B,EAAA,GAAA,MAAA,iBAAgB;AACd,WAAS,eAAe,kBAAkB;IACzC,CAAC,UAAU,kBAAkB,CAAC;AAEjC,EAAA,GAAA,MAAA,iBAAgB;AACd,WAAS,WAAW;GAClB,WAAW,MAAM;GACjB,OAAO,MAAM;GACb,iBAAiB,MAAM;GACxB,CAAC;IACD;EAAC;EAAU,MAAM;EAAW,MAAM;EAAO,MAAM;EAAgB,CAAC;AAEnE,EAAA,GAAA,MAAA,iBAAgB;AACd,MAAI,WAAW,QACb,UAAS,MAAM,WAAW,QAAQ;AAGpC,eAAa;AACX,YAAS,SAAS;;IAEnB,CAAC,SAAS,CAAC;AAEd,QACE,iBAAA,GAAA,kBAAA,KAAA,kBAAA,UAAA,EAAA,UACE,iBAAA,GAAA,kBAAA,KAAC,OAAD,EAAK,KAAK,YAAc,CAAA,EACvB,CAAA"}
import { TanStackRouterDevtools as TanStackRouterDevtools$1 } from "./TanStackRouterDevtools.js";
import { TanStackRouterDevtoolsPanel as TanStackRouterDevtoolsPanel$1 } from "./TanStackRouterDevtoolsPanel.js";
const TanStackRouterDevtools = process.env.NODE_ENV !== "development" ? function() {
return null;
//#region src/index.ts
var TanStackRouterDevtools = process.env.NODE_ENV !== "development" ? function() {
return null;
} : TanStackRouterDevtools$1;
const TanStackRouterDevtoolsInProd = TanStackRouterDevtools$1;
const TanStackRouterDevtoolsPanel = process.env.NODE_ENV !== "development" ? function() {
return null;
var TanStackRouterDevtoolsInProd = TanStackRouterDevtools$1;
var TanStackRouterDevtoolsPanel = process.env.NODE_ENV !== "development" ? function() {
return null;
} : TanStackRouterDevtoolsPanel$1;
const TanStackRouterDevtoolsPanelInProd = TanStackRouterDevtoolsPanel$1;
export {
TanStackRouterDevtools,
TanStackRouterDevtoolsInProd,
TanStackRouterDevtoolsPanel,
TanStackRouterDevtoolsPanelInProd
};
//# sourceMappingURL=index.js.map
var TanStackRouterDevtoolsPanelInProd = TanStackRouterDevtoolsPanel$1;
//#endregion
export { TanStackRouterDevtools, TanStackRouterDevtoolsInProd, TanStackRouterDevtoolsPanel, TanStackRouterDevtoolsPanelInProd };
//# sourceMappingURL=index.js.map

@@ -1,1 +0,1 @@

{"version":3,"file":"index.js","sources":["../../src/index.ts"],"sourcesContent":["import * as Devtools from './TanStackRouterDevtools'\nimport * as DevtoolsPanel from './TanStackRouterDevtoolsPanel'\n\nexport const TanStackRouterDevtools: (typeof Devtools)['TanStackRouterDevtools'] =\n process.env.NODE_ENV !== 'development'\n ? function () {\n return null\n }\n : Devtools.TanStackRouterDevtools\n\nexport const TanStackRouterDevtoolsInProd: (typeof Devtools)['TanStackRouterDevtools'] =\n Devtools.TanStackRouterDevtools\n\nexport const TanStackRouterDevtoolsPanel: (typeof DevtoolsPanel)['TanStackRouterDevtoolsPanel'] =\n process.env.NODE_ENV !== 'development'\n ? function () {\n return null\n }\n : DevtoolsPanel.TanStackRouterDevtoolsPanel\n\nexport const TanStackRouterDevtoolsPanelInProd: (typeof DevtoolsPanel)['TanStackRouterDevtoolsPanel'] =\n DevtoolsPanel.TanStackRouterDevtoolsPanel\n"],"names":["Devtools.TanStackRouterDevtools","DevtoolsPanel.TanStackRouterDevtoolsPanel"],"mappings":";;AAGO,MAAM,yBACX,QAAQ,IAAI,aAAa,gBACrB,WAAY;AACV,SAAO;AACT,IACAA;AAEC,MAAM,+BACXA;AAEK,MAAM,8BACX,QAAQ,IAAI,aAAa,gBACrB,WAAY;AACV,SAAO;AACT,IACAC;AAEC,MAAM,oCACXA;"}
{"version":3,"file":"index.js","names":[],"sources":["../../src/index.ts"],"sourcesContent":["import * as Devtools from './TanStackRouterDevtools'\nimport * as DevtoolsPanel from './TanStackRouterDevtoolsPanel'\n\nexport const TanStackRouterDevtools: (typeof Devtools)['TanStackRouterDevtools'] =\n process.env.NODE_ENV !== 'development'\n ? function () {\n return null\n }\n : Devtools.TanStackRouterDevtools\n\nexport const TanStackRouterDevtoolsInProd: (typeof Devtools)['TanStackRouterDevtools'] =\n Devtools.TanStackRouterDevtools\n\nexport const TanStackRouterDevtoolsPanel: (typeof DevtoolsPanel)['TanStackRouterDevtoolsPanel'] =\n process.env.NODE_ENV !== 'development'\n ? function () {\n return null\n }\n : DevtoolsPanel.TanStackRouterDevtoolsPanel\n\nexport const TanStackRouterDevtoolsPanelInProd: (typeof DevtoolsPanel)['TanStackRouterDevtoolsPanel'] =\n DevtoolsPanel.TanStackRouterDevtoolsPanel\n"],"mappings":";;;AAGA,IAAa,yBAAA,QAAA,IAAA,aACc,gBACrB,WAAY;AACV,QAAO;IAET;AAEN,IAAa,+BACX;AAEF,IAAa,8BAAA,QAAA,IAAA,aACc,gBACrB,WAAY;AACV,QAAO;IAET;AAEN,IAAa,oCACX"}

@@ -1,72 +0,60 @@

import { jsx } from "react/jsx-runtime";
import { TanStackRouterDevtoolsCore } from "@tanstack/router-devtools-core";
import { useRef, useState, useEffect, Fragment } from "react";
import { Fragment, useEffect, useRef, useState } from "react";
import { useRouter, useRouterState } from "@tanstack/react-router";
import { jsx } from "react/jsx-runtime";
//#region src/TanStackRouterDevtools.tsx
function TanStackRouterDevtools(props) {
const {
initialIsOpen,
panelProps,
closeButtonProps,
toggleButtonProps,
position,
containerElement,
shadowDOMTarget,
router: propsRouter
} = props;
const hookRouter = useRouter({ warn: false });
const activeRouter = propsRouter ?? hookRouter;
const activeRouterState = useRouterState({ router: activeRouter });
const devToolRef = useRef(null);
const [devtools] = useState(
() => new TanStackRouterDevtoolsCore({
initialIsOpen,
panelProps,
closeButtonProps,
toggleButtonProps,
position,
containerElement,
shadowDOMTarget,
router: activeRouter,
routerState: activeRouterState
})
);
useEffect(() => {
devtools.setRouter(activeRouter);
}, [devtools, activeRouter]);
useEffect(() => {
devtools.setRouterState(activeRouterState);
}, [devtools, activeRouterState]);
useEffect(() => {
devtools.setOptions({
initialIsOpen,
panelProps,
closeButtonProps,
toggleButtonProps,
position,
containerElement,
shadowDOMTarget
});
}, [
devtools,
initialIsOpen,
panelProps,
closeButtonProps,
toggleButtonProps,
position,
containerElement,
shadowDOMTarget
]);
useEffect(() => {
if (devToolRef.current) {
devtools.mount(devToolRef.current);
}
return () => {
devtools.unmount();
};
}, [devtools]);
return /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsx("div", { ref: devToolRef }) });
const { initialIsOpen, panelProps, closeButtonProps, toggleButtonProps, position, containerElement, shadowDOMTarget, router: propsRouter } = props;
const hookRouter = useRouter({ warn: false });
const activeRouter = propsRouter ?? hookRouter;
const activeRouterState = useRouterState({ router: activeRouter });
const devToolRef = useRef(null);
const [devtools] = useState(() => new TanStackRouterDevtoolsCore({
initialIsOpen,
panelProps,
closeButtonProps,
toggleButtonProps,
position,
containerElement,
shadowDOMTarget,
router: activeRouter,
routerState: activeRouterState
}));
useEffect(() => {
devtools.setRouter(activeRouter);
}, [devtools, activeRouter]);
useEffect(() => {
devtools.setRouterState(activeRouterState);
}, [devtools, activeRouterState]);
useEffect(() => {
devtools.setOptions({
initialIsOpen,
panelProps,
closeButtonProps,
toggleButtonProps,
position,
containerElement,
shadowDOMTarget
});
}, [
devtools,
initialIsOpen,
panelProps,
closeButtonProps,
toggleButtonProps,
position,
containerElement,
shadowDOMTarget
]);
useEffect(() => {
if (devToolRef.current) devtools.mount(devToolRef.current);
return () => {
devtools.unmount();
};
}, [devtools]);
return /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsx("div", { ref: devToolRef }) });
}
export {
TanStackRouterDevtools
};
//# sourceMappingURL=TanStackRouterDevtools.js.map
//#endregion
export { TanStackRouterDevtools };
//# sourceMappingURL=TanStackRouterDevtools.js.map

@@ -1,1 +0,1 @@

{"version":3,"file":"TanStackRouterDevtools.js","sources":["../../src/TanStackRouterDevtools.tsx"],"sourcesContent":["import { TanStackRouterDevtoolsCore } from '@tanstack/router-devtools-core'\nimport { Fragment, useEffect, useRef, useState } from 'react'\nimport { useRouter, useRouterState } from '@tanstack/react-router'\nimport type { ButtonHTMLAttributes, HTMLAttributes } from 'react'\nimport type { AnyRouter } from '@tanstack/react-router'\nimport type React from 'react'\n\nexport interface TanStackRouterDevtoolsOptions {\n /**\n * Set this true if you want the dev tools to default to being open\n */\n initialIsOpen?: boolean\n /**\n * Use this to add props to the panel. For example, you can add className, style (merge and override default style), etc.\n */\n panelProps?: HTMLAttributes<HTMLDivElement>\n /**\n * Use this to add props to the close button. For example, you can add className, style (merge and override default style), onClick (extend default handler), etc.\n */\n closeButtonProps?: ButtonHTMLAttributes<HTMLButtonElement>\n /**\n * Use this to add props to the toggle button. For example, you can add className, style (merge and override default style), onClick (extend default handler), etc.\n */\n toggleButtonProps?: ButtonHTMLAttributes<HTMLButtonElement>\n /**\n * The position of the TanStack Router logo to open and close the devtools panel.\n * Defaults to 'bottom-left'.\n */\n position?: 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right'\n /**\n * Use this to render the devtools inside a different type of container element for a11y purposes.\n * Any string which corresponds to a valid intrinsic JSX element is allowed.\n * Defaults to 'footer'.\n */\n containerElement?: string | any\n /**\n * The router instance to use for the devtools.\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 function TanStackRouterDevtools(\n props: TanStackRouterDevtoolsOptions,\n): React.ReactElement | null {\n const {\n initialIsOpen,\n panelProps,\n closeButtonProps,\n toggleButtonProps,\n position,\n containerElement,\n shadowDOMTarget,\n router: propsRouter,\n } = props\n\n const hookRouter = useRouter({ warn: false })\n const activeRouter = propsRouter ?? hookRouter\n\n const activeRouterState = useRouterState({ router: activeRouter })\n\n const devToolRef = useRef<HTMLDivElement>(null)\n const [devtools] = useState(\n () =>\n new TanStackRouterDevtoolsCore({\n initialIsOpen,\n panelProps,\n closeButtonProps,\n toggleButtonProps,\n position,\n containerElement,\n shadowDOMTarget,\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 initialIsOpen: initialIsOpen,\n panelProps: panelProps,\n closeButtonProps: closeButtonProps,\n toggleButtonProps: toggleButtonProps,\n position: position,\n containerElement: containerElement,\n shadowDOMTarget: shadowDOMTarget,\n })\n }, [\n devtools,\n initialIsOpen,\n panelProps,\n closeButtonProps,\n toggleButtonProps,\n position,\n containerElement,\n shadowDOMTarget,\n ])\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 <Fragment>\n <div ref={devToolRef} />\n </Fragment>\n )\n}\n"],"names":[],"mappings":";;;;AA6CO,SAAS,uBACd,OAC2B;AAC3B,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,QAAQ;AAAA,EAAA,IACN;AAEJ,QAAM,aAAa,UAAU,EAAE,MAAM,OAAO;AAC5C,QAAM,eAAe,eAAe;AAEpC,QAAM,oBAAoB,eAAe,EAAE,QAAQ,cAAc;AAEjE,QAAM,aAAa,OAAuB,IAAI;AAC9C,QAAM,CAAC,QAAQ,IAAI;AAAA,IACjB,MACE,IAAI,2BAA2B;AAAA,MAC7B;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA,QAAQ;AAAA,MACR,aAAa;AAAA,IAAA,CACd;AAAA,EAAA;AAIL,YAAU,MAAM;AACd,aAAS,UAAU,YAAY;AAAA,EACjC,GAAG,CAAC,UAAU,YAAY,CAAC;AAE3B,YAAU,MAAM;AACd,aAAS,eAAe,iBAAiB;AAAA,EAC3C,GAAG,CAAC,UAAU,iBAAiB,CAAC;AAEhC,YAAU,MAAM;AACd,aAAS,WAAW;AAAA,MAClB;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IAAA,CACD;AAAA,EACH,GAAG;AAAA,IACD;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EAAA,CACD;AAED,YAAU,MAAM;AACd,QAAI,WAAW,SAAS;AACtB,eAAS,MAAM,WAAW,OAAO;AAAA,IACnC;AAEA,WAAO,MAAM;AACX,eAAS,QAAA;AAAA,IACX;AAAA,EACF,GAAG,CAAC,QAAQ,CAAC;AAEb,6BACG,UAAA,EACC,UAAA,oBAAC,OAAA,EAAI,KAAK,YAAY,GACxB;AAEJ;"}
{"version":3,"file":"TanStackRouterDevtools.js","names":[],"sources":["../../src/TanStackRouterDevtools.tsx"],"sourcesContent":["import { TanStackRouterDevtoolsCore } from '@tanstack/router-devtools-core'\nimport { Fragment, useEffect, useRef, useState } from 'react'\nimport { useRouter, useRouterState } from '@tanstack/react-router'\nimport type { ButtonHTMLAttributes, HTMLAttributes } from 'react'\nimport type { AnyRouter } from '@tanstack/react-router'\nimport type React from 'react'\n\nexport interface TanStackRouterDevtoolsOptions {\n /**\n * Set this true if you want the dev tools to default to being open\n */\n initialIsOpen?: boolean\n /**\n * Use this to add props to the panel. For example, you can add className, style (merge and override default style), etc.\n */\n panelProps?: HTMLAttributes<HTMLDivElement>\n /**\n * Use this to add props to the close button. For example, you can add className, style (merge and override default style), onClick (extend default handler), etc.\n */\n closeButtonProps?: ButtonHTMLAttributes<HTMLButtonElement>\n /**\n * Use this to add props to the toggle button. For example, you can add className, style (merge and override default style), onClick (extend default handler), etc.\n */\n toggleButtonProps?: ButtonHTMLAttributes<HTMLButtonElement>\n /**\n * The position of the TanStack Router logo to open and close the devtools panel.\n * Defaults to 'bottom-left'.\n */\n position?: 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right'\n /**\n * Use this to render the devtools inside a different type of container element for a11y purposes.\n * Any string which corresponds to a valid intrinsic JSX element is allowed.\n * Defaults to 'footer'.\n */\n containerElement?: string | any\n /**\n * The router instance to use for the devtools.\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 function TanStackRouterDevtools(\n props: TanStackRouterDevtoolsOptions,\n): React.ReactElement | null {\n const {\n initialIsOpen,\n panelProps,\n closeButtonProps,\n toggleButtonProps,\n position,\n containerElement,\n shadowDOMTarget,\n router: propsRouter,\n } = props\n\n const hookRouter = useRouter({ warn: false })\n const activeRouter = propsRouter ?? hookRouter\n\n const activeRouterState = useRouterState({ router: activeRouter })\n\n const devToolRef = useRef<HTMLDivElement>(null)\n const [devtools] = useState(\n () =>\n new TanStackRouterDevtoolsCore({\n initialIsOpen,\n panelProps,\n closeButtonProps,\n toggleButtonProps,\n position,\n containerElement,\n shadowDOMTarget,\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 initialIsOpen: initialIsOpen,\n panelProps: panelProps,\n closeButtonProps: closeButtonProps,\n toggleButtonProps: toggleButtonProps,\n position: position,\n containerElement: containerElement,\n shadowDOMTarget: shadowDOMTarget,\n })\n }, [\n devtools,\n initialIsOpen,\n panelProps,\n closeButtonProps,\n toggleButtonProps,\n position,\n containerElement,\n shadowDOMTarget,\n ])\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 <Fragment>\n <div ref={devToolRef} />\n </Fragment>\n )\n}\n"],"mappings":";;;;;AA6CA,SAAgB,uBACd,OAC2B;CAC3B,MAAM,EACJ,eACA,YACA,kBACA,mBACA,UACA,kBACA,iBACA,QAAQ,gBACN;CAEJ,MAAM,aAAa,UAAU,EAAE,MAAM,OAAO,CAAC;CAC7C,MAAM,eAAe,eAAe;CAEpC,MAAM,oBAAoB,eAAe,EAAE,QAAQ,cAAc,CAAC;CAElE,MAAM,aAAa,OAAuB,KAAK;CAC/C,MAAM,CAAC,YAAY,eAEf,IAAI,2BAA2B;EAC7B;EACA;EACA;EACA;EACA;EACA;EACA;EACA,QAAQ;EACR,aAAa;EACd,CAAC,CACL;AAGD,iBAAgB;AACd,WAAS,UAAU,aAAa;IAC/B,CAAC,UAAU,aAAa,CAAC;AAE5B,iBAAgB;AACd,WAAS,eAAe,kBAAkB;IACzC,CAAC,UAAU,kBAAkB,CAAC;AAEjC,iBAAgB;AACd,WAAS,WAAW;GACH;GACH;GACM;GACC;GACT;GACQ;GACD;GAClB,CAAC;IACD;EACD;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACD,CAAC;AAEF,iBAAgB;AACd,MAAI,WAAW,QACb,UAAS,MAAM,WAAW,QAAQ;AAGpC,eAAa;AACX,YAAS,SAAS;;IAEnB,CAAC,SAAS,CAAC;AAEd,QACE,oBAAC,UAAD,EAAA,UACE,oBAAC,OAAD,EAAK,KAAK,YAAc,CAAA,EACf,CAAA"}

@@ -1,44 +0,46 @@

import { jsx, Fragment } from "react/jsx-runtime";
import { TanStackRouterDevtoolsPanelCore } from "@tanstack/router-devtools-core";
import { useEffect, useRef, useState } from "react";
import { useRouter, useRouterState } from "@tanstack/react-router";
import { TanStackRouterDevtoolsPanelCore } from "@tanstack/router-devtools-core";
import { useRef, useState, useEffect } from "react";
const TanStackRouterDevtoolsPanel = (props) => {
const { router: propsRouter, ...rest } = props;
const hookRouter = useRouter({ warn: false });
const activeRouter = propsRouter ?? hookRouter;
const activeRouterState = useRouterState({ router: activeRouter });
const devToolRef = useRef(null);
const [devtools] = useState(
() => new TanStackRouterDevtoolsPanelCore({
...rest,
router: activeRouter,
routerState: activeRouterState
})
);
useEffect(() => {
devtools.setRouter(activeRouter);
}, [devtools, activeRouter]);
useEffect(() => {
devtools.setRouterState(activeRouterState);
}, [devtools, activeRouterState]);
useEffect(() => {
devtools.setOptions({
className: props.className,
style: props.style,
shadowDOMTarget: props.shadowDOMTarget
});
}, [devtools, props.className, props.style, props.shadowDOMTarget]);
useEffect(() => {
if (devToolRef.current) {
devtools.mount(devToolRef.current);
}
return () => {
devtools.unmount();
};
}, [devtools]);
return /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsx("div", { ref: devToolRef }) });
import { Fragment as Fragment$1, jsx } from "react/jsx-runtime";
//#region src/TanStackRouterDevtoolsPanel.tsx
var TanStackRouterDevtoolsPanel = (props) => {
const { router: propsRouter, ...rest } = props;
const hookRouter = useRouter({ warn: false });
const activeRouter = propsRouter ?? hookRouter;
const activeRouterState = useRouterState({ router: activeRouter });
const devToolRef = useRef(null);
const [devtools] = useState(() => new TanStackRouterDevtoolsPanelCore({
...rest,
router: activeRouter,
routerState: activeRouterState
}));
useEffect(() => {
devtools.setRouter(activeRouter);
}, [devtools, activeRouter]);
useEffect(() => {
devtools.setRouterState(activeRouterState);
}, [devtools, activeRouterState]);
useEffect(() => {
devtools.setOptions({
className: props.className,
style: props.style,
shadowDOMTarget: props.shadowDOMTarget
});
}, [
devtools,
props.className,
props.style,
props.shadowDOMTarget
]);
useEffect(() => {
if (devToolRef.current) devtools.mount(devToolRef.current);
return () => {
devtools.unmount();
};
}, [devtools]);
return /* @__PURE__ */ jsx(Fragment$1, { children: /* @__PURE__ */ jsx("div", { ref: devToolRef }) });
};
export {
TanStackRouterDevtoolsPanel
};
//# sourceMappingURL=TanStackRouterDevtoolsPanel.js.map
//#endregion
export { TanStackRouterDevtoolsPanel };
//# sourceMappingURL=TanStackRouterDevtoolsPanel.js.map

@@ -1,1 +0,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 TanStackRouterDevtoolsPanelOptions {\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<\n TanStackRouterDevtoolsPanelOptions\n> = (props): 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":";;;;AAoCO,MAAM,8BAET,CAAC,UAAqC;AACxC,QAAM,EAAE,QAAQ,aAAa,GAAG,SAAS;AACzC,QAAM,aAAa,UAAU,EAAE,MAAM,OAAO;AAC5C,QAAM,eAAe,eAAe;AACpC,QAAM,oBAAoB,eAAe,EAAE,QAAQ,cAAc;AAEjE,QAAM,aAAa,OAAuB,IAAI;AAC9C,QAAM,CAAC,QAAQ,IAAI;AAAA,IACjB,MACE,IAAI,gCAAgC;AAAA,MAClC,GAAG;AAAA,MACH,QAAQ;AAAA,MACR,aAAa;AAAA,IAAA,CACd;AAAA,EAAA;AAIL,YAAU,MAAM;AACd,aAAS,UAAU,YAAY;AAAA,EACjC,GAAG,CAAC,UAAU,YAAY,CAAC;AAE3B,YAAU,MAAM;AACd,aAAS,eAAe,iBAAiB;AAAA,EAC3C,GAAG,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,EACH,GAAG,CAAC,UAAU,MAAM,WAAW,MAAM,OAAO,MAAM,eAAe,CAAC;AAElE,YAAU,MAAM;AACd,QAAI,WAAW,SAAS;AACtB,eAAS,MAAM,WAAW,OAAO;AAAA,IACnC;AAEA,WAAO,MAAM;AACX,eAAS,QAAA;AAAA,IACX;AAAA,EACF,GAAG,CAAC,QAAQ,CAAC;AAEb,SACE,oBAAA,UAAA,EACE,UAAA,oBAAC,OAAA,EAAI,KAAK,YAAY,GACxB;AAEJ;"}
{"version":3,"file":"TanStackRouterDevtoolsPanel.js","names":[],"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 TanStackRouterDevtoolsPanelOptions {\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<\n TanStackRouterDevtoolsPanelOptions\n> = (props): 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"],"mappings":";;;;;AAoCA,IAAa,+BAER,UAAqC;CACxC,MAAM,EAAE,QAAQ,aAAa,GAAG,SAAS;CACzC,MAAM,aAAa,UAAU,EAAE,MAAM,OAAO,CAAC;CAC7C,MAAM,eAAe,eAAe;CACpC,MAAM,oBAAoB,eAAe,EAAE,QAAQ,cAAc,CAAC;CAElE,MAAM,aAAa,OAAuB,KAAK;CAC/C,MAAM,CAAC,YAAY,eAEf,IAAI,gCAAgC;EAClC,GAAG;EACH,QAAQ;EACR,aAAa;EACd,CAAC,CACL;AAGD,iBAAgB;AACd,WAAS,UAAU,aAAa;IAC/B,CAAC,UAAU,aAAa,CAAC;AAE5B,iBAAgB;AACd,WAAS,eAAe,kBAAkB;IACzC,CAAC,UAAU,kBAAkB,CAAC;AAEjC,iBAAgB;AACd,WAAS,WAAW;GAClB,WAAW,MAAM;GACjB,OAAO,MAAM;GACb,iBAAiB,MAAM;GACxB,CAAC;IACD;EAAC;EAAU,MAAM;EAAW,MAAM;EAAO,MAAM;EAAgB,CAAC;AAEnE,iBAAgB;AACd,MAAI,WAAW,QACb,UAAS,MAAM,WAAW,QAAQ;AAGpC,eAAa;AACX,YAAS,SAAS;;IAEnB,CAAC,SAAS,CAAC;AAEd,QACE,oBAAA,YAAA,EAAA,UACE,oBAAC,OAAD,EAAK,KAAK,YAAc,CAAA,EACvB,CAAA"}
{
"name": "@tanstack/react-router-devtools",
"version": "1.166.8",
"version": "1.166.9",
"description": "Modern and scalable routing for React applications",

@@ -52,3 +52,3 @@ "author": "Tanner Linsley",

"dependencies": {
"@tanstack/router-devtools-core": "1.166.8"
"@tanstack/router-devtools-core": "1.166.9"
},

@@ -64,4 +64,4 @@ "devDependencies": {

"react-dom": ">=18.0.0 || >=19.0.0",
"@tanstack/react-router": "^1.167.1",
"@tanstack/router-core": "^1.167.1"
"@tanstack/react-router": "^1.167.2",
"@tanstack/router-core": "^1.167.2"
},

@@ -68,0 +68,0 @@ "peerDependenciesMeta": {