@tanstack/solid-router-devtools 1.20.3-alpha.1

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2021-present Tanner Linsley
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,5 @@
+<img src="https://static.scarf.sh/a.png?x-pxid=d988eb79-b0fc-4a2b-8514-6a1ab932d188" />
+
+# TanStack Solid Router Devtools
+
+See https://tanstack.com/router/latest/docs/framework/solid/devtools

package/dist/cjs/TanStackRouterDevtools.cjs

@@ -0,0 +1,53 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const web = require("solid-js/web");
+const solidRouter = require("@tanstack/solid-router");
+const routerDevtoolsCore = require("@tanstack/router-devtools-core");
+const solidJs = require("solid-js");
+var _tmpl$ = /* @__PURE__ */ web.template(`<div>`);
+const TanStackRouterDevtools = (props) => {
+  const activeRouter = props.router ?? solidRouter.useRouter();
+  const activeRouterState = solidRouter.useRouterState({
+    router: activeRouter
+  });
+  const usedProps = {
+    ...props,
+    router: activeRouter,
+    routerState: activeRouterState
+  };
+  let devToolRef;
+  const [devtools] = solidJs.createSignal(new routerDevtoolsCore.TanStackRouterDevtoolsCore(usedProps));
+  solidJs.createEffect(() => {
+    devtools().setRouter(usedProps.router);
+  });
+  solidJs.createEffect(() => {
+    devtools().setRouterState(usedProps.routerState);
+  });
+  solidJs.createEffect(() => {
+    devtools().setOptions({
+      initialIsOpen: usedProps.initialIsOpen,
+      panelProps: usedProps.panelProps,
+      closeButtonProps: usedProps.closeButtonProps,
+      toggleButtonProps: usedProps.toggleButtonProps,
+      position: usedProps.position,
+      containerElement: usedProps.containerElement,
+      shadowDOMTarget: usedProps.shadowDOMTarget
+    });
+  });
+  solidJs.onMount(() => {
+    if (devToolRef) {
+      devtools().mount(devToolRef);
+      solidJs.onCleanup(() => {
+        devtools().unmount();
+      });
+    }
+  });
+  return (() => {
+    var _el$ = _tmpl$();
+    var _ref$ = devToolRef;
+    typeof _ref$ === "function" ? web.use(_ref$, _el$) : devToolRef = _el$;
+    return _el$;
+  })();
+};
+exports.TanStackRouterDevtools = TanStackRouterDevtools;
+//# sourceMappingURL=TanStackRouterDevtools.cjs.map

package/dist/cjs/TanStackRouterDevtools.cjs.map

