@octanejs/tanstack-router 0.2.8 → 0.2.10

package/src/compiled/Matches.tsrx

@@ -36,15 +36,23 @@ export function CompiledRouterProvider(props: RouterProps) @{
 	</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]);
-	useTransitioner(router);
+	const expectedMatches = useTransitioner(router);
 	@try {
-		<CompiledMatchesInner />
+		<CompiledMatchesInner expectedMatches={expectedMatches} />
 	} @pending {
 		<CompiledPending route={rootRoute} />
 	} @catch (error, reset) {
@@ -53,16 +61,20 @@ function CompiledMatches() @{
 	}
 }
 
-function CompiledMatchesInner() @{
+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] ?? m);
+	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) {
-		<CompiledMatch routeId={rootMatch.routeId} />
+		<CompiledContext context={matchContext} value={rootMatch.routeId}>
+			<CompiledMatch routeId={rootMatch.routeId} />
+		</CompiledContext>
 	}
 }
 
@@ -71,31 +83,28 @@ function CompiledMatch(props: { routeId: string }) @{
 	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];
-	if (route.isRoot && route.options.shellComponent) {
-		throw new Error(
-			'CompiledRouterProvider does not accept shellComponent. Use RouterProvider for renderable document shells.',
-		);
-	}
 	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);
-	<CompiledContext context={matchContext} value={props.routeId}>
-		@if (hasSuspense) {
-			@try {
+	<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} />
-			} @pending {
-				<CompiledPending route={route} />
 			}
-		} @else {
-			<CompiledMatchContent route={route} routeId={props.routeId} noSsr={noSsr} />
-		}
+		</CompiledContext>
 		@if (route.parentRoute?.id === rootRouteId && router.options.scrollRestoration) {
 			<CompiledScrollRestoration />
 		}
-	</CompiledContext>
+	</CompiledWrap>
 }
 
 // Without a configured Suspense boundary, both lazy imports and loader promises

package/src/compiled/bindings.ts

@@ -1,3 +1,5 @@
+'use strong';
+
 import { createCompiledContext, useContext } from 'octane';
 import type { AnyRouter, RegisteredRouter } from '@tanstack/router-core';
 import { createRouterHooks } from '../hookBindings';

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

@@ -1,4 +1,4 @@
-// Opt-in source-owned renderer for code routes with compiled bodies only.
+// Opt-in source-owned renderer for route trees with compiled bodies.
 import './frameworkTypes';
 export * from '@tanstack/router-core';
 export { Router, createRouter } from './router';
@@ -8,6 +8,17 @@ export {
 	createHashHistory,
 	createMemoryHistory,
 } from './history';
+export type {
+	RouterHistory,
+	HistoryLocation,
+	ParsedPath,
+	HistoryState,
+	ParsedHistoryState,
+	HistoryAction,
+	BlockerFnArgs,
+	BlockerFn,
+	NavigationBlocker,
+} from '@tanstack/history';
 export {
 	useRouter,
 	useRouterState,
@@ -27,6 +38,30 @@ export {
 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

@@ -10,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,
@@ -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);
 	}
 }
 

package/src/headContentBinding.ts

