@tanstack/solid-router
Version:
Modern and scalable routing for Solid applications
346 lines (345 loc) • 15.2 kB
JavaScript
const require_runtime = require("./_virtual/_rolldown/runtime.cjs");
const require_nonRouteComponentContext = require("./nonRouteComponentContext.cjs");
const require_CatchBoundary = require("./CatchBoundary.cjs");
const require_ClientOnly = require("./ClientOnly.cjs");
const require_useRouter = require("./useRouter.cjs");
const require_matchContext = require("./matchContext.cjs");
const require_SafeFragment = require("./SafeFragment.cjs");
const require_not_found = require("./not-found.cjs");
const require_renderRouteNotFound = require("./renderRouteNotFound.cjs");
const require_scroll_restoration = require("./scroll-restoration.cjs");
let _tanstack_router_core = require("@tanstack/router-core");
let _solidjs_web = require("@solidjs/web");
let solid_js = require("solid-js");
solid_js = require_runtime.__toESM(solid_js, 1);
let _tanstack_router_core_isServer = require("@tanstack/router-core/isServer");
//#region src/Match.tsx
var NearestMatchContext = require_matchContext.nearestMatchContext;
var renderScrollRestoration = _tanstack_router_core_isServer.isServer === false ? void 0 : (router, route) => (_tanstack_router_core_isServer.isServer ?? router.isServer) && route.parentRoute?.id === _tanstack_router_core.rootRouteId && router.options.scrollRestoration ? (0, _solidjs_web.createComponent)(require_scroll_restoration.ScrollRestoration, {}) : null;
var Match = (props) => {
const router = require_useRouter.useRouter();
const currentMatch = solid_js.createMemo(() => router.stores.getMatchStore(props.routeId).get());
const matchState = solid_js.createMemo(() => {
const match = currentMatch();
if (!match) return null;
return {
routeId: match.routeId,
ssr: match.ssr,
status: match.status
};
});
const nearestMatch = [() => props.routeId, currentMatch];
return (0, _solidjs_web.createComponent)(solid_js.Show, {
get when() {
return matchState();
},
children: (currentMatchState) => {
const route = router.routesById[props.routeId];
const routeOptions = () => {
currentMatchState();
return route.options;
};
const resolvePendingComponent = solid_js.createMemo(() => routeOptions().pendingComponent ?? router.options.defaultPendingComponent);
const routeErrorComponent = solid_js.createMemo(() => routeOptions().errorComponent ?? router.options.defaultErrorComponent);
const routeNotFoundComponent = solid_js.createMemo(() => route.isRoot ? routeOptions().notFoundComponent ?? router.options.notFoundRoute?.options.component ?? router.options.defaultNotFoundComponent : routeOptions().notFoundComponent ?? router.options.defaultNotFoundComponent);
const resolvedNoSsr = solid_js.createMemo(() => currentMatchState().ssr === false || currentMatchState().ssr === "data-only");
const ResolvedLoadingBoundary = solid_js.createMemo(() => resolvedNoSsr() ? require_SafeFragment.SafeFragment : solid_js.Loading);
const shouldSkipLoadingFallback = solid_js.createMemo(() => _tanstack_router_core_isServer.isServer ?? router.isServer ? resolvedNoSsr() : currentMatchState().ssr === "data-only");
const ResolvedNotFoundBoundary = solid_js.createMemo(() => routeNotFoundComponent() ? require_not_found.CatchNotFound : require_SafeFragment.SafeFragment);
const ShellComponent = solid_js.createMemo(() => route.isRoot ? route.options.shellComponent ?? require_SafeFragment.SafeFragment : require_SafeFragment.SafeFragment);
const MatchContent = () => (0, _solidjs_web.createComponent)(solid_js.Show, {
get when() {
return currentMatchState().status !== "pending";
},
get fallback() {
if (process.env.NODE_ENV !== "production") return require_nonRouteComponentContext.renderInNonRouteComponentContext(() => (0, _solidjs_web.createComponent)(_solidjs_web.Dynamic, { get component() {
return resolvePendingComponent();
} }), "pendingComponent");
return (0, _solidjs_web.createComponent)(_solidjs_web.Dynamic, { get component() {
return resolvePendingComponent();
} });
},
get children() {
return (0, _solidjs_web.createComponent)(MatchInner, {});
}
});
const RouteContent = () => (0, _solidjs_web.createComponent)(_solidjs_web.Dynamic, {
get component() {
return ResolvedNotFoundBoundary();
},
fallback: (error) => {
const notFoundError = require_not_found.getNotFound(error) ?? error;
notFoundError.routeId ??= currentMatchState().routeId;
if (notFoundError.routeId !== currentMatchState().routeId) throw notFoundError;
return process.env.NODE_ENV !== "production" ? require_nonRouteComponentContext.renderInNonRouteComponentContext(() => (0, _solidjs_web.createComponent)(_solidjs_web.Dynamic, (0, _solidjs_web.mergeProps)({ get component() {
return routeNotFoundComponent();
} }, notFoundError)), "notFoundComponent") : (0, _solidjs_web.createComponent)(_solidjs_web.Dynamic, (0, _solidjs_web.mergeProps)({ get component() {
return routeNotFoundComponent();
} }, notFoundError));
},
get children() {
return (0, _solidjs_web.createComponent)(solid_js.Switch, { get children() {
return [(0, _solidjs_web.createComponent)(solid_js.Match, {
get when() {
return resolvedNoSsr();
},
get children() {
return (0, _solidjs_web.createComponent)(require_ClientOnly.ClientOnly, {
get fallback() {
if (process.env.NODE_ENV !== "production") return require_nonRouteComponentContext.renderInNonRouteComponentContext(() => (0, _solidjs_web.createComponent)(_solidjs_web.Dynamic, { get component() {
return resolvePendingComponent();
} }), "pendingComponent");
return (0, _solidjs_web.createComponent)(_solidjs_web.Dynamic, { get component() {
return resolvePendingComponent();
} });
},
get children() {
return (0, _solidjs_web.createComponent)(MatchContent, {});
}
});
}
}), (0, _solidjs_web.createComponent)(solid_js.Match, {
get when() {
return !resolvedNoSsr();
},
get children() {
return (0, _solidjs_web.createComponent)(MatchContent, {});
}
})];
} });
}
});
return (0, _solidjs_web.createComponent)(_solidjs_web.Dynamic, {
get component() {
return ShellComponent();
},
get children() {
return [(0, _solidjs_web.createComponent)(NearestMatchContext, {
value: nearestMatch,
get children() {
return (0, _solidjs_web.createComponent)(_solidjs_web.Dynamic, {
get component() {
return ResolvedLoadingBoundary();
},
get fallback() {
if (shouldSkipLoadingFallback()) return;
if (process.env.NODE_ENV !== "production") return require_nonRouteComponentContext.renderInNonRouteComponentContext(() => (0, _solidjs_web.createComponent)(_solidjs_web.Dynamic, { get component() {
return resolvePendingComponent();
} }), "pendingComponent");
return (0, _solidjs_web.createComponent)(_solidjs_web.Dynamic, { get component() {
return resolvePendingComponent();
} });
},
get children() {
return (0, _solidjs_web.createComponent)(solid_js.Show, {
get when() {
return routeErrorComponent();
},
get fallback() {
return (0, _solidjs_web.createComponent)(RouteContent, {});
},
children: (errorComponent) => (0, _solidjs_web.createComponent)(require_CatchBoundary.CatchBoundary, {
getResetKey: () => {
const matches = router.stores.matches.get();
const index = matches.findIndex((match) => match.routeId === props.routeId);
if (index === -1) return "";
let key = "";
for (let i = index; i < matches.length; i++) {
const match = matches[i];
key += `${match.status}|${match.updatedAt},`;
}
return key;
},
get errorComponent() {
return errorComponent();
},
onCatch: (error) => {
const notFoundError = require_not_found.getNotFound(error);
if (notFoundError) {
notFoundError.routeId ??= currentMatchState().routeId;
throw notFoundError;
}
if (process.env.NODE_ENV !== "production") console.warn(`Warning: Error in route match: ${currentMatchState().routeId}`);
(routeOptions().onCatch ?? router.options.defaultOnCatch)?.(error);
},
render: RouteContent
})
});
}
});
}
}), (0, _solidjs_web.memo)(() => {
return renderScrollRestoration?.(router, route);
})];
}
});
}
});
};
var MatchInner = () => {
const router = require_useRouter.useRouter();
const nearestMatch = solid_js.useContext(require_matchContext.nearestMatchContext);
const match = nearestMatch[1];
const routeId = nearestMatch[0];
const matchState = solid_js.createMemo(() => {
const currentMatch = match();
const currentRouteId = routeId();
if (!currentMatch || !currentRouteId) return null;
const route = router.routesById[currentRouteId];
const remount = route.options.remountDeps ?? router.options.defaultRemountDeps;
let componentKey;
if (!remount) componentKey = currentRouteId;
else {
const deps = remount({
routeId: currentRouteId,
loaderDeps: currentMatch.loaderDeps,
params: currentMatch._strictParams,
search: currentMatch._strictSearch
});
componentKey = JSON.stringify(deps) ?? currentRouteId;
}
return {
route,
routeId: currentRouteId,
match: {
id: currentMatch.id,
status: currentMatch.status,
error: currentMatch.error
},
componentKey
};
});
return (0, _solidjs_web.createComponent)(solid_js.Show, {
get when() {
return matchState();
},
children: (currentMatchState) => {
const route = solid_js.createMemo(() => currentMatchState().route);
const currentMatch = solid_js.createMemo(() => currentMatchState().match);
const componentKey = solid_js.createMemo(() => currentMatchState().componentKey);
const OutComponent = solid_js.createMemo(() => route().options.component ?? router.options.defaultComponent ?? Outlet);
const keyedOut = () => (0, _solidjs_web.createComponent)(solid_js.Show, {
get when() {
return componentKey();
},
keyed: true,
children: (_key) => (0, _solidjs_web.createComponent)(_solidjs_web.Dynamic, { get component() {
return OutComponent();
} })
});
return (0, _solidjs_web.createComponent)(solid_js.Switch, { get children() {
return [
(0, _solidjs_web.createComponent)(solid_js.Match, {
get when() {
return currentMatch().status === "notFound";
},
children: (_) => solid_js.untrack(() => require_renderRouteNotFound.renderRouteNotFound(router, route(), currentMatch().error))
}),
(0, _solidjs_web.createComponent)(solid_js.Match, {
get when() {
return currentMatch().status === "error";
},
children: (_) => {
const matchError = solid_js.untrack(() => currentMatch().error);
if (_tanstack_router_core_isServer.isServer ?? router.isServer) {
const RouteErrorComponent = (route().options.errorComponent ?? router.options.defaultErrorComponent) || require_CatchBoundary.ErrorComponent;
return process.env.NODE_ENV !== "production" ? require_nonRouteComponentContext.renderInNonRouteComponentContext(() => (0, _solidjs_web.createComponent)(RouteErrorComponent, {
error: matchError,
reset: void 0,
info: { componentStack: "" }
}), "errorComponent") : (0, _solidjs_web.createComponent)(RouteErrorComponent, {
error: matchError,
reset: void 0,
info: { componentStack: "" }
});
}
throw matchError;
}
}),
(0, _solidjs_web.createComponent)(solid_js.Match, {
get when() {
return currentMatch().status === "success";
},
get children() {
return keyedOut();
}
})
];
} });
}
});
};
var Outlet = () => {
if (process.env.NODE_ENV !== "production") {
const nonRouteComponent = solid_js.useContext(require_nonRouteComponentContext.nonRouteComponentContext);
if (nonRouteComponent) console.warn(`Warning: An <Outlet /> was rendered inside a ${nonRouteComponent}. <Outlet /> should only be rendered inside a route component.`);
}
const router = require_useRouter.useRouter();
const nearestParentMatch = solid_js.useContext(require_matchContext.nearestMatchContext);
const parentMatch = nearestParentMatch[1];
const routeId = nearestParentMatch[0];
const route = solid_js.createMemo(() => {
const currentRouteId = routeId();
return currentRouteId ? router.routesById[currentRouteId] : void 0;
});
const parentNotFound = solid_js.createMemo(() => parentMatch()?._notFound);
const parentNotFoundError = solid_js.createMemo(() => parentMatch()?.error);
const childRouteId = solid_js.createMemo(() => {
if (parentNotFound()) return;
const currentRouteId = routeId();
if (!currentRouteId) return;
const ids = router.stores.ids.get();
return ids[ids.indexOf(currentRouteId) + 1];
});
const childPendingComponent = solid_js.createMemo(() => {
const childId = childRouteId();
return childId ? router.routesById[childId].options.pendingComponent ?? router.options.defaultPendingComponent : router.options.defaultPendingComponent;
});
return (0, _solidjs_web.createComponent)(solid_js.Show, {
get when() {
return childRouteId();
},
keyed: true,
get fallback() {
return (0, _solidjs_web.createComponent)(solid_js.Show, {
get when() {
return (0, _solidjs_web.memo)(() => {
return !!parentNotFound();
})() ? route() : parentNotFound();
},
children: (resolvedRoute) => solid_js.untrack(() => require_renderRouteNotFound.renderRouteNotFound(router, resolvedRoute(), parentNotFoundError()))
});
},
children: (currentChildRouteId) => {
const nextMatch = () => (0, _solidjs_web.createComponent)(Match, { routeId: currentChildRouteId });
return (0, _solidjs_web.createComponent)(solid_js.Show, {
get when() {
return routeId() === _tanstack_router_core.rootRouteId;
},
get fallback() {
return nextMatch();
},
get children() {
return (0, _solidjs_web.createComponent)(solid_js.Loading, {
get fallback() {
if (!childPendingComponent()) return null;
if (process.env.NODE_ENV !== "production") return require_nonRouteComponentContext.renderInNonRouteComponentContext(() => (0, _solidjs_web.createComponent)(_solidjs_web.Dynamic, { get component() {
return childPendingComponent();
} }), "pendingComponent");
return (0, _solidjs_web.createComponent)(_solidjs_web.Dynamic, { get component() {
return childPendingComponent();
} });
},
get children() {
return nextMatch();
}
});
}
});
}
});
};
//#endregion
exports.Match = Match;
exports.Outlet = Outlet;
//# sourceMappingURL=Match.cjs.map