New Research: Supply Chain Attack on Axios Pulls Malicious Dependency from npm.Details →
Socket
Book a DemoSign in
Socket

@tanstack/solid-router-devtools

Package Overview
Dependencies
Maintainers
6
Versions
382
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

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

Comparing version
2.0.0-alpha.1
to
2.0.0-alpha.2
+14
-12
dist/cjs/index.cjs

@@ -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.tsx
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.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;AACV,SAAO;AACT,IACAC,yBAAAA;AAEC,MAAMC,+BACXD,yBAAAA;AAEK,MAAME,8BACXL,QAAQC,IAAIC,aAAa,gBACrB,WAAY;AACV,SAAO;AACT,IACAI,8BAAAA;AAEC,MAAMC,oCACXD,8BAAAA;;;;;"}
{"version":3,"file":"index.cjs","names":["Devtools","DevtoolsPanel","TanStackRouterDevtools","process","env","NODE_ENV","TanStackRouterDevtoolsInProd","TanStackRouterDevtoolsPanel","TanStackRouterDevtoolsPanelInProd"],"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"],"mappings":";;;;AAGA,IAAaE,yBAAAA,QAAAA,IAAAA,aACc,gBACrB,WAAY;AACV,QAAO;;AAIf,IAAaI,+BAAAA,+BAAAA;AAGb,IAAaC,8BAAAA,QAAAA,IAAAA,aACc,gBACrB,WAAY;AACV,QAAO;;AAIf,IAAaC,oCAAAA,oCAAAA"}

@@ -1,60 +0,56 @@

