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

Comparing version 1.166.8 to 1.166.9

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

dist/cjs/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"}

dist/cjs/TanStackRouterDevtools.cjs

@@ -1,53 +0,52 @@
-"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$;
-  })();
+let solid_js_web = require("solid-js/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, solid_js_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
+	};
+	let devToolRef;
+	const [devtools] = (0, solid_js.createSignal)(new _tanstack_router_devtools_core.TanStackRouterDevtoolsCore(usedProps));
+	(0, solid_js.createEffect)(() => {
+		devtools().setRouter(usedProps.router);
+	});
+	(0, solid_js.createEffect)(() => {
+		devtools().setRouterState(usedProps.routerState);
+	});
+	(0, solid_js.createEffect)(() => {
+		devtools().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.onMount)(() => {
+		if (devToolRef) {
+			devtools().mount(devToolRef);
+			(0, solid_js.onCleanup)(() => {
+				devtools().unmount();
+			});
+		}
+	});
+	return (() => {
+		var _el$ = _tmpl$();
+		var _ref$ = devToolRef;
+		typeof _ref$ === "function" ? (0, solid_js_web.use)(_ref$, _el$) : devToolRef = _el$;
+		return _el$;
+	})();
 };
+//#endregion
 exports.TanStackRouterDevtools = TanStackRouterDevtools;
-//# sourceMappingURL=TanStackRouterDevtools.cjs.map
+
+//# sourceMappingURL=TanStackRouterDevtools.cjs.map

dist/cjs/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, onMount } 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  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":";;;;;;;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,MAAII;AACJ,QAAM,CAACC,QAAQ,IAAIC,QAAAA,aAAa,IAAIC,mBAAAA,2BAA2BL,SAAS,CAAC;AAGzEM,UAAAA,aAAa,MAAM;AACjBH,eAAWI,UAAUP,UAAUJ,MAAM;AAAA,EACvC,CAAC;AAEDU,UAAAA,aAAa,MAAM;AACjBH,eAAWK,eAAeR,UAAUC,WAAW;AAAA,EACjD,CAAC;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,EACH,CAAC;AAEDC,UAAAA,QAAQ,MAAM;AACZ,QAAIf,YAAY;AACdC,eAAAA,EAAWe,MAAMhB,UAAU;AAE3BiB,cAAAA,UAAU,MAAM;AACdhB,iBAAAA,EAAWiB,QAAAA;AAAAA,MACb,CAAC;AAAA,IACH;AAAA,EACF,CAAC;AAED,UAAA,MAAA;AAAA,QAAAC,OAAAC,OAAAA;AAAA,QAAAC,QAEcrB;AAAU,WAAAqB,UAAA,aAAAC,IAAAA,IAAAD,OAAAF,IAAA,IAAVnB,aAAUmB;AAAA,WAAAA;AAAAA,EAAA,GAAA;AAG1B;;"}
+{"version":3,"file":"TanStackRouterDevtools.cjs","names":["useRouter","useRouterState","TanStackRouterDevtoolsCore","createEffect","createSignal","onCleanup","onMount","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","devtools","setRouter","setRouterState","setOptions","mount","unmount","_el$","_tmpl$","_ref$","_$use"],"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\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  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"],"mappings":";;;;;;AA4CA,IAAawB,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,IAAIG;CACJ,MAAM,CAACC,aAAAA,GAAAA,SAAAA,cAAyB,IAAI9B,+BAAAA,2BAA2B2B,UAAU,CAAC;AAG1E1B,EAAAA,GAAAA,SAAAA,oBAAmB;AACjB6B,YAAU,CAACC,UAAUJ,UAAUR,OAAO;GACtC;AAEFlB,EAAAA,GAAAA,SAAAA,oBAAmB;AACjB6B,YAAU,CAACE,eAAeL,UAAUC,YAAY;GAChD;AAEF3B,EAAAA,GAAAA,SAAAA,oBAAmB;AACjB6B,YAAU,CAACG,WAAW;GACpBxB,eAAekB,UAAUlB;GACzBC,YAAYiB,UAAUjB;GACtBG,kBAAkBc,UAAUd;GAC5BG,mBAAmBW,UAAUX;GAC7BC,UAAUU,UAAUV;GACpBC,kBAAkBS,UAAUT;GAC5BE,iBAAiBO,UAAUP;GAC5B,CAAC;GACF;AAEFhB,EAAAA,GAAAA,SAAAA,eAAc;AACZ,MAAIyB,YAAY;AACdC,aAAU,CAACI,MAAML,WAAW;AAE5B1B,IAAAA,GAAAA,SAAAA,iBAAgB;AACd2B,cAAU,CAACK,SAAS;KACpB;;GAEJ;AAEF,eAAA;EAAA,IAAAC,OAAAC,QAAA;EAAA,IAAAC,QAEcT;AAAU,SAAAS,UAAA,cAAA,GAAA,aAAA,KAAAA,OAAAF,KAAA,GAAVP,aAAUO;AAAA,SAAAA;KAAA"}

