@tanstack/solid-router-devtools 1.166.6 → 2.0.0-alpha.1
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/TanStackRouterDevtools.cjs +21 -14
- package/dist/cjs/TanStackRouterDevtools.cjs.map +1 -1
- package/dist/cjs/TanStackRouterDevtoolsPanel.cjs +19 -14
- package/dist/cjs/TanStackRouterDevtoolsPanel.cjs.map +1 -1
- package/dist/esm/TanStackRouterDevtools.js +22 -15
- package/dist/esm/TanStackRouterDevtools.js.map +1 -1
- package/dist/esm/TanStackRouterDevtoolsPanel.js +20 -15
- package/dist/esm/TanStackRouterDevtoolsPanel.js.map +1 -1
- package/dist/source/TanStackRouterDevtools.jsx +15 -13
- package/dist/source/TanStackRouterDevtools.jsx.map +1 -1
- package/dist/source/TanStackRouterDevtoolsPanel.jsx +13 -13
- package/dist/source/TanStackRouterDevtoolsPanel.jsx.map +1 -1
- package/package.json +10 -7
- package/src/TanStackRouterDevtools.tsx +24 -17
- package/src/TanStackRouterDevtoolsPanel.tsx +20 -17
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
|
|
3
|
-
const web = require("
|
|
3
|
+
const web = require("@solidjs/web");
|
|
4
4
|
const solidRouter = require("@tanstack/solid-router");
|
|
5
5
|
const routerDevtoolsCore = require("@tanstack/router-devtools-core");
|
|
6
6
|
const solidJs = require("solid-js");
|
|
@@ -15,16 +15,16 @@ const TanStackRouterDevtools = (props) => {
|
|
|
15
15
|
router: activeRouter,
|
|
16
16
|
routerState: activeRouterState
|
|
17
17
|
};
|
|
18
|
-
|
|
18
|
+
const [devToolRef, setDevToolRef] = solidJs.createSignal();
|
|
19
19
|
const [devtools] = solidJs.createSignal(new routerDevtoolsCore.TanStackRouterDevtoolsCore(usedProps));
|
|
20
|
-
solidJs.createEffect(() => {
|
|
21
|
-
|
|
20
|
+
solidJs.createEffect(devtools, (d) => {
|
|
21
|
+
d.setRouter(usedProps.router);
|
|
22
22
|
});
|
|
23
|
-
solidJs.createEffect(() => {
|
|
24
|
-
|
|
23
|
+
solidJs.createEffect(devtools, (d) => {
|
|
24
|
+
d.setRouterState(usedProps.routerState);
|
|
25
25
|
});
|
|
26
|
-
solidJs.createEffect(() => {
|
|
27
|
-
|
|
26
|
+
solidJs.createEffect(devtools, (d) => {
|
|
27
|
+
d.setOptions({
|
|
28
28
|
initialIsOpen: usedProps.initialIsOpen,
|
|
29
29
|
panelProps: usedProps.panelProps,
|
|
30
30
|
closeButtonProps: usedProps.closeButtonProps,
|
|
@@ -34,18 +34,25 @@ const TanStackRouterDevtools = (props) => {
|
|
|
34
34
|
shadowDOMTarget: usedProps.shadowDOMTarget
|
|
35
35
|
});
|
|
36
36
|
});
|
|
37
|
-
solidJs.
|
|
38
|
-
|
|
39
|
-
|
|
37
|
+
solidJs.createEffect(() => ({
|
|
38
|
+
d: devtools(),
|
|
39
|
+
el: devToolRef()
|
|
40
|
+
}), ({
|
|
41
|
+
d,
|
|
42
|
+
el
|
|
43
|
+
}) => {
|
|
44
|
+
if (el) {
|
|
45
|
+
d.mount(el);
|
|
40
46
|
solidJs.onCleanup(() => {
|
|
41
|
-
|
|
47
|
+
d.unmount();
|
|
42
48
|
});
|
|
43
49
|
}
|
|
44
50
|
});
|
|
45
51
|
return (() => {
|
|
46
52
|
var _el$ = _tmpl$();
|
|
47
|
-
|
|
48
|
-
|
|
53
|
+
web.ref(() => (el) => {
|
|
54
|
+
setDevToolRef(el);
|
|
55
|
+
}, _el$);
|
|
49
56
|
return _el$;
|
|
50
57
|
})();
|
|
51
58
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"TanStackRouterDevtools.cjs","sources":["../../src/TanStackRouterDevtools.tsx"],"sourcesContent":["import { useRouter, useRouterState } from '@tanstack/solid-router'\nimport { TanStackRouterDevtoolsCore } from '@tanstack/router-devtools-core'\nimport { createEffect, createSignal, onCleanup
|
|
1
|
+
{"version":3,"file":"TanStackRouterDevtools.cjs","sources":["../../src/TanStackRouterDevtools.tsx"],"sourcesContent":["import { useRouter, useRouterState } from '@tanstack/solid-router'\nimport { TanStackRouterDevtoolsCore } from '@tanstack/router-devtools-core'\nimport { createEffect, createSignal, onCleanup } from 'solid-js'\nimport type { AnyRouter } from '@tanstack/solid-router'\nimport type { Component, JSX } from 'solid-js'\n\nexport interface TanStackRouterDevtoolsOptions {\n /**\n * Set this true if you want the dev tools to default to being open\n */\n initialIsOpen?: boolean\n /**\n * Use this to add props to the panel. For example, you can add className, style (merge and override default style), etc.\n */\n panelProps?: JSX.HTMLAttributes<HTMLDivElement>\n /**\n * Use this to add props to the close button. For example, you can add className, style (merge and override default style), onClick (extend default handler), etc.\n */\n closeButtonProps?: JSX.ButtonHTMLAttributes<HTMLButtonElement>\n /**\n * Use this to add props to the toggle button. For example, you can add className, style (merge and override default style), onClick (extend default handler), etc.\n */\n toggleButtonProps?: JSX.ButtonHTMLAttributes<HTMLButtonElement>\n /**\n * The position of the TanStack Router logo to open and close the devtools panel.\n * Defaults to 'bottom-left'.\n */\n position?: 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right'\n /**\n * Use this to render the devtools inside a different type of container element for a11y purposes.\n * Any string which corresponds to a valid intrinsic JSX element is allowed.\n * Defaults to 'footer'.\n */\n containerElement?: string | any\n /**\n * The router instance to use for the devtools.\n */\n router?: AnyRouter\n /**\n * Use this to attach the devtool's styles to specific element in the DOM.\n */\n shadowDOMTarget?: ShadowRoot\n}\n\nexport const TanStackRouterDevtools: Component<\n TanStackRouterDevtoolsOptions\n> = (props): JSX.Element | null => {\n const activeRouter = props.router ?? useRouter()\n const activeRouterState = useRouterState({ router: activeRouter })\n\n const usedProps = {\n ...props,\n router: activeRouter,\n routerState: activeRouterState,\n }\n\n const [devToolRef, setDevToolRef] = createSignal<HTMLDivElement>()\n const [devtools] = createSignal(new TanStackRouterDevtoolsCore(usedProps))\n\n // Update devtools when props change\n createEffect(devtools, (d) => {\n d.setRouter(usedProps.router)\n })\n\n createEffect(devtools, (d) => {\n d.setRouterState(usedProps.routerState)\n })\n\n createEffect(devtools, (d) => {\n d.setOptions({\n initialIsOpen: usedProps.initialIsOpen,\n panelProps: usedProps.panelProps,\n closeButtonProps: usedProps.closeButtonProps,\n toggleButtonProps: usedProps.toggleButtonProps,\n position: usedProps.position,\n containerElement: usedProps.containerElement,\n shadowDOMTarget: usedProps.shadowDOMTarget,\n })\n })\n\n createEffect(\n () => ({ d: devtools(), el: devToolRef() }),\n ({ d, el }) => {\n if (el) {\n d.mount(el)\n\n onCleanup(() => {\n d.unmount()\n })\n }\n },\n )\n\n return (\n <>\n <div\n ref={(el) => {\n setDevToolRef(el)\n }}\n />\n </>\n )\n}\n"],"names":["TanStackRouterDevtools","props","activeRouter","router","useRouter","activeRouterState","useRouterState","usedProps","routerState","devToolRef","setDevToolRef","createSignal","devtools","TanStackRouterDevtoolsCore","createEffect","d","setRouter","setRouterState","setOptions","initialIsOpen","panelProps","closeButtonProps","toggleButtonProps","position","containerElement","shadowDOMTarget","el","mount","onCleanup","unmount","_el$","_tmpl$","_$ref"],"mappings":";;;;;;;AA4CO,MAAMA,yBAETA,CAACC,UAA8B;AACjC,QAAMC,eAAeD,MAAME,UAAUC,sBAAAA;AACrC,QAAMC,oBAAoBC,YAAAA,eAAe;AAAA,IAAEH,QAAQD;AAAAA,EAAAA,CAAc;AAEjE,QAAMK,YAAY;AAAA,IAChB,GAAGN;AAAAA,IACHE,QAAQD;AAAAA,IACRM,aAAaH;AAAAA,EAAAA;AAGf,QAAM,CAACI,YAAYC,aAAa,IAAIC,qBAAAA;AACpC,QAAM,CAACC,QAAQ,IAAID,QAAAA,aAAa,IAAIE,mBAAAA,2BAA2BN,SAAS,CAAC;AAGzEO,uBAAaF,UAAWG,CAAAA,MAAM;AAC5BA,MAAEC,UAAUT,UAAUJ,MAAM;AAAA,EAC9B,CAAC;AAEDW,uBAAaF,UAAWG,CAAAA,MAAM;AAC5BA,MAAEE,eAAeV,UAAUC,WAAW;AAAA,EACxC,CAAC;AAEDM,uBAAaF,UAAWG,CAAAA,MAAM;AAC5BA,MAAEG,WAAW;AAAA,MACXC,eAAeZ,UAAUY;AAAAA,MACzBC,YAAYb,UAAUa;AAAAA,MACtBC,kBAAkBd,UAAUc;AAAAA,MAC5BC,mBAAmBf,UAAUe;AAAAA,MAC7BC,UAAUhB,UAAUgB;AAAAA,MACpBC,kBAAkBjB,UAAUiB;AAAAA,MAC5BC,iBAAiBlB,UAAUkB;AAAAA,IAAAA,CAC5B;AAAA,EACH,CAAC;AAEDX,UAAAA,aACE,OAAO;AAAA,IAAEC,GAAGH,SAAAA;AAAAA,IAAYc,IAAIjB,WAAAA;AAAAA,EAAW,IACvC,CAAC;AAAA,IAAEM;AAAAA,IAAGW;AAAAA,EAAAA,MAAS;AACb,QAAIA,IAAI;AACNX,QAAEY,MAAMD,EAAE;AAEVE,cAAAA,UAAU,MAAM;AACdb,UAAEc,QAAAA;AAAAA,MACJ,CAAC;AAAA,IACH;AAAA,EACF,CACF;AAEA,UAAA,MAAA;AAAA,QAAAC,OAAAC,OAAAA;AAAAC,QAAAA,IAAA,MAGYN,CAAAA,OAAO;AACXhB,oBAAcgB,EAAE;AAAA,IAClB,GAACI,IAAA;AAAA,WAAAA;AAAAA,EAAA,GAAA;AAIT;;"}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
|
|
3
|
-
const web = require("
|
|
3
|
+
const web = require("@solidjs/web");
|
|
4
4
|
const solidRouter = require("@tanstack/solid-router");
|
|
5
5
|
const routerDevtoolsCore = require("@tanstack/router-devtools-core");
|
|
6
6
|
const solidJs = require("solid-js");
|
|
@@ -15,33 +15,38 @@ const TanStackRouterDevtoolsPanel = (props) => {
|
|
|
15
15
|
router: activeRouter,
|
|
16
16
|
routerState: activeRouterState
|
|
17
17
|
};
|
|
18
|
-
|
|
18
|
+
const [devToolRef, setDevToolRef] = solidJs.createSignal();
|
|
19
19
|
const [devtools] = solidJs.createSignal(new routerDevtoolsCore.TanStackRouterDevtoolsPanelCore(usedProps));
|
|
20
|
-
solidJs.createEffect(() => {
|
|
21
|
-
|
|
20
|
+
solidJs.createEffect(devtools, (d) => {
|
|
21
|
+
d.setRouter(usedProps.router);
|
|
22
22
|
});
|
|
23
|
-
solidJs.createEffect(() => {
|
|
24
|
-
|
|
23
|
+
solidJs.createEffect(devtools, (d) => {
|
|
24
|
+
d.setRouterState(usedProps.routerState);
|
|
25
25
|
});
|
|
26
|
-
solidJs.createEffect(() => {
|
|
27
|
-
|
|
26
|
+
solidJs.createEffect(devtools, (d) => {
|
|
27
|
+
d.setOptions({
|
|
28
28
|
className: usedProps.className,
|
|
29
29
|
style: usedProps.style,
|
|
30
30
|
shadowDOMTarget: usedProps.shadowDOMTarget
|
|
31
31
|
});
|
|
32
32
|
});
|
|
33
|
-
solidJs.
|
|
34
|
-
|
|
35
|
-
|
|
33
|
+
solidJs.createEffect(() => ({
|
|
34
|
+
d: devtools(),
|
|
35
|
+
el: devToolRef()
|
|
36
|
+
}), ({
|
|
37
|
+
d,
|
|
38
|
+
el
|
|
39
|
+
}) => {
|
|
40
|
+
if (el) {
|
|
41
|
+
d.mount(el);
|
|
36
42
|
solidJs.onCleanup(() => {
|
|
37
|
-
|
|
43
|
+
d.unmount();
|
|
38
44
|
});
|
|
39
45
|
}
|
|
40
46
|
});
|
|
41
47
|
return (() => {
|
|
42
48
|
var _el$ = _tmpl$();
|
|
43
|
-
|
|
44
|
-
typeof _ref$ === "function" ? web.use(_ref$, _el$) : devToolRef = _el$;
|
|
49
|
+
web.ref(() => setDevToolRef, _el$);
|
|
45
50
|
return _el$;
|
|
46
51
|
})();
|
|
47
52
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"TanStackRouterDevtoolsPanel.cjs","sources":["../../src/TanStackRouterDevtoolsPanel.tsx"],"sourcesContent":["import { useRouter, useRouterState } from '@tanstack/solid-router'\nimport { TanStackRouterDevtoolsPanelCore } from '@tanstack/router-devtools-core'\nimport { createEffect, createSignal, onCleanup
|
|
1
|
+
{"version":3,"file":"TanStackRouterDevtoolsPanel.cjs","sources":["../../src/TanStackRouterDevtoolsPanel.tsx"],"sourcesContent":["import { useRouter, useRouterState } from '@tanstack/solid-router'\nimport { TanStackRouterDevtoolsPanelCore } from '@tanstack/router-devtools-core'\nimport { createEffect, createSignal, onCleanup } from 'solid-js'\nimport type { AnyRouter } from '@tanstack/solid-router'\nimport type { Component, JSX } from 'solid-js'\n\nexport interface TanStackRouterDevtoolsPanelOptions {\n /**\n * The standard React style object used to style a component with inline styles\n */\n style?: JSX.CSSProperties\n /**\n * The standard React class property used to style a component with classes\n */\n className?: string\n /**\n * A boolean variable indicating whether the panel is open or closed\n */\n isOpen?: boolean\n /**\n * A function that toggles the open and close state of the panel\n */\n setIsOpen?: (isOpen: boolean) => void\n /**\n * Handles the opening and closing the devtools panel\n */\n handleDragStart?: (e: any) => void\n /**\n * A boolean variable indicating if the \"lite\" version of the library is being used\n */\n router?: AnyRouter\n /**\n * Use this to attach the devtool's styles to specific element in the DOM.\n */\n shadowDOMTarget?: ShadowRoot\n}\n\nexport const TanStackRouterDevtoolsPanel: Component<\n TanStackRouterDevtoolsPanelOptions\n> = (props): JSX.Element | null => {\n const activeRouter = props.router ?? useRouter()\n const activeRouterState = useRouterState({ router: activeRouter })\n\n const usedProps = {\n ...props,\n router: activeRouter,\n routerState: activeRouterState,\n }\n\n const [devToolRef, setDevToolRef] = createSignal<HTMLDivElement>()\n const [devtools] = createSignal(\n new TanStackRouterDevtoolsPanelCore(usedProps),\n )\n\n // Update devtools when props change\n createEffect(devtools, (d) => {\n d.setRouter(usedProps.router)\n })\n\n createEffect(devtools, (d) => {\n d.setRouterState(usedProps.routerState)\n })\n\n createEffect(devtools, (d) => {\n d.setOptions({\n className: usedProps.className,\n style: usedProps.style,\n shadowDOMTarget: usedProps.shadowDOMTarget,\n })\n })\n\n createEffect(\n () => ({ d: devtools(), el: devToolRef() }),\n ({ d, el }) => {\n if (el) {\n d.mount(el)\n\n onCleanup(() => {\n d.unmount()\n })\n }\n },\n )\n\n return (\n <>\n <div ref={setDevToolRef} />\n </>\n )\n}\n"],"names":["TanStackRouterDevtoolsPanel","props","activeRouter","router","useRouter","activeRouterState","useRouterState","usedProps","routerState","devToolRef","setDevToolRef","createSignal","devtools","TanStackRouterDevtoolsPanelCore","createEffect","d","setRouter","setRouterState","setOptions","className","style","shadowDOMTarget","el","mount","onCleanup","unmount","_el$","_tmpl$","_$ref"],"mappings":";;;;;;;AAqCO,MAAMA,8BAETA,CAACC,UAA8B;AACjC,QAAMC,eAAeD,MAAME,UAAUC,sBAAAA;AACrC,QAAMC,oBAAoBC,YAAAA,eAAe;AAAA,IAAEH,QAAQD;AAAAA,EAAAA,CAAc;AAEjE,QAAMK,YAAY;AAAA,IAChB,GAAGN;AAAAA,IACHE,QAAQD;AAAAA,IACRM,aAAaH;AAAAA,EAAAA;AAGf,QAAM,CAACI,YAAYC,aAAa,IAAIC,qBAAAA;AACpC,QAAM,CAACC,QAAQ,IAAID,QAAAA,aACjB,IAAIE,mBAAAA,gCAAgCN,SAAS,CAC/C;AAGAO,uBAAaF,UAAWG,CAAAA,MAAM;AAC5BA,MAAEC,UAAUT,UAAUJ,MAAM;AAAA,EAC9B,CAAC;AAEDW,uBAAaF,UAAWG,CAAAA,MAAM;AAC5BA,MAAEE,eAAeV,UAAUC,WAAW;AAAA,EACxC,CAAC;AAEDM,uBAAaF,UAAWG,CAAAA,MAAM;AAC5BA,MAAEG,WAAW;AAAA,MACXC,WAAWZ,UAAUY;AAAAA,MACrBC,OAAOb,UAAUa;AAAAA,MACjBC,iBAAiBd,UAAUc;AAAAA,IAAAA,CAC5B;AAAA,EACH,CAAC;AAEDP,UAAAA,aACE,OAAO;AAAA,IAAEC,GAAGH,SAAAA;AAAAA,IAAYU,IAAIb,WAAAA;AAAAA,EAAW,IACvC,CAAC;AAAA,IAAEM;AAAAA,IAAGO;AAAAA,EAAAA,MAAS;AACb,QAAIA,IAAI;AACNP,QAAEQ,MAAMD,EAAE;AAEVE,cAAAA,UAAU,MAAM;AACdT,UAAEU,QAAAA;AAAAA,MACJ,CAAC;AAAA,IACH;AAAA,EACF,CACF;AAEA,UAAA,MAAA;AAAA,QAAAC,OAAAC,OAAAA;AAAAC,YAAA,MAEclB,eAAagB,IAAA;AAAA,WAAAA;AAAAA,EAAA,GAAA;AAG7B;;"}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
|
-
import { template,
|
|
1
|
+
import { template, ref } from "@solidjs/web";
|
|
2
2
|
import { useRouter, useRouterState } from "@tanstack/solid-router";
|
|
3
3
|
import { TanStackRouterDevtoolsCore } from "@tanstack/router-devtools-core";
|
|
4
|
-
import { createSignal, createEffect,
|
|
4
|
+
import { createSignal, createEffect, onCleanup } from "solid-js";
|
|
5
5
|
var _tmpl$ = /* @__PURE__ */ template(`<div>`);
|
|
6
6
|
const TanStackRouterDevtools = (props) => {
|
|
7
7
|
const activeRouter = props.router ?? useRouter();
|
|
@@ -13,16 +13,16 @@ const TanStackRouterDevtools = (props) => {
|
|
|
13
13
|
router: activeRouter,
|
|
14
14
|
routerState: activeRouterState
|
|
15
15
|
};
|
|
16
|
-
|
|
16
|
+
const [devToolRef, setDevToolRef] = createSignal();
|
|
17
17
|
const [devtools] = createSignal(new TanStackRouterDevtoolsCore(usedProps));
|
|
18
|
-
createEffect(() => {
|
|
19
|
-
|
|
18
|
+
createEffect(devtools, (d) => {
|
|
19
|
+
d.setRouter(usedProps.router);
|
|
20
20
|
});
|
|
21
|
-
createEffect(() => {
|
|
22
|
-
|
|
21
|
+
createEffect(devtools, (d) => {
|
|
22
|
+
d.setRouterState(usedProps.routerState);
|
|
23
23
|
});
|
|
24
|
-
createEffect(() => {
|
|
25
|
-
|
|
24
|
+
createEffect(devtools, (d) => {
|
|
25
|
+
d.setOptions({
|
|
26
26
|
initialIsOpen: usedProps.initialIsOpen,
|
|
27
27
|
panelProps: usedProps.panelProps,
|
|
28
28
|
closeButtonProps: usedProps.closeButtonProps,
|
|
@@ -32,18 +32,25 @@ const TanStackRouterDevtools = (props) => {
|
|
|
32
32
|
shadowDOMTarget: usedProps.shadowDOMTarget
|
|
33
33
|
});
|
|
34
34
|
});
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
35
|
+
createEffect(() => ({
|
|
36
|
+
d: devtools(),
|
|
37
|
+
el: devToolRef()
|
|
38
|
+
}), ({
|
|
39
|
+
d,
|
|
40
|
+
el
|
|
41
|
+
}) => {
|
|
42
|
+
if (el) {
|
|
43
|
+
d.mount(el);
|
|
38
44
|
onCleanup(() => {
|
|
39
|
-
|
|
45
|
+
d.unmount();
|
|
40
46
|
});
|
|
41
47
|
}
|
|
42
48
|
});
|
|
43
49
|
return (() => {
|
|
44
50
|
var _el$ = _tmpl$();
|
|
45
|
-
|
|
46
|
-
|
|
51
|
+
ref(() => (el) => {
|
|
52
|
+
setDevToolRef(el);
|
|
53
|
+
}, _el$);
|
|
47
54
|
return _el$;
|
|
48
55
|
})();
|
|
49
56
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"TanStackRouterDevtools.js","sources":["../../src/TanStackRouterDevtools.tsx"],"sourcesContent":["import { useRouter, useRouterState } from '@tanstack/solid-router'\nimport { TanStackRouterDevtoolsCore } from '@tanstack/router-devtools-core'\nimport { createEffect, createSignal, onCleanup
|
|
1
|
+
{"version":3,"file":"TanStackRouterDevtools.js","sources":["../../src/TanStackRouterDevtools.tsx"],"sourcesContent":["import { useRouter, useRouterState } from '@tanstack/solid-router'\nimport { TanStackRouterDevtoolsCore } from '@tanstack/router-devtools-core'\nimport { createEffect, createSignal, onCleanup } from 'solid-js'\nimport type { AnyRouter } from '@tanstack/solid-router'\nimport type { Component, JSX } from 'solid-js'\n\nexport interface TanStackRouterDevtoolsOptions {\n /**\n * Set this true if you want the dev tools to default to being open\n */\n initialIsOpen?: boolean\n /**\n * Use this to add props to the panel. For example, you can add className, style (merge and override default style), etc.\n */\n panelProps?: JSX.HTMLAttributes<HTMLDivElement>\n /**\n * Use this to add props to the close button. For example, you can add className, style (merge and override default style), onClick (extend default handler), etc.\n */\n closeButtonProps?: JSX.ButtonHTMLAttributes<HTMLButtonElement>\n /**\n * Use this to add props to the toggle button. For example, you can add className, style (merge and override default style), onClick (extend default handler), etc.\n */\n toggleButtonProps?: JSX.ButtonHTMLAttributes<HTMLButtonElement>\n /**\n * The position of the TanStack Router logo to open and close the devtools panel.\n * Defaults to 'bottom-left'.\n */\n position?: 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right'\n /**\n * Use this to render the devtools inside a different type of container element for a11y purposes.\n * Any string which corresponds to a valid intrinsic JSX element is allowed.\n * Defaults to 'footer'.\n */\n containerElement?: string | any\n /**\n * The router instance to use for the devtools.\n */\n router?: AnyRouter\n /**\n * Use this to attach the devtool's styles to specific element in the DOM.\n */\n shadowDOMTarget?: ShadowRoot\n}\n\nexport const TanStackRouterDevtools: Component<\n TanStackRouterDevtoolsOptions\n> = (props): JSX.Element | null => {\n const activeRouter = props.router ?? useRouter()\n const activeRouterState = useRouterState({ router: activeRouter })\n\n const usedProps = {\n ...props,\n router: activeRouter,\n routerState: activeRouterState,\n }\n\n const [devToolRef, setDevToolRef] = createSignal<HTMLDivElement>()\n const [devtools] = createSignal(new TanStackRouterDevtoolsCore(usedProps))\n\n // Update devtools when props change\n createEffect(devtools, (d) => {\n d.setRouter(usedProps.router)\n })\n\n createEffect(devtools, (d) => {\n d.setRouterState(usedProps.routerState)\n })\n\n createEffect(devtools, (d) => {\n d.setOptions({\n initialIsOpen: usedProps.initialIsOpen,\n panelProps: usedProps.panelProps,\n closeButtonProps: usedProps.closeButtonProps,\n toggleButtonProps: usedProps.toggleButtonProps,\n position: usedProps.position,\n containerElement: usedProps.containerElement,\n shadowDOMTarget: usedProps.shadowDOMTarget,\n })\n })\n\n createEffect(\n () => ({ d: devtools(), el: devToolRef() }),\n ({ d, el }) => {\n if (el) {\n d.mount(el)\n\n onCleanup(() => {\n d.unmount()\n })\n }\n },\n )\n\n return (\n <>\n <div\n ref={(el) => {\n setDevToolRef(el)\n }}\n />\n </>\n )\n}\n"],"names":["TanStackRouterDevtools","props","activeRouter","router","useRouter","activeRouterState","useRouterState","usedProps","routerState","devToolRef","setDevToolRef","createSignal","devtools","TanStackRouterDevtoolsCore","createEffect","d","setRouter","setRouterState","setOptions","initialIsOpen","panelProps","closeButtonProps","toggleButtonProps","position","containerElement","shadowDOMTarget","el","mount","onCleanup","unmount","_el$","_tmpl$","_$ref"],"mappings":";;;;;AA4CO,MAAMA,yBAETA,CAACC,UAA8B;AACjC,QAAMC,eAAeD,MAAME,UAAUC,UAAAA;AACrC,QAAMC,oBAAoBC,eAAe;AAAA,IAAEH,QAAQD;AAAAA,EAAAA,CAAc;AAEjE,QAAMK,YAAY;AAAA,IAChB,GAAGN;AAAAA,IACHE,QAAQD;AAAAA,IACRM,aAAaH;AAAAA,EAAAA;AAGf,QAAM,CAACI,YAAYC,aAAa,IAAIC,aAAAA;AACpC,QAAM,CAACC,QAAQ,IAAID,aAAa,IAAIE,2BAA2BN,SAAS,CAAC;AAGzEO,eAAaF,UAAWG,CAAAA,MAAM;AAC5BA,MAAEC,UAAUT,UAAUJ,MAAM;AAAA,EAC9B,CAAC;AAEDW,eAAaF,UAAWG,CAAAA,MAAM;AAC5BA,MAAEE,eAAeV,UAAUC,WAAW;AAAA,EACxC,CAAC;AAEDM,eAAaF,UAAWG,CAAAA,MAAM;AAC5BA,MAAEG,WAAW;AAAA,MACXC,eAAeZ,UAAUY;AAAAA,MACzBC,YAAYb,UAAUa;AAAAA,MACtBC,kBAAkBd,UAAUc;AAAAA,MAC5BC,mBAAmBf,UAAUe;AAAAA,MAC7BC,UAAUhB,UAAUgB;AAAAA,MACpBC,kBAAkBjB,UAAUiB;AAAAA,MAC5BC,iBAAiBlB,UAAUkB;AAAAA,IAAAA,CAC5B;AAAA,EACH,CAAC;AAEDX,eACE,OAAO;AAAA,IAAEC,GAAGH,SAAAA;AAAAA,IAAYc,IAAIjB,WAAAA;AAAAA,EAAW,IACvC,CAAC;AAAA,IAAEM;AAAAA,IAAGW;AAAAA,EAAAA,MAAS;AACb,QAAIA,IAAI;AACNX,QAAEY,MAAMD,EAAE;AAEVE,gBAAU,MAAM;AACdb,UAAEc,QAAAA;AAAAA,MACJ,CAAC;AAAA,IACH;AAAA,EACF,CACF;AAEA,UAAA,MAAA;AAAA,QAAAC,OAAAC,OAAAA;AAAAC,QAAA,MAGYN,CAAAA,OAAO;AACXhB,oBAAcgB,EAAE;AAAA,IAClB,GAACI,IAAA;AAAA,WAAAA;AAAAA,EAAA,GAAA;AAIT;"}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
|
-
import { template,
|
|
1
|
+
import { template, ref } from "@solidjs/web";
|
|
2
2
|
import { useRouter, useRouterState } from "@tanstack/solid-router";
|
|
3
3
|
import { TanStackRouterDevtoolsPanelCore } from "@tanstack/router-devtools-core";
|
|
4
|
-
import { createSignal, createEffect,
|
|
4
|
+
import { createSignal, createEffect, onCleanup } from "solid-js";
|
|
5
5
|
var _tmpl$ = /* @__PURE__ */ template(`<div>`);
|
|
6
6
|
const TanStackRouterDevtoolsPanel = (props) => {
|
|
7
7
|
const activeRouter = props.router ?? useRouter();
|
|
@@ -13,33 +13,38 @@ const TanStackRouterDevtoolsPanel = (props) => {
|
|
|
13
13
|
router: activeRouter,
|
|
14
14
|
routerState: activeRouterState
|
|
15
15
|
};
|
|
16
|
-
|
|
16
|
+
const [devToolRef, setDevToolRef] = createSignal();
|
|
17
17
|
const [devtools] = createSignal(new TanStackRouterDevtoolsPanelCore(usedProps));
|
|
18
|
-
createEffect(() => {
|
|
19
|
-
|
|
18
|
+
createEffect(devtools, (d) => {
|
|
19
|
+
d.setRouter(usedProps.router);
|
|
20
20
|
});
|
|
21
|
-
createEffect(() => {
|
|
22
|
-
|
|
21
|
+
createEffect(devtools, (d) => {
|
|
22
|
+
d.setRouterState(usedProps.routerState);
|
|
23
23
|
});
|
|
24
|
-
createEffect(() => {
|
|
25
|
-
|
|
24
|
+
createEffect(devtools, (d) => {
|
|
25
|
+
d.setOptions({
|
|
26
26
|
className: usedProps.className,
|
|
27
27
|
style: usedProps.style,
|
|
28
28
|
shadowDOMTarget: usedProps.shadowDOMTarget
|
|
29
29
|
});
|
|
30
30
|
});
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
31
|
+
createEffect(() => ({
|
|
32
|
+
d: devtools(),
|
|
33
|
+
el: devToolRef()
|
|
34
|
+
}), ({
|
|
35
|
+
d,
|
|
36
|
+
el
|
|
37
|
+
}) => {
|
|
38
|
+
if (el) {
|
|
39
|
+
d.mount(el);
|
|
34
40
|
onCleanup(() => {
|
|
35
|
-
|
|
41
|
+
d.unmount();
|
|
36
42
|
});
|
|
37
43
|
}
|
|
38
44
|
});
|
|
39
45
|
return (() => {
|
|
40
46
|
var _el$ = _tmpl$();
|
|
41
|
-
|
|
42
|
-
typeof _ref$ === "function" ? use(_ref$, _el$) : devToolRef = _el$;
|
|
47
|
+
ref(() => setDevToolRef, _el$);
|
|
43
48
|
return _el$;
|
|
44
49
|
})();
|
|
45
50
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"TanStackRouterDevtoolsPanel.js","sources":["../../src/TanStackRouterDevtoolsPanel.tsx"],"sourcesContent":["import { useRouter, useRouterState } from '@tanstack/solid-router'\nimport { TanStackRouterDevtoolsPanelCore } from '@tanstack/router-devtools-core'\nimport { createEffect, createSignal, onCleanup
|
|
1
|
+
{"version":3,"file":"TanStackRouterDevtoolsPanel.js","sources":["../../src/TanStackRouterDevtoolsPanel.tsx"],"sourcesContent":["import { useRouter, useRouterState } from '@tanstack/solid-router'\nimport { TanStackRouterDevtoolsPanelCore } from '@tanstack/router-devtools-core'\nimport { createEffect, createSignal, onCleanup } from 'solid-js'\nimport type { AnyRouter } from '@tanstack/solid-router'\nimport type { Component, JSX } from 'solid-js'\n\nexport interface TanStackRouterDevtoolsPanelOptions {\n /**\n * The standard React style object used to style a component with inline styles\n */\n style?: JSX.CSSProperties\n /**\n * The standard React class property used to style a component with classes\n */\n className?: string\n /**\n * A boolean variable indicating whether the panel is open or closed\n */\n isOpen?: boolean\n /**\n * A function that toggles the open and close state of the panel\n */\n setIsOpen?: (isOpen: boolean) => void\n /**\n * Handles the opening and closing the devtools panel\n */\n handleDragStart?: (e: any) => void\n /**\n * A boolean variable indicating if the \"lite\" version of the library is being used\n */\n router?: AnyRouter\n /**\n * Use this to attach the devtool's styles to specific element in the DOM.\n */\n shadowDOMTarget?: ShadowRoot\n}\n\nexport const TanStackRouterDevtoolsPanel: Component<\n TanStackRouterDevtoolsPanelOptions\n> = (props): JSX.Element | null => {\n const activeRouter = props.router ?? useRouter()\n const activeRouterState = useRouterState({ router: activeRouter })\n\n const usedProps = {\n ...props,\n router: activeRouter,\n routerState: activeRouterState,\n }\n\n const [devToolRef, setDevToolRef] = createSignal<HTMLDivElement>()\n const [devtools] = createSignal(\n new TanStackRouterDevtoolsPanelCore(usedProps),\n )\n\n // Update devtools when props change\n createEffect(devtools, (d) => {\n d.setRouter(usedProps.router)\n })\n\n createEffect(devtools, (d) => {\n d.setRouterState(usedProps.routerState)\n })\n\n createEffect(devtools, (d) => {\n d.setOptions({\n className: usedProps.className,\n style: usedProps.style,\n shadowDOMTarget: usedProps.shadowDOMTarget,\n })\n })\n\n createEffect(\n () => ({ d: devtools(), el: devToolRef() }),\n ({ d, el }) => {\n if (el) {\n d.mount(el)\n\n onCleanup(() => {\n d.unmount()\n })\n }\n },\n )\n\n return (\n <>\n <div ref={setDevToolRef} />\n </>\n )\n}\n"],"names":["TanStackRouterDevtoolsPanel","props","activeRouter","router","useRouter","activeRouterState","useRouterState","usedProps","routerState","devToolRef","setDevToolRef","createSignal","devtools","TanStackRouterDevtoolsPanelCore","createEffect","d","setRouter","setRouterState","setOptions","className","style","shadowDOMTarget","el","mount","onCleanup","unmount","_el$","_tmpl$","_$ref"],"mappings":";;;;;AAqCO,MAAMA,8BAETA,CAACC,UAA8B;AACjC,QAAMC,eAAeD,MAAME,UAAUC,UAAAA;AACrC,QAAMC,oBAAoBC,eAAe;AAAA,IAAEH,QAAQD;AAAAA,EAAAA,CAAc;AAEjE,QAAMK,YAAY;AAAA,IAChB,GAAGN;AAAAA,IACHE,QAAQD;AAAAA,IACRM,aAAaH;AAAAA,EAAAA;AAGf,QAAM,CAACI,YAAYC,aAAa,IAAIC,aAAAA;AACpC,QAAM,CAACC,QAAQ,IAAID,aACjB,IAAIE,gCAAgCN,SAAS,CAC/C;AAGAO,eAAaF,UAAWG,CAAAA,MAAM;AAC5BA,MAAEC,UAAUT,UAAUJ,MAAM;AAAA,EAC9B,CAAC;AAEDW,eAAaF,UAAWG,CAAAA,MAAM;AAC5BA,MAAEE,eAAeV,UAAUC,WAAW;AAAA,EACxC,CAAC;AAEDM,eAAaF,UAAWG,CAAAA,MAAM;AAC5BA,MAAEG,WAAW;AAAA,MACXC,WAAWZ,UAAUY;AAAAA,MACrBC,OAAOb,UAAUa;AAAAA,MACjBC,iBAAiBd,UAAUc;AAAAA,IAAAA,CAC5B;AAAA,EACH,CAAC;AAEDP,eACE,OAAO;AAAA,IAAEC,GAAGH,SAAAA;AAAAA,IAAYU,IAAIb,WAAAA;AAAAA,EAAW,IACvC,CAAC;AAAA,IAAEM;AAAAA,IAAGO;AAAAA,EAAAA,MAAS;AACb,QAAIA,IAAI;AACNP,QAAEQ,MAAMD,EAAE;AAEVE,gBAAU,MAAM;AACdT,UAAEU,QAAAA;AAAAA,MACJ,CAAC;AAAA,IACH;AAAA,EACF,CACF;AAEA,UAAA,MAAA;AAAA,QAAAC,OAAAC,OAAAA;AAAAC,QAAA,MAEclB,eAAagB,IAAA;AAAA,WAAAA;AAAAA,EAAA,GAAA;AAG7B;"}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { useRouter, useRouterState } from '@tanstack/solid-router';
|
|
2
2
|
import { TanStackRouterDevtoolsCore } from '@tanstack/router-devtools-core';
|
|
3
|
-
import { createEffect, createSignal, onCleanup
|
|
3
|
+
import { createEffect, createSignal, onCleanup } from 'solid-js';
|
|
4
4
|
export const TanStackRouterDevtools = (props) => {
|
|
5
5
|
const activeRouter = props.router ?? useRouter();
|
|
6
6
|
const activeRouterState = useRouterState({ router: activeRouter });
|
|
@@ -9,17 +9,17 @@ export const TanStackRouterDevtools = (props) => {
|
|
|
9
9
|
router: activeRouter,
|
|
10
10
|
routerState: activeRouterState,
|
|
11
11
|
};
|
|
12
|
-
|
|
12
|
+
const [devToolRef, setDevToolRef] = createSignal();
|
|
13
13
|
const [devtools] = createSignal(new TanStackRouterDevtoolsCore(usedProps));
|
|
14
14
|
// Update devtools when props change
|
|
15
|
-
createEffect(() => {
|
|
16
|
-
|
|
15
|
+
createEffect(devtools, (d) => {
|
|
16
|
+
d.setRouter(usedProps.router);
|
|
17
17
|
});
|
|
18
|
-
createEffect(() => {
|
|
19
|
-
|
|
18
|
+
createEffect(devtools, (d) => {
|
|
19
|
+
d.setRouterState(usedProps.routerState);
|
|
20
20
|
});
|
|
21
|
-
createEffect(() => {
|
|
22
|
-
|
|
21
|
+
createEffect(devtools, (d) => {
|
|
22
|
+
d.setOptions({
|
|
23
23
|
initialIsOpen: usedProps.initialIsOpen,
|
|
24
24
|
panelProps: usedProps.panelProps,
|
|
25
25
|
closeButtonProps: usedProps.closeButtonProps,
|
|
@@ -29,16 +29,18 @@ export const TanStackRouterDevtools = (props) => {
|
|
|
29
29
|
shadowDOMTarget: usedProps.shadowDOMTarget,
|
|
30
30
|
});
|
|
31
31
|
});
|
|
32
|
-
|
|
33
|
-
if (
|
|
34
|
-
|
|
32
|
+
createEffect(() => ({ d: devtools(), el: devToolRef() }), ({ d, el }) => {
|
|
33
|
+
if (el) {
|
|
34
|
+
d.mount(el);
|
|
35
35
|
onCleanup(() => {
|
|
36
|
-
|
|
36
|
+
d.unmount();
|
|
37
37
|
});
|
|
38
38
|
}
|
|
39
39
|
});
|
|
40
40
|
return (<>
|
|
41
|
-
<div ref={
|
|
41
|
+
<div ref={(el) => {
|
|
42
|
+
setDevToolRef(el);
|
|
43
|
+
}}/>
|
|
42
44
|
</>);
|
|
43
45
|
};
|
|
44
46
|
//# sourceMappingURL=TanStackRouterDevtools.jsx.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"TanStackRouterDevtools.jsx","sourceRoot":"","sources":["../../src/TanStackRouterDevtools.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,cAAc,EAAE,MAAM,wBAAwB,CAAA;AAClE,OAAO,EAAE,0BAA0B,EAAE,MAAM,gCAAgC,CAAA;AAC3E,OAAO,EAAE,YAAY,EAAE,YAAY,EAAE,SAAS,EAAE,
|
|
1
|
+
{"version":3,"file":"TanStackRouterDevtools.jsx","sourceRoot":"","sources":["../../src/TanStackRouterDevtools.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,cAAc,EAAE,MAAM,wBAAwB,CAAA;AAClE,OAAO,EAAE,0BAA0B,EAAE,MAAM,gCAAgC,CAAA;AAC3E,OAAO,EAAE,YAAY,EAAE,YAAY,EAAE,SAAS,EAAE,MAAM,UAAU,CAAA;AA0ChE,MAAM,CAAC,MAAM,sBAAsB,GAE/B,CAAC,KAAK,EAAsB,EAAE;IAChC,MAAM,YAAY,GAAG,KAAK,CAAC,MAAM,IAAI,SAAS,EAAE,CAAA;IAChD,MAAM,iBAAiB,GAAG,cAAc,CAAC,EAAE,MAAM,EAAE,YAAY,EAAE,CAAC,CAAA;IAElE,MAAM,SAAS,GAAG;QAChB,GAAG,KAAK;QACR,MAAM,EAAE,YAAY;QACpB,WAAW,EAAE,iBAAiB;KAC/B,CAAA;IAED,MAAM,CAAC,UAAU,EAAE,aAAa,CAAC,GAAG,YAAY,EAAkB,CAAA;IAClE,MAAM,CAAC,QAAQ,CAAC,GAAG,YAAY,CAAC,IAAI,0BAA0B,CAAC,SAAS,CAAC,CAAC,CAAA;IAE1E,oCAAoC;IACpC,YAAY,CAAC,QAAQ,EAAE,CAAC,CAAC,EAAE,EAAE;QAC3B,CAAC,CAAC,SAAS,CAAC,SAAS,CAAC,MAAM,CAAC,CAAA;IAC/B,CAAC,CAAC,CAAA;IAEF,YAAY,CAAC,QAAQ,EAAE,CAAC,CAAC,EAAE,EAAE;QAC3B,CAAC,CAAC,cAAc,CAAC,SAAS,CAAC,WAAW,CAAC,CAAA;IACzC,CAAC,CAAC,CAAA;IAEF,YAAY,CAAC,QAAQ,EAAE,CAAC,CAAC,EAAE,EAAE;QAC3B,CAAC,CAAC,UAAU,CAAC;YACX,aAAa,EAAE,SAAS,CAAC,aAAa;YACtC,UAAU,EAAE,SAAS,CAAC,UAAU;YAChC,gBAAgB,EAAE,SAAS,CAAC,gBAAgB;YAC5C,iBAAiB,EAAE,SAAS,CAAC,iBAAiB;YAC9C,QAAQ,EAAE,SAAS,CAAC,QAAQ;YAC5B,gBAAgB,EAAE,SAAS,CAAC,gBAAgB;YAC5C,eAAe,EAAE,SAAS,CAAC,eAAe;SAC3C,CAAC,CAAA;IACJ,CAAC,CAAC,CAAA;IAEF,YAAY,CACV,GAAG,EAAE,CAAC,CAAC,EAAE,CAAC,EAAE,QAAQ,EAAE,EAAE,EAAE,EAAE,UAAU,EAAE,EAAE,CAAC,EAC3C,CAAC,EAAE,CAAC,EAAE,EAAE,EAAE,EAAE,EAAE;QACZ,IAAI,EAAE,EAAE,CAAC;YACP,CAAC,CAAC,KAAK,CAAC,EAAE,CAAC,CAAA;YAEX,SAAS,CAAC,GAAG,EAAE;gBACb,CAAC,CAAC,OAAO,EAAE,CAAA;YACb,CAAC,CAAC,CAAA;QACJ,CAAC;IACH,CAAC,CACF,CAAA;IAED,OAAO,CACL,EACE;MAAA,CAAC,GAAG,CACF,GAAG,CAAC,CAAC,CAAC,EAAE,EAAE,EAAE;YACV,aAAa,CAAC,EAAE,CAAC,CAAA;QACnB,CAAC,CAAC,EAEN;IAAA,GAAG,CACJ,CAAA;AACH,CAAC,CAAA"}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { useRouter, useRouterState } from '@tanstack/solid-router';
|
|
2
2
|
import { TanStackRouterDevtoolsPanelCore } from '@tanstack/router-devtools-core';
|
|
3
|
-
import { createEffect, createSignal, onCleanup
|
|
3
|
+
import { createEffect, createSignal, onCleanup } from 'solid-js';
|
|
4
4
|
export const TanStackRouterDevtoolsPanel = (props) => {
|
|
5
5
|
const activeRouter = props.router ?? useRouter();
|
|
6
6
|
const activeRouterState = useRouterState({ router: activeRouter });
|
|
@@ -9,32 +9,32 @@ export const TanStackRouterDevtoolsPanel = (props) => {
|
|
|
9
9
|
router: activeRouter,
|
|
10
10
|
routerState: activeRouterState,
|
|
11
11
|
};
|
|
12
|
-
|
|
12
|
+
const [devToolRef, setDevToolRef] = createSignal();
|
|
13
13
|
const [devtools] = createSignal(new TanStackRouterDevtoolsPanelCore(usedProps));
|
|
14
14
|
// Update devtools when props change
|
|
15
|
-
createEffect(() => {
|
|
16
|
-
|
|
15
|
+
createEffect(devtools, (d) => {
|
|
16
|
+
d.setRouter(usedProps.router);
|
|
17
17
|
});
|
|
18
|
-
createEffect(() => {
|
|
19
|
-
|
|
18
|
+
createEffect(devtools, (d) => {
|
|
19
|
+
d.setRouterState(usedProps.routerState);
|
|
20
20
|
});
|
|
21
|
-
createEffect(() => {
|
|
22
|
-
|
|
21
|
+
createEffect(devtools, (d) => {
|
|
22
|
+
d.setOptions({
|
|
23
23
|
className: usedProps.className,
|
|
24
24
|
style: usedProps.style,
|
|
25
25
|
shadowDOMTarget: usedProps.shadowDOMTarget,
|
|
26
26
|
});
|
|
27
27
|
});
|
|
28
|
-
|
|
29
|
-
if (
|
|
30
|
-
|
|
28
|
+
createEffect(() => ({ d: devtools(), el: devToolRef() }), ({ d, el }) => {
|
|
29
|
+
if (el) {
|
|
30
|
+
d.mount(el);
|
|
31
31
|
onCleanup(() => {
|
|
32
|
-
|
|
32
|
+
d.unmount();
|
|
33
33
|
});
|
|
34
34
|
}
|
|
35
35
|
});
|
|
36
36
|
return (<>
|
|
37
|
-
<div ref={
|
|
37
|
+
<div ref={setDevToolRef}/>
|
|
38
38
|
</>);
|
|
39
39
|
};
|
|
40
40
|
//# sourceMappingURL=TanStackRouterDevtoolsPanel.jsx.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"TanStackRouterDevtoolsPanel.jsx","sourceRoot":"","sources":["../../src/TanStackRouterDevtoolsPanel.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,cAAc,EAAE,MAAM,wBAAwB,CAAA;AAClE,OAAO,EAAE,+BAA+B,EAAE,MAAM,gCAAgC,CAAA;AAChF,OAAO,EAAE,YAAY,EAAE,YAAY,EAAE,SAAS,EAAE,
|
|
1
|
+
{"version":3,"file":"TanStackRouterDevtoolsPanel.jsx","sourceRoot":"","sources":["../../src/TanStackRouterDevtoolsPanel.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,cAAc,EAAE,MAAM,wBAAwB,CAAA;AAClE,OAAO,EAAE,+BAA+B,EAAE,MAAM,gCAAgC,CAAA;AAChF,OAAO,EAAE,YAAY,EAAE,YAAY,EAAE,SAAS,EAAE,MAAM,UAAU,CAAA;AAmChE,MAAM,CAAC,MAAM,2BAA2B,GAEpC,CAAC,KAAK,EAAsB,EAAE;IAChC,MAAM,YAAY,GAAG,KAAK,CAAC,MAAM,IAAI,SAAS,EAAE,CAAA;IAChD,MAAM,iBAAiB,GAAG,cAAc,CAAC,EAAE,MAAM,EAAE,YAAY,EAAE,CAAC,CAAA;IAElE,MAAM,SAAS,GAAG;QAChB,GAAG,KAAK;QACR,MAAM,EAAE,YAAY;QACpB,WAAW,EAAE,iBAAiB;KAC/B,CAAA;IAED,MAAM,CAAC,UAAU,EAAE,aAAa,CAAC,GAAG,YAAY,EAAkB,CAAA;IAClE,MAAM,CAAC,QAAQ,CAAC,GAAG,YAAY,CAC7B,IAAI,+BAA+B,CAAC,SAAS,CAAC,CAC/C,CAAA;IAED,oCAAoC;IACpC,YAAY,CAAC,QAAQ,EAAE,CAAC,CAAC,EAAE,EAAE;QAC3B,CAAC,CAAC,SAAS,CAAC,SAAS,CAAC,MAAM,CAAC,CAAA;IAC/B,CAAC,CAAC,CAAA;IAEF,YAAY,CAAC,QAAQ,EAAE,CAAC,CAAC,EAAE,EAAE;QAC3B,CAAC,CAAC,cAAc,CAAC,SAAS,CAAC,WAAW,CAAC,CAAA;IACzC,CAAC,CAAC,CAAA;IAEF,YAAY,CAAC,QAAQ,EAAE,CAAC,CAAC,EAAE,EAAE;QAC3B,CAAC,CAAC,UAAU,CAAC;YACX,SAAS,EAAE,SAAS,CAAC,SAAS;YAC9B,KAAK,EAAE,SAAS,CAAC,KAAK;YACtB,eAAe,EAAE,SAAS,CAAC,eAAe;SAC3C,CAAC,CAAA;IACJ,CAAC,CAAC,CAAA;IAEF,YAAY,CACV,GAAG,EAAE,CAAC,CAAC,EAAE,CAAC,EAAE,QAAQ,EAAE,EAAE,EAAE,EAAE,UAAU,EAAE,EAAE,CAAC,EAC3C,CAAC,EAAE,CAAC,EAAE,EAAE,EAAE,EAAE,EAAE;QACZ,IAAI,EAAE,EAAE,CAAC;YACP,CAAC,CAAC,KAAK,CAAC,EAAE,CAAC,CAAA;YAEX,SAAS,CAAC,GAAG,EAAE;gBACb,CAAC,CAAC,OAAO,EAAE,CAAA;YACb,CAAC,CAAC,CAAA;QACJ,CAAC;IACH,CAAC,CACF,CAAA;IAED,OAAO,CACL,EACE;MAAA,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC,aAAa,CAAC,EAC1B;IAAA,GAAG,CACJ,CAAA;AACH,CAAC,CAAA"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@tanstack/solid-router-devtools",
|
|
3
|
-
"version": "
|
|
3
|
+
"version": "2.0.0-alpha.1",
|
|
4
4
|
"description": "Modern and scalable routing for Solid applications",
|
|
5
5
|
"author": "Tanner Linsley",
|
|
6
6
|
"license": "MIT",
|
|
@@ -53,17 +53,20 @@
|
|
|
53
53
|
"node": ">=20.19"
|
|
54
54
|
},
|
|
55
55
|
"dependencies": {
|
|
56
|
-
"@
|
|
56
|
+
"@solidjs/web": "2.0.0-beta.2",
|
|
57
|
+
"@tanstack/router-devtools-core": "1.166.7"
|
|
57
58
|
},
|
|
58
59
|
"devDependencies": {
|
|
59
|
-
"solid-js": "
|
|
60
|
+
"solid-js": "2.0.0-beta.2",
|
|
61
|
+
"@solidjs/web": "2.0.0-beta.2",
|
|
60
62
|
"vite": "*",
|
|
61
|
-
"vite-plugin-solid": "
|
|
63
|
+
"vite-plugin-solid": "3.0.0-next.2"
|
|
62
64
|
},
|
|
63
65
|
"peerDependencies": {
|
|
64
|
-
"solid-js": "
|
|
65
|
-
"@
|
|
66
|
-
"@tanstack/
|
|
66
|
+
"solid-js": "2.0.0-beta.2",
|
|
67
|
+
"@solidjs/web": "2.0.0-beta.2",
|
|
68
|
+
"@tanstack/router-core": "^1.166.7",
|
|
69
|
+
"@tanstack/solid-router": "^2.0.0-alpha.1"
|
|
67
70
|
},
|
|
68
71
|
"peerDependenciesMeta": {
|
|
69
72
|
"@tanstack/router-core": {
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { useRouter, useRouterState } from '@tanstack/solid-router'
|
|
2
2
|
import { TanStackRouterDevtoolsCore } from '@tanstack/router-devtools-core'
|
|
3
|
-
import { createEffect, createSignal, onCleanup
|
|
3
|
+
import { createEffect, createSignal, onCleanup } from 'solid-js'
|
|
4
4
|
import type { AnyRouter } from '@tanstack/solid-router'
|
|
5
5
|
import type { Component, JSX } from 'solid-js'
|
|
6
6
|
|
|
@@ -54,20 +54,20 @@ export const TanStackRouterDevtools: Component<
|
|
|
54
54
|
routerState: activeRouterState,
|
|
55
55
|
}
|
|
56
56
|
|
|
57
|
-
|
|
57
|
+
const [devToolRef, setDevToolRef] = createSignal<HTMLDivElement>()
|
|
58
58
|
const [devtools] = createSignal(new TanStackRouterDevtoolsCore(usedProps))
|
|
59
59
|
|
|
60
60
|
// Update devtools when props change
|
|
61
|
-
createEffect(() => {
|
|
62
|
-
|
|
61
|
+
createEffect(devtools, (d) => {
|
|
62
|
+
d.setRouter(usedProps.router)
|
|
63
63
|
})
|
|
64
64
|
|
|
65
|
-
createEffect(() => {
|
|
66
|
-
|
|
65
|
+
createEffect(devtools, (d) => {
|
|
66
|
+
d.setRouterState(usedProps.routerState)
|
|
67
67
|
})
|
|
68
68
|
|
|
69
|
-
createEffect(() => {
|
|
70
|
-
|
|
69
|
+
createEffect(devtools, (d) => {
|
|
70
|
+
d.setOptions({
|
|
71
71
|
initialIsOpen: usedProps.initialIsOpen,
|
|
72
72
|
panelProps: usedProps.panelProps,
|
|
73
73
|
closeButtonProps: usedProps.closeButtonProps,
|
|
@@ -78,19 +78,26 @@ export const TanStackRouterDevtools: Component<
|
|
|
78
78
|
})
|
|
79
79
|
})
|
|
80
80
|
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
81
|
+
createEffect(
|
|
82
|
+
() => ({ d: devtools(), el: devToolRef() }),
|
|
83
|
+
({ d, el }) => {
|
|
84
|
+
if (el) {
|
|
85
|
+
d.mount(el)
|
|
84
86
|
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
87
|
+
onCleanup(() => {
|
|
88
|
+
d.unmount()
|
|
89
|
+
})
|
|
90
|
+
}
|
|
91
|
+
},
|
|
92
|
+
)
|
|
90
93
|
|
|
91
94
|
return (
|
|
92
95
|
<>
|
|
93
|
-
<div
|
|
96
|
+
<div
|
|
97
|
+
ref={(el) => {
|
|
98
|
+
setDevToolRef(el)
|
|
99
|
+
}}
|
|
100
|
+
/>
|
|
94
101
|
</>
|
|
95
102
|
)
|
|
96
103
|
}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { useRouter, useRouterState } from '@tanstack/solid-router'
|
|
2
2
|
import { TanStackRouterDevtoolsPanelCore } from '@tanstack/router-devtools-core'
|
|
3
|
-
import { createEffect, createSignal, onCleanup
|
|
3
|
+
import { createEffect, createSignal, onCleanup } from 'solid-js'
|
|
4
4
|
import type { AnyRouter } from '@tanstack/solid-router'
|
|
5
5
|
import type { Component, JSX } from 'solid-js'
|
|
6
6
|
|
|
@@ -47,41 +47,44 @@ export const TanStackRouterDevtoolsPanel: Component<
|
|
|
47
47
|
routerState: activeRouterState,
|
|
48
48
|
}
|
|
49
49
|
|
|
50
|
-
|
|
50
|
+
const [devToolRef, setDevToolRef] = createSignal<HTMLDivElement>()
|
|
51
51
|
const [devtools] = createSignal(
|
|
52
52
|
new TanStackRouterDevtoolsPanelCore(usedProps),
|
|
53
53
|
)
|
|
54
54
|
|
|
55
55
|
// Update devtools when props change
|
|
56
|
-
createEffect(() => {
|
|
57
|
-
|
|
56
|
+
createEffect(devtools, (d) => {
|
|
57
|
+
d.setRouter(usedProps.router)
|
|
58
58
|
})
|
|
59
59
|
|
|
60
|
-
createEffect(() => {
|
|
61
|
-
|
|
60
|
+
createEffect(devtools, (d) => {
|
|
61
|
+
d.setRouterState(usedProps.routerState)
|
|
62
62
|
})
|
|
63
63
|
|
|
64
|
-
createEffect(() => {
|
|
65
|
-
|
|
64
|
+
createEffect(devtools, (d) => {
|
|
65
|
+
d.setOptions({
|
|
66
66
|
className: usedProps.className,
|
|
67
67
|
style: usedProps.style,
|
|
68
68
|
shadowDOMTarget: usedProps.shadowDOMTarget,
|
|
69
69
|
})
|
|
70
70
|
})
|
|
71
71
|
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
72
|
+
createEffect(
|
|
73
|
+
() => ({ d: devtools(), el: devToolRef() }),
|
|
74
|
+
({ d, el }) => {
|
|
75
|
+
if (el) {
|
|
76
|
+
d.mount(el)
|
|
75
77
|
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
78
|
+
onCleanup(() => {
|
|
79
|
+
d.unmount()
|
|
80
|
+
})
|
|
81
|
+
}
|
|
82
|
+
},
|
|
83
|
+
)
|
|
81
84
|
|
|
82
85
|
return (
|
|
83
86
|
<>
|
|
84
|
-
<div ref={
|
|
87
|
+
<div ref={setDevToolRef} />
|
|
85
88
|
</>
|
|
86
89
|
)
|
|
87
90
|
}
|