@@ -0,0 +1,178 @@
+'use strong';
+
+import {
+	appendUniqueUserTags,
+	deepEqual,
+	escapeHtml,
+	getAssetCrossOrigin,
+	getScriptPreloadAttrs,
+	resolveManifestCssLink,
+} from '@tanstack/router-core';
+import { isServer } from '@tanstack/router-core/isServer';
+import type { useRouter as UseRouter } from './context';
+import { splitSlot, subSlot } from './internal';
+import { useStore } from './useStore';
+import type {
+	AnyRouteMatch,
+	AnyRouter,
+	AssetCrossOriginConfig,
+	RouterManagedTag,
+} from '@tanstack/router-core';
+
+function buildTagsFromMatches(
+	router: AnyRouter,
+	nonce: string | undefined,
+	matches: Array<AnyRouteMatch>,
+	assetCrossOrigin?: AssetCrossOriginConfig,
+): Array<RouterManagedTag> {
+	const routeMeta = matches.map((match) => match.meta).filter((meta) => meta !== undefined);
+
+	const resultMeta: Array<RouterManagedTag> = [];
+	const metaByAttribute: Record<string, true> = {};
+	let title: RouterManagedTag | undefined;
+	for (let i = routeMeta.length - 1; i >= 0; i--) {
+		const metas = routeMeta[i]!;
+		for (let j = metas.length - 1; j >= 0; j--) {
+			const meta = metas[j];
+			if (!meta) {
+				continue;
+			}
+
+			if ('title' in meta && typeof meta.title === 'string') {
+				title ??= { tag: 'title', children: meta.title };
+			} else if ('script:ld+json' in meta) {
+				try {
+					resultMeta.push({
+						tag: 'script',
+						attrs: { type: 'application/ld+json' },
+						children: escapeHtml(JSON.stringify(meta['script:ld+json'])),
+					});
+				} catch {
+					// Ignore values that cannot be serialized as JSON-LD.
+				}
+			} else {
+				const attribute =
+					('name' in meta && typeof meta.name === 'string' ? meta.name : undefined) ??
+					('property' in meta && typeof meta.property === 'string' ? meta.property : undefined);
+				if (attribute && metaByAttribute[attribute]) {
+					continue;
+				}
+				if (attribute) {
+					metaByAttribute[attribute] = true;
+				}
+				resultMeta.push({ tag: 'meta', attrs: { ...meta, nonce } });
+			}
+		}
+	}
+
+	if (title) {
+		resultMeta.push(title);
+	}
+	if (nonce) {
+		resultMeta.push({
+			tag: 'meta',
+			attrs: { property: 'csp-nonce', content: nonce },
+		});
+	}
+	resultMeta.reverse();
+
+	const links = matches
+		.flatMap((match) => match.links ?? [])
+		.filter((link) => link !== undefined)
+		.map((link) => ({ tag: 'link', attrs: { ...link, nonce } }) satisfies RouterManagedTag);
+
+	const manifestTags: Array<RouterManagedTag> = [];
+	const preloadTags: Array<RouterManagedTag> = [];
+	const manifest = router.ssr?.manifest;
+	if (manifest) {
+		for (const match of matches) {
+			for (const link of manifest.routes[match.routeId]?.css ?? []) {
+				const resolvedLink = resolveManifestCssLink(link);
+				manifestTags.push({
+					tag: 'link',
+					attrs: {
+						rel: 'stylesheet',
+						...resolvedLink,
+						crossOrigin:
+							getAssetCrossOrigin(assetCrossOrigin, 'stylesheet') ?? resolvedLink.crossOrigin,
+						nonce,
+					},
+				});
+			}
+			for (const preload of manifest.routes[match.routeId]?.preloads ?? []) {
+				preloadTags.push({
+					tag: 'link',
+					attrs: {
+						...getScriptPreloadAttrs(manifest, preload, assetCrossOrigin),
+						nonce,
+					},
+				});
+			}
+		}
+
+		if (manifest.inlineStyle) {
+			manifestTags.push({
+				tag: 'style',
+				attrs: { ...manifest.inlineStyle.attrs, nonce },
+				children: manifest.inlineStyle.children,
+				inlineCss: true,
+			});
+		}
+	}
+
+	const styles = matches
+		.flatMap((match) => match.styles ?? [])
+		.filter((style) => style !== undefined)
+		.map(
+			({ children, ...attrs }) =>
+				({
+					tag: 'style',
+					attrs: { ...attrs, nonce },
+					children: children,
+				}) satisfies RouterManagedTag,
+		);
+
+	const headScripts = matches
+		.flatMap((match) => match.headScripts ?? [])
+		.filter((script) => script !== undefined)
+		.map(
+			({ children, ...attrs }) =>
+				({
+					tag: 'script',
+					attrs: { ...attrs, nonce },
+					children: children,
+				}) satisfies RouterManagedTag,
+		);
+
+	const tags: Array<RouterManagedTag> = [];
+	appendUniqueUserTags(tags, resultMeta);
+	tags.push(...preloadTags);
+	appendUniqueUserTags(tags, links);
+	tags.push(...manifestTags);
+	appendUniqueUserTags(tags, styles);
+	appendUniqueUserTags(tags, headScripts);
+	return tags;
+}
+
+export function createUseTags(useRouter: typeof UseRouter) {
+	function useTags(...args: Array<unknown>): Array<RouterManagedTag> {
+		const [userArgs, slot] = splitSlot(args);
+		const assetCrossOrigin = userArgs[0] as AssetCrossOriginConfig | undefined;
+		const router = useRouter();
+		const nonce = router.options.ssr?.nonce;
+
+		if (isServer ?? router.isServer) {
+			return buildTagsFromMatches(router, nonce, router.stores.matches.get(), assetCrossOrigin);
+		}
+
+		return useStore(
+			router.stores.matches,
+			(matches: Array<AnyRouteMatch>) =>
+				buildTagsFromMatches(router, nonce, matches, assetCrossOrigin),
+			deepEqual,
+			subSlot(slot, 'head:tags'),
+		);
+	}
+
+	return useTags;
+}

