@tanstack/solid-router-devtools
Advanced tools
+3
-3
| { | ||
| "name": "@tanstack/solid-router-devtools", | ||
| "version": "1.121.16", | ||
| "version": "1.121.17", | ||
| "description": "Modern and scalable routing for Solid applications", | ||
@@ -56,3 +56,3 @@ "author": "Tanner Linsley", | ||
| "dependencies": { | ||
| "@tanstack/router-devtools-core": "^1.121.16" | ||
| "@tanstack/router-devtools-core": "^1.121.17" | ||
| }, | ||
@@ -65,5 +65,5 @@ "devDependencies": { | ||
| "solid-js": "^1.9.5", | ||
| "@tanstack/solid-router": "^1.121.16" | ||
| "@tanstack/solid-router": "^1.121.17" | ||
| }, | ||
| "scripts": {} | ||
| } |
| "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; | ||
| exports.TanStackRouterDevtools = TanStackRouterDevtools; | ||
| exports.TanStackRouterDevtoolsInProd = TanStackRouterDevtoolsInProd; | ||
| exports.TanStackRouterDevtoolsPanel = TanStackRouterDevtoolsPanel; | ||
| exports.TanStackRouterDevtoolsPanelInProd = TanStackRouterDevtoolsPanelInProd; | ||
| //# sourceMappingURL=index.cjs.map |
| {"version":3,"file":"index.cjs","sources":["../../src/index.tsx"],"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":["TanStackRouterDevtools","process","env","NODE_ENV","Devtools","TanStackRouterDevtoolsInProd","TanStackRouterDevtoolsPanel","DevtoolsPanel","TanStackRouterDevtoolsPanelInProd"],"mappings":";;;;AAGO,MAAMA,yBACXC,QAAQC,IAAIC,aAAa,gBACrB,WAAY;AACH,SAAA;AACT,IACAC,yBAAAA;AAEC,MAAMC,+BACXD,yBAAAA;AAEK,MAAME,8BACXL,QAAQC,IAAIC,aAAa,gBACrB,WAAY;AACH,SAAA;AACT,IACAI,8BAAAA;AAEC,MAAMC,oCACXD,8BAAAA;;;;;"} |
| import * as Devtools from './TanStackRouterDevtools.cjs'; | ||
| import * as DevtoolsPanel from './TanStackRouterDevtoolsPanel.cjs'; | ||
| export declare const TanStackRouterDevtools: (typeof Devtools)['TanStackRouterDevtools']; | ||
| export declare const TanStackRouterDevtoolsInProd: (typeof Devtools)['TanStackRouterDevtools']; | ||
| export declare const TanStackRouterDevtoolsPanel: (typeof DevtoolsPanel)['TanStackRouterDevtoolsPanel']; | ||
| export declare const TanStackRouterDevtoolsPanelInProd: (typeof DevtoolsPanel)['TanStackRouterDevtoolsPanel']; |
| "use strict"; | ||
| Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" }); | ||
| const web = require("solid-js/web"); | ||
| const solidRouter = require("@tanstack/solid-router"); | ||
| const routerDevtoolsCore = require("@tanstack/router-devtools-core"); | ||
| const solidJs = require("solid-js"); | ||
| var _tmpl$ = /* @__PURE__ */ web.template(`<div>`); | ||
| const TanStackRouterDevtools = (props) => { | ||
| const activeRouter = props.router ?? solidRouter.useRouter(); | ||
| const activeRouterState = solidRouter.useRouterState({ | ||
| router: activeRouter | ||
| }); | ||
| const usedProps = { | ||
| ...props, | ||
| router: activeRouter, | ||
| routerState: activeRouterState | ||
| }; | ||
| let devToolRef; | ||
| const [devtools] = solidJs.createSignal(new routerDevtoolsCore.TanStackRouterDevtoolsCore(usedProps)); | ||
| solidJs.createEffect(() => { | ||
| devtools().setRouter(usedProps.router); | ||
| }); | ||
| solidJs.createEffect(() => { | ||
| devtools().setRouterState(usedProps.routerState); | ||
| }); | ||
| solidJs.createEffect(() => { | ||
| devtools().setOptions({ | ||
| initialIsOpen: usedProps.initialIsOpen, | ||
| panelProps: usedProps.panelProps, | ||
| closeButtonProps: usedProps.closeButtonProps, | ||
| toggleButtonProps: usedProps.toggleButtonProps, | ||
| position: usedProps.position, | ||
| containerElement: usedProps.containerElement, | ||
| shadowDOMTarget: usedProps.shadowDOMTarget | ||
| }); | ||
| }); | ||
| solidJs.onMount(() => { | ||
| if (devToolRef) { | ||
| devtools().mount(devToolRef); | ||
| solidJs.onCleanup(() => { | ||
| devtools().unmount(); | ||
| }); | ||
| } | ||
| }); | ||
| return (() => { | ||
| var _el$ = _tmpl$(); | ||
| var _ref$ = devToolRef; | ||
| typeof _ref$ === "function" ? web.use(_ref$, _el$) : devToolRef = _el$; | ||
| return _el$; | ||
| })(); | ||
| }; | ||
| exports.TanStackRouterDevtools = TanStackRouterDevtools; | ||
| //# sourceMappingURL=TanStackRouterDevtools.cjs.map |
| {"version":3,"file":"TanStackRouterDevtools.cjs","sources":["../../src/TanStackRouterDevtools.tsx"],"sourcesContent":["import { useRouter, useRouterState } from '@tanstack/solid-router'\nimport { TanStackRouterDevtoolsCore } from '@tanstack/router-devtools-core'\nimport { createEffect, createSignal, onCleanup, onMount } from 'solid-js'\nimport type { AnyRouter } from '@tanstack/solid-router'\nimport type { Component, JSX } from 'solid-js'\n\ninterface DevtoolsOptions {\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?: JSX.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?: JSX.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?: JSX.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 const TanStackRouterDevtools: Component<DevtoolsOptions> = (\n props,\n): JSX.Element | null => {\n const activeRouter = props.router ?? useRouter()\n const activeRouterState = useRouterState({ router: activeRouter })\n\n const usedProps = {\n ...props,\n router: activeRouter,\n routerState: activeRouterState,\n }\n\n let devToolRef: HTMLDivElement | undefined\n const [devtools] = createSignal(new TanStackRouterDevtoolsCore(usedProps))\n\n // Update devtools when props change\n createEffect(() => {\n devtools().setRouter(usedProps.router)\n })\n\n createEffect(() => {\n devtools().setRouterState(usedProps.routerState)\n })\n\n createEffect(() => {\n devtools().setOptions({\n initialIsOpen: usedProps.initialIsOpen,\n panelProps: usedProps.panelProps,\n closeButtonProps: usedProps.closeButtonProps,\n toggleButtonProps: usedProps.toggleButtonProps,\n position: usedProps.position,\n containerElement: usedProps.containerElement,\n shadowDOMTarget: usedProps.shadowDOMTarget,\n })\n })\n\n onMount(() => {\n if (devToolRef) {\n devtools().mount(devToolRef)\n\n onCleanup(() => {\n devtools().unmount()\n })\n }\n })\n\n return (\n <>\n <div ref={devToolRef} />\n </>\n )\n}\n"],"names":["TanStackRouterDevtools","props","activeRouter","router","useRouter","activeRouterState","useRouterState","usedProps","routerState","devToolRef","devtools","createSignal","TanStackRouterDevtoolsCore","createEffect","setRouter","setRouterState","setOptions","initialIsOpen","panelProps","closeButtonProps","toggleButtonProps","position","containerElement","shadowDOMTarget","onMount","mount","onCleanup","unmount","_el$","_tmpl$","_ref$","_$use"],"mappings":";;;;;;;AA4CaA,MAAAA,yBAAqDA,CAChEC,UACuB;AACjBC,QAAAA,eAAeD,MAAME,UAAUC,sBAAU;AAC/C,QAAMC,oBAAoBC,YAAAA,eAAe;AAAA,IAAEH,QAAQD;AAAAA,EAAAA,CAAc;AAEjE,QAAMK,YAAY;AAAA,IAChB,GAAGN;AAAAA,IACHE,QAAQD;AAAAA,IACRM,aAAaH;AAAAA,EACf;AAEII,MAAAA;AACJ,QAAM,CAACC,QAAQ,IAAIC,QAAAA,aAAa,IAAIC,mBAAAA,2BAA2BL,SAAS,CAAC;AAGzEM,UAAAA,aAAa,MAAM;AACR,eAAEC,UAAUP,UAAUJ,MAAM;AAAA,EAAA,CACtC;AAEDU,UAAAA,aAAa,MAAM;AACR,eAAEE,eAAeR,UAAUC,WAAW;AAAA,EAAA,CAChD;AAEDK,UAAAA,aAAa,MAAM;AACjBH,aAAAA,EAAWM,WAAW;AAAA,MACpBC,eAAeV,UAAUU;AAAAA,MACzBC,YAAYX,UAAUW;AAAAA,MACtBC,kBAAkBZ,UAAUY;AAAAA,MAC5BC,mBAAmBb,UAAUa;AAAAA,MAC7BC,UAAUd,UAAUc;AAAAA,MACpBC,kBAAkBf,UAAUe;AAAAA,MAC5BC,iBAAiBhB,UAAUgB;AAAAA,IAAAA,CAC5B;AAAA,EAAA,CACF;AAEDC,UAAAA,QAAQ,MAAM;AACZ,QAAIf,YAAY;AACL,eAAA,EAAEgB,MAAMhB,UAAU;AAE3BiB,cAAAA,UAAU,MAAM;AACdhB,iBAAAA,EAAWiB,QAAQ;AAAA,MAAA,CACpB;AAAA,IAAA;AAAA,EACH,CACD;AAED,UAAA,MAAA;AAAA,QAAAC,OAAAC,OAAA;AAAA,QAAAC,QAEcrB;AAAU,WAAAqB,UAAAC,aAAAA,IAAAA,IAAAD,OAAAF,IAAA,IAAVnB,aAAUmB;AAAAA,WAAAA;AAAAA,EAAAA,GAAA;AAG1B;;"} |
| import { AnyRouter } from '@tanstack/solid-router'; | ||
| import { Component, JSX } from 'solid-js'; | ||
| interface DevtoolsOptions { | ||
| /** | ||
| * Set this true if you want the dev tools to default to being open | ||
| */ | ||
| initialIsOpen?: boolean; | ||
| /** | ||
| * Use this to add props to the panel. For example, you can add className, style (merge and override default style), etc. | ||
| */ | ||
| panelProps?: JSX.HTMLAttributes<HTMLDivElement>; | ||
| /** | ||
| * 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. | ||
| */ | ||
| closeButtonProps?: JSX.ButtonHTMLAttributes<HTMLButtonElement>; | ||
| /** | ||
| * 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. | ||
| */ | ||
| toggleButtonProps?: JSX.ButtonHTMLAttributes<HTMLButtonElement>; | ||
| /** | ||
| * The position of the TanStack Router logo to open and close the devtools panel. | ||
| * Defaults to 'bottom-left'. | ||
| */ | ||
| position?: 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right'; | ||
| /** | ||
| * Use this to render the devtools inside a different type of container element for a11y purposes. | ||
| * Any string which corresponds to a valid intrinsic JSX element is allowed. | ||
| * Defaults to 'footer'. | ||
| */ | ||
| containerElement?: string | any; | ||
| /** | ||
| * The router instance to use for the devtools. | ||
| */ | ||
| router?: AnyRouter; | ||
| /** | ||
| * Use this to attach the devtool's styles to specific element in the DOM. | ||
| */ | ||
| shadowDOMTarget?: ShadowRoot; | ||
| } | ||
| export declare const TanStackRouterDevtools: Component<DevtoolsOptions>; | ||
| export {}; |
| "use strict"; | ||
| Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" }); | ||
| const web = require("solid-js/web"); | ||
| const solidRouter = require("@tanstack/solid-router"); | ||
| const routerDevtoolsCore = require("@tanstack/router-devtools-core"); | ||
| const solidJs = require("solid-js"); | ||
| var _tmpl$ = /* @__PURE__ */ web.template(`<div>`); | ||
| const TanStackRouterDevtoolsPanel = (props) => { | ||
| const activeRouter = props.router ?? solidRouter.useRouter(); | ||
| const activeRouterState = solidRouter.useRouterState({ | ||
| router: activeRouter | ||
| }); | ||
| const usedProps = { | ||
| ...props, | ||
| router: activeRouter, | ||
| routerState: activeRouterState | ||
| }; | ||
| let devToolRef; | ||
| const [devtools] = solidJs.createSignal(new routerDevtoolsCore.TanStackRouterDevtoolsPanelCore(usedProps)); | ||
| solidJs.createEffect(() => { | ||
| devtools().setRouter(usedProps.router); | ||
| }); | ||
| solidJs.createEffect(() => { | ||
| devtools().setRouterState(usedProps.routerState); | ||
| }); | ||
| solidJs.createEffect(() => { | ||
| devtools().setOptions({ | ||
| className: usedProps.className, | ||
| style: usedProps.style, | ||
| shadowDOMTarget: usedProps.shadowDOMTarget | ||
| }); | ||
| }); | ||
| solidJs.onMount(() => { | ||
| if (devToolRef) { | ||
| devtools().mount(devToolRef); | ||
| solidJs.onCleanup(() => { | ||
| devtools().unmount(); | ||
| }); | ||
| } | ||
| }); | ||
| return (() => { | ||
| var _el$ = _tmpl$(); | ||
| var _ref$ = devToolRef; | ||
| typeof _ref$ === "function" ? web.use(_ref$, _el$) : devToolRef = _el$; | ||
| return _el$; | ||
| })(); | ||
| }; | ||
| exports.TanStackRouterDevtoolsPanel = TanStackRouterDevtoolsPanel; | ||
| //# sourceMappingURL=TanStackRouterDevtoolsPanel.cjs.map |
| {"version":3,"file":"TanStackRouterDevtoolsPanel.cjs","sources":["../../src/TanStackRouterDevtoolsPanel.tsx"],"sourcesContent":["import { useRouter, useRouterState } from '@tanstack/solid-router'\nimport { TanStackRouterDevtoolsPanelCore } from '@tanstack/router-devtools-core'\nimport { createEffect, createSignal, onCleanup, onMount } from 'solid-js'\nimport type { AnyRouter } from '@tanstack/solid-router'\nimport type { Component, JSX } from 'solid-js'\n\nexport interface DevtoolsPanelOptions {\n /**\n * The standard React style object used to style a component with inline styles\n */\n style?: JSX.CSSProperties\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: Component<DevtoolsPanelOptions> = (\n props,\n): JSX.Element | null => {\n const activeRouter = props.router ?? useRouter()\n const activeRouterState = useRouterState({ router: activeRouter })\n\n const usedProps = {\n ...props,\n router: activeRouter,\n routerState: activeRouterState,\n }\n\n let devToolRef: HTMLDivElement | undefined\n const [devtools] = createSignal(\n new TanStackRouterDevtoolsPanelCore(usedProps),\n )\n\n // Update devtools when props change\n createEffect(() => {\n devtools().setRouter(usedProps.router)\n })\n\n createEffect(() => {\n devtools().setRouterState(usedProps.routerState)\n })\n\n createEffect(() => {\n devtools().setOptions({\n className: usedProps.className,\n style: usedProps.style,\n shadowDOMTarget: usedProps.shadowDOMTarget,\n })\n })\n\n onMount(() => {\n if (devToolRef) {\n devtools().mount(devToolRef)\n\n onCleanup(() => {\n devtools().unmount()\n })\n }\n })\n\n return (\n <>\n <div ref={devToolRef} />\n </>\n )\n}\n"],"names":["TanStackRouterDevtoolsPanel","props","activeRouter","router","useRouter","activeRouterState","useRouterState","usedProps","routerState","devToolRef","devtools","createSignal","TanStackRouterDevtoolsPanelCore","createEffect","setRouter","setRouterState","setOptions","className","style","shadowDOMTarget","onMount","mount","onCleanup","unmount","_el$","_tmpl$","_ref$","_$use"],"mappings":";;;;;;;AAqCaA,MAAAA,8BAA+DA,CAC1EC,UACuB;AACjBC,QAAAA,eAAeD,MAAME,UAAUC,sBAAU;AAC/C,QAAMC,oBAAoBC,YAAAA,eAAe;AAAA,IAAEH,QAAQD;AAAAA,EAAAA,CAAc;AAEjE,QAAMK,YAAY;AAAA,IAChB,GAAGN;AAAAA,IACHE,QAAQD;AAAAA,IACRM,aAAaH;AAAAA,EACf;AAEII,MAAAA;AACJ,QAAM,CAACC,QAAQ,IAAIC,QAAAA,aACjB,IAAIC,mBAAAA,gCAAgCL,SAAS,CAC/C;AAGAM,UAAAA,aAAa,MAAM;AACR,eAAEC,UAAUP,UAAUJ,MAAM;AAAA,EAAA,CACtC;AAEDU,UAAAA,aAAa,MAAM;AACR,eAAEE,eAAeR,UAAUC,WAAW;AAAA,EAAA,CAChD;AAEDK,UAAAA,aAAa,MAAM;AACjBH,aAAAA,EAAWM,WAAW;AAAA,MACpBC,WAAWV,UAAUU;AAAAA,MACrBC,OAAOX,UAAUW;AAAAA,MACjBC,iBAAiBZ,UAAUY;AAAAA,IAAAA,CAC5B;AAAA,EAAA,CACF;AAEDC,UAAAA,QAAQ,MAAM;AACZ,QAAIX,YAAY;AACL,eAAA,EAAEY,MAAMZ,UAAU;AAE3Ba,cAAAA,UAAU,MAAM;AACdZ,iBAAAA,EAAWa,QAAQ;AAAA,MAAA,CACpB;AAAA,IAAA;AAAA,EACH,CACD;AAED,UAAA,MAAA;AAAA,QAAAC,OAAAC,OAAA;AAAA,QAAAC,QAEcjB;AAAU,WAAAiB,UAAAC,aAAAA,IAAAA,IAAAD,OAAAF,IAAA,IAAVf,aAAUe;AAAAA,WAAAA;AAAAA,EAAAA,GAAA;AAG1B;;"} |
| import { AnyRouter } from '@tanstack/solid-router'; | ||
| import { Component, JSX } from 'solid-js'; | ||
| export interface DevtoolsPanelOptions { | ||
| /** | ||
| * The standard React style object used to style a component with inline styles | ||
| */ | ||
| style?: JSX.CSSProperties; | ||
| /** | ||
| * The standard React class property used to style a component with classes | ||
| */ | ||
| className?: string; | ||
| /** | ||
| * A boolean variable indicating whether the panel is open or closed | ||
| */ | ||
| isOpen?: boolean; | ||
| /** | ||
| * A function that toggles the open and close state of the panel | ||
| */ | ||
| setIsOpen?: (isOpen: boolean) => void; | ||
| /** | ||
| * Handles the opening and closing the devtools panel | ||
| */ | ||
| handleDragStart?: (e: any) => void; | ||
| /** | ||
| * A boolean variable indicating if the "lite" version of the library is being used | ||
| */ | ||
| router?: AnyRouter; | ||
| /** | ||
| * Use this to attach the devtool's styles to specific element in the DOM. | ||
| */ | ||
| shadowDOMTarget?: ShadowRoot; | ||
| } | ||
| export declare const TanStackRouterDevtoolsPanel: Component<DevtoolsPanelOptions>; |
| import * as Devtools from './TanStackRouterDevtools.js'; | ||
| import * as DevtoolsPanel from './TanStackRouterDevtoolsPanel.js'; | ||
| export declare const TanStackRouterDevtools: (typeof Devtools)['TanStackRouterDevtools']; | ||
| export declare const TanStackRouterDevtoolsInProd: (typeof Devtools)['TanStackRouterDevtools']; | ||
| export declare const TanStackRouterDevtoolsPanel: (typeof DevtoolsPanel)['TanStackRouterDevtoolsPanel']; | ||
| export declare const TanStackRouterDevtoolsPanelInProd: (typeof DevtoolsPanel)['TanStackRouterDevtoolsPanel']; |
| 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; | ||
| } : TanStackRouterDevtools$1; | ||
| const TanStackRouterDevtoolsInProd = TanStackRouterDevtools$1; | ||
| const TanStackRouterDevtoolsPanel = process.env.NODE_ENV !== "development" ? function() { | ||
| return null; | ||
| } : TanStackRouterDevtoolsPanel$1; | ||
| const TanStackRouterDevtoolsPanelInProd = TanStackRouterDevtoolsPanel$1; | ||
| export { | ||
| TanStackRouterDevtools, | ||
| TanStackRouterDevtoolsInProd, | ||
| TanStackRouterDevtoolsPanel, | ||
| TanStackRouterDevtoolsPanelInProd | ||
| }; | ||
| //# sourceMappingURL=index.js.map |
| {"version":3,"file":"index.js","sources":["../../src/index.tsx"],"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":["TanStackRouterDevtools","process","env","NODE_ENV","Devtools","TanStackRouterDevtoolsInProd","TanStackRouterDevtoolsPanel","DevtoolsPanel","TanStackRouterDevtoolsPanelInProd"],"mappings":";;AAGO,MAAMA,yBACXC,QAAQC,IAAIC,aAAa,gBACrB,WAAY;AACH,SAAA;AACT,IACAC;AAEC,MAAMC,+BACXD;AAEK,MAAME,8BACXL,QAAQC,IAAIC,aAAa,gBACrB,WAAY;AACH,SAAA;AACT,IACAI;AAEC,MAAMC,oCACXD;"} |
| import { AnyRouter } from '@tanstack/solid-router'; | ||
| import { Component, JSX } from 'solid-js'; | ||
| interface DevtoolsOptions { | ||
| /** | ||
| * Set this true if you want the dev tools to default to being open | ||
| */ | ||
| initialIsOpen?: boolean; | ||
| /** | ||
| * Use this to add props to the panel. For example, you can add className, style (merge and override default style), etc. | ||
| */ | ||
| panelProps?: JSX.HTMLAttributes<HTMLDivElement>; | ||
| /** | ||
| * 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. | ||
| */ | ||
| closeButtonProps?: JSX.ButtonHTMLAttributes<HTMLButtonElement>; | ||
| /** | ||
| * 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. | ||
| */ | ||
| toggleButtonProps?: JSX.ButtonHTMLAttributes<HTMLButtonElement>; | ||
| /** | ||
| * The position of the TanStack Router logo to open and close the devtools panel. | ||
| * Defaults to 'bottom-left'. | ||
| */ | ||
| position?: 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right'; | ||
| /** | ||
| * Use this to render the devtools inside a different type of container element for a11y purposes. | ||
| * Any string which corresponds to a valid intrinsic JSX element is allowed. | ||
| * Defaults to 'footer'. | ||
| */ | ||
| containerElement?: string | any; | ||
| /** | ||
| * The router instance to use for the devtools. | ||
| */ | ||
| router?: AnyRouter; | ||
| /** | ||
| * Use this to attach the devtool's styles to specific element in the DOM. | ||
| */ | ||
| shadowDOMTarget?: ShadowRoot; | ||
| } | ||
| export declare const TanStackRouterDevtools: Component<DevtoolsOptions>; | ||
| export {}; |
| import { template, use } from "solid-js/web"; | ||
| import { useRouter, useRouterState } from "@tanstack/solid-router"; | ||
| import { TanStackRouterDevtoolsCore } from "@tanstack/router-devtools-core"; | ||
| import { createSignal, createEffect, onMount, onCleanup } from "solid-js"; | ||
| var _tmpl$ = /* @__PURE__ */ template(`<div>`); | ||
| const TanStackRouterDevtools = (props) => { | ||
| const activeRouter = props.router ?? useRouter(); | ||
| const activeRouterState = useRouterState({ | ||
| router: activeRouter | ||
| }); | ||
| const usedProps = { | ||
| ...props, | ||
| router: activeRouter, | ||
| routerState: activeRouterState | ||
| }; | ||
| let devToolRef; | ||
| const [devtools] = createSignal(new TanStackRouterDevtoolsCore(usedProps)); | ||
| createEffect(() => { | ||
| devtools().setRouter(usedProps.router); | ||
| }); | ||
| createEffect(() => { | ||
| devtools().setRouterState(usedProps.routerState); | ||
| }); | ||
| createEffect(() => { | ||
| devtools().setOptions({ | ||
| initialIsOpen: usedProps.initialIsOpen, | ||
| panelProps: usedProps.panelProps, | ||
| closeButtonProps: usedProps.closeButtonProps, | ||
| toggleButtonProps: usedProps.toggleButtonProps, | ||
| position: usedProps.position, | ||
| containerElement: usedProps.containerElement, | ||
| shadowDOMTarget: usedProps.shadowDOMTarget | ||
| }); | ||
| }); | ||
| onMount(() => { | ||
| if (devToolRef) { | ||
| devtools().mount(devToolRef); | ||
| onCleanup(() => { | ||
| devtools().unmount(); | ||
| }); | ||
| } | ||
| }); | ||
| return (() => { | ||
| var _el$ = _tmpl$(); | ||
| var _ref$ = devToolRef; | ||
| typeof _ref$ === "function" ? use(_ref$, _el$) : devToolRef = _el$; | ||
| return _el$; | ||
| })(); | ||
| }; | ||
| export { | ||
| TanStackRouterDevtools | ||
| }; | ||
| //# sourceMappingURL=TanStackRouterDevtools.js.map |
| {"version":3,"file":"TanStackRouterDevtools.js","sources":["../../src/TanStackRouterDevtools.tsx"],"sourcesContent":["import { useRouter, useRouterState } from '@tanstack/solid-router'\nimport { TanStackRouterDevtoolsCore } from '@tanstack/router-devtools-core'\nimport { createEffect, createSignal, onCleanup, onMount } from 'solid-js'\nimport type { AnyRouter } from '@tanstack/solid-router'\nimport type { Component, JSX } from 'solid-js'\n\ninterface DevtoolsOptions {\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?: JSX.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?: JSX.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?: JSX.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 const TanStackRouterDevtools: Component<DevtoolsOptions> = (\n props,\n): JSX.Element | null => {\n const activeRouter = props.router ?? useRouter()\n const activeRouterState = useRouterState({ router: activeRouter })\n\n const usedProps = {\n ...props,\n router: activeRouter,\n routerState: activeRouterState,\n }\n\n let devToolRef: HTMLDivElement | undefined\n const [devtools] = createSignal(new TanStackRouterDevtoolsCore(usedProps))\n\n // Update devtools when props change\n createEffect(() => {\n devtools().setRouter(usedProps.router)\n })\n\n createEffect(() => {\n devtools().setRouterState(usedProps.routerState)\n })\n\n createEffect(() => {\n devtools().setOptions({\n initialIsOpen: usedProps.initialIsOpen,\n panelProps: usedProps.panelProps,\n closeButtonProps: usedProps.closeButtonProps,\n toggleButtonProps: usedProps.toggleButtonProps,\n position: usedProps.position,\n containerElement: usedProps.containerElement,\n shadowDOMTarget: usedProps.shadowDOMTarget,\n })\n })\n\n onMount(() => {\n if (devToolRef) {\n devtools().mount(devToolRef)\n\n onCleanup(() => {\n devtools().unmount()\n })\n }\n })\n\n return (\n <>\n <div ref={devToolRef} />\n </>\n )\n}\n"],"names":["TanStackRouterDevtools","props","activeRouter","router","useRouter","activeRouterState","useRouterState","usedProps","routerState","devToolRef","devtools","createSignal","TanStackRouterDevtoolsCore","createEffect","setRouter","setRouterState","setOptions","initialIsOpen","panelProps","closeButtonProps","toggleButtonProps","position","containerElement","shadowDOMTarget","onMount","mount","onCleanup","unmount","_el$","_tmpl$","_ref$","_$use"],"mappings":";;;;;AA4CaA,MAAAA,yBAAqDA,CAChEC,UACuB;AACjBC,QAAAA,eAAeD,MAAME,UAAUC,UAAU;AAC/C,QAAMC,oBAAoBC,eAAe;AAAA,IAAEH,QAAQD;AAAAA,EAAAA,CAAc;AAEjE,QAAMK,YAAY;AAAA,IAChB,GAAGN;AAAAA,IACHE,QAAQD;AAAAA,IACRM,aAAaH;AAAAA,EACf;AAEII,MAAAA;AACJ,QAAM,CAACC,QAAQ,IAAIC,aAAa,IAAIC,2BAA2BL,SAAS,CAAC;AAGzEM,eAAa,MAAM;AACR,eAAEC,UAAUP,UAAUJ,MAAM;AAAA,EAAA,CACtC;AAEDU,eAAa,MAAM;AACR,eAAEE,eAAeR,UAAUC,WAAW;AAAA,EAAA,CAChD;AAEDK,eAAa,MAAM;AACjBH,aAAAA,EAAWM,WAAW;AAAA,MACpBC,eAAeV,UAAUU;AAAAA,MACzBC,YAAYX,UAAUW;AAAAA,MACtBC,kBAAkBZ,UAAUY;AAAAA,MAC5BC,mBAAmBb,UAAUa;AAAAA,MAC7BC,UAAUd,UAAUc;AAAAA,MACpBC,kBAAkBf,UAAUe;AAAAA,MAC5BC,iBAAiBhB,UAAUgB;AAAAA,IAAAA,CAC5B;AAAA,EAAA,CACF;AAEDC,UAAQ,MAAM;AACZ,QAAIf,YAAY;AACL,eAAA,EAAEgB,MAAMhB,UAAU;AAE3BiB,gBAAU,MAAM;AACdhB,iBAAAA,EAAWiB,QAAQ;AAAA,MAAA,CACpB;AAAA,IAAA;AAAA,EACH,CACD;AAED,UAAA,MAAA;AAAA,QAAAC,OAAAC,OAAA;AAAA,QAAAC,QAEcrB;AAAU,WAAAqB,UAAAC,aAAAA,IAAAD,OAAAF,IAAA,IAAVnB,aAAUmB;AAAAA,WAAAA;AAAAA,EAAAA,GAAA;AAG1B;"} |
| import { AnyRouter } from '@tanstack/solid-router'; | ||
| import { Component, JSX } from 'solid-js'; | ||
| export interface DevtoolsPanelOptions { | ||
| /** | ||
| * The standard React style object used to style a component with inline styles | ||
| */ | ||
| style?: JSX.CSSProperties; | ||
| /** | ||
| * The standard React class property used to style a component with classes | ||
| */ | ||
| className?: string; | ||
| /** | ||
| * A boolean variable indicating whether the panel is open or closed | ||
| */ | ||
| isOpen?: boolean; | ||
| /** | ||
| * A function that toggles the open and close state of the panel | ||
| */ | ||
| setIsOpen?: (isOpen: boolean) => void; | ||
| /** | ||
| * Handles the opening and closing the devtools panel | ||
| */ | ||
| handleDragStart?: (e: any) => void; | ||
| /** | ||
| * A boolean variable indicating if the "lite" version of the library is being used | ||
| */ | ||
| router?: AnyRouter; | ||
| /** | ||
| * Use this to attach the devtool's styles to specific element in the DOM. | ||
| */ | ||
| shadowDOMTarget?: ShadowRoot; | ||
| } | ||
| export declare const TanStackRouterDevtoolsPanel: Component<DevtoolsPanelOptions>; |
| import { template, use } from "solid-js/web"; | ||
| import { useRouter, useRouterState } from "@tanstack/solid-router"; | ||
| import { TanStackRouterDevtoolsPanelCore } from "@tanstack/router-devtools-core"; | ||
| import { createSignal, createEffect, onMount, onCleanup } from "solid-js"; | ||
| var _tmpl$ = /* @__PURE__ */ template(`<div>`); | ||
| const TanStackRouterDevtoolsPanel = (props) => { | ||
| const activeRouter = props.router ?? useRouter(); | ||
| const activeRouterState = useRouterState({ | ||
| router: activeRouter | ||
| }); | ||
| const usedProps = { | ||
| ...props, | ||
| router: activeRouter, | ||
| routerState: activeRouterState | ||
| }; | ||
| let devToolRef; | ||
| const [devtools] = createSignal(new TanStackRouterDevtoolsPanelCore(usedProps)); | ||
| createEffect(() => { | ||
| devtools().setRouter(usedProps.router); | ||
| }); | ||
| createEffect(() => { | ||
| devtools().setRouterState(usedProps.routerState); | ||
| }); | ||
| createEffect(() => { | ||
| devtools().setOptions({ | ||
| className: usedProps.className, | ||
| style: usedProps.style, | ||
| shadowDOMTarget: usedProps.shadowDOMTarget | ||
| }); | ||
| }); | ||
| onMount(() => { | ||
| if (devToolRef) { | ||
| devtools().mount(devToolRef); | ||
| onCleanup(() => { | ||
| devtools().unmount(); | ||
| }); | ||
| } | ||
| }); | ||
| return (() => { | ||
| var _el$ = _tmpl$(); | ||
| var _ref$ = devToolRef; | ||
| typeof _ref$ === "function" ? use(_ref$, _el$) : devToolRef = _el$; | ||
| return _el$; | ||
| })(); | ||
| }; | ||
| export { | ||
| TanStackRouterDevtoolsPanel | ||
| }; | ||
| //# sourceMappingURL=TanStackRouterDevtoolsPanel.js.map |
| {"version":3,"file":"TanStackRouterDevtoolsPanel.js","sources":["../../src/TanStackRouterDevtoolsPanel.tsx"],"sourcesContent":["import { useRouter, useRouterState } from '@tanstack/solid-router'\nimport { TanStackRouterDevtoolsPanelCore } from '@tanstack/router-devtools-core'\nimport { createEffect, createSignal, onCleanup, onMount } from 'solid-js'\nimport type { AnyRouter } from '@tanstack/solid-router'\nimport type { Component, JSX } from 'solid-js'\n\nexport interface DevtoolsPanelOptions {\n /**\n * The standard React style object used to style a component with inline styles\n */\n style?: JSX.CSSProperties\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: Component<DevtoolsPanelOptions> = (\n props,\n): JSX.Element | null => {\n const activeRouter = props.router ?? useRouter()\n const activeRouterState = useRouterState({ router: activeRouter })\n\n const usedProps = {\n ...props,\n router: activeRouter,\n routerState: activeRouterState,\n }\n\n let devToolRef: HTMLDivElement | undefined\n const [devtools] = createSignal(\n new TanStackRouterDevtoolsPanelCore(usedProps),\n )\n\n // Update devtools when props change\n createEffect(() => {\n devtools().setRouter(usedProps.router)\n })\n\n createEffect(() => {\n devtools().setRouterState(usedProps.routerState)\n })\n\n createEffect(() => {\n devtools().setOptions({\n className: usedProps.className,\n style: usedProps.style,\n shadowDOMTarget: usedProps.shadowDOMTarget,\n })\n })\n\n onMount(() => {\n if (devToolRef) {\n devtools().mount(devToolRef)\n\n onCleanup(() => {\n devtools().unmount()\n })\n }\n })\n\n return (\n <>\n <div ref={devToolRef} />\n </>\n )\n}\n"],"names":["TanStackRouterDevtoolsPanel","props","activeRouter","router","useRouter","activeRouterState","useRouterState","usedProps","routerState","devToolRef","devtools","createSignal","TanStackRouterDevtoolsPanelCore","createEffect","setRouter","setRouterState","setOptions","className","style","shadowDOMTarget","onMount","mount","onCleanup","unmount","_el$","_tmpl$","_ref$","_$use"],"mappings":";;;;;AAqCaA,MAAAA,8BAA+DA,CAC1EC,UACuB;AACjBC,QAAAA,eAAeD,MAAME,UAAUC,UAAU;AAC/C,QAAMC,oBAAoBC,eAAe;AAAA,IAAEH,QAAQD;AAAAA,EAAAA,CAAc;AAEjE,QAAMK,YAAY;AAAA,IAChB,GAAGN;AAAAA,IACHE,QAAQD;AAAAA,IACRM,aAAaH;AAAAA,EACf;AAEII,MAAAA;AACJ,QAAM,CAACC,QAAQ,IAAIC,aACjB,IAAIC,gCAAgCL,SAAS,CAC/C;AAGAM,eAAa,MAAM;AACR,eAAEC,UAAUP,UAAUJ,MAAM;AAAA,EAAA,CACtC;AAEDU,eAAa,MAAM;AACR,eAAEE,eAAeR,UAAUC,WAAW;AAAA,EAAA,CAChD;AAEDK,eAAa,MAAM;AACjBH,aAAAA,EAAWM,WAAW;AAAA,MACpBC,WAAWV,UAAUU;AAAAA,MACrBC,OAAOX,UAAUW;AAAAA,MACjBC,iBAAiBZ,UAAUY;AAAAA,IAAAA,CAC5B;AAAA,EAAA,CACF;AAEDC,UAAQ,MAAM;AACZ,QAAIX,YAAY;AACL,eAAA,EAAEY,MAAMZ,UAAU;AAE3Ba,gBAAU,MAAM;AACdZ,iBAAAA,EAAWa,QAAQ;AAAA,MAAA,CACpB;AAAA,IAAA;AAAA,EACH,CACD;AAED,UAAA,MAAA;AAAA,QAAAC,OAAAC,OAAA;AAAA,QAAAC,QAEcjB;AAAU,WAAAiB,UAAAC,aAAAA,IAAAD,OAAAF,IAAA,IAAVf,aAAUe;AAAAA,WAAAA;AAAAA,EAAAA,GAAA;AAG1B;"} |
| import * as Devtools from './TanStackRouterDevtools'; | ||
| import * as DevtoolsPanel from './TanStackRouterDevtoolsPanel'; | ||
| export declare const TanStackRouterDevtools: (typeof Devtools)['TanStackRouterDevtools']; | ||
| export declare const TanStackRouterDevtoolsInProd: (typeof Devtools)['TanStackRouterDevtools']; | ||
| export declare const TanStackRouterDevtoolsPanel: (typeof DevtoolsPanel)['TanStackRouterDevtoolsPanel']; | ||
| export declare const TanStackRouterDevtoolsPanelInProd: (typeof DevtoolsPanel)['TanStackRouterDevtoolsPanel']; |
| import * as Devtools from './TanStackRouterDevtools'; | ||
| import * as DevtoolsPanel from './TanStackRouterDevtoolsPanel'; | ||
| export const TanStackRouterDevtools = process.env.NODE_ENV !== 'development' | ||
| ? function () { | ||
| return null; | ||
| } | ||
| : Devtools.TanStackRouterDevtools; | ||
| export const TanStackRouterDevtoolsInProd = Devtools.TanStackRouterDevtools; | ||
| export const TanStackRouterDevtoolsPanel = process.env.NODE_ENV !== 'development' | ||
| ? function () { | ||
| return null; | ||
| } | ||
| : DevtoolsPanel.TanStackRouterDevtoolsPanel; | ||
| export const TanStackRouterDevtoolsPanelInProd = DevtoolsPanel.TanStackRouterDevtoolsPanel; | ||
| //# sourceMappingURL=index.jsx.map |
| {"version":3,"file":"index.jsx","sourceRoot":"","sources":["../../src/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,QAAQ,MAAM,0BAA0B,CAAA;AACpD,OAAO,KAAK,aAAa,MAAM,+BAA+B,CAAA;AAE9D,MAAM,CAAC,MAAM,sBAAsB,GACjC,OAAO,CAAC,GAAG,CAAC,QAAQ,KAAK,aAAa;IACpC,CAAC,CAAC;QACE,OAAO,IAAI,CAAA;IACb,CAAC;IACH,CAAC,CAAC,QAAQ,CAAC,sBAAsB,CAAA;AAErC,MAAM,CAAC,MAAM,4BAA4B,GACvC,QAAQ,CAAC,sBAAsB,CAAA;AAEjC,MAAM,CAAC,MAAM,2BAA2B,GACtC,OAAO,CAAC,GAAG,CAAC,QAAQ,KAAK,aAAa;IACpC,CAAC,CAAC;QACE,OAAO,IAAI,CAAA;IACb,CAAC;IACH,CAAC,CAAC,aAAa,CAAC,2BAA2B,CAAA;AAE/C,MAAM,CAAC,MAAM,iCAAiC,GAC5C,aAAa,CAAC,2BAA2B,CAAA"} |
| import type { AnyRouter } from '@tanstack/solid-router'; | ||
| import type { Component, JSX } from 'solid-js'; | ||
| interface DevtoolsOptions { | ||
| /** | ||
| * Set this true if you want the dev tools to default to being open | ||
| */ | ||
| initialIsOpen?: boolean; | ||
| /** | ||
| * Use this to add props to the panel. For example, you can add className, style (merge and override default style), etc. | ||
| */ | ||
| panelProps?: JSX.HTMLAttributes<HTMLDivElement>; | ||
| /** | ||
| * 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. | ||
| */ | ||
| closeButtonProps?: JSX.ButtonHTMLAttributes<HTMLButtonElement>; | ||
| /** | ||
| * 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. | ||
| */ | ||
| toggleButtonProps?: JSX.ButtonHTMLAttributes<HTMLButtonElement>; | ||
| /** | ||
| * The position of the TanStack Router logo to open and close the devtools panel. | ||
| * Defaults to 'bottom-left'. | ||
| */ | ||
| position?: 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right'; | ||
| /** | ||
| * Use this to render the devtools inside a different type of container element for a11y purposes. | ||
| * Any string which corresponds to a valid intrinsic JSX element is allowed. | ||
| * Defaults to 'footer'. | ||
| */ | ||
| containerElement?: string | any; | ||
| /** | ||
| * The router instance to use for the devtools. | ||
| */ | ||
| router?: AnyRouter; | ||
| /** | ||
| * Use this to attach the devtool's styles to specific element in the DOM. | ||
| */ | ||
| shadowDOMTarget?: ShadowRoot; | ||
| } | ||
| export declare const TanStackRouterDevtools: Component<DevtoolsOptions>; | ||
| export {}; |
| import { useRouter, useRouterState } from '@tanstack/solid-router'; | ||
| import { TanStackRouterDevtoolsCore } from '@tanstack/router-devtools-core'; | ||
| import { createEffect, createSignal, onCleanup, onMount } from 'solid-js'; | ||
| export const TanStackRouterDevtools = (props) => { | ||
| const activeRouter = props.router ?? useRouter(); | ||
| const activeRouterState = useRouterState({ router: activeRouter }); | ||
| const usedProps = { | ||
| ...props, | ||
| router: activeRouter, | ||
| routerState: activeRouterState, | ||
| }; | ||
| let devToolRef; | ||
| const [devtools] = createSignal(new TanStackRouterDevtoolsCore(usedProps)); | ||
| // Update devtools when props change | ||
| createEffect(() => { | ||
| devtools().setRouter(usedProps.router); | ||
| }); | ||
| createEffect(() => { | ||
| devtools().setRouterState(usedProps.routerState); | ||
| }); | ||
| createEffect(() => { | ||
| devtools().setOptions({ | ||
| initialIsOpen: usedProps.initialIsOpen, | ||
| panelProps: usedProps.panelProps, | ||
| closeButtonProps: usedProps.closeButtonProps, | ||
| toggleButtonProps: usedProps.toggleButtonProps, | ||
| position: usedProps.position, | ||
| containerElement: usedProps.containerElement, | ||
| shadowDOMTarget: usedProps.shadowDOMTarget, | ||
| }); | ||
| }); | ||
| onMount(() => { | ||
| if (devToolRef) { | ||
| devtools().mount(devToolRef); | ||
| onCleanup(() => { | ||
| devtools().unmount(); | ||
| }); | ||
| } | ||
| }); | ||
| return (<> | ||
| <div ref={devToolRef}/> | ||
| </>); | ||
| }; | ||
| //# sourceMappingURL=TanStackRouterDevtools.jsx.map |
| {"version":3,"file":"TanStackRouterDevtools.jsx","sourceRoot":"","sources":["../../src/TanStackRouterDevtools.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,cAAc,EAAE,MAAM,wBAAwB,CAAA;AAClE,OAAO,EAAE,0BAA0B,EAAE,MAAM,gCAAgC,CAAA;AAC3E,OAAO,EAAE,YAAY,EAAE,YAAY,EAAE,SAAS,EAAE,OAAO,EAAE,MAAM,UAAU,CAAA;AA0CzE,MAAM,CAAC,MAAM,sBAAsB,GAA+B,CAChE,KAAK,EACe,EAAE;IACtB,MAAM,YAAY,GAAG,KAAK,CAAC,MAAM,IAAI,SAAS,EAAE,CAAA;IAChD,MAAM,iBAAiB,GAAG,cAAc,CAAC,EAAE,MAAM,EAAE,YAAY,EAAE,CAAC,CAAA;IAElE,MAAM,SAAS,GAAG;QAChB,GAAG,KAAK;QACR,MAAM,EAAE,YAAY;QACpB,WAAW,EAAE,iBAAiB;KAC/B,CAAA;IAED,IAAI,UAAsC,CAAA;IAC1C,MAAM,CAAC,QAAQ,CAAC,GAAG,YAAY,CAAC,IAAI,0BAA0B,CAAC,SAAS,CAAC,CAAC,CAAA;IAE1E,oCAAoC;IACpC,YAAY,CAAC,GAAG,EAAE;QAChB,QAAQ,EAAE,CAAC,SAAS,CAAC,SAAS,CAAC,MAAM,CAAC,CAAA;IACxC,CAAC,CAAC,CAAA;IAEF,YAAY,CAAC,GAAG,EAAE;QAChB,QAAQ,EAAE,CAAC,cAAc,CAAC,SAAS,CAAC,WAAW,CAAC,CAAA;IAClD,CAAC,CAAC,CAAA;IAEF,YAAY,CAAC,GAAG,EAAE;QAChB,QAAQ,EAAE,CAAC,UAAU,CAAC;YACpB,aAAa,EAAE,SAAS,CAAC,aAAa;YACtC,UAAU,EAAE,SAAS,CAAC,UAAU;YAChC,gBAAgB,EAAE,SAAS,CAAC,gBAAgB;YAC5C,iBAAiB,EAAE,SAAS,CAAC,iBAAiB;YAC9C,QAAQ,EAAE,SAAS,CAAC,QAAQ;YAC5B,gBAAgB,EAAE,SAAS,CAAC,gBAAgB;YAC5C,eAAe,EAAE,SAAS,CAAC,eAAe;SAC3C,CAAC,CAAA;IACJ,CAAC,CAAC,CAAA;IAEF,OAAO,CAAC,GAAG,EAAE;QACX,IAAI,UAAU,EAAE,CAAC;YACf,QAAQ,EAAE,CAAC,KAAK,CAAC,UAAU,CAAC,CAAA;YAE5B,SAAS,CAAC,GAAG,EAAE;gBACb,QAAQ,EAAE,CAAC,OAAO,EAAE,CAAA;YACtB,CAAC,CAAC,CAAA;QACJ,CAAC;IACH,CAAC,CAAC,CAAA;IAEF,OAAO,CACL,EACE;MAAA,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC,UAAU,CAAC,EACvB;IAAA,GAAG,CACJ,CAAA;AACH,CAAC,CAAA"} |
| import type { AnyRouter } from '@tanstack/solid-router'; | ||
| import type { Component, JSX } from 'solid-js'; | ||
| export interface DevtoolsPanelOptions { | ||
| /** | ||
| * The standard React style object used to style a component with inline styles | ||
| */ | ||
| style?: JSX.CSSProperties; | ||
| /** | ||
| * The standard React class property used to style a component with classes | ||
| */ | ||
| className?: string; | ||
| /** | ||
| * A boolean variable indicating whether the panel is open or closed | ||
| */ | ||
| isOpen?: boolean; | ||
| /** | ||
| * A function that toggles the open and close state of the panel | ||
| */ | ||
| setIsOpen?: (isOpen: boolean) => void; | ||
| /** | ||
| * Handles the opening and closing the devtools panel | ||
| */ | ||
| handleDragStart?: (e: any) => void; | ||
| /** | ||
| * A boolean variable indicating if the "lite" version of the library is being used | ||
| */ | ||
| router?: AnyRouter; | ||
| /** | ||
| * Use this to attach the devtool's styles to specific element in the DOM. | ||
| */ | ||
| shadowDOMTarget?: ShadowRoot; | ||
| } | ||
| export declare const TanStackRouterDevtoolsPanel: Component<DevtoolsPanelOptions>; |
| import { useRouter, useRouterState } from '@tanstack/solid-router'; | ||
| import { TanStackRouterDevtoolsPanelCore } from '@tanstack/router-devtools-core'; | ||
| import { createEffect, createSignal, onCleanup, onMount } from 'solid-js'; | ||
| export const TanStackRouterDevtoolsPanel = (props) => { | ||
| const activeRouter = props.router ?? useRouter(); | ||
| const activeRouterState = useRouterState({ router: activeRouter }); | ||
| const usedProps = { | ||
| ...props, | ||
| router: activeRouter, | ||
| routerState: activeRouterState, | ||
| }; | ||
| let devToolRef; | ||
| const [devtools] = createSignal(new TanStackRouterDevtoolsPanelCore(usedProps)); | ||
| // Update devtools when props change | ||
| createEffect(() => { | ||
| devtools().setRouter(usedProps.router); | ||
| }); | ||
| createEffect(() => { | ||
| devtools().setRouterState(usedProps.routerState); | ||
| }); | ||
| createEffect(() => { | ||
| devtools().setOptions({ | ||
| className: usedProps.className, | ||
| style: usedProps.style, | ||
| shadowDOMTarget: usedProps.shadowDOMTarget, | ||
| }); | ||
| }); | ||
| onMount(() => { | ||
| if (devToolRef) { | ||
| devtools().mount(devToolRef); | ||
| onCleanup(() => { | ||
| devtools().unmount(); | ||
| }); | ||
| } | ||
| }); | ||
| return (<> | ||
| <div ref={devToolRef}/> | ||
| </>); | ||
| }; | ||
| //# sourceMappingURL=TanStackRouterDevtoolsPanel.jsx.map |
| {"version":3,"file":"TanStackRouterDevtoolsPanel.jsx","sourceRoot":"","sources":["../../src/TanStackRouterDevtoolsPanel.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,cAAc,EAAE,MAAM,wBAAwB,CAAA;AAClE,OAAO,EAAE,+BAA+B,EAAE,MAAM,gCAAgC,CAAA;AAChF,OAAO,EAAE,YAAY,EAAE,YAAY,EAAE,SAAS,EAAE,OAAO,EAAE,MAAM,UAAU,CAAA;AAmCzE,MAAM,CAAC,MAAM,2BAA2B,GAAoC,CAC1E,KAAK,EACe,EAAE;IACtB,MAAM,YAAY,GAAG,KAAK,CAAC,MAAM,IAAI,SAAS,EAAE,CAAA;IAChD,MAAM,iBAAiB,GAAG,cAAc,CAAC,EAAE,MAAM,EAAE,YAAY,EAAE,CAAC,CAAA;IAElE,MAAM,SAAS,GAAG;QAChB,GAAG,KAAK;QACR,MAAM,EAAE,YAAY;QACpB,WAAW,EAAE,iBAAiB;KAC/B,CAAA;IAED,IAAI,UAAsC,CAAA;IAC1C,MAAM,CAAC,QAAQ,CAAC,GAAG,YAAY,CAC7B,IAAI,+BAA+B,CAAC,SAAS,CAAC,CAC/C,CAAA;IAED,oCAAoC;IACpC,YAAY,CAAC,GAAG,EAAE;QAChB,QAAQ,EAAE,CAAC,SAAS,CAAC,SAAS,CAAC,MAAM,CAAC,CAAA;IACxC,CAAC,CAAC,CAAA;IAEF,YAAY,CAAC,GAAG,EAAE;QAChB,QAAQ,EAAE,CAAC,cAAc,CAAC,SAAS,CAAC,WAAW,CAAC,CAAA;IAClD,CAAC,CAAC,CAAA;IAEF,YAAY,CAAC,GAAG,EAAE;QAChB,QAAQ,EAAE,CAAC,UAAU,CAAC;YACpB,SAAS,EAAE,SAAS,CAAC,SAAS;YAC9B,KAAK,EAAE,SAAS,CAAC,KAAK;YACtB,eAAe,EAAE,SAAS,CAAC,eAAe;SAC3C,CAAC,CAAA;IACJ,CAAC,CAAC,CAAA;IAEF,OAAO,CAAC,GAAG,EAAE;QACX,IAAI,UAAU,EAAE,CAAC;YACf,QAAQ,EAAE,CAAC,KAAK,CAAC,UAAU,CAAC,CAAA;YAE5B,SAAS,CAAC,GAAG,EAAE;gBACb,QAAQ,EAAE,CAAC,OAAO,EAAE,CAAA;YACtB,CAAC,CAAC,CAAA;QACJ,CAAC;IACH,CAAC,CAAC,CAAA;IAEF,OAAO,CACL,EACE;MAAA,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC,UAAU,CAAC,EACvB;IAAA,GAAG,CACJ,CAAA;AACH,CAAC,CAAA"} |
Major refactor
Supply chain riskPackage has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.
2
-75%8905
-83.48%6
-81.82%181
-73.19%1
Infinity%