@octanejs/tanstack-router 0.2.7 → 0.2.9

package/src/compiled/Matches.tsrx

@@ -0,0 +1,275 @@
+import {
+	CompiledOutlet as CompiledComponent,
+	CompiledContext,
+	useContext,
+	useLayoutEffect,
+	useRef,
+} from 'octane';
+import type { NotFoundError } from '@tanstack/router-core';
+import { hasKeys, isNotFound, rootRouteId, setupScrollRestoration } from '@tanstack/router-core';
+import { getScrollRestorationScriptForRouter } from '@tanstack/router-core/scroll-restoration-script';
+import { isServer } from '@tanstack/router-core/isServer';
+import { routerContext, matchContext, useRouter } from './bindings';
+import { useStore } from '../useStore';
+import { useTransitioner, settleOwner } from '../Transitioner.tsrx';
+import { useHydrated } from '../ClientOnly.tsrx';
+import { ErrorComponent } from '../CatchBoundary.tsrx';
+import { createLazyRouteLoader } from '../lazyRouteLoader';
+import type { RouterProps } from '../RouterProvider.tsrx';
+
+export function CompiledRouterProvider(props: RouterProps) @{
+	const { router, ...rest } = props;
+	if (hasKeys(rest)) {
+		router.update({
+			...router.options,
+			...rest,
+			context: { ...router.options.context, ...rest.context },
+		});
+	}
+	if (router.options.Wrap || router.options.InnerWrap) {
+		throw new Error(
+			'CompiledRouterProvider does not accept Wrap or InnerWrap. Use RouterProvider for renderable wrappers.',
+		);
+	}
+	<CompiledContext context={routerContext} value={router}>
+		<CompiledMatches />
+	</CompiledContext>
+}
+
+function CompiledWrap(props: { component?: any; children?: unknown }) @{
+	@if (props.component) {
+		<CompiledComponent component={props.component} props={{ children: props.children }} />
+	} @else {
+		<>{props.children}</>
+	}
+}
+
+function CompiledMatches() @{
+	const router = useRouter();
+	const rootRoute = (router.routesById as any)[rootRouteId];
+	useLayoutEffect(() => {
+		if (router.options.scrollRestoration) setupScrollRestoration(router);
+	}, [router]);
+	const expectedMatches = useTransitioner(router);
+	@try {
+		<CompiledMatchesInner expectedMatches={expectedMatches} />
+	} @pending {
+		<CompiledPending route={rootRoute} />
+	} @catch (error, reset) {
+		if (router.options.disableGlobalCatchBoundary) throw error;
+		<CompiledFailure error={error} reset={reset} route={rootRoute} global={true} />
+	}
+}
+
+function CompiledMatchesInner(props: { expectedMatches: unknown }) @{
+	const router = useRouter();
+	const acknowledgement: Array<any> = ((router as any)._rendered ??= []);
+	const matches = useStore(router.stores.matches, (m: any) =>
+		acknowledgement[0] === props.expectedMatches ? (props.expectedMatches ?? m) : m,
+	) as any;
+	const rootMatch = matches[0];
+	useLayoutEffect(() => {
+		if (acknowledgement[0] === matches) settleOwner(acknowledgement, true);
+	}, [acknowledgement, matches]);
+	@if (rootMatch) {
+		<CompiledContext context={matchContext} value={rootMatch.routeId}>
+			<CompiledMatch routeId={rootMatch.routeId} />
+		</CompiledContext>
+	}
+}
+
+function CompiledMatch(props: { routeId: string }) @{
+	const router = useRouter();
+	const store = router.stores.getMatchStore(props.routeId);
+	const ssr = useStore(store, (match: any) => match.ssr);
+	const route = (router.routesById as Record<string, any>)[props.routeId];
+	const pending = route.options.pendingComponent ?? router.options.defaultPendingComponent;
+	const errorComponent = route.options.errorComponent ?? router.options.defaultErrorComponent;
+	const noSsr = ssr === false || ssr === 'data-only';
+	const hasSuspense =
+		(!route.isRoot || route.options.wrapInSuspense || noSsr) &&
+		((route.options.wrapInSuspense ?? pending ?? errorComponent?.preload) || noSsr);
+	<CompiledWrap component={route.isRoot ? route.options.shellComponent : undefined}>
+		<CompiledContext context={matchContext} value={props.routeId}>
+			@if (hasSuspense) {
+				@try {
+					<CompiledMatchContent route={route} routeId={props.routeId} noSsr={noSsr} />
+				} @pending {
+					<CompiledPending route={route} />
+				}
+			} @else {
+				<CompiledMatchContent route={route} routeId={props.routeId} noSsr={noSsr} />
+			}
+		</CompiledContext>
+		@if (route.parentRoute?.id === rootRouteId && router.options.scrollRestoration) {
+			<CompiledScrollRestoration />
+		}
+	</CompiledWrap>
+}
+
+// Without a configured Suspense boundary, both lazy imports and loader promises
+// pass through to the next ancestor boundary. The match still owns its errors.
+function CompiledMatchContent(props: { route: any; routeId: string; noSsr: boolean }) @{
+	@try {
+		<CompiledMatchInner routeId={props.routeId} noSsr={props.noSsr} />
+	} @catch (error, reset) {
+		<CompiledFailure error={error} reset={reset} route={props.route} />
+	}
+}
+
+function CompiledMatchInner(props: { routeId: string; noSsr: boolean }) @{
+	const router = useRouter();
+	const match = useStore(router.stores.getMatchStore(props.routeId), (m: any) => m);
+	const route = (router.routesById as Record<string, any>)[props.routeId];
+	const hydrated = useHydrated();
+	const Comp = route.options.component ?? router.options.defaultComponent;
+	const remountFn = route.options.remountDeps ?? router.options.defaultRemountDeps;
+	const remountDeps = remountFn?.({
+		routeId: props.routeId,
+		loaderDeps: match.loaderDeps,
+		params: match._strictParams,
+		search: match._strictSearch,
+	});
+	const key = remountDeps ? JSON.stringify(remountDeps) : undefined;
+	if (match.status === 'pending' && !props.noSsr && (router as any)._tx) {
+		throw (router as any)._tx[5];
+	}
+	@if ((props.noSsr && !hydrated) || match.status === 'pending') {
+		<CompiledPending route={route} />
+	} @else if (match.status === 'notFound') {
+		<CompiledNotFound route={route} error={match.error} />
+	} @else if (match.status === 'error') {
+		@if (isServer ?? (router as any).isServer) {
+			<CompiledComponent
+				component={
+					route.options.errorComponent ?? router.options.defaultErrorComponent ?? ErrorComponent
+				}
+				props={{ error: match.error, reset: undefined, info: { componentStack: '' } }}
+			/>
+		} @else {
+			throw match.error;
+			<></>
+		}
+	} @else if (Comp) {
+		<CompiledComponent key={key} component={Comp} props={{}} />
+	} @else {
+		<CompiledOutlet />
+	}
+}
+
+// Reads exactly the next TanStack match, preserving nearest-match contexts and
+// fuzzy/root not-found placement. This is distinct from octane's component outlet.
+export function CompiledOutlet() @{
+	const router = useRouter();
+	const routeId = useContext(matchContext)!;
+	const store = router.stores.getMatchStore(routeId);
+	const notFound = useStore(
+		store,
+		(m: any) => ({ global: !!m?._notFound, error: m?.error }),
+		(a, b) => a.global === b.global && a.error === b.error,
+	);
+	const childId = useStore(router.stores.ids, (ids: Array<string>) => {
+		const i = ids.indexOf(routeId);
+		return i >= 0 ? ids[i + 1] : undefined;
+	});
+	@if (notFound.global) {
+		<CompiledNotFound route={(router.routesById as any)[routeId]} error={notFound.error} />
+	} @else if (childId) {
+		@if (routeId === rootRouteId) {
+			@try {
+				<CompiledMatch routeId={childId} />
+			} @pending {
+				<CompiledPending />
+			}
+		} @else {
+			<CompiledMatch routeId={childId} />
+		}
+	}
+}
+
+function CompiledPending(props: { route?: any }) @{
+	const router = useRouter();
+	const Pending = props.route?.options.pendingComponent ?? router.options.defaultPendingComponent;
+	@if (Pending) {
+		<CompiledComponent component={Pending} props={{}} />
+	}
+}
+
+function CompiledNotFound(props: { route: any; error?: NotFoundError }) @{
+	const router = useRouter();
+	const NotFound = props.route.options.notFoundComponent ?? router.options.defaultNotFoundComponent;
+	@if (NotFound) {
+		<CompiledComponent component={NotFound} props={props.error ?? {}} />
+	} @else {
+		<p>Not Found</p>
+	}
+}
+
+function CompiledFailure(props: { error: any; reset: () => void; route: any; global?: boolean }) @{
+	const router = useRouter();
+	const errorComponent = props.global
+		? ErrorComponent
+		: (props.route.options.errorComponent ?? router.options.defaultErrorComponent);
+	const notFoundComponent = props.route.isRoot
+		? (props.route.options.notFoundComponent ?? router.options.notFoundRoute?.options.component)
+		: props.route.options.notFoundComponent;
+	const isMissing = isNotFound(props.error);
+	if (isMissing) {
+		const missing = props.error as NotFoundError;
+		missing.routeId ??= props.route.id;
+		if (!notFoundComponent || missing.routeId !== props.route.id) throw missing;
+	} else if (!errorComponent) {
+		throw props.error;
+	}
+
+	// Report an error only at the boundary that owns it and retry after its
+	// TanStack match identity changes, just like the normal binding.
+	const reported = useRef<unknown>(null);
+	if (!isMissing && !props.global && reported.current !== props.error) {
+		reported.current = props.error;
+		const onCatch = props.route.options.onCatch ?? router.options.defaultOnCatch;
+		onCatch?.(props.error, { componentStack: '' });
+	}
+	const store = router.stores.getMatchStore(props.route.id);
+	const match = useStore(store, (m: any) => m);
+	const firstMatch = useRef(match);
+	useLayoutEffect(() => {
+		if (firstMatch.current !== match) {
+			firstMatch.current = match;
+			props.reset();
+		}
+	}, [match]);
+
+	@if (isMissing) {
+		<CompiledComponent component={notFoundComponent} props={props.error} />
+	} @else {
+		<CompiledComponent
+			component={errorComponent}
+			props={{ error: props.error, reset: props.reset, info: { componentStack: '' } }}
+		/>
+	}
+}
+
+function CompiledScrollRestoration() @{
+	const router = useRouter();
+	const hydrated = useHydrated();
+	const option = router.options.scrollRestoration;
+	const script = getScrollRestorationScriptForRouter(router);
+	const rendersScript = typeof option !== 'function' || option({ location: router.latestLocation });
+	@if ((script !== null || rendersScript) && ((isServer ?? router.isServer) || !hydrated)) {
+		<script
+			nonce={router.options.ssr?.nonce}
+			suppressHydrationWarning
+			dangerouslySetInnerHTML={{ __html: script ?? '' }}
+		/>
+	}
+}
+
+export function lazyCompiledRouteComponent(importer: () => Promise<any>, exportName?: string) {
+	const loader = createLazyRouteLoader(importer, exportName);
+	function Lazy(props: any) @{
+		<CompiledComponent component={loader.read()} props={props} />
+	}
+	Lazy.preload = loader.preload;
+	return Lazy;
+}

