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

Comparing version 1.114.17 to 1.114.20

dist/cjs/TanStackRouterDevtoolsCore.cjs

@@ -9,3 +9,3 @@ "use strict";
 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, _isMounted, _Component, _dispose;
+var _router, _routerState, _position, _initialIsOpen, _shadowDOMTarget, _panelProps, _closeButtonProps, _toggleButtonProps, _isMounted, _Component, _dispose;
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
@@ -21,17 +21,16 @@ const web = require("solid-js/web");
     __privateAdd(this, _shadowDOMTarget);
+    __privateAdd(this, _panelProps);
+    __privateAdd(this, _closeButtonProps);
+    __privateAdd(this, _toggleButtonProps);
     __privateAdd(this, _isMounted, false);
     __privateAdd(this, _Component);
     __privateAdd(this, _dispose);
-    const {
-      router,
-      routerState,
-      position,
-      initialIsOpen,
-      shadowDOMTarget
-    } = config;
-    __privateSet(this, _router, solidJs.createSignal(router));
-    __privateSet(this, _routerState, solidJs.createSignal(routerState));
-    __privateSet(this, _position, position ?? "bottom-left");
-    __privateSet(this, _initialIsOpen, initialIsOpen ?? false);
-    __privateSet(this, _shadowDOMTarget, shadowDOMTarget);
+    __privateSet(this, _router, solidJs.createSignal(config.router));
+    __privateSet(this, _routerState, solidJs.createSignal(config.routerState));
+    __privateSet(this, _position, config.position ?? "bottom-left");
+    __privateSet(this, _initialIsOpen, config.initialIsOpen ?? false);
+    __privateSet(this, _shadowDOMTarget, config.shadowDOMTarget);
+    __privateSet(this, _panelProps, config.panelProps);
+    __privateSet(this, _closeButtonProps, config.closeButtonProps);
+    __privateSet(this, _toggleButtonProps, config.toggleButtonProps);
   }
@@ -48,2 +47,5 @@ mount(el) {
       const shadowDOMTarget = __privateGet(this, _shadowDOMTarget);
+      const panelProps = __privateGet(this, _panelProps);
+      const closeButtonProps = __privateGet(this, _closeButtonProps);
+      const toggleButtonProps = __privateGet(this, _toggleButtonProps);
       let Devtools;
@@ -61,3 +63,6 @@ if (__privateGet(this, _Component)) {
         router,
-        routerState
+        routerState,
+        panelProps,
+        closeButtonProps,
+        toggleButtonProps
       });
@@ -99,2 +104,5 @@ }, el);
 _shadowDOMTarget = new WeakMap();
+_panelProps = new WeakMap();
+_closeButtonProps = new WeakMap();
+_toggleButtonProps = new WeakMap();
 _isMounted = new WeakMap();
@@ -101,0 +109,0 @@ _Component = new WeakMap();

dist/cjs/TanStackRouterDevtoolsCore.cjs.map

@@ -1,1 +0,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  #isMounted = false\n  #Component: any\n  #dispose?: () => void\n\n  constructor(config: DevtoolsOptions) {\n    const { router, routerState, position, initialIsOpen, shadowDOMTarget } =\n      config\n\n    this.#router = createSignal(router)\n    this.#routerState = createSignal(routerState)\n    this.#position = position ?? 'bottom-left'\n    this.#initialIsOpen = initialIsOpen ?? false\n    this.#shadowDOMTarget = shadowDOMTarget\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      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        />\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","router","routerState","position","initialIsOpen","shadowDOMTarget","createSignal","mount","el","Error","dispose","render","Devtools","lazy","_$createComponent","unmount","setRouter","setRouterState","setOptions","options","undefined"],"mappings":";;;;;;;;;;;;AAkDA,MAAMA,2BAA2B;AAAA,EAU/BC,YAAYC,QAAyB;AATrC;AACA;AACA;AACA;AACA;AACA,mCAAa;AACb;AACA;AAGQ,UAAA;AAAA,MAAEC;AAAAA,MAAQC;AAAAA,MAAaC;AAAAA,MAAUC;AAAAA,MAAeC;AAAAA,IAAAA,IACpDL;AAEG,uBAAA,SAAUM,qBAAaL,MAAM;AAC7B,uBAAA,cAAeK,qBAAaJ,WAAW;AAC5C,uBAAK,WAAYC,YAAY;AAC7B,uBAAK,gBAAiBC,iBAAiB;AACvC,uBAAK,kBAAmBC;AAAAA,EAAAA;AAAAA,EAG1BE,MAA6BC,IAAO;AAClC,QAAI,mBAAK,aAAY;AACb,YAAA,IAAIC,MAAM,6BAA6B;AAAA,IAAA;AAGzCC,UAAAA,UAAUC,IAAAA,OAAO,MAAM;AACrB,YAAA,CAACV,MAAM,IAAI,mBAAK;AAChB,YAAA,CAACC,WAAW,IAAI,mBAAK;AAC3B,YAAMC,WAAW,mBAAK;AACtB,YAAMC,gBAAgB,mBAAK;AAC3B,YAAMC,kBAAkB,mBAAK;AAEzBO,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,QACPT;AAAAA,QACAC;AAAAA,QACAC;AAAAA,QACAJ;AAAAA,QACAC;AAAAA,MAAAA,CAAwB;AAAA,OAG3BM,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,UAAUf,QAAmB;AACtB,uBAAA,SAAQ,CAAC,EAAEA,MAAM;AAAA,EAAA;AAAA,EAGxBgB,eAAef,aAAkB;AAC1B,uBAAA,cAAa,CAAC,EAAEA,WAAW;AAAA,EAAA;AAAA,EAGlCgB,WAAWC,SAAmC;AACxCA,QAAAA,QAAQhB,aAAaiB,QAAW;AAClC,yBAAK,WAAYD,QAAQhB;AAAAA,IAAAA;AAGvBgB,QAAAA,QAAQf,kBAAkBgB,QAAW;AACvC,yBAAK,gBAAiBD,QAAQf;AAAAA,IAAAA;AAG5Be,QAAAA,QAAQd,oBAAoBe,QAAW;AACzC,yBAAK,kBAAmBD,QAAQd;AAAAA,IAAAA;AAAAA,EAClC;AAEJ;AArFE;AACA;AACA;AACA;AACA;AACA;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\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;;"}

