@tanstack/router-devtools
Advanced tools
Comparing version 0.0.1-beta.224 to 0.0.1-beta.225
@@ -13,4 +13,2 @@ /** | ||
Object.defineProperty(exports, '__esModule', { value: true }); | ||
function _extends() { | ||
@@ -31,3 +29,3 @@ _extends = Object.assign ? Object.assign.bind() : function (target) { | ||
exports["extends"] = _extends; | ||
exports.extends = _extends; | ||
//# sourceMappingURL=_rollupPluginBabelHelpers.js.map |
@@ -13,4 +13,2 @@ /** | ||
Object.defineProperty(exports, '__esModule', { value: true }); | ||
var _rollupPluginBabelHelpers = require('./_virtual/_rollupPluginBabelHelpers.js'); | ||
@@ -25,9 +23,5 @@ var React = require('react'); | ||
function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; } | ||
var React__default = /*#__PURE__*/_interopDefaultLegacy(React); | ||
const isServer = typeof window === 'undefined'; | ||
function Logo(props) { | ||
return /*#__PURE__*/React__default["default"].createElement("div", _rollupPluginBabelHelpers["extends"]({}, props, { | ||
return /*#__PURE__*/React.createElement("div", _rollupPluginBabelHelpers.extends({}, props, { | ||
style: { | ||
@@ -42,7 +36,7 @@ ...(props.style ?? {}), | ||
} | ||
}), /*#__PURE__*/React__default["default"].createElement("div", { | ||
}), /*#__PURE__*/React.createElement("div", { | ||
style: { | ||
letterSpacing: '-0.05rem' | ||
} | ||
}, "TANSTACK"), /*#__PURE__*/React__default["default"].createElement("div", { | ||
}, "TANSTACK"), /*#__PURE__*/React.createElement("div", { | ||
style: { | ||
@@ -70,6 +64,6 @@ backgroundImage: 'linear-gradient(to right, var(--tw-gradient-stops))', | ||
}) { | ||
const rootRef = React__default["default"].useRef(null); | ||
const panelRef = React__default["default"].useRef(null); | ||
const [isOpen, setIsOpen] = useLocalStorage["default"]('tanstackRouterDevtoolsOpen', initialIsOpen); | ||
const [devtoolsHeight, setDevtoolsHeight] = useLocalStorage["default"]('tanstackRouterDevtoolsHeight', null); | ||
const rootRef = React.useRef(null); | ||
const panelRef = React.useRef(null); | ||
const [isOpen, setIsOpen] = useLocalStorage.default('tanstackRouterDevtoolsOpen', initialIsOpen); | ||
const [devtoolsHeight, setDevtoolsHeight] = useLocalStorage.default('tanstackRouterDevtoolsHeight', null); | ||
const [isResolvedOpen, setIsResolvedOpen] = utils.useSafeState(false); | ||
@@ -104,3 +98,3 @@ const [isResizing, setIsResizing] = utils.useSafeState(false); | ||
}; | ||
React__default["default"].useEffect(() => { | ||
React.useEffect(() => { | ||
setIsResolvedOpen(isOpen ?? false); | ||
@@ -111,3 +105,3 @@ }, [isOpen, isResolvedOpen, setIsResolvedOpen]); | ||
// Prevents focusing in a closed panel. | ||
React__default["default"].useEffect(() => { | ||
React.useEffect(() => { | ||
const ref = panelRef.current; | ||
@@ -134,3 +128,3 @@ if (ref) { | ||
}, [isResolvedOpen]); | ||
React__default["default"][isServer ? 'useEffect' : 'useLayoutEffect'](() => { | ||
React[isServer ? 'useEffect' : 'useLayoutEffect'](() => { | ||
if (isResolvedOpen) { | ||
@@ -174,8 +168,8 @@ const previousValue = rootRef.current?.parentElement?.style.paddingBottom; | ||
if (!isMounted()) return null; | ||
return /*#__PURE__*/React__default["default"].createElement(Container, { | ||
return /*#__PURE__*/React.createElement(Container, { | ||
ref: rootRef, | ||
className: "TanStackRouterDevtools" | ||
}, /*#__PURE__*/React__default["default"].createElement(theme.ThemeProvider, { | ||
}, /*#__PURE__*/React.createElement(theme.ThemeProvider, { | ||
theme: theme.defaultTheme | ||
}, /*#__PURE__*/React__default["default"].createElement(TanStackRouterDevtoolsPanel, _rollupPluginBabelHelpers["extends"]({ | ||
}, /*#__PURE__*/React.createElement(TanStackRouterDevtoolsPanel, _rollupPluginBabelHelpers.extends({ | ||
ref: panelRef | ||
@@ -216,3 +210,3 @@ }, otherPanelProps, { | ||
handleDragStart: e => handleDragStart(panelRef.current, e) | ||
})), isResolvedOpen ? /*#__PURE__*/React__default["default"].createElement(styledComponents.Button, _rollupPluginBabelHelpers["extends"]({ | ||
})), isResolvedOpen ? /*#__PURE__*/React.createElement(styledComponents.Button, _rollupPluginBabelHelpers.extends({ | ||
type: "button", | ||
@@ -241,3 +235,3 @@ "aria-label": "Close TanStack Router Devtools" | ||
} | ||
}), "Close") : null), !isResolvedOpen ? /*#__PURE__*/React__default["default"].createElement("button", _rollupPluginBabelHelpers["extends"]({ | ||
}), "Close") : null), !isResolvedOpen ? /*#__PURE__*/React.createElement("button", _rollupPluginBabelHelpers.extends({ | ||
type: "button" | ||
@@ -277,3 +271,3 @@ }, otherToggleButtonProps, { | ||
} | ||
}), /*#__PURE__*/React__default["default"].createElement(Logo, { | ||
}), /*#__PURE__*/React.createElement(Logo, { | ||
"aria-hidden": true | ||
@@ -291,3 +285,3 @@ })) : null); | ||
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", { | ||
return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("div", { | ||
role: "button", | ||
@@ -307,3 +301,3 @@ "aria-label": `Open match details for ${route.id}`, | ||
} | ||
}, isRoot ? null : /*#__PURE__*/React__default["default"].createElement("div", { | ||
}, isRoot ? null : /*#__PURE__*/React.createElement("div", { | ||
style: { | ||
@@ -322,3 +316,3 @@ flex: '0 0 auto', | ||
} | ||
}), /*#__PURE__*/React__default["default"].createElement(styledComponents.Code, { | ||
}), /*#__PURE__*/React.createElement(styledComponents.Code, { | ||
style: { | ||
@@ -333,7 +327,7 @@ flex: '1 0 auto', | ||
} | ||
}, /*#__PURE__*/React__default["default"].createElement("span", null, route.path || reactRouter.trimPath(route.id), " "), match ? /*#__PURE__*/React__default["default"].createElement("span", { | ||
}, /*#__PURE__*/React.createElement("span", null, route.path || reactRouter.trimPath(route.id), " "), match ? /*#__PURE__*/React.createElement("span", { | ||
style: { | ||
opacity: 0.3 | ||
} | ||
}, match.id) : null)), route.children?.length ? /*#__PURE__*/React__default["default"].createElement("div", { | ||
}, match.id) : null)), route.children?.length ? /*#__PURE__*/React.createElement("div", { | ||
style: { | ||
@@ -345,3 +339,3 @@ marginLeft: isRoot ? 0 : '1rem', | ||
return a.rank - b.rank; | ||
}).map(r => /*#__PURE__*/React__default["default"].createElement(RouteComp, { | ||
}).map(r => /*#__PURE__*/React.createElement(RouteComp, { | ||
key: r.id, | ||
@@ -353,3 +347,3 @@ route: r, | ||
} | ||
const TanStackRouterDevtoolsPanel = /*#__PURE__*/React__default["default"].forwardRef(function TanStackRouterDevtoolsPanel(props, ref) { | ||
const TanStackRouterDevtoolsPanel = /*#__PURE__*/React.forwardRef(function TanStackRouterDevtoolsPanel(props, ref) { | ||
const { | ||
@@ -368,5 +362,5 @@ isOpen = true, | ||
const [showMatches, setShowMatches] = useLocalStorage["default"]('tanstackRouterDevtoolsShowMatches', true); | ||
const [activeRouteId, setActiveRouteId] = useLocalStorage["default"]('tanstackRouterDevtoolsActiveRouteId', ''); | ||
const activeMatch = React__default["default"].useMemo(() => matches.find(d => d.routeId === activeRouteId), [matches, activeRouteId]); | ||
const [showMatches, setShowMatches] = useLocalStorage.default('tanstackRouterDevtoolsShowMatches', true); | ||
const [activeRouteId, setActiveRouteId] = useLocalStorage.default('tanstackRouterDevtoolsActiveRouteId', ''); | ||
const activeMatch = React.useMemo(() => matches.find(d => d.routeId === activeRouteId), [matches, activeRouteId]); | ||
const hasSearch = Object.keys(router.state.location.search || {}).length; | ||
@@ -389,8 +383,8 @@ | ||
return /*#__PURE__*/React__default["default"].createElement(theme.ThemeProvider, { | ||
return /*#__PURE__*/React.createElement(theme.ThemeProvider, { | ||
theme: theme.defaultTheme | ||
}, /*#__PURE__*/React__default["default"].createElement(styledComponents.Panel, _rollupPluginBabelHelpers["extends"]({ | ||
}, /*#__PURE__*/React.createElement(styledComponents.Panel, _rollupPluginBabelHelpers.extends({ | ||
ref: ref, | ||
className: "TanStackRouterDevtoolsPanel" | ||
}, panelProps), /*#__PURE__*/React__default["default"].createElement("style", { | ||
}, panelProps), /*#__PURE__*/React.createElement("style", { | ||
dangerouslySetInnerHTML: { | ||
@@ -441,3 +435,3 @@ __html: ` | ||
} | ||
}), /*#__PURE__*/React__default["default"].createElement("div", { | ||
}), /*#__PURE__*/React.createElement("div", { | ||
style: { | ||
@@ -454,3 +448,3 @@ position: 'absolute', | ||
onMouseDown: handleDragStart | ||
}), /*#__PURE__*/React__default["default"].createElement("div", { | ||
}), /*#__PURE__*/React.createElement("div", { | ||
style: { | ||
@@ -465,3 +459,3 @@ flex: '1 1 500px', | ||
} | ||
}, /*#__PURE__*/React__default["default"].createElement("div", { | ||
}, /*#__PURE__*/React.createElement("div", { | ||
style: { | ||
@@ -475,5 +469,5 @@ display: 'flex', | ||
} | ||
}, /*#__PURE__*/React__default["default"].createElement(Logo, { | ||
}, /*#__PURE__*/React.createElement(Logo, { | ||
"aria-hidden": true | ||
}), /*#__PURE__*/React__default["default"].createElement("div", { | ||
}), /*#__PURE__*/React.createElement("div", { | ||
style: { | ||
@@ -483,7 +477,7 @@ fontSize: 'clamp(.8rem, 2vw, 1.3rem)', | ||
} | ||
}, /*#__PURE__*/React__default["default"].createElement("span", { | ||
}, /*#__PURE__*/React.createElement("span", { | ||
style: { | ||
fontWeight: 100 | ||
} | ||
}, "Devtools"))), /*#__PURE__*/React__default["default"].createElement("div", { | ||
}, "Devtools"))), /*#__PURE__*/React.createElement("div", { | ||
style: { | ||
@@ -493,7 +487,7 @@ overflowY: 'auto', | ||
} | ||
}, /*#__PURE__*/React__default["default"].createElement("div", { | ||
}, /*#__PURE__*/React.createElement("div", { | ||
style: { | ||
padding: '.5em' | ||
} | ||
}, /*#__PURE__*/React__default["default"].createElement(Explorer["default"], { | ||
}, /*#__PURE__*/React.createElement(Explorer.default, { | ||
label: "Router", | ||
@@ -508,3 +502,3 @@ value: router, | ||
} | ||
})))), /*#__PURE__*/React__default["default"].createElement("div", { | ||
})))), /*#__PURE__*/React.createElement("div", { | ||
style: { | ||
@@ -519,3 +513,3 @@ flex: '1 1 500px', | ||
} | ||
}, /*#__PURE__*/React__default["default"].createElement("div", { | ||
}, /*#__PURE__*/React.createElement("div", { | ||
style: { | ||
@@ -525,3 +519,3 @@ flex: '1 1 auto', | ||
} | ||
}, /*#__PURE__*/React__default["default"].createElement("div", { | ||
}, /*#__PURE__*/React.createElement("div", { | ||
style: { | ||
@@ -538,3 +532,3 @@ padding: '.5em', | ||
} | ||
}, "Pathname", ' ', router.state.location.maskedLocation ? /*#__PURE__*/React__default["default"].createElement("div", { | ||
}, "Pathname", ' ', router.state.location.maskedLocation ? /*#__PURE__*/React.createElement("div", { | ||
style: { | ||
@@ -546,3 +540,3 @@ padding: '.1rem .5rem', | ||
} | ||
}, "Masked") : null), /*#__PURE__*/React__default["default"].createElement("div", { | ||
}, "Masked") : null), /*#__PURE__*/React.createElement("div", { | ||
style: { | ||
@@ -554,7 +548,7 @@ padding: '.5rem', | ||
} | ||
}, /*#__PURE__*/React__default["default"].createElement("code", { | ||
}, /*#__PURE__*/React.createElement("code", { | ||
style: { | ||
opacity: 0.6 | ||
} | ||
}, router.state.location.pathname), router.state.location.maskedLocation ? /*#__PURE__*/React__default["default"].createElement("code", { | ||
}, router.state.location.pathname), router.state.location.maskedLocation ? /*#__PURE__*/React.createElement("code", { | ||
style: { | ||
@@ -564,3 +558,3 @@ color: theme.defaultTheme.warning, | ||
} | ||
}, router.state.location.maskedLocation.pathname) : null), /*#__PURE__*/React__default["default"].createElement("div", { | ||
}, router.state.location.maskedLocation.pathname) : null), /*#__PURE__*/React.createElement("div", { | ||
style: { | ||
@@ -577,3 +571,3 @@ padding: '.5em', | ||
} | ||
}, /*#__PURE__*/React__default["default"].createElement("button", { | ||
}, /*#__PURE__*/React.createElement("button", { | ||
type: "button", | ||
@@ -592,3 +586,3 @@ onClick: () => { | ||
} | ||
}, "Routes"), "/", /*#__PURE__*/React__default["default"].createElement("button", { | ||
}, "Routes"), "/", /*#__PURE__*/React.createElement("button", { | ||
type: "button", | ||
@@ -607,3 +601,3 @@ onClick: () => { | ||
} | ||
}, "Matches")), !showMatches ? /*#__PURE__*/React__default["default"].createElement(RouteComp, { | ||
}, "Matches")), !showMatches ? /*#__PURE__*/React.createElement(RouteComp, { | ||
route: router.routeTree, | ||
@@ -613,4 +607,4 @@ isRoot: true, | ||
setActiveRouteId: setActiveRouteId | ||
}) : /*#__PURE__*/React__default["default"].createElement("div", null, (router.state.status === 'pending' ? router.state.pendingMatches : router.state.matches).map((match, i) => { | ||
return /*#__PURE__*/React__default["default"].createElement("div", { | ||
}) : /*#__PURE__*/React.createElement("div", null, (router.state.status === 'pending' ? router.state.pendingMatches : router.state.matches).map((match, i) => { | ||
return /*#__PURE__*/React.createElement("div", { | ||
key: match.routeId || i, | ||
@@ -627,3 +621,3 @@ role: "button", | ||
} | ||
}, /*#__PURE__*/React__default["default"].createElement("div", { | ||
}, /*#__PURE__*/React.createElement("div", { | ||
style: { | ||
@@ -641,3 +635,3 @@ flex: '0 0 auto', | ||
} | ||
}), /*#__PURE__*/React__default["default"].createElement(styledComponents.Code, { | ||
}), /*#__PURE__*/React.createElement(styledComponents.Code, { | ||
style: { | ||
@@ -648,3 +642,3 @@ padding: '.5em', | ||
}, `${match.id}`)); | ||
})))), activeMatch ? /*#__PURE__*/React__default["default"].createElement(styledComponents.ActivePanel, null, /*#__PURE__*/React__default["default"].createElement("div", { | ||
})))), activeMatch ? /*#__PURE__*/React.createElement(styledComponents.ActivePanel, null, /*#__PURE__*/React.createElement("div", { | ||
style: { | ||
@@ -658,19 +652,19 @@ padding: '.5em', | ||
} | ||
}, "Match Details"), /*#__PURE__*/React__default["default"].createElement("div", null, /*#__PURE__*/React__default["default"].createElement("table", null, /*#__PURE__*/React__default["default"].createElement("tbody", null, /*#__PURE__*/React__default["default"].createElement("tr", null, /*#__PURE__*/React__default["default"].createElement("td", { | ||
}, "Match Details"), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("table", null, /*#__PURE__*/React.createElement("tbody", null, /*#__PURE__*/React.createElement("tr", null, /*#__PURE__*/React.createElement("td", { | ||
style: { | ||
opacity: '.5' | ||
} | ||
}, "ID"), /*#__PURE__*/React__default["default"].createElement("td", null, /*#__PURE__*/React__default["default"].createElement(styledComponents.Code, { | ||
}, "ID"), /*#__PURE__*/React.createElement("td", null, /*#__PURE__*/React.createElement(styledComponents.Code, { | ||
style: { | ||
lineHeight: '1.8em' | ||
} | ||
}, JSON.stringify(activeMatch.id, null, 2)))), /*#__PURE__*/React__default["default"].createElement("tr", null, /*#__PURE__*/React__default["default"].createElement("td", { | ||
}, JSON.stringify(activeMatch.id, null, 2)))), /*#__PURE__*/React.createElement("tr", null, /*#__PURE__*/React.createElement("td", { | ||
style: { | ||
opacity: '.5' | ||
} | ||
}, "Status"), /*#__PURE__*/React__default["default"].createElement("td", null, activeMatch.status)), /*#__PURE__*/React__default["default"].createElement("tr", null, /*#__PURE__*/React__default["default"].createElement("td", { | ||
}, "Status"), /*#__PURE__*/React.createElement("td", null, activeMatch.status)), /*#__PURE__*/React.createElement("tr", null, /*#__PURE__*/React.createElement("td", { | ||
style: { | ||
opacity: '.5' | ||
} | ||
}, "Last Updated"), /*#__PURE__*/React__default["default"].createElement("td", null, activeMatch.updatedAt ? new Date(activeMatch.updatedAt).toLocaleTimeString() : 'N/A'))))), activeMatch.loaderData ? /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement("div", { | ||
}, "Last Updated"), /*#__PURE__*/React.createElement("td", null, activeMatch.updatedAt ? new Date(activeMatch.updatedAt).toLocaleTimeString() : 'N/A'))))), activeMatch.loaderData ? /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", { | ||
style: { | ||
@@ -684,11 +678,11 @@ background: theme.defaultTheme.backgroundAlt, | ||
} | ||
}, "Loader Data"), /*#__PURE__*/React__default["default"].createElement("div", { | ||
}, "Loader Data"), /*#__PURE__*/React.createElement("div", { | ||
style: { | ||
padding: '.5em' | ||
} | ||
}, /*#__PURE__*/React__default["default"].createElement(Explorer["default"], { | ||
}, /*#__PURE__*/React.createElement(Explorer.default, { | ||
label: "loaderData", | ||
value: activeMatch.loaderData, | ||
defaultExpanded: {} | ||
}))) : null, /*#__PURE__*/React__default["default"].createElement("div", { | ||
}))) : null, /*#__PURE__*/React.createElement("div", { | ||
style: { | ||
@@ -702,11 +696,11 @@ background: theme.defaultTheme.backgroundAlt, | ||
} | ||
}, "Explorer"), /*#__PURE__*/React__default["default"].createElement("div", { | ||
}, "Explorer"), /*#__PURE__*/React.createElement("div", { | ||
style: { | ||
padding: '.5em' | ||
} | ||
}, /*#__PURE__*/React__default["default"].createElement(Explorer["default"], { | ||
}, /*#__PURE__*/React.createElement(Explorer.default, { | ||
label: "Match", | ||
value: activeMatch, | ||
defaultExpanded: {} | ||
}))) : null, hasSearch ? /*#__PURE__*/React__default["default"].createElement("div", { | ||
}))) : null, hasSearch ? /*#__PURE__*/React.createElement("div", { | ||
style: { | ||
@@ -721,3 +715,3 @@ flex: '1 1 500px', | ||
} | ||
}, /*#__PURE__*/React__default["default"].createElement("div", { | ||
}, /*#__PURE__*/React.createElement("div", { | ||
style: { | ||
@@ -732,7 +726,7 @@ padding: '.5em', | ||
} | ||
}, "Search Params"), /*#__PURE__*/React__default["default"].createElement("div", { | ||
}, "Search Params"), /*#__PURE__*/React.createElement("div", { | ||
style: { | ||
padding: '.5em' | ||
} | ||
}, /*#__PURE__*/React__default["default"].createElement(Explorer["default"], { | ||
}, /*#__PURE__*/React.createElement(Explorer.default, { | ||
value: router.state.location.search || {}, | ||
@@ -739,0 +733,0 @@ defaultExpanded: Object.keys(router.state.location.search || {}).reduce((obj, next) => { |
@@ -19,4 +19,3 @@ /** | ||
function _interopNamespace(e) { | ||
if (e && e.__esModule) return e; | ||
function _interopNamespaceDefault(e) { | ||
var n = Object.create(null); | ||
@@ -34,7 +33,7 @@ if (e) { | ||
} | ||
n["default"] = e; | ||
n.default = e; | ||
return Object.freeze(n); | ||
} | ||
var React__namespace = /*#__PURE__*/_interopNamespace(React); | ||
var React__namespace = /*#__PURE__*/_interopNamespaceDefault(React); | ||
@@ -193,3 +192,3 @@ const Entry = utils.styled('div', { | ||
return renderer({ | ||
handleEntry: entry => /*#__PURE__*/React__namespace.createElement(Explorer, _rollupPluginBabelHelpers["extends"]({ | ||
handleEntry: entry => /*#__PURE__*/React__namespace.createElement(Explorer, _rollupPluginBabelHelpers.extends({ | ||
key: entry.label, | ||
@@ -221,3 +220,3 @@ value: value, | ||
exports.chunkArray = chunkArray; | ||
exports["default"] = Explorer; | ||
exports.default = Explorer; | ||
//# sourceMappingURL=Explorer.js.map |
@@ -13,4 +13,2 @@ /** | ||
Object.defineProperty(exports, '__esModule', { value: true }); | ||
var devtools = require('./devtools.js'); | ||
@@ -17,0 +15,0 @@ |
@@ -13,4 +13,2 @@ /** | ||
Object.defineProperty(exports, '__esModule', { value: true }); | ||
var utils = require('./utils.js'); | ||
@@ -33,3 +31,2 @@ | ||
}); | ||
const ActivePanel = utils.styled('div', () => ({ | ||
@@ -36,0 +33,0 @@ flex: '1 1 500px', |
@@ -13,11 +13,5 @@ /** | ||
Object.defineProperty(exports, '__esModule', { value: true }); | ||
var _rollupPluginBabelHelpers = require('./_virtual/_rollupPluginBabelHelpers.js'); | ||
var React = require('react'); | ||
function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; } | ||
var React__default = /*#__PURE__*/_interopDefaultLegacy(React); | ||
const defaultTheme = { | ||
@@ -36,3 +30,3 @@ background: '#0b1521', | ||
}; | ||
const ThemeContext = /*#__PURE__*/React__default["default"].createContext(defaultTheme); | ||
const ThemeContext = /*#__PURE__*/React.createContext(defaultTheme); | ||
function ThemeProvider({ | ||
@@ -42,3 +36,3 @@ theme, | ||
}) { | ||
return /*#__PURE__*/React__default["default"].createElement(ThemeContext.Provider, _rollupPluginBabelHelpers["extends"]({ | ||
return /*#__PURE__*/React.createElement(ThemeContext.Provider, _rollupPluginBabelHelpers.extends({ | ||
value: theme | ||
@@ -48,3 +42,3 @@ }, rest)); | ||
function useTheme() { | ||
return React__default["default"].useContext(ThemeContext); | ||
return React.useContext(ThemeContext); | ||
} | ||
@@ -51,0 +45,0 @@ |
@@ -17,6 +17,2 @@ /** | ||
function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; } | ||
var React__default = /*#__PURE__*/_interopDefaultLegacy(React); | ||
const getItem = key => { | ||
@@ -34,4 +30,4 @@ try { | ||
function useLocalStorage(key, defaultValue) { | ||
const [value, setValue] = React__default["default"].useState(); | ||
React__default["default"].useEffect(() => { | ||
const [value, setValue] = React.useState(); | ||
React.useEffect(() => { | ||
const initialValue = getItem(key); | ||
@@ -44,3 +40,3 @@ if (typeof initialValue === 'undefined' || initialValue === null) { | ||
}, [defaultValue, key]); | ||
const setter = React__default["default"].useCallback(updater => { | ||
const setter = React.useCallback(updater => { | ||
setValue(old => { | ||
@@ -60,3 +56,3 @@ let newVal = updater; | ||
exports["default"] = useLocalStorage; | ||
exports.default = useLocalStorage; | ||
//# sourceMappingURL=useLocalStorage.js.map |
@@ -17,9 +17,5 @@ /** | ||
function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; } | ||
var React__default = /*#__PURE__*/_interopDefaultLegacy(React); | ||
function useMediaQuery(query) { | ||
// Keep track of the preference in state, start with the current match | ||
const [isMatch, setIsMatch] = React__default["default"].useState(() => { | ||
const [isMatch, setIsMatch] = React.useState(() => { | ||
if (typeof window !== 'undefined') { | ||
@@ -32,3 +28,3 @@ return window.matchMedia && window.matchMedia(query).matches; | ||
// Watch for changes | ||
React__default["default"].useEffect(() => { | ||
React.useEffect(() => { | ||
if (typeof window !== 'undefined') { | ||
@@ -59,3 +55,3 @@ if (!window.matchMedia) { | ||
exports["default"] = useMediaQuery; | ||
exports.default = useMediaQuery; | ||
//# sourceMappingURL=useMediaQuery.js.map |
@@ -13,4 +13,2 @@ /** | ||
Object.defineProperty(exports, '__esModule', { value: true }); | ||
var React = require('react'); | ||
@@ -20,6 +18,2 @@ var theme = require('./theme.js'); | ||
function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; } | ||
var React__default = /*#__PURE__*/_interopDefaultLegacy(React); | ||
const isServer = typeof window === 'undefined'; | ||
@@ -35,3 +29,3 @@ function getStatusColor(match, theme) { | ||
function styled(type, newStyles, queries = {}) { | ||
return /*#__PURE__*/React__default["default"].forwardRef(({ | ||
return /*#__PURE__*/React.forwardRef(({ | ||
style, | ||
@@ -43,3 +37,3 @@ ...rest | ||
// eslint-disable-next-line react-hooks/rules-of-hooks | ||
return useMediaQuery["default"](key) ? { | ||
return useMediaQuery.default(key) ? { | ||
...current, | ||
@@ -49,3 +43,3 @@ ...(typeof value === 'function' ? value(rest, theme$1) : value) | ||
}, {}); | ||
return /*#__PURE__*/React__default["default"].createElement(type, { | ||
return /*#__PURE__*/React.createElement(type, { | ||
...rest, | ||
@@ -62,5 +56,5 @@ style: { | ||
function useIsMounted() { | ||
const mountedRef = React__default["default"].useRef(false); | ||
const isMounted = React__default["default"].useCallback(() => mountedRef.current, []); | ||
React__default["default"][isServer ? 'useEffect' : 'useLayoutEffect'](() => { | ||
const mountedRef = React.useRef(false); | ||
const isMounted = React.useCallback(() => mountedRef.current, []); | ||
React[isServer ? 'useEffect' : 'useLayoutEffect'](() => { | ||
mountedRef.current = true; | ||
@@ -91,4 +85,4 @@ return () => { | ||
const isMounted = useIsMounted(); | ||
const [state, setState] = React__default["default"].useState(initialState); | ||
const safeSetState = React__default["default"].useCallback(value => { | ||
const [state, setState] = React.useState(initialState); | ||
const safeSetState = React.useCallback(value => { | ||
scheduleMicrotask(() => { | ||
@@ -95,0 +89,0 @@ if (isMounted()) { |
@@ -226,3 +226,2 @@ /** | ||
}); | ||
const ActivePanel = styled('div', () => ({ | ||
@@ -229,0 +228,0 @@ flex: '1 1 500px', |
@@ -10,8 +10,17 @@ { | ||
{ | ||
"uid": "53f3-138", | ||
"uid": "600f-139", | ||
"name": "\u0000rollupPluginBabelHelpers.js" | ||
}, | ||
{ | ||
"name": "node_modules/.pnpm/tiny-invariant@1.3.1/node_modules/tiny-invariant/dist/esm/tiny-invariant.js", | ||
"uid": "53f3-140" | ||
"name": "node_modules/.pnpm", | ||
"children": [ | ||
{ | ||
"name": "tiny-invariant@1.3.1/node_modules/tiny-invariant/dist/esm/tiny-invariant.js", | ||
"uid": "600f-141" | ||
}, | ||
{ | ||
"name": "tiny-warning@1.0.3/node_modules/tiny-warning/dist/tiny-warning.esm.js", | ||
"uid": "600f-143" | ||
} | ||
] | ||
}, | ||
@@ -23,3 +32,3 @@ { | ||
"name": "react-router/build/esm/index.js", | ||
"uid": "53f3-142" | ||
"uid": "600f-145" | ||
}, | ||
@@ -30,31 +39,31 @@ { | ||
{ | ||
"uid": "53f3-144", | ||
"uid": "600f-147", | ||
"name": "useLocalStorage.ts" | ||
}, | ||
{ | ||
"uid": "53f3-146", | ||
"uid": "600f-149", | ||
"name": "theme.tsx" | ||
}, | ||
{ | ||
"uid": "53f3-148", | ||
"uid": "600f-151", | ||
"name": "useMediaQuery.ts" | ||
}, | ||
{ | ||
"uid": "53f3-150", | ||
"uid": "600f-153", | ||
"name": "utils.ts" | ||
}, | ||
{ | ||
"uid": "53f3-152", | ||
"uid": "600f-155", | ||
"name": "styledComponents.ts" | ||
}, | ||
{ | ||
"uid": "53f3-154", | ||
"uid": "600f-157", | ||
"name": "Explorer.tsx" | ||
}, | ||
{ | ||
"uid": "53f3-156", | ||
"uid": "600f-159", | ||
"name": "devtools.tsx" | ||
}, | ||
{ | ||
"uid": "53f3-158", | ||
"uid": "600f-161", | ||
"name": "index.tsx" | ||
@@ -72,74 +81,80 @@ } | ||
"nodeParts": { | ||
"53f3-138": { | ||
"600f-139": { | ||
"renderedLength": 429, | ||
"gzipLength": 238, | ||
"brotliLength": 0, | ||
"mainUid": "53f3-137" | ||
"metaUid": "600f-138" | ||
}, | ||
"53f3-140": { | ||
"renderedLength": 181, | ||
"gzipLength": 129, | ||
"600f-141": { | ||
"renderedLength": 439, | ||
"gzipLength": 227, | ||
"brotliLength": 0, | ||
"mainUid": "53f3-139" | ||
"metaUid": "600f-140" | ||
}, | ||
"53f3-142": { | ||
"renderedLength": 1792, | ||
"gzipLength": 760, | ||
"600f-143": { | ||
"renderedLength": 357, | ||
"gzipLength": 203, | ||
"brotliLength": 0, | ||
"mainUid": "53f3-141" | ||
"metaUid": "600f-142" | ||
}, | ||
"53f3-144": { | ||
"renderedLength": 1083, | ||
"gzipLength": 410, | ||
"600f-145": { | ||
"renderedLength": 1876, | ||
"gzipLength": 805, | ||
"brotliLength": 0, | ||
"mainUid": "53f3-143" | ||
"metaUid": "600f-144" | ||
}, | ||
"53f3-146": { | ||
"renderedLength": 686, | ||
"gzipLength": 344, | ||
"600f-147": { | ||
"renderedLength": 1023, | ||
"gzipLength": 398, | ||
"brotliLength": 0, | ||
"mainUid": "53f3-145" | ||
"metaUid": "600f-146" | ||
}, | ||
"53f3-148": { | ||
"renderedLength": 970, | ||
"gzipLength": 386, | ||
"600f-149": { | ||
"renderedLength": 626, | ||
"gzipLength": 329, | ||
"brotliLength": 0, | ||
"mainUid": "53f3-147" | ||
"metaUid": "600f-148" | ||
}, | ||
"53f3-150": { | ||
"renderedLength": 2893, | ||
"gzipLength": 1122, | ||
"600f-151": { | ||
"renderedLength": 930, | ||
"gzipLength": 372, | ||
"brotliLength": 0, | ||
"mainUid": "53f3-149" | ||
"metaUid": "600f-150" | ||
}, | ||
"53f3-152": { | ||
"renderedLength": 1378, | ||
"gzipLength": 576, | ||
"600f-153": { | ||
"renderedLength": 2753, | ||
"gzipLength": 1101, | ||
"brotliLength": 0, | ||
"mainUid": "53f3-151" | ||
"metaUid": "600f-152" | ||
}, | ||
"53f3-154": { | ||
"600f-155": { | ||
"renderedLength": 1377, | ||
"gzipLength": 574, | ||
"brotliLength": 0, | ||
"metaUid": "600f-154" | ||
}, | ||
"600f-157": { | ||
"renderedLength": 6243, | ||
"gzipLength": 1853, | ||
"brotliLength": 0, | ||
"mainUid": "53f3-153" | ||
"metaUid": "600f-156" | ||
}, | ||
"53f3-156": { | ||
"renderedLength": 23890, | ||
"gzipLength": 4498, | ||
"600f-159": { | ||
"renderedLength": 22506, | ||
"gzipLength": 4547, | ||
"brotliLength": 0, | ||
"mainUid": "53f3-155" | ||
"metaUid": "600f-158" | ||
}, | ||
"53f3-158": { | ||
"600f-161": { | ||
"renderedLength": 0, | ||
"gzipLength": 0, | ||
"brotliLength": 0, | ||
"mainUid": "53f3-157" | ||
"metaUid": "600f-160" | ||
} | ||
}, | ||
"nodeMetas": { | ||
"53f3-137": { | ||
"600f-138": { | ||
"id": "\u0000rollupPluginBabelHelpers.js", | ||
"moduleParts": { | ||
"index.production.js": "53f3-138" | ||
"index.production.js": "600f-139" | ||
}, | ||
@@ -149,16 +164,16 @@ "imported": [], | ||
{ | ||
"uid": "53f3-155" | ||
"uid": "600f-158" | ||
}, | ||
{ | ||
"uid": "53f3-145" | ||
"uid": "600f-148" | ||
}, | ||
{ | ||
"uid": "53f3-153" | ||
"uid": "600f-156" | ||
} | ||
] | ||
}, | ||
"53f3-139": { | ||
"600f-140": { | ||
"id": "/node_modules/.pnpm/tiny-invariant@1.3.1/node_modules/tiny-invariant/dist/esm/tiny-invariant.js", | ||
"moduleParts": { | ||
"index.production.js": "53f3-140" | ||
"index.production.js": "600f-141" | ||
}, | ||
@@ -168,23 +183,35 @@ "imported": [], | ||
{ | ||
"uid": "53f3-141" | ||
"uid": "600f-144" | ||
} | ||
] | ||
}, | ||
"53f3-141": { | ||
"600f-142": { | ||
"id": "/node_modules/.pnpm/tiny-warning@1.0.3/node_modules/tiny-warning/dist/tiny-warning.esm.js", | ||
"moduleParts": { | ||
"index.production.js": "600f-143" | ||
}, | ||
"imported": [], | ||
"importedBy": [ | ||
{ | ||
"uid": "600f-144" | ||
} | ||
] | ||
}, | ||
"600f-144": { | ||
"id": "/packages/react-router/build/esm/index.js", | ||
"moduleParts": { | ||
"index.production.js": "53f3-142" | ||
"index.production.js": "600f-145" | ||
}, | ||
"imported": [ | ||
{ | ||
"uid": "53f3-160" | ||
"uid": "600f-163" | ||
}, | ||
{ | ||
"uid": "53f3-139" | ||
"uid": "600f-140" | ||
}, | ||
{ | ||
"uid": "53f3-161" | ||
"uid": "600f-142" | ||
}, | ||
{ | ||
"uid": "53f3-159" | ||
"uid": "600f-162" | ||
} | ||
@@ -194,14 +221,14 @@ ], | ||
{ | ||
"uid": "53f3-155" | ||
"uid": "600f-158" | ||
} | ||
] | ||
}, | ||
"53f3-143": { | ||
"600f-146": { | ||
"id": "/packages/router-devtools/src/useLocalStorage.ts", | ||
"moduleParts": { | ||
"index.production.js": "53f3-144" | ||
"index.production.js": "600f-147" | ||
}, | ||
"imported": [ | ||
{ | ||
"uid": "53f3-159" | ||
"uid": "600f-162" | ||
} | ||
@@ -211,17 +238,17 @@ ], | ||
{ | ||
"uid": "53f3-155" | ||
"uid": "600f-158" | ||
} | ||
] | ||
}, | ||
"53f3-145": { | ||
"600f-148": { | ||
"id": "/packages/router-devtools/src/theme.tsx", | ||
"moduleParts": { | ||
"index.production.js": "53f3-146" | ||
"index.production.js": "600f-149" | ||
}, | ||
"imported": [ | ||
{ | ||
"uid": "53f3-137" | ||
"uid": "600f-138" | ||
}, | ||
{ | ||
"uid": "53f3-159" | ||
"uid": "600f-162" | ||
} | ||
@@ -231,17 +258,17 @@ ], | ||
{ | ||
"uid": "53f3-155" | ||
"uid": "600f-158" | ||
}, | ||
{ | ||
"uid": "53f3-149" | ||
"uid": "600f-152" | ||
} | ||
] | ||
}, | ||
"53f3-147": { | ||
"600f-150": { | ||
"id": "/packages/router-devtools/src/useMediaQuery.ts", | ||
"moduleParts": { | ||
"index.production.js": "53f3-148" | ||
"index.production.js": "600f-151" | ||
}, | ||
"imported": [ | ||
{ | ||
"uid": "53f3-159" | ||
"uid": "600f-162" | ||
} | ||
@@ -251,20 +278,20 @@ ], | ||
{ | ||
"uid": "53f3-149" | ||
"uid": "600f-152" | ||
} | ||
] | ||
}, | ||
"53f3-149": { | ||
"600f-152": { | ||
"id": "/packages/router-devtools/src/utils.ts", | ||
"moduleParts": { | ||
"index.production.js": "53f3-150" | ||
"index.production.js": "600f-153" | ||
}, | ||
"imported": [ | ||
{ | ||
"uid": "53f3-159" | ||
"uid": "600f-162" | ||
}, | ||
{ | ||
"uid": "53f3-145" | ||
"uid": "600f-148" | ||
}, | ||
{ | ||
"uid": "53f3-147" | ||
"uid": "600f-150" | ||
} | ||
@@ -274,20 +301,20 @@ ], | ||
{ | ||
"uid": "53f3-155" | ||
"uid": "600f-158" | ||
}, | ||
{ | ||
"uid": "53f3-151" | ||
"uid": "600f-154" | ||
}, | ||
{ | ||
"uid": "53f3-153" | ||
"uid": "600f-156" | ||
} | ||
] | ||
}, | ||
"53f3-151": { | ||
"600f-154": { | ||
"id": "/packages/router-devtools/src/styledComponents.ts", | ||
"moduleParts": { | ||
"index.production.js": "53f3-152" | ||
"index.production.js": "600f-155" | ||
}, | ||
"imported": [ | ||
{ | ||
"uid": "53f3-149" | ||
"uid": "600f-152" | ||
} | ||
@@ -297,20 +324,20 @@ ], | ||
{ | ||
"uid": "53f3-155" | ||
"uid": "600f-158" | ||
} | ||
] | ||
}, | ||
"53f3-153": { | ||
"600f-156": { | ||
"id": "/packages/router-devtools/src/Explorer.tsx", | ||
"moduleParts": { | ||
"index.production.js": "53f3-154" | ||
"index.production.js": "600f-157" | ||
}, | ||
"imported": [ | ||
{ | ||
"uid": "53f3-137" | ||
"uid": "600f-138" | ||
}, | ||
{ | ||
"uid": "53f3-159" | ||
"uid": "600f-162" | ||
}, | ||
{ | ||
"uid": "53f3-149" | ||
"uid": "600f-152" | ||
} | ||
@@ -320,35 +347,35 @@ ], | ||
{ | ||
"uid": "53f3-155" | ||
"uid": "600f-158" | ||
} | ||
] | ||
}, | ||
"53f3-155": { | ||
"600f-158": { | ||
"id": "/packages/router-devtools/src/devtools.tsx", | ||
"moduleParts": { | ||
"index.production.js": "53f3-156" | ||
"index.production.js": "600f-159" | ||
}, | ||
"imported": [ | ||
{ | ||
"uid": "53f3-137" | ||
"uid": "600f-138" | ||
}, | ||
{ | ||
"uid": "53f3-159" | ||
"uid": "600f-162" | ||
}, | ||
{ | ||
"uid": "53f3-141" | ||
"uid": "600f-144" | ||
}, | ||
{ | ||
"uid": "53f3-143" | ||
"uid": "600f-146" | ||
}, | ||
{ | ||
"uid": "53f3-149" | ||
"uid": "600f-152" | ||
}, | ||
{ | ||
"uid": "53f3-151" | ||
"uid": "600f-154" | ||
}, | ||
{ | ||
"uid": "53f3-145" | ||
"uid": "600f-148" | ||
}, | ||
{ | ||
"uid": "53f3-153" | ||
"uid": "600f-156" | ||
} | ||
@@ -358,14 +385,14 @@ ], | ||
{ | ||
"uid": "53f3-157" | ||
"uid": "600f-160" | ||
} | ||
] | ||
}, | ||
"53f3-157": { | ||
"600f-160": { | ||
"id": "/packages/router-devtools/src/index.tsx", | ||
"moduleParts": { | ||
"index.production.js": "53f3-158" | ||
"index.production.js": "600f-161" | ||
}, | ||
"imported": [ | ||
{ | ||
"uid": "53f3-155" | ||
"uid": "600f-158" | ||
} | ||
@@ -376,3 +403,3 @@ ], | ||
}, | ||
"53f3-159": { | ||
"600f-162": { | ||
"id": "react", | ||
@@ -383,21 +410,21 @@ "moduleParts": {}, | ||
{ | ||
"uid": "53f3-155" | ||
"uid": "600f-158" | ||
}, | ||
{ | ||
"uid": "53f3-141" | ||
"uid": "600f-144" | ||
}, | ||
{ | ||
"uid": "53f3-143" | ||
"uid": "600f-146" | ||
}, | ||
{ | ||
"uid": "53f3-149" | ||
"uid": "600f-152" | ||
}, | ||
{ | ||
"uid": "53f3-145" | ||
"uid": "600f-148" | ||
}, | ||
{ | ||
"uid": "53f3-153" | ||
"uid": "600f-156" | ||
}, | ||
{ | ||
"uid": "53f3-147" | ||
"uid": "600f-150" | ||
} | ||
@@ -407,3 +434,3 @@ ], | ||
}, | ||
"53f3-160": { | ||
"600f-163": { | ||
"id": "/packages/history/build/esm/index.js", | ||
@@ -414,19 +441,9 @@ "moduleParts": {}, | ||
{ | ||
"uid": "53f3-141" | ||
"uid": "600f-144" | ||
} | ||
] | ||
}, | ||
"53f3-161": { | ||
"id": "/node_modules/.pnpm/tiny-warning@1.0.3/node_modules/tiny-warning/dist/tiny-warning.esm.js", | ||
"moduleParts": {}, | ||
"imported": [], | ||
"importedBy": [ | ||
{ | ||
"uid": "53f3-141" | ||
} | ||
] | ||
} | ||
}, | ||
"env": { | ||
"rollup": "2.79.1" | ||
"rollup": "4.6.1" | ||
}, | ||
@@ -433,0 +450,0 @@ "options": { |
import * as React from 'react'; | ||
export declare const Entry: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>; | ||
export declare const Label: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLSpanElement> & React.RefAttributes<HTMLSpanElement>>; | ||
export declare const LabelButton: React.ForwardRefExoticComponent<Pick<React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "key" | keyof React.ButtonHTMLAttributes<HTMLButtonElement>> & React.RefAttributes<HTMLButtonElement>>; | ||
export declare const ExpandButton: React.ForwardRefExoticComponent<Pick<React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "key" | keyof React.ButtonHTMLAttributes<HTMLButtonElement>> & React.RefAttributes<HTMLButtonElement>>; | ||
export declare const LabelButton: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref"> & React.RefAttributes<HTMLButtonElement>>; | ||
export declare const ExpandButton: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref"> & React.RefAttributes<HTMLButtonElement>>; | ||
export declare const Value: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLSpanElement> & React.RefAttributes<HTMLSpanElement>>; | ||
@@ -13,3 +13,3 @@ export declare const SubEntries: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>; | ||
}; | ||
export declare const Expander: ({ expanded, style }: ExpanderProps) => JSX.Element; | ||
export declare const Expander: ({ expanded, style }: ExpanderProps) => React.JSX.Element; | ||
type Entry = { | ||
@@ -16,0 +16,0 @@ label: string; |
/// <reference types="react" /> | ||
export declare const Panel: import("react").ForwardRefExoticComponent<import("react").HTMLAttributes<HTMLDivElement> & import("react").RefAttributes<HTMLDivElement>>; | ||
export declare const ActivePanel: import("react").ForwardRefExoticComponent<import("react").HTMLAttributes<HTMLDivElement> & import("react").RefAttributes<HTMLDivElement>>; | ||
export declare const Button: import("react").ForwardRefExoticComponent<Pick<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "key" | keyof import("react").ButtonHTMLAttributes<HTMLButtonElement>> & import("react").RefAttributes<HTMLButtonElement>>; | ||
export declare const Button: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref"> & import("react").RefAttributes<HTMLButtonElement>>; | ||
export declare const Code: import("react").ForwardRefExoticComponent<import("react").HTMLAttributes<HTMLElement> & import("react").RefAttributes<HTMLElement>>; | ||
export declare const Input: import("react").ForwardRefExoticComponent<Pick<import("react").DetailedHTMLProps<import("react").InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, "key" | keyof import("react").InputHTMLAttributes<HTMLInputElement>> & import("react").RefAttributes<HTMLInputElement>>; | ||
export declare const Select: import("react").ForwardRefExoticComponent<Pick<import("react").DetailedHTMLProps<import("react").SelectHTMLAttributes<HTMLSelectElement>, HTMLSelectElement>, "key" | keyof import("react").SelectHTMLAttributes<HTMLSelectElement>> & import("react").RefAttributes<HTMLSelectElement>>; | ||
export declare const Input: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, "ref"> & import("react").RefAttributes<HTMLInputElement>>; | ||
export declare const Select: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").SelectHTMLAttributes<HTMLSelectElement>, HTMLSelectElement>, "ref"> & import("react").RefAttributes<HTMLSelectElement>>; |
@@ -20,3 +20,3 @@ import React from 'react'; | ||
} | ||
export declare function ThemeProvider({ theme, ...rest }: ProviderProps): JSX.Element; | ||
export declare function ThemeProvider({ theme, ...rest }: ProviderProps): React.JSX.Element; | ||
export declare function useTheme(): { | ||
@@ -23,0 +23,0 @@ readonly background: "#0b1521"; |
@@ -17,6 +17,3 @@ /** | ||
function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; } | ||
function _interopNamespace(e) { | ||
if (e && e.__esModule) return e; | ||
function _interopNamespaceDefault(e) { | ||
var n = Object.create(null); | ||
@@ -34,8 +31,7 @@ if (e) { | ||
} | ||
n["default"] = e; | ||
n.default = e; | ||
return Object.freeze(n); | ||
} | ||
var React__namespace = /*#__PURE__*/_interopNamespace(React); | ||
var React__default = /*#__PURE__*/_interopDefaultLegacy(React); | ||
var React__namespace = /*#__PURE__*/_interopNamespaceDefault(React); | ||
@@ -57,2 +53,3 @@ function _extends() { | ||
var isProduction$1 = "development" === 'production'; | ||
var prefix = 'Invariant failed'; | ||
@@ -63,2 +60,5 @@ function invariant(condition, message) { | ||
} | ||
if (isProduction$1) { | ||
throw new Error(prefix); | ||
} | ||
var provided = typeof message === 'function' ? message() : message; | ||
@@ -69,4 +69,5 @@ var value = provided ? "".concat(prefix, ": ").concat(provided) : prefix; | ||
var isProduction = "development" === 'production'; | ||
function warning(condition, message) { | ||
{ | ||
if (!isProduction) { | ||
if (condition) { | ||
@@ -132,2 +133,3 @@ return; | ||
// } | ||
const routerContext = /*#__PURE__*/React__namespace.createContext(null); | ||
@@ -156,4 +158,4 @@ if (typeof document !== 'undefined') { | ||
function useLocalStorage(key, defaultValue) { | ||
const [value, setValue] = React__default["default"].useState(); | ||
React__default["default"].useEffect(() => { | ||
const [value, setValue] = React.useState(); | ||
React.useEffect(() => { | ||
const initialValue = getItem(key); | ||
@@ -166,3 +168,3 @@ if (typeof initialValue === 'undefined' || initialValue === null) { | ||
}, [defaultValue, key]); | ||
const setter = React__default["default"].useCallback(updater => { | ||
const setter = React.useCallback(updater => { | ||
setValue(old => { | ||
@@ -195,3 +197,3 @@ let newVal = updater; | ||
}; | ||
const ThemeContext = /*#__PURE__*/React__default["default"].createContext(defaultTheme); | ||
const ThemeContext = /*#__PURE__*/React.createContext(defaultTheme); | ||
function ThemeProvider({ | ||
@@ -201,3 +203,3 @@ theme, | ||
}) { | ||
return /*#__PURE__*/React__default["default"].createElement(ThemeContext.Provider, _extends({ | ||
return /*#__PURE__*/React.createElement(ThemeContext.Provider, _extends({ | ||
value: theme | ||
@@ -207,3 +209,3 @@ }, rest)); | ||
function useTheme() { | ||
return React__default["default"].useContext(ThemeContext); | ||
return React.useContext(ThemeContext); | ||
} | ||
@@ -213,3 +215,3 @@ | ||
// Keep track of the preference in state, start with the current match | ||
const [isMatch, setIsMatch] = React__default["default"].useState(() => { | ||
const [isMatch, setIsMatch] = React.useState(() => { | ||
if (typeof window !== 'undefined') { | ||
@@ -222,3 +224,3 @@ return window.matchMedia && window.matchMedia(query).matches; | ||
// Watch for changes | ||
React__default["default"].useEffect(() => { | ||
React.useEffect(() => { | ||
if (typeof window !== 'undefined') { | ||
@@ -259,3 +261,3 @@ if (!window.matchMedia) { | ||
function styled(type, newStyles, queries = {}) { | ||
return /*#__PURE__*/React__default["default"].forwardRef(({ | ||
return /*#__PURE__*/React.forwardRef(({ | ||
style, | ||
@@ -272,3 +274,3 @@ ...rest | ||
}, {}); | ||
return /*#__PURE__*/React__default["default"].createElement(type, { | ||
return /*#__PURE__*/React.createElement(type, { | ||
...rest, | ||
@@ -285,5 +287,5 @@ style: { | ||
function useIsMounted() { | ||
const mountedRef = React__default["default"].useRef(false); | ||
const isMounted = React__default["default"].useCallback(() => mountedRef.current, []); | ||
React__default["default"][isServer$1 ? 'useEffect' : 'useLayoutEffect'](() => { | ||
const mountedRef = React.useRef(false); | ||
const isMounted = React.useCallback(() => mountedRef.current, []); | ||
React[isServer$1 ? 'useEffect' : 'useLayoutEffect'](() => { | ||
mountedRef.current = true; | ||
@@ -314,4 +316,4 @@ return () => { | ||
const isMounted = useIsMounted(); | ||
const [state, setState] = React__default["default"].useState(initialState); | ||
const safeSetState = React__default["default"].useCallback(value => { | ||
const [state, setState] = React.useState(initialState); | ||
const safeSetState = React.useCallback(value => { | ||
scheduleMicrotask(() => { | ||
@@ -351,3 +353,2 @@ if (isMounted()) { | ||
}); | ||
const ActivePanel = styled('div', () => ({ | ||
@@ -566,3 +567,3 @@ flex: '1 1 500px', | ||
function Logo(props) { | ||
return /*#__PURE__*/React__default["default"].createElement("div", _extends({}, props, { | ||
return /*#__PURE__*/React.createElement("div", _extends({}, props, { | ||
style: { | ||
@@ -577,7 +578,7 @@ ...(props.style ?? {}), | ||
} | ||
}), /*#__PURE__*/React__default["default"].createElement("div", { | ||
}), /*#__PURE__*/React.createElement("div", { | ||
style: { | ||
letterSpacing: '-0.05rem' | ||
} | ||
}, "TANSTACK"), /*#__PURE__*/React__default["default"].createElement("div", { | ||
}, "TANSTACK"), /*#__PURE__*/React.createElement("div", { | ||
style: { | ||
@@ -605,4 +606,4 @@ backgroundImage: 'linear-gradient(to right, var(--tw-gradient-stops))', | ||
}) { | ||
const rootRef = React__default["default"].useRef(null); | ||
const panelRef = React__default["default"].useRef(null); | ||
const rootRef = React.useRef(null); | ||
const panelRef = React.useRef(null); | ||
const [isOpen, setIsOpen] = useLocalStorage('tanstackRouterDevtoolsOpen', initialIsOpen); | ||
@@ -639,3 +640,3 @@ const [devtoolsHeight, setDevtoolsHeight] = useLocalStorage('tanstackRouterDevtoolsHeight', null); | ||
}; | ||
React__default["default"].useEffect(() => { | ||
React.useEffect(() => { | ||
setIsResolvedOpen(isOpen ?? false); | ||
@@ -646,3 +647,3 @@ }, [isOpen, isResolvedOpen, setIsResolvedOpen]); | ||
// Prevents focusing in a closed panel. | ||
React__default["default"].useEffect(() => { | ||
React.useEffect(() => { | ||
const ref = panelRef.current; | ||
@@ -669,3 +670,3 @@ if (ref) { | ||
}, [isResolvedOpen]); | ||
React__default["default"][isServer ? 'useEffect' : 'useLayoutEffect'](() => { | ||
React[isServer ? 'useEffect' : 'useLayoutEffect'](() => { | ||
if (isResolvedOpen) { | ||
@@ -709,8 +710,8 @@ const previousValue = rootRef.current?.parentElement?.style.paddingBottom; | ||
if (!isMounted()) return null; | ||
return /*#__PURE__*/React__default["default"].createElement(Container, { | ||
return /*#__PURE__*/React.createElement(Container, { | ||
ref: rootRef, | ||
className: "TanStackRouterDevtools" | ||
}, /*#__PURE__*/React__default["default"].createElement(ThemeProvider, { | ||
}, /*#__PURE__*/React.createElement(ThemeProvider, { | ||
theme: defaultTheme | ||
}, /*#__PURE__*/React__default["default"].createElement(TanStackRouterDevtoolsPanel, _extends({ | ||
}, /*#__PURE__*/React.createElement(TanStackRouterDevtoolsPanel, _extends({ | ||
ref: panelRef | ||
@@ -751,3 +752,3 @@ }, otherPanelProps, { | ||
handleDragStart: e => handleDragStart(panelRef.current, e) | ||
})), isResolvedOpen ? /*#__PURE__*/React__default["default"].createElement(Button, _extends({ | ||
})), isResolvedOpen ? /*#__PURE__*/React.createElement(Button, _extends({ | ||
type: "button", | ||
@@ -776,3 +777,3 @@ "aria-label": "Close TanStack Router Devtools" | ||
} | ||
}), "Close") : null), !isResolvedOpen ? /*#__PURE__*/React__default["default"].createElement("button", _extends({ | ||
}), "Close") : null), !isResolvedOpen ? /*#__PURE__*/React.createElement("button", _extends({ | ||
type: "button" | ||
@@ -812,3 +813,3 @@ }, otherToggleButtonProps, { | ||
} | ||
}), /*#__PURE__*/React__default["default"].createElement(Logo, { | ||
}), /*#__PURE__*/React.createElement(Logo, { | ||
"aria-hidden": true | ||
@@ -826,3 +827,3 @@ })) : null); | ||
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", { | ||
return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("div", { | ||
role: "button", | ||
@@ -842,3 +843,3 @@ "aria-label": `Open match details for ${route.id}`, | ||
} | ||
}, isRoot ? null : /*#__PURE__*/React__default["default"].createElement("div", { | ||
}, isRoot ? null : /*#__PURE__*/React.createElement("div", { | ||
style: { | ||
@@ -857,3 +858,3 @@ flex: '0 0 auto', | ||
} | ||
}), /*#__PURE__*/React__default["default"].createElement(Code, { | ||
}), /*#__PURE__*/React.createElement(Code, { | ||
style: { | ||
@@ -868,7 +869,7 @@ flex: '1 0 auto', | ||
} | ||
}, /*#__PURE__*/React__default["default"].createElement("span", null, route.path || trimPath(route.id), " "), match ? /*#__PURE__*/React__default["default"].createElement("span", { | ||
}, /*#__PURE__*/React.createElement("span", null, route.path || trimPath(route.id), " "), match ? /*#__PURE__*/React.createElement("span", { | ||
style: { | ||
opacity: 0.3 | ||
} | ||
}, match.id) : null)), route.children?.length ? /*#__PURE__*/React__default["default"].createElement("div", { | ||
}, match.id) : null)), route.children?.length ? /*#__PURE__*/React.createElement("div", { | ||
style: { | ||
@@ -880,3 +881,3 @@ marginLeft: isRoot ? 0 : '1rem', | ||
return a.rank - b.rank; | ||
}).map(r => /*#__PURE__*/React__default["default"].createElement(RouteComp, { | ||
}).map(r => /*#__PURE__*/React.createElement(RouteComp, { | ||
key: r.id, | ||
@@ -888,3 +889,3 @@ route: r, | ||
} | ||
const TanStackRouterDevtoolsPanel = /*#__PURE__*/React__default["default"].forwardRef(function TanStackRouterDevtoolsPanel(props, ref) { | ||
const TanStackRouterDevtoolsPanel = /*#__PURE__*/React.forwardRef(function TanStackRouterDevtoolsPanel(props, ref) { | ||
const { | ||
@@ -905,3 +906,3 @@ isOpen = true, | ||
const [activeRouteId, setActiveRouteId] = useLocalStorage('tanstackRouterDevtoolsActiveRouteId', ''); | ||
const activeMatch = React__default["default"].useMemo(() => matches.find(d => d.routeId === activeRouteId), [matches, activeRouteId]); | ||
const activeMatch = React.useMemo(() => matches.find(d => d.routeId === activeRouteId), [matches, activeRouteId]); | ||
const hasSearch = Object.keys(router.state.location.search || {}).length; | ||
@@ -924,8 +925,8 @@ | ||
return /*#__PURE__*/React__default["default"].createElement(ThemeProvider, { | ||
return /*#__PURE__*/React.createElement(ThemeProvider, { | ||
theme: defaultTheme | ||
}, /*#__PURE__*/React__default["default"].createElement(Panel, _extends({ | ||
}, /*#__PURE__*/React.createElement(Panel, _extends({ | ||
ref: ref, | ||
className: "TanStackRouterDevtoolsPanel" | ||
}, panelProps), /*#__PURE__*/React__default["default"].createElement("style", { | ||
}, panelProps), /*#__PURE__*/React.createElement("style", { | ||
dangerouslySetInnerHTML: { | ||
@@ -976,3 +977,3 @@ __html: ` | ||
} | ||
}), /*#__PURE__*/React__default["default"].createElement("div", { | ||
}), /*#__PURE__*/React.createElement("div", { | ||
style: { | ||
@@ -989,3 +990,3 @@ position: 'absolute', | ||
onMouseDown: handleDragStart | ||
}), /*#__PURE__*/React__default["default"].createElement("div", { | ||
}), /*#__PURE__*/React.createElement("div", { | ||
style: { | ||
@@ -1000,3 +1001,3 @@ flex: '1 1 500px', | ||
} | ||
}, /*#__PURE__*/React__default["default"].createElement("div", { | ||
}, /*#__PURE__*/React.createElement("div", { | ||
style: { | ||
@@ -1010,5 +1011,5 @@ display: 'flex', | ||
} | ||
}, /*#__PURE__*/React__default["default"].createElement(Logo, { | ||
}, /*#__PURE__*/React.createElement(Logo, { | ||
"aria-hidden": true | ||
}), /*#__PURE__*/React__default["default"].createElement("div", { | ||
}), /*#__PURE__*/React.createElement("div", { | ||
style: { | ||
@@ -1018,7 +1019,7 @@ fontSize: 'clamp(.8rem, 2vw, 1.3rem)', | ||
} | ||
}, /*#__PURE__*/React__default["default"].createElement("span", { | ||
}, /*#__PURE__*/React.createElement("span", { | ||
style: { | ||
fontWeight: 100 | ||
} | ||
}, "Devtools"))), /*#__PURE__*/React__default["default"].createElement("div", { | ||
}, "Devtools"))), /*#__PURE__*/React.createElement("div", { | ||
style: { | ||
@@ -1028,7 +1029,7 @@ overflowY: 'auto', | ||
} | ||
}, /*#__PURE__*/React__default["default"].createElement("div", { | ||
}, /*#__PURE__*/React.createElement("div", { | ||
style: { | ||
padding: '.5em' | ||
} | ||
}, /*#__PURE__*/React__default["default"].createElement(Explorer, { | ||
}, /*#__PURE__*/React.createElement(Explorer, { | ||
label: "Router", | ||
@@ -1043,3 +1044,3 @@ value: router, | ||
} | ||
})))), /*#__PURE__*/React__default["default"].createElement("div", { | ||
})))), /*#__PURE__*/React.createElement("div", { | ||
style: { | ||
@@ -1054,3 +1055,3 @@ flex: '1 1 500px', | ||
} | ||
}, /*#__PURE__*/React__default["default"].createElement("div", { | ||
}, /*#__PURE__*/React.createElement("div", { | ||
style: { | ||
@@ -1060,3 +1061,3 @@ flex: '1 1 auto', | ||
} | ||
}, /*#__PURE__*/React__default["default"].createElement("div", { | ||
}, /*#__PURE__*/React.createElement("div", { | ||
style: { | ||
@@ -1073,3 +1074,3 @@ padding: '.5em', | ||
} | ||
}, "Pathname", ' ', router.state.location.maskedLocation ? /*#__PURE__*/React__default["default"].createElement("div", { | ||
}, "Pathname", ' ', router.state.location.maskedLocation ? /*#__PURE__*/React.createElement("div", { | ||
style: { | ||
@@ -1081,3 +1082,3 @@ padding: '.1rem .5rem', | ||
} | ||
}, "Masked") : null), /*#__PURE__*/React__default["default"].createElement("div", { | ||
}, "Masked") : null), /*#__PURE__*/React.createElement("div", { | ||
style: { | ||
@@ -1089,7 +1090,7 @@ padding: '.5rem', | ||
} | ||
}, /*#__PURE__*/React__default["default"].createElement("code", { | ||
}, /*#__PURE__*/React.createElement("code", { | ||
style: { | ||
opacity: 0.6 | ||
} | ||
}, router.state.location.pathname), router.state.location.maskedLocation ? /*#__PURE__*/React__default["default"].createElement("code", { | ||
}, router.state.location.pathname), router.state.location.maskedLocation ? /*#__PURE__*/React.createElement("code", { | ||
style: { | ||
@@ -1099,3 +1100,3 @@ color: defaultTheme.warning, | ||
} | ||
}, router.state.location.maskedLocation.pathname) : null), /*#__PURE__*/React__default["default"].createElement("div", { | ||
}, router.state.location.maskedLocation.pathname) : null), /*#__PURE__*/React.createElement("div", { | ||
style: { | ||
@@ -1112,3 +1113,3 @@ padding: '.5em', | ||
} | ||
}, /*#__PURE__*/React__default["default"].createElement("button", { | ||
}, /*#__PURE__*/React.createElement("button", { | ||
type: "button", | ||
@@ -1127,3 +1128,3 @@ onClick: () => { | ||
} | ||
}, "Routes"), "/", /*#__PURE__*/React__default["default"].createElement("button", { | ||
}, "Routes"), "/", /*#__PURE__*/React.createElement("button", { | ||
type: "button", | ||
@@ -1142,3 +1143,3 @@ onClick: () => { | ||
} | ||
}, "Matches")), !showMatches ? /*#__PURE__*/React__default["default"].createElement(RouteComp, { | ||
}, "Matches")), !showMatches ? /*#__PURE__*/React.createElement(RouteComp, { | ||
route: router.routeTree, | ||
@@ -1148,4 +1149,4 @@ isRoot: true, | ||
setActiveRouteId: setActiveRouteId | ||
}) : /*#__PURE__*/React__default["default"].createElement("div", null, (router.state.status === 'pending' ? router.state.pendingMatches : router.state.matches).map((match, i) => { | ||
return /*#__PURE__*/React__default["default"].createElement("div", { | ||
}) : /*#__PURE__*/React.createElement("div", null, (router.state.status === 'pending' ? router.state.pendingMatches : router.state.matches).map((match, i) => { | ||
return /*#__PURE__*/React.createElement("div", { | ||
key: match.routeId || i, | ||
@@ -1162,3 +1163,3 @@ role: "button", | ||
} | ||
}, /*#__PURE__*/React__default["default"].createElement("div", { | ||
}, /*#__PURE__*/React.createElement("div", { | ||
style: { | ||
@@ -1176,3 +1177,3 @@ flex: '0 0 auto', | ||
} | ||
}), /*#__PURE__*/React__default["default"].createElement(Code, { | ||
}), /*#__PURE__*/React.createElement(Code, { | ||
style: { | ||
@@ -1183,3 +1184,3 @@ padding: '.5em', | ||
}, `${match.id}`)); | ||
})))), activeMatch ? /*#__PURE__*/React__default["default"].createElement(ActivePanel, null, /*#__PURE__*/React__default["default"].createElement("div", { | ||
})))), activeMatch ? /*#__PURE__*/React.createElement(ActivePanel, null, /*#__PURE__*/React.createElement("div", { | ||
style: { | ||
@@ -1193,19 +1194,19 @@ padding: '.5em', | ||
} | ||
}, "Match Details"), /*#__PURE__*/React__default["default"].createElement("div", null, /*#__PURE__*/React__default["default"].createElement("table", null, /*#__PURE__*/React__default["default"].createElement("tbody", null, /*#__PURE__*/React__default["default"].createElement("tr", null, /*#__PURE__*/React__default["default"].createElement("td", { | ||
}, "Match Details"), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("table", null, /*#__PURE__*/React.createElement("tbody", null, /*#__PURE__*/React.createElement("tr", null, /*#__PURE__*/React.createElement("td", { | ||
style: { | ||
opacity: '.5' | ||
} | ||
}, "ID"), /*#__PURE__*/React__default["default"].createElement("td", null, /*#__PURE__*/React__default["default"].createElement(Code, { | ||
}, "ID"), /*#__PURE__*/React.createElement("td", null, /*#__PURE__*/React.createElement(Code, { | ||
style: { | ||
lineHeight: '1.8em' | ||
} | ||
}, JSON.stringify(activeMatch.id, null, 2)))), /*#__PURE__*/React__default["default"].createElement("tr", null, /*#__PURE__*/React__default["default"].createElement("td", { | ||
}, JSON.stringify(activeMatch.id, null, 2)))), /*#__PURE__*/React.createElement("tr", null, /*#__PURE__*/React.createElement("td", { | ||
style: { | ||
opacity: '.5' | ||
} | ||
}, "Status"), /*#__PURE__*/React__default["default"].createElement("td", null, activeMatch.status)), /*#__PURE__*/React__default["default"].createElement("tr", null, /*#__PURE__*/React__default["default"].createElement("td", { | ||
}, "Status"), /*#__PURE__*/React.createElement("td", null, activeMatch.status)), /*#__PURE__*/React.createElement("tr", null, /*#__PURE__*/React.createElement("td", { | ||
style: { | ||
opacity: '.5' | ||
} | ||
}, "Last Updated"), /*#__PURE__*/React__default["default"].createElement("td", null, activeMatch.updatedAt ? new Date(activeMatch.updatedAt).toLocaleTimeString() : 'N/A'))))), activeMatch.loaderData ? /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement("div", { | ||
}, "Last Updated"), /*#__PURE__*/React.createElement("td", null, activeMatch.updatedAt ? new Date(activeMatch.updatedAt).toLocaleTimeString() : 'N/A'))))), activeMatch.loaderData ? /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", { | ||
style: { | ||
@@ -1219,11 +1220,11 @@ background: defaultTheme.backgroundAlt, | ||
} | ||
}, "Loader Data"), /*#__PURE__*/React__default["default"].createElement("div", { | ||
}, "Loader Data"), /*#__PURE__*/React.createElement("div", { | ||
style: { | ||
padding: '.5em' | ||
} | ||
}, /*#__PURE__*/React__default["default"].createElement(Explorer, { | ||
}, /*#__PURE__*/React.createElement(Explorer, { | ||
label: "loaderData", | ||
value: activeMatch.loaderData, | ||
defaultExpanded: {} | ||
}))) : null, /*#__PURE__*/React__default["default"].createElement("div", { | ||
}))) : null, /*#__PURE__*/React.createElement("div", { | ||
style: { | ||
@@ -1237,11 +1238,11 @@ background: defaultTheme.backgroundAlt, | ||
} | ||
}, "Explorer"), /*#__PURE__*/React__default["default"].createElement("div", { | ||
}, "Explorer"), /*#__PURE__*/React.createElement("div", { | ||
style: { | ||
padding: '.5em' | ||
} | ||
}, /*#__PURE__*/React__default["default"].createElement(Explorer, { | ||
}, /*#__PURE__*/React.createElement(Explorer, { | ||
label: "Match", | ||
value: activeMatch, | ||
defaultExpanded: {} | ||
}))) : null, hasSearch ? /*#__PURE__*/React__default["default"].createElement("div", { | ||
}))) : null, hasSearch ? /*#__PURE__*/React.createElement("div", { | ||
style: { | ||
@@ -1256,3 +1257,3 @@ flex: '1 1 500px', | ||
} | ||
}, /*#__PURE__*/React__default["default"].createElement("div", { | ||
}, /*#__PURE__*/React.createElement("div", { | ||
style: { | ||
@@ -1267,7 +1268,7 @@ padding: '.5em', | ||
} | ||
}, "Search Params"), /*#__PURE__*/React__default["default"].createElement("div", { | ||
}, "Search Params"), /*#__PURE__*/React.createElement("div", { | ||
style: { | ||
padding: '.5em' | ||
} | ||
}, /*#__PURE__*/React__default["default"].createElement(Explorer, { | ||
}, /*#__PURE__*/React.createElement(Explorer, { | ||
value: router.state.location.search || {}, | ||
@@ -1284,5 +1285,3 @@ defaultExpanded: Object.keys(router.state.location.search || {}).reduce((obj, next) => { | ||
Object.defineProperty(exports, '__esModule', { value: true }); | ||
})); | ||
//# sourceMappingURL=index.development.js.map |
@@ -11,3 +11,3 @@ /** | ||
*/ | ||
!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports,require("react")):"function"==typeof define&&define.amd?define(["exports","react"],t):t((e="undefined"!=typeof globalThis?globalThis:e||self).TanStackRouterDevtools={},e.React)}(this,(function(e,t){"use strict";function n(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}function a(e){if(e&&e.__esModule)return e;var t=Object.create(null);return e&&Object.keys(e).forEach((function(n){if("default"!==n){var a=Object.getOwnPropertyDescriptor(e,n);Object.defineProperty(t,n,a.get?a:{enumerable:!0,get:function(){return e[n]}})}})),t.default=e,Object.freeze(t)}var r=a(t),l=n(t);function o(){return o=Object.assign?Object.assign.bind():function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var a in n)Object.prototype.hasOwnProperty.call(n,a)&&(e[a]=n[a])}return e},o.apply(this,arguments)}const i=r.createContext(null);function d(){const e=window.__TSR_ROUTER_CONTEXT__||i;return r.useContext(e)}"undefined"!=typeof document&&(window.__TSR_ROUTER_CONTEXT__=i);function u(e,t){const[n,a]=l.default.useState();l.default.useEffect((()=>{const n=(e=>{try{const t=localStorage.getItem(e);return"string"==typeof t?JSON.parse(t):void 0}catch{return}})(e);a(null==n?"function"==typeof t?t():t:n)}),[t,e]);return[n,l.default.useCallback((t=>{a((n=>{let a=t;"function"==typeof t&&(a=t(n));try{localStorage.setItem(e,JSON.stringify(a))}catch{}return a}))}),[e])]}const c={background:"#0b1521",backgroundAlt:"#132337",foreground:"white",gray:"#3f4e60",grayAlt:"#222e3e",inputBackgroundColor:"#fff",inputTextColor:"#000",success:"#00ab52",danger:"#ff0085",active:"#006bff",warning:"#ffb200"},s=l.default.createContext(c);function f({theme:e,...t}){return l.default.createElement(s.Provider,o({value:e},t))}const m="undefined"==typeof window;function p(e,t){return"pending"===e.status||e.isFetching?t.active:"error"===e.status?t.danger:"success"===e.status?t.success:t.gray}function g(e,t,n){const a=e.find((e=>e.routeId===t.id));return a?p(a,n):n.gray}function b(e,t,n={}){return l.default.forwardRef((({style:a,...r},o)=>{const i=l.default.useContext(s),d=Object.entries(n).reduce(((e,[t,n])=>function(e){const[t,n]=l.default.useState((()=>{if("undefined"!=typeof window)return window.matchMedia&&window.matchMedia(e).matches}));return l.default.useEffect((()=>{if("undefined"!=typeof window){if(!window.matchMedia)return;const t=window.matchMedia(e),a=({matches:e})=>n(e);return t.addListener(a),()=>{t.removeListener(a)}}}),[t,e,n]),t}(t)?{...e,..."function"==typeof n?n(r,i):n}:e),{});return l.default.createElement(e,{...r,style:{..."function"==typeof t?t(r,i):t,...a,...d},ref:o})}))}function y(){const e=l.default.useRef(!1),t=l.default.useCallback((()=>e.current),[]);return l.default[m?"useEffect":"useLayoutEffect"]((()=>(e.current=!0,()=>{e.current=!1})),[]),t}function E(e){const t=y(),[n,a]=l.default.useState(e);return[n,l.default.useCallback((e=>{var n;n=()=>{t()&&a(e)},Promise.resolve().then(n).catch((e=>setTimeout((()=>{throw e}))))}),[t])]}const h=b("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"}}),v=b("div",(()=>({flex:"1 1 500px",display:"flex",flexDirection:"column",overflow:"auto",height:"100%"})),{"(max-width: 700px)":(e,t)=>({borderTop:`2px solid ${t.gray}`})}),k=b("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"}))),x=b("code",{fontSize:".9em"}),w=b("div",{fontFamily:"Menlo, monospace",fontSize:".7rem",lineHeight:"1.7",outline:"none",wordBreak:"break-word"}),S=b("span",{color:"white"}),R=b("button",{cursor:"pointer",color:"white"}),I=b("button",{cursor:"pointer",color:"inherit",font:"inherit",outline:"inherit",background:"transparent",border:"none",padding:0}),D=b("span",((e,t)=>({color:t.danger}))),T=b("div",{marginLeft:".1em",paddingLeft:"1em",borderLeft:"2px solid rgba(0,0,0,.15)"}),O=b("span",{color:"grey",fontSize:".7em"}),C=({expanded:e,style:t={}})=>r.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:a=[],subEntryPages:l=[],type:o,expanded:i=!1,toggleExpanded:d,pageSize:u,renderer:c})=>{const[s,f]=r.useState([]),[m,p]=r.useState(void 0);return r.createElement(w,null,l.length?r.createElement(r.Fragment,null,r.createElement(I,{onClick:()=>d()},r.createElement(C,{expanded:i})," ",t," ",r.createElement(O,null,"iterable"===String(o).toLowerCase()?"(Iterable) ":"",a.length," ",a.length>1?"items":"item")),i?1===l.length?r.createElement(T,null,a.map(((t,n)=>e(t)))):r.createElement(T,null,l.map(((t,n)=>r.createElement("div",{key:n},r.createElement(w,null,r.createElement(R,{onClick:()=>f((e=>e.includes(n)?e.filter((e=>e!==n)):[...e,n]))},r.createElement(C,{expanded:i})," [",n*u," ..."," ",n*u+u-1,"]"),s.includes(n)?r.createElement(T,null,t.map((t=>e(t)))):null))))):null):"function"===o?r.createElement(r.Fragment,null,r.createElement(L,{renderer:c,label:r.createElement("button",{onClick:()=>{p(n())},style:{appearance:"none",border:"0",background:"transparent"}},r.createElement(S,null,t)," 🔄"," "),value:m,defaultExpanded:{}})):r.createElement(r.Fragment,null,r.createElement(S,null,t,":")," ",r.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 L({value:e,defaultExpanded:t,renderer:n=A,pageSize:a=100,filterSubEntries:l,...i}){const[d,u]=r.useState(Boolean(t)),c=r.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=l?l(f):f;const g=function(e,t){if(t<1)return[];let n=0;const a=[];for(;n<e.length;)a.push(e.slice(n,n+t)),n+=t;return a}(f,a);return n({handleEntry:t=>r.createElement(L,o({key:t.label,value:e,renderer:n,filterSubEntries:l},i,t)),type:s,subEntries:f,subEntryPages:g,value:e,expanded:d,toggleExpanded:c,pageSize:a,...i})}const z="undefined"==typeof window;function P(e){return l.default.createElement("div",o({},e,{style:{...e.style??{},display:"flex",alignItems:"center",flexDirection:"column",fontSize:"0.8rem",fontWeight:"bolder",lineHeight:"1"}}),l.default.createElement("div",{style:{letterSpacing:"-0.05rem"}},"TANSTACK"),l.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 j({route:e,isRoot:t,activeRouteId:n,setActiveRouteId:a}){const r=d(),o="pending"===r.state.status?r.state.pendingMatches:r.state.matches,i=r.state.matches.find((t=>t.routeId===e.id));return l.default.createElement("div",null,l.default.createElement("div",{role:"button","aria-label":`Open match details for ${e.id}`,onClick:()=>{i&&a(n===e.id?"":e.id)},style:{display:"flex",borderBottom:`solid 1px ${c.grayAlt}`,cursor:i?"pointer":"default",alignItems:"center",background:e.id===n?"rgba(255,255,255,.1)":void 0}},t?null:l.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:g(o,e,c),opacity:i?1:.3}}),l.default.createElement(x,{style:{flex:"1 0 auto",display:"flex",justifyContent:"space-between",padding:".25rem .5rem .25rem 0",paddingLeft:t?".5rem":0,opacity:i?1:.7,fontSize:"0.7rem"}},l.default.createElement("span",null,e.path||function(e){return"/"===e?e:e.replace(/\/{1,}$/,"")}( | ||
!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports,require("react")):"function"==typeof define&&define.amd?define(["exports","react"],t):t((e="undefined"!=typeof globalThis?globalThis:e||self).TanStackRouterDevtools={},e.React)}(this,(function(e,t){"use strict";function n(e){var t=Object.create(null);return e&&Object.keys(e).forEach((function(n){if("default"!==n){var r=Object.getOwnPropertyDescriptor(e,n);Object.defineProperty(t,n,r.get?r:{enumerable:!0,get:function(){return e[n]}})}})),t.default=e,Object.freeze(t)}var r=n(t);function o(){return o=Object.assign?Object.assign.bind():function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var r in n)Object.prototype.hasOwnProperty.call(n,r)&&(e[r]=n[r])}return e},o.apply(this,arguments)}var a="Invariant failed";var l=!0;const i=r.createContext(null);function c(){const e=window.__TSR_ROUTER_CONTEXT__||i,t=r.useContext(e);return function(e,t){if(!l){if(e)return;var n="Warning: "+t;"undefined"!=typeof console&&console.warn(n);try{throw Error(n)}catch(e){}}} | ||
/** | ||
@@ -22,4 +22,3 @@ * @tanstack/react-router/src/index.tsx | ||
* @license MIT | ||
*/ | ||
function(e){return"/"===e?e:e.replace(/^\/{1,}/,"")}(e.id))," "),i?l.default.createElement("span",{style:{opacity:.3}},i.id):null)),e.children?.length?l.default.createElement("div",{style:{marginLeft:t?0:"1rem",borderLeft:t?"":`solid 1px ${c.grayAlt}`}},[...e.children].sort(((e,t)=>e.rank-t.rank)).map((e=>l.default.createElement(j,{key:e.id,route:e,activeRouteId:n,setActiveRouteId:a})))):null)}const $=l.default.forwardRef((function(e,t){const{isOpen:n=!0,setIsOpen:a,handleDragStart:r,router:i,...s}=e,m=d(),g=[...m.state.pendingMatches,...m.state.matches];!function(e,t){if(!e)throw new Error("Invariant failed")}(m);const[b,y]=u("tanstackRouterDevtoolsShowMatches",!0),[E,k]=u("tanstackRouterDevtoolsActiveRouteId",""),w=l.default.useMemo((()=>g.find((e=>e.routeId===E))),[g,E]),S=Object.keys(m.state.location.search||{}).length;return l.default.createElement(f,{theme:c},l.default.createElement(h,o({ref:t,className:"TanStackRouterDevtoolsPanel"},s),l.default.createElement("style",{dangerouslySetInnerHTML:{__html:`\n\n .TanStackRouterDevtoolsPanel * {\n scrollbar-color: ${c.backgroundAlt} ${c.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: ${c.backgroundAlt};\n }\n\n .TanStackRouterDevtoolsPanel *::-webkit-scrollbar-thumb, .TanStackRouterDevtoolsPanel scrollbar-thumb {\n background: ${c.gray};\n border-radius: .5em;\n border: 3px solid ${c.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 `}}),l.default.createElement("div",{style:{position:"absolute",left:0,top:0,width:"100%",height:"4px",marginBottom:"-4px",cursor:"row-resize",zIndex:1e5},onMouseDown:r}),l.default.createElement("div",{style:{flex:"1 1 500px",minHeight:"40%",maxHeight:"100%",overflow:"auto",borderRight:`1px solid ${c.grayAlt}`,display:"flex",flexDirection:"column"}},l.default.createElement("div",{style:{display:"flex",justifyContent:"start",gap:"1rem",padding:"1rem",alignItems:"center",background:c.backgroundAlt}},l.default.createElement(P,{"aria-hidden":!0}),l.default.createElement("div",{style:{fontSize:"clamp(.8rem, 2vw, 1.3rem)",fontWeight:"bold"}},l.default.createElement("span",{style:{fontWeight:100}},"Devtools"))),l.default.createElement("div",{style:{overflowY:"auto",flex:"1"}},l.default.createElement("div",{style:{padding:".5em"}},l.default.createElement(L,{label:"Router",value:m,defaultExpanded:{state:{},context:{}},filterSubEntries:e=>e.filter((e=>"function"!=typeof e.value))})))),l.default.createElement("div",{style:{flex:"1 1 500px",minHeight:"40%",maxHeight:"100%",overflow:"auto",borderRight:`1px solid ${c.grayAlt}`,display:"flex",flexDirection:"column"}},l.default.createElement("div",{style:{flex:"1 1 auto",overflowY:"auto"}},l.default.createElement("div",{style:{padding:".5em",background:c.backgroundAlt,position:"sticky",top:0,zIndex:1,display:"flex",alignItems:"center",gap:".5rem",fontWeight:"bold"}},"Pathname"," ",m.state.location.maskedLocation?l.default.createElement("div",{style:{padding:".1rem .5rem",background:c.warning,color:"black",borderRadius:".5rem"}},"Masked"):null),l.default.createElement("div",{style:{padding:".5rem",display:"flex",gap:".5rem",alignItems:"center"}},l.default.createElement("code",{style:{opacity:.6}},m.state.location.pathname),m.state.location.maskedLocation?l.default.createElement("code",{style:{color:c.warning,fontWeight:"bold"}},m.state.location.maskedLocation.pathname):null),l.default.createElement("div",{style:{padding:".5em",background:c.backgroundAlt,position:"sticky",top:0,zIndex:1,display:"flex",alignItems:"center",gap:".5rem",fontWeight:"bold"}},l.default.createElement("button",{type:"button",onClick:()=>{y(!1)},disabled:!b,style:{appearance:"none",opacity:b?.5:1,border:0,background:"transparent",color:"inherit",cursor:"pointer"}},"Routes"),"/",l.default.createElement("button",{type:"button",onClick:()=>{y(!0)},disabled:b,style:{appearance:"none",opacity:b?1:.5,border:0,background:"transparent",color:"inherit",cursor:"pointer"}},"Matches")),b?l.default.createElement("div",null,("pending"===m.state.status?m.state.pendingMatches:m.state.matches).map(((e,t)=>l.default.createElement("div",{key:e.routeId||t,role:"button","aria-label":`Open match details for ${e.routeId}`,onClick:()=>k(E===e.routeId?"":e.routeId),style:{display:"flex",borderBottom:`solid 1px ${c.grayAlt}`,cursor:"pointer",alignItems:"center",background:e===w?"rgba(255,255,255,.1)":void 0}},l.default.createElement("div",{style:{flex:"0 0 auto",width:"1.3rem",height:"1.3rem",marginLeft:".25rem",background:p(e,c),alignItems:"center",justifyContent:"center",fontWeight:"bold",borderRadius:".25rem",transition:"all .2s ease-out"}}),l.default.createElement(x,{style:{padding:".5em",fontSize:"0.7rem"}},`${e.id}`))))):l.default.createElement(j,{route:m.routeTree,isRoot:!0,activeRouteId:E,setActiveRouteId:k}))),w?l.default.createElement(v,null,l.default.createElement("div",{style:{padding:".5em",background:c.backgroundAlt,position:"sticky",top:0,bottom:0,zIndex:1}},"Match Details"),l.default.createElement("div",null,l.default.createElement("table",null,l.default.createElement("tbody",null,l.default.createElement("tr",null,l.default.createElement("td",{style:{opacity:".5"}},"ID"),l.default.createElement("td",null,l.default.createElement(x,{style:{lineHeight:"1.8em"}},JSON.stringify(w.id,null,2)))),l.default.createElement("tr",null,l.default.createElement("td",{style:{opacity:".5"}},"Status"),l.default.createElement("td",null,w.status)),l.default.createElement("tr",null,l.default.createElement("td",{style:{opacity:".5"}},"Last Updated"),l.default.createElement("td",null,w.updatedAt?new Date(w.updatedAt).toLocaleTimeString():"N/A"))))),w.loaderData?l.default.createElement(l.default.Fragment,null,l.default.createElement("div",{style:{background:c.backgroundAlt,padding:".5em",position:"sticky",top:0,bottom:0,zIndex:1}},"Loader Data"),l.default.createElement("div",{style:{padding:".5em"}},l.default.createElement(L,{label:"loaderData",value:w.loaderData,defaultExpanded:{}}))):null,l.default.createElement("div",{style:{background:c.backgroundAlt,padding:".5em",position:"sticky",top:0,bottom:0,zIndex:1}},"Explorer"),l.default.createElement("div",{style:{padding:".5em"}},l.default.createElement(L,{label:"Match",value:w,defaultExpanded:{}}))):null,S?l.default.createElement("div",{style:{flex:"1 1 500px",minHeight:"40%",maxHeight:"100%",overflow:"auto",borderRight:`1px solid ${c.grayAlt}`,display:"flex",flexDirection:"column"}},l.default.createElement("div",{style:{padding:".5em",background:c.backgroundAlt,position:"sticky",top:0,bottom:0,zIndex:1,fontWeight:"bold"}},"Search Params"),l.default.createElement("div",{style:{padding:".5em"}},l.default.createElement(L,{value:m.state.location.search||{},defaultExpanded:Object.keys(m.state.location.search||{}).reduce(((e,t)=>(e[t]={},e)),{})}))):null))}));e.TanStackRouterDevtools=function({initialIsOpen:e,panelProps:t={},closeButtonProps:n={},toggleButtonProps:a={},position:r="bottom-left",containerElement:i="footer",router:d}){const s=l.default.useRef(null),m=l.default.useRef(null),[p,g]=u("tanstackRouterDevtoolsOpen",e),[b,h]=u("tanstackRouterDevtoolsHeight",null),[v,x]=E(!1),[w,S]=E(!1),R=y();l.default.useEffect((()=>{x(p??!1)}),[p,v,x]),l.default.useEffect((()=>{const e=m.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]),l.default[z?"useEffect":"useLayoutEffect"]((()=>{if(v){const e=s.current?.parentElement?.style.paddingBottom,t=()=>{const e=m.current?.getBoundingClientRect().height;s.current?.parentElement&&(s.current.parentElement.style.paddingBottom=`${e}px`)};if(t(),"undefined"!=typeof window)return window.addEventListener("resize",t),()=>{window.removeEventListener("resize",t),s.current?.parentElement&&"string"==typeof e&&(s.current.parentElement.style.paddingBottom=e)}}}),[v]);const{style:I={},...D}=t,{style:T={},onClick:O,...C}=n,{style:A={},onClick:L,...j}=a;return R()?l.default.createElement(i,{ref:s,className:"TanStackRouterDevtools"},l.default.createElement(f,{theme:c},l.default.createElement($,o({ref:m},D,{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 ${c.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,a=t.pageY,r=e=>{const t=a-e.pageY,r=n+t;h(r),g(!(r<70))},l=()=>{S(!1),document.removeEventListener("mousemove",r),document.removeEventListener("mouseUp",l)};document.addEventListener("mousemove",r),document.addEventListener("mouseup",l)})(m.current,e)})),v?l.default.createElement(k,o({type:"button","aria-label":"Close TanStack Router Devtools"},C,{onClick:e=>{g(!1),O&&O(e)},style:{position:"fixed",zIndex:99999,margin:".5em",bottom:0,..."top-right"===r?{right:"0"}:"top-left"===r?{left:"0"}:"bottom-right"===r?{right:"0"}:{left:"0"},...T}}),"Close"):null),v?null:l.default.createElement("button",o({type:"button"},j,{"aria-label":"Open TanStack Router Devtools",onClick:e=>{g(!0),L&&L(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"===r?{top:"0",right:"0"}:"top-left"===r?{top:"0",left:"0"}:"bottom-right"===r?{bottom:"0",right:"0"}:{bottom:"0",left:"0"},...A}}),l.default.createElement(P,{"aria-hidden":!0}))):null},e.TanStackRouterDevtoolsPanel=$,Object.defineProperty(e,"__esModule",{value:!0})})); | ||
*/(t,"useRouter must be used inside a <RouterProvider> component!"),t}"undefined"!=typeof document&&(window.__TSR_ROUTER_CONTEXT__=i);const s=e=>{try{const t=localStorage.getItem(e);return"string"==typeof t?JSON.parse(t):void 0}catch{return}};function d(e,n){const[r,o]=t.useState();t.useEffect((()=>{const t=s(e);o(null==t?"function"==typeof n?n():n:t)}),[n,e]);return[r,t.useCallback((t=>{o((n=>{let r=t;"function"==typeof t&&(r=t(n));try{localStorage.setItem(e,JSON.stringify(r))}catch{}return r}))}),[e])]}const u={background:"#0b1521",backgroundAlt:"#132337",foreground:"white",gray:"#3f4e60",grayAlt:"#222e3e",inputBackgroundColor:"#fff",inputTextColor:"#000",success:"#00ab52",danger:"#ff0085",active:"#006bff",warning:"#ffb200"},m=t.createContext(u);function p({theme:e,...n}){return t.createElement(m.Provider,o({value:e},n))}const f="undefined"==typeof window;function g(e,t){return"pending"===e.status||e.isFetching?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?g(r,n):n.gray}function y(e,n,r={}){return t.forwardRef((({style:o,...a},l)=>{const i=t.useContext(m),c=Object.entries(r).reduce(((e,[n,r])=>function(e){const[n,r]=t.useState((()=>{if("undefined"!=typeof window)return window.matchMedia&&window.matchMedia(e).matches}));return t.useEffect((()=>{if("undefined"!=typeof window){if(!window.matchMedia)return;const t=window.matchMedia(e),n=({matches:e})=>r(e);return t.addListener(n),()=>{t.removeListener(n)}}}),[n,e,r]),n}(n)?{...e,..."function"==typeof r?r(a,i):r}:e),{});return t.createElement(e,{...a,style:{..."function"==typeof n?n(a,i):n,...o,...c},ref:l})}))}function E(){const e=t.useRef(!1),n=t.useCallback((()=>e.current),[]);return t[f?"useEffect":"useLayoutEffect"]((()=>(e.current=!0,()=>{e.current=!1})),[]),n}function h(e){const n=E(),[r,o]=t.useState(e);return[r,t.useCallback((e=>{var t;t=()=>{n()&&o(e)},Promise.resolve().then(t).catch((e=>setTimeout((()=>{throw e}))))}),[n])]}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"}}),k=y("div",(()=>({flex:"1 1 500px",display:"flex",flexDirection:"column",overflow:"auto",height:"100%"})),{"(max-width: 700px)":(e,t)=>({borderTop:`2px solid ${t.gray}`})}),x=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"}),D=y("button",{cursor:"pointer",color:"inherit",font:"inherit",outline:"inherit",background:"transparent",border:"none",padding:0}),T=y("span",((e,t)=>({color:t.danger}))),O=y("div",{marginLeft:".1em",paddingLeft:"1em",borderLeft:"2px solid rgba(0,0,0,.15)"}),C=y("span",{color:"grey",fontSize:".7em"}),A=({expanded:e,style:t={}})=>r.createElement("span",{style:{display:"inline-block",transition:"all .1s ease",transform:`rotate(${e?90:0}deg) ${t.transform||""}`,...t}},"▶");const L=({handleEntry:e,label:t,value:n,subEntries:o=[],subEntryPages:a=[],type:l,expanded:i=!1,toggleExpanded:c,pageSize:s,renderer:d})=>{const[u,m]=r.useState([]),[p,f]=r.useState(void 0);return r.createElement(S,null,a.length?r.createElement(r.Fragment,null,r.createElement(D,{onClick:()=>c()},r.createElement(A,{expanded:i})," ",t," ",r.createElement(C,null,"iterable"===String(l).toLowerCase()?"(Iterable) ":"",o.length," ",o.length>1?"items":"item")),i?1===a.length?r.createElement(O,null,o.map(((t,n)=>e(t)))):r.createElement(O,null,a.map(((t,n)=>r.createElement("div",{key:n},r.createElement(S,null,r.createElement(I,{onClick:()=>m((e=>e.includes(n)?e.filter((e=>e!==n)):[...e,n]))},r.createElement(A,{expanded:i})," [",n*s," ..."," ",n*s+s-1,"]"),u.includes(n)?r.createElement(O,null,t.map((t=>e(t)))):null))))):null):"function"===l?r.createElement(r.Fragment,null,r.createElement(z,{renderer:d,label:r.createElement("button",{onClick:()=>{f(n())},style:{appearance:"none",border:"0",background:"transparent"}},r.createElement(R,null,t)," 🔄"," "),value:p,defaultExpanded:{}})):r.createElement(r.Fragment,null,r.createElement(R,null,t,":")," ",r.createElement(T,null,(e=>{const t=Object.getOwnPropertyNames(Object(e)),n="bigint"==typeof e?`${e.toString()}n`:e;return JSON.stringify(n,t)})(n))))};function z({value:e,defaultExpanded:t,renderer:n=L,pageSize:a=100,filterSubEntries:l,...i}){const[c,s]=r.useState(Boolean(t)),d=r.useCallback((()=>s((e=>!e))),[]);let u=typeof e,m=[];const p=e=>{const n=!0===t?{[e.label]:!0}:t?.[e.label];return{...e,defaultExpanded:n}};var f;Array.isArray(e)?(u="array",m=e.map(((e,t)=>p({label:t.toString(),value:e})))):null!==e&&"object"==typeof e&&(f=e,Symbol.iterator in f)&&"function"==typeof e[Symbol.iterator]?(u="Iterable",m=Array.from(e,((e,t)=>p({label:t.toString(),value:e})))):"object"==typeof e&&null!==e&&(u="object",m=Object.entries(e).map((([e,t])=>p({label:e,value:t})))),m=l?l(m):m;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}(m,a);return n({handleEntry:t=>r.createElement(z,o({key:t.label,value:e,renderer:n,filterSubEntries:l},i,t)),type:u,subEntries:m,subEntryPages:g,value:e,expanded:c,toggleExpanded:d,pageSize:a,...i})}const P="undefined"==typeof window;function j(e){return t.createElement("div",o({},e,{style:{...e.style??{},display:"flex",alignItems:"center",flexDirection:"column",fontSize:"0.8rem",fontWeight:"bolder",lineHeight:"1"}}),t.createElement("div",{style:{letterSpacing:"-0.05rem"}},"TANSTACK"),t.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:n,activeRouteId:r,setActiveRouteId:o}){const a=c(),l="pending"===a.state.status?a.state.pendingMatches:a.state.matches,i=a.state.matches.find((t=>t.routeId===e.id));return t.createElement("div",null,t.createElement("div",{role:"button","aria-label":`Open match details for ${e.id}`,onClick:()=>{i&&o(r===e.id?"":e.id)},style:{display:"flex",borderBottom:`solid 1px ${u.grayAlt}`,cursor:i?"pointer":"default",alignItems:"center",background:e.id===r?"rgba(255,255,255,.1)":void 0}},n?null:t.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(l,e,u),opacity:i?1:.3}}),t.createElement(w,{style:{flex:"1 0 auto",display:"flex",justifyContent:"space-between",padding:".25rem .5rem .25rem 0",paddingLeft:n?".5rem":0,opacity:i?1:.7,fontSize:"0.7rem"}},t.createElement("span",null,e.path||function(e){return"/"===e?e:e.replace(/\/{1,}$/,"")}(function(e){return"/"===e?e:e.replace(/^\/{1,}/,"")}(e.id))," "),i?t.createElement("span",{style:{opacity:.3}},i.id):null)),e.children?.length?t.createElement("div",{style:{marginLeft:n?0:"1rem",borderLeft:n?"":`solid 1px ${u.grayAlt}`}},[...e.children].sort(((e,t)=>e.rank-t.rank)).map((e=>t.createElement($,{key:e.id,route:e,activeRouteId:r,setActiveRouteId:o})))):null)}const M=t.forwardRef((function(e,n){const{isOpen:r=!0,setIsOpen:l,handleDragStart:i,router:s,...m}=e,f=c(),b=[...f.state.pendingMatches,...f.state.matches];!function(e,t){if(!e)throw new Error(a)}(f);const[y,E]=d("tanstackRouterDevtoolsShowMatches",!0),[h,x]=d("tanstackRouterDevtoolsActiveRouteId",""),S=t.useMemo((()=>b.find((e=>e.routeId===h))),[b,h]),R=Object.keys(f.state.location.search||{}).length;return t.createElement(p,{theme:u},t.createElement(v,o({ref:n,className:"TanStackRouterDevtoolsPanel"},m),t.createElement("style",{dangerouslySetInnerHTML:{__html:`\n\n .TanStackRouterDevtoolsPanel * {\n scrollbar-color: ${u.backgroundAlt} ${u.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: ${u.backgroundAlt};\n }\n\n .TanStackRouterDevtoolsPanel *::-webkit-scrollbar-thumb, .TanStackRouterDevtoolsPanel scrollbar-thumb {\n background: ${u.gray};\n border-radius: .5em;\n border: 3px solid ${u.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 `}}),t.createElement("div",{style:{position:"absolute",left:0,top:0,width:"100%",height:"4px",marginBottom:"-4px",cursor:"row-resize",zIndex:1e5},onMouseDown:i}),t.createElement("div",{style:{flex:"1 1 500px",minHeight:"40%",maxHeight:"100%",overflow:"auto",borderRight:`1px solid ${u.grayAlt}`,display:"flex",flexDirection:"column"}},t.createElement("div",{style:{display:"flex",justifyContent:"start",gap:"1rem",padding:"1rem",alignItems:"center",background:u.backgroundAlt}},t.createElement(j,{"aria-hidden":!0}),t.createElement("div",{style:{fontSize:"clamp(.8rem, 2vw, 1.3rem)",fontWeight:"bold"}},t.createElement("span",{style:{fontWeight:100}},"Devtools"))),t.createElement("div",{style:{overflowY:"auto",flex:"1"}},t.createElement("div",{style:{padding:".5em"}},t.createElement(z,{label:"Router",value:f,defaultExpanded:{state:{},context:{}},filterSubEntries:e=>e.filter((e=>"function"!=typeof e.value))})))),t.createElement("div",{style:{flex:"1 1 500px",minHeight:"40%",maxHeight:"100%",overflow:"auto",borderRight:`1px solid ${u.grayAlt}`,display:"flex",flexDirection:"column"}},t.createElement("div",{style:{flex:"1 1 auto",overflowY:"auto"}},t.createElement("div",{style:{padding:".5em",background:u.backgroundAlt,position:"sticky",top:0,zIndex:1,display:"flex",alignItems:"center",gap:".5rem",fontWeight:"bold"}},"Pathname"," ",f.state.location.maskedLocation?t.createElement("div",{style:{padding:".1rem .5rem",background:u.warning,color:"black",borderRadius:".5rem"}},"Masked"):null),t.createElement("div",{style:{padding:".5rem",display:"flex",gap:".5rem",alignItems:"center"}},t.createElement("code",{style:{opacity:.6}},f.state.location.pathname),f.state.location.maskedLocation?t.createElement("code",{style:{color:u.warning,fontWeight:"bold"}},f.state.location.maskedLocation.pathname):null),t.createElement("div",{style:{padding:".5em",background:u.backgroundAlt,position:"sticky",top:0,zIndex:1,display:"flex",alignItems:"center",gap:".5rem",fontWeight:"bold"}},t.createElement("button",{type:"button",onClick:()=>{E(!1)},disabled:!y,style:{appearance:"none",opacity:y?.5:1,border:0,background:"transparent",color:"inherit",cursor:"pointer"}},"Routes"),"/",t.createElement("button",{type:"button",onClick:()=>{E(!0)},disabled:y,style:{appearance:"none",opacity:y?1:.5,border:0,background:"transparent",color:"inherit",cursor:"pointer"}},"Matches")),y?t.createElement("div",null,("pending"===f.state.status?f.state.pendingMatches:f.state.matches).map(((e,n)=>t.createElement("div",{key:e.routeId||n,role:"button","aria-label":`Open match details for ${e.routeId}`,onClick:()=>x(h===e.routeId?"":e.routeId),style:{display:"flex",borderBottom:`solid 1px ${u.grayAlt}`,cursor:"pointer",alignItems:"center",background:e===S?"rgba(255,255,255,.1)":void 0}},t.createElement("div",{style:{flex:"0 0 auto",width:"1.3rem",height:"1.3rem",marginLeft:".25rem",background:g(e,u),alignItems:"center",justifyContent:"center",fontWeight:"bold",borderRadius:".25rem",transition:"all .2s ease-out"}}),t.createElement(w,{style:{padding:".5em",fontSize:"0.7rem"}},`${e.id}`))))):t.createElement($,{route:f.routeTree,isRoot:!0,activeRouteId:h,setActiveRouteId:x}))),S?t.createElement(k,null,t.createElement("div",{style:{padding:".5em",background:u.backgroundAlt,position:"sticky",top:0,bottom:0,zIndex:1}},"Match Details"),t.createElement("div",null,t.createElement("table",null,t.createElement("tbody",null,t.createElement("tr",null,t.createElement("td",{style:{opacity:".5"}},"ID"),t.createElement("td",null,t.createElement(w,{style:{lineHeight:"1.8em"}},JSON.stringify(S.id,null,2)))),t.createElement("tr",null,t.createElement("td",{style:{opacity:".5"}},"Status"),t.createElement("td",null,S.status)),t.createElement("tr",null,t.createElement("td",{style:{opacity:".5"}},"Last Updated"),t.createElement("td",null,S.updatedAt?new Date(S.updatedAt).toLocaleTimeString():"N/A"))))),S.loaderData?t.createElement(t.Fragment,null,t.createElement("div",{style:{background:u.backgroundAlt,padding:".5em",position:"sticky",top:0,bottom:0,zIndex:1}},"Loader Data"),t.createElement("div",{style:{padding:".5em"}},t.createElement(z,{label:"loaderData",value:S.loaderData,defaultExpanded:{}}))):null,t.createElement("div",{style:{background:u.backgroundAlt,padding:".5em",position:"sticky",top:0,bottom:0,zIndex:1}},"Explorer"),t.createElement("div",{style:{padding:".5em"}},t.createElement(z,{label:"Match",value:S,defaultExpanded:{}}))):null,R?t.createElement("div",{style:{flex:"1 1 500px",minHeight:"40%",maxHeight:"100%",overflow:"auto",borderRight:`1px solid ${u.grayAlt}`,display:"flex",flexDirection:"column"}},t.createElement("div",{style:{padding:".5em",background:u.backgroundAlt,position:"sticky",top:0,bottom:0,zIndex:1,fontWeight:"bold"}},"Search Params"),t.createElement("div",{style:{padding:".5em"}},t.createElement(z,{value:f.state.location.search||{},defaultExpanded:Object.keys(f.state.location.search||{}).reduce(((e,t)=>(e[t]={},e)),{})}))):null))}));e.TanStackRouterDevtools=function({initialIsOpen:e,panelProps:n={},closeButtonProps:r={},toggleButtonProps:a={},position:l="bottom-left",containerElement:i="footer",router:c}){const s=t.useRef(null),m=t.useRef(null),[f,g]=d("tanstackRouterDevtoolsOpen",e),[b,y]=d("tanstackRouterDevtoolsHeight",null),[v,k]=h(!1),[w,S]=h(!1),R=E();t.useEffect((()=>{k(f??!1)}),[f,v,k]),t.useEffect((()=>{const e=m.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]),t[P?"useEffect":"useLayoutEffect"]((()=>{if(v){const e=s.current?.parentElement?.style.paddingBottom,t=()=>{const e=m.current?.getBoundingClientRect().height;s.current?.parentElement&&(s.current.parentElement.style.paddingBottom=`${e}px`)};if(t(),"undefined"!=typeof window)return window.addEventListener("resize",t),()=>{window.removeEventListener("resize",t),s.current?.parentElement&&"string"==typeof e&&(s.current.parentElement.style.paddingBottom=e)}}}),[v]);const{style:I={},...D}=n,{style:T={},onClick:O,...C}=r,{style:A={},onClick:L,...z}=a;return R()?t.createElement(i,{ref:s,className:"TanStackRouterDevtools"},t.createElement(p,{theme:u},t.createElement(M,o({ref:m},D,{router:c,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 ${u.gray}`,transformOrigin:"top",visibility:f?"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,o=e=>{const t=r-e.pageY,o=n+t;y(o),g(!(o<70))},a=()=>{S(!1),document.removeEventListener("mousemove",o),document.removeEventListener("mouseUp",a)};document.addEventListener("mousemove",o),document.addEventListener("mouseup",a)})(m.current,e)})),v?t.createElement(x,o({type:"button","aria-label":"Close TanStack Router Devtools"},C,{onClick:e=>{g(!1),O&&O(e)},style:{position:"fixed",zIndex:99999,margin:".5em",bottom:0,..."top-right"===l?{right:"0"}:"top-left"===l?{left:"0"}:"bottom-right"===l?{right:"0"}:{left:"0"},...T}}),"Close"):null),v?null:t.createElement("button",o({type:"button"},z,{"aria-label":"Open TanStack Router Devtools",onClick:e=>{g(!0),L&&L(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"===l?{top:"0",right:"0"}:"top-left"===l?{top:"0",left:"0"}:"bottom-right"===l?{bottom:"0",right:"0"}:{bottom:"0",left:"0"},...A}}),t.createElement(j,{"aria-hidden":!0}))):null},e.TanStackRouterDevtoolsPanel=M})); | ||
//# sourceMappingURL=index.production.js.map |
{ | ||
"name": "@tanstack/router-devtools", | ||
"author": "Tanner Linsley", | ||
"version": "0.0.1-beta.224", | ||
"version": "0.0.1-beta.225", | ||
"license": "MIT", | ||
@@ -44,3 +44,3 @@ "repository": "tanstack/router", | ||
"date-fns": "^2.29.1", | ||
"@tanstack/react-router": "0.0.1-beta.224" | ||
"@tanstack/react-router": "0.0.1-beta.225" | ||
}, | ||
@@ -47,0 +47,0 @@ "scripts": { |
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
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
873001
5885
+ Added@tanstack/history@0.0.1-beta.225(transitive)
+ Added@tanstack/react-router@0.0.1-beta.225(transitive)
- Removed@tanstack/history@0.0.1-beta.224(transitive)
- Removed@tanstack/react-router@0.0.1-beta.224(transitive)