package/src/compiled/bindings.ts

@@ -0,0 +1,42 @@
+'use strong';
+
+import { createCompiledContext, useContext } from 'octane';
+import type { AnyRouter, RegisteredRouter } from '@tanstack/router-core';
+import { createRouterHooks } from '../hookBindings';
+import { createUseRouterState } from '../routerStateBinding';
+
+// The normal contexts remain callable providers. These contexts belong only to
+// the opt-in compiled tree so that using it never imports a generic provider.
+export const routerContext = createCompiledContext<AnyRouter | undefined>(undefined);
+export const matchContext = createCompiledContext<string | undefined>(undefined);
+
+export function useRouter<TRouter extends AnyRouter = RegisteredRouter>(opts?: {
+	router?: TRouter;
+	warn?: boolean;
+}): TRouter;
+export function useRouter(...args: unknown[]): AnyRouter {
+	const opts = (args.length && typeof args[0] !== 'symbol' ? args[0] : undefined) as
+		{ router?: AnyRouter; warn?: boolean } | undefined;
+	const router = opts?.router ?? useContext(routerContext);
+	if (!router && opts?.warn !== false) {
+		throw new Error('Use compiled router hooks inside <CompiledRouterProvider>.');
+	}
+	return router as AnyRouter;
+}
+
+export const {
+	useMatch,
+	useParams,
+	useSearch,
+	useLoaderData,
+	useLoaderDeps,
+	useRouteContext,
+	useLocation,
+	useMatches,
+	useParentMatches,
+	useChildMatches,
+	useNavigate,
+	useCanGoBack,
+} = createRouterHooks(useRouter, () => useContext(matchContext));
+
+export const useRouterState = createUseRouterState(useRouter);