dist/esm/TanStackRouterDevtoolsCore.js

@@ -8,3 +8,3 @@ var __typeError = (msg) => {
 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, _isMounted, _Component, _dispose;
+var _router, _routerState, _position, _initialIsOpen, _shadowDOMTarget, _panelProps, _closeButtonProps, _toggleButtonProps, _isMounted, _Component, _dispose;
 import { render, createComponent } from "solid-js/web";
@@ -19,17 +19,16 @@ import { createSignal, lazy } from "solid-js";
     __privateAdd(this, _shadowDOMTarget);
+    __privateAdd(this, _panelProps);
+    __privateAdd(this, _closeButtonProps);
+    __privateAdd(this, _toggleButtonProps);
     __privateAdd(this, _isMounted, false);
     __privateAdd(this, _Component);
     __privateAdd(this, _dispose);
-    const {
-      router,
-      routerState,
-      position,
-      initialIsOpen,
-      shadowDOMTarget
-    } = config;
-    __privateSet(this, _router, createSignal(router));
-    __privateSet(this, _routerState, createSignal(routerState));
-    __privateSet(this, _position, position ?? "bottom-left");
-    __privateSet(this, _initialIsOpen, initialIsOpen ?? false);
-    __privateSet(this, _shadowDOMTarget, shadowDOMTarget);
+    __privateSet(this, _router, createSignal(config.router));
+    __privateSet(this, _routerState, createSignal(config.routerState));
+    __privateSet(this, _position, config.position ?? "bottom-left");
+    __privateSet(this, _initialIsOpen, config.initialIsOpen ?? false);
+    __privateSet(this, _shadowDOMTarget, config.shadowDOMTarget);
+    __privateSet(this, _panelProps, config.panelProps);
+    __privateSet(this, _closeButtonProps, config.closeButtonProps);
+    __privateSet(this, _toggleButtonProps, config.toggleButtonProps);
   }
@@ -46,2 +45,5 @@ mount(el) {
       const shadowDOMTarget = __privateGet(this, _shadowDOMTarget);
+      const panelProps = __privateGet(this, _panelProps);
+      const closeButtonProps = __privateGet(this, _closeButtonProps);
+      const toggleButtonProps = __privateGet(this, _toggleButtonProps);
       let Devtools;
@@ -59,3 +61,6 @@ if (__privateGet(this, _Component)) {
         router,
-        routerState
+        routerState,
+        panelProps,
+        closeButtonProps,
+        toggleButtonProps
       });
@@ -97,2 +102,5 @@ }, el);
 _shadowDOMTarget = new WeakMap();
+_panelProps = new WeakMap();
+_closeButtonProps = new WeakMap();
+_toggleButtonProps = new WeakMap();
 _isMounted = new WeakMap();
@@ -99,0 +107,0 @@ _Component = new WeakMap();

dist/esm/TanStackRouterDevtoolsCore.js.map

