@tanstack/router-devtools-core 1.121.0-alpha.11 → 1.121.0-alpha.14

package/dist/cjs/TanStackRouterDevtoolsCore.cjs

@@ -6,7 +6,7 @@ var __accessCheck = (obj, member, msg) => member.has(obj) || __typeError("Cannot
 var __privateGet = (obj, member, getter) => (__accessCheck(obj, member, "read from private field"), getter ? getter.call(obj) : member.get(obj));
 var __privateAdd = (obj, member, value) => member.has(obj) ? __typeError("Cannot add the same private member more than once") : member instanceof WeakSet ? member.add(obj) : member.set(obj, value);
 var __privateSet = (obj, member, value, setter) => (__accessCheck(obj, member, "write to private field"), setter ? setter.call(obj, value) : member.set(obj, value), value);
-var _router, _routerState, _position, _initialIsOpen, _shadowDOMTarget, _panelProps, _closeButtonProps, _toggleButtonProps, _isMounted, _Component, _dispose;
+var _router, _routerState, _position, _initialIsOpen, _shadowDOMTarget, _panelProps, _closeButtonProps, _toggleButtonProps, _containerElement, _isMounted, _Component, _dispose;
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const web = require("solid-js/web");
 const solidJs = require("solid-js");
@@ -20,6 +20,7 @@ class TanStackRouterDevtoolsCore {
     __privateAdd(this, _panelProps);
     __privateAdd(this, _closeButtonProps);
     __privateAdd(this, _toggleButtonProps);
+    __privateAdd(this, _containerElement);
     __privateAdd(this, _isMounted, false);
     __privateAdd(this, _Component);
     __privateAdd(this, _dispose);
@@ -31,6 +32,7 @@ class TanStackRouterDevtoolsCore {
     __privateSet(this, _panelProps, config.panelProps);
     __privateSet(this, _closeButtonProps, config.closeButtonProps);
     __privateSet(this, _toggleButtonProps, config.toggleButtonProps);
+    __privateSet(this, _containerElement, config.containerElement);
   }
   mount(el) {
     if (__privateGet(this, _isMounted)) {
@@ -45,6 +47,7 @@ class TanStackRouterDevtoolsCore {
       const panelProps = __privateGet(this, _panelProps);
       const closeButtonProps = __privateGet(this, _closeButtonProps);
       const toggleButtonProps = __privateGet(this, _toggleButtonProps);
+      const containerElement = __privateGet(this, _containerElement);
       let Devtools;
       if (__privateGet(this, _Component)) {
         Devtools = __privateGet(this, _Component);
@@ -60,7 +63,8 @@ class TanStackRouterDevtoolsCore {
         routerState,
         panelProps,
         closeButtonProps,
-        toggleButtonProps
+        toggleButtonProps,
+        containerElement
       });
     }, el);
     __privateSet(this, _isMounted, true);
@@ -90,6 +94,9 @@ class TanStackRouterDevtoolsCore {
     if (options.shadowDOMTarget !== void 0) {
       __privateSet(this, _shadowDOMTarget, options.shadowDOMTarget);
     }
+    if (options.containerElement !== void 0) {
+      __privateSet(this, _containerElement, options.containerElement);
+    }
   }
 }
 _router = new WeakMap();
@@ -100,6 +107,7 @@ _shadowDOMTarget = new WeakMap();
 _panelProps = new WeakMap();
 _closeButtonProps = new WeakMap();
 _toggleButtonProps = new WeakMap();
+_containerElement = new WeakMap();
 _isMounted = new WeakMap();
 _Component = new WeakMap();
 _dispose = new WeakMap();

package/dist/cjs/TanStackRouterDevtoolsCore.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"TanStackRouterDevtoolsCore.cjs","sources":["../../src/TanStackRouterDevtoolsCore.tsx"],"sourcesContent":["import { createSignal, lazy } from 'solid-js'\nimport { render } from 'solid-js/web'\nimport type { AnyRouter } from '@tanstack/router-core'\nimport type { Signal } 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 class, style (merge and override default style), etc.\n   */\n  panelProps?: any & {\n    ref?: any\n  }\n  /**\n   * Use this to add props to the close button. For example, you can add class, style (merge and override default style), onClick (extend default handler), etc.\n   */\n  closeButtonProps?: any & {\n    ref?: any\n  }\n  /**\n   * Use this to add props to the toggle button. For example, you can add class, style (merge and override default style), onClick (extend default handler), etc.\n   */\n  toggleButtonProps?: any & {\n    ref?: any\n  }\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   * A boolean variable indicating if the \"lite\" version of the library is being used\n   */\n  router: AnyRouter\n  routerState: any\n  /**\n   * Use this to attach the devtool's styles to specific element in the DOM.\n   */\n  shadowDOMTarget?: ShadowRoot\n}\n\nclass TanStackRouterDevtoolsCore {\n  #router: Signal<AnyRouter>\n  #routerState: Signal<any>\n  #position: 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right'\n  #initialIsOpen: boolean\n  #shadowDOMTarget?: ShadowRoot\n\n  #panelProps: any\n  #closeButtonProps: any\n  #toggleButtonProps: any\n\n  #isMounted = false\n  #Component: any\n  #dispose?: () => void\n\n  constructor(config: DevtoolsOptions) {\n    this.#router = createSignal(config.router)\n    this.#routerState = createSignal(config.routerState)\n    this.#position = config.position ?? 'bottom-left'\n    this.#initialIsOpen = config.initialIsOpen ?? false\n    this.#shadowDOMTarget = config.shadowDOMTarget\n\n    this.#panelProps = config.panelProps\n    this.#closeButtonProps = config.closeButtonProps\n    this.#toggleButtonProps = config.toggleButtonProps\n  }\n\n  mount<T extends HTMLElement>(el: T) {\n    if (this.#isMounted) {\n      throw new Error('Devtools is already mounted')\n    }\n\n    const dispose = render(() => {\n      const [router] = this.#router\n      const [routerState] = this.#routerState\n      const position = this.#position\n      const initialIsOpen = this.#initialIsOpen\n      const shadowDOMTarget = this.#shadowDOMTarget\n\n      const panelProps = this.#panelProps\n      const closeButtonProps = this.#closeButtonProps\n      const toggleButtonProps = this.#toggleButtonProps\n\n      let Devtools\n\n      if (this.#Component) {\n        Devtools = this.#Component\n      } else {\n        Devtools = lazy(() => import('./FloatingTanStackRouterDevtools'))\n        this.#Component = Devtools\n      }\n\n      return (\n        <Devtools\n          position={position}\n          initialIsOpen={initialIsOpen}\n          shadowDOMTarget={shadowDOMTarget}\n          router={router}\n          routerState={routerState}\n          panelProps={panelProps}\n          closeButtonProps={closeButtonProps}\n          toggleButtonProps={toggleButtonProps}\n        />\n      )\n    }, el)\n\n    this.#isMounted = true\n    this.#dispose = dispose\n  }\n\n  unmount() {\n    if (!this.#isMounted) {\n      throw new Error('Devtools is not mounted')\n    }\n    this.#dispose?.()\n    this.#isMounted = false\n  }\n\n  setRouter(router: AnyRouter) {\n    this.#router[1](router)\n  }\n\n  setRouterState(routerState: any) {\n    this.#routerState[1](routerState)\n  }\n\n  setOptions(options: Partial<DevtoolsOptions>) {\n    if (options.position !== undefined) {\n      this.#position = options.position\n    }\n\n    if (options.initialIsOpen !== undefined) {\n      this.#initialIsOpen = options.initialIsOpen\n    }\n\n    if (options.shadowDOMTarget !== undefined) {\n      this.#shadowDOMTarget = options.shadowDOMTarget\n    }\n  }\n}\n\nexport { TanStackRouterDevtoolsCore }\n"],"names":["TanStackRouterDevtoolsCore","constructor","config","createSignal","router","routerState","position","initialIsOpen","shadowDOMTarget","panelProps","closeButtonProps","toggleButtonProps","mount","el","Error","dispose","render","Devtools","lazy","_$createComponent","unmount","setRouter","setRouterState","setOptions","options","undefined"],"mappings":";;;;;;;;;;;;AAkDA,MAAMA,2BAA2B;AAAA,EAe/BC,YAAYC,QAAyB;AAdrC;AACA;AACA;AACA;AACA;AAEA;AACA;AACA;AAEA,mCAAa;AACb;AACA;AAGO,uBAAA,SAAUC,qBAAaD,OAAOE,MAAM;AACpC,uBAAA,cAAeD,qBAAaD,OAAOG,WAAW;AAC9C,uBAAA,WAAYH,OAAOI,YAAY;AAC/B,uBAAA,gBAAiBJ,OAAOK,iBAAiB;AAC9C,uBAAK,kBAAmBL,OAAOM;AAE/B,uBAAK,aAAcN,OAAOO;AAC1B,uBAAK,mBAAoBP,OAAOQ;AAChC,uBAAK,oBAAqBR,OAAOS;AAAAA,EAAAA;AAAAA,EAGnCC,MAA6BC,IAAO;AAClC,QAAI,mBAAK,aAAY;AACb,YAAA,IAAIC,MAAM,6BAA6B;AAAA,IAAA;AAGzCC,UAAAA,UAAUC,IAAAA,OAAO,MAAM;AACrB,YAAA,CAACZ,MAAM,IAAI,mBAAK;AAChB,YAAA,CAACC,WAAW,IAAI,mBAAK;AAC3B,YAAMC,WAAW,mBAAK;AACtB,YAAMC,gBAAgB,mBAAK;AAC3B,YAAMC,kBAAkB,mBAAK;AAE7B,YAAMC,aAAa,mBAAK;AACxB,YAAMC,mBAAmB,mBAAK;AAC9B,YAAMC,oBAAoB,mBAAK;AAE3BM,UAAAA;AAEJ,UAAI,mBAAK,aAAY;AACnBA,mBAAW,mBAAK;AAAA,MAAA,OACX;AACLA,mBAAWC,QAAK,KAAA,MAAM,QAAO,QAAA,EAAA,KAAA,MAAA,QAAA,sCAAkC,EAAC;AAChE,2BAAK,YAAaD;AAAAA,MAAAA;AAGpB,aAAAE,IAAAA,gBACGF,UAAQ;AAAA,QACPX;AAAAA,QACAC;AAAAA,QACAC;AAAAA,QACAJ;AAAAA,QACAC;AAAAA,QACAI;AAAAA,QACAC;AAAAA,QACAC;AAAAA,MAAAA,CAAoC;AAAA,OAGvCE,EAAE;AAEL,uBAAK,YAAa;AAClB,uBAAK,UAAWE;AAAAA,EAAAA;AAAAA,EAGlBK,UAAU;;AACJ,QAAA,CAAC,mBAAK,aAAY;AACd,YAAA,IAAIN,MAAM,yBAAyB;AAAA,IAAA;AAE3C,6BAAK,cAAL;AACA,uBAAK,YAAa;AAAA,EAAA;AAAA,EAGpBO,UAAUjB,QAAmB;AACtB,uBAAA,SAAQ,CAAC,EAAEA,MAAM;AAAA,EAAA;AAAA,EAGxBkB,eAAejB,aAAkB;AAC1B,uBAAA,cAAa,CAAC,EAAEA,WAAW;AAAA,EAAA;AAAA,EAGlCkB,WAAWC,SAAmC;AACxCA,QAAAA,QAAQlB,aAAamB,QAAW;AAClC,yBAAK,WAAYD,QAAQlB;AAAAA,IAAAA;AAGvBkB,QAAAA,QAAQjB,kBAAkBkB,QAAW;AACvC,yBAAK,gBAAiBD,QAAQjB;AAAAA,IAAAA;AAG5BiB,QAAAA,QAAQhB,oBAAoBiB,QAAW;AACzC,yBAAK,kBAAmBD,QAAQhB;AAAAA,IAAAA;AAAAA,EAClC;AAEJ;AAlGE;AACA;AACA;AACA;AACA;AAEA;AACA;AACA;AAEA;AACA;AACA;;"}
+{"version":3,"file":"TanStackRouterDevtoolsCore.cjs","sources":["../../src/TanStackRouterDevtoolsCore.tsx"],"sourcesContent":["import { createSignal, lazy } from 'solid-js'\nimport { render } from 'solid-js/web'\nimport type { AnyRouter } from '@tanstack/router-core'\nimport type { Signal } 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 class, style (merge and override default style), etc.\n   */\n  panelProps?: any & {\n    ref?: any\n  }\n  /**\n   * Use this to add props to the close button. For example, you can add class, style (merge and override default style), onClick (extend default handler), etc.\n   */\n  closeButtonProps?: any & {\n    ref?: any\n  }\n  /**\n   * Use this to add props to the toggle button. For example, you can add class, style (merge and override default style), onClick (extend default handler), etc.\n   */\n  toggleButtonProps?: any & {\n    ref?: any\n  }\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   * A boolean variable indicating if the \"lite\" version of the library is being used\n   */\n  router: AnyRouter\n  routerState: any\n  /**\n   * Use this to attach the devtool's styles to specific element in the DOM.\n   */\n  shadowDOMTarget?: ShadowRoot\n}\n\nclass TanStackRouterDevtoolsCore {\n  #router: Signal<AnyRouter>\n  #routerState: Signal<any>\n  #position: 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right'\n  #initialIsOpen: boolean\n  #shadowDOMTarget?: ShadowRoot\n\n  #panelProps: any\n  #closeButtonProps: any\n  #toggleButtonProps: any\n  #containerElement?: string | any\n\n  #isMounted = false\n  #Component: any\n  #dispose?: () => void\n\n  constructor(config: DevtoolsOptions) {\n    this.#router = createSignal(config.router)\n    this.#routerState = createSignal(config.routerState)\n    this.#position = config.position ?? 'bottom-left'\n    this.#initialIsOpen = config.initialIsOpen ?? false\n    this.#shadowDOMTarget = config.shadowDOMTarget\n\n    this.#panelProps = config.panelProps\n    this.#closeButtonProps = config.closeButtonProps\n    this.#toggleButtonProps = config.toggleButtonProps\n    this.#containerElement = config.containerElement\n  }\n\n  mount<T extends HTMLElement>(el: T) {\n    if (this.#isMounted) {\n      throw new Error('Devtools is already mounted')\n    }\n\n    const dispose = render(() => {\n      const [router] = this.#router\n      const [routerState] = this.#routerState\n      const position = this.#position\n      const initialIsOpen = this.#initialIsOpen\n      const shadowDOMTarget = this.#shadowDOMTarget\n\n      const panelProps = this.#panelProps\n      const closeButtonProps = this.#closeButtonProps\n      const toggleButtonProps = this.#toggleButtonProps\n      const containerElement = this.#containerElement\n\n      let Devtools\n\n      if (this.#Component) {\n        Devtools = this.#Component\n      } else {\n        Devtools = lazy(() => import('./FloatingTanStackRouterDevtools'))\n        this.#Component = Devtools\n      }\n\n      return (\n        <Devtools\n          position={position}\n          initialIsOpen={initialIsOpen}\n          shadowDOMTarget={shadowDOMTarget}\n          router={router}\n          routerState={routerState}\n          panelProps={panelProps}\n          closeButtonProps={closeButtonProps}\n          toggleButtonProps={toggleButtonProps}\n          containerElement={containerElement}\n        />\n      )\n    }, el)\n\n    this.#isMounted = true\n    this.#dispose = dispose\n  }\n\n  unmount() {\n    if (!this.#isMounted) {\n      throw new Error('Devtools is not mounted')\n    }\n    this.#dispose?.()\n    this.#isMounted = false\n  }\n\n  setRouter(router: AnyRouter) {\n    this.#router[1](router)\n  }\n\n  setRouterState(routerState: any) {\n    this.#routerState[1](routerState)\n  }\n\n  setOptions(options: Partial<DevtoolsOptions>) {\n    if (options.position !== undefined) {\n      this.#position = options.position\n    }\n\n    if (options.initialIsOpen !== undefined) {\n      this.#initialIsOpen = options.initialIsOpen\n    }\n\n    if (options.shadowDOMTarget !== undefined) {\n      this.#shadowDOMTarget = options.shadowDOMTarget\n    }\n\n    if (options.containerElement !== undefined) {\n      this.#containerElement = options.containerElement\n    }\n  }\n}\n\nexport { TanStackRouterDevtoolsCore }\n"],"names":["TanStackRouterDevtoolsCore","constructor","config","createSignal","router","routerState","position","initialIsOpen","shadowDOMTarget","panelProps","closeButtonProps","toggleButtonProps","containerElement","mount","el","Error","dispose","render","Devtools","lazy","_$createComponent","unmount","setRouter","setRouterState","setOptions","options","undefined"],"mappings":";;;;;;;;;;;;AAkDA,MAAMA,2BAA2B;AAAA,EAgB/BC,YAAYC,QAAyB;AAfrC;AACA;AACA;AACA;AACA;AAEA;AACA;AACA;AACA;AAEA,mCAAa;AACb;AACA;AAGO,uBAAA,SAAUC,qBAAaD,OAAOE,MAAM;AACpC,uBAAA,cAAeD,qBAAaD,OAAOG,WAAW;AAC9C,uBAAA,WAAYH,OAAOI,YAAY;AAC/B,uBAAA,gBAAiBJ,OAAOK,iBAAiB;AAC9C,uBAAK,kBAAmBL,OAAOM;AAE/B,uBAAK,aAAcN,OAAOO;AAC1B,uBAAK,mBAAoBP,OAAOQ;AAChC,uBAAK,oBAAqBR,OAAOS;AACjC,uBAAK,mBAAoBT,OAAOU;AAAAA,EAAAA;AAAAA,EAGlCC,MAA6BC,IAAO;AAClC,QAAI,mBAAK,aAAY;AACb,YAAA,IAAIC,MAAM,6BAA6B;AAAA,IAAA;AAGzCC,UAAAA,UAAUC,IAAAA,OAAO,MAAM;AACrB,YAAA,CAACb,MAAM,IAAI,mBAAK;AAChB,YAAA,CAACC,WAAW,IAAI,mBAAK;AAC3B,YAAMC,WAAW,mBAAK;AACtB,YAAMC,gBAAgB,mBAAK;AAC3B,YAAMC,kBAAkB,mBAAK;AAE7B,YAAMC,aAAa,mBAAK;AACxB,YAAMC,mBAAmB,mBAAK;AAC9B,YAAMC,oBAAoB,mBAAK;AAC/B,YAAMC,mBAAmB,mBAAK;AAE1BM,UAAAA;AAEJ,UAAI,mBAAK,aAAY;AACnBA,mBAAW,mBAAK;AAAA,MAAA,OACX;AACLA,mBAAWC,QAAK,KAAA,MAAM,QAAO,QAAA,EAAA,KAAA,MAAA,QAAA,sCAAkC,EAAC;AAChE,2BAAK,YAAaD;AAAAA,MAAAA;AAGpB,aAAAE,IAAAA,gBACGF,UAAQ;AAAA,QACPZ;AAAAA,QACAC;AAAAA,QACAC;AAAAA,QACAJ;AAAAA,QACAC;AAAAA,QACAI;AAAAA,QACAC;AAAAA,QACAC;AAAAA,QACAC;AAAAA,MAAAA,CAAkC;AAAA,OAGrCE,EAAE;AAEL,uBAAK,YAAa;AAClB,uBAAK,UAAWE;AAAAA,EAAAA;AAAAA,EAGlBK,UAAU;;AACJ,QAAA,CAAC,mBAAK,aAAY;AACd,YAAA,IAAIN,MAAM,yBAAyB;AAAA,IAAA;AAE3C,6BAAK,cAAL;AACA,uBAAK,YAAa;AAAA,EAAA;AAAA,EAGpBO,UAAUlB,QAAmB;AACtB,uBAAA,SAAQ,CAAC,EAAEA,MAAM;AAAA,EAAA;AAAA,EAGxBmB,eAAelB,aAAkB;AAC1B,uBAAA,cAAa,CAAC,EAAEA,WAAW;AAAA,EAAA;AAAA,EAGlCmB,WAAWC,SAAmC;AACxCA,QAAAA,QAAQnB,aAAaoB,QAAW;AAClC,yBAAK,WAAYD,QAAQnB;AAAAA,IAAAA;AAGvBmB,QAAAA,QAAQlB,kBAAkBmB,QAAW;AACvC,yBAAK,gBAAiBD,QAAQlB;AAAAA,IAAAA;AAG5BkB,QAAAA,QAAQjB,oBAAoBkB,QAAW;AACzC,yBAAK,kBAAmBD,QAAQjB;AAAAA,IAAAA;AAG9BiB,QAAAA,QAAQb,qBAAqBc,QAAW;AAC1C,yBAAK,mBAAoBD,QAAQb;AAAAA,IAAAA;AAAAA,EACnC;AAEJ;AA1GE;AACA;AACA;AACA;AACA;AAEA;AACA;AACA;AACA;AAEA;AACA;AACA;;"}

package/dist/esm/TanStackRouterDevtoolsCore.js

@@ -5,7 +5,7 @@ var __accessCheck = (obj, member, msg) => member.has(obj) || __typeError("Cannot
 var __privateGet = (obj, member, getter) => (__accessCheck(obj, member, "read from private field"), getter ? getter.call(obj) : member.get(obj));
 var __privateAdd = (obj, member, value) => member.has(obj) ? __typeError("Cannot add the same private member more than once") : member instanceof WeakSet ? member.add(obj) : member.set(obj, value);
 var __privateSet = (obj, member, value, setter) => (__accessCheck(obj, member, "write to private field"), setter ? setter.call(obj, value) : member.set(obj, value), value);
-var _router, _routerState, _position, _initialIsOpen, _shadowDOMTarget, _panelProps, _closeButtonProps, _toggleButtonProps, _isMounted, _Component, _dispose;
+var _router, _routerState, _position, _initialIsOpen, _shadowDOMTarget, _panelProps, _closeButtonProps, _toggleButtonProps, _containerElement, _isMounted, _Component, _dispose;
 import { render, createComponent } from "solid-js/web";
 import { createSignal, lazy } from "solid-js";
 class TanStackRouterDevtoolsCore {
@@ -18,6 +18,7 @@ class TanStackRouterDevtoolsCore {
     __privateAdd(this, _panelProps);
     __privateAdd(this, _closeButtonProps);
     __privateAdd(this, _toggleButtonProps);
+    __privateAdd(this, _containerElement);
     __privateAdd(this, _isMounted, false);
     __privateAdd(this, _Component);
     __privateAdd(this, _dispose);
@@ -29,6 +30,7 @@ class TanStackRouterDevtoolsCore {
     __privateSet(this, _panelProps, config.panelProps);
     __privateSet(this, _closeButtonProps, config.closeButtonProps);
     __privateSet(this, _toggleButtonProps, config.toggleButtonProps);
+    __privateSet(this, _containerElement, config.containerElement);
   }
   mount(el) {
     if (__privateGet(this, _isMounted)) {
@@ -43,6 +45,7 @@ class TanStackRouterDevtoolsCore {
       const panelProps = __privateGet(this, _panelProps);
       const closeButtonProps = __privateGet(this, _closeButtonProps);
       const toggleButtonProps = __privateGet(this, _toggleButtonProps);
+      const containerElement = __privateGet(this, _containerElement);
       let Devtools;
       if (__privateGet(this, _Component)) {
         Devtools = __privateGet(this, _Component);
@@ -58,7 +61,8 @@ class TanStackRouterDevtoolsCore {
         routerState,
         panelProps,
         closeButtonProps,
-        toggleButtonProps
+        toggleButtonProps,
+        containerElement
       });
     }, el);
     __privateSet(this, _isMounted, true);
@@ -88,6 +92,9 @@ class TanStackRouterDevtoolsCore {
     if (options.shadowDOMTarget !== void 0) {
       __privateSet(this, _shadowDOMTarget, options.shadowDOMTarget);
     }
+    if (options.containerElement !== void 0) {
+      __privateSet(this, _containerElement, options.containerElement);
+    }
   }
 }
 _router = new WeakMap();
@@ -98,6 +105,7 @@ _shadowDOMTarget = new WeakMap();
 _panelProps = new WeakMap();
 _closeButtonProps = new WeakMap();
 _toggleButtonProps = new WeakMap();
+_containerElement = new WeakMap();
 _isMounted = new WeakMap();
 _Component = new WeakMap();
 _dispose = new WeakMap();

package/dist/esm/TanStackRouterDevtoolsCore.js.map

@@ -1 +1 @@
-{"version":3,"file":"TanStackRouterDevtoolsCore.js","sources":["../../src/TanStackRouterDevtoolsCore.tsx"],"sourcesContent":["import { createSignal, lazy } from 'solid-js'\nimport { render } from 'solid-js/web'\nimport type { AnyRouter } from '@tanstack/router-core'\nimport type { Signal } 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 class, style (merge and override default style), etc.\n   */\n  panelProps?: any & {\n    ref?: any\n  }\n  /**\n   * Use this to add props to the close button. For example, you can add class, style (merge and override default style), onClick (extend default handler), etc.\n   */\n  closeButtonProps?: any & {\n    ref?: any\n  }\n  /**\n   * Use this to add props to the toggle button. For example, you can add class, style (merge and override default style), onClick (extend default handler), etc.\n   */\n  toggleButtonProps?: any & {\n    ref?: any\n  }\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   * A boolean variable indicating if the \"lite\" version of the library is being used\n   */\n  router: AnyRouter\n  routerState: any\n  /**\n   * Use this to attach the devtool's styles to specific element in the DOM.\n   */\n  shadowDOMTarget?: ShadowRoot\n}\n\nclass TanStackRouterDevtoolsCore {\n  #router: Signal<AnyRouter>\n  #routerState: Signal<any>\n  #position: 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right'\n  #initialIsOpen: boolean\n  #shadowDOMTarget?: ShadowRoot\n\n  #panelProps: any\n  #closeButtonProps: any\n  #toggleButtonProps: any\n\n  #isMounted = false\n  #Component: any\n  #dispose?: () => void\n\n  constructor(config: DevtoolsOptions) {\n    this.#router = createSignal(config.router)\n    this.#routerState = createSignal(config.routerState)\n    this.#position = config.position ?? 'bottom-left'\n    this.#initialIsOpen = config.initialIsOpen ?? false\n    this.#shadowDOMTarget = config.shadowDOMTarget\n\n    this.#panelProps = config.panelProps\n    this.#closeButtonProps = config.closeButtonProps\n    this.#toggleButtonProps = config.toggleButtonProps\n  }\n\n  mount<T extends HTMLElement>(el: T) {\n    if (this.#isMounted) {\n      throw new Error('Devtools is already mounted')\n    }\n\n    const dispose = render(() => {\n      const [router] = this.#router\n      const [routerState] = this.#routerState\n      const position = this.#position\n      const initialIsOpen = this.#initialIsOpen\n      const shadowDOMTarget = this.#shadowDOMTarget\n\n      const panelProps = this.#panelProps\n      const closeButtonProps = this.#closeButtonProps\n      const toggleButtonProps = this.#toggleButtonProps\n\n      let Devtools\n\n      if (this.#Component) {\n        Devtools = this.#Component\n      } else {\n        Devtools = lazy(() => import('./FloatingTanStackRouterDevtools'))\n        this.#Component = Devtools\n      }\n\n      return (\n        <Devtools\n          position={position}\n          initialIsOpen={initialIsOpen}\n          shadowDOMTarget={shadowDOMTarget}\n          router={router}\n          routerState={routerState}\n          panelProps={panelProps}\n          closeButtonProps={closeButtonProps}\n          toggleButtonProps={toggleButtonProps}\n        />\n      )\n    }, el)\n\n    this.#isMounted = true\n    this.#dispose = dispose\n  }\n\n  unmount() {\n    if (!this.#isMounted) {\n      throw new Error('Devtools is not mounted')\n    }\n    this.#dispose?.()\n    this.#isMounted = false\n  }\n\n  setRouter(router: AnyRouter) {\n    this.#router[1](router)\n  }\n\n  setRouterState(routerState: any) {\n    this.#routerState[1](routerState)\n  }\n\n  setOptions(options: Partial<DevtoolsOptions>) {\n    if (options.position !== undefined) {\n      this.#position = options.position\n    }\n\n    if (options.initialIsOpen !== undefined) {\n      this.#initialIsOpen = options.initialIsOpen\n    }\n\n    if (options.shadowDOMTarget !== undefined) {\n      this.#shadowDOMTarget = options.shadowDOMTarget\n    }\n  }\n}\n\nexport { TanStackRouterDevtoolsCore }\n"],"names":["TanStackRouterDevtoolsCore","constructor","config","createSignal","router","routerState","position","initialIsOpen","shadowDOMTarget","panelProps","closeButtonProps","toggleButtonProps","mount","el","Error","dispose","render","Devtools","lazy","_$createComponent","unmount","setRouter","setRouterState","setOptions","options","undefined"],"mappings":";;;;;;;;;;AAkDA,MAAMA,2BAA2B;AAAA,EAe/BC,YAAYC,QAAyB;AAdrC;AACA;AACA;AACA;AACA;AAEA;AACA;AACA;AAEA,mCAAa;AACb;AACA;AAGO,uBAAA,SAAUC,aAAaD,OAAOE,MAAM;AACpC,uBAAA,cAAeD,aAAaD,OAAOG,WAAW;AAC9C,uBAAA,WAAYH,OAAOI,YAAY;AAC/B,uBAAA,gBAAiBJ,OAAOK,iBAAiB;AAC9C,uBAAK,kBAAmBL,OAAOM;AAE/B,uBAAK,aAAcN,OAAOO;AAC1B,uBAAK,mBAAoBP,OAAOQ;AAChC,uBAAK,oBAAqBR,OAAOS;AAAAA,EAAAA;AAAAA,EAGnCC,MAA6BC,IAAO;AAClC,QAAI,mBAAK,aAAY;AACb,YAAA,IAAIC,MAAM,6BAA6B;AAAA,IAAA;AAGzCC,UAAAA,UAAUC,OAAO,MAAM;AACrB,YAAA,CAACZ,MAAM,IAAI,mBAAK;AAChB,YAAA,CAACC,WAAW,IAAI,mBAAK;AAC3B,YAAMC,WAAW,mBAAK;AACtB,YAAMC,gBAAgB,mBAAK;AAC3B,YAAMC,kBAAkB,mBAAK;AAE7B,YAAMC,aAAa,mBAAK;AACxB,YAAMC,mBAAmB,mBAAK;AAC9B,YAAMC,oBAAoB,mBAAK;AAE3BM,UAAAA;AAEJ,UAAI,mBAAK,aAAY;AACnBA,mBAAW,mBAAK;AAAA,MAAA,OACX;AACLA,mBAAWC,KAAK,MAAM,OAAO,qCAAkC,CAAC;AAChE,2BAAK,YAAaD;AAAAA,MAAAA;AAGpB,aAAAE,gBACGF,UAAQ;AAAA,QACPX;AAAAA,QACAC;AAAAA,QACAC;AAAAA,QACAJ;AAAAA,QACAC;AAAAA,QACAI;AAAAA,QACAC;AAAAA,QACAC;AAAAA,MAAAA,CAAoC;AAAA,OAGvCE,EAAE;AAEL,uBAAK,YAAa;AAClB,uBAAK,UAAWE;AAAAA,EAAAA;AAAAA,EAGlBK,UAAU;;AACJ,QAAA,CAAC,mBAAK,aAAY;AACd,YAAA,IAAIN,MAAM,yBAAyB;AAAA,IAAA;AAE3C,6BAAK,cAAL;AACA,uBAAK,YAAa;AAAA,EAAA;AAAA,EAGpBO,UAAUjB,QAAmB;AACtB,uBAAA,SAAQ,CAAC,EAAEA,MAAM;AAAA,EAAA;AAAA,EAGxBkB,eAAejB,aAAkB;AAC1B,uBAAA,cAAa,CAAC,EAAEA,WAAW;AAAA,EAAA;AAAA,EAGlCkB,WAAWC,SAAmC;AACxCA,QAAAA,QAAQlB,aAAamB,QAAW;AAClC,yBAAK,WAAYD,QAAQlB;AAAAA,IAAAA;AAGvBkB,QAAAA,QAAQjB,kBAAkBkB,QAAW;AACvC,yBAAK,gBAAiBD,QAAQjB;AAAAA,IAAAA;AAG5BiB,QAAAA,QAAQhB,oBAAoBiB,QAAW;AACzC,yBAAK,kBAAmBD,QAAQhB;AAAAA,IAAAA;AAAAA,EAClC;AAEJ;AAlGE;AACA;AACA;AACA;AACA;AAEA;AACA;AACA;AAEA;AACA;AACA;"}
+{"version":3,"file":"TanStackRouterDevtoolsCore.js","sources":["../../src/TanStackRouterDevtoolsCore.tsx"],"sourcesContent":["import { createSignal, lazy } from 'solid-js'\nimport { render } from 'solid-js/web'\nimport type { AnyRouter } from '@tanstack/router-core'\nimport type { Signal } 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 class, style (merge and override default style), etc.\n   */\n  panelProps?: any & {\n    ref?: any\n  }\n  /**\n   * Use this to add props to the close button. For example, you can add class, style (merge and override default style), onClick (extend default handler), etc.\n   */\n  closeButtonProps?: any & {\n    ref?: any\n  }\n  /**\n   * Use this to add props to the toggle button. For example, you can add class, style (merge and override default style), onClick (extend default handler), etc.\n   */\n  toggleButtonProps?: any & {\n    ref?: any\n  }\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   * A boolean variable indicating if the \"lite\" version of the library is being used\n   */\n  router: AnyRouter\n  routerState: any\n  /**\n   * Use this to attach the devtool's styles to specific element in the DOM.\n   */\n  shadowDOMTarget?: ShadowRoot\n}\n\nclass TanStackRouterDevtoolsCore {\n  #router: Signal<AnyRouter>\n  #routerState: Signal<any>\n  #position: 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right'\n  #initialIsOpen: boolean\n  #shadowDOMTarget?: ShadowRoot\n\n  #panelProps: any\n  #closeButtonProps: any\n  #toggleButtonProps: any\n  #containerElement?: string | any\n\n  #isMounted = false\n  #Component: any\n  #dispose?: () => void\n\n  constructor(config: DevtoolsOptions) {\n    this.#router = createSignal(config.router)\n    this.#routerState = createSignal(config.routerState)\n    this.#position = config.position ?? 'bottom-left'\n    this.#initialIsOpen = config.initialIsOpen ?? false\n    this.#shadowDOMTarget = config.shadowDOMTarget\n\n    this.#panelProps = config.panelProps\n    this.#closeButtonProps = config.closeButtonProps\n    this.#toggleButtonProps = config.toggleButtonProps\n    this.#containerElement = config.containerElement\n  }\n\n  mount<T extends HTMLElement>(el: T) {\n    if (this.#isMounted) {\n      throw new Error('Devtools is already mounted')\n    }\n\n    const dispose = render(() => {\n      const [router] = this.#router\n      const [routerState] = this.#routerState\n      const position = this.#position\n      const initialIsOpen = this.#initialIsOpen\n      const shadowDOMTarget = this.#shadowDOMTarget\n\n      const panelProps = this.#panelProps\n      const closeButtonProps = this.#closeButtonProps\n      const toggleButtonProps = this.#toggleButtonProps\n      const containerElement = this.#containerElement\n\n      let Devtools\n\n      if (this.#Component) {\n        Devtools = this.#Component\n      } else {\n        Devtools = lazy(() => import('./FloatingTanStackRouterDevtools'))\n        this.#Component = Devtools\n      }\n\n      return (\n        <Devtools\n          position={position}\n          initialIsOpen={initialIsOpen}\n          shadowDOMTarget={shadowDOMTarget}\n          router={router}\n          routerState={routerState}\n          panelProps={panelProps}\n          closeButtonProps={closeButtonProps}\n          toggleButtonProps={toggleButtonProps}\n          containerElement={containerElement}\n        />\n      )\n    }, el)\n\n    this.#isMounted = true\n    this.#dispose = dispose\n  }\n\n  unmount() {\n    if (!this.#isMounted) {\n      throw new Error('Devtools is not mounted')\n    }\n    this.#dispose?.()\n    this.#isMounted = false\n  }\n\n  setRouter(router: AnyRouter) {\n    this.#router[1](router)\n  }\n\n  setRouterState(routerState: any) {\n    this.#routerState[1](routerState)\n  }\n\n  setOptions(options: Partial<DevtoolsOptions>) {\n    if (options.position !== undefined) {\n      this.#position = options.position\n    }\n\n    if (options.initialIsOpen !== undefined) {\n      this.#initialIsOpen = options.initialIsOpen\n    }\n\n    if (options.shadowDOMTarget !== undefined) {\n      this.#shadowDOMTarget = options.shadowDOMTarget\n    }\n\n    if (options.containerElement !== undefined) {\n      this.#containerElement = options.containerElement\n    }\n  }\n}\n\nexport { TanStackRouterDevtoolsCore }\n"],"names":["TanStackRouterDevtoolsCore","constructor","config","createSignal","router","routerState","position","initialIsOpen","shadowDOMTarget","panelProps","closeButtonProps","toggleButtonProps","containerElement","mount","el","Error","dispose","render","Devtools","lazy","_$createComponent","unmount","setRouter","setRouterState","setOptions","options","undefined"],"mappings":";;;;;;;;;;AAkDA,MAAMA,2BAA2B;AAAA,EAgB/BC,YAAYC,QAAyB;AAfrC;AACA;AACA;AACA;AACA;AAEA;AACA;AACA;AACA;AAEA,mCAAa;AACb;AACA;AAGO,uBAAA,SAAUC,aAAaD,OAAOE,MAAM;AACpC,uBAAA,cAAeD,aAAaD,OAAOG,WAAW;AAC9C,uBAAA,WAAYH,OAAOI,YAAY;AAC/B,uBAAA,gBAAiBJ,OAAOK,iBAAiB;AAC9C,uBAAK,kBAAmBL,OAAOM;AAE/B,uBAAK,aAAcN,OAAOO;AAC1B,uBAAK,mBAAoBP,OAAOQ;AAChC,uBAAK,oBAAqBR,OAAOS;AACjC,uBAAK,mBAAoBT,OAAOU;AAAAA,EAAAA;AAAAA,EAGlCC,MAA6BC,IAAO;AAClC,QAAI,mBAAK,aAAY;AACb,YAAA,IAAIC,MAAM,6BAA6B;AAAA,IAAA;AAGzCC,UAAAA,UAAUC,OAAO,MAAM;AACrB,YAAA,CAACb,MAAM,IAAI,mBAAK;AAChB,YAAA,CAACC,WAAW,IAAI,mBAAK;AAC3B,YAAMC,WAAW,mBAAK;AACtB,YAAMC,gBAAgB,mBAAK;AAC3B,YAAMC,kBAAkB,mBAAK;AAE7B,YAAMC,aAAa,mBAAK;AACxB,YAAMC,mBAAmB,mBAAK;AAC9B,YAAMC,oBAAoB,mBAAK;AAC/B,YAAMC,mBAAmB,mBAAK;AAE1BM,UAAAA;AAEJ,UAAI,mBAAK,aAAY;AACnBA,mBAAW,mBAAK;AAAA,MAAA,OACX;AACLA,mBAAWC,KAAK,MAAM,OAAO,qCAAkC,CAAC;AAChE,2BAAK,YAAaD;AAAAA,MAAAA;AAGpB,aAAAE,gBACGF,UAAQ;AAAA,QACPZ;AAAAA,QACAC;AAAAA,QACAC;AAAAA,QACAJ;AAAAA,QACAC;AAAAA,QACAI;AAAAA,QACAC;AAAAA,QACAC;AAAAA,QACAC;AAAAA,MAAAA,CAAkC;AAAA,OAGrCE,EAAE;AAEL,uBAAK,YAAa;AAClB,uBAAK,UAAWE;AAAAA,EAAAA;AAAAA,EAGlBK,UAAU;;AACJ,QAAA,CAAC,mBAAK,aAAY;AACd,YAAA,IAAIN,MAAM,yBAAyB;AAAA,IAAA;AAE3C,6BAAK,cAAL;AACA,uBAAK,YAAa;AAAA,EAAA;AAAA,EAGpBO,UAAUlB,QAAmB;AACtB,uBAAA,SAAQ,CAAC,EAAEA,MAAM;AAAA,EAAA;AAAA,EAGxBmB,eAAelB,aAAkB;AAC1B,uBAAA,cAAa,CAAC,EAAEA,WAAW;AAAA,EAAA;AAAA,EAGlCmB,WAAWC,SAAmC;AACxCA,QAAAA,QAAQnB,aAAaoB,QAAW;AAClC,yBAAK,WAAYD,QAAQnB;AAAAA,IAAAA;AAGvBmB,QAAAA,QAAQlB,kBAAkBmB,QAAW;AACvC,yBAAK,gBAAiBD,QAAQlB;AAAAA,IAAAA;AAG5BkB,QAAAA,QAAQjB,oBAAoBkB,QAAW;AACzC,yBAAK,kBAAmBD,QAAQjB;AAAAA,IAAAA;AAG9BiB,QAAAA,QAAQb,qBAAqBc,QAAW;AAC1C,yBAAK,mBAAoBD,QAAQb;AAAAA,IAAAA;AAAAA,EACnC;AAEJ;AA1GE;AACA;AACA;AACA;AACA;AAEA;AACA;AACA;AACA;AAEA;AACA;AACA;"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tanstack/router-devtools-core",
-  "version": "1.121.0-alpha.11",
+  "version": "1.121.0-alpha.14",
   "description": "Modern and scalable routing for Web applications",
   "author": "Tanner Linsley",
   "license": "MIT",
@@ -60,7 +60,7 @@
     "tiny-invariant": "^1.3.3",
     "csstype": "^3.0.10",
     "solid-js": ">=1.9.5",
-    "@tanstack/router-core": "^1.121.0-alpha.11"
+    "@tanstack/router-core": "^1.121.0-alpha.14"
   },
   "peerDependenciesMeta": {
     "csstype": {

package/src/TanStackRouterDevtoolsCore.tsx

@@ -58,6 +58,7 @@ class TanStackRouterDevtoolsCore {
   #panelProps: any
   #closeButtonProps: any
   #toggleButtonProps: any
+  #containerElement?: string | any
 
   #isMounted = false
   #Component: any
@@ -73,6 +74,7 @@ class TanStackRouterDevtoolsCore {
     this.#panelProps = config.panelProps
     this.#closeButtonProps = config.closeButtonProps
     this.#toggleButtonProps = config.toggleButtonProps
+    this.#containerElement = config.containerElement
   }
 
   mount<T extends HTMLElement>(el: T) {
@@ -90,6 +92,7 @@ class TanStackRouterDevtoolsCore {
       const panelProps = this.#panelProps
       const closeButtonProps = this.#closeButtonProps
       const toggleButtonProps = this.#toggleButtonProps
+      const containerElement = this.#containerElement
 
       let Devtools
 
@@ -110,6 +113,7 @@ class TanStackRouterDevtoolsCore {
           panelProps={panelProps}
           closeButtonProps={closeButtonProps}
           toggleButtonProps={toggleButtonProps}
+          containerElement={containerElement}
         />
       )
     }, el)
@@ -146,6 +150,10 @@ class TanStackRouterDevtoolsCore {
     if (options.shadowDOMTarget !== undefined) {
       this.#shadowDOMTarget = options.shadowDOMTarget
     }
+
+    if (options.containerElement !== undefined) {
+      this.#containerElement = options.containerElement
+    }
   }
 }