dist/cjs/TanStackRouterDevtoolsPanel.cjs

@@ -1,49 +0,48 @@
-"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$;
-  })();
+let solid_js_web = require("solid-js/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, solid_js_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
+	};
+	let devToolRef;
+	const [devtools] = (0, solid_js.createSignal)(new _tanstack_router_devtools_core.TanStackRouterDevtoolsPanelCore(usedProps));
+	(0, solid_js.createEffect)(() => {
+		devtools().setRouter(usedProps.router);
+	});
+	(0, solid_js.createEffect)(() => {
+		devtools().setRouterState(usedProps.routerState);
+	});
+	(0, solid_js.createEffect)(() => {
+		devtools().setOptions({
+			className: usedProps.className,
+			style: usedProps.style,
+			shadowDOMTarget: usedProps.shadowDOMTarget
+		});
+	});
+	(0, solid_js.onMount)(() => {
+		if (devToolRef) {
+			devtools().mount(devToolRef);
+			(0, solid_js.onCleanup)(() => {
+				devtools().unmount();
+			});
+		}
+	});
+	return (() => {
+		var _el$ = _tmpl$();
+		var _ref$ = devToolRef;
+		typeof _ref$ === "function" ? (0, solid_js_web.use)(_ref$, _el$) : devToolRef = _el$;
+		return _el$;
+	})();
 };
+//#endregion
 exports.TanStackRouterDevtoolsPanel = TanStackRouterDevtoolsPanel;
-//# sourceMappingURL=TanStackRouterDevtoolsPanel.cjs.map
+
+//# sourceMappingURL=TanStackRouterDevtoolsPanel.cjs.map