package/src/compiled/route.tsrx

@@ -0,0 +1,71 @@
+'use strong';
+
+import { BaseRoute, BaseRootRoute, BaseRouteApi, notFound } from '@tanstack/router-core';
+import { createRouteHookBindings } from '../routeHookBindings';
+import * as hooks from './bindings';
+import { Link } from './Link.tsrx';
+import { splitSlot, subSlot } from '../internal';
+import type * as RouteFactories from '../route';
+import type * as FileFactories from '../fileRoute';
+
+const { attachRouteHooks, attachRouteNavigation, attachLazyRouteHooks } = createRouteHookBindings(
+	hooks,
+	hooks.useRouter,
+);
+
+function attachRoute(route: any) {
+	attachRouteHooks(route, true);
+	attachRouteNavigation(route);
+	function RouteLink(props: any) @{
+		<Link from={route.fullPath} {...props} />
+	}
+	route.Link = RouteLink;
+	return route;
+}
+
+// These factories preserve the binding's precise route types, while constructing
+// core instances directly: no ordinary-context hooks or descriptor Link are made.
+export const createRoute: typeof RouteFactories.createRoute = (options: any) =>
+	attachRoute(new BaseRoute(options));
+export const createRootRoute: typeof RouteFactories.createRootRoute = (options?: any) =>
+	attachRoute(new BaseRootRoute(options));
+export const createRootRouteWithContext: typeof RouteFactories.createRootRouteWithContext = () =>
+	createRootRoute;
+export const rootRouteWithContext = createRootRouteWithContext;
+
+export const getRouteApi: typeof RouteFactories.getRouteApi = (id: any) => {
+	const route = new BaseRouteApi({ id }) as any;
+	attachRouteHooks(route, false);
+	route.useNavigate = (...args: any[]) => {
+		const [, slot] = splitSlot(args);
+		const router = hooks.useRouter();
+		return hooks.useNavigate(
+			{ from: (router.routesById as any)[id].fullPath },
+			subSlot(slot, 'r:n'),
+		);
+	};
+	function RouteLink(props: any) @{
+		const router = hooks.useRouter();
+		<Link from={(router.routesById as any)[id].fullPath} {...props} />
+	}
+	route.Link = RouteLink;
+	route.notFound = (options: any) => notFound({ routeId: id, ...options });
+	return route;
+};
+
+export const createFileRoute: typeof FileFactories.createFileRoute = () => (options: any) => {
+	const route = createRoute(options) as any;
+	route.isRoot = false;
+	return route;
+};
+
+function lazyRoute(options: any) {
+	const route = { options } as any;
+	attachLazyRouteHooks(route);
+	return route;
+}
+
+export const createLazyRoute: typeof FileFactories.createLazyRoute = (id: any) => (options: any) =>
+	lazyRoute({ id, ...options });
+export const createLazyFileRoute: typeof FileFactories.createLazyFileRoute = (id: any) =>
+	typeof id === 'object' ? lazyRoute(id) : (options: any) => lazyRoute({ id, ...options });

