@tanstack/router-devtools-core 1.120.6 → 1.121.0-alpha.3

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -6,7 +6,7 @@ var __accessCheck = (obj, member, msg) => member.has(obj) || __typeError("Cannot
6
6
  var __privateGet = (obj, member, getter) => (__accessCheck(obj, member, "read from private field"), getter ? getter.call(obj) : member.get(obj));
7
7
  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);
8
8
  var __privateSet = (obj, member, value, setter) => (__accessCheck(obj, member, "write to private field"), setter ? setter.call(obj, value) : member.set(obj, value), value);
9
- var _router, _routerState, _position, _initialIsOpen, _shadowDOMTarget, _panelProps, _closeButtonProps, _toggleButtonProps, _containerElement, _isMounted, _Component, _dispose;
9
+ var _router, _routerState, _position, _initialIsOpen, _shadowDOMTarget, _panelProps, _closeButtonProps, _toggleButtonProps, _isMounted, _Component, _dispose;
10
10
  Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
11
11
  const web = require("solid-js/web");
12
12
  const solidJs = require("solid-js");
@@ -20,7 +20,6 @@ class TanStackRouterDevtoolsCore {
20
20
  __privateAdd(this, _panelProps);
21
21
  __privateAdd(this, _closeButtonProps);
22
22
  __privateAdd(this, _toggleButtonProps);
23
- __privateAdd(this, _containerElement);
24
23
  __privateAdd(this, _isMounted, false);
25
24
  __privateAdd(this, _Component);
26
25
  __privateAdd(this, _dispose);
@@ -32,7 +31,6 @@ class TanStackRouterDevtoolsCore {
32
31
  __privateSet(this, _panelProps, config.panelProps);
33
32
  __privateSet(this, _closeButtonProps, config.closeButtonProps);
34
33
  __privateSet(this, _toggleButtonProps, config.toggleButtonProps);
35
- __privateSet(this, _containerElement, config.containerElement);
36
34
  }
37
35
  mount(el) {
38
36
  if (__privateGet(this, _isMounted)) {
@@ -47,7 +45,6 @@ class TanStackRouterDevtoolsCore {
47
45
  const panelProps = __privateGet(this, _panelProps);
48
46
  const closeButtonProps = __privateGet(this, _closeButtonProps);
49
47
  const toggleButtonProps = __privateGet(this, _toggleButtonProps);
50
- const containerElement = __privateGet(this, _containerElement);
51
48
  let Devtools;
52
49
  if (__privateGet(this, _Component)) {
53
50
  Devtools = __privateGet(this, _Component);
@@ -63,8 +60,7 @@ class TanStackRouterDevtoolsCore {
63
60
  routerState,
64
61
  panelProps,
65
62
  closeButtonProps,
66
- toggleButtonProps,
67
- containerElement
63
+ toggleButtonProps
68
64
  });
69
65
  }, el);
70
66
  __privateSet(this, _isMounted, true);
@@ -94,9 +90,6 @@ class TanStackRouterDevtoolsCore {
94
90
  if (options.shadowDOMTarget !== void 0) {
95
91
  __privateSet(this, _shadowDOMTarget, options.shadowDOMTarget);
96
92
  }
97
- if (options.containerElement !== void 0) {
98
- __privateSet(this, _containerElement, options.containerElement);
99
- }
100
93
  }
101
94
  }
102
95
  _router = new WeakMap();
@@ -107,7 +100,6 @@ _shadowDOMTarget = new WeakMap();
107
100
  _panelProps = new WeakMap();
108
101
  _closeButtonProps = new WeakMap();
109
102
  _toggleButtonProps = new WeakMap();
110
- _containerElement = new WeakMap();
111
103
  _isMounted = new WeakMap();
112
104
  _Component = new WeakMap();
113
105
  _dispose = new WeakMap();
@@ -1 +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 #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;;"}
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;;"}
@@ -5,7 +5,7 @@ var __accessCheck = (obj, member, msg) => member.has(obj) || __typeError("Cannot
5
5
  var __privateGet = (obj, member, getter) => (__accessCheck(obj, member, "read from private field"), getter ? getter.call(obj) : member.get(obj));
6
6
  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);
7
7
  var __privateSet = (obj, member, value, setter) => (__accessCheck(obj, member, "write to private field"), setter ? setter.call(obj, value) : member.set(obj, value), value);
8
- var _router, _routerState, _position, _initialIsOpen, _shadowDOMTarget, _panelProps, _closeButtonProps, _toggleButtonProps, _containerElement, _isMounted, _Component, _dispose;
8
+ var _router, _routerState, _position, _initialIsOpen, _shadowDOMTarget, _panelProps, _closeButtonProps, _toggleButtonProps, _isMounted, _Component, _dispose;
9
9
  import { render, createComponent } from "solid-js/web";
10
10
  import { createSignal, lazy } from "solid-js";
11
11
  class TanStackRouterDevtoolsCore {
@@ -18,7 +18,6 @@ class TanStackRouterDevtoolsCore {
18
18
  __privateAdd(this, _panelProps);
19
19
  __privateAdd(this, _closeButtonProps);
20
20
  __privateAdd(this, _toggleButtonProps);
21
- __privateAdd(this, _containerElement);
22
21
  __privateAdd(this, _isMounted, false);
23
22
  __privateAdd(this, _Component);
24
23
  __privateAdd(this, _dispose);
@@ -30,7 +29,6 @@ class TanStackRouterDevtoolsCore {
30
29
  __privateSet(this, _panelProps, config.panelProps);
31
30
  __privateSet(this, _closeButtonProps, config.closeButtonProps);
32
31
  __privateSet(this, _toggleButtonProps, config.toggleButtonProps);
33
- __privateSet(this, _containerElement, config.containerElement);
34
32
  }
35
33
  mount(el) {
36
34
  if (__privateGet(this, _isMounted)) {
@@ -45,7 +43,6 @@ class TanStackRouterDevtoolsCore {
45
43
  const panelProps = __privateGet(this, _panelProps);
46
44
  const closeButtonProps = __privateGet(this, _closeButtonProps);
47
45
  const toggleButtonProps = __privateGet(this, _toggleButtonProps);
48
- const containerElement = __privateGet(this, _containerElement);
49
46
  let Devtools;
50
47
  if (__privateGet(this, _Component)) {
51
48
  Devtools = __privateGet(this, _Component);
@@ -61,8 +58,7 @@ class TanStackRouterDevtoolsCore {
61
58
  routerState,
62
59
  panelProps,
63
60
  closeButtonProps,
64
- toggleButtonProps,
65
- containerElement
61
+ toggleButtonProps
66
62
  });
67
63
  }, el);
68
64
  __privateSet(this, _isMounted, true);
@@ -92,9 +88,6 @@ class TanStackRouterDevtoolsCore {
92
88
  if (options.shadowDOMTarget !== void 0) {
93
89
  __privateSet(this, _shadowDOMTarget, options.shadowDOMTarget);
94
90
  }
95
- if (options.containerElement !== void 0) {
96
- __privateSet(this, _containerElement, options.containerElement);
97
- }
98
91
  }
99
92
  }
100
93
  _router = new WeakMap();
@@ -105,7 +98,6 @@ _shadowDOMTarget = new WeakMap();
105
98
  _panelProps = new WeakMap();
106
99
  _closeButtonProps = new WeakMap();
107
100
  _toggleButtonProps = new WeakMap();
108
- _containerElement = new WeakMap();
109
101
  _isMounted = new WeakMap();
110
102
  _Component = new WeakMap();
111
103
  _dispose = new WeakMap();
@@ -1 +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 #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;"}
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;"}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@tanstack/router-devtools-core",
3
- "version": "1.120.6",
3
+ "version": "1.121.0-alpha.3",
4
4
  "description": "Modern and scalable routing for Web applications",
5
5
  "author": "Tanner Linsley",
6
6
  "license": "MIT",
@@ -60,7 +60,7 @@
60
60
  "tiny-invariant": "^1.3.3",
61
61
  "csstype": "^3.0.10",
62
62
  "solid-js": ">=1.9.5",
63
- "@tanstack/router-core": "^1.120.5"
63
+ "@tanstack/router-core": "^1.121.0-alpha.3"
64
64
  },
65
65
  "peerDependenciesMeta": {
66
66
  "csstype": {
@@ -58,7 +58,6 @@ class TanStackRouterDevtoolsCore {
58
58
  #panelProps: any
59
59
  #closeButtonProps: any
60
60
  #toggleButtonProps: any
61
- #containerElement?: string | any
62
61
 
63
62
  #isMounted = false
64
63
  #Component: any
@@ -74,7 +73,6 @@ class TanStackRouterDevtoolsCore {
74
73
  this.#panelProps = config.panelProps
75
74
  this.#closeButtonProps = config.closeButtonProps
76
75
  this.#toggleButtonProps = config.toggleButtonProps
77
- this.#containerElement = config.containerElement
78
76
  }
79
77
 
80
78
  mount<T extends HTMLElement>(el: T) {
@@ -92,7 +90,6 @@ class TanStackRouterDevtoolsCore {
92
90
  const panelProps = this.#panelProps
93
91
  const closeButtonProps = this.#closeButtonProps
94
92
  const toggleButtonProps = this.#toggleButtonProps
95
- const containerElement = this.#containerElement
96
93
 
97
94
  let Devtools
98
95
 
@@ -113,7 +110,6 @@ class TanStackRouterDevtoolsCore {
113
110
  panelProps={panelProps}
114
111
  closeButtonProps={closeButtonProps}
115
112
  toggleButtonProps={toggleButtonProps}
116
- containerElement={containerElement}
117
113
  />
118
114
  )
119
115
  }, el)
@@ -150,10 +146,6 @@ class TanStackRouterDevtoolsCore {
150
146
  if (options.shadowDOMTarget !== undefined) {
151
147
  this.#shadowDOMTarget = options.shadowDOMTarget
152
148
  }
153
-
154
- if (options.containerElement !== undefined) {
155
- this.#containerElement = options.containerElement
156
- }
157
149
  }
158
150
  }
159
151