"use strict";
Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
const web = require("@solidjs/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
};
const [devToolRef, setDevToolRef] = solidJs.createSignal();
const [devtools] = solidJs.createSignal(new routerDevtoolsCore.TanStackRouterDevtoolsCore(usedProps));
solidJs.createEffect(devtools, (d) => {
d.setRouter(usedProps.router);
});
solidJs.createEffect(devtools, (d) => {
d.setRouterState(usedProps.routerState);
});
solidJs.createEffect(devtools, (d) => {
d.setOptions({
initialIsOpen: usedProps.initialIsOpen,
panelProps: usedProps.panelProps,
closeButtonProps: usedProps.closeButtonProps,
toggleButtonProps: usedProps.toggleButtonProps,
position: usedProps.position,
containerElement: usedProps.containerElement,
shadowDOMTarget: usedProps.shadowDOMTarget
});
});
solidJs.createEffect(() => ({
d: devtools(),
el: devToolRef()
}), ({
d,
el
}) => {
if (el) {
d.mount(el);
solidJs.onCleanup(() => {
d.unmount();
});
}
});
return (() => {
var _el$ = _tmpl$();
web.ref(() => (el) => {
setDevToolRef(el);
}, _el$);
return _el$;
})();
let _solidjs_web = require("@solidjs/web");
let _tanstack_solid_router = require("@tanstack/solid-router");
let _tanstack_router_devtools_core = require("@tanstack/router-devtools-core");
let solid_js = require("solid-js");
//#region src/TanStackRouterDevtools.tsx
var _tmpl$ = /* @__PURE__ */ (0, _solidjs_web.template)(`<div>`);
var TanStackRouterDevtools = (props) => {
const activeRouter = props.router ?? (0, _tanstack_solid_router.useRouter)();
const activeRouterState = (0, _tanstack_solid_router.useRouterState)({ router: activeRouter });
const usedProps = {
...props,
router: activeRouter,
routerState: activeRouterState
};
const [devToolRef, setDevToolRef] = (0, solid_js.createSignal)();
const [devtools] = (0, solid_js.createSignal)(new _tanstack_router_devtools_core.TanStackRouterDevtoolsCore(usedProps));
(0, solid_js.createEffect)(devtools, (d) => {
d.setRouter(usedProps.router);
});
(0, solid_js.createEffect)(devtools, (d) => {
d.setRouterState(usedProps.routerState);
});
(0, solid_js.createEffect)(devtools, (d) => {
d.setOptions({
initialIsOpen: usedProps.initialIsOpen,
panelProps: usedProps.panelProps,
closeButtonProps: usedProps.closeButtonProps,
toggleButtonProps: usedProps.toggleButtonProps,
position: usedProps.position,
containerElement: usedProps.containerElement,
shadowDOMTarget: usedProps.shadowDOMTarget
});
});
(0, solid_js.createEffect)(() => ({
d: devtools(),
el: devToolRef()
}), ({ d, el }) => {
if (el) {
d.mount(el);
(0, solid_js.onCleanup)(() => {
d.unmount();
});
}
});
return (() => {
var _el$ = _tmpl$();
(0, _solidjs_web.ref)(() => (el) => {
setDevToolRef(el);
}, _el$);
return _el$;
})();
};
//#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 { useRouter, useRouterState } from '@tanstack/solid-router'\nimport { TanStackRouterDevtoolsCore } from '@tanstack/router-devtools-core'\nimport { createEffect, createSignal, onCleanup } from 'solid-js'\nimport type { AnyRouter } from '@tanstack/solid-router'\nimport type { Component, JSX } from 'solid-js'\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?: 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<\n TanStackRouterDevtoolsOptions\n> = (props): 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 const [devToolRef, setDevToolRef] = createSignal<HTMLDivElement>()\n const [devtools] = createSignal(new TanStackRouterDevtoolsCore(usedProps))\n\n // Update devtools when props change\n createEffect(devtools, (d) => {\n d.setRouter(usedProps.router)\n })\n\n createEffect(devtools, (d) => {\n d.setRouterState(usedProps.routerState)\n })\n\n createEffect(devtools, (d) => {\n d.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 createEffect(\n () => ({ d: devtools(), el: devToolRef() }),\n ({ d, el }) => {\n if (el) {\n d.mount(el)\n\n onCleanup(() => {\n d.unmount()\n })\n }\n },\n )\n\n return (\n <>\n <div\n ref={(el) => {\n setDevToolRef(el)\n }}\n />\n </>\n )\n}\n"],"names":["TanStackRouterDevtools","props","activeRouter","router","useRouter","activeRouterState","useRouterState","usedProps","routerState","devToolRef","setDevToolRef","createSignal","devtools","TanStackRouterDevtoolsCore","createEffect","d","setRouter","setRouterState","setOptions","initialIsOpen","panelProps","closeButtonProps","toggleButtonProps","position","containerElement","shadowDOMTarget","el","mount","onCleanup","unmount","_el$","_tmpl$","_$ref"],"mappings":";;;;;;;AA4CO,MAAMA,yBAETA,CAACC,UAA8B;AACjC,QAAMC,eAAeD,MAAME,UAAUC,sBAAAA;AACrC,QAAMC,oBAAoBC,YAAAA,eAAe;AAAA,IAAEH,QAAQD;AAAAA,EAAAA,CAAc;AAEjE,QAAMK,YAAY;AAAA,IAChB,GAAGN;AAAAA,IACHE,QAAQD;AAAAA,IACRM,aAAaH;AAAAA,EAAAA;AAGf,QAAM,CAACI,YAAYC,aAAa,IAAIC,qBAAAA;AACpC,QAAM,CAACC,QAAQ,IAAID,QAAAA,aAAa,IAAIE,mBAAAA,2BAA2BN,SAAS,CAAC;AAGzEO,uBAAaF,UAAWG,CAAAA,MAAM;AAC5BA,MAAEC,UAAUT,UAAUJ,MAAM;AAAA,EAC9B,CAAC;AAEDW,uBAAaF,UAAWG,CAAAA,MAAM;AAC5BA,MAAEE,eAAeV,UAAUC,WAAW;AAAA,EACxC,CAAC;AAEDM,uBAAaF,UAAWG,CAAAA,MAAM;AAC5BA,MAAEG,WAAW;AAAA,MACXC,eAAeZ,UAAUY;AAAAA,MACzBC,YAAYb,UAAUa;AAAAA,MACtBC,kBAAkBd,UAAUc;AAAAA,MAC5BC,mBAAmBf,UAAUe;AAAAA,MAC7BC,UAAUhB,UAAUgB;AAAAA,MACpBC,kBAAkBjB,UAAUiB;AAAAA,MAC5BC,iBAAiBlB,UAAUkB;AAAAA,IAAAA,CAC5B;AAAA,EACH,CAAC;AAEDX,UAAAA,aACE,OAAO;AAAA,IAAEC,GAAGH,SAAAA;AAAAA,IAAYc,IAAIjB,WAAAA;AAAAA,EAAW,IACvC,CAAC;AAAA,IAAEM;AAAAA,IAAGW;AAAAA,EAAAA,MAAS;AACb,QAAIA,IAAI;AACNX,QAAEY,MAAMD,EAAE;AAEVE,cAAAA,UAAU,MAAM;AACdb,UAAEc,QAAAA;AAAAA,MACJ,CAAC;AAAA,IACH;AAAA,EACF,CACF;AAEA,UAAA,MAAA;AAAA,QAAAC,OAAAC,OAAAA;AAAAC,QAAAA,IAAA,MAGYN,CAAAA,OAAO;AACXhB,oBAAcgB,EAAE;AAAA,IAClB,GAACI,IAAA;AAAA,WAAAA;AAAAA,EAAA,GAAA;AAIT;;"}
{"version":3,"file":"TanStackRouterDevtools.cjs","names":["useRouter","useRouterState","TanStackRouterDevtoolsCore","createEffect","createSignal","onCleanup","AnyRouter","Component","JSX","TanStackRouterDevtoolsOptions","initialIsOpen","panelProps","HTMLAttributes","HTMLDivElement","closeButtonProps","ButtonHTMLAttributes","HTMLButtonElement","toggleButtonProps","position","containerElement","router","shadowDOMTarget","ShadowRoot","TanStackRouterDevtools","props","Element","activeRouter","activeRouterState","usedProps","routerState","devToolRef","setDevToolRef","devtools","d","setRouter","setRouterState","setOptions","el","mount","unmount","_el$","_tmpl$","_$ref"],"sources":["../../src/TanStackRouterDevtools.tsx"],"sourcesContent":["import { useRouter, useRouterState } from '@tanstack/solid-router'\nimport { TanStackRouterDevtoolsCore } from '@tanstack/router-devtools-core'\nimport { createEffect, createSignal, onCleanup } from 'solid-js'\nimport type { AnyRouter } from '@tanstack/solid-router'\nimport type { Component, JSX } from 'solid-js'\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?: 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<\n TanStackRouterDevtoolsOptions\n> = (props): 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 const [devToolRef, setDevToolRef] = createSignal<HTMLDivElement>()\n const [devtools] = createSignal(new TanStackRouterDevtoolsCore(usedProps))\n\n // Update devtools when props change\n createEffect(devtools, (d) => {\n d.setRouter(usedProps.router)\n })\n\n createEffect(devtools, (d) => {\n d.setRouterState(usedProps.routerState)\n })\n\n createEffect(devtools, (d) => {\n d.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 createEffect(\n () => ({ d: devtools(), el: devToolRef() }),\n ({ d, el }) => {\n if (el) {\n d.mount(el)\n\n onCleanup(() => {\n d.unmount()\n })\n }\n },\n )\n\n return (\n <>\n <div\n ref={(el) => {\n setDevToolRef(el)\n }}\n />\n </>\n )\n}\n"],"mappings":";;;;;;AA4CA,IAAauB,0BAERC,UAA8B;CACjC,MAAME,eAAeF,MAAMJ,WAAAA,GAAAA,uBAAAA,YAAqB;CAChD,MAAMO,qBAAAA,GAAAA,uBAAAA,gBAAmC,EAAEP,QAAQM,cAAc,CAAC;CAElE,MAAME,YAAY;EAChB,GAAGJ;EACHJ,QAAQM;EACRG,aAAaF;EACd;CAED,MAAM,CAACG,YAAYC,kBAAAA,GAAAA,SAAAA,eAA+C;CAClE,MAAM,CAACC,aAAAA,GAAAA,SAAAA,cAAyB,IAAI9B,+BAAAA,2BAA2B0B,UAAU,CAAC;AAG1EzB,EAAAA,GAAAA,SAAAA,cAAa6B,WAAWC,MAAM;AAC5BA,IAAEC,UAAUN,UAAUR,OAAO;GAC7B;AAEFjB,EAAAA,GAAAA,SAAAA,cAAa6B,WAAWC,MAAM;AAC5BA,IAAEE,eAAeP,UAAUC,YAAY;GACvC;AAEF1B,EAAAA,GAAAA,SAAAA,cAAa6B,WAAWC,MAAM;AAC5BA,IAAEG,WAAW;GACX1B,eAAekB,UAAUlB;GACzBC,YAAYiB,UAAUjB;GACtBG,kBAAkBc,UAAUd;GAC5BG,mBAAmBW,UAAUX;GAC7BC,UAAUU,UAAUV;GACpBC,kBAAkBS,UAAUT;GAC5BE,iBAAiBO,UAAUP;GAC5B,CAAC;GACF;AAEFlB,EAAAA,GAAAA,SAAAA,qBACS;EAAE8B,GAAGD,UAAU;EAAEK,IAAIP,YAAW;EAAG,IACzC,EAAEG,GAAGI,SAAS;AACb,MAAIA,IAAI;AACNJ,KAAEK,MAAMD,GAAG;AAEXhC,IAAAA,GAAAA,SAAAA,iBAAgB;AACd4B,MAAEM,SAAS;KACX;;GAGP;AAED,eAAA;EAAA,IAAAC,OAAAC,QAAA;AAAAC,GAAAA,GAAAA,aAAAA,YAGYL,OAAO;AACXN,iBAAcM,GAAG;KAClBG,KAAA;AAAA,SAAAA;KAAA"}

