@tanstack/router-devtools
Advanced tools
Comparing version 0.0.1-beta.142 to 0.0.1-beta.143
@@ -274,7 +274,10 @@ /** | ||
isRoot, | ||
matches, | ||
router: router$1, | ||
activeRouteId, | ||
setActiveRouteId | ||
activeMatchId, | ||
setActiveRouteId, | ||
setActiveMatchId | ||
}) { | ||
const match = matches.find(d => d.routeId === route.id); | ||
const matches = Object.values(router$1.state.matchesById); | ||
const match = router$1.state.matches.find(d => d.routeId === route.id); | ||
return /*#__PURE__*/React__default["default"].createElement("div", null, /*#__PURE__*/React__default["default"].createElement("div", { | ||
@@ -284,3 +287,6 @@ role: "button", | ||
onClick: () => { | ||
if (match) setActiveRouteId(activeRouteId === route.id ? '' : route.id); | ||
if (match) { | ||
setActiveRouteId(activeRouteId === route.id ? '' : route.id); | ||
setActiveMatchId(match.id); | ||
} | ||
}, | ||
@@ -305,3 +311,3 @@ style: { | ||
transition: 'all .2s ease-out', | ||
background: utils.getRouteStatusColor(matches, route, theme.defaultTheme), | ||
background: utils.getRouteStatusColor(matches, route, theme.defaultTheme, router$1), | ||
opacity: match ? 1 : 0.3 | ||
@@ -316,3 +322,4 @@ } | ||
paddingLeft: isRoot ? '.5rem' : 0, | ||
opacity: match ? 1 : 0.7 | ||
opacity: match ? 1 : 0.7, | ||
fontSize: '0.7rem' | ||
} | ||
@@ -333,5 +340,7 @@ }, /*#__PURE__*/React__default["default"].createElement("span", null, route.path || router.trimPath(route.id), " "), match ? /*#__PURE__*/React__default["default"].createElement("span", { | ||
route: r, | ||
matches: matches, | ||
router: router$1, | ||
activeRouteId: activeRouteId, | ||
setActiveRouteId: setActiveRouteId | ||
activeMatchId: activeMatchId, | ||
setActiveRouteId: setActiveRouteId, | ||
setActiveMatchId: setActiveMatchId | ||
}))) : null); | ||
@@ -353,5 +362,14 @@ } | ||
const [activeRouteId, setActiveRouteId] = useLocalStorage["default"]('tanstackRouterDevtoolsActiveRouteId', ''); | ||
const allMatches = React__default["default"].useMemo(() => [...Object.values(router$1.state.matches)], [router$1.state.matches]); | ||
const activeMatch = allMatches?.find(d => d.routeId === activeRouteId); | ||
const [activeMatchId, setActiveMatchId] = useLocalStorage["default"]('tanstackRouterDevtoolsActiveMatchId', ''); | ||
const activeMatch = React__default["default"].useMemo(() => router$1.state.matchesById[activeRouteId] || router$1.state.matchesById[activeMatchId], [activeRouteId, activeMatchId]); | ||
const hasSearch = Object.keys(router$1.state.location.search || {}).length; | ||
const preloadMatches = Object.values(router$1.state.matchesById).filter(match => { | ||
return !router$1.state.matchIds.includes(match.id) && !router$1.state.pendingMatchIds.includes(match.id); | ||
}); | ||
React__default["default"].useEffect(() => { | ||
const interval = setInterval(() => { | ||
router$1.cleanMatches(); | ||
}, 1000); | ||
return () => clearInterval(interval); | ||
}, [router$1]); | ||
return /*#__PURE__*/React__default["default"].createElement(theme.ThemeProvider, { | ||
@@ -481,2 +499,7 @@ theme: theme.defaultTheme | ||
style: { | ||
flex: '1 1 auto', | ||
overflowY: 'auto' | ||
} | ||
}, /*#__PURE__*/React__default["default"].createElement("div", { | ||
style: { | ||
padding: '.5em', | ||
@@ -521,6 +544,8 @@ background: theme.defaultTheme.backgroundAlt, | ||
route: router$1.routeTree, | ||
router: router$1, | ||
isRoot: true, | ||
matches: allMatches, | ||
activeRouteId: activeRouteId, | ||
setActiveRouteId: setActiveRouteId | ||
activeMatchId: activeMatchId, | ||
setActiveRouteId: setActiveRouteId, | ||
setActiveMatchId: setActiveMatchId | ||
}) : /*#__PURE__*/React__default["default"].createElement("div", null, router$1.state.matches.map((match, i) => { | ||
@@ -545,3 +570,3 @@ return /*#__PURE__*/React__default["default"].createElement("div", { | ||
marginLeft: '.25rem', | ||
background: utils.getStatusColor(match, theme.defaultTheme), | ||
background: utils.getStatusColor(match, theme.defaultTheme, router$1), | ||
alignItems: 'center', | ||
@@ -555,7 +580,14 @@ justifyContent: 'center', | ||
style: { | ||
padding: '.5em' | ||
padding: '.5em', | ||
fontSize: '0.7rem' | ||
} | ||
}, `${match.id}`)); | ||
}))), activeMatch ? /*#__PURE__*/React__default["default"].createElement(styledComponents.ActivePanel, null, /*#__PURE__*/React__default["default"].createElement("div", { | ||
}))), preloadMatches?.length ? /*#__PURE__*/React__default["default"].createElement("div", { | ||
style: { | ||
flex: '1 1 auto', | ||
overflowY: 'auto', | ||
maxHeight: '50%' | ||
} | ||
}, /*#__PURE__*/React__default["default"].createElement("div", { | ||
style: { | ||
padding: '.5em', | ||
@@ -565,2 +597,45 @@ background: theme.defaultTheme.backgroundAlt, | ||
top: 0, | ||
zIndex: 1, | ||
display: 'flex', | ||
alignItems: 'center', | ||
gap: '.5rem' | ||
} | ||
}, "Preloaded Matches"), preloadMatches.map(match => { | ||
return /*#__PURE__*/React__default["default"].createElement("div", { | ||
key: match.id, | ||
role: "button", | ||
"aria-label": `Open match details for ${match.routeId}`, | ||
onClick: () => setActiveMatchId(activeMatchId === match.id ? '' : match.id), | ||
style: { | ||
display: 'flex', | ||
borderBottom: `solid 1px ${theme.defaultTheme.grayAlt}`, | ||
cursor: 'pointer', | ||
alignItems: 'center', | ||
background: match === activeMatch ? 'rgba(255,255,255,.1)' : undefined | ||
} | ||
}, /*#__PURE__*/React__default["default"].createElement("div", { | ||
style: { | ||
flex: '0 0 auto', | ||
width: '1.3rem', | ||
height: '1.3rem', | ||
marginLeft: '.25rem', | ||
background: utils.getStatusColor(match, theme.defaultTheme, router$1), | ||
alignItems: 'center', | ||
justifyContent: 'center', | ||
fontWeight: 'bold', | ||
borderRadius: '.25rem', | ||
transition: 'all .2s ease-out' | ||
} | ||
}), /*#__PURE__*/React__default["default"].createElement(styledComponents.Code, { | ||
style: { | ||
padding: '.5em', | ||
fontSize: '0.7rem' | ||
} | ||
}, `${match.id}`)); | ||
})) : null), activeMatch ? /*#__PURE__*/React__default["default"].createElement(styledComponents.ActivePanel, null, /*#__PURE__*/React__default["default"].createElement("div", { | ||
style: { | ||
padding: '.5em', | ||
background: theme.defaultTheme.backgroundAlt, | ||
position: 'sticky', | ||
top: 0, | ||
bottom: 0, | ||
@@ -567,0 +642,0 @@ zIndex: 1 |
@@ -24,8 +24,11 @@ /** | ||
const isServer = typeof window === 'undefined'; | ||
function getStatusColor(match, theme) { | ||
return match.status === 'pending' ? theme.active : match.status === 'error' ? theme.danger : match.status === 'success' ? theme.success : theme.gray; | ||
function getStatusColor(match, theme, router) { | ||
return match.status === 'pending' || match.isFetching ? theme.active : router.getIsInvalid({ | ||
matchId: match.id | ||
}) ? theme.warning : match.status === 'error' ? theme.danger : match.status === 'success' ? theme.success : theme.gray; | ||
} | ||
function getRouteStatusColor(matches, route, theme) { | ||
function getRouteStatusColor(matches, route, theme, router) { | ||
const found = matches.find(d => d.routeId === route.id); | ||
return found ? found.status === 'pending' ? theme.active : found.status === 'error' ? theme.danger : found.status === 'success' ? theme.success : theme.gray : theme.gray; | ||
if (!found) return theme.gray; | ||
return getStatusColor(found, theme, router); | ||
} | ||
@@ -32,0 +35,0 @@ function styled(type, newStyles, queries = {}) { |
@@ -129,8 +129,11 @@ /** | ||
const isServer$1 = typeof window === 'undefined'; | ||
function getStatusColor(match, theme) { | ||
return match.status === 'pending' ? theme.active : match.status === 'error' ? theme.danger : match.status === 'success' ? theme.success : theme.gray; | ||
function getStatusColor(match, theme, router) { | ||
return match.status === 'pending' || match.isFetching ? theme.active : router.getIsInvalid({ | ||
matchId: match.id | ||
}) ? theme.warning : match.status === 'error' ? theme.danger : match.status === 'success' ? theme.success : theme.gray; | ||
} | ||
function getRouteStatusColor(matches, route, theme) { | ||
function getRouteStatusColor(matches, route, theme, router) { | ||
const found = matches.find(d => d.routeId === route.id); | ||
return found ? found.status === 'pending' ? theme.active : found.status === 'error' ? theme.danger : found.status === 'success' ? theme.success : theme.gray : theme.gray; | ||
if (!found) return theme.gray; | ||
return getStatusColor(found, theme, router); | ||
} | ||
@@ -684,7 +687,10 @@ function styled(type, newStyles, queries = {}) { | ||
isRoot, | ||
matches, | ||
router, | ||
activeRouteId, | ||
setActiveRouteId | ||
activeMatchId, | ||
setActiveRouteId, | ||
setActiveMatchId | ||
}) { | ||
const match = matches.find(d => d.routeId === route.id); | ||
const matches = Object.values(router.state.matchesById); | ||
const match = router.state.matches.find(d => d.routeId === route.id); | ||
return /*#__PURE__*/React__default.createElement("div", null, /*#__PURE__*/React__default.createElement("div", { | ||
@@ -694,3 +700,6 @@ role: "button", | ||
onClick: () => { | ||
if (match) setActiveRouteId(activeRouteId === route.id ? '' : route.id); | ||
if (match) { | ||
setActiveRouteId(activeRouteId === route.id ? '' : route.id); | ||
setActiveMatchId(match.id); | ||
} | ||
}, | ||
@@ -715,3 +724,3 @@ style: { | ||
transition: 'all .2s ease-out', | ||
background: getRouteStatusColor(matches, route, defaultTheme), | ||
background: getRouteStatusColor(matches, route, defaultTheme, router), | ||
opacity: match ? 1 : 0.3 | ||
@@ -726,3 +735,4 @@ } | ||
paddingLeft: isRoot ? '.5rem' : 0, | ||
opacity: match ? 1 : 0.7 | ||
opacity: match ? 1 : 0.7, | ||
fontSize: '0.7rem' | ||
} | ||
@@ -743,5 +753,7 @@ }, /*#__PURE__*/React__default.createElement("span", null, route.path || trimPath(route.id), " "), match ? /*#__PURE__*/React__default.createElement("span", { | ||
route: r, | ||
matches: matches, | ||
router: router, | ||
activeRouteId: activeRouteId, | ||
setActiveRouteId: setActiveRouteId | ||
activeMatchId: activeMatchId, | ||
setActiveRouteId: setActiveRouteId, | ||
setActiveMatchId: setActiveMatchId | ||
}))) : null); | ||
@@ -763,5 +775,14 @@ } | ||
const [activeRouteId, setActiveRouteId] = useLocalStorage('tanstackRouterDevtoolsActiveRouteId', ''); | ||
const allMatches = React__default.useMemo(() => [...Object.values(router.state.matches)], [router.state.matches]); | ||
const activeMatch = allMatches?.find(d => d.routeId === activeRouteId); | ||
const [activeMatchId, setActiveMatchId] = useLocalStorage('tanstackRouterDevtoolsActiveMatchId', ''); | ||
const activeMatch = React__default.useMemo(() => router.state.matchesById[activeRouteId] || router.state.matchesById[activeMatchId], [activeRouteId, activeMatchId]); | ||
const hasSearch = Object.keys(router.state.location.search || {}).length; | ||
const preloadMatches = Object.values(router.state.matchesById).filter(match => { | ||
return !router.state.matchIds.includes(match.id) && !router.state.pendingMatchIds.includes(match.id); | ||
}); | ||
React__default.useEffect(() => { | ||
const interval = setInterval(() => { | ||
router.cleanMatches(); | ||
}, 1000); | ||
return () => clearInterval(interval); | ||
}, [router]); | ||
return /*#__PURE__*/React__default.createElement(ThemeProvider, { | ||
@@ -891,2 +912,7 @@ theme: defaultTheme | ||
style: { | ||
flex: '1 1 auto', | ||
overflowY: 'auto' | ||
} | ||
}, /*#__PURE__*/React__default.createElement("div", { | ||
style: { | ||
padding: '.5em', | ||
@@ -931,6 +957,8 @@ background: defaultTheme.backgroundAlt, | ||
route: router.routeTree, | ||
router: router, | ||
isRoot: true, | ||
matches: allMatches, | ||
activeRouteId: activeRouteId, | ||
setActiveRouteId: setActiveRouteId | ||
activeMatchId: activeMatchId, | ||
setActiveRouteId: setActiveRouteId, | ||
setActiveMatchId: setActiveMatchId | ||
}) : /*#__PURE__*/React__default.createElement("div", null, router.state.matches.map((match, i) => { | ||
@@ -955,3 +983,3 @@ return /*#__PURE__*/React__default.createElement("div", { | ||
marginLeft: '.25rem', | ||
background: getStatusColor(match, defaultTheme), | ||
background: getStatusColor(match, defaultTheme, router), | ||
alignItems: 'center', | ||
@@ -965,7 +993,14 @@ justifyContent: 'center', | ||
style: { | ||
padding: '.5em' | ||
padding: '.5em', | ||
fontSize: '0.7rem' | ||
} | ||
}, `${match.id}`)); | ||
}))), activeMatch ? /*#__PURE__*/React__default.createElement(ActivePanel, null, /*#__PURE__*/React__default.createElement("div", { | ||
}))), preloadMatches?.length ? /*#__PURE__*/React__default.createElement("div", { | ||
style: { | ||
flex: '1 1 auto', | ||
overflowY: 'auto', | ||
maxHeight: '50%' | ||
} | ||
}, /*#__PURE__*/React__default.createElement("div", { | ||
style: { | ||
padding: '.5em', | ||
@@ -975,2 +1010,45 @@ background: defaultTheme.backgroundAlt, | ||
top: 0, | ||
zIndex: 1, | ||
display: 'flex', | ||
alignItems: 'center', | ||
gap: '.5rem' | ||
} | ||
}, "Preloaded Matches"), preloadMatches.map(match => { | ||
return /*#__PURE__*/React__default.createElement("div", { | ||
key: match.id, | ||
role: "button", | ||
"aria-label": `Open match details for ${match.routeId}`, | ||
onClick: () => setActiveMatchId(activeMatchId === match.id ? '' : match.id), | ||
style: { | ||
display: 'flex', | ||
borderBottom: `solid 1px ${defaultTheme.grayAlt}`, | ||
cursor: 'pointer', | ||
alignItems: 'center', | ||
background: match === activeMatch ? 'rgba(255,255,255,.1)' : undefined | ||
} | ||
}, /*#__PURE__*/React__default.createElement("div", { | ||
style: { | ||
flex: '0 0 auto', | ||
width: '1.3rem', | ||
height: '1.3rem', | ||
marginLeft: '.25rem', | ||
background: getStatusColor(match, defaultTheme, router), | ||
alignItems: 'center', | ||
justifyContent: 'center', | ||
fontWeight: 'bold', | ||
borderRadius: '.25rem', | ||
transition: 'all .2s ease-out' | ||
} | ||
}), /*#__PURE__*/React__default.createElement(Code, { | ||
style: { | ||
padding: '.5em', | ||
fontSize: '0.7rem' | ||
} | ||
}, `${match.id}`)); | ||
})) : null), activeMatch ? /*#__PURE__*/React__default.createElement(ActivePanel, null, /*#__PURE__*/React__default.createElement("div", { | ||
style: { | ||
padding: '.5em', | ||
background: defaultTheme.backgroundAlt, | ||
position: 'sticky', | ||
top: 0, | ||
bottom: 0, | ||
@@ -977,0 +1055,0 @@ zIndex: 1 |
@@ -10,3 +10,3 @@ { | ||
{ | ||
"uid": "a8fe-183", | ||
"uid": "90eb-183", | ||
"name": "\u0000rollupPluginBabelHelpers.js" | ||
@@ -16,3 +16,3 @@ }, | ||
"name": "node_modules/.pnpm/tiny-invariant@1.3.1/node_modules/tiny-invariant/dist/esm/tiny-invariant.js", | ||
"uid": "a8fe-185" | ||
"uid": "90eb-185" | ||
}, | ||
@@ -24,7 +24,7 @@ { | ||
"name": "react-store/build/esm/index.js", | ||
"uid": "a8fe-187" | ||
"uid": "90eb-187" | ||
}, | ||
{ | ||
"name": "router/build/esm/index.js", | ||
"uid": "a8fe-189" | ||
"uid": "90eb-189" | ||
}, | ||
@@ -35,31 +35,31 @@ { | ||
{ | ||
"uid": "a8fe-191", | ||
"uid": "90eb-191", | ||
"name": "useLocalStorage.ts" | ||
}, | ||
{ | ||
"uid": "a8fe-193", | ||
"uid": "90eb-193", | ||
"name": "theme.tsx" | ||
}, | ||
{ | ||
"uid": "a8fe-195", | ||
"uid": "90eb-195", | ||
"name": "useMediaQuery.ts" | ||
}, | ||
{ | ||
"uid": "a8fe-197", | ||
"uid": "90eb-197", | ||
"name": "utils.ts" | ||
}, | ||
{ | ||
"uid": "a8fe-199", | ||
"uid": "90eb-199", | ||
"name": "styledComponents.ts" | ||
}, | ||
{ | ||
"uid": "a8fe-201", | ||
"uid": "90eb-201", | ||
"name": "Explorer.tsx" | ||
}, | ||
{ | ||
"uid": "a8fe-203", | ||
"uid": "90eb-203", | ||
"name": "devtools.tsx" | ||
}, | ||
{ | ||
"uid": "a8fe-205", | ||
"uid": "90eb-205", | ||
"name": "index.tsx" | ||
@@ -77,80 +77,80 @@ } | ||
"nodeParts": { | ||
"a8fe-183": { | ||
"90eb-183": { | ||
"renderedLength": 429, | ||
"gzipLength": 238, | ||
"brotliLength": 0, | ||
"mainUid": "a8fe-182" | ||
"mainUid": "90eb-182" | ||
}, | ||
"a8fe-185": { | ||
"90eb-185": { | ||
"renderedLength": 181, | ||
"gzipLength": 129, | ||
"brotliLength": 0, | ||
"mainUid": "a8fe-184" | ||
"mainUid": "90eb-184" | ||
}, | ||
"a8fe-187": { | ||
"90eb-187": { | ||
"renderedLength": 1002, | ||
"gzipLength": 474, | ||
"brotliLength": 0, | ||
"mainUid": "a8fe-186" | ||
"mainUid": "90eb-186" | ||
}, | ||
"a8fe-189": { | ||
"90eb-189": { | ||
"renderedLength": 590, | ||
"gzipLength": 317, | ||
"brotliLength": 0, | ||
"mainUid": "a8fe-188" | ||
"mainUid": "90eb-188" | ||
}, | ||
"a8fe-191": { | ||
"90eb-191": { | ||
"renderedLength": 1083, | ||
"gzipLength": 410, | ||
"brotliLength": 0, | ||
"mainUid": "a8fe-190" | ||
"mainUid": "90eb-190" | ||
}, | ||
"a8fe-193": { | ||
"90eb-193": { | ||
"renderedLength": 686, | ||
"gzipLength": 344, | ||
"brotliLength": 0, | ||
"mainUid": "a8fe-192" | ||
"mainUid": "90eb-192" | ||
}, | ||
"a8fe-195": { | ||
"90eb-195": { | ||
"renderedLength": 970, | ||
"gzipLength": 386, | ||
"brotliLength": 0, | ||
"mainUid": "a8fe-194" | ||
"mainUid": "90eb-194" | ||
}, | ||
"a8fe-197": { | ||
"renderedLength": 2972, | ||
"gzipLength": 1112, | ||
"90eb-197": { | ||
"renderedLength": 2988, | ||
"gzipLength": 1158, | ||
"brotliLength": 0, | ||
"mainUid": "a8fe-196" | ||
"mainUid": "90eb-196" | ||
}, | ||
"a8fe-199": { | ||
"90eb-199": { | ||
"renderedLength": 1378, | ||
"gzipLength": 576, | ||
"brotliLength": 0, | ||
"mainUid": "a8fe-198" | ||
"mainUid": "90eb-198" | ||
}, | ||
"a8fe-201": { | ||
"90eb-201": { | ||
"renderedLength": 6243, | ||
"gzipLength": 1853, | ||
"brotliLength": 0, | ||
"mainUid": "a8fe-200" | ||
"mainUid": "90eb-200" | ||
}, | ||
"a8fe-203": { | ||
"renderedLength": 21254, | ||
"gzipLength": 4199, | ||
"90eb-203": { | ||
"renderedLength": 24007, | ||
"gzipLength": 4426, | ||
"brotliLength": 0, | ||
"mainUid": "a8fe-202" | ||
"mainUid": "90eb-202" | ||
}, | ||
"a8fe-205": { | ||
"90eb-205": { | ||
"renderedLength": 0, | ||
"gzipLength": 0, | ||
"brotliLength": 0, | ||
"mainUid": "a8fe-204" | ||
"mainUid": "90eb-204" | ||
} | ||
}, | ||
"nodeMetas": { | ||
"a8fe-182": { | ||
"90eb-182": { | ||
"id": "\u0000rollupPluginBabelHelpers.js", | ||
"moduleParts": { | ||
"index.production.js": "a8fe-183" | ||
"index.production.js": "90eb-183" | ||
}, | ||
@@ -160,16 +160,16 @@ "imported": [], | ||
{ | ||
"uid": "a8fe-202" | ||
"uid": "90eb-202" | ||
}, | ||
{ | ||
"uid": "a8fe-192" | ||
"uid": "90eb-192" | ||
}, | ||
{ | ||
"uid": "a8fe-200" | ||
"uid": "90eb-200" | ||
} | ||
] | ||
}, | ||
"a8fe-184": { | ||
"90eb-184": { | ||
"id": "/node_modules/.pnpm/tiny-invariant@1.3.1/node_modules/tiny-invariant/dist/esm/tiny-invariant.js", | ||
"moduleParts": { | ||
"index.production.js": "a8fe-185" | ||
"index.production.js": "90eb-185" | ||
}, | ||
@@ -179,17 +179,17 @@ "imported": [], | ||
{ | ||
"uid": "a8fe-188" | ||
"uid": "90eb-188" | ||
} | ||
] | ||
}, | ||
"a8fe-186": { | ||
"90eb-186": { | ||
"id": "/packages/react-store/build/esm/index.js", | ||
"moduleParts": { | ||
"index.production.js": "a8fe-187" | ||
"index.production.js": "90eb-187" | ||
}, | ||
"imported": [ | ||
{ | ||
"uid": "a8fe-208" | ||
"uid": "90eb-208" | ||
}, | ||
{ | ||
"uid": "a8fe-209" | ||
"uid": "90eb-209" | ||
} | ||
@@ -199,23 +199,23 @@ ], | ||
{ | ||
"uid": "a8fe-188" | ||
"uid": "90eb-188" | ||
} | ||
] | ||
}, | ||
"a8fe-188": { | ||
"90eb-188": { | ||
"id": "/packages/router/build/esm/index.js", | ||
"moduleParts": { | ||
"index.production.js": "a8fe-189" | ||
"index.production.js": "90eb-189" | ||
}, | ||
"imported": [ | ||
{ | ||
"uid": "a8fe-184" | ||
"uid": "90eb-184" | ||
}, | ||
{ | ||
"uid": "a8fe-207" | ||
"uid": "90eb-207" | ||
}, | ||
{ | ||
"uid": "a8fe-206" | ||
"uid": "90eb-206" | ||
}, | ||
{ | ||
"uid": "a8fe-186" | ||
"uid": "90eb-186" | ||
} | ||
@@ -225,14 +225,14 @@ ], | ||
{ | ||
"uid": "a8fe-202" | ||
"uid": "90eb-202" | ||
} | ||
] | ||
}, | ||
"a8fe-190": { | ||
"90eb-190": { | ||
"id": "/packages/router-devtools/src/useLocalStorage.ts", | ||
"moduleParts": { | ||
"index.production.js": "a8fe-191" | ||
"index.production.js": "90eb-191" | ||
}, | ||
"imported": [ | ||
{ | ||
"uid": "a8fe-206" | ||
"uid": "90eb-206" | ||
} | ||
@@ -242,17 +242,17 @@ ], | ||
{ | ||
"uid": "a8fe-202" | ||
"uid": "90eb-202" | ||
} | ||
] | ||
}, | ||
"a8fe-192": { | ||
"90eb-192": { | ||
"id": "/packages/router-devtools/src/theme.tsx", | ||
"moduleParts": { | ||
"index.production.js": "a8fe-193" | ||
"index.production.js": "90eb-193" | ||
}, | ||
"imported": [ | ||
{ | ||
"uid": "a8fe-182" | ||
"uid": "90eb-182" | ||
}, | ||
{ | ||
"uid": "a8fe-206" | ||
"uid": "90eb-206" | ||
} | ||
@@ -262,17 +262,17 @@ ], | ||
{ | ||
"uid": "a8fe-202" | ||
"uid": "90eb-202" | ||
}, | ||
{ | ||
"uid": "a8fe-196" | ||
"uid": "90eb-196" | ||
} | ||
] | ||
}, | ||
"a8fe-194": { | ||
"90eb-194": { | ||
"id": "/packages/router-devtools/src/useMediaQuery.ts", | ||
"moduleParts": { | ||
"index.production.js": "a8fe-195" | ||
"index.production.js": "90eb-195" | ||
}, | ||
"imported": [ | ||
{ | ||
"uid": "a8fe-206" | ||
"uid": "90eb-206" | ||
} | ||
@@ -282,20 +282,20 @@ ], | ||
{ | ||
"uid": "a8fe-196" | ||
"uid": "90eb-196" | ||
} | ||
] | ||
}, | ||
"a8fe-196": { | ||
"90eb-196": { | ||
"id": "/packages/router-devtools/src/utils.ts", | ||
"moduleParts": { | ||
"index.production.js": "a8fe-197" | ||
"index.production.js": "90eb-197" | ||
}, | ||
"imported": [ | ||
{ | ||
"uid": "a8fe-206" | ||
"uid": "90eb-206" | ||
}, | ||
{ | ||
"uid": "a8fe-192" | ||
"uid": "90eb-192" | ||
}, | ||
{ | ||
"uid": "a8fe-194" | ||
"uid": "90eb-194" | ||
} | ||
@@ -305,20 +305,20 @@ ], | ||
{ | ||
"uid": "a8fe-202" | ||
"uid": "90eb-202" | ||
}, | ||
{ | ||
"uid": "a8fe-198" | ||
"uid": "90eb-198" | ||
}, | ||
{ | ||
"uid": "a8fe-200" | ||
"uid": "90eb-200" | ||
} | ||
] | ||
}, | ||
"a8fe-198": { | ||
"90eb-198": { | ||
"id": "/packages/router-devtools/src/styledComponents.ts", | ||
"moduleParts": { | ||
"index.production.js": "a8fe-199" | ||
"index.production.js": "90eb-199" | ||
}, | ||
"imported": [ | ||
{ | ||
"uid": "a8fe-196" | ||
"uid": "90eb-196" | ||
} | ||
@@ -328,20 +328,20 @@ ], | ||
{ | ||
"uid": "a8fe-202" | ||
"uid": "90eb-202" | ||
} | ||
] | ||
}, | ||
"a8fe-200": { | ||
"90eb-200": { | ||
"id": "/packages/router-devtools/src/Explorer.tsx", | ||
"moduleParts": { | ||
"index.production.js": "a8fe-201" | ||
"index.production.js": "90eb-201" | ||
}, | ||
"imported": [ | ||
{ | ||
"uid": "a8fe-182" | ||
"uid": "90eb-182" | ||
}, | ||
{ | ||
"uid": "a8fe-206" | ||
"uid": "90eb-206" | ||
}, | ||
{ | ||
"uid": "a8fe-196" | ||
"uid": "90eb-196" | ||
} | ||
@@ -351,35 +351,35 @@ ], | ||
{ | ||
"uid": "a8fe-202" | ||
"uid": "90eb-202" | ||
} | ||
] | ||
}, | ||
"a8fe-202": { | ||
"90eb-202": { | ||
"id": "/packages/router-devtools/src/devtools.tsx", | ||
"moduleParts": { | ||
"index.production.js": "a8fe-203" | ||
"index.production.js": "90eb-203" | ||
}, | ||
"imported": [ | ||
{ | ||
"uid": "a8fe-182" | ||
"uid": "90eb-182" | ||
}, | ||
{ | ||
"uid": "a8fe-206" | ||
"uid": "90eb-206" | ||
}, | ||
{ | ||
"uid": "a8fe-188" | ||
"uid": "90eb-188" | ||
}, | ||
{ | ||
"uid": "a8fe-190" | ||
"uid": "90eb-190" | ||
}, | ||
{ | ||
"uid": "a8fe-196" | ||
"uid": "90eb-196" | ||
}, | ||
{ | ||
"uid": "a8fe-198" | ||
"uid": "90eb-198" | ||
}, | ||
{ | ||
"uid": "a8fe-192" | ||
"uid": "90eb-192" | ||
}, | ||
{ | ||
"uid": "a8fe-200" | ||
"uid": "90eb-200" | ||
} | ||
@@ -389,14 +389,14 @@ ], | ||
{ | ||
"uid": "a8fe-204" | ||
"uid": "90eb-204" | ||
} | ||
] | ||
}, | ||
"a8fe-204": { | ||
"90eb-204": { | ||
"id": "/packages/router-devtools/src/index.tsx", | ||
"moduleParts": { | ||
"index.production.js": "a8fe-205" | ||
"index.production.js": "90eb-205" | ||
}, | ||
"imported": [ | ||
{ | ||
"uid": "a8fe-202" | ||
"uid": "90eb-202" | ||
} | ||
@@ -407,3 +407,3 @@ ], | ||
}, | ||
"a8fe-206": { | ||
"90eb-206": { | ||
"id": "react", | ||
@@ -414,21 +414,21 @@ "moduleParts": {}, | ||
{ | ||
"uid": "a8fe-202" | ||
"uid": "90eb-202" | ||
}, | ||
{ | ||
"uid": "a8fe-188" | ||
"uid": "90eb-188" | ||
}, | ||
{ | ||
"uid": "a8fe-190" | ||
"uid": "90eb-190" | ||
}, | ||
{ | ||
"uid": "a8fe-196" | ||
"uid": "90eb-196" | ||
}, | ||
{ | ||
"uid": "a8fe-192" | ||
"uid": "90eb-192" | ||
}, | ||
{ | ||
"uid": "a8fe-200" | ||
"uid": "90eb-200" | ||
}, | ||
{ | ||
"uid": "a8fe-194" | ||
"uid": "90eb-194" | ||
} | ||
@@ -438,3 +438,3 @@ ], | ||
}, | ||
"a8fe-207": { | ||
"90eb-207": { | ||
"id": "/node_modules/.pnpm/tiny-warning@1.0.3/node_modules/tiny-warning/dist/tiny-warning.esm.js", | ||
@@ -445,7 +445,7 @@ "moduleParts": {}, | ||
{ | ||
"uid": "a8fe-188" | ||
"uid": "90eb-188" | ||
} | ||
] | ||
}, | ||
"a8fe-208": { | ||
"90eb-208": { | ||
"id": "use-sync-external-store/shim/with-selector", | ||
@@ -456,3 +456,3 @@ "moduleParts": {}, | ||
{ | ||
"uid": "a8fe-186" | ||
"uid": "90eb-186" | ||
} | ||
@@ -462,3 +462,3 @@ ], | ||
}, | ||
"a8fe-209": { | ||
"90eb-209": { | ||
"id": "/packages/store/build/esm/index.js", | ||
@@ -469,3 +469,3 @@ "moduleParts": {}, | ||
{ | ||
"uid": "a8fe-186" | ||
"uid": "90eb-186" | ||
} | ||
@@ -472,0 +472,0 @@ ] |
import React from 'react'; | ||
import { AnyRootRoute, AnyRoute, AnyRouteMatch } from '@tanstack/router'; | ||
import { AnyRootRoute, AnyRoute, AnyRouteMatch, AnyRouter } from '@tanstack/router'; | ||
import { Theme } from './theme'; | ||
export declare const isServer: boolean; | ||
type StyledComponent<T> = T extends 'button' ? React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement> : T extends 'input' ? React.DetailedHTMLProps<React.InputHTMLAttributes<HTMLInputElement>, HTMLInputElement> : T extends 'select' ? React.DetailedHTMLProps<React.SelectHTMLAttributes<HTMLSelectElement>, HTMLSelectElement> : T extends keyof HTMLElementTagNameMap ? React.HTMLAttributes<HTMLElementTagNameMap[T]> : never; | ||
export declare function getStatusColor(match: AnyRouteMatch, theme: Theme): "#3f4e60" | "#00ab52" | "#ff0085" | "#006bff"; | ||
export declare function getRouteStatusColor(matches: AnyRouteMatch[], route: AnyRoute | AnyRootRoute, theme: Theme): "#3f4e60" | "#00ab52" | "#ff0085" | "#006bff"; | ||
export declare function getStatusColor(match: AnyRouteMatch, theme: Theme, router: AnyRouter): "#3f4e60" | "#00ab52" | "#ff0085" | "#006bff" | "#ffb200"; | ||
export declare function getRouteStatusColor(matches: AnyRouteMatch[], route: AnyRoute | AnyRootRoute, theme: Theme, router: AnyRouter): "#3f4e60" | "#00ab52" | "#ff0085" | "#006bff" | "#ffb200"; | ||
type Styles = React.CSSProperties | ((props: Record<string, any>, theme: Theme) => React.CSSProperties); | ||
@@ -9,0 +9,0 @@ export declare function styled<T extends keyof HTMLElementTagNameMap>(type: T, newStyles: Styles, queries?: Record<string, Styles>): React.ForwardRefExoticComponent<React.PropsWithoutRef<StyledComponent<T>> & React.RefAttributes<HTMLElementTagNameMap[T]>>; |
@@ -219,8 +219,11 @@ /** | ||
const isServer$1 = typeof window === 'undefined'; | ||
function getStatusColor(match, theme) { | ||
return match.status === 'pending' ? theme.active : match.status === 'error' ? theme.danger : match.status === 'success' ? theme.success : theme.gray; | ||
function getStatusColor(match, theme, router) { | ||
return match.status === 'pending' || match.isFetching ? theme.active : router.getIsInvalid({ | ||
matchId: match.id | ||
}) ? theme.warning : match.status === 'error' ? theme.danger : match.status === 'success' ? theme.success : theme.gray; | ||
} | ||
function getRouteStatusColor(matches, route, theme) { | ||
function getRouteStatusColor(matches, route, theme, router) { | ||
const found = matches.find(d => d.routeId === route.id); | ||
return found ? found.status === 'pending' ? theme.active : found.status === 'error' ? theme.danger : found.status === 'success' ? theme.success : theme.gray : theme.gray; | ||
if (!found) return theme.gray; | ||
return getStatusColor(found, theme, router); | ||
} | ||
@@ -774,7 +777,10 @@ function styled(type, newStyles, queries = {}) { | ||
isRoot, | ||
matches, | ||
router, | ||
activeRouteId, | ||
setActiveRouteId | ||
activeMatchId, | ||
setActiveRouteId, | ||
setActiveMatchId | ||
}) { | ||
const match = matches.find(d => d.routeId === route.id); | ||
const matches = Object.values(router.state.matchesById); | ||
const match = router.state.matches.find(d => d.routeId === route.id); | ||
return /*#__PURE__*/React__default["default"].createElement("div", null, /*#__PURE__*/React__default["default"].createElement("div", { | ||
@@ -784,3 +790,6 @@ role: "button", | ||
onClick: () => { | ||
if (match) setActiveRouteId(activeRouteId === route.id ? '' : route.id); | ||
if (match) { | ||
setActiveRouteId(activeRouteId === route.id ? '' : route.id); | ||
setActiveMatchId(match.id); | ||
} | ||
}, | ||
@@ -805,3 +814,3 @@ style: { | ||
transition: 'all .2s ease-out', | ||
background: getRouteStatusColor(matches, route, defaultTheme), | ||
background: getRouteStatusColor(matches, route, defaultTheme, router), | ||
opacity: match ? 1 : 0.3 | ||
@@ -816,3 +825,4 @@ } | ||
paddingLeft: isRoot ? '.5rem' : 0, | ||
opacity: match ? 1 : 0.7 | ||
opacity: match ? 1 : 0.7, | ||
fontSize: '0.7rem' | ||
} | ||
@@ -833,5 +843,7 @@ }, /*#__PURE__*/React__default["default"].createElement("span", null, route.path || trimPath(route.id), " "), match ? /*#__PURE__*/React__default["default"].createElement("span", { | ||
route: r, | ||
matches: matches, | ||
router: router, | ||
activeRouteId: activeRouteId, | ||
setActiveRouteId: setActiveRouteId | ||
activeMatchId: activeMatchId, | ||
setActiveRouteId: setActiveRouteId, | ||
setActiveMatchId: setActiveMatchId | ||
}))) : null); | ||
@@ -853,5 +865,14 @@ } | ||
const [activeRouteId, setActiveRouteId] = useLocalStorage('tanstackRouterDevtoolsActiveRouteId', ''); | ||
const allMatches = React__default["default"].useMemo(() => [...Object.values(router.state.matches)], [router.state.matches]); | ||
const activeMatch = allMatches?.find(d => d.routeId === activeRouteId); | ||
const [activeMatchId, setActiveMatchId] = useLocalStorage('tanstackRouterDevtoolsActiveMatchId', ''); | ||
const activeMatch = React__default["default"].useMemo(() => router.state.matchesById[activeRouteId] || router.state.matchesById[activeMatchId], [activeRouteId, activeMatchId]); | ||
const hasSearch = Object.keys(router.state.location.search || {}).length; | ||
const preloadMatches = Object.values(router.state.matchesById).filter(match => { | ||
return !router.state.matchIds.includes(match.id) && !router.state.pendingMatchIds.includes(match.id); | ||
}); | ||
React__default["default"].useEffect(() => { | ||
const interval = setInterval(() => { | ||
router.cleanMatches(); | ||
}, 1000); | ||
return () => clearInterval(interval); | ||
}, [router]); | ||
return /*#__PURE__*/React__default["default"].createElement(ThemeProvider, { | ||
@@ -981,2 +1002,7 @@ theme: defaultTheme | ||
style: { | ||
flex: '1 1 auto', | ||
overflowY: 'auto' | ||
} | ||
}, /*#__PURE__*/React__default["default"].createElement("div", { | ||
style: { | ||
padding: '.5em', | ||
@@ -1021,6 +1047,8 @@ background: defaultTheme.backgroundAlt, | ||
route: router.routeTree, | ||
router: router, | ||
isRoot: true, | ||
matches: allMatches, | ||
activeRouteId: activeRouteId, | ||
setActiveRouteId: setActiveRouteId | ||
activeMatchId: activeMatchId, | ||
setActiveRouteId: setActiveRouteId, | ||
setActiveMatchId: setActiveMatchId | ||
}) : /*#__PURE__*/React__default["default"].createElement("div", null, router.state.matches.map((match, i) => { | ||
@@ -1045,3 +1073,3 @@ return /*#__PURE__*/React__default["default"].createElement("div", { | ||
marginLeft: '.25rem', | ||
background: getStatusColor(match, defaultTheme), | ||
background: getStatusColor(match, defaultTheme, router), | ||
alignItems: 'center', | ||
@@ -1055,7 +1083,14 @@ justifyContent: 'center', | ||
style: { | ||
padding: '.5em' | ||
padding: '.5em', | ||
fontSize: '0.7rem' | ||
} | ||
}, `${match.id}`)); | ||
}))), activeMatch ? /*#__PURE__*/React__default["default"].createElement(ActivePanel, null, /*#__PURE__*/React__default["default"].createElement("div", { | ||
}))), preloadMatches?.length ? /*#__PURE__*/React__default["default"].createElement("div", { | ||
style: { | ||
flex: '1 1 auto', | ||
overflowY: 'auto', | ||
maxHeight: '50%' | ||
} | ||
}, /*#__PURE__*/React__default["default"].createElement("div", { | ||
style: { | ||
padding: '.5em', | ||
@@ -1065,2 +1100,45 @@ background: defaultTheme.backgroundAlt, | ||
top: 0, | ||
zIndex: 1, | ||
display: 'flex', | ||
alignItems: 'center', | ||
gap: '.5rem' | ||
} | ||
}, "Preloaded Matches"), preloadMatches.map(match => { | ||
return /*#__PURE__*/React__default["default"].createElement("div", { | ||
key: match.id, | ||
role: "button", | ||
"aria-label": `Open match details for ${match.routeId}`, | ||
onClick: () => setActiveMatchId(activeMatchId === match.id ? '' : match.id), | ||
style: { | ||
display: 'flex', | ||
borderBottom: `solid 1px ${defaultTheme.grayAlt}`, | ||
cursor: 'pointer', | ||
alignItems: 'center', | ||
background: match === activeMatch ? 'rgba(255,255,255,.1)' : undefined | ||
} | ||
}, /*#__PURE__*/React__default["default"].createElement("div", { | ||
style: { | ||
flex: '0 0 auto', | ||
width: '1.3rem', | ||
height: '1.3rem', | ||
marginLeft: '.25rem', | ||
background: getStatusColor(match, defaultTheme, router), | ||
alignItems: 'center', | ||
justifyContent: 'center', | ||
fontWeight: 'bold', | ||
borderRadius: '.25rem', | ||
transition: 'all .2s ease-out' | ||
} | ||
}), /*#__PURE__*/React__default["default"].createElement(Code, { | ||
style: { | ||
padding: '.5em', | ||
fontSize: '0.7rem' | ||
} | ||
}, `${match.id}`)); | ||
})) : null), activeMatch ? /*#__PURE__*/React__default["default"].createElement(ActivePanel, null, /*#__PURE__*/React__default["default"].createElement("div", { | ||
style: { | ||
padding: '.5em', | ||
background: defaultTheme.backgroundAlt, | ||
position: 'sticky', | ||
top: 0, | ||
bottom: 0, | ||
@@ -1067,0 +1145,0 @@ zIndex: 1 |
@@ -21,3 +21,3 @@ /** | ||
* @license MIT | ||
*/const u=l.createContext(null);function c(e,t){const[n,r]=o.default.useState();o.default.useEffect((()=>{const n=(e=>{try{const t=localStorage.getItem(e);return"string"==typeof t?JSON.parse(t):void 0}catch{return}})(e);r(null==n?"function"==typeof t?t():t:n)}),[t,e]);return[n,o.default.useCallback((t=>{r((n=>{let r=t;"function"==typeof t&&(r=t(n));try{localStorage.setItem(e,JSON.stringify(r))}catch{}return r}))}),[e])]}const s={background:"#0b1521",backgroundAlt:"#132337",foreground:"white",gray:"#3f4e60",grayAlt:"#222e3e",inputBackgroundColor:"#fff",inputTextColor:"#000",success:"#00ab52",danger:"#ff0085",active:"#006bff",warning:"#ffb200"},f=o.default.createContext(s);function m({theme:e,...t}){return o.default.createElement(f.Provider,i({value:e},t))}const p="undefined"==typeof window;function g(e,t){return"pending"===e.status?t.active:"error"===e.status?t.danger:"success"===e.status?t.success:t.gray}function b(e,t,n){const r=e.find((e=>e.routeId===t.id));return r?"pending"===r.status?n.active:"error"===r.status?n.danger:"success"===r.status?n.success:n.gray:n.gray}function y(e,t,n={}){return o.default.forwardRef((({style:r,...a},l)=>{const i=o.default.useContext(f),d=Object.entries(n).reduce(((e,[t,n])=>function(e){const[t,n]=o.default.useState((()=>{if("undefined"!=typeof window)return window.matchMedia&&window.matchMedia(e).matches}));return o.default.useEffect((()=>{if("undefined"!=typeof window){if(!window.matchMedia)return;const t=window.matchMedia(e),r=({matches:e})=>n(e);return t.addListener(r),()=>{t.removeListener(r)}}}),[t,e,n]),t}(t)?{...e,..."function"==typeof n?n(a,i):n}:e),{});return o.default.createElement(e,{...a,style:{..."function"==typeof t?t(a,i):t,...r,...d},ref:l})}))}function h(){const e=o.default.useRef(!1),t=o.default.useCallback((()=>e.current),[]);return o.default[p?"useEffect":"useLayoutEffect"]((()=>(e.current=!0,()=>{e.current=!1})),[]),t}function E(e){const t=h(),[n,r]=o.default.useState(e);return[n,o.default.useCallback((e=>{var n;n=()=>{t()&&r(e)},Promise.resolve().then(n).catch((e=>setTimeout((()=>{throw e}))))}),[t])]}const v=y("div",((e,t)=>({fontSize:"clamp(12px, 1.5vw, 14px)",fontFamily:"sans-serif",display:"flex",backgroundColor:t.background,color:t.foreground})),{"(max-width: 700px)":{flexDirection:"column"},"(max-width: 600px)":{fontSize:".9em"}}),x=y("div",(()=>({flex:"1 1 500px",display:"flex",flexDirection:"column",overflow:"auto",height:"100%"})),{"(max-width: 700px)":(e,t)=>({borderTop:`2px solid ${t.gray}`})}),k=y("button",((e,t)=>({appearance:"none",fontSize:".9em",fontWeight:"bold",background:t.gray,border:"0",borderRadius:".3em",color:"white",padding:".5em",opacity:e.disabled?".5":void 0,cursor:"pointer"}))),w=y("code",{fontSize:".9em"}),S=y("div",{fontFamily:"Menlo, monospace",fontSize:".7rem",lineHeight:"1.7",outline:"none",wordBreak:"break-word"}),R=y("span",{color:"white"}),I=y("button",{cursor:"pointer",color:"white"}),O=y("button",{cursor:"pointer",color:"inherit",font:"inherit",outline:"inherit",background:"transparent",border:"none",padding:0}),D=y("span",((e,t)=>({color:t.danger}))),C=y("div",{marginLeft:".1em",paddingLeft:"1em",borderLeft:"2px solid rgba(0,0,0,.15)"}),j=y("span",{color:"grey",fontSize:".7em"}),T=({expanded:e,style:t={}})=>l.createElement("span",{style:{display:"inline-block",transition:"all .1s ease",transform:`rotate(${e?90:0}deg) ${t.transform||""}`,...t}},"▶");const A=({handleEntry:e,label:t,value:n,subEntries:r=[],subEntryPages:a=[],type:o,expanded:i=!1,toggleExpanded:d,pageSize:u,renderer:c})=>{const[s,f]=l.useState([]),[m,p]=l.useState(void 0);return l.createElement(S,null,a.length?l.createElement(l.Fragment,null,l.createElement(O,{onClick:()=>d()},l.createElement(T,{expanded:i})," ",t," ",l.createElement(j,null,"iterable"===String(o).toLowerCase()?"(Iterable) ":"",r.length," ",r.length>1?"items":"item")),i?1===a.length?l.createElement(C,null,r.map(((t,n)=>e(t)))):l.createElement(C,null,a.map(((t,n)=>l.createElement("div",{key:n},l.createElement(S,null,l.createElement(I,{onClick:()=>f((e=>e.includes(n)?e.filter((e=>e!==n)):[...e,n]))},l.createElement(T,{expanded:i})," [",n*u," ..."," ",n*u+u-1,"]"),s.includes(n)?l.createElement(C,null,t.map((t=>e(t)))):null))))):null):"function"===o?l.createElement(l.Fragment,null,l.createElement(P,{renderer:c,label:l.createElement("button",{onClick:()=>{p(n())},style:{appearance:"none",border:"0",background:"transparent"}},l.createElement(R,null,t)," 🔄"," "),value:m,defaultExpanded:{}})):l.createElement(l.Fragment,null,l.createElement(R,null,t,":")," ",l.createElement(D,null,(e=>{const t=Object.getOwnPropertyNames(Object(e)),n="bigint"==typeof e?`${e.toString()}n`:e;return JSON.stringify(n,t)})(n))))};function P({value:e,defaultExpanded:t,renderer:n=A,pageSize:r=100,filterSubEntries:a,...o}){const[d,u]=l.useState(Boolean(t)),c=l.useCallback((()=>u((e=>!e))),[]);let s=typeof e,f=[];const m=e=>{const n=!0===t?{[e.label]:!0}:t?.[e.label];return{...e,defaultExpanded:n}};var p;Array.isArray(e)?(s="array",f=e.map(((e,t)=>m({label:t.toString(),value:e})))):null!==e&&"object"==typeof e&&(p=e,Symbol.iterator in p)&&"function"==typeof e[Symbol.iterator]?(s="Iterable",f=Array.from(e,((e,t)=>m({label:t.toString(),value:e})))):"object"==typeof e&&null!==e&&(s="object",f=Object.entries(e).map((([e,t])=>m({label:e,value:t})))),f=a?a(f):f;const g=function(e,t){if(t<1)return[];let n=0;const r=[];for(;n<e.length;)r.push(e.slice(n,n+t)),n+=t;return r}(f,r);return n({handleEntry:t=>l.createElement(P,i({key:t.label,value:e,renderer:n,filterSubEntries:a},o,t)),type:s,subEntries:f,subEntryPages:g,value:e,expanded:d,toggleExpanded:c,pageSize:r,...o})}const L="undefined"==typeof window;function z(e){return o.default.createElement("div",i({},e,{style:{...e.style??{},display:"flex",alignItems:"center",flexDirection:"column",fontSize:"0.8rem",fontWeight:"bolder",lineHeight:"1"}}),o.default.createElement("div",{style:{letterSpacing:"-0.05rem"}},"TANSTACK"),o.default.createElement("div",{style:{backgroundImage:"linear-gradient(to right, var(--tw-gradient-stops))","--tw-gradient-from":"#84cc16","--tw-gradient-stops":"var(--tw-gradient-from), var(--tw-gradient-to)","--tw-gradient-to":"#10b981",WebkitBackgroundClip:"text",color:"transparent",letterSpacing:"0.1rem",marginRight:"-0.2rem"}},"ROUTER"))}function $({route:e,isRoot:t,matches:n,activeRouteId:r,setActiveRouteId:a}){const l=n.find((t=>t.routeId===e.id));return o.default.createElement("div",null,o.default.createElement("div",{role:"button","aria-label":`Open match details for ${e.id}`,onClick:()=>{l&&a(r===e.id?"":e.id)},style:{display:"flex",borderBottom:`solid 1px ${s.grayAlt}`,cursor:l?"pointer":"default",alignItems:"center",background:e.id===r?"rgba(255,255,255,.1)":void 0}},t?null:o.default.createElement("div",{style:{flex:"0 0 auto",width:".7rem",height:".7rem",margin:".5rem .75rem",alignItems:"center",justifyContent:"center",fontWeight:"bold",borderRadius:"100%",transition:"all .2s ease-out",background:b(n,e,s),opacity:l?1:.3}}),o.default.createElement(w,{style:{flex:"1 0 auto",display:"flex",justifyContent:"space-between",padding:".25rem .5rem .25rem 0",paddingLeft:t?".5rem":0,opacity:l?1:.7}},o.default.createElement("span",null,e.path||function(e){return"/"===e?e:e.replace(/\/{1,}$/,"")}(function(e){return"/"===e?e:e.replace(/^\/{1,}/,"")}(e.id))," "),l?o.default.createElement("span",{style:{opacity:.3}},l.id):null)),e.children?.length?o.default.createElement("div",{style:{marginLeft:t?0:"1rem",borderLeft:t?"":`solid 1px ${s.grayAlt}`}},[...e.children].sort(((e,t)=>e.rank-t.rank)).map((e=>o.default.createElement($,{key:e.id,route:e,matches:n,activeRouteId:r,setActiveRouteId:a})))):null)}const B=o.default.forwardRef((function(e,t){const{isOpen:r=!0,setIsOpen:a,handleDragStart:l,router:f,...p}=e,b=o.default.useContext(u),y=f??b;!function(e,t){if(!e)throw new Error("Invariant failed")} | ||
*/const c=l.createContext(null);function u(e,t){const[n,r]=o.default.useState();o.default.useEffect((()=>{const n=(e=>{try{const t=localStorage.getItem(e);return"string"==typeof t?JSON.parse(t):void 0}catch{return}})(e);r(null==n?"function"==typeof t?t():t:n)}),[t,e]);return[n,o.default.useCallback((t=>{r((n=>{let r=t;"function"==typeof t&&(r=t(n));try{localStorage.setItem(e,JSON.stringify(r))}catch{}return r}))}),[e])]}const s={background:"#0b1521",backgroundAlt:"#132337",foreground:"white",gray:"#3f4e60",grayAlt:"#222e3e",inputBackgroundColor:"#fff",inputTextColor:"#000",success:"#00ab52",danger:"#ff0085",active:"#006bff",warning:"#ffb200"},f=o.default.createContext(s);function m({theme:e,...t}){return o.default.createElement(f.Provider,i({value:e},t))}const p="undefined"==typeof window;function g(e,t,n){return"pending"===e.status||e.isFetching?t.active:n.getIsInvalid({matchId:e.id})?t.warning:"error"===e.status?t.danger:"success"===e.status?t.success:t.gray}function b(e,t,n,r){const a=e.find((e=>e.routeId===t.id));return a?g(a,n,r):n.gray}function y(e,t,n={}){return o.default.forwardRef((({style:r,...a},l)=>{const i=o.default.useContext(f),d=Object.entries(n).reduce(((e,[t,n])=>function(e){const[t,n]=o.default.useState((()=>{if("undefined"!=typeof window)return window.matchMedia&&window.matchMedia(e).matches}));return o.default.useEffect((()=>{if("undefined"!=typeof window){if(!window.matchMedia)return;const t=window.matchMedia(e),r=({matches:e})=>n(e);return t.addListener(r),()=>{t.removeListener(r)}}}),[t,e,n]),t}(t)?{...e,..."function"==typeof n?n(a,i):n}:e),{});return o.default.createElement(e,{...a,style:{..."function"==typeof t?t(a,i):t,...r,...d},ref:l})}))}function h(){const e=o.default.useRef(!1),t=o.default.useCallback((()=>e.current),[]);return o.default[p?"useEffect":"useLayoutEffect"]((()=>(e.current=!0,()=>{e.current=!1})),[]),t}function v(e){const t=h(),[n,r]=o.default.useState(e);return[n,o.default.useCallback((e=>{var n;n=()=>{t()&&r(e)},Promise.resolve().then(n).catch((e=>setTimeout((()=>{throw e}))))}),[t])]}const E=y("div",((e,t)=>({fontSize:"clamp(12px, 1.5vw, 14px)",fontFamily:"sans-serif",display:"flex",backgroundColor:t.background,color:t.foreground})),{"(max-width: 700px)":{flexDirection:"column"},"(max-width: 600px)":{fontSize:".9em"}}),x=y("div",(()=>({flex:"1 1 500px",display:"flex",flexDirection:"column",overflow:"auto",height:"100%"})),{"(max-width: 700px)":(e,t)=>({borderTop:`2px solid ${t.gray}`})}),k=y("button",((e,t)=>({appearance:"none",fontSize:".9em",fontWeight:"bold",background:t.gray,border:"0",borderRadius:".3em",color:"white",padding:".5em",opacity:e.disabled?".5":void 0,cursor:"pointer"}))),w=y("code",{fontSize:".9em"}),S=y("div",{fontFamily:"Menlo, monospace",fontSize:".7rem",lineHeight:"1.7",outline:"none",wordBreak:"break-word"}),I=y("span",{color:"white"}),R=y("button",{cursor:"pointer",color:"white"}),O=y("button",{cursor:"pointer",color:"inherit",font:"inherit",outline:"inherit",background:"transparent",border:"none",padding:0}),D=y("span",((e,t)=>({color:t.danger}))),C=y("div",{marginLeft:".1em",paddingLeft:"1em",borderLeft:"2px solid rgba(0,0,0,.15)"}),j=y("span",{color:"grey",fontSize:".7em"}),A=({expanded:e,style:t={}})=>l.createElement("span",{style:{display:"inline-block",transition:"all .1s ease",transform:`rotate(${e?90:0}deg) ${t.transform||""}`,...t}},"▶");const T=({handleEntry:e,label:t,value:n,subEntries:r=[],subEntryPages:a=[],type:o,expanded:i=!1,toggleExpanded:d,pageSize:c,renderer:u})=>{const[s,f]=l.useState([]),[m,p]=l.useState(void 0);return l.createElement(S,null,a.length?l.createElement(l.Fragment,null,l.createElement(O,{onClick:()=>d()},l.createElement(A,{expanded:i})," ",t," ",l.createElement(j,null,"iterable"===String(o).toLowerCase()?"(Iterable) ":"",r.length," ",r.length>1?"items":"item")),i?1===a.length?l.createElement(C,null,r.map(((t,n)=>e(t)))):l.createElement(C,null,a.map(((t,n)=>l.createElement("div",{key:n},l.createElement(S,null,l.createElement(R,{onClick:()=>f((e=>e.includes(n)?e.filter((e=>e!==n)):[...e,n]))},l.createElement(A,{expanded:i})," [",n*c," ..."," ",n*c+c-1,"]"),s.includes(n)?l.createElement(C,null,t.map((t=>e(t)))):null))))):null):"function"===o?l.createElement(l.Fragment,null,l.createElement(P,{renderer:u,label:l.createElement("button",{onClick:()=>{p(n())},style:{appearance:"none",border:"0",background:"transparent"}},l.createElement(I,null,t)," 🔄"," "),value:m,defaultExpanded:{}})):l.createElement(l.Fragment,null,l.createElement(I,null,t,":")," ",l.createElement(D,null,(e=>{const t=Object.getOwnPropertyNames(Object(e)),n="bigint"==typeof e?`${e.toString()}n`:e;return JSON.stringify(n,t)})(n))))};function P({value:e,defaultExpanded:t,renderer:n=T,pageSize:r=100,filterSubEntries:a,...o}){const[d,c]=l.useState(Boolean(t)),u=l.useCallback((()=>c((e=>!e))),[]);let s=typeof e,f=[];const m=e=>{const n=!0===t?{[e.label]:!0}:t?.[e.label];return{...e,defaultExpanded:n}};var p;Array.isArray(e)?(s="array",f=e.map(((e,t)=>m({label:t.toString(),value:e})))):null!==e&&"object"==typeof e&&(p=e,Symbol.iterator in p)&&"function"==typeof e[Symbol.iterator]?(s="Iterable",f=Array.from(e,((e,t)=>m({label:t.toString(),value:e})))):"object"==typeof e&&null!==e&&(s="object",f=Object.entries(e).map((([e,t])=>m({label:e,value:t})))),f=a?a(f):f;const g=function(e,t){if(t<1)return[];let n=0;const r=[];for(;n<e.length;)r.push(e.slice(n,n+t)),n+=t;return r}(f,r);return n({handleEntry:t=>l.createElement(P,i({key:t.label,value:e,renderer:n,filterSubEntries:a},o,t)),type:s,subEntries:f,subEntryPages:g,value:e,expanded:d,toggleExpanded:u,pageSize:r,...o})}const z="undefined"==typeof window;function L(e){return o.default.createElement("div",i({},e,{style:{...e.style??{},display:"flex",alignItems:"center",flexDirection:"column",fontSize:"0.8rem",fontWeight:"bolder",lineHeight:"1"}}),o.default.createElement("div",{style:{letterSpacing:"-0.05rem"}},"TANSTACK"),o.default.createElement("div",{style:{backgroundImage:"linear-gradient(to right, var(--tw-gradient-stops))","--tw-gradient-from":"#84cc16","--tw-gradient-stops":"var(--tw-gradient-from), var(--tw-gradient-to)","--tw-gradient-to":"#10b981",WebkitBackgroundClip:"text",color:"transparent",letterSpacing:"0.1rem",marginRight:"-0.2rem"}},"ROUTER"))}function M({route:e,isRoot:t,router:n,activeRouteId:r,activeMatchId:a,setActiveRouteId:l,setActiveMatchId:i}){const d=Object.values(n.state.matchesById),c=n.state.matches.find((t=>t.routeId===e.id));return o.default.createElement("div",null,o.default.createElement("div",{role:"button","aria-label":`Open match details for ${e.id}`,onClick:()=>{c&&(l(r===e.id?"":e.id),i(c.id))},style:{display:"flex",borderBottom:`solid 1px ${s.grayAlt}`,cursor:c?"pointer":"default",alignItems:"center",background:e.id===r?"rgba(255,255,255,.1)":void 0}},t?null:o.default.createElement("div",{style:{flex:"0 0 auto",width:".7rem",height:".7rem",margin:".5rem .75rem",alignItems:"center",justifyContent:"center",fontWeight:"bold",borderRadius:"100%",transition:"all .2s ease-out",background:b(d,e,s,n),opacity:c?1:.3}}),o.default.createElement(w,{style:{flex:"1 0 auto",display:"flex",justifyContent:"space-between",padding:".25rem .5rem .25rem 0",paddingLeft:t?".5rem":0,opacity:c?1:.7,fontSize:"0.7rem"}},o.default.createElement("span",null,e.path||function(e){return"/"===e?e:e.replace(/\/{1,}$/,"")}(function(e){return"/"===e?e:e.replace(/^\/{1,}/,"")}(e.id))," "),c?o.default.createElement("span",{style:{opacity:.3}},c.id):null)),e.children?.length?o.default.createElement("div",{style:{marginLeft:t?0:"1rem",borderLeft:t?"":`solid 1px ${s.grayAlt}`}},[...e.children].sort(((e,t)=>e.rank-t.rank)).map((e=>o.default.createElement(M,{key:e.id,route:e,router:n,activeRouteId:r,activeMatchId:a,setActiveRouteId:l,setActiveMatchId:i})))):null)}const $=o.default.forwardRef((function(e,t){const{isOpen:r=!0,setIsOpen:a,handleDragStart:l,router:f,...p}=e,b=o.default.useContext(c),y=f??b;!function(e,t){if(!e)throw new Error("Invariant failed")} | ||
/** | ||
@@ -32,3 +32,3 @@ * @tanstack/react-store/src/index.tsx | ||
* @license MIT | ||
*/(y),function(e,t=(e=>e)){n.useSyncExternalStoreWithSelector(e.subscribe,(()=>e.state),(()=>e.state),t,d)}(y.__store);const[h,E]=c("tanstackRouterDevtoolsShowMatches",!0),[k,S]=c("tanstackRouterDevtoolsActiveRouteId",""),R=o.default.useMemo((()=>[...Object.values(y.state.matches)]),[y.state.matches]),I=R?.find((e=>e.routeId===k)),O=Object.keys(y.state.location.search||{}).length;return o.default.createElement(m,{theme:s},o.default.createElement(v,i({ref:t,className:"TanStackRouterDevtoolsPanel"},p),o.default.createElement("style",{dangerouslySetInnerHTML:{__html:`\n\n .TanStackRouterDevtoolsPanel * {\n scrollbar-color: ${s.backgroundAlt} ${s.gray};\n }\n\n .TanStackRouterDevtoolsPanel *::-webkit-scrollbar, .TanStackRouterDevtoolsPanel scrollbar {\n width: 1em;\n height: 1em;\n }\n\n .TanStackRouterDevtoolsPanel *::-webkit-scrollbar-track, .TanStackRouterDevtoolsPanel scrollbar-track {\n background: ${s.backgroundAlt};\n }\n\n .TanStackRouterDevtoolsPanel *::-webkit-scrollbar-thumb, .TanStackRouterDevtoolsPanel scrollbar-thumb {\n background: ${s.gray};\n border-radius: .5em;\n border: 3px solid ${s.backgroundAlt};\n }\n\n .TanStackRouterDevtoolsPanel table {\n width: 100%;\n }\n\n .TanStackRouterDevtoolsPanel table tr {\n border-bottom: 2px dotted rgba(255, 255, 255, .2);\n }\n\n .TanStackRouterDevtoolsPanel table tr:last-child {\n border-bottom: none\n }\n\n .TanStackRouterDevtoolsPanel table td {\n padding: .25rem .5rem;\n border-right: 2px dotted rgba(255, 255, 255, .05);\n }\n\n .TanStackRouterDevtoolsPanel table td:last-child {\n border-right: none\n }\n\n `}}),o.default.createElement("div",{style:{position:"absolute",left:0,top:0,width:"100%",height:"4px",marginBottom:"-4px",cursor:"row-resize",zIndex:1e5},onMouseDown:l}),o.default.createElement("div",{style:{flex:"1 1 500px",minHeight:"40%",maxHeight:"100%",overflow:"auto",borderRight:`1px solid ${s.grayAlt}`,display:"flex",flexDirection:"column"}},o.default.createElement("div",{style:{display:"flex",justifyContent:"start",gap:"1rem",padding:"1rem",alignItems:"center",background:s.backgroundAlt}},o.default.createElement(z,{"aria-hidden":!0}),o.default.createElement("div",{style:{fontSize:"clamp(.8rem, 2vw, 1.3rem)",fontWeight:"bold"}},o.default.createElement("span",{style:{fontWeight:100}},"Devtools"))),o.default.createElement("div",{style:{overflowY:"auto",flex:"1"}},o.default.createElement("div",{style:{padding:".5em"}},o.default.createElement(P,{label:"Router",value:y,defaultExpanded:{state:{},context:{}},filterSubEntries:e=>e.filter((e=>"function"!=typeof e.value))})))),o.default.createElement("div",{style:{flex:"1 1 500px",minHeight:"40%",maxHeight:"100%",overflow:"auto",borderRight:`1px solid ${s.grayAlt}`,display:"flex",flexDirection:"column"}},o.default.createElement("div",{style:{padding:".5em",background:s.backgroundAlt,position:"sticky",top:0,zIndex:1,display:"flex",alignItems:"center",gap:".5rem"}},o.default.createElement("button",{type:"button",onClick:()=>{E(!1)},disabled:!h,style:{appearance:"none",opacity:h?.5:1,border:0,background:"transparent",color:"inherit",cursor:"pointer"}},"Routes"),"/",o.default.createElement("button",{type:"button",onClick:()=>{E(!0)},disabled:h,style:{appearance:"none",opacity:h?1:.5,border:0,background:"transparent",color:"inherit",cursor:"pointer"}},"Matches")),h?o.default.createElement("div",null,y.state.matches.map(((e,t)=>o.default.createElement("div",{key:e.routeId||t,role:"button","aria-label":`Open match details for ${e.routeId}`,onClick:()=>S(k===e.routeId?"":e.routeId),style:{display:"flex",borderBottom:`solid 1px ${s.grayAlt}`,cursor:"pointer",alignItems:"center",background:e===I?"rgba(255,255,255,.1)":void 0}},o.default.createElement("div",{style:{flex:"0 0 auto",width:"1.3rem",height:"1.3rem",marginLeft:".25rem",background:g(e,s),alignItems:"center",justifyContent:"center",fontWeight:"bold",borderRadius:".25rem",transition:"all .2s ease-out"}}),o.default.createElement(w,{style:{padding:".5em"}},`${e.id}`))))):o.default.createElement($,{route:y.routeTree,isRoot:!0,matches:R,activeRouteId:k,setActiveRouteId:S})),I?o.default.createElement(x,null,o.default.createElement("div",{style:{padding:".5em",background:s.backgroundAlt,position:"sticky",top:0,bottom:0,zIndex:1}},"Match Details"),o.default.createElement("div",null,o.default.createElement("table",null,o.default.createElement("tbody",null,o.default.createElement("tr",null,o.default.createElement("td",{style:{opacity:".5"}},"ID"),o.default.createElement("td",null,o.default.createElement(w,{style:{lineHeight:"1.8em"}},JSON.stringify(I.id,null,2)))),o.default.createElement("tr",null,o.default.createElement("td",{style:{opacity:".5"}},"Status"),o.default.createElement("td",null,I.status)),o.default.createElement("tr",null,o.default.createElement("td",{style:{opacity:".5"}},"Last Updated"),o.default.createElement("td",null,I.updatedAt?new Date(I.updatedAt).toLocaleTimeString():"N/A"))))),o.default.createElement("div",{style:{background:s.backgroundAlt,padding:".5em",position:"sticky",top:0,bottom:0,zIndex:1}},"Explorer"),o.default.createElement("div",{style:{padding:".5em"}},o.default.createElement(P,{label:"Match",value:I,defaultExpanded:{}}))):null,O?o.default.createElement("div",{style:{flex:"1 1 500px",minHeight:"40%",maxHeight:"100%",overflow:"auto",borderRight:`1px solid ${s.grayAlt}`,display:"flex",flexDirection:"column"}},o.default.createElement("div",{style:{padding:".5em",background:s.backgroundAlt,position:"sticky",top:0,bottom:0,zIndex:1}},"Search Params"),o.default.createElement("div",{style:{padding:".5em"}},o.default.createElement(P,{value:y.state.location.search||{},defaultExpanded:Object.keys(y.state.location.search||{}).reduce(((e,t)=>(e[t]={},e)),{})}))):null))}));e.TanStackRouterDevtools=function({initialIsOpen:e,panelProps:t={},closeButtonProps:n={},toggleButtonProps:r={},position:a="bottom-left",containerElement:l="footer",router:d}){const u=o.default.useRef(null),f=o.default.useRef(null),[p,g]=c("tanstackRouterDevtoolsOpen",e),[b,y]=c("tanstackRouterDevtoolsHeight",null),[v,x]=E(!1),[w,S]=E(!1),R=h();o.default.useEffect((()=>{x(p??!1)}),[p,v,x]),o.default.useEffect((()=>{const e=f.current;if(e){const t=()=>{e&&v&&(e.style.visibility="visible")},n=()=>{e&&!v&&(e.style.visibility="hidden")};return e.addEventListener("transitionstart",t),e.addEventListener("transitionend",n),()=>{e.removeEventListener("transitionstart",t),e.removeEventListener("transitionend",n)}}}),[v]),o.default[L?"useEffect":"useLayoutEffect"]((()=>{if(v){const e=u.current?.parentElement?.style.paddingBottom,t=()=>{const e=f.current?.getBoundingClientRect().height;u.current?.parentElement&&(u.current.parentElement.style.paddingBottom=`${e}px`)};if(t(),"undefined"!=typeof window)return window.addEventListener("resize",t),()=>{window.removeEventListener("resize",t),u.current?.parentElement&&"string"==typeof e&&(u.current.parentElement.style.paddingBottom=e)}}}),[v]);const{style:I={},...O}=t,{style:D={},onClick:C,...j}=n,{style:T={},onClick:A,...P}=r;return R()?o.default.createElement(l,{ref:u,className:"TanStackRouterDevtools"},o.default.createElement(m,{theme:s},o.default.createElement(B,i({ref:f},O,{router:d,style:{position:"fixed",bottom:"0",right:"0",zIndex:99999,width:"100%",height:b??500,maxHeight:"90%",boxShadow:"0 0 20px rgba(0,0,0,.3)",borderTop:`1px solid ${s.gray}`,transformOrigin:"top",visibility:p?"visible":"hidden",...I,...w?{transition:"none"}:{transition:"all .2s ease"},...v?{opacity:1,pointerEvents:"all",transform:"translateY(0) scale(1)"}:{opacity:0,pointerEvents:"none",transform:"translateY(15px) scale(1.02)"}},isOpen:v,setIsOpen:g,handleDragStart:e=>((e,t)=>{if(0!==t.button)return;S(!0);const n=e?.getBoundingClientRect().height??0,r=t.pageY,a=e=>{const t=r-e.pageY,a=n+t;y(a),g(!(a<70))},l=()=>{S(!1),document.removeEventListener("mousemove",a),document.removeEventListener("mouseUp",l)};document.addEventListener("mousemove",a),document.addEventListener("mouseup",l)})(f.current,e)})),v?o.default.createElement(k,i({type:"button","aria-label":"Close TanStack Router Devtools"},j,{onClick:e=>{g(!1),C&&C(e)},style:{position:"fixed",zIndex:99999,margin:".5em",bottom:0,..."top-right"===a?{right:"0"}:"top-left"===a?{left:"0"}:"bottom-right"===a?{right:"0"}:{left:"0"},...D}}),"Close"):null),v?null:o.default.createElement("button",i({type:"button"},P,{"aria-label":"Open TanStack Router Devtools",onClick:e=>{g(!0),A&&A(e)},style:{appearance:"none",background:"none",border:0,padding:0,position:"fixed",zIndex:99999,display:"inline-flex",fontSize:"1.5em",margin:".5em",cursor:"pointer",width:"fit-content",..."top-right"===a?{top:"0",right:"0"}:"top-left"===a?{top:"0",left:"0"}:"bottom-right"===a?{bottom:"0",right:"0"}:{bottom:"0",left:"0"},...T}}),o.default.createElement(z,{"aria-hidden":!0}))):null},e.TanStackRouterDevtoolsPanel=B,Object.defineProperty(e,"__esModule",{value:!0})})); | ||
*/(y),function(e,t=(e=>e)){n.useSyncExternalStoreWithSelector(e.subscribe,(()=>e.state),(()=>e.state),t,d)}(y.__store);const[h,v]=u("tanstackRouterDevtoolsShowMatches",!0),[k,S]=u("tanstackRouterDevtoolsActiveRouteId",""),[I,R]=u("tanstackRouterDevtoolsActiveMatchId",""),O=o.default.useMemo((()=>y.state.matchesById[k]||y.state.matchesById[I]),[k,I]),D=Object.keys(y.state.location.search||{}).length,C=Object.values(y.state.matchesById).filter((e=>!y.state.matchIds.includes(e.id)&&!y.state.pendingMatchIds.includes(e.id)));return o.default.useEffect((()=>{const e=setInterval((()=>{y.cleanMatches()}),1e3);return()=>clearInterval(e)}),[y]),o.default.createElement(m,{theme:s},o.default.createElement(E,i({ref:t,className:"TanStackRouterDevtoolsPanel"},p),o.default.createElement("style",{dangerouslySetInnerHTML:{__html:`\n\n .TanStackRouterDevtoolsPanel * {\n scrollbar-color: ${s.backgroundAlt} ${s.gray};\n }\n\n .TanStackRouterDevtoolsPanel *::-webkit-scrollbar, .TanStackRouterDevtoolsPanel scrollbar {\n width: 1em;\n height: 1em;\n }\n\n .TanStackRouterDevtoolsPanel *::-webkit-scrollbar-track, .TanStackRouterDevtoolsPanel scrollbar-track {\n background: ${s.backgroundAlt};\n }\n\n .TanStackRouterDevtoolsPanel *::-webkit-scrollbar-thumb, .TanStackRouterDevtoolsPanel scrollbar-thumb {\n background: ${s.gray};\n border-radius: .5em;\n border: 3px solid ${s.backgroundAlt};\n }\n\n .TanStackRouterDevtoolsPanel table {\n width: 100%;\n }\n\n .TanStackRouterDevtoolsPanel table tr {\n border-bottom: 2px dotted rgba(255, 255, 255, .2);\n }\n\n .TanStackRouterDevtoolsPanel table tr:last-child {\n border-bottom: none\n }\n\n .TanStackRouterDevtoolsPanel table td {\n padding: .25rem .5rem;\n border-right: 2px dotted rgba(255, 255, 255, .05);\n }\n\n .TanStackRouterDevtoolsPanel table td:last-child {\n border-right: none\n }\n\n `}}),o.default.createElement("div",{style:{position:"absolute",left:0,top:0,width:"100%",height:"4px",marginBottom:"-4px",cursor:"row-resize",zIndex:1e5},onMouseDown:l}),o.default.createElement("div",{style:{flex:"1 1 500px",minHeight:"40%",maxHeight:"100%",overflow:"auto",borderRight:`1px solid ${s.grayAlt}`,display:"flex",flexDirection:"column"}},o.default.createElement("div",{style:{display:"flex",justifyContent:"start",gap:"1rem",padding:"1rem",alignItems:"center",background:s.backgroundAlt}},o.default.createElement(L,{"aria-hidden":!0}),o.default.createElement("div",{style:{fontSize:"clamp(.8rem, 2vw, 1.3rem)",fontWeight:"bold"}},o.default.createElement("span",{style:{fontWeight:100}},"Devtools"))),o.default.createElement("div",{style:{overflowY:"auto",flex:"1"}},o.default.createElement("div",{style:{padding:".5em"}},o.default.createElement(P,{label:"Router",value:y,defaultExpanded:{state:{},context:{}},filterSubEntries:e=>e.filter((e=>"function"!=typeof e.value))})))),o.default.createElement("div",{style:{flex:"1 1 500px",minHeight:"40%",maxHeight:"100%",overflow:"auto",borderRight:`1px solid ${s.grayAlt}`,display:"flex",flexDirection:"column"}},o.default.createElement("div",{style:{flex:"1 1 auto",overflowY:"auto"}},o.default.createElement("div",{style:{padding:".5em",background:s.backgroundAlt,position:"sticky",top:0,zIndex:1,display:"flex",alignItems:"center",gap:".5rem"}},o.default.createElement("button",{type:"button",onClick:()=>{v(!1)},disabled:!h,style:{appearance:"none",opacity:h?.5:1,border:0,background:"transparent",color:"inherit",cursor:"pointer"}},"Routes"),"/",o.default.createElement("button",{type:"button",onClick:()=>{v(!0)},disabled:h,style:{appearance:"none",opacity:h?1:.5,border:0,background:"transparent",color:"inherit",cursor:"pointer"}},"Matches")),h?o.default.createElement("div",null,y.state.matches.map(((e,t)=>o.default.createElement("div",{key:e.routeId||t,role:"button","aria-label":`Open match details for ${e.routeId}`,onClick:()=>S(k===e.routeId?"":e.routeId),style:{display:"flex",borderBottom:`solid 1px ${s.grayAlt}`,cursor:"pointer",alignItems:"center",background:e===O?"rgba(255,255,255,.1)":void 0}},o.default.createElement("div",{style:{flex:"0 0 auto",width:"1.3rem",height:"1.3rem",marginLeft:".25rem",background:g(e,s,y),alignItems:"center",justifyContent:"center",fontWeight:"bold",borderRadius:".25rem",transition:"all .2s ease-out"}}),o.default.createElement(w,{style:{padding:".5em",fontSize:"0.7rem"}},`${e.id}`))))):o.default.createElement(M,{route:y.routeTree,router:y,isRoot:!0,activeRouteId:k,activeMatchId:I,setActiveRouteId:S,setActiveMatchId:R})),C?.length?o.default.createElement("div",{style:{flex:"1 1 auto",overflowY:"auto",maxHeight:"50%"}},o.default.createElement("div",{style:{padding:".5em",background:s.backgroundAlt,position:"sticky",top:0,zIndex:1,display:"flex",alignItems:"center",gap:".5rem"}},"Preloaded Matches"),C.map((e=>o.default.createElement("div",{key:e.id,role:"button","aria-label":`Open match details for ${e.routeId}`,onClick:()=>R(I===e.id?"":e.id),style:{display:"flex",borderBottom:`solid 1px ${s.grayAlt}`,cursor:"pointer",alignItems:"center",background:e===O?"rgba(255,255,255,.1)":void 0}},o.default.createElement("div",{style:{flex:"0 0 auto",width:"1.3rem",height:"1.3rem",marginLeft:".25rem",background:g(e,s,y),alignItems:"center",justifyContent:"center",fontWeight:"bold",borderRadius:".25rem",transition:"all .2s ease-out"}}),o.default.createElement(w,{style:{padding:".5em",fontSize:"0.7rem"}},`${e.id}`))))):null),O?o.default.createElement(x,null,o.default.createElement("div",{style:{padding:".5em",background:s.backgroundAlt,position:"sticky",top:0,bottom:0,zIndex:1}},"Match Details"),o.default.createElement("div",null,o.default.createElement("table",null,o.default.createElement("tbody",null,o.default.createElement("tr",null,o.default.createElement("td",{style:{opacity:".5"}},"ID"),o.default.createElement("td",null,o.default.createElement(w,{style:{lineHeight:"1.8em"}},JSON.stringify(O.id,null,2)))),o.default.createElement("tr",null,o.default.createElement("td",{style:{opacity:".5"}},"Status"),o.default.createElement("td",null,O.status)),o.default.createElement("tr",null,o.default.createElement("td",{style:{opacity:".5"}},"Last Updated"),o.default.createElement("td",null,O.updatedAt?new Date(O.updatedAt).toLocaleTimeString():"N/A"))))),o.default.createElement("div",{style:{background:s.backgroundAlt,padding:".5em",position:"sticky",top:0,bottom:0,zIndex:1}},"Explorer"),o.default.createElement("div",{style:{padding:".5em"}},o.default.createElement(P,{label:"Match",value:O,defaultExpanded:{}}))):null,D?o.default.createElement("div",{style:{flex:"1 1 500px",minHeight:"40%",maxHeight:"100%",overflow:"auto",borderRight:`1px solid ${s.grayAlt}`,display:"flex",flexDirection:"column"}},o.default.createElement("div",{style:{padding:".5em",background:s.backgroundAlt,position:"sticky",top:0,bottom:0,zIndex:1}},"Search Params"),o.default.createElement("div",{style:{padding:".5em"}},o.default.createElement(P,{value:y.state.location.search||{},defaultExpanded:Object.keys(y.state.location.search||{}).reduce(((e,t)=>(e[t]={},e)),{})}))):null))}));e.TanStackRouterDevtools=function({initialIsOpen:e,panelProps:t={},closeButtonProps:n={},toggleButtonProps:r={},position:a="bottom-left",containerElement:l="footer",router:d}){const c=o.default.useRef(null),f=o.default.useRef(null),[p,g]=u("tanstackRouterDevtoolsOpen",e),[b,y]=u("tanstackRouterDevtoolsHeight",null),[E,x]=v(!1),[w,S]=v(!1),I=h();o.default.useEffect((()=>{x(p??!1)}),[p,E,x]),o.default.useEffect((()=>{const e=f.current;if(e){const t=()=>{e&&E&&(e.style.visibility="visible")},n=()=>{e&&!E&&(e.style.visibility="hidden")};return e.addEventListener("transitionstart",t),e.addEventListener("transitionend",n),()=>{e.removeEventListener("transitionstart",t),e.removeEventListener("transitionend",n)}}}),[E]),o.default[z?"useEffect":"useLayoutEffect"]((()=>{if(E){const e=c.current?.parentElement?.style.paddingBottom,t=()=>{const e=f.current?.getBoundingClientRect().height;c.current?.parentElement&&(c.current.parentElement.style.paddingBottom=`${e}px`)};if(t(),"undefined"!=typeof window)return window.addEventListener("resize",t),()=>{window.removeEventListener("resize",t),c.current?.parentElement&&"string"==typeof e&&(c.current.parentElement.style.paddingBottom=e)}}}),[E]);const{style:R={},...O}=t,{style:D={},onClick:C,...j}=n,{style:A={},onClick:T,...P}=r;return I()?o.default.createElement(l,{ref:c,className:"TanStackRouterDevtools"},o.default.createElement(m,{theme:s},o.default.createElement($,i({ref:f},O,{router:d,style:{position:"fixed",bottom:"0",right:"0",zIndex:99999,width:"100%",height:b??500,maxHeight:"90%",boxShadow:"0 0 20px rgba(0,0,0,.3)",borderTop:`1px solid ${s.gray}`,transformOrigin:"top",visibility:p?"visible":"hidden",...R,...w?{transition:"none"}:{transition:"all .2s ease"},...E?{opacity:1,pointerEvents:"all",transform:"translateY(0) scale(1)"}:{opacity:0,pointerEvents:"none",transform:"translateY(15px) scale(1.02)"}},isOpen:E,setIsOpen:g,handleDragStart:e=>((e,t)=>{if(0!==t.button)return;S(!0);const n=e?.getBoundingClientRect().height??0,r=t.pageY,a=e=>{const t=r-e.pageY,a=n+t;y(a),g(!(a<70))},l=()=>{S(!1),document.removeEventListener("mousemove",a),document.removeEventListener("mouseUp",l)};document.addEventListener("mousemove",a),document.addEventListener("mouseup",l)})(f.current,e)})),E?o.default.createElement(k,i({type:"button","aria-label":"Close TanStack Router Devtools"},j,{onClick:e=>{g(!1),C&&C(e)},style:{position:"fixed",zIndex:99999,margin:".5em",bottom:0,..."top-right"===a?{right:"0"}:"top-left"===a?{left:"0"}:"bottom-right"===a?{right:"0"}:{left:"0"},...D}}),"Close"):null),E?null:o.default.createElement("button",i({type:"button"},P,{"aria-label":"Open TanStack Router Devtools",onClick:e=>{g(!0),T&&T(e)},style:{appearance:"none",background:"none",border:0,padding:0,position:"fixed",zIndex:99999,display:"inline-flex",fontSize:"1.5em",margin:".5em",cursor:"pointer",width:"fit-content",..."top-right"===a?{top:"0",right:"0"}:"top-left"===a?{top:"0",left:"0"}:"bottom-right"===a?{bottom:"0",right:"0"}:{bottom:"0",left:"0"},...A}}),o.default.createElement(L,{"aria-hidden":!0}))):null},e.TanStackRouterDevtoolsPanel=$,Object.defineProperty(e,"__esModule",{value:!0})})); | ||
//# sourceMappingURL=index.production.js.map |
{ | ||
"name": "@tanstack/router-devtools", | ||
"author": "Tanner Linsley", | ||
"version": "0.0.1-beta.142", | ||
"version": "0.0.1-beta.143", | ||
"license": "MIT", | ||
@@ -6,0 +6,0 @@ "repository": "tanstack/router", |
import React from 'react' | ||
import { AnyRootRoute, AnyRoute, AnyRouteMatch } from '@tanstack/router' | ||
import { | ||
AnyRootRoute, | ||
AnyRoute, | ||
AnyRouteMatch, | ||
AnyRouter, | ||
} from '@tanstack/router' | ||
@@ -28,5 +33,13 @@ import { Theme, useTheme } from './theme' | ||
export function getStatusColor(match: AnyRouteMatch, theme: Theme) { | ||
return match.status === 'pending' | ||
export function getStatusColor( | ||
match: AnyRouteMatch, | ||
theme: Theme, | ||
router: AnyRouter, | ||
) { | ||
return match.status === 'pending' || match.isFetching | ||
? theme.active | ||
: router.getIsInvalid({ | ||
matchId: match.id, | ||
}) | ||
? theme.warning | ||
: match.status === 'error' | ||
@@ -43,14 +56,7 @@ ? theme.danger | ||
theme: Theme, | ||
router: AnyRouter, | ||
) { | ||
const found = matches.find((d) => d.routeId === route.id) | ||
return found | ||
? found.status === 'pending' | ||
? theme.active | ||
: found.status === 'error' | ||
? theme.danger | ||
: found.status === 'success' | ||
? theme.success | ||
: theme.gray | ||
: theme.gray | ||
if (!found) return theme.gray | ||
return getStatusColor(found, theme, router) | ||
} | ||
@@ -57,0 +63,0 @@ |
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
845327
5887