@tanstack/router-devtools 0.0.1-beta.99 → 1.0.0
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/LICENSE +1 -1
- package/build/cjs/Explorer.js +10 -8
- package/build/cjs/Explorer.js.map +1 -1
- package/build/cjs/_virtual/_rollupPluginBabelHelpers.js +2 -4
- package/build/cjs/_virtual/_rollupPluginBabelHelpers.js.map +1 -1
- package/build/cjs/devtools.js +351 -106
- package/build/cjs/devtools.js.map +1 -1
- package/build/cjs/index.js +1 -3
- package/build/cjs/index.js.map +1 -1
- package/build/cjs/styledComponents.js +1 -4
- package/build/cjs/styledComponents.js.map +1 -1
- package/build/cjs/theme.js +10 -16
- package/build/cjs/theme.js.map +1 -1
- package/build/cjs/useLocalStorage.js +5 -9
- package/build/cjs/useLocalStorage.js.map +1 -1
- package/build/cjs/useMediaQuery.js +4 -8
- package/build/cjs/useMediaQuery.js.map +1 -1
- package/build/cjs/utils.js +36 -16
- package/build/cjs/utils.js.map +1 -1
- package/build/esm/index.js +342 -65
- package/build/esm/index.js.map +1 -1
- package/build/stats-html.html +3494 -2700
- package/build/stats-react.json +393 -147
- package/build/types/Explorer.d.ts +10 -4
- package/build/types/devtools.d.ts +1 -1
- package/build/types/index.d.ts +77 -1
- package/build/types/styledComponents.d.ts +3 -3
- package/build/types/theme.d.ts +13 -13
- package/build/types/utils.d.ts +3 -2
- package/build/umd/index.development.js +662 -145
- package/build/umd/index.development.js.map +1 -1
- package/build/umd/index.production.js +4 -14
- package/build/umd/index.production.js.map +1 -1
- package/package.json +2 -3
- package/src/Explorer.tsx +5 -0
- package/src/devtools.tsx +574 -287
- package/src/theme.tsx +6 -6
- package/src/utils.ts +14 -4
package/build/cjs/utils.js
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
/**
|
|
2
|
-
* router-devtools
|
|
2
|
+
* @tanstack/router-devtools/src/index.tsx
|
|
3
3
|
*
|
|
4
4
|
* Copyright (c) TanStack
|
|
5
5
|
*
|
|
@@ -10,34 +10,33 @@
|
|
|
10
10
|
*/
|
|
11
11
|
'use strict';
|
|
12
12
|
|
|
13
|
-
Object.defineProperty(exports, '__esModule', { value: true });
|
|
14
|
-
|
|
15
13
|
var React = require('react');
|
|
16
14
|
var theme = require('./theme.js');
|
|
17
15
|
var useMediaQuery = require('./useMediaQuery.js');
|
|
18
16
|
|
|
19
|
-
function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
|
|
20
|
-
|
|
21
|
-
var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
|
|
22
|
-
|
|
23
17
|
const isServer = typeof window === 'undefined';
|
|
24
18
|
function getStatusColor(match, theme) {
|
|
25
|
-
return match.
|
|
19
|
+
return match.status === 'pending' || match.isFetching ? theme.active : match.status === 'error' ? theme.danger : match.status === 'success' ? theme.success : theme.gray;
|
|
20
|
+
}
|
|
21
|
+
function getRouteStatusColor(matches, route, theme) {
|
|
22
|
+
const found = matches.find(d => d.routeId === route.id);
|
|
23
|
+
if (!found) return theme.gray;
|
|
24
|
+
return getStatusColor(found, theme);
|
|
26
25
|
}
|
|
27
26
|
function styled(type, newStyles, queries = {}) {
|
|
28
|
-
return /*#__PURE__*/
|
|
27
|
+
return /*#__PURE__*/React.forwardRef(({
|
|
29
28
|
style,
|
|
30
29
|
...rest
|
|
31
30
|
}, ref) => {
|
|
32
31
|
const theme$1 = theme.useTheme();
|
|
33
32
|
const mediaStyles = Object.entries(queries).reduce((current, [key, value]) => {
|
|
34
33
|
// eslint-disable-next-line react-hooks/rules-of-hooks
|
|
35
|
-
return useMediaQuery
|
|
34
|
+
return useMediaQuery.default(key) ? {
|
|
36
35
|
...current,
|
|
37
36
|
...(typeof value === 'function' ? value(rest, theme$1) : value)
|
|
38
37
|
} : current;
|
|
39
38
|
}, {});
|
|
40
|
-
return /*#__PURE__*/
|
|
39
|
+
return /*#__PURE__*/React.createElement(type, {
|
|
41
40
|
...rest,
|
|
42
41
|
style: {
|
|
43
42
|
...(typeof newStyles === 'function' ? newStyles(rest, theme$1) : newStyles),
|
|
@@ -49,9 +48,9 @@ function styled(type, newStyles, queries = {}) {
|
|
|
49
48
|
});
|
|
50
49
|
}
|
|
51
50
|
function useIsMounted() {
|
|
52
|
-
const mountedRef =
|
|
53
|
-
const isMounted =
|
|
54
|
-
|
|
51
|
+
const mountedRef = React.useRef(false);
|
|
52
|
+
const isMounted = React.useCallback(() => mountedRef.current, []);
|
|
53
|
+
React[isServer ? 'useEffect' : 'useLayoutEffect'](() => {
|
|
55
54
|
mountedRef.current = true;
|
|
56
55
|
return () => {
|
|
57
56
|
mountedRef.current = false;
|
|
@@ -77,8 +76,8 @@ const displayValue = value => {
|
|
|
77
76
|
*/
|
|
78
77
|
function useSafeState(initialState) {
|
|
79
78
|
const isMounted = useIsMounted();
|
|
80
|
-
const [state, setState] =
|
|
81
|
-
const safeSetState =
|
|
79
|
+
const [state, setState] = React.useState(initialState);
|
|
80
|
+
const safeSetState = React.useCallback(value => {
|
|
82
81
|
scheduleMicrotask(() => {
|
|
83
82
|
if (isMounted()) {
|
|
84
83
|
setState(value);
|
|
@@ -97,10 +96,31 @@ function scheduleMicrotask(callback) {
|
|
|
97
96
|
throw error;
|
|
98
97
|
}));
|
|
99
98
|
}
|
|
99
|
+
function multiSortBy(arr, accessors = [d => d]) {
|
|
100
|
+
return arr.map((d, i) => [d, i]).sort(([a, ai], [b, bi]) => {
|
|
101
|
+
for (const accessor of accessors) {
|
|
102
|
+
const ao = accessor(a);
|
|
103
|
+
const bo = accessor(b);
|
|
104
|
+
if (typeof ao === 'undefined') {
|
|
105
|
+
if (typeof bo === 'undefined') {
|
|
106
|
+
continue;
|
|
107
|
+
}
|
|
108
|
+
return 1;
|
|
109
|
+
}
|
|
110
|
+
if (ao === bo) {
|
|
111
|
+
continue;
|
|
112
|
+
}
|
|
113
|
+
return ao > bo ? 1 : -1;
|
|
114
|
+
}
|
|
115
|
+
return ai - bi;
|
|
116
|
+
}).map(([d]) => d);
|
|
117
|
+
}
|
|
100
118
|
|
|
101
119
|
exports.displayValue = displayValue;
|
|
120
|
+
exports.getRouteStatusColor = getRouteStatusColor;
|
|
102
121
|
exports.getStatusColor = getStatusColor;
|
|
103
122
|
exports.isServer = isServer;
|
|
123
|
+
exports.multiSortBy = multiSortBy;
|
|
104
124
|
exports.styled = styled;
|
|
105
125
|
exports.useIsMounted = useIsMounted;
|
|
106
126
|
exports.useSafeState = useSafeState;
|
package/build/cjs/utils.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"utils.js","sources":["../../src/utils.ts"],"sourcesContent":["import React from 'react'\nimport {
|
|
1
|
+
{"version":3,"file":"utils.js","sources":["../../src/utils.ts"],"sourcesContent":["import React from 'react'\nimport { AnyRootRoute, AnyRoute, AnyRouteMatch } from '@tanstack/react-router'\n\nimport { Theme, useTheme } from './theme'\nimport useMediaQuery from './useMediaQuery'\n\nexport const isServer = typeof window === 'undefined'\n\ntype StyledComponent<T> = T extends 'button'\n ? React.DetailedHTMLProps<\n React.ButtonHTMLAttributes<HTMLButtonElement>,\n HTMLButtonElement\n >\n : T extends 'input'\n ? React.DetailedHTMLProps<\n React.InputHTMLAttributes<HTMLInputElement>,\n HTMLInputElement\n >\n : T extends 'select'\n ? React.DetailedHTMLProps<\n React.SelectHTMLAttributes<HTMLSelectElement>,\n HTMLSelectElement\n >\n : T extends keyof HTMLElementTagNameMap\n ? React.HTMLAttributes<HTMLElementTagNameMap[T]>\n : never\n\nexport function getStatusColor(match: AnyRouteMatch, theme: Theme) {\n return match.status === 'pending' || match.isFetching\n ? theme.active\n : match.status === 'error'\n ? theme.danger\n : match.status === 'success'\n ? theme.success\n : theme.gray\n}\n\nexport function getRouteStatusColor(\n matches: AnyRouteMatch[],\n route: AnyRoute | AnyRootRoute,\n theme: Theme,\n) {\n const found = matches.find((d) => d.routeId === route.id)\n if (!found) return theme.gray\n return getStatusColor(found, theme)\n}\n\ntype Styles =\n | React.CSSProperties\n | ((props: Record<string, any>, theme: Theme) => React.CSSProperties)\n\nexport function styled<T extends keyof HTMLElementTagNameMap>(\n type: T,\n newStyles: Styles,\n queries: Record<string, Styles> = {},\n) {\n return React.forwardRef<HTMLElementTagNameMap[T], StyledComponent<T>>(\n ({ style, ...rest }, ref) => {\n const theme = useTheme()\n\n const mediaStyles = Object.entries(queries).reduce(\n (current, [key, value]) => {\n // eslint-disable-next-line react-hooks/rules-of-hooks\n return useMediaQuery(key)\n ? {\n ...current,\n ...(typeof value === 'function' ? value(rest, theme) : value),\n }\n : current\n },\n {},\n )\n\n return React.createElement(type, {\n ...rest,\n style: {\n ...(typeof newStyles === 'function'\n ? newStyles(rest, theme)\n : newStyles),\n ...style,\n ...mediaStyles,\n },\n ref,\n })\n },\n )\n}\n\nexport function useIsMounted() {\n const mountedRef = React.useRef(false)\n const isMounted = React.useCallback(() => mountedRef.current, [])\n\n React[isServer ? 'useEffect' : 'useLayoutEffect'](() => {\n mountedRef.current = true\n return () => {\n mountedRef.current = false\n }\n }, [])\n\n return isMounted\n}\n\n/**\n * Displays a string regardless the type of the data\n * @param {unknown} value Value to be stringified\n */\nexport const displayValue = (value: unknown) => {\n const name = Object.getOwnPropertyNames(Object(value))\n const newValue = typeof value === 'bigint' ? `${value.toString()}n` : value\n\n return JSON.stringify(newValue, name)\n}\n\n/**\n * This hook is a safe useState version which schedules state updates in microtasks\n * to prevent updating a component state while React is rendering different components\n * or when the component is not mounted anymore.\n */\nexport function useSafeState<T>(initialState: T): [T, (value: T) => void] {\n const isMounted = useIsMounted()\n const [state, setState] = React.useState(initialState)\n\n const safeSetState = React.useCallback(\n (value: T) => {\n scheduleMicrotask(() => {\n if (isMounted()) {\n setState(value)\n }\n })\n },\n [isMounted],\n )\n\n return [state, safeSetState]\n}\n\n/**\n * Schedules a microtask.\n * This can be useful to schedule state updates after rendering.\n */\nfunction scheduleMicrotask(callback: () => void) {\n Promise.resolve()\n .then(callback)\n .catch((error) =>\n setTimeout(() => {\n throw error\n }),\n )\n}\n\nexport function multiSortBy<T>(\n arr: T[],\n accessors: ((item: T) => any)[] = [(d) => d],\n): T[] {\n return arr\n .map((d, i) => [d, i] as const)\n .sort(([a, ai], [b, bi]) => {\n for (const accessor of accessors) {\n const ao = accessor(a)\n const bo = accessor(b)\n\n if (typeof ao === 'undefined') {\n if (typeof bo === 'undefined') {\n continue\n }\n return 1\n }\n\n if (ao === bo) {\n continue\n }\n\n return ao > bo ? 1 : -1\n }\n\n return ai - bi\n })\n .map(([d]) => d)\n}\n"],"names":["isServer","window","getStatusColor","match","theme","status","isFetching","active","danger","success","gray","getRouteStatusColor","matches","route","found","find","d","routeId","id","styled","type","newStyles","queries","React","forwardRef","style","rest","ref","useTheme","mediaStyles","Object","entries","reduce","current","key","value","useMediaQuery","createElement","useIsMounted","mountedRef","useRef","isMounted","useCallback","displayValue","name","getOwnPropertyNames","newValue","toString","JSON","stringify","useSafeState","initialState","state","setState","useState","safeSetState","scheduleMicrotask","callback","Promise","resolve","then","catch","error","setTimeout","multiSortBy","arr","accessors","map","i","sort","a","ai","b","bi","accessor","ao","bo"],"mappings":"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"}
|