@@ -1,1 +0,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  #isMounted = false\n  #Component: any\n  #dispose?: () => void\n\n  constructor(config: DevtoolsOptions) {\n    const { router, routerState, position, initialIsOpen, shadowDOMTarget } =\n      config\n\n    this.#router = createSignal(router)\n    this.#routerState = createSignal(routerState)\n    this.#position = position ?? 'bottom-left'\n    this.#initialIsOpen = initialIsOpen ?? false\n    this.#shadowDOMTarget = shadowDOMTarget\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      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        />\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","router","routerState","position","initialIsOpen","shadowDOMTarget","createSignal","mount","el","Error","dispose","render","Devtools","lazy","_$createComponent","unmount","setRouter","setRouterState","setOptions","options","undefined"],"mappings":";;;;;;;;;;AAkDA,MAAMA,2BAA2B;AAAA,EAU/BC,YAAYC,QAAyB;AATrC;AACA;AACA;AACA;AACA;AACA,mCAAa;AACb;AACA;AAGQ,UAAA;AAAA,MAAEC;AAAAA,MAAQC;AAAAA,MAAaC;AAAAA,MAAUC;AAAAA,MAAeC;AAAAA,IAAAA,IACpDL;AAEG,uBAAA,SAAUM,aAAaL,MAAM;AAC7B,uBAAA,cAAeK,aAAaJ,WAAW;AAC5C,uBAAK,WAAYC,YAAY;AAC7B,uBAAK,gBAAiBC,iBAAiB;AACvC,uBAAK,kBAAmBC;AAAAA,EAAAA;AAAAA,EAG1BE,MAA6BC,IAAO;AAClC,QAAI,mBAAK,aAAY;AACb,YAAA,IAAIC,MAAM,6BAA6B;AAAA,IAAA;AAGzCC,UAAAA,UAAUC,OAAO,MAAM;AACrB,YAAA,CAACV,MAAM,IAAI,mBAAK;AAChB,YAAA,CAACC,WAAW,IAAI,mBAAK;AAC3B,YAAMC,WAAW,mBAAK;AACtB,YAAMC,gBAAgB,mBAAK;AAC3B,YAAMC,kBAAkB,mBAAK;AAEzBO,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,QACPT;AAAAA,QACAC;AAAAA,QACAC;AAAAA,QACAJ;AAAAA,QACAC;AAAAA,MAAAA,CAAwB;AAAA,OAG3BM,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,UAAUf,QAAmB;AACtB,uBAAA,SAAQ,CAAC,EAAEA,MAAM;AAAA,EAAA;AAAA,EAGxBgB,eAAef,aAAkB;AAC1B,uBAAA,cAAa,CAAC,EAAEA,WAAW;AAAA,EAAA;AAAA,EAGlCgB,WAAWC,SAAmC;AACxCA,QAAAA,QAAQhB,aAAaiB,QAAW;AAClC,yBAAK,WAAYD,QAAQhB;AAAAA,IAAAA;AAGvBgB,QAAAA,QAAQf,kBAAkBgB,QAAW;AACvC,yBAAK,gBAAiBD,QAAQf;AAAAA,IAAAA;AAG5Be,QAAAA,QAAQd,oBAAoBe,QAAW;AACzC,yBAAK,kBAAmBD,QAAQd;AAAAA,IAAAA;AAAAA,EAClC;AAEJ;AArFE;AACA;AACA;AACA;AACA;AACA;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\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;"}

package.json

 {
   "name": "@tanstack/router-devtools-core",
-  "version": "1.114.17",
+  "version": "1.114.20",
   "description": "Modern and scalable routing for Web applications",
@@ -5,0 +5,0 @@ "author": "Tanner Linsley",

src/TanStackRouterDevtoolsCore.tsx

@@ -57,2 +57,7 @@ import { createSignal, lazy } from 'solid-js'
   #shadowDOMTarget?: ShadowRoot
+
+  #panelProps: any
+  #closeButtonProps: any
+  #toggleButtonProps: any
+
   #isMounted = false
@@ -63,10 +68,11 @@ #Component: any
   constructor(config: DevtoolsOptions) {
-    const { router, routerState, position, initialIsOpen, shadowDOMTarget } =
-      config
+    this.#router = createSignal(config.router)
+    this.#routerState = createSignal(config.routerState)
+    this.#position = config.position ?? 'bottom-left'
+    this.#initialIsOpen = config.initialIsOpen ?? false
+    this.#shadowDOMTarget = config.shadowDOMTarget
 
-    this.#router = createSignal(router)
-    this.#routerState = createSignal(routerState)
-    this.#position = position ?? 'bottom-left'
-    this.#initialIsOpen = initialIsOpen ?? false
-    this.#shadowDOMTarget = shadowDOMTarget
+    this.#panelProps = config.panelProps
+    this.#closeButtonProps = config.closeButtonProps
+    this.#toggleButtonProps = config.toggleButtonProps
   }
@@ -86,2 +92,6 @@
 
+      const panelProps = this.#panelProps
+      const closeButtonProps = this.#closeButtonProps
+      const toggleButtonProps = this.#toggleButtonProps
+
       let Devtools
@@ -103,2 +113,5 @@
           routerState={routerState}
+          panelProps={panelProps}
+          closeButtonProps={closeButtonProps}
+          toggleButtonProps={toggleButtonProps}
         />
@@ -105,0 +118,0 @@ )

New alerts

Long strings

Supply chain risk

Contains long string literals, which may be a sign of obfuscated or packed code.

Found 1 instance in 1 package

Fixed alerts

Long strings

Supply chain risk

Contains long string literals, which may be a sign of obfuscated or packed code.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

686031

0.46%

Lines of code

8679

0.3%

No dependency changes