@tanstack/router-devtools-core 1.117.1 → 1.120.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.
- package/dist/cjs/BaseTanStackRouterDevtoolsPanel.cjs +197 -101
- package/dist/cjs/BaseTanStackRouterDevtoolsPanel.cjs.map +1 -1
- package/dist/cjs/NavigateButton.cjs +30 -0
- package/dist/cjs/NavigateButton.cjs.map +1 -0
- package/dist/cjs/NavigateButton.d.cts +7 -0
- package/dist/cjs/useStyles.cjs +25 -0
- package/dist/cjs/useStyles.cjs.map +1 -1
- package/dist/cjs/useStyles.d.cts +2 -0
- package/dist/esm/BaseTanStackRouterDevtoolsPanel.js +199 -103
- package/dist/esm/BaseTanStackRouterDevtoolsPanel.js.map +1 -1
- package/dist/esm/NavigateButton.d.ts +7 -0
- package/dist/esm/NavigateButton.js +30 -0
- package/dist/esm/NavigateButton.js.map +1 -0
- package/dist/esm/useStyles.d.ts +2 -0
- package/dist/esm/useStyles.js +25 -0
- package/dist/esm/useStyles.js.map +1 -1
- package/package.json +2 -2
- package/src/BaseTanStackRouterDevtoolsPanel.tsx +92 -21
- package/src/NavigateButton.tsx +25 -0
- package/src/useStyles.tsx +25 -0
|
@@ -1,15 +1,16 @@
|
|
|
1
1
|
import { template, spread, mergeProps, insert, addEventListener, effect, className, createComponent, memo, setAttribute, delegateEvents } from "solid-js/web";
|
|
2
2
|
import { clsx } from "clsx";
|
|
3
3
|
import invariant from "tiny-invariant";
|
|
4
|
-
import { rootRouteId, trimPath } from "@tanstack/router-core";
|
|
5
|
-
import { createMemo } from "solid-js";
|
|
4
|
+
import { rootRouteId, trimPath, interpolatePath } from "@tanstack/router-core";
|
|
5
|
+
import { createMemo, Show } from "solid-js";
|
|
6
6
|
import { useDevtoolsOnClose } from "./context.js";
|
|
7
7
|
import { useStyles } from "./useStyles.js";
|
|
8
8
|
import useLocalStorage from "./useLocalStorage.js";
|
|
9
9
|
import { Explorer } from "./Explorer.js";
|
|
10
10
|
import { multiSortBy, getStatusColor, getRouteStatusColor } from "./utils.js";
|
|
11
11
|
import { AgeTicker } from "./AgeTicker.js";
|
|
12
|
-
|
|
12
|
+
import { NavigateButton } from "./NavigateButton.js";
|
|
13
|
+
var _tmpl$ = /* @__PURE__ */ template(`<button><div>TANSTACK</div><div>TanStack Router v1`), _tmpl$2 = /* @__PURE__ */ template(`<div><div>`), _tmpl$3 = /* @__PURE__ */ template(`<code> `), _tmpl$4 = /* @__PURE__ */ template(`<code>`), _tmpl$5 = /* @__PURE__ */ template(`<div><div role=button><div>`), _tmpl$6 = /* @__PURE__ */ template(`<div>`), _tmpl$7 = /* @__PURE__ */ template(`<div><button><svg xmlns=http://www.w3.org/2000/svg width=10 height=6 fill=none viewBox="0 0 10 6"><path stroke=currentColor stroke-linecap=round stroke-linejoin=round stroke-width=1.667 d="M1 1l4 4 4-4"></path></svg></button><div><div></div><div><div></div></div></div><div><div><div><span>Pathname</span></div><div><code></code></div><div><div><button type=button>Routes</button><button type=button>Matches</button></div><div><div>age / staleTime / gcTime</div></div></div><div>`), _tmpl$8 = /* @__PURE__ */ template(`<div><span>masked`), _tmpl$9 = /* @__PURE__ */ template(`<div role=button><div>`), _tmpl$10 = /* @__PURE__ */ template(`<div><div><div>Cached Matches</div><div>age / staleTime / gcTime</div></div><div>`), _tmpl$11 = /* @__PURE__ */ template(`<div><div>Match Details</div><div><div><div><div></div></div><div><div>ID:</div><div><code></code></div></div><div><div>State:</div><div></div></div><div><div>Last Updated:</div><div></div></div></div></div><div>Explorer</div><div>`), _tmpl$12 = /* @__PURE__ */ template(`<div>Loader Data`), _tmpl$13 = /* @__PURE__ */ template(`<div><div>Search Params</div><div>`);
|
|
13
14
|
function Logo(props) {
|
|
14
15
|
const {
|
|
15
16
|
className: className$1,
|
|
@@ -35,6 +36,21 @@ function Logo(props) {
|
|
|
35
36
|
return _el$;
|
|
36
37
|
})();
|
|
37
38
|
}
|
|
39
|
+
function NavigateLink(props) {
|
|
40
|
+
return (() => {
|
|
41
|
+
var _el$4 = _tmpl$2(), _el$5 = _el$4.firstChild;
|
|
42
|
+
_el$4.style.setProperty("display", "flex");
|
|
43
|
+
_el$4.style.setProperty("align-items", "center");
|
|
44
|
+
_el$4.style.setProperty("width", "100%");
|
|
45
|
+
insert(_el$4, () => props.left, _el$5);
|
|
46
|
+
_el$5.style.setProperty("flex-grow", "1");
|
|
47
|
+
_el$5.style.setProperty("min-width", "0");
|
|
48
|
+
insert(_el$5, () => props.children);
|
|
49
|
+
insert(_el$4, () => props.right, null);
|
|
50
|
+
effect(() => className(_el$4, props.class));
|
|
51
|
+
return _el$4;
|
|
52
|
+
})();
|
|
53
|
+
}
|
|
38
54
|
function RouteComp({
|
|
39
55
|
routerState,
|
|
40
56
|
router,
|
|
@@ -64,28 +80,72 @@ function RouteComp({
|
|
|
64
80
|
return "";
|
|
65
81
|
}
|
|
66
82
|
});
|
|
83
|
+
const navigationTarget = createMemo(() => {
|
|
84
|
+
if (isRoot) return void 0;
|
|
85
|
+
if (!route.path) return void 0;
|
|
86
|
+
const allParams = Object.assign({}, ...matches().map((m) => m.params));
|
|
87
|
+
const interpolated = interpolatePath({
|
|
88
|
+
path: route.fullPath,
|
|
89
|
+
params: allParams,
|
|
90
|
+
leaveWildcards: false,
|
|
91
|
+
leaveParams: false,
|
|
92
|
+
decodeCharMap: router().pathParamsDecodeCharMap
|
|
93
|
+
});
|
|
94
|
+
return !interpolated.isMissingParams ? interpolated.interpolatedPath : void 0;
|
|
95
|
+
});
|
|
67
96
|
return (() => {
|
|
68
|
-
var _el$
|
|
69
|
-
_el$
|
|
97
|
+
var _el$6 = _tmpl$5(), _el$7 = _el$6.firstChild, _el$8 = _el$7.firstChild;
|
|
98
|
+
_el$7.$$click = () => {
|
|
70
99
|
if (match()) {
|
|
71
100
|
setActiveId(activeId() === route.id ? "" : route.id);
|
|
72
101
|
}
|
|
73
102
|
};
|
|
74
|
-
insert(_el$
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
103
|
+
insert(_el$7, createComponent(NavigateLink, {
|
|
104
|
+
get ["class"]() {
|
|
105
|
+
return clsx(styles().routesRow(!!match()));
|
|
106
|
+
},
|
|
107
|
+
get left() {
|
|
108
|
+
return createComponent(Show, {
|
|
109
|
+
get when() {
|
|
110
|
+
return navigationTarget();
|
|
111
|
+
},
|
|
112
|
+
children: (navigate) => createComponent(NavigateButton, {
|
|
113
|
+
get to() {
|
|
114
|
+
return navigate();
|
|
115
|
+
},
|
|
116
|
+
router
|
|
117
|
+
})
|
|
118
|
+
});
|
|
119
|
+
},
|
|
120
|
+
get right() {
|
|
121
|
+
return createComponent(AgeTicker, {
|
|
122
|
+
get match() {
|
|
123
|
+
return match();
|
|
124
|
+
},
|
|
125
|
+
router
|
|
126
|
+
});
|
|
79
127
|
},
|
|
80
|
-
|
|
128
|
+
get children() {
|
|
129
|
+
return [(() => {
|
|
130
|
+
var _el$9 = _tmpl$3(), _el$10 = _el$9.firstChild;
|
|
131
|
+
insert(_el$9, () => isRoot ? rootRouteId : route.path || trimPath(route.id), _el$10);
|
|
132
|
+
effect(() => className(_el$9, styles().code));
|
|
133
|
+
return _el$9;
|
|
134
|
+
})(), (() => {
|
|
135
|
+
var _el$11 = _tmpl$4();
|
|
136
|
+
insert(_el$11, param);
|
|
137
|
+
effect(() => className(_el$11, styles().routeParamInfo));
|
|
138
|
+
return _el$11;
|
|
139
|
+
})()];
|
|
140
|
+
}
|
|
81
141
|
}), null);
|
|
82
|
-
insert(_el$
|
|
142
|
+
insert(_el$6, (() => {
|
|
83
143
|
var _c$ = memo(() => {
|
|
84
144
|
var _a;
|
|
85
145
|
return !!((_a = route.children) == null ? void 0 : _a.length);
|
|
86
146
|
});
|
|
87
147
|
return () => _c$() ? (() => {
|
|
88
|
-
var _el$12 = _tmpl$
|
|
148
|
+
var _el$12 = _tmpl$6();
|
|
89
149
|
insert(_el$12, () => [...route.children].sort((a, b) => {
|
|
90
150
|
return a.rank - b.rank;
|
|
91
151
|
}).map((r) => createComponent(RouteComp, {
|
|
@@ -100,23 +160,17 @@ function RouteComp({
|
|
|
100
160
|
})() : null;
|
|
101
161
|
})(), null);
|
|
102
162
|
effect((_p$) => {
|
|
103
|
-
var _v$3 = `Open match details for ${route.id}`, _v$4 = clsx(styles().routesRowContainer(route.id === activeId(), !!match())), _v$5 = clsx(styles().matchIndicator(getRouteStatusColor(matches(), route)))
|
|
104
|
-
_v$3 !== _p$.e && setAttribute(_el$
|
|
105
|
-
_v$4 !== _p$.t && className(_el$
|
|
106
|
-
_v$5 !== _p$.a && className(_el$
|
|
107
|
-
_v$6 !== _p$.o && className(_el$7, _p$.o = _v$6);
|
|
108
|
-
_v$7 !== _p$.i && className(_el$9, _p$.i = _v$7);
|
|
109
|
-
_v$8 !== _p$.n && className(_el$11, _p$.n = _v$8);
|
|
163
|
+
var _v$3 = `Open match details for ${route.id}`, _v$4 = clsx(styles().routesRowContainer(route.id === activeId(), !!match())), _v$5 = clsx(styles().matchIndicator(getRouteStatusColor(matches(), route)));
|
|
164
|
+
_v$3 !== _p$.e && setAttribute(_el$7, "aria-label", _p$.e = _v$3);
|
|
165
|
+
_v$4 !== _p$.t && className(_el$7, _p$.t = _v$4);
|
|
166
|
+
_v$5 !== _p$.a && className(_el$8, _p$.a = _v$5);
|
|
110
167
|
return _p$;
|
|
111
168
|
}, {
|
|
112
169
|
e: void 0,
|
|
113
170
|
t: void 0,
|
|
114
|
-
a: void 0
|
|
115
|
-
o: void 0,
|
|
116
|
-
i: void 0,
|
|
117
|
-
n: void 0
|
|
171
|
+
a: void 0
|
|
118
172
|
});
|
|
119
|
-
return _el$
|
|
173
|
+
return _el$6;
|
|
120
174
|
})();
|
|
121
175
|
}
|
|
122
176
|
const BaseTanStackRouterDevtoolsPanel = function BaseTanStackRouterDevtoolsPanel2({
|
|
@@ -162,7 +216,7 @@ const BaseTanStackRouterDevtoolsPanel = function BaseTanStackRouterDevtoolsPanel
|
|
|
162
216
|
const activeMatchValue = createMemo(() => activeMatch());
|
|
163
217
|
const locationSearchValue = createMemo(() => routerState().location.search);
|
|
164
218
|
return (() => {
|
|
165
|
-
var _el$13 = _tmpl$
|
|
219
|
+
var _el$13 = _tmpl$7(), _el$14 = _el$13.firstChild, _el$15 = _el$14.firstChild, _el$16 = _el$14.nextSibling, _el$17 = _el$16.firstChild, _el$18 = _el$17.nextSibling, _el$19 = _el$18.firstChild, _el$20 = _el$16.nextSibling, _el$21 = _el$20.firstChild, _el$22 = _el$21.firstChild;
|
|
166
220
|
_el$22.firstChild;
|
|
167
221
|
var _el$24 = _el$22.nextSibling, _el$25 = _el$24.firstChild, _el$26 = _el$24.nextSibling, _el$27 = _el$26.firstChild, _el$28 = _el$27.firstChild, _el$29 = _el$28.nextSibling, _el$30 = _el$27.nextSibling, _el$31 = _el$26.nextSibling;
|
|
168
222
|
spread(_el$13, mergeProps({
|
|
@@ -174,7 +228,7 @@ const BaseTanStackRouterDevtoolsPanel = function BaseTanStackRouterDevtoolsPanel
|
|
|
174
228
|
}
|
|
175
229
|
}, otherPanelProps), false, true);
|
|
176
230
|
insert(_el$13, handleDragStart ? (() => {
|
|
177
|
-
var _el$32 = _tmpl$
|
|
231
|
+
var _el$32 = _tmpl$6();
|
|
178
232
|
addEventListener(_el$32, "mousedown", handleDragStart, true);
|
|
179
233
|
effect(() => className(_el$32, styles().dragHandle));
|
|
180
234
|
return _el$32;
|
|
@@ -209,11 +263,11 @@ const BaseTanStackRouterDevtoolsPanel = function BaseTanStackRouterDevtoolsPanel
|
|
|
209
263
|
insert(_el$22, (() => {
|
|
210
264
|
var _c$2 = memo(() => !!routerState().location.maskedLocation);
|
|
211
265
|
return () => _c$2() ? (() => {
|
|
212
|
-
var _el$33 = _tmpl$
|
|
266
|
+
var _el$33 = _tmpl$8(), _el$34 = _el$33.firstChild;
|
|
213
267
|
effect((_p$) => {
|
|
214
|
-
var _v$
|
|
215
|
-
_v$
|
|
216
|
-
_v$
|
|
268
|
+
var _v$24 = styles().maskedBadgeContainer, _v$25 = styles().maskedBadge;
|
|
269
|
+
_v$24 !== _p$.e && className(_el$33, _p$.e = _v$24);
|
|
270
|
+
_v$25 !== _p$.t && className(_el$34, _p$.t = _v$25);
|
|
217
271
|
return _p$;
|
|
218
272
|
}, {
|
|
219
273
|
e: void 0,
|
|
@@ -226,7 +280,7 @@ const BaseTanStackRouterDevtoolsPanel = function BaseTanStackRouterDevtoolsPanel
|
|
|
226
280
|
insert(_el$24, (() => {
|
|
227
281
|
var _c$3 = memo(() => !!routerState().location.maskedLocation);
|
|
228
282
|
return () => _c$3() ? (() => {
|
|
229
|
-
var _el$35 = _tmpl$
|
|
283
|
+
var _el$35 = _tmpl$4();
|
|
230
284
|
insert(_el$35, () => {
|
|
231
285
|
var _a;
|
|
232
286
|
return (_a = routerState().location.maskedLocation) == null ? void 0 : _a.pathname;
|
|
@@ -253,30 +307,51 @@ const BaseTanStackRouterDevtoolsPanel = function BaseTanStackRouterDevtoolsPanel
|
|
|
253
307
|
activeId,
|
|
254
308
|
setActiveId
|
|
255
309
|
}) : (() => {
|
|
256
|
-
var _el$36 = _tmpl$
|
|
310
|
+
var _el$36 = _tmpl$6();
|
|
257
311
|
insert(_el$36, () => {
|
|
258
312
|
var _a, _b;
|
|
259
|
-
return (_b = ((_a = routerState().pendingMatches) == null ? void 0 : _a.length) ? routerState().pendingMatches : routerState().matches) == null ? void 0 : _b.map((match,
|
|
313
|
+
return (_b = ((_a = routerState().pendingMatches) == null ? void 0 : _a.length) ? routerState().pendingMatches : routerState().matches) == null ? void 0 : _b.map((match, _i) => {
|
|
260
314
|
return (() => {
|
|
261
|
-
var _el$37 = _tmpl$
|
|
315
|
+
var _el$37 = _tmpl$9(), _el$38 = _el$37.firstChild;
|
|
262
316
|
_el$37.$$click = () => setActiveId(activeId() === match.id ? "" : match.id);
|
|
263
|
-
insert(_el$
|
|
264
|
-
|
|
265
|
-
|
|
266
|
-
|
|
317
|
+
insert(_el$37, createComponent(NavigateLink, {
|
|
318
|
+
get left() {
|
|
319
|
+
return createComponent(NavigateButton, {
|
|
320
|
+
get to() {
|
|
321
|
+
return match.pathname;
|
|
322
|
+
},
|
|
323
|
+
get params() {
|
|
324
|
+
return match.params;
|
|
325
|
+
},
|
|
326
|
+
get search() {
|
|
327
|
+
return match.search;
|
|
328
|
+
},
|
|
329
|
+
router
|
|
330
|
+
});
|
|
331
|
+
},
|
|
332
|
+
get right() {
|
|
333
|
+
return createComponent(AgeTicker, {
|
|
334
|
+
match,
|
|
335
|
+
router
|
|
336
|
+
});
|
|
337
|
+
},
|
|
338
|
+
get children() {
|
|
339
|
+
var _el$39 = _tmpl$4();
|
|
340
|
+
insert(_el$39, () => `${match.routeId === rootRouteId ? rootRouteId : match.pathname}`);
|
|
341
|
+
effect(() => className(_el$39, styles().matchID));
|
|
342
|
+
return _el$39;
|
|
343
|
+
}
|
|
267
344
|
}), null);
|
|
268
345
|
effect((_p$) => {
|
|
269
|
-
var _v$
|
|
270
|
-
_v$
|
|
271
|
-
_v$
|
|
272
|
-
_v$
|
|
273
|
-
_v$32 !== _p$.o && className(_el$39, _p$.o = _v$32);
|
|
346
|
+
var _v$26 = `Open match details for ${match.id}`, _v$27 = clsx(styles().matchRow(match === activeMatch())), _v$28 = clsx(styles().matchIndicator(getStatusColor(match)));
|
|
347
|
+
_v$26 !== _p$.e && setAttribute(_el$37, "aria-label", _p$.e = _v$26);
|
|
348
|
+
_v$27 !== _p$.t && className(_el$37, _p$.t = _v$27);
|
|
349
|
+
_v$28 !== _p$.a && className(_el$38, _p$.a = _v$28);
|
|
274
350
|
return _p$;
|
|
275
351
|
}, {
|
|
276
352
|
e: void 0,
|
|
277
353
|
t: void 0,
|
|
278
|
-
a: void 0
|
|
279
|
-
o: void 0
|
|
354
|
+
a: void 0
|
|
280
355
|
});
|
|
281
356
|
return _el$37;
|
|
282
357
|
})();
|
|
@@ -288,37 +363,58 @@ const BaseTanStackRouterDevtoolsPanel = function BaseTanStackRouterDevtoolsPanel
|
|
|
288
363
|
insert(_el$20, (() => {
|
|
289
364
|
var _c$5 = memo(() => !!routerState().cachedMatches.length);
|
|
290
365
|
return () => _c$5() ? (() => {
|
|
291
|
-
var _el$40 = _tmpl$
|
|
366
|
+
var _el$40 = _tmpl$10(), _el$41 = _el$40.firstChild, _el$42 = _el$41.firstChild, _el$43 = _el$42.nextSibling, _el$44 = _el$41.nextSibling;
|
|
292
367
|
insert(_el$44, () => routerState().cachedMatches.map((match) => {
|
|
293
368
|
return (() => {
|
|
294
|
-
var _el$45 = _tmpl$
|
|
369
|
+
var _el$45 = _tmpl$9(), _el$46 = _el$45.firstChild;
|
|
295
370
|
_el$45.$$click = () => setActiveId(activeId() === match.id ? "" : match.id);
|
|
296
|
-
insert(_el$
|
|
297
|
-
|
|
298
|
-
|
|
299
|
-
|
|
371
|
+
insert(_el$45, createComponent(NavigateLink, {
|
|
372
|
+
get left() {
|
|
373
|
+
return createComponent(NavigateButton, {
|
|
374
|
+
get to() {
|
|
375
|
+
return match.pathname;
|
|
376
|
+
},
|
|
377
|
+
get params() {
|
|
378
|
+
return match.params;
|
|
379
|
+
},
|
|
380
|
+
get search() {
|
|
381
|
+
return match.search;
|
|
382
|
+
},
|
|
383
|
+
router
|
|
384
|
+
});
|
|
385
|
+
},
|
|
386
|
+
get right() {
|
|
387
|
+
return createComponent(AgeTicker, {
|
|
388
|
+
match,
|
|
389
|
+
router
|
|
390
|
+
});
|
|
391
|
+
},
|
|
392
|
+
get children() {
|
|
393
|
+
var _el$47 = _tmpl$4();
|
|
394
|
+
insert(_el$47, () => `${match.id}`);
|
|
395
|
+
effect(() => className(_el$47, styles().matchID));
|
|
396
|
+
return _el$47;
|
|
397
|
+
}
|
|
300
398
|
}), null);
|
|
301
399
|
effect((_p$) => {
|
|
302
|
-
var _v$
|
|
303
|
-
_v$
|
|
304
|
-
_v$
|
|
305
|
-
_v$
|
|
306
|
-
_v$39 !== _p$.o && className(_el$47, _p$.o = _v$39);
|
|
400
|
+
var _v$32 = `Open match details for ${match.id}`, _v$33 = clsx(styles().matchRow(match === activeMatch())), _v$34 = clsx(styles().matchIndicator(getStatusColor(match)));
|
|
401
|
+
_v$32 !== _p$.e && setAttribute(_el$45, "aria-label", _p$.e = _v$32);
|
|
402
|
+
_v$33 !== _p$.t && className(_el$45, _p$.t = _v$33);
|
|
403
|
+
_v$34 !== _p$.a && className(_el$46, _p$.a = _v$34);
|
|
307
404
|
return _p$;
|
|
308
405
|
}, {
|
|
309
406
|
e: void 0,
|
|
310
407
|
t: void 0,
|
|
311
|
-
a: void 0
|
|
312
|
-
o: void 0
|
|
408
|
+
a: void 0
|
|
313
409
|
});
|
|
314
410
|
return _el$45;
|
|
315
411
|
})();
|
|
316
412
|
}));
|
|
317
413
|
effect((_p$) => {
|
|
318
|
-
var _v$
|
|
319
|
-
_v$
|
|
320
|
-
_v$
|
|
321
|
-
_v$
|
|
414
|
+
var _v$29 = styles().cachedMatchesContainer, _v$30 = styles().detailsHeader, _v$31 = styles().detailsHeaderInfo;
|
|
415
|
+
_v$29 !== _p$.e && className(_el$40, _p$.e = _v$29);
|
|
416
|
+
_v$30 !== _p$.t && className(_el$41, _p$.t = _v$30);
|
|
417
|
+
_v$31 !== _p$.a && className(_el$43, _p$.a = _v$31);
|
|
322
418
|
return _p$;
|
|
323
419
|
}, {
|
|
324
420
|
e: void 0,
|
|
@@ -334,7 +430,7 @@ const BaseTanStackRouterDevtoolsPanel = function BaseTanStackRouterDevtoolsPanel
|
|
|
334
430
|
return !!(activeMatch() && ((_a = activeMatch()) == null ? void 0 : _a.status));
|
|
335
431
|
});
|
|
336
432
|
return () => _c$6() ? (() => {
|
|
337
|
-
var _el$48 = _tmpl$
|
|
433
|
+
var _el$48 = _tmpl$11(), _el$49 = _el$48.firstChild, _el$50 = _el$49.nextSibling, _el$51 = _el$50.firstChild, _el$52 = _el$51.firstChild, _el$53 = _el$52.firstChild, _el$54 = _el$52.nextSibling, _el$55 = _el$54.firstChild, _el$56 = _el$55.nextSibling, _el$57 = _el$56.firstChild, _el$58 = _el$54.nextSibling, _el$59 = _el$58.firstChild, _el$60 = _el$59.nextSibling, _el$61 = _el$58.nextSibling, _el$62 = _el$61.firstChild, _el$63 = _el$62.nextSibling, _el$64 = _el$50.nextSibling, _el$65 = _el$64.nextSibling;
|
|
338
434
|
insert(_el$53, (() => {
|
|
339
435
|
var _c$8 = memo(() => {
|
|
340
436
|
var _a, _b;
|
|
@@ -375,11 +471,11 @@ const BaseTanStackRouterDevtoolsPanel = function BaseTanStackRouterDevtoolsPanel
|
|
|
375
471
|
insert(_el$48, (() => {
|
|
376
472
|
var _c$11 = memo(() => !!activeMatchLoaderData());
|
|
377
473
|
return () => _c$11() ? [(() => {
|
|
378
|
-
var _el$66 = _tmpl$
|
|
474
|
+
var _el$66 = _tmpl$12();
|
|
379
475
|
effect(() => className(_el$66, styles().detailsHeader));
|
|
380
476
|
return _el$66;
|
|
381
477
|
})(), (() => {
|
|
382
|
-
var _el$67 = _tmpl$
|
|
478
|
+
var _el$67 = _tmpl$6();
|
|
383
479
|
insert(_el$67, createComponent(Explorer, {
|
|
384
480
|
label: "loaderData",
|
|
385
481
|
value: activeMatchLoaderData,
|
|
@@ -396,19 +492,19 @@ const BaseTanStackRouterDevtoolsPanel = function BaseTanStackRouterDevtoolsPanel
|
|
|
396
492
|
}));
|
|
397
493
|
effect((_p$) => {
|
|
398
494
|
var _a, _b;
|
|
399
|
-
var _v$
|
|
400
|
-
_v$
|
|
401
|
-
_v$
|
|
402
|
-
_v$
|
|
403
|
-
_v$
|
|
404
|
-
_v$
|
|
405
|
-
_v$
|
|
406
|
-
_v$
|
|
407
|
-
_v$
|
|
408
|
-
_v$
|
|
409
|
-
_v$
|
|
410
|
-
_v$
|
|
411
|
-
_v$
|
|
495
|
+
var _v$35 = styles().thirdContainer, _v$36 = styles().detailsHeader, _v$37 = styles().matchDetails, _v$38 = styles().matchStatus((_a = activeMatch()) == null ? void 0 : _a.status, (_b = activeMatch()) == null ? void 0 : _b.isFetching), _v$39 = styles().matchDetailsInfoLabel, _v$40 = styles().matchDetailsInfo, _v$41 = styles().matchDetailsInfoLabel, _v$42 = styles().matchDetailsInfo, _v$43 = styles().matchDetailsInfoLabel, _v$44 = styles().matchDetailsInfo, _v$45 = styles().detailsHeader, _v$46 = styles().detailsContent;
|
|
496
|
+
_v$35 !== _p$.e && className(_el$48, _p$.e = _v$35);
|
|
497
|
+
_v$36 !== _p$.t && className(_el$49, _p$.t = _v$36);
|
|
498
|
+
_v$37 !== _p$.a && className(_el$51, _p$.a = _v$37);
|
|
499
|
+
_v$38 !== _p$.o && className(_el$52, _p$.o = _v$38);
|
|
500
|
+
_v$39 !== _p$.i && className(_el$54, _p$.i = _v$39);
|
|
501
|
+
_v$40 !== _p$.n && className(_el$56, _p$.n = _v$40);
|
|
502
|
+
_v$41 !== _p$.s && className(_el$58, _p$.s = _v$41);
|
|
503
|
+
_v$42 !== _p$.h && className(_el$60, _p$.h = _v$42);
|
|
504
|
+
_v$43 !== _p$.r && className(_el$61, _p$.r = _v$43);
|
|
505
|
+
_v$44 !== _p$.d && className(_el$63, _p$.d = _v$44);
|
|
506
|
+
_v$45 !== _p$.l && className(_el$64, _p$.l = _v$45);
|
|
507
|
+
_v$46 !== _p$.u && className(_el$65, _p$.u = _v$46);
|
|
412
508
|
return _p$;
|
|
413
509
|
}, {
|
|
414
510
|
e: void 0,
|
|
@@ -430,7 +526,7 @@ const BaseTanStackRouterDevtoolsPanel = function BaseTanStackRouterDevtoolsPanel
|
|
|
430
526
|
insert(_el$13, (() => {
|
|
431
527
|
var _c$7 = memo(() => !!hasSearch());
|
|
432
528
|
return () => _c$7() ? (() => {
|
|
433
|
-
var _el$68 = _tmpl$
|
|
529
|
+
var _el$68 = _tmpl$13(), _el$69 = _el$68.firstChild, _el$70 = _el$69.nextSibling;
|
|
434
530
|
insert(_el$70, createComponent(Explorer, {
|
|
435
531
|
value: locationSearchValue,
|
|
436
532
|
get defaultExpanded() {
|
|
@@ -441,10 +537,10 @@ const BaseTanStackRouterDevtoolsPanel = function BaseTanStackRouterDevtoolsPanel
|
|
|
441
537
|
}
|
|
442
538
|
}));
|
|
443
539
|
effect((_p$) => {
|
|
444
|
-
var _v$
|
|
445
|
-
_v$
|
|
446
|
-
_v$
|
|
447
|
-
_v$
|
|
540
|
+
var _v$47 = styles().fourthContainer, _v$48 = styles().detailsHeader, _v$49 = styles().detailsContent;
|
|
541
|
+
_v$47 !== _p$.e && className(_el$68, _p$.e = _v$47);
|
|
542
|
+
_v$48 !== _p$.t && className(_el$69, _p$.t = _v$48);
|
|
543
|
+
_v$49 !== _p$.a && className(_el$70, _p$.a = _v$49);
|
|
448
544
|
return _p$;
|
|
449
545
|
}, {
|
|
450
546
|
e: void 0,
|
|
@@ -455,25 +551,25 @@ const BaseTanStackRouterDevtoolsPanel = function BaseTanStackRouterDevtoolsPanel
|
|
|
455
551
|
})() : null;
|
|
456
552
|
})(), null);
|
|
457
553
|
effect((_p$) => {
|
|
458
|
-
var _v$
|
|
459
|
-
_v$
|
|
460
|
-
_v$
|
|
461
|
-
_v$
|
|
462
|
-
_v$
|
|
463
|
-
_v$
|
|
464
|
-
_v$
|
|
465
|
-
_v$
|
|
466
|
-
_v$
|
|
467
|
-
_v$
|
|
468
|
-
_v$
|
|
469
|
-
_v$
|
|
470
|
-
_v$
|
|
471
|
-
_v$
|
|
472
|
-
_v$
|
|
473
|
-
_v$
|
|
474
|
-
_v$
|
|
475
|
-
_v$
|
|
476
|
-
_v$
|
|
554
|
+
var _v$6 = styles().panelCloseBtn, _v$7 = styles().panelCloseBtnIcon, _v$8 = styles().firstContainer, _v$9 = styles().row, _v$10 = styles().routerExplorerContainer, _v$11 = styles().routerExplorer, _v$12 = styles().secondContainer, _v$13 = styles().matchesContainer, _v$14 = styles().detailsHeader, _v$15 = styles().detailsContent, _v$16 = styles().detailsHeader, _v$17 = styles().routeMatchesToggle, _v$18 = !showMatches(), _v$19 = clsx(styles().routeMatchesToggleBtn(!showMatches(), true)), _v$20 = showMatches(), _v$21 = clsx(styles().routeMatchesToggleBtn(!!showMatches(), false)), _v$22 = styles().detailsHeaderInfo, _v$23 = clsx(styles().routesContainer);
|
|
555
|
+
_v$6 !== _p$.e && className(_el$14, _p$.e = _v$6);
|
|
556
|
+
_v$7 !== _p$.t && setAttribute(_el$15, "class", _p$.t = _v$7);
|
|
557
|
+
_v$8 !== _p$.a && className(_el$16, _p$.a = _v$8);
|
|
558
|
+
_v$9 !== _p$.o && className(_el$17, _p$.o = _v$9);
|
|
559
|
+
_v$10 !== _p$.i && className(_el$18, _p$.i = _v$10);
|
|
560
|
+
_v$11 !== _p$.n && className(_el$19, _p$.n = _v$11);
|
|
561
|
+
_v$12 !== _p$.s && className(_el$20, _p$.s = _v$12);
|
|
562
|
+
_v$13 !== _p$.h && className(_el$21, _p$.h = _v$13);
|
|
563
|
+
_v$14 !== _p$.r && className(_el$22, _p$.r = _v$14);
|
|
564
|
+
_v$15 !== _p$.d && className(_el$24, _p$.d = _v$15);
|
|
565
|
+
_v$16 !== _p$.l && className(_el$26, _p$.l = _v$16);
|
|
566
|
+
_v$17 !== _p$.u && className(_el$27, _p$.u = _v$17);
|
|
567
|
+
_v$18 !== _p$.c && (_el$28.disabled = _p$.c = _v$18);
|
|
568
|
+
_v$19 !== _p$.w && className(_el$28, _p$.w = _v$19);
|
|
569
|
+
_v$20 !== _p$.m && (_el$29.disabled = _p$.m = _v$20);
|
|
570
|
+
_v$21 !== _p$.f && className(_el$29, _p$.f = _v$21);
|
|
571
|
+
_v$22 !== _p$.y && className(_el$30, _p$.y = _v$22);
|
|
572
|
+
_v$23 !== _p$.g && className(_el$31, _p$.g = _v$23);
|
|
477
573
|
return _p$;
|
|
478
574
|
}, {
|
|
479
575
|
e: void 0,
|