@tanstack/router-devtools-core 1.121.0-alpha.11 → 1.121.0-alpha.22
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.
- package/dist/cjs/TanStackRouterDevtoolsCore.cjs +24 -10
- package/dist/cjs/TanStackRouterDevtoolsCore.cjs.map +1 -1
- package/dist/esm/TanStackRouterDevtoolsCore.js +24 -10
- package/dist/esm/TanStackRouterDevtoolsCore.js.map +1 -1
- package/package.json +2 -2
- package/src/TanStackRouterDevtoolsCore.tsx +21 -10
|
@@ -6,10 +6,11 @@ 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, _isMounted, _Component, _dispose;
|
|
9
|
+
var _router, _routerState, _position, _initialIsOpen, _shadowDOMTarget, _panelProps, _closeButtonProps, _toggleButtonProps, _containerElement, _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");
|
|
13
|
+
const context = require("./context.cjs");
|
|
13
14
|
class TanStackRouterDevtoolsCore {
|
|
14
15
|
constructor(config) {
|
|
15
16
|
__privateAdd(this, _router);
|
|
@@ -20,6 +21,7 @@ class TanStackRouterDevtoolsCore {
|
|
|
20
21
|
__privateAdd(this, _panelProps);
|
|
21
22
|
__privateAdd(this, _closeButtonProps);
|
|
22
23
|
__privateAdd(this, _toggleButtonProps);
|
|
24
|
+
__privateAdd(this, _containerElement);
|
|
23
25
|
__privateAdd(this, _isMounted, false);
|
|
24
26
|
__privateAdd(this, _Component);
|
|
25
27
|
__privateAdd(this, _dispose);
|
|
@@ -31,6 +33,7 @@ class TanStackRouterDevtoolsCore {
|
|
|
31
33
|
__privateSet(this, _panelProps, config.panelProps);
|
|
32
34
|
__privateSet(this, _closeButtonProps, config.closeButtonProps);
|
|
33
35
|
__privateSet(this, _toggleButtonProps, config.toggleButtonProps);
|
|
36
|
+
__privateSet(this, _containerElement, config.containerElement);
|
|
34
37
|
}
|
|
35
38
|
mount(el) {
|
|
36
39
|
if (__privateGet(this, _isMounted)) {
|
|
@@ -45,6 +48,7 @@ class TanStackRouterDevtoolsCore {
|
|
|
45
48
|
const panelProps = __privateGet(this, _panelProps);
|
|
46
49
|
const closeButtonProps = __privateGet(this, _closeButtonProps);
|
|
47
50
|
const toggleButtonProps = __privateGet(this, _toggleButtonProps);
|
|
51
|
+
const containerElement = __privateGet(this, _containerElement);
|
|
48
52
|
let Devtools;
|
|
49
53
|
if (__privateGet(this, _Component)) {
|
|
50
54
|
Devtools = __privateGet(this, _Component);
|
|
@@ -52,15 +56,21 @@ class TanStackRouterDevtoolsCore {
|
|
|
52
56
|
Devtools = solidJs.lazy(() => Promise.resolve().then(() => require("./FloatingTanStackRouterDevtools.cjs")));
|
|
53
57
|
__privateSet(this, _Component, Devtools);
|
|
54
58
|
}
|
|
55
|
-
return web.createComponent(
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
59
|
+
return web.createComponent(context.ShadowDomTargetContext.Provider, {
|
|
60
|
+
value: shadowDOMTarget,
|
|
61
|
+
get children() {
|
|
62
|
+
return web.createComponent(Devtools, {
|
|
63
|
+
position,
|
|
64
|
+
initialIsOpen,
|
|
65
|
+
router,
|
|
66
|
+
routerState,
|
|
67
|
+
shadowDOMTarget,
|
|
68
|
+
panelProps,
|
|
69
|
+
closeButtonProps,
|
|
70
|
+
toggleButtonProps,
|
|
71
|
+
containerElement
|
|
72
|
+
});
|
|
73
|
+
}
|
|
64
74
|
});
|
|
65
75
|
}, el);
|
|
66
76
|
__privateSet(this, _isMounted, true);
|
|
@@ -90,6 +100,9 @@ class TanStackRouterDevtoolsCore {
|
|
|
90
100
|
if (options.shadowDOMTarget !== void 0) {
|
|
91
101
|
__privateSet(this, _shadowDOMTarget, options.shadowDOMTarget);
|
|
92
102
|
}
|
|
103
|
+
if (options.containerElement !== void 0) {
|
|
104
|
+
__privateSet(this, _containerElement, options.containerElement);
|
|
105
|
+
}
|
|
93
106
|
}
|
|
94
107
|
}
|
|
95
108
|
_router = new WeakMap();
|
|
@@ -100,6 +113,7 @@ _shadowDOMTarget = new WeakMap();
|
|
|
100
113
|
_panelProps = new WeakMap();
|
|
101
114
|
_closeButtonProps = new WeakMap();
|
|
102
115
|
_toggleButtonProps = new WeakMap();
|
|
116
|
+
_containerElement = new WeakMap();
|
|
103
117
|
_isMounted = new WeakMap();
|
|
104
118
|
_Component = new WeakMap();
|
|
105
119
|
_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\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
|
|
1
|
+
{"version":3,"file":"TanStackRouterDevtoolsCore.cjs","sources":["../../src/TanStackRouterDevtoolsCore.tsx"],"sourcesContent":["import { createSignal, lazy } from 'solid-js'\nimport { render } from 'solid-js/web'\nimport { ShadowDomTargetContext } from './context'\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 <ShadowDomTargetContext.Provider value={shadowDOMTarget}>\n <Devtools\n position={position}\n initialIsOpen={initialIsOpen}\n router={router}\n routerState={routerState}\n shadowDOMTarget={shadowDOMTarget}\n panelProps={panelProps}\n closeButtonProps={closeButtonProps}\n toggleButtonProps={toggleButtonProps}\n containerElement={containerElement}\n />\n </ShadowDomTargetContext.Provider>\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","ShadowDomTargetContext","Provider","value","children","unmount","setRouter","setRouterState","setOptions","options","undefined"],"mappings":";;;;;;;;;;;;;AAmDA,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;AAGpBE,aAAAA,IAAAA,gBACGC,+BAAuBC,UAAQ;AAAA,QAACC,OAAOf;AAAAA,QAAe,IAAAgB,WAAA;AAAA,iBAAAJ,IAAAA,gBACpDF,UAAQ;AAAA,YACPZ;AAAAA,YACAC;AAAAA,YACAH;AAAAA,YACAC;AAAAA,YACAG;AAAAA,YACAC;AAAAA,YACAC;AAAAA,YACAC;AAAAA,YACAC;AAAAA,UAAAA,CAAkC;AAAA,QAAA;AAAA,MAAA,CAAA;AAAA,OAIvCE,EAAE;AAEL,uBAAK,YAAa;AAClB,uBAAK,UAAWE;AAAAA,EAAAA;AAAAA,EAGlBS,UAAU;;AACJ,QAAA,CAAC,mBAAK,aAAY;AACd,YAAA,IAAIV,MAAM,yBAAyB;AAAA,IAAA;AAE3C,6BAAK,cAAL;AACA,uBAAK,YAAa;AAAA,EAAA;AAAA,EAGpBW,UAAUtB,QAAmB;AACtB,uBAAA,SAAQ,CAAC,EAAEA,MAAM;AAAA,EAAA;AAAA,EAGxBuB,eAAetB,aAAkB;AAC1B,uBAAA,cAAa,CAAC,EAAEA,WAAW;AAAA,EAAA;AAAA,EAGlCuB,WAAWC,SAAmC;AACxCA,QAAAA,QAAQvB,aAAawB,QAAW;AAClC,yBAAK,WAAYD,QAAQvB;AAAAA,IAAAA;AAGvBuB,QAAAA,QAAQtB,kBAAkBuB,QAAW;AACvC,yBAAK,gBAAiBD,QAAQtB;AAAAA,IAAAA;AAG5BsB,QAAAA,QAAQrB,oBAAoBsB,QAAW;AACzC,yBAAK,kBAAmBD,QAAQrB;AAAAA,IAAAA;AAG9BqB,QAAAA,QAAQjB,qBAAqBkB,QAAW;AAC1C,yBAAK,mBAAoBD,QAAQjB;AAAAA,IAAAA;AAAAA,EACnC;AAEJ;AA5GE;AACA;AACA;AACA;AACA;AAEA;AACA;AACA;AACA;AAEA;AACA;AACA;;"}
|
|
@@ -5,9 +5,10 @@ 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, _isMounted, _Component, _dispose;
|
|
8
|
+
var _router, _routerState, _position, _initialIsOpen, _shadowDOMTarget, _panelProps, _closeButtonProps, _toggleButtonProps, _containerElement, _isMounted, _Component, _dispose;
|
|
9
9
|
import { render, createComponent } from "solid-js/web";
|
|
10
10
|
import { createSignal, lazy } from "solid-js";
|
|
11
|
+
import { ShadowDomTargetContext } from "./context.js";
|
|
11
12
|
class TanStackRouterDevtoolsCore {
|
|
12
13
|
constructor(config) {
|
|
13
14
|
__privateAdd(this, _router);
|
|
@@ -18,6 +19,7 @@ class TanStackRouterDevtoolsCore {
|
|
|
18
19
|
__privateAdd(this, _panelProps);
|
|
19
20
|
__privateAdd(this, _closeButtonProps);
|
|
20
21
|
__privateAdd(this, _toggleButtonProps);
|
|
22
|
+
__privateAdd(this, _containerElement);
|
|
21
23
|
__privateAdd(this, _isMounted, false);
|
|
22
24
|
__privateAdd(this, _Component);
|
|
23
25
|
__privateAdd(this, _dispose);
|
|
@@ -29,6 +31,7 @@ class TanStackRouterDevtoolsCore {
|
|
|
29
31
|
__privateSet(this, _panelProps, config.panelProps);
|
|
30
32
|
__privateSet(this, _closeButtonProps, config.closeButtonProps);
|
|
31
33
|
__privateSet(this, _toggleButtonProps, config.toggleButtonProps);
|
|
34
|
+
__privateSet(this, _containerElement, config.containerElement);
|
|
32
35
|
}
|
|
33
36
|
mount(el) {
|
|
34
37
|
if (__privateGet(this, _isMounted)) {
|
|
@@ -43,6 +46,7 @@ class TanStackRouterDevtoolsCore {
|
|
|
43
46
|
const panelProps = __privateGet(this, _panelProps);
|
|
44
47
|
const closeButtonProps = __privateGet(this, _closeButtonProps);
|
|
45
48
|
const toggleButtonProps = __privateGet(this, _toggleButtonProps);
|
|
49
|
+
const containerElement = __privateGet(this, _containerElement);
|
|
46
50
|
let Devtools;
|
|
47
51
|
if (__privateGet(this, _Component)) {
|
|
48
52
|
Devtools = __privateGet(this, _Component);
|
|
@@ -50,15 +54,21 @@ class TanStackRouterDevtoolsCore {
|
|
|
50
54
|
Devtools = lazy(() => import("./FloatingTanStackRouterDevtools.js"));
|
|
51
55
|
__privateSet(this, _Component, Devtools);
|
|
52
56
|
}
|
|
53
|
-
return createComponent(
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
57
|
+
return createComponent(ShadowDomTargetContext.Provider, {
|
|
58
|
+
value: shadowDOMTarget,
|
|
59
|
+
get children() {
|
|
60
|
+
return createComponent(Devtools, {
|
|
61
|
+
position,
|
|
62
|
+
initialIsOpen,
|
|
63
|
+
router,
|
|
64
|
+
routerState,
|
|
65
|
+
shadowDOMTarget,
|
|
66
|
+
panelProps,
|
|
67
|
+
closeButtonProps,
|
|
68
|
+
toggleButtonProps,
|
|
69
|
+
containerElement
|
|
70
|
+
});
|
|
71
|
+
}
|
|
62
72
|
});
|
|
63
73
|
}, el);
|
|
64
74
|
__privateSet(this, _isMounted, true);
|
|
@@ -88,6 +98,9 @@ class TanStackRouterDevtoolsCore {
|
|
|
88
98
|
if (options.shadowDOMTarget !== void 0) {
|
|
89
99
|
__privateSet(this, _shadowDOMTarget, options.shadowDOMTarget);
|
|
90
100
|
}
|
|
101
|
+
if (options.containerElement !== void 0) {
|
|
102
|
+
__privateSet(this, _containerElement, options.containerElement);
|
|
103
|
+
}
|
|
91
104
|
}
|
|
92
105
|
}
|
|
93
106
|
_router = new WeakMap();
|
|
@@ -98,6 +111,7 @@ _shadowDOMTarget = new WeakMap();
|
|
|
98
111
|
_panelProps = new WeakMap();
|
|
99
112
|
_closeButtonProps = new WeakMap();
|
|
100
113
|
_toggleButtonProps = new WeakMap();
|
|
114
|
+
_containerElement = new WeakMap();
|
|
101
115
|
_isMounted = new WeakMap();
|
|
102
116
|
_Component = new WeakMap();
|
|
103
117
|
_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\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
|
|
1
|
+
{"version":3,"file":"TanStackRouterDevtoolsCore.js","sources":["../../src/TanStackRouterDevtoolsCore.tsx"],"sourcesContent":["import { createSignal, lazy } from 'solid-js'\nimport { render } from 'solid-js/web'\nimport { ShadowDomTargetContext } from './context'\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 <ShadowDomTargetContext.Provider value={shadowDOMTarget}>\n <Devtools\n position={position}\n initialIsOpen={initialIsOpen}\n router={router}\n routerState={routerState}\n shadowDOMTarget={shadowDOMTarget}\n panelProps={panelProps}\n closeButtonProps={closeButtonProps}\n toggleButtonProps={toggleButtonProps}\n containerElement={containerElement}\n />\n </ShadowDomTargetContext.Provider>\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","ShadowDomTargetContext","Provider","value","children","unmount","setRouter","setRouterState","setOptions","options","undefined"],"mappings":";;;;;;;;;;;AAmDA,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;AAGpBE,aAAAA,gBACGC,uBAAuBC,UAAQ;AAAA,QAACC,OAAOf;AAAAA,QAAe,IAAAgB,WAAA;AAAA,iBAAAJ,gBACpDF,UAAQ;AAAA,YACPZ;AAAAA,YACAC;AAAAA,YACAH;AAAAA,YACAC;AAAAA,YACAG;AAAAA,YACAC;AAAAA,YACAC;AAAAA,YACAC;AAAAA,YACAC;AAAAA,UAAAA,CAAkC;AAAA,QAAA;AAAA,MAAA,CAAA;AAAA,OAIvCE,EAAE;AAEL,uBAAK,YAAa;AAClB,uBAAK,UAAWE;AAAAA,EAAAA;AAAAA,EAGlBS,UAAU;;AACJ,QAAA,CAAC,mBAAK,aAAY;AACd,YAAA,IAAIV,MAAM,yBAAyB;AAAA,IAAA;AAE3C,6BAAK,cAAL;AACA,uBAAK,YAAa;AAAA,EAAA;AAAA,EAGpBW,UAAUtB,QAAmB;AACtB,uBAAA,SAAQ,CAAC,EAAEA,MAAM;AAAA,EAAA;AAAA,EAGxBuB,eAAetB,aAAkB;AAC1B,uBAAA,cAAa,CAAC,EAAEA,WAAW;AAAA,EAAA;AAAA,EAGlCuB,WAAWC,SAAmC;AACxCA,QAAAA,QAAQvB,aAAawB,QAAW;AAClC,yBAAK,WAAYD,QAAQvB;AAAAA,IAAAA;AAGvBuB,QAAAA,QAAQtB,kBAAkBuB,QAAW;AACvC,yBAAK,gBAAiBD,QAAQtB;AAAAA,IAAAA;AAG5BsB,QAAAA,QAAQrB,oBAAoBsB,QAAW;AACzC,yBAAK,kBAAmBD,QAAQrB;AAAAA,IAAAA;AAG9BqB,QAAAA,QAAQjB,qBAAqBkB,QAAW;AAC1C,yBAAK,mBAAoBD,QAAQjB;AAAAA,IAAAA;AAAAA,EACnC;AAEJ;AA5GE;AACA;AACA;AACA;AACA;AAEA;AACA;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.121.0-alpha.
|
|
3
|
+
"version": "1.121.0-alpha.22",
|
|
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.121.0-alpha.
|
|
63
|
+
"@tanstack/router-core": "^1.121.0-alpha.22"
|
|
64
64
|
},
|
|
65
65
|
"peerDependenciesMeta": {
|
|
66
66
|
"csstype": {
|
|
@@ -1,5 +1,6 @@
|
|
|
1
1
|
import { createSignal, lazy } from 'solid-js'
|
|
2
2
|
import { render } from 'solid-js/web'
|
|
3
|
+
import { ShadowDomTargetContext } from './context'
|
|
3
4
|
import type { AnyRouter } from '@tanstack/router-core'
|
|
4
5
|
import type { Signal } from 'solid-js'
|
|
5
6
|
|
|
@@ -58,6 +59,7 @@ class TanStackRouterDevtoolsCore {
|
|
|
58
59
|
#panelProps: any
|
|
59
60
|
#closeButtonProps: any
|
|
60
61
|
#toggleButtonProps: any
|
|
62
|
+
#containerElement?: string | any
|
|
61
63
|
|
|
62
64
|
#isMounted = false
|
|
63
65
|
#Component: any
|
|
@@ -73,6 +75,7 @@ class TanStackRouterDevtoolsCore {
|
|
|
73
75
|
this.#panelProps = config.panelProps
|
|
74
76
|
this.#closeButtonProps = config.closeButtonProps
|
|
75
77
|
this.#toggleButtonProps = config.toggleButtonProps
|
|
78
|
+
this.#containerElement = config.containerElement
|
|
76
79
|
}
|
|
77
80
|
|
|
78
81
|
mount<T extends HTMLElement>(el: T) {
|
|
@@ -90,6 +93,7 @@ class TanStackRouterDevtoolsCore {
|
|
|
90
93
|
const panelProps = this.#panelProps
|
|
91
94
|
const closeButtonProps = this.#closeButtonProps
|
|
92
95
|
const toggleButtonProps = this.#toggleButtonProps
|
|
96
|
+
const containerElement = this.#containerElement
|
|
93
97
|
|
|
94
98
|
let Devtools
|
|
95
99
|
|
|
@@ -101,16 +105,19 @@ class TanStackRouterDevtoolsCore {
|
|
|
101
105
|
}
|
|
102
106
|
|
|
103
107
|
return (
|
|
104
|
-
<
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
108
|
+
<ShadowDomTargetContext.Provider value={shadowDOMTarget}>
|
|
109
|
+
<Devtools
|
|
110
|
+
position={position}
|
|
111
|
+
initialIsOpen={initialIsOpen}
|
|
112
|
+
router={router}
|
|
113
|
+
routerState={routerState}
|
|
114
|
+
shadowDOMTarget={shadowDOMTarget}
|
|
115
|
+
panelProps={panelProps}
|
|
116
|
+
closeButtonProps={closeButtonProps}
|
|
117
|
+
toggleButtonProps={toggleButtonProps}
|
|
118
|
+
containerElement={containerElement}
|
|
119
|
+
/>
|
|
120
|
+
</ShadowDomTargetContext.Provider>
|
|
114
121
|
)
|
|
115
122
|
}, el)
|
|
116
123
|
|
|
@@ -146,6 +153,10 @@ class TanStackRouterDevtoolsCore {
|
|
|
146
153
|
if (options.shadowDOMTarget !== undefined) {
|
|
147
154
|
this.#shadowDOMTarget = options.shadowDOMTarget
|
|
148
155
|
}
|
|
156
|
+
|
|
157
|
+
if (options.containerElement !== undefined) {
|
|
158
|
+
this.#containerElement = options.containerElement
|
|
159
|
+
}
|
|
149
160
|
}
|
|
150
161
|
}
|
|
151
162
|
|