@tanstack/react-router
Version:
Modern and scalable routing for React applications
149 lines (148 loc) • 6.98 kB
JavaScript
const require_runtime = require("./_virtual/_rolldown/runtime.cjs");
const require_CatchBoundary = require("./CatchBoundary.cjs");
const require_matchContext = require("./matchContext.cjs");
const require_useRouter = require("./useRouter.cjs");
const require_Transitioner = require("./Transitioner.cjs");
const require_SafeFragment = require("./SafeFragment.cjs");
const require_Match = require("./Match.cjs");
let _tanstack_router_core = require("@tanstack/router-core");
let react = require("react");
react = require_runtime.__toESM(react);
let react_jsx_runtime = require("react/jsx-runtime");
let _tanstack_react_store = require("@tanstack/react-store");
let _tanstack_router_core_isServer = require("@tanstack/router-core/isServer");
//#region src/Matches.tsx
/**
* Internal component that renders the router's active match tree with
* suspense, error, and not-found boundaries. Rendered by `RouterProvider`.
*/
function Matches() {
const router = require_useRouter.useRouter();
const PendingComponent = router.routesById[_tanstack_router_core.rootRouteId].options.pendingComponent ?? router.options.defaultPendingComponent;
const pendingElement = PendingComponent ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(PendingComponent, {}) : null;
const inner = /* @__PURE__ */ (0, react_jsx_runtime.jsxs)((_tanstack_router_core_isServer.isServer ?? router.isServer) || typeof document !== "undefined" && router.ssr ? require_SafeFragment.SafeFragment : react.Suspense, {
fallback: pendingElement,
children: [!(_tanstack_router_core_isServer.isServer ?? router.isServer) && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Transitioner.Transitioner, {}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(MatchesInner, {})]
});
return router.options.InnerWrap ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(router.options.InnerWrap, { children: inner }) : inner;
}
function MatchesInner() {
const router = require_useRouter.useRouter();
const _isServer = _tanstack_router_core_isServer.isServer ?? router.isServer;
const matchId = _isServer ? router.stores.firstMatchId.state : (0, _tanstack_react_store.useStore)(router.stores.firstMatchId, (id) => id);
const resetKey = _isServer ? router.stores.loadedAt.state : (0, _tanstack_react_store.useStore)(router.stores.loadedAt, (loadedAt) => loadedAt);
const matchComponent = matchId ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Match.Match, { matchId }) : null;
return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_matchContext.matchContext.Provider, {
value: matchId,
children: router.options.disableGlobalCatchBoundary ? matchComponent : /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_CatchBoundary.CatchBoundary, {
getResetKey: () => resetKey,
errorComponent: require_CatchBoundary.ErrorComponent,
onCatch: process.env.NODE_ENV !== "production" ? (error) => {
console.warn(`Warning: The following error wasn't caught by any route! At the very least, consider setting an 'errorComponent' in your RootRoute!`);
console.warn(`Warning: ${error.message || error.toString()}`);
} : void 0,
children: matchComponent
})
});
}
/**
* Create a matcher function for testing locations against route definitions.
*
* The returned function accepts standard navigation options (`to`, `params`,
* `search`, etc.) and returns either `false` (no match) or the matched params
* object when the route matches the current or pending location.
*
* Useful for conditional rendering and active UI states.
*
* @returns A `matchRoute(options)` function that returns `false` or params.
* @link https://tanstack.com/router/latest/docs/framework/react/api/router/useMatchRouteHook
*/
function useMatchRoute() {
const router = require_useRouter.useRouter();
if (!(_tanstack_router_core_isServer.isServer ?? router.isServer)) (0, _tanstack_react_store.useStore)(router.stores.matchRouteReactivity, (d) => d);
return react.useCallback((opts) => {
const { pending, caseSensitive, fuzzy, includeSearch, ...rest } = opts;
return router.matchRoute(rest, {
pending,
caseSensitive,
fuzzy,
includeSearch
});
}, [router]);
}
/**
* Component that conditionally renders its children based on whether a route
* matches the provided `from`/`to` options. If `children` is a function, it
* receives the matched params object.
*
* @link https://tanstack.com/router/latest/docs/framework/react/api/router/matchRouteComponent
*/
function MatchRoute(props) {
const params = useMatchRoute()(props);
if (typeof props.children === "function") return props.children(params);
return params ? props.children : null;
}
function useMatches(opts) {
const router = require_useRouter.useRouter();
const previousResult = react.useRef(void 0);
if (_tanstack_router_core_isServer.isServer ?? router.isServer) {
const matches = router.stores.activeMatchesSnapshot.state;
return opts?.select ? opts.select(matches) : matches;
}
return (0, _tanstack_react_store.useStore)(router.stores.activeMatchesSnapshot, (matches) => {
const selected = opts?.select ? opts.select(matches) : matches;
if (opts?.structuralSharing ?? router.options.defaultStructuralSharing) {
const shared = (0, _tanstack_router_core.replaceEqualDeep)(previousResult.current, selected);
previousResult.current = shared;
return shared;
}
return selected;
});
}
/**
* Read the full array of active route matches or select a derived subset.
*
* Useful for debugging, breadcrumbs, or aggregating metadata across matches.
*
* @returns The array of matches (or the selected value).
* @link https://tanstack.com/router/latest/docs/framework/react/api/router/useMatchesHook
*/
/**
* Read the full array of active route matches or select a derived subset.
*
* Useful for debugging, breadcrumbs, or aggregating metadata across matches.
*
* @link https://tanstack.com/router/latest/docs/framework/react/api/router/useMatchesHook
*/
function useParentMatches(opts) {
const contextMatchId = react.useContext(require_matchContext.matchContext);
return useMatches({
select: (matches) => {
matches = matches.slice(0, matches.findIndex((d) => d.id === contextMatchId));
return opts?.select ? opts.select(matches) : matches;
},
structuralSharing: opts?.structuralSharing
});
}
/**
* Read the array of active route matches that are children of the current
* match (or selected parent) in the match tree.
*/
function useChildMatches(opts) {
const contextMatchId = react.useContext(require_matchContext.matchContext);
return useMatches({
select: (matches) => {
matches = matches.slice(matches.findIndex((d) => d.id === contextMatchId) + 1);
return opts?.select ? opts.select(matches) : matches;
},
structuralSharing: opts?.structuralSharing
});
}
//#endregion
exports.MatchRoute = MatchRoute;
exports.Matches = Matches;
exports.useChildMatches = useChildMatches;
exports.useMatchRoute = useMatchRoute;
exports.useMatches = useMatches;
exports.useParentMatches = useParentMatches;
//# sourceMappingURL=Matches.cjs.map