dist/cjs/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, onMount } 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  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":";;;;;;;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,MAAII;AACJ,QAAM,CAACC,QAAQ,IAAIC,QAAAA,aACjB,IAAIC,mBAAAA,gCAAgCL,SAAS,CAC/C;AAGAM,UAAAA,aAAa,MAAM;AACjBH,eAAWI,UAAUP,UAAUJ,MAAM;AAAA,EACvC,CAAC;AAEDU,UAAAA,aAAa,MAAM;AACjBH,eAAWK,eAAeR,UAAUC,WAAW;AAAA,EACjD,CAAC;AAEDK,UAAAA,aAAa,MAAM;AACjBH,aAAAA,EAAWM,WAAW;AAAA,MACpBC,WAAWV,UAAUU;AAAAA,MACrBC,OAAOX,UAAUW;AAAAA,MACjBC,iBAAiBZ,UAAUY;AAAAA,IAAAA,CAC5B;AAAA,EACH,CAAC;AAEDC,UAAAA,QAAQ,MAAM;AACZ,QAAIX,YAAY;AACdC,eAAAA,EAAWW,MAAMZ,UAAU;AAE3Ba,cAAAA,UAAU,MAAM;AACdZ,iBAAAA,EAAWa,QAAAA;AAAAA,MACb,CAAC;AAAA,IACH;AAAA,EACF,CAAC;AAED,UAAA,MAAA;AAAA,QAAAC,OAAAC,OAAAA;AAAA,QAAAC,QAEcjB;AAAU,WAAAiB,UAAA,aAAAC,IAAAA,IAAAD,OAAAF,IAAA,IAAVf,aAAUe;AAAA,WAAAA;AAAAA,EAAA,GAAA;AAG1B;;"}
+{"version":3,"file":"TanStackRouterDevtoolsPanel.cjs","names":["useRouter","useRouterState","TanStackRouterDevtoolsPanelCore","createEffect","createSignal","onCleanup","onMount","AnyRouter","Component","JSX","TanStackRouterDevtoolsPanelOptions","style","CSSProperties","className","isOpen","setIsOpen","handleDragStart","e","router","shadowDOMTarget","ShadowRoot","TanStackRouterDevtoolsPanel","props","Element","activeRouter","activeRouterState","usedProps","routerState","devToolRef","HTMLDivElement","devtools","setRouter","setRouterState","setOptions","mount","unmount","_el$","_tmpl$","_ref$","_$use"],"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 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  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"],"mappings":";;;;;;AAqCA,IAAaqB,+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,IAAIG;CACJ,MAAM,CAACE,aAAAA,GAAAA,SAAAA,cACL,IAAI5B,+BAAAA,gCAAgCwB,UACtC,CAAC;AAGDvB,EAAAA,GAAAA,SAAAA,oBAAmB;AACjB2B,YAAU,CAACC,UAAUL,UAAUR,OAAO;GACtC;AAEFf,EAAAA,GAAAA,SAAAA,oBAAmB;AACjB2B,YAAU,CAACE,eAAeN,UAAUC,YAAY;GAChD;AAEFxB,EAAAA,GAAAA,SAAAA,oBAAmB;AACjB2B,YAAU,CAACG,WAAW;GACpBpB,WAAWa,UAAUb;GACrBF,OAAOe,UAAUf;GACjBQ,iBAAiBO,UAAUP;GAC5B,CAAC;GACF;AAEFb,EAAAA,GAAAA,SAAAA,eAAc;AACZ,MAAIsB,YAAY;AACdE,aAAU,CAACI,MAAMN,WAAW;AAE5BvB,IAAAA,GAAAA,SAAAA,iBAAgB;AACdyB,cAAU,CAACK,SAAS;KACpB;;GAEJ;AAEF,eAAA;EAAA,IAAAC,OAAAC,QAAA;EAAA,IAAAC,QAEcV;AAAU,SAAAU,UAAA,cAAA,GAAA,aAAA,KAAAA,OAAAF,KAAA,GAAVR,aAAUQ;AAAA,SAAAA;KAAA"}

dist/esm/index.js

 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

dist/esm/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"}

dist/esm/TanStackRouterDevtools.js

 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";
+import { createEffect, createSignal, onCleanup, onMount } 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
-  };
-  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$;
-  })();
+var 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
+//#endregion
+export { TanStackRouterDevtools };
+
+//# sourceMappingURL=TanStackRouterDevtools.js.map