@@ -1,54 +0,50 @@

"use strict";
Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
const web = require("@solidjs/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
};
const [devToolRef, setDevToolRef] = solidJs.createSignal();
const [devtools] = solidJs.createSignal(new routerDevtoolsCore.TanStackRouterDevtoolsPanelCore(usedProps));
solidJs.createEffect(devtools, (d) => {
d.setRouter(usedProps.router);
});
solidJs.createEffect(devtools, (d) => {
d.setRouterState(usedProps.routerState);
});
solidJs.createEffect(devtools, (d) => {
d.setOptions({
className: usedProps.className,
style: usedProps.style,
shadowDOMTarget: usedProps.shadowDOMTarget
});
});
solidJs.createEffect(() => ({
d: devtools(),
el: devToolRef()
}), ({
d,
el
}) => {
if (el) {
d.mount(el);
solidJs.onCleanup(() => {
d.unmount();
});
}
});
return (() => {
var _el$ = _tmpl$();
web.ref(() => setDevToolRef, _el$);
return _el$;
})();
let _solidjs_web = require("@solidjs/web");
let _tanstack_solid_router = require("@tanstack/solid-router");
let _tanstack_router_devtools_core = require("@tanstack/router-devtools-core");
let solid_js = require("solid-js");
//#region src/TanStackRouterDevtoolsPanel.tsx
var _tmpl$ = /* @__PURE__ */ (0, _solidjs_web.template)(`<div>`);
var TanStackRouterDevtoolsPanel = (props) => {
const activeRouter = props.router ?? (0, _tanstack_solid_router.useRouter)();
const activeRouterState = (0, _tanstack_solid_router.useRouterState)({ router: activeRouter });
const usedProps = {
...props,
router: activeRouter,
routerState: activeRouterState
};
const [devToolRef, setDevToolRef] = (0, solid_js.createSignal)();
const [devtools] = (0, solid_js.createSignal)(new _tanstack_router_devtools_core.TanStackRouterDevtoolsPanelCore(usedProps));
(0, solid_js.createEffect)(devtools, (d) => {
d.setRouter(usedProps.router);
});
(0, solid_js.createEffect)(devtools, (d) => {
d.setRouterState(usedProps.routerState);
});
(0, solid_js.createEffect)(devtools, (d) => {
d.setOptions({
className: usedProps.className,
style: usedProps.style,
shadowDOMTarget: usedProps.shadowDOMTarget
});
});
(0, solid_js.createEffect)(() => ({
d: devtools(),
el: devToolRef()
}), ({ d, el }) => {
if (el) {
d.mount(el);
(0, solid_js.onCleanup)(() => {
d.unmount();
});
}
});
return (() => {
var _el$ = _tmpl$();
(0, _solidjs_web.ref)(() => setDevToolRef, _el$);
return _el$;
})();
};
//#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/solid-router'\nimport { TanStackRouterDevtoolsPanelCore } from '@tanstack/router-devtools-core'\nimport { createEffect, createSignal, onCleanup } from 'solid-js'\nimport type { AnyRouter } from '@tanstack/solid-router'\nimport type { Component, JSX } from 'solid-js'\n\nexport interface TanStackRouterDevtoolsPanelOptions {\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<\n TanStackRouterDevtoolsPanelOptions\n> = (props): 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 const [devToolRef, setDevToolRef] = createSignal<HTMLDivElement>()\n const [devtools] = createSignal(\n new TanStackRouterDevtoolsPanelCore(usedProps),\n )\n\n // Update devtools when props change\n createEffect(devtools, (d) => {\n d.setRouter(usedProps.router)\n })\n\n createEffect(devtools, (d) => {\n d.setRouterState(usedProps.routerState)\n })\n\n createEffect(devtools, (d) => {\n d.setOptions({\n className: usedProps.className,\n style: usedProps.style,\n shadowDOMTarget: usedProps.shadowDOMTarget,\n })\n })\n\n createEffect(\n () => ({ d: devtools(), el: devToolRef() }),\n ({ d, el }) => {\n if (el) {\n d.mount(el)\n\n onCleanup(() => {\n d.unmount()\n })\n }\n },\n )\n\n return (\n <>\n <div ref={setDevToolRef} />\n </>\n )\n}\n"],"names":["TanStackRouterDevtoolsPanel","props","activeRouter","router","useRouter","activeRouterState","useRouterState","usedProps","routerState","devToolRef","setDevToolRef","createSignal","devtools","TanStackRouterDevtoolsPanelCore","createEffect","d","setRouter","setRouterState","setOptions","className","style","shadowDOMTarget","el","mount","onCleanup","unmount","_el$","_tmpl$","_$ref"],"mappings":";;;;;;;AAqCO,MAAMA,8BAETA,CAACC,UAA8B;AACjC,QAAMC,eAAeD,MAAME,UAAUC,sBAAAA;AACrC,QAAMC,oBAAoBC,YAAAA,eAAe;AAAA,IAAEH,QAAQD;AAAAA,EAAAA,CAAc;AAEjE,QAAMK,YAAY;AAAA,IAChB,GAAGN;AAAAA,IACHE,QAAQD;AAAAA,IACRM,aAAaH;AAAAA,EAAAA;AAGf,QAAM,CAACI,YAAYC,aAAa,IAAIC,qBAAAA;AACpC,QAAM,CAACC,QAAQ,IAAID,QAAAA,aACjB,IAAIE,mBAAAA,gCAAgCN,SAAS,CAC/C;AAGAO,uBAAaF,UAAWG,CAAAA,MAAM;AAC5BA,MAAEC,UAAUT,UAAUJ,MAAM;AAAA,EAC9B,CAAC;AAEDW,uBAAaF,UAAWG,CAAAA,MAAM;AAC5BA,MAAEE,eAAeV,UAAUC,WAAW;AAAA,EACxC,CAAC;AAEDM,uBAAaF,UAAWG,CAAAA,MAAM;AAC5BA,MAAEG,WAAW;AAAA,MACXC,WAAWZ,UAAUY;AAAAA,MACrBC,OAAOb,UAAUa;AAAAA,MACjBC,iBAAiBd,UAAUc;AAAAA,IAAAA,CAC5B;AAAA,EACH,CAAC;AAEDP,UAAAA,aACE,OAAO;AAAA,IAAEC,GAAGH,SAAAA;AAAAA,IAAYU,IAAIb,WAAAA;AAAAA,EAAW,IACvC,CAAC;AAAA,IAAEM;AAAAA,IAAGO;AAAAA,EAAAA,MAAS;AACb,QAAIA,IAAI;AACNP,QAAEQ,MAAMD,EAAE;AAEVE,cAAAA,UAAU,MAAM;AACdT,UAAEU,QAAAA;AAAAA,MACJ,CAAC;AAAA,IACH;AAAA,EACF,CACF;AAEA,UAAA,MAAA;AAAA,QAAAC,OAAAC,OAAAA;AAAAC,YAAA,MAEclB,eAAagB,IAAA;AAAA,WAAAA;AAAAA,EAAA,GAAA;AAG7B;;"}
{"version":3,"file":"TanStackRouterDevtoolsPanel.cjs","names":["useRouter","useRouterState","TanStackRouterDevtoolsPanelCore","createEffect","createSignal","onCleanup","AnyRouter","Component","JSX","TanStackRouterDevtoolsPanelOptions","style","CSSProperties","className","isOpen","setIsOpen","handleDragStart","e","router","shadowDOMTarget","ShadowRoot","TanStackRouterDevtoolsPanel","props","Element","activeRouter","activeRouterState","usedProps","routerState","devToolRef","setDevToolRef","HTMLDivElement","devtools","d","setRouter","setRouterState","setOptions","el","mount","unmount","_el$","_tmpl$","_$ref"],"sources":["../../src/TanStackRouterDevtoolsPanel.tsx"],"sourcesContent":["import { useRouter, useRouterState } from '@tanstack/solid-router'\nimport { TanStackRouterDevtoolsPanelCore } from '@tanstack/router-devtools-core'\nimport { createEffect, createSignal, onCleanup } from 'solid-js'\nimport type { AnyRouter } from '@tanstack/solid-router'\nimport type { Component, JSX } from 'solid-js'\n\nexport interface TanStackRouterDevtoolsPanelOptions {\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<\n TanStackRouterDevtoolsPanelOptions\n> = (props): 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 const [devToolRef, setDevToolRef] = createSignal<HTMLDivElement>()\n const [devtools] = createSignal(\n new TanStackRouterDevtoolsPanelCore(usedProps),\n )\n\n // Update devtools when props change\n createEffect(devtools, (d) => {\n d.setRouter(usedProps.router)\n })\n\n createEffect(devtools, (d) => {\n d.setRouterState(usedProps.routerState)\n })\n\n createEffect(devtools, (d) => {\n d.setOptions({\n className: usedProps.className,\n style: usedProps.style,\n shadowDOMTarget: usedProps.shadowDOMTarget,\n })\n })\n\n createEffect(\n () => ({ d: devtools(), el: devToolRef() }),\n ({ d, el }) => {\n if (el) {\n d.mount(el)\n\n onCleanup(() => {\n d.unmount()\n })\n }\n },\n )\n\n return (\n <>\n <div ref={setDevToolRef} />\n </>\n )\n}\n"],"mappings":";;;;;;AAqCA,IAAaoB,+BAERC,UAA8B;CACjC,MAAME,eAAeF,MAAMJ,WAAAA,GAAAA,uBAAAA,YAAqB;CAChD,MAAMO,qBAAAA,GAAAA,uBAAAA,gBAAmC,EAAEP,QAAQM,cAAc,CAAC;CAElE,MAAME,YAAY;EAChB,GAAGJ;EACHJ,QAAQM;EACRG,aAAaF;EACd;CAED,MAAM,CAACG,YAAYC,kBAAAA,GAAAA,SAAAA,eAA+C;CAClE,MAAM,CAACE,aAAAA,GAAAA,SAAAA,cACL,IAAI5B,+BAAAA,gCAAgCuB,UACtC,CAAC;AAGDtB,EAAAA,GAAAA,SAAAA,cAAa2B,WAAWC,MAAM;AAC5BA,IAAEC,UAAUP,UAAUR,OAAO;GAC7B;AAEFd,EAAAA,GAAAA,SAAAA,cAAa2B,WAAWC,MAAM;AAC5BA,IAAEE,eAAeR,UAAUC,YAAY;GACvC;AAEFvB,EAAAA,GAAAA,SAAAA,cAAa2B,WAAWC,MAAM;AAC5BA,IAAEG,WAAW;GACXtB,WAAWa,UAAUb;GACrBF,OAAOe,UAAUf;GACjBQ,iBAAiBO,UAAUP;GAC5B,CAAC;GACF;AAEFf,EAAAA,GAAAA,SAAAA,qBACS;EAAE4B,GAAGD,UAAU;EAAEK,IAAIR,YAAW;EAAG,IACzC,EAAEI,GAAGI,SAAS;AACb,MAAIA,IAAI;AACNJ,KAAEK,MAAMD,GAAG;AAEX9B,IAAAA,GAAAA,SAAAA,iBAAgB;AACd0B,MAAEM,SAAS;KACX;;GAGP;AAED,eAAA;EAAA,IAAAC,OAAAC,QAAA;AAAAC,GAAAA,GAAAA,aAAAA,WAEcZ,eAAaU,KAAA;AAAA,SAAAA;KAAA"}
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.tsx
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.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;AACV,SAAO;AACT,IACAC;AAEC,MAAMC,+BACXD;AAEK,MAAME,8BACXL,QAAQC,IAAIC,aAAa,gBACrB,WAAY;AACV,SAAO;AACT,IACAI;AAEC,MAAMC,oCACXD;"}
{"version":3,"file":"index.js","names":["Devtools","DevtoolsPanel","TanStackRouterDevtools","process","env","NODE_ENV","TanStackRouterDevtoolsInProd","TanStackRouterDevtoolsPanel","TanStackRouterDevtoolsPanelInProd"],"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"],"mappings":";;;AAGA,IAAaE,yBAAAA,QAAAA,IAAAA,aACc,gBACrB,WAAY;AACV,QAAO;IAETF;AAEN,IAAaM,+BACXN;AAEF,IAAaO,8BAAAA,QAAAA,IAAAA,aACc,gBACrB,WAAY;AACV,QAAO;IAETN;AAEN,IAAaO,oCACXP"}

