@tanstack/router-devtools 0.0.1-beta.224 → 0.0.1-beta.226
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/build/cjs/Explorer.js +5 -6
- package/build/cjs/Explorer.js.map +1 -1
- package/build/cjs/_virtual/_rollupPluginBabelHelpers.js +1 -3
- package/build/cjs/_virtual/_rollupPluginBabelHelpers.js.map +1 -1
- package/build/cjs/devtools.js +68 -74
- package/build/cjs/devtools.js.map +1 -1
- package/build/cjs/index.js +0 -2
- package/build/cjs/index.js.map +1 -1
- package/build/cjs/styledComponents.js +0 -3
- package/build/cjs/styledComponents.js.map +1 -1
- package/build/cjs/theme.js +3 -9
- package/build/cjs/theme.js.map +1 -1
- package/build/cjs/useLocalStorage.js +4 -8
- package/build/cjs/useLocalStorage.js.map +1 -1
- package/build/cjs/useMediaQuery.js +3 -7
- package/build/cjs/useMediaQuery.js.map +1 -1
- package/build/cjs/utils.js +8 -14
- package/build/cjs/utils.js.map +1 -1
- package/build/esm/index.js +0 -1
- package/build/esm/index.js.map +1 -1
- package/build/stats-html.html +3494 -2700
- package/build/stats-react.json +149 -132
- package/build/types/Explorer.d.ts +3 -3
- package/build/types/styledComponents.d.ts +3 -3
- package/build/types/theme.d.ts +1 -1
- package/build/umd/index.development.js +89 -90
- package/build/umd/index.development.js.map +1 -1
- package/build/umd/index.production.js +2 -3
- package/build/umd/index.production.js.map +1 -1
- package/package.json +2 -2
|
@@ -14,10 +14,7 @@
|
|
|
14
14
|
(global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global.TanStackRouterDevtools = {}, global.React));
|
|
15
15
|
})(this, (function (exports, React) { 'use strict';
|
|
16
16
|
|
|
17
|
-
function
|
|
18
|
-
|
|
19
|
-
function _interopNamespace(e) {
|
|
20
|
-
if (e && e.__esModule) return e;
|
|
17
|
+
function _interopNamespaceDefault(e) {
|
|
21
18
|
var n = Object.create(null);
|
|
22
19
|
if (e) {
|
|
23
20
|
Object.keys(e).forEach(function (k) {
|
|
@@ -30,12 +27,11 @@
|
|
|
30
27
|
}
|
|
31
28
|
});
|
|
32
29
|
}
|
|
33
|
-
n
|
|
30
|
+
n.default = e;
|
|
34
31
|
return Object.freeze(n);
|
|
35
32
|
}
|
|
36
33
|
|
|
37
|
-
var React__namespace = /*#__PURE__*/
|
|
38
|
-
var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
|
|
34
|
+
var React__namespace = /*#__PURE__*/_interopNamespaceDefault(React);
|
|
39
35
|
|
|
40
36
|
function _extends() {
|
|
41
37
|
_extends = Object.assign ? Object.assign.bind() : function (target) {
|
|
@@ -52,18 +48,23 @@
|
|
|
52
48
|
return _extends.apply(this, arguments);
|
|
53
49
|
}
|
|
54
50
|
|
|
51
|
+
var isProduction$1 = "development" === 'production';
|
|
55
52
|
var prefix = 'Invariant failed';
|
|
56
53
|
function invariant(condition, message) {
|
|
57
54
|
if (condition) {
|
|
58
55
|
return;
|
|
59
56
|
}
|
|
57
|
+
if (isProduction$1) {
|
|
58
|
+
throw new Error(prefix);
|
|
59
|
+
}
|
|
60
60
|
var provided = typeof message === 'function' ? message() : message;
|
|
61
61
|
var value = provided ? "".concat(prefix, ": ").concat(provided) : prefix;
|
|
62
62
|
throw new Error(value);
|
|
63
63
|
}
|
|
64
64
|
|
|
65
|
+
var isProduction = "development" === 'production';
|
|
65
66
|
function warning(condition, message) {
|
|
66
|
-
{
|
|
67
|
+
if (!isProduction) {
|
|
67
68
|
if (condition) {
|
|
68
69
|
return;
|
|
69
70
|
}
|
|
@@ -124,6 +125,7 @@
|
|
|
124
125
|
// ) => () => void
|
|
125
126
|
// hydrateData: <T>(key: any) => T | undefined
|
|
126
127
|
// }
|
|
128
|
+
|
|
127
129
|
const routerContext = /*#__PURE__*/React__namespace.createContext(null);
|
|
128
130
|
if (typeof document !== 'undefined') {
|
|
129
131
|
window.__TSR_ROUTER_CONTEXT__ = routerContext;
|
|
@@ -147,8 +149,8 @@
|
|
|
147
149
|
}
|
|
148
150
|
};
|
|
149
151
|
function useLocalStorage(key, defaultValue) {
|
|
150
|
-
const [value, setValue] =
|
|
151
|
-
|
|
152
|
+
const [value, setValue] = React.useState();
|
|
153
|
+
React.useEffect(() => {
|
|
152
154
|
const initialValue = getItem(key);
|
|
153
155
|
if (typeof initialValue === 'undefined' || initialValue === null) {
|
|
154
156
|
setValue(typeof defaultValue === 'function' ? defaultValue() : defaultValue);
|
|
@@ -156,7 +158,7 @@
|
|
|
156
158
|
setValue(initialValue);
|
|
157
159
|
}
|
|
158
160
|
}, [defaultValue, key]);
|
|
159
|
-
const setter =
|
|
161
|
+
const setter = React.useCallback(updater => {
|
|
160
162
|
setValue(old => {
|
|
161
163
|
let newVal = updater;
|
|
162
164
|
if (typeof updater == 'function') {
|
|
@@ -184,22 +186,22 @@
|
|
|
184
186
|
active: '#006bff',
|
|
185
187
|
warning: '#ffb200'
|
|
186
188
|
};
|
|
187
|
-
const ThemeContext = /*#__PURE__*/
|
|
189
|
+
const ThemeContext = /*#__PURE__*/React.createContext(defaultTheme);
|
|
188
190
|
function ThemeProvider({
|
|
189
191
|
theme,
|
|
190
192
|
...rest
|
|
191
193
|
}) {
|
|
192
|
-
return /*#__PURE__*/
|
|
194
|
+
return /*#__PURE__*/React.createElement(ThemeContext.Provider, _extends({
|
|
193
195
|
value: theme
|
|
194
196
|
}, rest));
|
|
195
197
|
}
|
|
196
198
|
function useTheme() {
|
|
197
|
-
return
|
|
199
|
+
return React.useContext(ThemeContext);
|
|
198
200
|
}
|
|
199
201
|
|
|
200
202
|
function useMediaQuery(query) {
|
|
201
203
|
// Keep track of the preference in state, start with the current match
|
|
202
|
-
const [isMatch, setIsMatch] =
|
|
204
|
+
const [isMatch, setIsMatch] = React.useState(() => {
|
|
203
205
|
if (typeof window !== 'undefined') {
|
|
204
206
|
return window.matchMedia && window.matchMedia(query).matches;
|
|
205
207
|
}
|
|
@@ -207,7 +209,7 @@
|
|
|
207
209
|
});
|
|
208
210
|
|
|
209
211
|
// Watch for changes
|
|
210
|
-
|
|
212
|
+
React.useEffect(() => {
|
|
211
213
|
if (typeof window !== 'undefined') {
|
|
212
214
|
if (!window.matchMedia) {
|
|
213
215
|
return;
|
|
@@ -243,7 +245,7 @@
|
|
|
243
245
|
return getStatusColor(found, theme);
|
|
244
246
|
}
|
|
245
247
|
function styled(type, newStyles, queries = {}) {
|
|
246
|
-
return /*#__PURE__*/
|
|
248
|
+
return /*#__PURE__*/React.forwardRef(({
|
|
247
249
|
style,
|
|
248
250
|
...rest
|
|
249
251
|
}, ref) => {
|
|
@@ -255,7 +257,7 @@
|
|
|
255
257
|
...(typeof value === 'function' ? value(rest, theme) : value)
|
|
256
258
|
} : current;
|
|
257
259
|
}, {});
|
|
258
|
-
return /*#__PURE__*/
|
|
260
|
+
return /*#__PURE__*/React.createElement(type, {
|
|
259
261
|
...rest,
|
|
260
262
|
style: {
|
|
261
263
|
...(typeof newStyles === 'function' ? newStyles(rest, theme) : newStyles),
|
|
@@ -267,9 +269,9 @@
|
|
|
267
269
|
});
|
|
268
270
|
}
|
|
269
271
|
function useIsMounted() {
|
|
270
|
-
const mountedRef =
|
|
271
|
-
const isMounted =
|
|
272
|
-
|
|
272
|
+
const mountedRef = React.useRef(false);
|
|
273
|
+
const isMounted = React.useCallback(() => mountedRef.current, []);
|
|
274
|
+
React[isServer$1 ? 'useEffect' : 'useLayoutEffect'](() => {
|
|
273
275
|
mountedRef.current = true;
|
|
274
276
|
return () => {
|
|
275
277
|
mountedRef.current = false;
|
|
@@ -295,8 +297,8 @@
|
|
|
295
297
|
*/
|
|
296
298
|
function useSafeState(initialState) {
|
|
297
299
|
const isMounted = useIsMounted();
|
|
298
|
-
const [state, setState] =
|
|
299
|
-
const safeSetState =
|
|
300
|
+
const [state, setState] = React.useState(initialState);
|
|
301
|
+
const safeSetState = React.useCallback(value => {
|
|
300
302
|
scheduleMicrotask(() => {
|
|
301
303
|
if (isMounted()) {
|
|
302
304
|
setState(value);
|
|
@@ -331,7 +333,6 @@
|
|
|
331
333
|
// flexDirection: 'column',
|
|
332
334
|
}
|
|
333
335
|
});
|
|
334
|
-
|
|
335
336
|
const ActivePanel = styled('div', () => ({
|
|
336
337
|
flex: '1 1 500px',
|
|
337
338
|
display: 'flex',
|
|
@@ -545,7 +546,7 @@
|
|
|
545
546
|
|
|
546
547
|
const isServer = typeof window === 'undefined';
|
|
547
548
|
function Logo(props) {
|
|
548
|
-
return /*#__PURE__*/
|
|
549
|
+
return /*#__PURE__*/React.createElement("div", _extends({}, props, {
|
|
549
550
|
style: {
|
|
550
551
|
...(props.style ?? {}),
|
|
551
552
|
display: 'flex',
|
|
@@ -555,11 +556,11 @@
|
|
|
555
556
|
fontWeight: 'bolder',
|
|
556
557
|
lineHeight: '1'
|
|
557
558
|
}
|
|
558
|
-
}), /*#__PURE__*/
|
|
559
|
+
}), /*#__PURE__*/React.createElement("div", {
|
|
559
560
|
style: {
|
|
560
561
|
letterSpacing: '-0.05rem'
|
|
561
562
|
}
|
|
562
|
-
}, "TANSTACK"), /*#__PURE__*/
|
|
563
|
+
}, "TANSTACK"), /*#__PURE__*/React.createElement("div", {
|
|
563
564
|
style: {
|
|
564
565
|
backgroundImage: 'linear-gradient(to right, var(--tw-gradient-stops))',
|
|
565
566
|
// @ts-ignore
|
|
@@ -582,8 +583,8 @@
|
|
|
582
583
|
containerElement: Container = 'footer',
|
|
583
584
|
router
|
|
584
585
|
}) {
|
|
585
|
-
const rootRef =
|
|
586
|
-
const panelRef =
|
|
586
|
+
const rootRef = React.useRef(null);
|
|
587
|
+
const panelRef = React.useRef(null);
|
|
587
588
|
const [isOpen, setIsOpen] = useLocalStorage('tanstackRouterDevtoolsOpen', initialIsOpen);
|
|
588
589
|
const [devtoolsHeight, setDevtoolsHeight] = useLocalStorage('tanstackRouterDevtoolsHeight', null);
|
|
589
590
|
const [isResolvedOpen, setIsResolvedOpen] = useSafeState(false);
|
|
@@ -615,13 +616,13 @@
|
|
|
615
616
|
document.addEventListener('mousemove', run);
|
|
616
617
|
document.addEventListener('mouseup', unsub);
|
|
617
618
|
};
|
|
618
|
-
|
|
619
|
+
React.useEffect(() => {
|
|
619
620
|
setIsResolvedOpen(isOpen ?? false);
|
|
620
621
|
}, [isOpen, isResolvedOpen, setIsResolvedOpen]);
|
|
621
622
|
|
|
622
623
|
// Toggle panel visibility before/after transition (depending on direction).
|
|
623
624
|
// Prevents focusing in a closed panel.
|
|
624
|
-
|
|
625
|
+
React.useEffect(() => {
|
|
625
626
|
const ref = panelRef.current;
|
|
626
627
|
if (ref) {
|
|
627
628
|
const handlePanelTransitionStart = () => {
|
|
@@ -643,7 +644,7 @@
|
|
|
643
644
|
}
|
|
644
645
|
return;
|
|
645
646
|
}, [isResolvedOpen]);
|
|
646
|
-
|
|
647
|
+
React[isServer ? 'useEffect' : 'useLayoutEffect'](() => {
|
|
647
648
|
if (isResolvedOpen) {
|
|
648
649
|
const previousValue = rootRef.current?.parentElement?.style.paddingBottom;
|
|
649
650
|
const run = () => {
|
|
@@ -682,12 +683,12 @@
|
|
|
682
683
|
|
|
683
684
|
// Do not render on the server
|
|
684
685
|
if (!isMounted()) return null;
|
|
685
|
-
return /*#__PURE__*/
|
|
686
|
+
return /*#__PURE__*/React.createElement(Container, {
|
|
686
687
|
ref: rootRef,
|
|
687
688
|
className: "TanStackRouterDevtools"
|
|
688
|
-
}, /*#__PURE__*/
|
|
689
|
+
}, /*#__PURE__*/React.createElement(ThemeProvider, {
|
|
689
690
|
theme: defaultTheme
|
|
690
|
-
}, /*#__PURE__*/
|
|
691
|
+
}, /*#__PURE__*/React.createElement(TanStackRouterDevtoolsPanel, _extends({
|
|
691
692
|
ref: panelRef
|
|
692
693
|
}, otherPanelProps, {
|
|
693
694
|
router: router,
|
|
@@ -723,7 +724,7 @@
|
|
|
723
724
|
isOpen: isResolvedOpen,
|
|
724
725
|
setIsOpen: setIsOpen,
|
|
725
726
|
handleDragStart: e => handleDragStart(panelRef.current, e)
|
|
726
|
-
})), isResolvedOpen ? /*#__PURE__*/
|
|
727
|
+
})), isResolvedOpen ? /*#__PURE__*/React.createElement(Button, _extends({
|
|
727
728
|
type: "button",
|
|
728
729
|
"aria-label": "Close TanStack Router Devtools"
|
|
729
730
|
}, otherCloseButtonProps, {
|
|
@@ -747,7 +748,7 @@
|
|
|
747
748
|
}),
|
|
748
749
|
...closeButtonStyle
|
|
749
750
|
}
|
|
750
|
-
}), "Close") : null), !isResolvedOpen ? /*#__PURE__*/
|
|
751
|
+
}), "Close") : null), !isResolvedOpen ? /*#__PURE__*/React.createElement("button", _extends({
|
|
751
752
|
type: "button"
|
|
752
753
|
}, otherToggleButtonProps, {
|
|
753
754
|
"aria-label": "Open TanStack Router Devtools",
|
|
@@ -782,7 +783,7 @@
|
|
|
782
783
|
}),
|
|
783
784
|
...toggleButtonStyle
|
|
784
785
|
}
|
|
785
|
-
}), /*#__PURE__*/
|
|
786
|
+
}), /*#__PURE__*/React.createElement(Logo, {
|
|
786
787
|
"aria-hidden": true
|
|
787
788
|
})) : null);
|
|
788
789
|
}
|
|
@@ -795,7 +796,7 @@
|
|
|
795
796
|
const router = useRouter();
|
|
796
797
|
const matches = router.state.status === 'pending' ? router.state.pendingMatches : router.state.matches;
|
|
797
798
|
const match = router.state.matches.find(d => d.routeId === route.id);
|
|
798
|
-
return /*#__PURE__*/
|
|
799
|
+
return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("div", {
|
|
799
800
|
role: "button",
|
|
800
801
|
"aria-label": `Open match details for ${route.id}`,
|
|
801
802
|
onClick: () => {
|
|
@@ -810,7 +811,7 @@
|
|
|
810
811
|
alignItems: 'center',
|
|
811
812
|
background: route.id === activeRouteId ? 'rgba(255,255,255,.1)' : undefined
|
|
812
813
|
}
|
|
813
|
-
}, isRoot ? null : /*#__PURE__*/
|
|
814
|
+
}, isRoot ? null : /*#__PURE__*/React.createElement("div", {
|
|
814
815
|
style: {
|
|
815
816
|
flex: '0 0 auto',
|
|
816
817
|
width: '.7rem',
|
|
@@ -824,7 +825,7 @@
|
|
|
824
825
|
background: getRouteStatusColor(matches, route, defaultTheme),
|
|
825
826
|
opacity: match ? 1 : 0.3
|
|
826
827
|
}
|
|
827
|
-
}), /*#__PURE__*/
|
|
828
|
+
}), /*#__PURE__*/React.createElement(Code, {
|
|
828
829
|
style: {
|
|
829
830
|
flex: '1 0 auto',
|
|
830
831
|
display: 'flex',
|
|
@@ -834,25 +835,25 @@
|
|
|
834
835
|
opacity: match ? 1 : 0.7,
|
|
835
836
|
fontSize: '0.7rem'
|
|
836
837
|
}
|
|
837
|
-
}, /*#__PURE__*/
|
|
838
|
+
}, /*#__PURE__*/React.createElement("span", null, route.path || trimPath(route.id), " "), match ? /*#__PURE__*/React.createElement("span", {
|
|
838
839
|
style: {
|
|
839
840
|
opacity: 0.3
|
|
840
841
|
}
|
|
841
|
-
}, match.id) : null)), route.children?.length ? /*#__PURE__*/
|
|
842
|
+
}, match.id) : null)), route.children?.length ? /*#__PURE__*/React.createElement("div", {
|
|
842
843
|
style: {
|
|
843
844
|
marginLeft: isRoot ? 0 : '1rem',
|
|
844
845
|
borderLeft: isRoot ? '' : `solid 1px ${defaultTheme.grayAlt}`
|
|
845
846
|
}
|
|
846
847
|
}, [...route.children].sort((a, b) => {
|
|
847
848
|
return a.rank - b.rank;
|
|
848
|
-
}).map(r => /*#__PURE__*/
|
|
849
|
+
}).map(r => /*#__PURE__*/React.createElement(RouteComp, {
|
|
849
850
|
key: r.id,
|
|
850
851
|
route: r,
|
|
851
852
|
activeRouteId: activeRouteId,
|
|
852
853
|
setActiveRouteId: setActiveRouteId
|
|
853
854
|
}))) : null);
|
|
854
855
|
}
|
|
855
|
-
const TanStackRouterDevtoolsPanel = /*#__PURE__*/
|
|
856
|
+
const TanStackRouterDevtoolsPanel = /*#__PURE__*/React.forwardRef(function TanStackRouterDevtoolsPanel(props, ref) {
|
|
856
857
|
const {
|
|
857
858
|
isOpen = true,
|
|
858
859
|
setIsOpen,
|
|
@@ -868,7 +869,7 @@
|
|
|
868
869
|
|
|
869
870
|
const [showMatches, setShowMatches] = useLocalStorage('tanstackRouterDevtoolsShowMatches', true);
|
|
870
871
|
const [activeRouteId, setActiveRouteId] = useLocalStorage('tanstackRouterDevtoolsActiveRouteId', '');
|
|
871
|
-
const activeMatch =
|
|
872
|
+
const activeMatch = React.useMemo(() => matches.find(d => d.routeId === activeRouteId), [matches, activeRouteId]);
|
|
872
873
|
const hasSearch = Object.keys(router.state.location.search || {}).length;
|
|
873
874
|
|
|
874
875
|
// const preloadMatches = matches.filter((match) => {
|
|
@@ -886,12 +887,12 @@
|
|
|
886
887
|
// return () => clearInterval(interval)
|
|
887
888
|
// }, [router])
|
|
888
889
|
|
|
889
|
-
return /*#__PURE__*/
|
|
890
|
+
return /*#__PURE__*/React.createElement(ThemeProvider, {
|
|
890
891
|
theme: defaultTheme
|
|
891
|
-
}, /*#__PURE__*/
|
|
892
|
+
}, /*#__PURE__*/React.createElement(Panel, _extends({
|
|
892
893
|
ref: ref,
|
|
893
894
|
className: "TanStackRouterDevtoolsPanel"
|
|
894
|
-
}, panelProps), /*#__PURE__*/
|
|
895
|
+
}, panelProps), /*#__PURE__*/React.createElement("style", {
|
|
895
896
|
dangerouslySetInnerHTML: {
|
|
896
897
|
__html: `
|
|
897
898
|
|
|
@@ -937,7 +938,7 @@
|
|
|
937
938
|
|
|
938
939
|
`
|
|
939
940
|
}
|
|
940
|
-
}), /*#__PURE__*/
|
|
941
|
+
}), /*#__PURE__*/React.createElement("div", {
|
|
941
942
|
style: {
|
|
942
943
|
position: 'absolute',
|
|
943
944
|
left: 0,
|
|
@@ -949,7 +950,7 @@
|
|
|
949
950
|
zIndex: 100000
|
|
950
951
|
},
|
|
951
952
|
onMouseDown: handleDragStart
|
|
952
|
-
}), /*#__PURE__*/
|
|
953
|
+
}), /*#__PURE__*/React.createElement("div", {
|
|
953
954
|
style: {
|
|
954
955
|
flex: '1 1 500px',
|
|
955
956
|
minHeight: '40%',
|
|
@@ -959,7 +960,7 @@
|
|
|
959
960
|
display: 'flex',
|
|
960
961
|
flexDirection: 'column'
|
|
961
962
|
}
|
|
962
|
-
}, /*#__PURE__*/
|
|
963
|
+
}, /*#__PURE__*/React.createElement("div", {
|
|
963
964
|
style: {
|
|
964
965
|
display: 'flex',
|
|
965
966
|
justifyContent: 'start',
|
|
@@ -968,27 +969,27 @@
|
|
|
968
969
|
alignItems: 'center',
|
|
969
970
|
background: defaultTheme.backgroundAlt
|
|
970
971
|
}
|
|
971
|
-
}, /*#__PURE__*/
|
|
972
|
+
}, /*#__PURE__*/React.createElement(Logo, {
|
|
972
973
|
"aria-hidden": true
|
|
973
|
-
}), /*#__PURE__*/
|
|
974
|
+
}), /*#__PURE__*/React.createElement("div", {
|
|
974
975
|
style: {
|
|
975
976
|
fontSize: 'clamp(.8rem, 2vw, 1.3rem)',
|
|
976
977
|
fontWeight: 'bold'
|
|
977
978
|
}
|
|
978
|
-
}, /*#__PURE__*/
|
|
979
|
+
}, /*#__PURE__*/React.createElement("span", {
|
|
979
980
|
style: {
|
|
980
981
|
fontWeight: 100
|
|
981
982
|
}
|
|
982
|
-
}, "Devtools"))), /*#__PURE__*/
|
|
983
|
+
}, "Devtools"))), /*#__PURE__*/React.createElement("div", {
|
|
983
984
|
style: {
|
|
984
985
|
overflowY: 'auto',
|
|
985
986
|
flex: '1'
|
|
986
987
|
}
|
|
987
|
-
}, /*#__PURE__*/
|
|
988
|
+
}, /*#__PURE__*/React.createElement("div", {
|
|
988
989
|
style: {
|
|
989
990
|
padding: '.5em'
|
|
990
991
|
}
|
|
991
|
-
}, /*#__PURE__*/
|
|
992
|
+
}, /*#__PURE__*/React.createElement(Explorer, {
|
|
992
993
|
label: "Router",
|
|
993
994
|
value: router,
|
|
994
995
|
defaultExpanded: {
|
|
@@ -998,7 +999,7 @@
|
|
|
998
999
|
filterSubEntries: subEntries => {
|
|
999
1000
|
return subEntries.filter(d => typeof d.value !== 'function');
|
|
1000
1001
|
}
|
|
1001
|
-
})))), /*#__PURE__*/
|
|
1002
|
+
})))), /*#__PURE__*/React.createElement("div", {
|
|
1002
1003
|
style: {
|
|
1003
1004
|
flex: '1 1 500px',
|
|
1004
1005
|
minHeight: '40%',
|
|
@@ -1008,12 +1009,12 @@
|
|
|
1008
1009
|
display: 'flex',
|
|
1009
1010
|
flexDirection: 'column'
|
|
1010
1011
|
}
|
|
1011
|
-
}, /*#__PURE__*/
|
|
1012
|
+
}, /*#__PURE__*/React.createElement("div", {
|
|
1012
1013
|
style: {
|
|
1013
1014
|
flex: '1 1 auto',
|
|
1014
1015
|
overflowY: 'auto'
|
|
1015
1016
|
}
|
|
1016
|
-
}, /*#__PURE__*/
|
|
1017
|
+
}, /*#__PURE__*/React.createElement("div", {
|
|
1017
1018
|
style: {
|
|
1018
1019
|
padding: '.5em',
|
|
1019
1020
|
background: defaultTheme.backgroundAlt,
|
|
@@ -1025,30 +1026,30 @@
|
|
|
1025
1026
|
gap: '.5rem',
|
|
1026
1027
|
fontWeight: 'bold'
|
|
1027
1028
|
}
|
|
1028
|
-
}, "Pathname", ' ', router.state.location.maskedLocation ? /*#__PURE__*/
|
|
1029
|
+
}, "Pathname", ' ', router.state.location.maskedLocation ? /*#__PURE__*/React.createElement("div", {
|
|
1029
1030
|
style: {
|
|
1030
1031
|
padding: '.1rem .5rem',
|
|
1031
1032
|
background: defaultTheme.warning,
|
|
1032
1033
|
color: 'black',
|
|
1033
1034
|
borderRadius: '.5rem'
|
|
1034
1035
|
}
|
|
1035
|
-
}, "Masked") : null), /*#__PURE__*/
|
|
1036
|
+
}, "Masked") : null), /*#__PURE__*/React.createElement("div", {
|
|
1036
1037
|
style: {
|
|
1037
1038
|
padding: '.5rem',
|
|
1038
1039
|
display: 'flex',
|
|
1039
1040
|
gap: '.5rem',
|
|
1040
1041
|
alignItems: 'center'
|
|
1041
1042
|
}
|
|
1042
|
-
}, /*#__PURE__*/
|
|
1043
|
+
}, /*#__PURE__*/React.createElement("code", {
|
|
1043
1044
|
style: {
|
|
1044
1045
|
opacity: 0.6
|
|
1045
1046
|
}
|
|
1046
|
-
}, router.state.location.pathname), router.state.location.maskedLocation ? /*#__PURE__*/
|
|
1047
|
+
}, router.state.location.pathname), router.state.location.maskedLocation ? /*#__PURE__*/React.createElement("code", {
|
|
1047
1048
|
style: {
|
|
1048
1049
|
color: defaultTheme.warning,
|
|
1049
1050
|
fontWeight: 'bold'
|
|
1050
1051
|
}
|
|
1051
|
-
}, router.state.location.maskedLocation.pathname) : null), /*#__PURE__*/
|
|
1052
|
+
}, router.state.location.maskedLocation.pathname) : null), /*#__PURE__*/React.createElement("div", {
|
|
1052
1053
|
style: {
|
|
1053
1054
|
padding: '.5em',
|
|
1054
1055
|
background: defaultTheme.backgroundAlt,
|
|
@@ -1060,7 +1061,7 @@
|
|
|
1060
1061
|
gap: '.5rem',
|
|
1061
1062
|
fontWeight: 'bold'
|
|
1062
1063
|
}
|
|
1063
|
-
}, /*#__PURE__*/
|
|
1064
|
+
}, /*#__PURE__*/React.createElement("button", {
|
|
1064
1065
|
type: "button",
|
|
1065
1066
|
onClick: () => {
|
|
1066
1067
|
setShowMatches(false);
|
|
@@ -1074,7 +1075,7 @@
|
|
|
1074
1075
|
color: 'inherit',
|
|
1075
1076
|
cursor: 'pointer'
|
|
1076
1077
|
}
|
|
1077
|
-
}, "Routes"), "/", /*#__PURE__*/
|
|
1078
|
+
}, "Routes"), "/", /*#__PURE__*/React.createElement("button", {
|
|
1078
1079
|
type: "button",
|
|
1079
1080
|
onClick: () => {
|
|
1080
1081
|
setShowMatches(true);
|
|
@@ -1088,13 +1089,13 @@
|
|
|
1088
1089
|
color: 'inherit',
|
|
1089
1090
|
cursor: 'pointer'
|
|
1090
1091
|
}
|
|
1091
|
-
}, "Matches")), !showMatches ? /*#__PURE__*/
|
|
1092
|
+
}, "Matches")), !showMatches ? /*#__PURE__*/React.createElement(RouteComp, {
|
|
1092
1093
|
route: router.routeTree,
|
|
1093
1094
|
isRoot: true,
|
|
1094
1095
|
activeRouteId: activeRouteId,
|
|
1095
1096
|
setActiveRouteId: setActiveRouteId
|
|
1096
|
-
}) : /*#__PURE__*/
|
|
1097
|
-
return /*#__PURE__*/
|
|
1097
|
+
}) : /*#__PURE__*/React.createElement("div", null, (router.state.status === 'pending' ? router.state.pendingMatches : router.state.matches).map((match, i) => {
|
|
1098
|
+
return /*#__PURE__*/React.createElement("div", {
|
|
1098
1099
|
key: match.routeId || i,
|
|
1099
1100
|
role: "button",
|
|
1100
1101
|
"aria-label": `Open match details for ${match.routeId}`,
|
|
@@ -1106,7 +1107,7 @@
|
|
|
1106
1107
|
alignItems: 'center',
|
|
1107
1108
|
background: match === activeMatch ? 'rgba(255,255,255,.1)' : undefined
|
|
1108
1109
|
}
|
|
1109
|
-
}, /*#__PURE__*/
|
|
1110
|
+
}, /*#__PURE__*/React.createElement("div", {
|
|
1110
1111
|
style: {
|
|
1111
1112
|
flex: '0 0 auto',
|
|
1112
1113
|
width: '1.3rem',
|
|
@@ -1119,13 +1120,13 @@
|
|
|
1119
1120
|
borderRadius: '.25rem',
|
|
1120
1121
|
transition: 'all .2s ease-out'
|
|
1121
1122
|
}
|
|
1122
|
-
}), /*#__PURE__*/
|
|
1123
|
+
}), /*#__PURE__*/React.createElement(Code, {
|
|
1123
1124
|
style: {
|
|
1124
1125
|
padding: '.5em',
|
|
1125
1126
|
fontSize: '0.7rem'
|
|
1126
1127
|
}
|
|
1127
1128
|
}, `${match.id}`));
|
|
1128
|
-
})))), activeMatch ? /*#__PURE__*/
|
|
1129
|
+
})))), activeMatch ? /*#__PURE__*/React.createElement(ActivePanel, null, /*#__PURE__*/React.createElement("div", {
|
|
1129
1130
|
style: {
|
|
1130
1131
|
padding: '.5em',
|
|
1131
1132
|
background: defaultTheme.backgroundAlt,
|
|
@@ -1134,23 +1135,23 @@
|
|
|
1134
1135
|
bottom: 0,
|
|
1135
1136
|
zIndex: 1
|
|
1136
1137
|
}
|
|
1137
|
-
}, "Match Details"), /*#__PURE__*/
|
|
1138
|
+
}, "Match Details"), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("table", null, /*#__PURE__*/React.createElement("tbody", null, /*#__PURE__*/React.createElement("tr", null, /*#__PURE__*/React.createElement("td", {
|
|
1138
1139
|
style: {
|
|
1139
1140
|
opacity: '.5'
|
|
1140
1141
|
}
|
|
1141
|
-
}, "ID"), /*#__PURE__*/
|
|
1142
|
+
}, "ID"), /*#__PURE__*/React.createElement("td", null, /*#__PURE__*/React.createElement(Code, {
|
|
1142
1143
|
style: {
|
|
1143
1144
|
lineHeight: '1.8em'
|
|
1144
1145
|
}
|
|
1145
|
-
}, JSON.stringify(activeMatch.id, null, 2)))), /*#__PURE__*/
|
|
1146
|
+
}, JSON.stringify(activeMatch.id, null, 2)))), /*#__PURE__*/React.createElement("tr", null, /*#__PURE__*/React.createElement("td", {
|
|
1146
1147
|
style: {
|
|
1147
1148
|
opacity: '.5'
|
|
1148
1149
|
}
|
|
1149
|
-
}, "Status"), /*#__PURE__*/
|
|
1150
|
+
}, "Status"), /*#__PURE__*/React.createElement("td", null, activeMatch.status)), /*#__PURE__*/React.createElement("tr", null, /*#__PURE__*/React.createElement("td", {
|
|
1150
1151
|
style: {
|
|
1151
1152
|
opacity: '.5'
|
|
1152
1153
|
}
|
|
1153
|
-
}, "Last Updated"), /*#__PURE__*/
|
|
1154
|
+
}, "Last Updated"), /*#__PURE__*/React.createElement("td", null, activeMatch.updatedAt ? new Date(activeMatch.updatedAt).toLocaleTimeString() : 'N/A'))))), activeMatch.loaderData ? /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
|
|
1154
1155
|
style: {
|
|
1155
1156
|
background: defaultTheme.backgroundAlt,
|
|
1156
1157
|
padding: '.5em',
|
|
@@ -1159,15 +1160,15 @@
|
|
|
1159
1160
|
bottom: 0,
|
|
1160
1161
|
zIndex: 1
|
|
1161
1162
|
}
|
|
1162
|
-
}, "Loader Data"), /*#__PURE__*/
|
|
1163
|
+
}, "Loader Data"), /*#__PURE__*/React.createElement("div", {
|
|
1163
1164
|
style: {
|
|
1164
1165
|
padding: '.5em'
|
|
1165
1166
|
}
|
|
1166
|
-
}, /*#__PURE__*/
|
|
1167
|
+
}, /*#__PURE__*/React.createElement(Explorer, {
|
|
1167
1168
|
label: "loaderData",
|
|
1168
1169
|
value: activeMatch.loaderData,
|
|
1169
1170
|
defaultExpanded: {}
|
|
1170
|
-
}))) : null, /*#__PURE__*/
|
|
1171
|
+
}))) : null, /*#__PURE__*/React.createElement("div", {
|
|
1171
1172
|
style: {
|
|
1172
1173
|
background: defaultTheme.backgroundAlt,
|
|
1173
1174
|
padding: '.5em',
|
|
@@ -1176,15 +1177,15 @@
|
|
|
1176
1177
|
bottom: 0,
|
|
1177
1178
|
zIndex: 1
|
|
1178
1179
|
}
|
|
1179
|
-
}, "Explorer"), /*#__PURE__*/
|
|
1180
|
+
}, "Explorer"), /*#__PURE__*/React.createElement("div", {
|
|
1180
1181
|
style: {
|
|
1181
1182
|
padding: '.5em'
|
|
1182
1183
|
}
|
|
1183
|
-
}, /*#__PURE__*/
|
|
1184
|
+
}, /*#__PURE__*/React.createElement(Explorer, {
|
|
1184
1185
|
label: "Match",
|
|
1185
1186
|
value: activeMatch,
|
|
1186
1187
|
defaultExpanded: {}
|
|
1187
|
-
}))) : null, hasSearch ? /*#__PURE__*/
|
|
1188
|
+
}))) : null, hasSearch ? /*#__PURE__*/React.createElement("div", {
|
|
1188
1189
|
style: {
|
|
1189
1190
|
flex: '1 1 500px',
|
|
1190
1191
|
minHeight: '40%',
|
|
@@ -1194,7 +1195,7 @@
|
|
|
1194
1195
|
display: 'flex',
|
|
1195
1196
|
flexDirection: 'column'
|
|
1196
1197
|
}
|
|
1197
|
-
}, /*#__PURE__*/
|
|
1198
|
+
}, /*#__PURE__*/React.createElement("div", {
|
|
1198
1199
|
style: {
|
|
1199
1200
|
padding: '.5em',
|
|
1200
1201
|
background: defaultTheme.backgroundAlt,
|
|
@@ -1204,11 +1205,11 @@
|
|
|
1204
1205
|
zIndex: 1,
|
|
1205
1206
|
fontWeight: 'bold'
|
|
1206
1207
|
}
|
|
1207
|
-
}, "Search Params"), /*#__PURE__*/
|
|
1208
|
+
}, "Search Params"), /*#__PURE__*/React.createElement("div", {
|
|
1208
1209
|
style: {
|
|
1209
1210
|
padding: '.5em'
|
|
1210
1211
|
}
|
|
1211
|
-
}, /*#__PURE__*/
|
|
1212
|
+
}, /*#__PURE__*/React.createElement(Explorer, {
|
|
1212
1213
|
value: router.state.location.search || {},
|
|
1213
1214
|
defaultExpanded: Object.keys(router.state.location.search || {}).reduce((obj, next) => {
|
|
1214
1215
|
obj[next] = {};
|
|
@@ -1220,7 +1221,5 @@
|
|
|
1220
1221
|
exports.TanStackRouterDevtools = TanStackRouterDevtools;
|
|
1221
1222
|
exports.TanStackRouterDevtoolsPanel = TanStackRouterDevtoolsPanel;
|
|
1222
1223
|
|
|
1223
|
-
Object.defineProperty(exports, '__esModule', { value: true });
|
|
1224
|
-
|
|
1225
1224
|
}));
|
|
1226
1225
|
//# sourceMappingURL=index.development.js.map
|