dist/esm/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, onMount } 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  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":";;;;;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,MAAII;AACJ,QAAM,CAACC,QAAQ,IAAIC,aAAa,IAAIC,2BAA2BL,SAAS,CAAC;AAGzEM,eAAa,MAAM;AACjBH,eAAWI,UAAUP,UAAUJ,MAAM;AAAA,EACvC,CAAC;AAEDU,eAAa,MAAM;AACjBH,eAAWK,eAAeR,UAAUC,WAAW;AAAA,EACjD,CAAC;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,EACH,CAAC;AAEDC,UAAQ,MAAM;AACZ,QAAIf,YAAY;AACdC,eAAAA,EAAWe,MAAMhB,UAAU;AAE3BiB,gBAAU,MAAM;AACdhB,iBAAAA,EAAWiB,QAAAA;AAAAA,MACb,CAAC;AAAA,IACH;AAAA,EACF,CAAC;AAED,UAAA,MAAA;AAAA,QAAAC,OAAAC,OAAAA;AAAA,QAAAC,QAEcrB;AAAU,WAAAqB,UAAA,aAAAC,IAAAD,OAAAF,IAAA,IAAVnB,aAAUmB;AAAA,WAAAA;AAAAA,EAAA,GAAA;AAG1B;"}
+{"version":3,"file":"TanStackRouterDevtools.js","names":["useRouter","useRouterState","TanStackRouterDevtoolsCore","createEffect","createSignal","onCleanup","onMount","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","devtools","setRouter","setRouterState","setOptions","mount","unmount","_el$","_tmpl$","_ref$","_$use"],"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\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  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"],"mappings":";;;;;;AA4CA,IAAawB,0BAERC,UAA8B;CACjC,MAAME,eAAeF,MAAMJ,UAAUrB,WAAW;CAChD,MAAM4B,oBAAoB3B,eAAe,EAAEoB,QAAQM,cAAc,CAAC;CAElE,MAAME,YAAY;EAChB,GAAGJ;EACHJ,QAAQM;EACRG,aAAaF;EACd;CAED,IAAIG;CACJ,MAAM,CAACC,YAAY5B,aAAa,IAAIF,2BAA2B2B,UAAU,CAAC;AAG1E1B,oBAAmB;AACjB6B,YAAU,CAACC,UAAUJ,UAAUR,OAAO;GACtC;AAEFlB,oBAAmB;AACjB6B,YAAU,CAACE,eAAeL,UAAUC,YAAY;GAChD;AAEF3B,oBAAmB;AACjB6B,YAAU,CAACG,WAAW;GACpBxB,eAAekB,UAAUlB;GACzBC,YAAYiB,UAAUjB;GACtBG,kBAAkBc,UAAUd;GAC5BG,mBAAmBW,UAAUX;GAC7BC,UAAUU,UAAUV;GACpBC,kBAAkBS,UAAUT;GAC5BE,iBAAiBO,UAAUP;GAC5B,CAAC;GACF;AAEFhB,eAAc;AACZ,MAAIyB,YAAY;AACdC,aAAU,CAACI,MAAML,WAAW;AAE5B1B,mBAAgB;AACd2B,cAAU,CAACK,SAAS;KACpB;;GAEJ;AAEF,eAAA;EAAA,IAAAC,OAAAC,QAAA;EAAA,IAAAC,QAEcT;AAAU,SAAAS,UAAA,aAAAC,IAAAD,OAAAF,KAAA,GAAVP,aAAUO;AAAA,SAAAA;KAAA"}

dist/esm/TanStackRouterDevtoolsPanel.js

 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";
+import { createEffect, createSignal, onCleanup, onMount } 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
-  };
-  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$;
-  })();
+var 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
+//#endregion
+export { TanStackRouterDevtoolsPanel };
+
+//# sourceMappingURL=TanStackRouterDevtoolsPanel.js.map