package/src/compiled.ts

@@ -0,0 +1,67 @@
+// Opt-in source-owned renderer for route trees with compiled bodies.
+import './frameworkTypes';
+export * from '@tanstack/router-core';
+export { Router, createRouter } from './router';
+export {
+	createHistory,
+	createBrowserHistory,
+	createHashHistory,
+	createMemoryHistory,
+} from './history';
+export type {
+	RouterHistory,
+	HistoryLocation,
+	ParsedPath,
+	HistoryState,
+	ParsedHistoryState,
+	HistoryAction,
+	BlockerFnArgs,
+	BlockerFn,
+	NavigationBlocker,
+} from '@tanstack/history';
+export {
+	useRouter,
+	useRouterState,
+	useMatch,
+	useParams,
+	useSearch,
+	useLoaderData,
+	useLoaderDeps,
+	useRouteContext,
+	useLocation,
+	useMatches,
+	useParentMatches,
+	useChildMatches,
+	useNavigate,
+	useCanGoBack,
+} from './compiled/bindings';
+export type { UseRouterStateOptions, UseRouterStateResult } from './routerStateBinding';
+export {
+	CompiledRouterProvider,
+	CompiledRouterProvider as RouterProvider,
+	CompiledOutlet,
+	CompiledOutlet as Outlet,
+	lazyCompiledRouteComponent,
+	lazyCompiledRouteComponent as lazyRouteComponent,
+} from './compiled/Matches.tsrx';
+export {
+	createRoute,
+	createRootRoute,
+	createRootRouteWithContext,
+	rootRouteWithContext,
+	getRouteApi,
+	createFileRoute,
+	createLazyRoute,
+	createLazyFileRoute,
+} from './compiled/route.tsrx';
+export { Link, useLinkProps, createLink } from './compiled/Link.tsrx';
+export { ClientOnly, useHydrated } from './ClientOnly.tsrx';
+export { getAssetKeys } from './assetKeys';
+export { Html, Head, Body, Asset, HeadContent, Scripts, useTags } from './compiled/Document.tsrx';
+export type { AssetKeys } from './assetKeys';
+export type {
+	LinkComponent,
+	LinkComponentProps,
+	LinkProps,
+	UseLinkPropsOptions,
+} from './linkTypes';