package/src/headContentUtils.ts

@@ -1,172 +1,4 @@
-import {
-	appendUniqueUserTags,
-	deepEqual,
-	escapeHtml,
-	getAssetCrossOrigin,
-	getScriptPreloadAttrs,
-	resolveManifestCssLink,
-} from '@tanstack/router-core';
-import { isServer } from '@tanstack/router-core/isServer';
 import { useRouter } from './context';
-import { splitSlot, subSlot } from './internal';
-import { useStore } from './useStore';
-import type {
-	AnyRouteMatch,
-	AnyRouter,
-	AssetCrossOriginConfig,
-	RouterManagedTag,
-} from '@tanstack/router-core';
+import { createUseTags } from './headContentBinding';
 
-function buildTagsFromMatches(
-	router: AnyRouter,
-	nonce: string | undefined,
-	matches: Array<AnyRouteMatch>,
-	assetCrossOrigin?: AssetCrossOriginConfig,
-): Array<RouterManagedTag> {
-	const routeMeta = matches.map((match) => match.meta).filter((meta) => meta !== undefined);
-
-	const resultMeta: Array<RouterManagedTag> = [];
-	const metaByAttribute: Record<string, true> = {};
-	let title: RouterManagedTag | undefined;
-	for (let i = routeMeta.length - 1; i >= 0; i--) {
-		const metas = routeMeta[i]!;
-		for (let j = metas.length - 1; j >= 0; j--) {
-			const meta = metas[j];
-			if (!meta) {
-				continue;
-			}
-
-			if ('title' in meta && typeof meta.title === 'string') {
-				title ??= { tag: 'title', children: meta.title };
-			} else if ('script:ld+json' in meta) {
-				try {
-					resultMeta.push({
-						tag: 'script',
-						attrs: { type: 'application/ld+json' },
-						children: escapeHtml(JSON.stringify(meta['script:ld+json'])),
-					});
-				} catch {
-					// Ignore values that cannot be serialized as JSON-LD.
-				}
-			} else {
-				const attribute =
-					('name' in meta && typeof meta.name === 'string' ? meta.name : undefined) ??
-					('property' in meta && typeof meta.property === 'string' ? meta.property : undefined);
-				if (attribute && metaByAttribute[attribute]) {
-					continue;
-				}
-				if (attribute) {
-					metaByAttribute[attribute] = true;
-				}
-				resultMeta.push({ tag: 'meta', attrs: { ...meta, nonce } });
-			}
-		}
-	}
-
-	if (title) {
-		resultMeta.push(title);
-	}
-	if (nonce) {
-		resultMeta.push({
-			tag: 'meta',
-			attrs: { property: 'csp-nonce', content: nonce },
-		});
-	}
-	resultMeta.reverse();
-
-	const links = matches
-		.flatMap((match) => match.links ?? [])
-		.filter((link) => link !== undefined)
-		.map((link) => ({ tag: 'link', attrs: { ...link, nonce } }) satisfies RouterManagedTag);
-
-	const manifestTags: Array<RouterManagedTag> = [];
-	const preloadTags: Array<RouterManagedTag> = [];
-	const manifest = router.ssr?.manifest;
-	if (manifest) {
-		for (const match of matches) {
-			for (const link of manifest.routes[match.routeId]?.css ?? []) {
-				const resolvedLink = resolveManifestCssLink(link);
-				manifestTags.push({
-					tag: 'link',
-					attrs: {
-						rel: 'stylesheet',
-						...resolvedLink,
-						crossOrigin:
-							getAssetCrossOrigin(assetCrossOrigin, 'stylesheet') ?? resolvedLink.crossOrigin,
-						nonce,
-					},
-				});
-			}
-			for (const preload of manifest.routes[match.routeId]?.preloads ?? []) {
-				preloadTags.push({
-					tag: 'link',
-					attrs: {
-						...getScriptPreloadAttrs(manifest, preload, assetCrossOrigin),
-						nonce,
-					},
-				});
-			}
-		}
-
-		if (manifest.inlineStyle) {
-			manifestTags.push({
-				tag: 'style',
-				attrs: { ...manifest.inlineStyle.attrs, nonce },
-				children: manifest.inlineStyle.children,
-				inlineCss: true,
-			});
-		}
-	}
-
-	const styles = matches
-		.flatMap((match) => match.styles ?? [])
-		.filter((style) => style !== undefined)
-		.map(
-			({ children, ...attrs }) =>
-				({
-					tag: 'style',
-					attrs: { ...attrs, nonce },
-					children: children,
-				}) satisfies RouterManagedTag,
-		);
-
-	const headScripts = matches
-		.flatMap((match) => match.headScripts ?? [])
-		.filter((script) => script !== undefined)
-		.map(
-			({ children, ...attrs }) =>
-				({
-					tag: 'script',
-					attrs: { ...attrs, nonce },
-					children: children,
-				}) satisfies RouterManagedTag,
-		);
-
-	const tags: Array<RouterManagedTag> = [];
-	appendUniqueUserTags(tags, resultMeta);
-	tags.push(...preloadTags);
-	appendUniqueUserTags(tags, links);
-	tags.push(...manifestTags);
-	appendUniqueUserTags(tags, styles);
-	appendUniqueUserTags(tags, headScripts);
-	return tags;
-}
-
-export function useTags(...args: Array<unknown>): Array<RouterManagedTag> {
-	const [userArgs, slot] = splitSlot(args);
-	const assetCrossOrigin = userArgs[0] as AssetCrossOriginConfig | undefined;
-	const router = useRouter();
-	const nonce = router.options.ssr?.nonce;
-
-	if (isServer ?? router.isServer) {
-		return buildTagsFromMatches(router, nonce, router.stores.matches.get(), assetCrossOrigin);
-	}
-
-	return useStore(
-		router.stores.matches,
-		(matches: Array<AnyRouteMatch>) =>
-			buildTagsFromMatches(router, nonce, matches, assetCrossOrigin),
-		deepEqual,
-		subSlot(slot, 'head:tags'),
-	);
-}
+export const useTags = createUseTags(useRouter);

package/src/hookBindings.ts

@@ -1,3 +1,5 @@
+'use strong';
+
 // The read hooks — ports of react-router's useMatch.tsx / useParams / useSearch /
 // useLoaderData / useLoaderDeps / useRouteContext / useNavigate / useCanGoBack /
 // Matches.tsx (useMatches / useParentMatches / useChildMatches). Everything match-

package/src/internal.ts

@@ -1,3 +1,5 @@
+'use strong';
+
 // Slot mechanics shared by the binding's plain-`.ts` hooks (copied from
 // @octanejs/tanstack-query). The octane compiler injects a per-call-site Symbol slot into
 // every hook call in `.tsrx`/`.tsx`, but these binding files are NOT compiled — so