@@ -1,60 +0,56 @@

import { template, ref } from "@solidjs/web";
import { ref, template } from "@solidjs/web";
import { useRouter, useRouterState } from "@tanstack/solid-router";
import { TanStackRouterDevtoolsCore } from "@tanstack/router-devtools-core";
import { createSignal, createEffect, onCleanup } from "solid-js";
import { createEffect, createSignal, onCleanup } from "solid-js";
//#region src/TanStackRouterDevtools.tsx
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
};
const [devToolRef, setDevToolRef] = createSignal();
const [devtools] = createSignal(new TanStackRouterDevtoolsCore(usedProps));
createEffect(devtools, (d) => {
d.setRouter(usedProps.router);
});
createEffect(devtools, (d) => {
d.setRouterState(usedProps.routerState);
});
createEffect(devtools, (d) => {
d.setOptions({
initialIsOpen: usedProps.initialIsOpen,
panelProps: usedProps.panelProps,
closeButtonProps: usedProps.closeButtonProps,
toggleButtonProps: usedProps.toggleButtonProps,
position: usedProps.position,
containerElement: usedProps.containerElement,
shadowDOMTarget: usedProps.shadowDOMTarget
});
});
createEffect(() => ({
d: devtools(),
el: devToolRef()
}), ({
d,
el
}) => {
if (el) {
d.mount(el);
onCleanup(() => {
d.unmount();
});
}
});
return (() => {
var _el$ = _tmpl$();
ref(() => (el) => {
setDevToolRef(el);
}, _el$);
return _el$;
})();
var TanStackRouterDevtools = (props) => {
const activeRouter = props.router ?? useRouter();
const activeRouterState = useRouterState({ router: activeRouter });
const usedProps = {
...props,
router: activeRouter,
routerState: activeRouterState
};
const [devToolRef, setDevToolRef] = createSignal();
const [devtools] = createSignal(new TanStackRouterDevtoolsCore(usedProps));
createEffect(devtools, (d) => {
d.setRouter(usedProps.router);
});
createEffect(devtools, (d) => {
d.setRouterState(usedProps.routerState);
});
createEffect(devtools, (d) => {
d.setOptions({
initialIsOpen: usedProps.initialIsOpen,
panelProps: usedProps.panelProps,
closeButtonProps: usedProps.closeButtonProps,
toggleButtonProps: usedProps.toggleButtonProps,
position: usedProps.position,
containerElement: usedProps.containerElement,
shadowDOMTarget: usedProps.shadowDOMTarget
});
});
createEffect(() => ({
d: devtools(),
el: devToolRef()
}), ({ d, el }) => {
if (el) {
d.mount(el);
onCleanup(() => {
d.unmount();
});
}
});
return (() => {
var _el$ = _tmpl$();
ref(() => (el) => {
setDevToolRef(el);
}, _el$);
return _el$;
})();
};
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 { useRouter, useRouterState } from '@tanstack/solid-router'\nimport { TanStackRouterDevtoolsCore } from '@tanstack/router-devtools-core'\nimport { createEffect, createSignal, onCleanup } from 'solid-js'\nimport type { AnyRouter } from '@tanstack/solid-router'\nimport type { Component, JSX } from 'solid-js'\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?: 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<\n TanStackRouterDevtoolsOptions\n> = (props): 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 const [devToolRef, setDevToolRef] = createSignal<HTMLDivElement>()\n const [devtools] = createSignal(new TanStackRouterDevtoolsCore(usedProps))\n\n // Update devtools when props change\n createEffect(devtools, (d) => {\n d.setRouter(usedProps.router)\n })\n\n createEffect(devtools, (d) => {\n d.setRouterState(usedProps.routerState)\n })\n\n createEffect(devtools, (d) => {\n d.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 createEffect(\n () => ({ d: devtools(), el: devToolRef() }),\n ({ d, el }) => {\n if (el) {\n d.mount(el)\n\n onCleanup(() => {\n d.unmount()\n })\n }\n },\n )\n\n return (\n <>\n <div\n ref={(el) => {\n setDevToolRef(el)\n }}\n />\n </>\n )\n}\n"],"names":["TanStackRouterDevtools","props","activeRouter","router","useRouter","activeRouterState","useRouterState","usedProps","routerState","devToolRef","setDevToolRef","createSignal","devtools","TanStackRouterDevtoolsCore","createEffect","d","setRouter","setRouterState","setOptions","initialIsOpen","panelProps","closeButtonProps","toggleButtonProps","position","containerElement","shadowDOMTarget","el","mount","onCleanup","unmount","_el$","_tmpl$","_$ref"],"mappings":";;;;;AA4CO,MAAMA,yBAETA,CAACC,UAA8B;AACjC,QAAMC,eAAeD,MAAME,UAAUC,UAAAA;AACrC,QAAMC,oBAAoBC,eAAe;AAAA,IAAEH,QAAQD;AAAAA,EAAAA,CAAc;AAEjE,QAAMK,YAAY;AAAA,IAChB,GAAGN;AAAAA,IACHE,QAAQD;AAAAA,IACRM,aAAaH;AAAAA,EAAAA;AAGf,QAAM,CAACI,YAAYC,aAAa,IAAIC,aAAAA;AACpC,QAAM,CAACC,QAAQ,IAAID,aAAa,IAAIE,2BAA2BN,SAAS,CAAC;AAGzEO,eAAaF,UAAWG,CAAAA,MAAM;AAC5BA,MAAEC,UAAUT,UAAUJ,MAAM;AAAA,EAC9B,CAAC;AAEDW,eAAaF,UAAWG,CAAAA,MAAM;AAC5BA,MAAEE,eAAeV,UAAUC,WAAW;AAAA,EACxC,CAAC;AAEDM,eAAaF,UAAWG,CAAAA,MAAM;AAC5BA,MAAEG,WAAW;AAAA,MACXC,eAAeZ,UAAUY;AAAAA,MACzBC,YAAYb,UAAUa;AAAAA,MACtBC,kBAAkBd,UAAUc;AAAAA,MAC5BC,mBAAmBf,UAAUe;AAAAA,MAC7BC,UAAUhB,UAAUgB;AAAAA,MACpBC,kBAAkBjB,UAAUiB;AAAAA,MAC5BC,iBAAiBlB,UAAUkB;AAAAA,IAAAA,CAC5B;AAAA,EACH,CAAC;AAEDX,eACE,OAAO;AAAA,IAAEC,GAAGH,SAAAA;AAAAA,IAAYc,IAAIjB,WAAAA;AAAAA,EAAW,IACvC,CAAC;AAAA,IAAEM;AAAAA,IAAGW;AAAAA,EAAAA,MAAS;AACb,QAAIA,IAAI;AACNX,QAAEY,MAAMD,EAAE;AAEVE,gBAAU,MAAM;AACdb,UAAEc,QAAAA;AAAAA,MACJ,CAAC;AAAA,IACH;AAAA,EACF,CACF;AAEA,UAAA,MAAA;AAAA,QAAAC,OAAAC,OAAAA;AAAAC,QAAA,MAGYN,CAAAA,OAAO;AACXhB,oBAAcgB,EAAE;AAAA,IAClB,GAACI,IAAA;AAAA,WAAAA;AAAAA,EAAA,GAAA;AAIT;"}
{"version":3,"file":"TanStackRouterDevtools.js","names":["useRouter","useRouterState","TanStackRouterDevtoolsCore","createEffect","createSignal","onCleanup","AnyRouter","Component","JSX","TanStackRouterDevtoolsOptions","initialIsOpen","panelProps","HTMLAttributes","HTMLDivElement","closeButtonProps","ButtonHTMLAttributes","HTMLButtonElement","toggleButtonProps","position","containerElement","router","shadowDOMTarget","ShadowRoot","TanStackRouterDevtools","props","Element","activeRouter","activeRouterState","usedProps","routerState","devToolRef","setDevToolRef","devtools","d","setRouter","setRouterState","setOptions","el","mount","unmount","_el$","_tmpl$","_$ref"],"sources":["../../src/TanStackRouterDevtools.tsx"],"sourcesContent":["import { useRouter, useRouterState } from '@tanstack/solid-router'\nimport { TanStackRouterDevtoolsCore } from '@tanstack/router-devtools-core'\nimport { createEffect, createSignal, onCleanup } from 'solid-js'\nimport type { AnyRouter } from '@tanstack/solid-router'\nimport type { Component, JSX } from 'solid-js'\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?: 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<\n TanStackRouterDevtoolsOptions\n> = (props): 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 const [devToolRef, setDevToolRef] = createSignal<HTMLDivElement>()\n const [devtools] = createSignal(new TanStackRouterDevtoolsCore(usedProps))\n\n // Update devtools when props change\n createEffect(devtools, (d) => {\n d.setRouter(usedProps.router)\n })\n\n createEffect(devtools, (d) => {\n d.setRouterState(usedProps.routerState)\n })\n\n createEffect(devtools, (d) => {\n d.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 createEffect(\n () => ({ d: devtools(), el: devToolRef() }),\n ({ d, el }) => {\n if (el) {\n d.mount(el)\n\n onCleanup(() => {\n d.unmount()\n })\n }\n },\n )\n\n return (\n <>\n <div\n ref={(el) => {\n setDevToolRef(el)\n }}\n />\n </>\n )\n}\n"],"mappings":";;;;;;AA4CA,IAAauB,0BAERC,UAA8B;CACjC,MAAME,eAAeF,MAAMJ,UAAUpB,WAAW;CAChD,MAAM2B,oBAAoB1B,eAAe,EAAEmB,QAAQM,cAAc,CAAC;CAElE,MAAME,YAAY;EAChB,GAAGJ;EACHJ,QAAQM;EACRG,aAAaF;EACd;CAED,MAAM,CAACG,YAAYC,iBAAiB3B,cAA8B;CAClE,MAAM,CAAC4B,YAAY5B,aAAa,IAAIF,2BAA2B0B,UAAU,CAAC;AAG1EzB,cAAa6B,WAAWC,MAAM;AAC5BA,IAAEC,UAAUN,UAAUR,OAAO;GAC7B;AAEFjB,cAAa6B,WAAWC,MAAM;AAC5BA,IAAEE,eAAeP,UAAUC,YAAY;GACvC;AAEF1B,cAAa6B,WAAWC,MAAM;AAC5BA,IAAEG,WAAW;GACX1B,eAAekB,UAAUlB;GACzBC,YAAYiB,UAAUjB;GACtBG,kBAAkBc,UAAUd;GAC5BG,mBAAmBW,UAAUX;GAC7BC,UAAUU,UAAUV;GACpBC,kBAAkBS,UAAUT;GAC5BE,iBAAiBO,UAAUP;GAC5B,CAAC;GACF;AAEFlB,qBACS;EAAE8B,GAAGD,UAAU;EAAEK,IAAIP,YAAW;EAAG,IACzC,EAAEG,GAAGI,SAAS;AACb,MAAIA,IAAI;AACNJ,KAAEK,MAAMD,GAAG;AAEXhC,mBAAgB;AACd4B,MAAEM,SAAS;KACX;;GAGP;AAED,eAAA;EAAA,IAAAC,OAAAC,QAAA;AAAAC,aAGYL,OAAO;AACXN,iBAAcM,GAAG;KAClBG,KAAA;AAAA,SAAAA;KAAA"}