package/src/fileRoute.ts

@@ -1,4 +1,5 @@
 import { createRoute } from './route';
+import type { Route } from './route';
 import {
 	useLoaderData,
 	useLoaderDeps,
@@ -9,7 +10,12 @@ import {
 	useSearch,
 } from './hooks';
 import { useRouter } from './context';
-import { splitSlot, subSlot } from './internal';
+import { createRouteHookBindings } from './routeHookBindings';
+
+const { attachLazyRouteHooks } = createRouteHookBindings(
+	{ useMatch, useParams, useSearch, useLoaderData, useLoaderDeps, useRouteContext, useNavigate },
+	useRouter,
+);
 import type {
 	AnyContext,
 	AnyRoute,
@@ -22,7 +28,6 @@ import type {
 	Register,
 	RegisteredRouter,
 	ResolveParams,
-	Route,
 	RouteById,
 	RouteConstraints,
 	RouteIds,
@@ -198,63 +203,7 @@ export class LazyRoute<TRoute extends AnyRoute> {
 
 	constructor(opts: { id: string } & LazyRouteOptions) {
 		this.options = opts;
-		const id = this.options.id;
-		this.useMatch = ((...args: Array<any>) => {
-			const [user, slot] = splitSlot(args);
-			const options = user[0] ?? {};
-			return useMatch(
-				{
-					select: options.select,
-					from: id,
-					structuralSharing: options.structuralSharing,
-				},
-				subSlot(slot, 'lr:m'),
-			);
-		}) as typeof this.useMatch;
-		this.useRouteContext = ((...args: Array<any>) => {
-			const [user, slot] = splitSlot(args);
-			return useRouteContext({ ...(user[0] ?? {}), from: id }, subSlot(slot, 'lr:c'));
-		}) as typeof this.useRouteContext;
-		this.useSearch = ((...args: Array<any>) => {
-			const [user, slot] = splitSlot(args);
-			const options = user[0] ?? {};
-			return useSearch(
-				{
-					select: options.select,
-					from: id,
-					structuralSharing: options.structuralSharing,
-				},
-				subSlot(slot, 'lr:s'),
-			);
-		}) as typeof this.useSearch;
-		this.useParams = ((...args: Array<any>) => {
-			const [user, slot] = splitSlot(args);
-			const options = user[0] ?? {};
-			return useParams(
-				{
-					select: options.select,
-					from: id,
-					structuralSharing: options.structuralSharing,
-				},
-				subSlot(slot, 'lr:p'),
-			);
-		}) as typeof this.useParams;
-		this.useLoaderDeps = ((...args: Array<any>) => {
-			const [user, slot] = splitSlot(args);
-			return useLoaderDeps({ ...(user[0] ?? {}), from: id }, subSlot(slot, 'lr:d'));
-		}) as typeof this.useLoaderDeps;
-		this.useLoaderData = ((...args: Array<any>) => {
-			const [user, slot] = splitSlot(args);
-			return useLoaderData({ ...(user[0] ?? {}), from: id }, subSlot(slot, 'lr:l'));
-		}) as typeof this.useLoaderData;
-		this.useNavigate = ((...args: Array<any>) => {
-			const [, slot] = splitSlot(args);
-			const router = useRouter();
-			return useNavigate(
-				{ from: (router.routesById as Record<string, any>)[id].fullPath },
-				subSlot(slot, 'lr:n'),
-			);
-		}) as typeof this.useNavigate;
+		attachLazyRouteHooks(this);
 	}
 }
 
@@ -268,7 +217,8 @@ export function createLazyRoute<
 
 export function createLazyFileRoute<
 	TFilePath extends keyof FileRoutesByPath,
-	TRoute extends FileRoutesByPath[TFilePath]['preLoaderRoute'],
+	TRoute extends FileRoutesByPath[TFilePath]['preLoaderRoute'] & AnyRoute =
+		FileRoutesByPath[TFilePath]['preLoaderRoute'],
 >(id: TFilePath): (opts: LazyRouteOptions) => LazyRoute<TRoute> {
 	if (typeof id === 'object') {
 		return new LazyRoute<TRoute>(id) as any;

package/src/frameworkTypes.ts

@@ -30,13 +30,16 @@ declare module '@tanstack/router-core' {
 	}
 
 	interface RouteExtensions<in out TId extends string, in out TFullPath extends string> {
-		useMatch: UseMatchRoute<TId>;
-		useRouteContext: UseRouteContextRoute<TId>;
-		useSearch: UseSearchRoute<TId>;
-		useParams: UseParamsRoute<TId>;
-		useLoaderDeps: UseLoaderDepsRoute<TId>;
-		useLoaderData: UseLoaderDataRoute<TId>;
-		useNavigate: () => UseNavigateResult<TFullPath>;
-		Link: LinkComponentRoute<TFullPath>;
+		// Core base routes are also valid in compiled trees and do not own bound
+		// renderer hooks. The ordinary binding's concrete Route classes provide
+		// each of these members as required properties.
+		useMatch?: UseMatchRoute<TId>;
+		useRouteContext?: UseRouteContextRoute<TId>;
+		useSearch?: UseSearchRoute<TId>;
+		useParams?: UseParamsRoute<TId>;
+		useLoaderDeps?: UseLoaderDepsRoute<TId>;
+		useLoaderData?: UseLoaderDataRoute<TId>;
+		useNavigate?: () => UseNavigateResult<TFullPath>;
+		Link?: LinkComponentRoute<TFullPath>;
 	}
 }