@@ -0,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\ninterface DevtoolsOptions {\n  /**\n   * Set this true if you want the dev tools to default to being open\n   */\n  initialIsOpen?: boolean\n  /**\n   * Use this to add props to the panel. For example, you can add className, style (merge and override default style), etc.\n   */\n  panelProps?: JSX.HTMLAttributes<HTMLDivElement>\n  /**\n   * Use this to add props to the close button. For example, you can add className, style (merge and override default style), onClick (extend default handler), etc.\n   */\n  closeButtonProps?: JSX.ButtonHTMLAttributes<HTMLButtonElement>\n  /**\n   * Use this to add props to the toggle button. For example, you can add className, style (merge and override default style), onClick (extend default handler), etc.\n   */\n  toggleButtonProps?: JSX.ButtonHTMLAttributes<HTMLButtonElement>\n  /**\n   * The position of the TanStack Router logo to open and close the devtools panel.\n   * Defaults to 'bottom-left'.\n   */\n  position?: 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right'\n  /**\n   * Use this to render the devtools inside a different type of container element for a11y purposes.\n   * Any string which corresponds to a valid intrinsic JSX element is allowed.\n   * Defaults to 'footer'.\n   */\n  containerElement?: string | any\n  /**\n   * The router instance to use for the devtools.\n   */\n  router?: AnyRouter\n  /**\n   * Use this to attach the devtool's styles to specific element in the DOM.\n   */\n  shadowDOMTarget?: ShadowRoot\n}\n\nexport const TanStackRouterDevtools: Component<DevtoolsOptions> = (\n  props,\n): JSX.Element | null => {\n  const activeRouter = props.router ?? useRouter()\n  const activeRouterState = useRouterState({ router: activeRouter })\n\n  const usedProps = {\n    ...props,\n    router: activeRouter,\n    routerState: activeRouterState,\n  }\n\n  let devToolRef: HTMLDivElement | undefined\n  const [devtools] = createSignal(new TanStackRouterDevtoolsCore(usedProps))\n\n  // Update devtools when props change\n  createEffect(() => {\n    devtools().setRouter(usedProps.router)\n  })\n\n  createEffect(() => {\n    devtools().setRouterState(usedProps.routerState)\n  })\n\n  createEffect(() => {\n    devtools().setOptions({\n      initialIsOpen: usedProps.initialIsOpen,\n      panelProps: usedProps.panelProps,\n      closeButtonProps: usedProps.closeButtonProps,\n      toggleButtonProps: usedProps.toggleButtonProps,\n      position: usedProps.position,\n      containerElement: usedProps.containerElement,\n      shadowDOMTarget: usedProps.shadowDOMTarget,\n    })\n  })\n\n  onMount(() => {\n    if (devToolRef) {\n      devtools().mount(devToolRef)\n\n      onCleanup(() => {\n        devtools().unmount()\n      })\n    }\n  })\n\n  return (\n    <>\n      <div ref={devToolRef} />\n    </>\n  )\n}\n"],"names":["TanStackRouterDevtools","props","activeRouter","router","useRouter","activeRouterState","useRouterState","usedProps","routerState","devToolRef","devtools","createSignal","TanStackRouterDevtoolsCore","createEffect","setRouter","setRouterState","setOptions","initialIsOpen","panelProps","closeButtonProps","toggleButtonProps","position","containerElement","shadowDOMTarget","onMount","mount","onCleanup","unmount","_el$","_tmpl$","_ref$","_$use"],"mappings":";;;;;;;AA4CaA,MAAAA,yBAAqDA,CAChEC,UACuB;AACjBC,QAAAA,eAAeD,MAAME,UAAUC,sBAAU;AAC/C,QAAMC,oBAAoBC,YAAAA,eAAe;AAAA,IAAEH,QAAQD;AAAAA,EAAAA,CAAc;AAEjE,QAAMK,YAAY;AAAA,IAChB,GAAGN;AAAAA,IACHE,QAAQD;AAAAA,IACRM,aAAaH;AAAAA,EACf;AAEII,MAAAA;AACJ,QAAM,CAACC,QAAQ,IAAIC,QAAAA,aAAa,IAAIC,mBAAAA,2BAA2BL,SAAS,CAAC;AAGzEM,UAAAA,aAAa,MAAM;AACR,eAAEC,UAAUP,UAAUJ,MAAM;AAAA,EAAA,CACtC;AAEDU,UAAAA,aAAa,MAAM;AACR,eAAEE,eAAeR,UAAUC,WAAW;AAAA,EAAA,CAChD;AAEDK,UAAAA,aAAa,MAAM;AACjBH,aAAAA,EAAWM,WAAW;AAAA,MACpBC,eAAeV,UAAUU;AAAAA,MACzBC,YAAYX,UAAUW;AAAAA,MACtBC,kBAAkBZ,UAAUY;AAAAA,MAC5BC,mBAAmBb,UAAUa;AAAAA,MAC7BC,UAAUd,UAAUc;AAAAA,MACpBC,kBAAkBf,UAAUe;AAAAA,MAC5BC,iBAAiBhB,UAAUgB;AAAAA,IAAAA,CAC5B;AAAA,EAAA,CACF;AAEDC,UAAAA,QAAQ,MAAM;AACZ,QAAIf,YAAY;AACL,eAAA,EAAEgB,MAAMhB,UAAU;AAE3BiB,cAAAA,UAAU,MAAM;AACdhB,iBAAAA,EAAWiB,QAAQ;AAAA,MAAA,CACpB;AAAA,IAAA;AAAA,EACH,CACD;AAED,UAAA,MAAA;AAAA,QAAAC,OAAAC,OAAA;AAAA,QAAAC,QAEcrB;AAAU,WAAAqB,UAAAC,aAAAA,IAAAA,IAAAD,OAAAF,IAAA,IAAVnB,aAAUmB;AAAAA,WAAAA;AAAAA,EAAAA,GAAA;AAG1B;;"}

package/dist/cjs/TanStackRouterDevtools.d.cts

@@ -0,0 +1,41 @@
+import { AnyRouter } from '@tanstack/solid-router';
+import { Component, JSX } from 'solid-js';
+interface DevtoolsOptions {
+    /**
+     * Set this true if you want the dev tools to default to being open
+     */
+    initialIsOpen?: boolean;
+    /**
+     * Use this to add props to the panel. For example, you can add className, style (merge and override default style), etc.
+     */
+    panelProps?: JSX.HTMLAttributes<HTMLDivElement>;
+    /**
+     * Use this to add props to the close button. For example, you can add className, style (merge and override default style), onClick (extend default handler), etc.
+     */
+    closeButtonProps?: JSX.ButtonHTMLAttributes<HTMLButtonElement>;
+    /**
+     * Use this to add props to the toggle button. For example, you can add className, style (merge and override default style), onClick (extend default handler), etc.
+     */
+    toggleButtonProps?: JSX.ButtonHTMLAttributes<HTMLButtonElement>;
+    /**
+     * The position of the TanStack Router logo to open and close the devtools panel.
+     * Defaults to 'bottom-left'.
+     */
+    position?: 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right';
+    /**
+     * Use this to render the devtools inside a different type of container element for a11y purposes.
+     * Any string which corresponds to a valid intrinsic JSX element is allowed.
+     * Defaults to 'footer'.
+     */
+    containerElement?: string | any;
+    /**
+     * The router instance to use for the devtools.
+     */
+    router?: AnyRouter;
+    /**
+     * Use this to attach the devtool's styles to specific element in the DOM.
+     */
+    shadowDOMTarget?: ShadowRoot;
+}
+export declare const TanStackRouterDevtools: Component<DevtoolsOptions>;
+export {};

package/dist/cjs/TanStackRouterDevtoolsPanel.cjs

@@ -0,0 +1,49 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const web = require("solid-js/web");
+const solidRouter = require("@tanstack/solid-router");
+const routerDevtoolsCore = require("@tanstack/router-devtools-core");
+const solidJs = require("solid-js");
+var _tmpl$ = /* @__PURE__ */ web.template(`<div>`);
+const TanStackRouterDevtoolsPanel = (props) => {
+  const activeRouter = props.router ?? solidRouter.useRouter();
+  const activeRouterState = solidRouter.useRouterState({
+    router: activeRouter
+  });
+  const usedProps = {
+    ...props,
+    router: activeRouter,
+    routerState: activeRouterState
+  };
+  let devToolRef;
+  const [devtools] = solidJs.createSignal(new routerDevtoolsCore.TanStackRouterDevtoolsPanelCore(usedProps));
+  solidJs.createEffect(() => {
+    devtools().setRouter(usedProps.router);
+  });
+  solidJs.createEffect(() => {
+    devtools().setRouterState(usedProps.routerState);
+  });
+  solidJs.createEffect(() => {
+    devtools().setOptions({
+      className: usedProps.className,
+      style: usedProps.style,
+      shadowDOMTarget: usedProps.shadowDOMTarget
+    });
+  });
+  solidJs.onMount(() => {
+    if (devToolRef) {
+      devtools().mount(devToolRef);
+      solidJs.onCleanup(() => {
+        devtools().unmount();
+      });
+    }
+  });
+  return (() => {
+    var _el$ = _tmpl$();
+    var _ref$ = devToolRef;
+    typeof _ref$ === "function" ? web.use(_ref$, _el$) : devToolRef = _el$;
+    return _el$;
+  })();
+};
+exports.TanStackRouterDevtoolsPanel = TanStackRouterDevtoolsPanel;
+//# sourceMappingURL=TanStackRouterDevtoolsPanel.cjs.map

package/dist/cjs/TanStackRouterDevtoolsPanel.cjs.map

@@ -0,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 DevtoolsPanelOptions {\n  /**\n   * The standard React style object used to style a component with inline styles\n   */\n  style?: JSX.CSSProperties\n  /**\n   * The standard React class property used to style a component with classes\n   */\n  className?: string\n  /**\n   * A boolean variable indicating whether the panel is open or closed\n   */\n  isOpen?: boolean\n  /**\n   * A function that toggles the open and close state of the panel\n   */\n  setIsOpen?: (isOpen: boolean) => void\n  /**\n   * Handles the opening and closing the devtools panel\n   */\n  handleDragStart?: (e: any) => void\n  /**\n   * A boolean variable indicating if the \"lite\" version of the library is being used\n   */\n  router?: AnyRouter\n  /**\n   * Use this to attach the devtool's styles to specific element in the DOM.\n   */\n  shadowDOMTarget?: ShadowRoot\n}\n\nexport const TanStackRouterDevtoolsPanel: Component<DevtoolsPanelOptions> = (\n  props,\n): JSX.Element | null => {\n  const activeRouter = props.router ?? useRouter()\n  const activeRouterState = useRouterState({ router: activeRouter })\n\n  const usedProps = {\n    ...props,\n    router: activeRouter,\n    routerState: activeRouterState,\n  }\n\n  let devToolRef: HTMLDivElement | undefined\n  const [devtools] = createSignal(\n    new TanStackRouterDevtoolsPanelCore(usedProps),\n  )\n\n  // Update devtools when props change\n  createEffect(() => {\n    devtools().setRouter(usedProps.router)\n  })\n\n  createEffect(() => {\n    devtools().setRouterState(usedProps.routerState)\n  })\n\n  createEffect(() => {\n    devtools().setOptions({\n      className: usedProps.className,\n      style: usedProps.style,\n      shadowDOMTarget: usedProps.shadowDOMTarget,\n    })\n  })\n\n  onMount(() => {\n    if (devToolRef) {\n      devtools().mount(devToolRef)\n\n      onCleanup(() => {\n        devtools().unmount()\n      })\n    }\n  })\n\n  return (\n    <>\n      <div ref={devToolRef} />\n    </>\n  )\n}\n"],"names":["TanStackRouterDevtoolsPanel","props","activeRouter","router","useRouter","activeRouterState","useRouterState","usedProps","routerState","devToolRef","devtools","createSignal","TanStackRouterDevtoolsPanelCore","createEffect","setRouter","setRouterState","setOptions","className","style","shadowDOMTarget","onMount","mount","onCleanup","unmount","_el$","_tmpl$","_ref$","_$use"],"mappings":";;;;;;;AAqCaA,MAAAA,8BAA+DA,CAC1EC,UACuB;AACjBC,QAAAA,eAAeD,MAAME,UAAUC,sBAAU;AAC/C,QAAMC,oBAAoBC,YAAAA,eAAe;AAAA,IAAEH,QAAQD;AAAAA,EAAAA,CAAc;AAEjE,QAAMK,YAAY;AAAA,IAChB,GAAGN;AAAAA,IACHE,QAAQD;AAAAA,IACRM,aAAaH;AAAAA,EACf;AAEII,MAAAA;AACJ,QAAM,CAACC,QAAQ,IAAIC,QAAAA,aACjB,IAAIC,mBAAAA,gCAAgCL,SAAS,CAC/C;AAGAM,UAAAA,aAAa,MAAM;AACR,eAAEC,UAAUP,UAAUJ,MAAM;AAAA,EAAA,CACtC;AAEDU,UAAAA,aAAa,MAAM;AACR,eAAEE,eAAeR,UAAUC,WAAW;AAAA,EAAA,CAChD;AAEDK,UAAAA,aAAa,MAAM;AACjBH,aAAAA,EAAWM,WAAW;AAAA,MACpBC,WAAWV,UAAUU;AAAAA,MACrBC,OAAOX,UAAUW;AAAAA,MACjBC,iBAAiBZ,UAAUY;AAAAA,IAAAA,CAC5B;AAAA,EAAA,CACF;AAEDC,UAAAA,QAAQ,MAAM;AACZ,QAAIX,YAAY;AACL,eAAA,EAAEY,MAAMZ,UAAU;AAE3Ba,cAAAA,UAAU,MAAM;AACdZ,iBAAAA,EAAWa,QAAQ;AAAA,MAAA,CACpB;AAAA,IAAA;AAAA,EACH,CACD;AAED,UAAA,MAAA;AAAA,QAAAC,OAAAC,OAAA;AAAA,QAAAC,QAEcjB;AAAU,WAAAiB,UAAAC,aAAAA,IAAAA,IAAAD,OAAAF,IAAA,IAAVf,aAAUe;AAAAA,WAAAA;AAAAA,EAAAA,GAAA;AAG1B;;"}

package/dist/cjs/TanStackRouterDevtoolsPanel.d.cts

@@ -0,0 +1,33 @@
+import { AnyRouter } from '@tanstack/solid-router';
+import { Component, JSX } from 'solid-js';
+export interface DevtoolsPanelOptions {
+    /**
+     * The standard React style object used to style a component with inline styles
+     */
+    style?: JSX.CSSProperties;
+    /**
+     * The standard React class property used to style a component with classes
+     */
+    className?: string;
+    /**
+     * A boolean variable indicating whether the panel is open or closed
+     */
+    isOpen?: boolean;
+    /**
+     * A function that toggles the open and close state of the panel
+     */
+    setIsOpen?: (isOpen: boolean) => void;
+    /**
+     * Handles the opening and closing the devtools panel
+     */
+    handleDragStart?: (e: any) => void;
+    /**
+     * A boolean variable indicating if the "lite" version of the library is being used
+     */
+    router?: AnyRouter;
+    /**
+     * Use this to attach the devtool's styles to specific element in the DOM.
+     */
+    shadowDOMTarget?: ShadowRoot;
+}
+export declare const TanStackRouterDevtoolsPanel: Component<DevtoolsPanelOptions>;

package/dist/cjs/index.cjs

@@ -0,0 +1,17 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const TanStackRouterDevtools$1 = require("./TanStackRouterDevtools.cjs");
+const TanStackRouterDevtoolsPanel$1 = require("./TanStackRouterDevtoolsPanel.cjs");
+const TanStackRouterDevtools = process.env.NODE_ENV !== "development" ? function() {
+  return null;
+} : TanStackRouterDevtools$1.TanStackRouterDevtools;
+const TanStackRouterDevtoolsInProd = TanStackRouterDevtools$1.TanStackRouterDevtools;
+const TanStackRouterDevtoolsPanel = process.env.NODE_ENV !== "development" ? function() {
+  return null;
+} : TanStackRouterDevtoolsPanel$1.TanStackRouterDevtoolsPanel;
+const TanStackRouterDevtoolsPanelInProd = TanStackRouterDevtoolsPanel$1.TanStackRouterDevtoolsPanel;
+exports.TanStackRouterDevtools = TanStackRouterDevtools;
+exports.TanStackRouterDevtoolsInProd = TanStackRouterDevtoolsInProd;
+exports.TanStackRouterDevtoolsPanel = TanStackRouterDevtoolsPanel;
+exports.TanStackRouterDevtoolsPanelInProd = TanStackRouterDevtoolsPanelInProd;
+//# sourceMappingURL=index.cjs.map

package/dist/cjs/index.cjs.map

@@ -0,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;AACH,SAAA;AACT,IACAC,yBAAAA;AAEC,MAAMC,+BACXD,yBAAAA;AAEK,MAAME,8BACXL,QAAQC,IAAIC,aAAa,gBACrB,WAAY;AACH,SAAA;AACT,IACAI,8BAAAA;AAEC,MAAMC,oCACXD,8BAAAA;;;;;"}

package/dist/cjs/index.d.cts

@@ -0,0 +1,6 @@
+import * as Devtools from './TanStackRouterDevtools.cjs';
+import * as DevtoolsPanel from './TanStackRouterDevtoolsPanel.cjs';
+export declare const TanStackRouterDevtools: (typeof Devtools)['TanStackRouterDevtools'];
+export declare const TanStackRouterDevtoolsInProd: (typeof Devtools)['TanStackRouterDevtools'];
+export declare const TanStackRouterDevtoolsPanel: (typeof DevtoolsPanel)['TanStackRouterDevtoolsPanel'];
+export declare const TanStackRouterDevtoolsPanelInProd: (typeof DevtoolsPanel)['TanStackRouterDevtoolsPanel'];

package/dist/esm/TanStackRouterDevtools.d.ts

@@ -0,0 +1,41 @@
+import { AnyRouter } from '@tanstack/solid-router';
+import { Component, JSX } from 'solid-js';
+interface DevtoolsOptions {
+    /**
+     * Set this true if you want the dev tools to default to being open
+     */
+    initialIsOpen?: boolean;
+    /**
+     * Use this to add props to the panel. For example, you can add className, style (merge and override default style), etc.
+     */
+    panelProps?: JSX.HTMLAttributes<HTMLDivElement>;
+    /**
+     * Use this to add props to the close button. For example, you can add className, style (merge and override default style), onClick (extend default handler), etc.
+     */
+    closeButtonProps?: JSX.ButtonHTMLAttributes<HTMLButtonElement>;
+    /**
+     * Use this to add props to the toggle button. For example, you can add className, style (merge and override default style), onClick (extend default handler), etc.
+     */
+    toggleButtonProps?: JSX.ButtonHTMLAttributes<HTMLButtonElement>;
+    /**
+     * The position of the TanStack Router logo to open and close the devtools panel.
+     * Defaults to 'bottom-left'.
+     */
+    position?: 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right';
+    /**
+     * Use this to render the devtools inside a different type of container element for a11y purposes.
+     * Any string which corresponds to a valid intrinsic JSX element is allowed.
+     * Defaults to 'footer'.
+     */
+    containerElement?: string | any;
+    /**
+     * The router instance to use for the devtools.
+     */
+    router?: AnyRouter;
+    /**
+     * Use this to attach the devtool's styles to specific element in the DOM.
+     */
+    shadowDOMTarget?: ShadowRoot;
+}
+export declare const TanStackRouterDevtools: Component<DevtoolsOptions>;
+export {};

package/dist/esm/TanStackRouterDevtools.js

@@ -0,0 +1,53 @@
+import { template, use } from "solid-js/web";
+import { useRouter, useRouterState } from "@tanstack/solid-router";
+import { TanStackRouterDevtoolsCore } from "@tanstack/router-devtools-core";
+import { createSignal, createEffect, onMount, onCleanup } from "solid-js";
+var _tmpl$ = /* @__PURE__ */ template(`<div>`);
+const TanStackRouterDevtools = (props) => {
+  const activeRouter = props.router ?? useRouter();
+  const activeRouterState = useRouterState({
+    router: activeRouter
+  });
+  const usedProps = {
+    ...props,
+    router: activeRouter,
+    routerState: activeRouterState
+  };
+  let devToolRef;
+  const [devtools] = createSignal(new TanStackRouterDevtoolsCore(usedProps));
+  createEffect(() => {
+    devtools().setRouter(usedProps.router);
+  });
+  createEffect(() => {
+    devtools().setRouterState(usedProps.routerState);
+  });
+  createEffect(() => {
+    devtools().setOptions({
+      initialIsOpen: usedProps.initialIsOpen,
+      panelProps: usedProps.panelProps,
+      closeButtonProps: usedProps.closeButtonProps,
+      toggleButtonProps: usedProps.toggleButtonProps,
+      position: usedProps.position,
+      containerElement: usedProps.containerElement,
+      shadowDOMTarget: usedProps.shadowDOMTarget
+    });
+  });
+  onMount(() => {
+    if (devToolRef) {
+      devtools().mount(devToolRef);
+      onCleanup(() => {
+        devtools().unmount();
+      });
+    }
+  });
+  return (() => {
+    var _el$ = _tmpl$();
+    var _ref$ = devToolRef;
+    typeof _ref$ === "function" ? use(_ref$, _el$) : devToolRef = _el$;
+    return _el$;
+  })();
+};
+export {
+  TanStackRouterDevtools
+};
+//# sourceMappingURL=TanStackRouterDevtools.js.map

package/dist/esm/TanStackRouterDevtools.js.map

@@ -0,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\ninterface DevtoolsOptions {\n  /**\n   * Set this true if you want the dev tools to default to being open\n   */\n  initialIsOpen?: boolean\n  /**\n   * Use this to add props to the panel. For example, you can add className, style (merge and override default style), etc.\n   */\n  panelProps?: JSX.HTMLAttributes<HTMLDivElement>\n  /**\n   * Use this to add props to the close button. For example, you can add className, style (merge and override default style), onClick (extend default handler), etc.\n   */\n  closeButtonProps?: JSX.ButtonHTMLAttributes<HTMLButtonElement>\n  /**\n   * Use this to add props to the toggle button. For example, you can add className, style (merge and override default style), onClick (extend default handler), etc.\n   */\n  toggleButtonProps?: JSX.ButtonHTMLAttributes<HTMLButtonElement>\n  /**\n   * The position of the TanStack Router logo to open and close the devtools panel.\n   * Defaults to 'bottom-left'.\n   */\n  position?: 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right'\n  /**\n   * Use this to render the devtools inside a different type of container element for a11y purposes.\n   * Any string which corresponds to a valid intrinsic JSX element is allowed.\n   * Defaults to 'footer'.\n   */\n  containerElement?: string | any\n  /**\n   * The router instance to use for the devtools.\n   */\n  router?: AnyRouter\n  /**\n   * Use this to attach the devtool's styles to specific element in the DOM.\n   */\n  shadowDOMTarget?: ShadowRoot\n}\n\nexport const TanStackRouterDevtools: Component<DevtoolsOptions> = (\n  props,\n): JSX.Element | null => {\n  const activeRouter = props.router ?? useRouter()\n  const activeRouterState = useRouterState({ router: activeRouter })\n\n  const usedProps = {\n    ...props,\n    router: activeRouter,\n    routerState: activeRouterState,\n  }\n\n  let devToolRef: HTMLDivElement | undefined\n  const [devtools] = createSignal(new TanStackRouterDevtoolsCore(usedProps))\n\n  // Update devtools when props change\n  createEffect(() => {\n    devtools().setRouter(usedProps.router)\n  })\n\n  createEffect(() => {\n    devtools().setRouterState(usedProps.routerState)\n  })\n\n  createEffect(() => {\n    devtools().setOptions({\n      initialIsOpen: usedProps.initialIsOpen,\n      panelProps: usedProps.panelProps,\n      closeButtonProps: usedProps.closeButtonProps,\n      toggleButtonProps: usedProps.toggleButtonProps,\n      position: usedProps.position,\n      containerElement: usedProps.containerElement,\n      shadowDOMTarget: usedProps.shadowDOMTarget,\n    })\n  })\n\n  onMount(() => {\n    if (devToolRef) {\n      devtools().mount(devToolRef)\n\n      onCleanup(() => {\n        devtools().unmount()\n      })\n    }\n  })\n\n  return (\n    <>\n      <div ref={devToolRef} />\n    </>\n  )\n}\n"],"names":["TanStackRouterDevtools","props","activeRouter","router","useRouter","activeRouterState","useRouterState","usedProps","routerState","devToolRef","devtools","createSignal","TanStackRouterDevtoolsCore","createEffect","setRouter","setRouterState","setOptions","initialIsOpen","panelProps","closeButtonProps","toggleButtonProps","position","containerElement","shadowDOMTarget","onMount","mount","onCleanup","unmount","_el$","_tmpl$","_ref$","_$use"],"mappings":";;;;;AA4CaA,MAAAA,yBAAqDA,CAChEC,UACuB;AACjBC,QAAAA,eAAeD,MAAME,UAAUC,UAAU;AAC/C,QAAMC,oBAAoBC,eAAe;AAAA,IAAEH,QAAQD;AAAAA,EAAAA,CAAc;AAEjE,QAAMK,YAAY;AAAA,IAChB,GAAGN;AAAAA,IACHE,QAAQD;AAAAA,IACRM,aAAaH;AAAAA,EACf;AAEII,MAAAA;AACJ,QAAM,CAACC,QAAQ,IAAIC,aAAa,IAAIC,2BAA2BL,SAAS,CAAC;AAGzEM,eAAa,MAAM;AACR,eAAEC,UAAUP,UAAUJ,MAAM;AAAA,EAAA,CACtC;AAEDU,eAAa,MAAM;AACR,eAAEE,eAAeR,UAAUC,WAAW;AAAA,EAAA,CAChD;AAEDK,eAAa,MAAM;AACjBH,aAAAA,EAAWM,WAAW;AAAA,MACpBC,eAAeV,UAAUU;AAAAA,MACzBC,YAAYX,UAAUW;AAAAA,MACtBC,kBAAkBZ,UAAUY;AAAAA,MAC5BC,mBAAmBb,UAAUa;AAAAA,MAC7BC,UAAUd,UAAUc;AAAAA,MACpBC,kBAAkBf,UAAUe;AAAAA,MAC5BC,iBAAiBhB,UAAUgB;AAAAA,IAAAA,CAC5B;AAAA,EAAA,CACF;AAEDC,UAAQ,MAAM;AACZ,QAAIf,YAAY;AACL,eAAA,EAAEgB,MAAMhB,UAAU;AAE3BiB,gBAAU,MAAM;AACdhB,iBAAAA,EAAWiB,QAAQ;AAAA,MAAA,CACpB;AAAA,IAAA;AAAA,EACH,CACD;AAED,UAAA,MAAA;AAAA,QAAAC,OAAAC,OAAA;AAAA,QAAAC,QAEcrB;AAAU,WAAAqB,UAAAC,aAAAA,IAAAD,OAAAF,IAAA,IAAVnB,aAAUmB;AAAAA,WAAAA;AAAAA,EAAAA,GAAA;AAG1B;"}

package/dist/esm/TanStackRouterDevtoolsPanel.d.ts

@@ -0,0 +1,33 @@
+import { AnyRouter } from '@tanstack/solid-router';
+import { Component, JSX } from 'solid-js';
+export interface DevtoolsPanelOptions {
+    /**
+     * The standard React style object used to style a component with inline styles
+     */
+    style?: JSX.CSSProperties;
+    /**
+     * The standard React class property used to style a component with classes
+     */
+    className?: string;
+    /**
+     * A boolean variable indicating whether the panel is open or closed
+     */
+    isOpen?: boolean;
+    /**
+     * A function that toggles the open and close state of the panel
+     */
+    setIsOpen?: (isOpen: boolean) => void;
+    /**
+     * Handles the opening and closing the devtools panel
+     */
+    handleDragStart?: (e: any) => void;
+    /**
+     * A boolean variable indicating if the "lite" version of the library is being used
+     */
+    router?: AnyRouter;
+    /**
+     * Use this to attach the devtool's styles to specific element in the DOM.
+     */
+    shadowDOMTarget?: ShadowRoot;
+}
+export declare const TanStackRouterDevtoolsPanel: Component<DevtoolsPanelOptions>;

package/dist/esm/TanStackRouterDevtoolsPanel.js

@@ -0,0 +1,49 @@
+import { template, use } from "solid-js/web";
+import { useRouter, useRouterState } from "@tanstack/solid-router";
+import { TanStackRouterDevtoolsPanelCore } from "@tanstack/router-devtools-core";
+import { createSignal, createEffect, onMount, onCleanup } from "solid-js";
+var _tmpl$ = /* @__PURE__ */ template(`<div>`);
+const TanStackRouterDevtoolsPanel = (props) => {
+  const activeRouter = props.router ?? useRouter();
+  const activeRouterState = useRouterState({
+    router: activeRouter
+  });
+  const usedProps = {
+    ...props,
+    router: activeRouter,
+    routerState: activeRouterState
+  };
+  let devToolRef;
+  const [devtools] = createSignal(new TanStackRouterDevtoolsPanelCore(usedProps));
+  createEffect(() => {
+    devtools().setRouter(usedProps.router);
+  });
+  createEffect(() => {
+    devtools().setRouterState(usedProps.routerState);
+  });
+  createEffect(() => {
+    devtools().setOptions({
+      className: usedProps.className,
+      style: usedProps.style,
+      shadowDOMTarget: usedProps.shadowDOMTarget
+    });
+  });
+  onMount(() => {
+    if (devToolRef) {
+      devtools().mount(devToolRef);
+      onCleanup(() => {
+        devtools().unmount();
+      });
+    }
+  });
+  return (() => {
+    var _el$ = _tmpl$();
+    var _ref$ = devToolRef;
+    typeof _ref$ === "function" ? use(_ref$, _el$) : devToolRef = _el$;
+    return _el$;
+  })();
+};
+export {
+  TanStackRouterDevtoolsPanel
+};
+//# sourceMappingURL=TanStackRouterDevtoolsPanel.js.map

package/dist/esm/TanStackRouterDevtoolsPanel.js.map

@@ -0,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 DevtoolsPanelOptions {\n  /**\n   * The standard React style object used to style a component with inline styles\n   */\n  style?: JSX.CSSProperties\n  /**\n   * The standard React class property used to style a component with classes\n   */\n  className?: string\n  /**\n   * A boolean variable indicating whether the panel is open or closed\n   */\n  isOpen?: boolean\n  /**\n   * A function that toggles the open and close state of the panel\n   */\n  setIsOpen?: (isOpen: boolean) => void\n  /**\n   * Handles the opening and closing the devtools panel\n   */\n  handleDragStart?: (e: any) => void\n  /**\n   * A boolean variable indicating if the \"lite\" version of the library is being used\n   */\n  router?: AnyRouter\n  /**\n   * Use this to attach the devtool's styles to specific element in the DOM.\n   */\n  shadowDOMTarget?: ShadowRoot\n}\n\nexport const TanStackRouterDevtoolsPanel: Component<DevtoolsPanelOptions> = (\n  props,\n): JSX.Element | null => {\n  const activeRouter = props.router ?? useRouter()\n  const activeRouterState = useRouterState({ router: activeRouter })\n\n  const usedProps = {\n    ...props,\n    router: activeRouter,\n    routerState: activeRouterState,\n  }\n\n  let devToolRef: HTMLDivElement | undefined\n  const [devtools] = createSignal(\n    new TanStackRouterDevtoolsPanelCore(usedProps),\n  )\n\n  // Update devtools when props change\n  createEffect(() => {\n    devtools().setRouter(usedProps.router)\n  })\n\n  createEffect(() => {\n    devtools().setRouterState(usedProps.routerState)\n  })\n\n  createEffect(() => {\n    devtools().setOptions({\n      className: usedProps.className,\n      style: usedProps.style,\n      shadowDOMTarget: usedProps.shadowDOMTarget,\n    })\n  })\n\n  onMount(() => {\n    if (devToolRef) {\n      devtools().mount(devToolRef)\n\n      onCleanup(() => {\n        devtools().unmount()\n      })\n    }\n  })\n\n  return (\n    <>\n      <div ref={devToolRef} />\n    </>\n  )\n}\n"],"names":["TanStackRouterDevtoolsPanel","props","activeRouter","router","useRouter","activeRouterState","useRouterState","usedProps","routerState","devToolRef","devtools","createSignal","TanStackRouterDevtoolsPanelCore","createEffect","setRouter","setRouterState","setOptions","className","style","shadowDOMTarget","onMount","mount","onCleanup","unmount","_el$","_tmpl$","_ref$","_$use"],"mappings":";;;;;AAqCaA,MAAAA,8BAA+DA,CAC1EC,UACuB;AACjBC,QAAAA,eAAeD,MAAME,UAAUC,UAAU;AAC/C,QAAMC,oBAAoBC,eAAe;AAAA,IAAEH,QAAQD;AAAAA,EAAAA,CAAc;AAEjE,QAAMK,YAAY;AAAA,IAChB,GAAGN;AAAAA,IACHE,QAAQD;AAAAA,IACRM,aAAaH;AAAAA,EACf;AAEII,MAAAA;AACJ,QAAM,CAACC,QAAQ,IAAIC,aACjB,IAAIC,gCAAgCL,SAAS,CAC/C;AAGAM,eAAa,MAAM;AACR,eAAEC,UAAUP,UAAUJ,MAAM;AAAA,EAAA,CACtC;AAEDU,eAAa,MAAM;AACR,eAAEE,eAAeR,UAAUC,WAAW;AAAA,EAAA,CAChD;AAEDK,eAAa,MAAM;AACjBH,aAAAA,EAAWM,WAAW;AAAA,MACpBC,WAAWV,UAAUU;AAAAA,MACrBC,OAAOX,UAAUW;AAAAA,MACjBC,iBAAiBZ,UAAUY;AAAAA,IAAAA,CAC5B;AAAA,EAAA,CACF;AAEDC,UAAQ,MAAM;AACZ,QAAIX,YAAY;AACL,eAAA,EAAEY,MAAMZ,UAAU;AAE3Ba,gBAAU,MAAM;AACdZ,iBAAAA,EAAWa,QAAQ;AAAA,MAAA,CACpB;AAAA,IAAA;AAAA,EACH,CACD;AAED,UAAA,MAAA;AAAA,QAAAC,OAAAC,OAAA;AAAA,QAAAC,QAEcjB;AAAU,WAAAiB,UAAAC,aAAAA,IAAAD,OAAAF,IAAA,IAAVf,aAAUe;AAAAA,WAAAA;AAAAA,EAAAA,GAAA;AAG1B;"}

package/dist/esm/index.d.ts

@@ -0,0 +1,6 @@
+import * as Devtools from './TanStackRouterDevtools.js';
+import * as DevtoolsPanel from './TanStackRouterDevtoolsPanel.js';
+export declare const TanStackRouterDevtools: (typeof Devtools)['TanStackRouterDevtools'];
+export declare const TanStackRouterDevtoolsInProd: (typeof Devtools)['TanStackRouterDevtools'];
+export declare const TanStackRouterDevtoolsPanel: (typeof DevtoolsPanel)['TanStackRouterDevtoolsPanel'];
+export declare const TanStackRouterDevtoolsPanelInProd: (typeof DevtoolsPanel)['TanStackRouterDevtoolsPanel'];

package/dist/esm/index.js

@@ -0,0 +1,17 @@
+import { TanStackRouterDevtools as TanStackRouterDevtools$1 } from "./TanStackRouterDevtools.js";
+import { TanStackRouterDevtoolsPanel as TanStackRouterDevtoolsPanel$1 } from "./TanStackRouterDevtoolsPanel.js";
+const TanStackRouterDevtools = process.env.NODE_ENV !== "development" ? function() {
+  return null;
+} : TanStackRouterDevtools$1;
+const TanStackRouterDevtoolsInProd = TanStackRouterDevtools$1;
+const TanStackRouterDevtoolsPanel = process.env.NODE_ENV !== "development" ? function() {
+  return null;
+} : TanStackRouterDevtoolsPanel$1;
+const TanStackRouterDevtoolsPanelInProd = TanStackRouterDevtoolsPanel$1;
+export {
+  TanStackRouterDevtools,
+  TanStackRouterDevtoolsInProd,
+  TanStackRouterDevtoolsPanel,
+  TanStackRouterDevtoolsPanelInProd
+};
+//# sourceMappingURL=index.js.map

package/dist/esm/index.js.map

@@ -0,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;AACH,SAAA;AACT,IACAC;AAEC,MAAMC,+BACXD;AAEK,MAAME,8BACXL,QAAQC,IAAIC,aAAa,gBACrB,WAAY;AACH,SAAA;AACT,IACAI;AAEC,MAAMC,oCACXD;"}

package/dist/source/TanStackRouterDevtools.d.ts

@@ -0,0 +1,41 @@
+import type { AnyRouter } from '@tanstack/solid-router';
+import type { Component, JSX } from 'solid-js';
+interface DevtoolsOptions {
+    /**
+     * Set this true if you want the dev tools to default to being open
+     */
+    initialIsOpen?: boolean;
+    /**
+     * Use this to add props to the panel. For example, you can add className, style (merge and override default style), etc.
+     */
+    panelProps?: JSX.HTMLAttributes<HTMLDivElement>;
+    /**
+     * Use this to add props to the close button. For example, you can add className, style (merge and override default style), onClick (extend default handler), etc.
+     */
+    closeButtonProps?: JSX.ButtonHTMLAttributes<HTMLButtonElement>;
+    /**
+     * Use this to add props to the toggle button. For example, you can add className, style (merge and override default style), onClick (extend default handler), etc.
+     */
+    toggleButtonProps?: JSX.ButtonHTMLAttributes<HTMLButtonElement>;
+    /**
+     * The position of the TanStack Router logo to open and close the devtools panel.
+     * Defaults to 'bottom-left'.
+     */
+    position?: 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right';
+    /**
+     * Use this to render the devtools inside a different type of container element for a11y purposes.
+     * Any string which corresponds to a valid intrinsic JSX element is allowed.
+     * Defaults to 'footer'.
+     */
+    containerElement?: string | any;
+    /**
+     * The router instance to use for the devtools.
+     */
+    router?: AnyRouter;
+    /**
+     * Use this to attach the devtool's styles to specific element in the DOM.
+     */
+    shadowDOMTarget?: ShadowRoot;
+}
+export declare const TanStackRouterDevtools: Component<DevtoolsOptions>;
+export {};

package/dist/source/TanStackRouterDevtools.jsx

@@ -0,0 +1,44 @@
+import { useRouter, useRouterState } from '@tanstack/solid-router';
+import { TanStackRouterDevtoolsCore } from '@tanstack/router-devtools-core';
+import { createEffect, createSignal, onCleanup, onMount } from 'solid-js';
+export const TanStackRouterDevtools = (props) => {
+    const activeRouter = props.router ?? useRouter();
+    const activeRouterState = useRouterState({ router: activeRouter });
+    const usedProps = {
+        ...props,
+        router: activeRouter,
+        routerState: activeRouterState,
+    };
+    let devToolRef;
+    const [devtools] = createSignal(new TanStackRouterDevtoolsCore(usedProps));
+    // Update devtools when props change
+    createEffect(() => {
+        devtools().setRouter(usedProps.router);
+    });
+    createEffect(() => {
+        devtools().setRouterState(usedProps.routerState);
+    });
+    createEffect(() => {
+        devtools().setOptions({
+            initialIsOpen: usedProps.initialIsOpen,
+            panelProps: usedProps.panelProps,
+            closeButtonProps: usedProps.closeButtonProps,
+            toggleButtonProps: usedProps.toggleButtonProps,
+            position: usedProps.position,
+            containerElement: usedProps.containerElement,
+            shadowDOMTarget: usedProps.shadowDOMTarget,
+        });
+    });
+    onMount(() => {
+        if (devToolRef) {
+            devtools().mount(devToolRef);
+            onCleanup(() => {
+                devtools().unmount();
+            });
+        }
+    });
+    return (<>
+      <div ref={devToolRef}/>
+    </>);
+};
+//# sourceMappingURL=TanStackRouterDevtools.jsx.map

package/dist/source/TanStackRouterDevtools.jsx.map

@@ -0,0 +1 @@
+{"version":3,"file":"TanStackRouterDevtools.jsx","sourceRoot":"","sources":["../../src/TanStackRouterDevtools.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,cAAc,EAAE,MAAM,wBAAwB,CAAA;AAClE,OAAO,EAAE,0BAA0B,EAAE,MAAM,gCAAgC,CAAA;AAC3E,OAAO,EAAE,YAAY,EAAE,YAAY,EAAE,SAAS,EAAE,OAAO,EAAE,MAAM,UAAU,CAAA;AA0CzE,MAAM,CAAC,MAAM,sBAAsB,GAA+B,CAChE,KAAK,EACe,EAAE;IACtB,MAAM,YAAY,GAAG,KAAK,CAAC,MAAM,IAAI,SAAS,EAAE,CAAA;IAChD,MAAM,iBAAiB,GAAG,cAAc,CAAC,EAAE,MAAM,EAAE,YAAY,EAAE,CAAC,CAAA;IAElE,MAAM,SAAS,GAAG;QAChB,GAAG,KAAK;QACR,MAAM,EAAE,YAAY;QACpB,WAAW,EAAE,iBAAiB;KAC/B,CAAA;IAED,IAAI,UAAsC,CAAA;IAC1C,MAAM,CAAC,QAAQ,CAAC,GAAG,YAAY,CAAC,IAAI,0BAA0B,CAAC,SAAS,CAAC,CAAC,CAAA;IAE1E,oCAAoC;IACpC,YAAY,CAAC,GAAG,EAAE;QAChB,QAAQ,EAAE,CAAC,SAAS,CAAC,SAAS,CAAC,MAAM,CAAC,CAAA;IACxC,CAAC,CAAC,CAAA;IAEF,YAAY,CAAC,GAAG,EAAE;QAChB,QAAQ,EAAE,CAAC,cAAc,CAAC,SAAS,CAAC,WAAW,CAAC,CAAA;IAClD,CAAC,CAAC,CAAA;IAEF,YAAY,CAAC,GAAG,EAAE;QAChB,QAAQ,EAAE,CAAC,UAAU,CAAC;YACpB,aAAa,EAAE,SAAS,CAAC,aAAa;YACtC,UAAU,EAAE,SAAS,CAAC,UAAU;YAChC,gBAAgB,EAAE,SAAS,CAAC,gBAAgB;YAC5C,iBAAiB,EAAE,SAAS,CAAC,iBAAiB;YAC9C,QAAQ,EAAE,SAAS,CAAC,QAAQ;YAC5B,gBAAgB,EAAE,SAAS,CAAC,gBAAgB;YAC5C,eAAe,EAAE,SAAS,CAAC,eAAe;SAC3C,CAAC,CAAA;IACJ,CAAC,CAAC,CAAA;IAEF,OAAO,CAAC,GAAG,EAAE;QACX,IAAI,UAAU,EAAE,CAAC;YACf,QAAQ,EAAE,CAAC,KAAK,CAAC,UAAU,CAAC,CAAA;YAE5B,SAAS,CAAC,GAAG,EAAE;gBACb,QAAQ,EAAE,CAAC,OAAO,EAAE,CAAA;YACtB,CAAC,CAAC,CAAA;QACJ,CAAC;IACH,CAAC,CAAC,CAAA;IAEF,OAAO,CACL,EACE;MAAA,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC,UAAU,CAAC,EACvB;IAAA,GAAG,CACJ,CAAA;AACH,CAAC,CAAA"}

package/dist/source/TanStackRouterDevtoolsPanel.d.ts

@@ -0,0 +1,33 @@
+import type { AnyRouter } from '@tanstack/solid-router';
+import type { Component, JSX } from 'solid-js';
+export interface DevtoolsPanelOptions {
+    /**
+     * The standard React style object used to style a component with inline styles
+     */
+    style?: JSX.CSSProperties;
+    /**
+     * The standard React class property used to style a component with classes
+     */
+    className?: string;
+    /**
+     * A boolean variable indicating whether the panel is open or closed
+     */
+    isOpen?: boolean;
+    /**
+     * A function that toggles the open and close state of the panel
+     */
+    setIsOpen?: (isOpen: boolean) => void;
+    /**
+     * Handles the opening and closing the devtools panel
+     */
+    handleDragStart?: (e: any) => void;
+    /**
+     * A boolean variable indicating if the "lite" version of the library is being used
+     */
+    router?: AnyRouter;
+    /**
+     * Use this to attach the devtool's styles to specific element in the DOM.
+     */
+    shadowDOMTarget?: ShadowRoot;
+}
+export declare const TanStackRouterDevtoolsPanel: Component<DevtoolsPanelOptions>;

package/dist/source/TanStackRouterDevtoolsPanel.jsx

@@ -0,0 +1,40 @@
+import { useRouter, useRouterState } from '@tanstack/solid-router';
+import { TanStackRouterDevtoolsPanelCore } from '@tanstack/router-devtools-core';
+import { createEffect, createSignal, onCleanup, onMount } from 'solid-js';
+export const TanStackRouterDevtoolsPanel = (props) => {
+    const activeRouter = props.router ?? useRouter();
+    const activeRouterState = useRouterState({ router: activeRouter });
+    const usedProps = {
+        ...props,
+        router: activeRouter,
+        routerState: activeRouterState,
+    };
+    let devToolRef;
+    const [devtools] = createSignal(new TanStackRouterDevtoolsPanelCore(usedProps));
+    // Update devtools when props change
+    createEffect(() => {
+        devtools().setRouter(usedProps.router);
+    });
+    createEffect(() => {
+        devtools().setRouterState(usedProps.routerState);
+    });
+    createEffect(() => {
+        devtools().setOptions({
+            className: usedProps.className,
+            style: usedProps.style,
+            shadowDOMTarget: usedProps.shadowDOMTarget,
+        });
+    });
+    onMount(() => {
+        if (devToolRef) {
+            devtools().mount(devToolRef);
+            onCleanup(() => {
+                devtools().unmount();
+            });
+        }
+    });
+    return (<>
+      <div ref={devToolRef}/>
+    </>);
+};
+//# sourceMappingURL=TanStackRouterDevtoolsPanel.jsx.map

package/dist/source/TanStackRouterDevtoolsPanel.jsx.map

@@ -0,0 +1 @@
+{"version":3,"file":"TanStackRouterDevtoolsPanel.jsx","sourceRoot":"","sources":["../../src/TanStackRouterDevtoolsPanel.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,cAAc,EAAE,MAAM,wBAAwB,CAAA;AAClE,OAAO,EAAE,+BAA+B,EAAE,MAAM,gCAAgC,CAAA;AAChF,OAAO,EAAE,YAAY,EAAE,YAAY,EAAE,SAAS,EAAE,OAAO,EAAE,MAAM,UAAU,CAAA;AAmCzE,MAAM,CAAC,MAAM,2BAA2B,GAAoC,CAC1E,KAAK,EACe,EAAE;IACtB,MAAM,YAAY,GAAG,KAAK,CAAC,MAAM,IAAI,SAAS,EAAE,CAAA;IAChD,MAAM,iBAAiB,GAAG,cAAc,CAAC,EAAE,MAAM,EAAE,YAAY,EAAE,CAAC,CAAA;IAElE,MAAM,SAAS,GAAG;QAChB,GAAG,KAAK;QACR,MAAM,EAAE,YAAY;QACpB,WAAW,EAAE,iBAAiB;KAC/B,CAAA;IAED,IAAI,UAAsC,CAAA;IAC1C,MAAM,CAAC,QAAQ,CAAC,GAAG,YAAY,CAC7B,IAAI,+BAA+B,CAAC,SAAS,CAAC,CAC/C,CAAA;IAED,oCAAoC;IACpC,YAAY,CAAC,GAAG,EAAE;QAChB,QAAQ,EAAE,CAAC,SAAS,CAAC,SAAS,CAAC,MAAM,CAAC,CAAA;IACxC,CAAC,CAAC,CAAA;IAEF,YAAY,CAAC,GAAG,EAAE;QAChB,QAAQ,EAAE,CAAC,cAAc,CAAC,SAAS,CAAC,WAAW,CAAC,CAAA;IAClD,CAAC,CAAC,CAAA;IAEF,YAAY,CAAC,GAAG,EAAE;QAChB,QAAQ,EAAE,CAAC,UAAU,CAAC;YACpB,SAAS,EAAE,SAAS,CAAC,SAAS;YAC9B,KAAK,EAAE,SAAS,CAAC,KAAK;YACtB,eAAe,EAAE,SAAS,CAAC,eAAe;SAC3C,CAAC,CAAA;IACJ,CAAC,CAAC,CAAA;IAEF,OAAO,CAAC,GAAG,EAAE;QACX,IAAI,UAAU,EAAE,CAAC;YACf,QAAQ,EAAE,CAAC,KAAK,CAAC,UAAU,CAAC,CAAA;YAE5B,SAAS,CAAC,GAAG,EAAE;gBACb,QAAQ,EAAE,CAAC,OAAO,EAAE,CAAA;YACtB,CAAC,CAAC,CAAA;QACJ,CAAC;IACH,CAAC,CAAC,CAAA;IAEF,OAAO,CACL,EACE;MAAA,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC,UAAU,CAAC,EACvB;IAAA,GAAG,CACJ,CAAA;AACH,CAAC,CAAA"}

package/dist/source/index.d.ts

@@ -0,0 +1,6 @@
+import * as Devtools from './TanStackRouterDevtools';
+import * as DevtoolsPanel from './TanStackRouterDevtoolsPanel';
+export declare const TanStackRouterDevtools: (typeof Devtools)['TanStackRouterDevtools'];
+export declare const TanStackRouterDevtoolsInProd: (typeof Devtools)['TanStackRouterDevtools'];
+export declare const TanStackRouterDevtoolsPanel: (typeof DevtoolsPanel)['TanStackRouterDevtoolsPanel'];
+export declare const TanStackRouterDevtoolsPanelInProd: (typeof DevtoolsPanel)['TanStackRouterDevtoolsPanel'];

package/dist/source/index.jsx

@@ -0,0 +1,15 @@
+import * as Devtools from './TanStackRouterDevtools';
+import * as DevtoolsPanel from './TanStackRouterDevtoolsPanel';
+export const TanStackRouterDevtools = process.env.NODE_ENV !== 'development'
+    ? function () {
+        return null;
+    }
+    : Devtools.TanStackRouterDevtools;
+export const TanStackRouterDevtoolsInProd = Devtools.TanStackRouterDevtools;
+export const TanStackRouterDevtoolsPanel = process.env.NODE_ENV !== 'development'
+    ? function () {
+        return null;
+    }
+    : DevtoolsPanel.TanStackRouterDevtoolsPanel;
+export const TanStackRouterDevtoolsPanelInProd = DevtoolsPanel.TanStackRouterDevtoolsPanel;
+//# sourceMappingURL=index.jsx.map

package/dist/source/index.jsx.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.jsx","sourceRoot":"","sources":["../../src/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,QAAQ,MAAM,0BAA0B,CAAA;AACpD,OAAO,KAAK,aAAa,MAAM,+BAA+B,CAAA;AAE9D,MAAM,CAAC,MAAM,sBAAsB,GACjC,OAAO,CAAC,GAAG,CAAC,QAAQ,KAAK,aAAa;IACpC,CAAC,CAAC;QACE,OAAO,IAAI,CAAA;IACb,CAAC;IACH,CAAC,CAAC,QAAQ,CAAC,sBAAsB,CAAA;AAErC,MAAM,CAAC,MAAM,4BAA4B,GACvC,QAAQ,CAAC,sBAAsB,CAAA;AAEjC,MAAM,CAAC,MAAM,2BAA2B,GACtC,OAAO,CAAC,GAAG,CAAC,QAAQ,KAAK,aAAa;IACpC,CAAC,CAAC;QACE,OAAO,IAAI,CAAA;IACb,CAAC;IACH,CAAC,CAAC,aAAa,CAAC,2BAA2B,CAAA;AAE/C,MAAM,CAAC,MAAM,iCAAiC,GAC5C,aAAa,CAAC,2BAA2B,CAAA"}

package/package.json

@@ -0,0 +1,67 @@
+{
+  "name": "@tanstack/solid-router-devtools",
+  "version": "1.20.3-alpha.1",
+  "description": "Modern and scalable routing for Solid applications",
+  "author": "Tanner Linsley",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/TanStack/router.git",
+    "directory": "packages/solid-router-devtools"
+  },
+  "homepage": "https://tanstack.com/router",
+  "funding": {
+    "type": "github",
+    "url": "https://github.com/sponsors/tannerlinsley"
+  },
+  "keywords": [
+    "react",
+    "location",
+    "router",
+    "routing",
+    "async",
+    "async router",
+    "typescript"
+  ],
+  "type": "module",
+  "types": "./dist/esm/index.d.ts",
+  "main": "./dist/cjs/index.cjs",
+  "module": "./dist/esm/index.js",
+  "exports": {
+    ".": {
+      "solid": {
+        "types": "./dist/source/index.d.ts",
+        "default": "./dist/source/index.jsx"
+      },
+      "import": {
+        "types": "./dist/esm/index.d.ts",
+        "default": "./dist/esm/index.js"
+      },
+      "require": {
+        "types": "./dist/cjs/index.d.cts",
+        "default": "./dist/cjs/index.cjs"
+      }
+    },
+    "./package.json": "./package.json"
+  },
+  "sideEffects": false,
+  "files": [
+    "dist",
+    "src"
+  ],
+  "engines": {
+    "node": ">=12"
+  },
+  "dependencies": {
+    "solid-js": "^1.9.5",
+    "@tanstack/router-devtools-core": "^1.20.3-alpha.1"
+  },
+  "devDependencies": {
+    "vite-plugin-solid": "^2.11.6"
+  },
+  "peerDependencies": {
+    "solid-js": "^1.9.5",
+    "@tanstack/solid-router": "^1.20.3-alpha.1"
+  },
+  "scripts": {}
+}

package/src/TanStackRouterDevtools.tsx

@@ -0,0 +1,96 @@
+import { useRouter, useRouterState } from '@tanstack/solid-router'
+import { TanStackRouterDevtoolsCore } from '@tanstack/router-devtools-core'
+import { createEffect, createSignal, onCleanup, onMount } from 'solid-js'
+import type { AnyRouter } from '@tanstack/solid-router'
+import type { Component, JSX } from 'solid-js'
+
+interface DevtoolsOptions {
+  /**
+   * Set this true if you want the dev tools to default to being open
+   */
+  initialIsOpen?: boolean
+  /**
+   * Use this to add props to the panel. For example, you can add className, style (merge and override default style), etc.
+   */
+  panelProps?: JSX.HTMLAttributes<HTMLDivElement>
+  /**
+   * Use this to add props to the close button. For example, you can add className, style (merge and override default style), onClick (extend default handler), etc.
+   */
+  closeButtonProps?: JSX.ButtonHTMLAttributes<HTMLButtonElement>
+  /**
+   * Use this to add props to the toggle button. For example, you can add className, style (merge and override default style), onClick (extend default handler), etc.
+   */
+  toggleButtonProps?: JSX.ButtonHTMLAttributes<HTMLButtonElement>
+  /**
+   * The position of the TanStack Router logo to open and close the devtools panel.
+   * Defaults to 'bottom-left'.
+   */
+  position?: 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right'
+  /**
+   * Use this to render the devtools inside a different type of container element for a11y purposes.
+   * Any string which corresponds to a valid intrinsic JSX element is allowed.
+   * Defaults to 'footer'.
+   */
+  containerElement?: string | any
+  /**
+   * The router instance to use for the devtools.
+   */
+  router?: AnyRouter
+  /**
+   * Use this to attach the devtool's styles to specific element in the DOM.
+   */
+  shadowDOMTarget?: ShadowRoot
+}
+
+export const TanStackRouterDevtools: Component<DevtoolsOptions> = (
+  props,
+): JSX.Element | null => {
+  const activeRouter = props.router ?? useRouter()
+  const activeRouterState = useRouterState({ router: activeRouter })
+
+  const usedProps = {
+    ...props,
+    router: activeRouter,
+    routerState: activeRouterState,
+  }
+
+  let devToolRef: HTMLDivElement | undefined
+  const [devtools] = createSignal(new TanStackRouterDevtoolsCore(usedProps))
+
+  // Update devtools when props change
+  createEffect(() => {
+    devtools().setRouter(usedProps.router)
+  })
+
+  createEffect(() => {
+    devtools().setRouterState(usedProps.routerState)
+  })
+
+  createEffect(() => {
+    devtools().setOptions({
+      initialIsOpen: usedProps.initialIsOpen,
+      panelProps: usedProps.panelProps,
+      closeButtonProps: usedProps.closeButtonProps,
+      toggleButtonProps: usedProps.toggleButtonProps,
+      position: usedProps.position,
+      containerElement: usedProps.containerElement,
+      shadowDOMTarget: usedProps.shadowDOMTarget,
+    })
+  })
+
+  onMount(() => {
+    if (devToolRef) {
+      devtools().mount(devToolRef)
+
+      onCleanup(() => {
+        devtools().unmount()
+      })
+    }
+  })
+
+  return (
+    <>
+      <div ref={devToolRef} />
+    </>
+  )
+}

package/src/TanStackRouterDevtoolsPanel.tsx

@@ -0,0 +1,87 @@
+import { useRouter, useRouterState } from '@tanstack/solid-router'
+import { TanStackRouterDevtoolsPanelCore } from '@tanstack/router-devtools-core'
+import { createEffect, createSignal, onCleanup, onMount } from 'solid-js'
+import type { AnyRouter } from '@tanstack/solid-router'
+import type { Component, JSX } from 'solid-js'
+
+export interface DevtoolsPanelOptions {
+  /**
+   * The standard React style object used to style a component with inline styles
+   */
+  style?: JSX.CSSProperties
+  /**
+   * The standard React class property used to style a component with classes
+   */
+  className?: string
+  /**
+   * A boolean variable indicating whether the panel is open or closed
+   */
+  isOpen?: boolean
+  /**
+   * A function that toggles the open and close state of the panel
+   */
+  setIsOpen?: (isOpen: boolean) => void
+  /**
+   * Handles the opening and closing the devtools panel
+   */
+  handleDragStart?: (e: any) => void
+  /**
+   * A boolean variable indicating if the "lite" version of the library is being used
+   */
+  router?: AnyRouter
+  /**
+   * Use this to attach the devtool's styles to specific element in the DOM.
+   */
+  shadowDOMTarget?: ShadowRoot
+}
+
+export const TanStackRouterDevtoolsPanel: Component<DevtoolsPanelOptions> = (
+  props,
+): JSX.Element | null => {
+  const activeRouter = props.router ?? useRouter()
+  const activeRouterState = useRouterState({ router: activeRouter })
+
+  const usedProps = {
+    ...props,
+    router: activeRouter,
+    routerState: activeRouterState,
+  }
+
+  let devToolRef: HTMLDivElement | undefined
+  const [devtools] = createSignal(
+    new TanStackRouterDevtoolsPanelCore(usedProps),
+  )
+
+  // Update devtools when props change
+  createEffect(() => {
+    devtools().setRouter(usedProps.router)
+  })
+
+  createEffect(() => {
+    devtools().setRouterState(usedProps.routerState)
+  })
+
+  createEffect(() => {
+    devtools().setOptions({
+      className: usedProps.className,
+      style: usedProps.style,
+      shadowDOMTarget: usedProps.shadowDOMTarget,
+    })
+  })
+
+  onMount(() => {
+    if (devToolRef) {
+      devtools().mount(devToolRef)
+
+      onCleanup(() => {
+        devtools().unmount()
+      })
+    }
+  })
+
+  return (
+    <>
+      <div ref={devToolRef} />
+    </>
+  )
+}

package/src/index.tsx

@@ -0,0 +1,22 @@
+import * as Devtools from './TanStackRouterDevtools'
+import * as DevtoolsPanel from './TanStackRouterDevtoolsPanel'
+
+export const TanStackRouterDevtools: (typeof Devtools)['TanStackRouterDevtools'] =
+  process.env.NODE_ENV !== 'development'
+    ? function () {
+        return null
+      }
+    : Devtools.TanStackRouterDevtools
+
+export const TanStackRouterDevtoolsInProd: (typeof Devtools)['TanStackRouterDevtools'] =
+  Devtools.TanStackRouterDevtools
+
+export const TanStackRouterDevtoolsPanel: (typeof DevtoolsPanel)['TanStackRouterDevtoolsPanel'] =
+  process.env.NODE_ENV !== 'development'
+    ? function () {
+        return null
+      }
+    : DevtoolsPanel.TanStackRouterDevtoolsPanel
+
+export const TanStackRouterDevtoolsPanelInProd: (typeof DevtoolsPanel)['TanStackRouterDevtoolsPanel'] =
+  DevtoolsPanel.TanStackRouterDevtoolsPanel