@tanstack/router-devtools 1.1.2 → 1.1.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/build/cjs/utils.js +5 -1
- package/build/cjs/utils.js.map +1 -1
- package/build/esm/index.js +5 -1
- package/build/esm/index.js.map +1 -1
- package/build/stats-html.html +1 -1
- package/build/stats-react.json +180 -180
- package/build/umd/index.development.js +5 -1
- package/build/umd/index.development.js.map +1 -1
- package/build/umd/index.production.js +1 -1
- package/build/umd/index.production.js.map +1 -1
- package/package.json +2 -2
- package/src/utils.ts +5 -2
package/build/cjs/utils.js
CHANGED
|
@@ -66,7 +66,11 @@ function useIsMounted() {
|
|
|
66
66
|
const displayValue = value => {
|
|
67
67
|
const name = Object.getOwnPropertyNames(Object(value));
|
|
68
68
|
const newValue = typeof value === 'bigint' ? `${value.toString()}n` : value;
|
|
69
|
-
|
|
69
|
+
try {
|
|
70
|
+
return JSON.stringify(newValue, name);
|
|
71
|
+
} catch (e) {
|
|
72
|
+
return `unable to stringify`;
|
|
73
|
+
}
|
|
70
74
|
};
|
|
71
75
|
|
|
72
76
|
/**
|
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 { 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
|
|
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 try {\n return JSON.stringify(newValue, name)\n } catch (e) {\n return `unable to stringify`\n }\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","e","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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"}
|
package/build/esm/index.js
CHANGED
|
@@ -177,7 +177,11 @@ function useIsMounted() {
|
|
|
177
177
|
const displayValue = value => {
|
|
178
178
|
const name = Object.getOwnPropertyNames(Object(value));
|
|
179
179
|
const newValue = typeof value === 'bigint' ? `${value.toString()}n` : value;
|
|
180
|
-
|
|
180
|
+
try {
|
|
181
|
+
return JSON.stringify(newValue, name);
|
|
182
|
+
} catch (e) {
|
|
183
|
+
return `unable to stringify`;
|
|
184
|
+
}
|
|
181
185
|
};
|
|
182
186
|
|
|
183
187
|
/**
|