@@ -1,54 +0,50 @@

import { template, ref } from "@solidjs/web";
import { ref, template } from "@solidjs/web";
import { useRouter, useRouterState } from "@tanstack/solid-router";
import { TanStackRouterDevtoolsPanelCore } from "@tanstack/router-devtools-core";
import { createSignal, createEffect, onCleanup } from "solid-js";
import { createEffect, createSignal, onCleanup } from "solid-js";
//#region src/TanStackRouterDevtoolsPanel.tsx
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
};
const [devToolRef, setDevToolRef] = createSignal();
const [devtools] = createSignal(new TanStackRouterDevtoolsPanelCore(usedProps));
createEffect(devtools, (d) => {
d.setRouter(usedProps.router);
});
createEffect(devtools, (d) => {
d.setRouterState(usedProps.routerState);
});
createEffect(devtools, (d) => {
d.setOptions({
className: usedProps.className,
style: usedProps.style,
shadowDOMTarget: usedProps.shadowDOMTarget
});
});
createEffect(() => ({
d: devtools(),
el: devToolRef()
}), ({
d,
el
}) => {
if (el) {
d.mount(el);
onCleanup(() => {
d.unmount();
});
}
});
return (() => {
var _el$ = _tmpl$();
ref(() => setDevToolRef, _el$);
return _el$;
})();
var TanStackRouterDevtoolsPanel = (props) => {
const activeRouter = props.router ?? useRouter();
const activeRouterState = useRouterState({ router: activeRouter });
const usedProps = {
...props,
router: activeRouter,
routerState: activeRouterState
};
const [devToolRef, setDevToolRef] = createSignal();
const [devtools] = createSignal(new TanStackRouterDevtoolsPanelCore(usedProps));
createEffect(devtools, (d) => {
d.setRouter(usedProps.router);
});
createEffect(devtools, (d) => {
d.setRouterState(usedProps.routerState);
});
createEffect(devtools, (d) => {
d.setOptions({
className: usedProps.className,
style: usedProps.style,
shadowDOMTarget: usedProps.shadowDOMTarget
});
});
createEffect(() => ({
d: devtools(),
el: devToolRef()
}), ({ d, el }) => {
if (el) {
d.mount(el);
onCleanup(() => {
d.unmount();
});
}
});
return (() => {
var _el$ = _tmpl$();
ref(() => setDevToolRef, _el$);
return _el$;
})();
};
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/solid-router'\nimport { TanStackRouterDevtoolsPanelCore } from '@tanstack/router-devtools-core'\nimport { createEffect, createSignal, onCleanup } from 'solid-js'\nimport type { AnyRouter } from '@tanstack/solid-router'\nimport type { Component, JSX } from 'solid-js'\n\nexport interface TanStackRouterDevtoolsPanelOptions {\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<\n TanStackRouterDevtoolsPanelOptions\n> = (props): 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 const [devToolRef, setDevToolRef] = createSignal<HTMLDivElement>()\n const [devtools] = createSignal(\n new TanStackRouterDevtoolsPanelCore(usedProps),\n )\n\n // Update devtools when props change\n createEffect(devtools, (d) => {\n d.setRouter(usedProps.router)\n })\n\n createEffect(devtools, (d) => {\n d.setRouterState(usedProps.routerState)\n })\n\n createEffect(devtools, (d) => {\n d.setOptions({\n className: usedProps.className,\n style: usedProps.style,\n shadowDOMTarget: usedProps.shadowDOMTarget,\n })\n })\n\n createEffect(\n () => ({ d: devtools(), el: devToolRef() }),\n ({ d, el }) => {\n if (el) {\n d.mount(el)\n\n onCleanup(() => {\n d.unmount()\n })\n }\n },\n )\n\n return (\n <>\n <div ref={setDevToolRef} />\n </>\n )\n}\n"],"names":["TanStackRouterDevtoolsPanel","props","activeRouter","router","useRouter","activeRouterState","useRouterState","usedProps","routerState","devToolRef","setDevToolRef","createSignal","devtools","TanStackRouterDevtoolsPanelCore","createEffect","d","setRouter","setRouterState","setOptions","className","style","shadowDOMTarget","el","mount","onCleanup","unmount","_el$","_tmpl$","_$ref"],"mappings":";;;;;AAqCO,MAAMA,8BAETA,CAACC,UAA8B;AACjC,QAAMC,eAAeD,MAAME,UAAUC,UAAAA;AACrC,QAAMC,oBAAoBC,eAAe;AAAA,IAAEH,QAAQD;AAAAA,EAAAA,CAAc;AAEjE,QAAMK,YAAY;AAAA,IAChB,GAAGN;AAAAA,IACHE,QAAQD;AAAAA,IACRM,aAAaH;AAAAA,EAAAA;AAGf,QAAM,CAACI,YAAYC,aAAa,IAAIC,aAAAA;AACpC,QAAM,CAACC,QAAQ,IAAID,aACjB,IAAIE,gCAAgCN,SAAS,CAC/C;AAGAO,eAAaF,UAAWG,CAAAA,MAAM;AAC5BA,MAAEC,UAAUT,UAAUJ,MAAM;AAAA,EAC9B,CAAC;AAEDW,eAAaF,UAAWG,CAAAA,MAAM;AAC5BA,MAAEE,eAAeV,UAAUC,WAAW;AAAA,EACxC,CAAC;AAEDM,eAAaF,UAAWG,CAAAA,MAAM;AAC5BA,MAAEG,WAAW;AAAA,MACXC,WAAWZ,UAAUY;AAAAA,MACrBC,OAAOb,UAAUa;AAAAA,MACjBC,iBAAiBd,UAAUc;AAAAA,IAAAA,CAC5B;AAAA,EACH,CAAC;AAEDP,eACE,OAAO;AAAA,IAAEC,GAAGH,SAAAA;AAAAA,IAAYU,IAAIb,WAAAA;AAAAA,EAAW,IACvC,CAAC;AAAA,IAAEM;AAAAA,IAAGO;AAAAA,EAAAA,MAAS;AACb,QAAIA,IAAI;AACNP,QAAEQ,MAAMD,EAAE;AAEVE,gBAAU,MAAM;AACdT,UAAEU,QAAAA;AAAAA,MACJ,CAAC;AAAA,IACH;AAAA,EACF,CACF;AAEA,UAAA,MAAA;AAAA,QAAAC,OAAAC,OAAAA;AAAAC,QAAA,MAEclB,eAAagB,IAAA;AAAA,WAAAA;AAAAA,EAAA,GAAA;AAG7B;"}
{"version":3,"file":"TanStackRouterDevtoolsPanel.js","names":["useRouter","useRouterState","TanStackRouterDevtoolsPanelCore","createEffect","createSignal","onCleanup","AnyRouter","Component","JSX","TanStackRouterDevtoolsPanelOptions","style","CSSProperties","className","isOpen","setIsOpen","handleDragStart","e","router","shadowDOMTarget","ShadowRoot","TanStackRouterDevtoolsPanel","props","Element","activeRouter","activeRouterState","usedProps","routerState","devToolRef","setDevToolRef","HTMLDivElement","devtools","d","setRouter","setRouterState","setOptions","el","mount","unmount","_el$","_tmpl$","_$ref"],"sources":["../../src/TanStackRouterDevtoolsPanel.tsx"],"sourcesContent":["import { useRouter, useRouterState } from '@tanstack/solid-router'\nimport { TanStackRouterDevtoolsPanelCore } from '@tanstack/router-devtools-core'\nimport { createEffect, createSignal, onCleanup } from 'solid-js'\nimport type { AnyRouter } from '@tanstack/solid-router'\nimport type { Component, JSX } from 'solid-js'\n\nexport interface TanStackRouterDevtoolsPanelOptions {\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<\n TanStackRouterDevtoolsPanelOptions\n> = (props): 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 const [devToolRef, setDevToolRef] = createSignal<HTMLDivElement>()\n const [devtools] = createSignal(\n new TanStackRouterDevtoolsPanelCore(usedProps),\n )\n\n // Update devtools when props change\n createEffect(devtools, (d) => {\n d.setRouter(usedProps.router)\n })\n\n createEffect(devtools, (d) => {\n d.setRouterState(usedProps.routerState)\n })\n\n createEffect(devtools, (d) => {\n d.setOptions({\n className: usedProps.className,\n style: usedProps.style,\n shadowDOMTarget: usedProps.shadowDOMTarget,\n })\n })\n\n createEffect(\n () => ({ d: devtools(), el: devToolRef() }),\n ({ d, el }) => {\n if (el) {\n d.mount(el)\n\n onCleanup(() => {\n d.unmount()\n })\n }\n },\n )\n\n return (\n <>\n <div ref={setDevToolRef} />\n </>\n )\n}\n"],"mappings":";;;;;;AAqCA,IAAaoB,+BAERC,UAA8B;CACjC,MAAME,eAAeF,MAAMJ,UAAUjB,WAAW;CAChD,MAAMwB,oBAAoBvB,eAAe,EAAEgB,QAAQM,cAAc,CAAC;CAElE,MAAME,YAAY;EAChB,GAAGJ;EACHJ,QAAQM;EACRG,aAAaF;EACd;CAED,MAAM,CAACG,YAAYC,iBAAiBxB,cAA8B;CAClE,MAAM,CAAC0B,YAAY1B,aACjB,IAAIF,gCAAgCuB,UACtC,CAAC;AAGDtB,cAAa2B,WAAWC,MAAM;AAC5BA,IAAEC,UAAUP,UAAUR,OAAO;GAC7B;AAEFd,cAAa2B,WAAWC,MAAM;AAC5BA,IAAEE,eAAeR,UAAUC,YAAY;GACvC;AAEFvB,cAAa2B,WAAWC,MAAM;AAC5BA,IAAEG,WAAW;GACXtB,WAAWa,UAAUb;GACrBF,OAAOe,UAAUf;GACjBQ,iBAAiBO,UAAUP;GAC5B,CAAC;GACF;AAEFf,qBACS;EAAE4B,GAAGD,UAAU;EAAEK,IAAIR,YAAW;EAAG,IACzC,EAAEI,GAAGI,SAAS;AACb,MAAIA,IAAI;AACNJ,KAAEK,MAAMD,GAAG;AAEX9B,mBAAgB;AACd0B,MAAEM,SAAS;KACX;;GAGP;AAED,eAAA;EAAA,IAAAC,OAAAC,QAAA;AAAAC,YAEcZ,eAAaU,KAAA;AAAA,SAAAA;KAAA"}
{
"name": "@tanstack/solid-router-devtools",
"version": "2.0.0-alpha.1",
"version": "2.0.0-alpha.2",
"description": "Modern and scalable routing for Solid applications",

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

"@solidjs/web": "2.0.0-beta.2",
"@tanstack/router-devtools-core": "1.166.7"
"@tanstack/router-devtools-core": "1.166.9"
},

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

"@solidjs/web": "2.0.0-beta.2",
"@tanstack/router-core": "^1.166.7",
"@tanstack/solid-router": "^2.0.0-alpha.1"
"@tanstack/router-core": "^1.167.3",
"@tanstack/solid-router": "^2.0.0-alpha.3"
},

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