dist/esm/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, onMount } 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  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":";;;;;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,MAAII;AACJ,QAAM,CAACC,QAAQ,IAAIC,aACjB,IAAIC,gCAAgCL,SAAS,CAC/C;AAGAM,eAAa,MAAM;AACjBH,eAAWI,UAAUP,UAAUJ,MAAM;AAAA,EACvC,CAAC;AAEDU,eAAa,MAAM;AACjBH,eAAWK,eAAeR,UAAUC,WAAW;AAAA,EACjD,CAAC;AAEDK,eAAa,MAAM;AACjBH,aAAAA,EAAWM,WAAW;AAAA,MACpBC,WAAWV,UAAUU;AAAAA,MACrBC,OAAOX,UAAUW;AAAAA,MACjBC,iBAAiBZ,UAAUY;AAAAA,IAAAA,CAC5B;AAAA,EACH,CAAC;AAEDC,UAAQ,MAAM;AACZ,QAAIX,YAAY;AACdC,eAAAA,EAAWW,MAAMZ,UAAU;AAE3Ba,gBAAU,MAAM;AACdZ,iBAAAA,EAAWa,QAAAA;AAAAA,MACb,CAAC;AAAA,IACH;AAAA,EACF,CAAC;AAED,UAAA,MAAA;AAAA,QAAAC,OAAAC,OAAAA;AAAA,QAAAC,QAEcjB;AAAU,WAAAiB,UAAA,aAAAC,IAAAD,OAAAF,IAAA,IAAVf,aAAUe;AAAA,WAAAA;AAAAA,EAAA,GAAA;AAG1B;"}
+{"version":3,"file":"TanStackRouterDevtoolsPanel.js","names":["useRouter","useRouterState","TanStackRouterDevtoolsPanelCore","createEffect","createSignal","onCleanup","onMount","AnyRouter","Component","JSX","TanStackRouterDevtoolsPanelOptions","style","CSSProperties","className","isOpen","setIsOpen","handleDragStart","e","router","shadowDOMTarget","ShadowRoot","TanStackRouterDevtoolsPanel","props","Element","activeRouter","activeRouterState","usedProps","routerState","devToolRef","HTMLDivElement","devtools","setRouter","setRouterState","setOptions","mount","unmount","_el$","_tmpl$","_ref$","_$use"],"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 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  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"],"mappings":";;;;;;AAqCA,IAAaqB,+BAERC,UAA8B;CACjC,MAAME,eAAeF,MAAMJ,UAAUlB,WAAW;CAChD,MAAMyB,oBAAoBxB,eAAe,EAAEiB,QAAQM,cAAc,CAAC;CAElE,MAAME,YAAY;EAChB,GAAGJ;EACHJ,QAAQM;EACRG,aAAaF;EACd;CAED,IAAIG;CACJ,MAAM,CAACE,YAAY1B,aACjB,IAAIF,gCAAgCwB,UACtC,CAAC;AAGDvB,oBAAmB;AACjB2B,YAAU,CAACC,UAAUL,UAAUR,OAAO;GACtC;AAEFf,oBAAmB;AACjB2B,YAAU,CAACE,eAAeN,UAAUC,YAAY;GAChD;AAEFxB,oBAAmB;AACjB2B,YAAU,CAACG,WAAW;GACpBpB,WAAWa,UAAUb;GACrBF,OAAOe,UAAUf;GACjBQ,iBAAiBO,UAAUP;GAC5B,CAAC;GACF;AAEFb,eAAc;AACZ,MAAIsB,YAAY;AACdE,aAAU,CAACI,MAAMN,WAAW;AAE5BvB,mBAAgB;AACdyB,cAAU,CAACK,SAAS;KACpB;;GAEJ;AAEF,eAAA;EAAA,IAAAC,OAAAC,QAAA;EAAA,IAAAC,QAEcV;AAAU,SAAAU,UAAA,aAAAC,IAAAD,OAAAF,KAAA,GAAVR,aAAUQ;AAAA,SAAAA;KAAA"}

package.json

 {
   "name": "@tanstack/solid-router-devtools",
-  "version": "1.166.8",
+  "version": "1.166.9",
   "description": "Modern and scalable routing for Solid applications",
@@ -56,3 +56,3 @@ "author": "Tanner Linsley",
   "dependencies": {
-    "@tanstack/router-devtools-core": "1.166.8"
+    "@tanstack/router-devtools-core": "1.166.9"
   },
@@ -66,4 +66,4 @@ "devDependencies": {
     "solid-js": "^1.9.10",
-    "@tanstack/router-core": "^1.167.1",
-    "@tanstack/solid-router": "^1.167.1"
+    "@tanstack/router-core": "^1.167.2",
+    "@tanstack/solid-router": "^1.167.2"
   },
@@ -70,0 +70,0 @@ "peerDependenciesMeta": {

New alerts

Environment variable access

Supply chain risk

Package accesses environment variables, which may be a sign of credential stuffing or data theft.

Found 1 instance in 1 package

Fixed alerts

Environment variable access

Supply chain risk

Package accesses environment variables, which may be a sign of credential stuffing or data theft.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

55273

0.33%

Worsened metrics

Lines of code

657

-2.38%

Dependency changes

• + Added

  @tanstack/router-devtools-core@1.166.9
  (transitive)

• - Removed

  @tanstack/router-devtools-core@1.166.8
  (transitive)

• Updated

  @tanstack/router-devtools-core@1.166.9