@octanejs/tanstack-router 0.1.10 → 0.1.12

package/src/generator-plugin.js

@@ -0,0 +1,108 @@
+import { compileToVolarMappings } from 'octane/compiler/volar';
+
+/**
+ * @typedef {object} AstNode
+ * @property {AstNode | Array<AstNode>} [body]
+ * @property {number} [start]
+ * @property {number} [end]
+ * @property {{ native_tsrx_body?: boolean }} [metadata]
+ */
+
+/**
+ * Makes TSRX route modules parseable by the router generator without changing
+ * source offsets. The generator applies edits to the original source, so the
+ * authored Octane template bodies remain byte-for-byte intact.
+ *
+ * @param {string} source
+ * @param {string} [filename]
+ * @returns {string}
+ */
+export function maskOctaneRouteSource(source, filename = 'route.tsrx') {
+	// Only .tsrx carries the native template dialect. Plain .ts/.tsx route
+	// files (robots.txt.ts-style server routes, shared route helpers) must
+	// pass through untouched — the TSRX parser is not a general TS parser and
+	// rejects valid TS it was never meant to see.
+	if (!filename.endsWith('.tsrx')) {
+		return source;
+	}
+
+	const { sourceAst } = compileToVolarMappings(source, filename);
+	const output = source.split('');
+
+	for (const body of findNativeTemplateBodies(/** @type {AstNode} */ (sourceAst))) {
+		const { start, end } = body;
+		output[start] = ' ';
+		output[start + 1] = '{';
+		for (let index = start + 2; index < end - 1; index++) {
+			if (source[index] !== '\n' && source[index] !== '\r') {
+				output[index] = ' ';
+			}
+		}
+		output[end - 1] = '}';
+	}
+
+	return output.join('');
+}
+
+/**
+ * @returns {{
+ *   name: string
+ *   transformRouteSource: (options: { source: string, filename: string }) => string
+ *   formatRoute: (options: { source: string }) => string
+ * }}
+ */
+export function octaneRouteGeneratorPlugin() {
+	return {
+		name: 'octane-route-source',
+		transformRouteSource: ({ source, filename }) => maskOctaneRouteSource(source, filename),
+		// Router scaffolds are already formatted. Returning them unchanged avoids
+		// passing TSRX's `@{}` syntax through a TypeScript-only formatter.
+		formatRoute: ({ source }) => source,
+	};
+}
+
+/**
+ * @param {AstNode} root
+ * @returns {Array<{ start: number, end: number }>}
+ */
+function findNativeTemplateBodies(root) {
+	/** @type {Array<{ start: number, end: number }>} */
+	const bodies = [];
+	const visited = new WeakSet();
+
+	/** @param {unknown} value */
+	const visit = (value) => {
+		if (!value || typeof value !== 'object' || visited.has(value)) {
+			return;
+		}
+		visited.add(value);
+
+		if (Array.isArray(value)) {
+			for (const item of value) {
+				visit(item);
+			}
+			return;
+		}
+
+		const node = /** @type {AstNode} */ (value);
+		if (
+			node.metadata?.native_tsrx_body === true &&
+			node.body &&
+			!Array.isArray(node.body) &&
+			typeof node.body.start === 'number' &&
+			typeof node.body.end === 'number'
+		) {
+			bodies.push({ start: node.body.start, end: node.body.end });
+			return;
+		}
+
+		for (const [key, child] of Object.entries(node)) {
+			if (key !== 'metadata' && key !== 'loc') {
+				visit(child);
+			}
+		}
+	};
+
+	visit(root);
+	return bodies;
+}

package/src/headContentUtils.ts

@@ -0,0 +1,172 @@
+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';
+
+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'),
+	);
+}

package/src/hooks.ts

@@ -14,6 +14,33 @@ import { replaceEqualDeep } from '@tanstack/router-core';
 import { useRouter, matchContext } from './context';
 import { useStore } from './useStore';
 import { splitSlot, subSlot } from './internal';
+import type {
+	AnyRouter,
+	FromPathOption,
+	RegisteredRouter,
+	ThrowConstraint,
+	ThrowOrOptional,
+	UseLoaderDataResult,
+	UseLoaderDepsResult,
+	UseNavigateResult,
+	UseParamsResult,
+	UseRouteContextOptions,
+	UseRouteContextResult,
+	UseSearchResult,
+} from '@tanstack/router-core';
+import type {
+	UseLoaderDataOptions,
+	UseLoaderDepsOptions,
+	UseLocationBaseOptions,
+	UseLocationResult,
+	UseMatchOptions,
+	UseMatchResult,
+	UseMatchesBaseOptions,
+	UseMatchesResult,
+	UseParamsOptions,
+	UseSearchOptions,
+} from './routeHookTypes';
+import type { StructuralSharingOption } from './structuralSharing';
 
 // Sentinel store + selection for "no match at this id" (upstream's dummyStore).
 const dummyStore = {
@@ -37,6 +64,24 @@ function useStructuralSharing(opts: any, router: any, slot: symbol | undefined)
 	};
 }
 
+export function useMatch<
+	TRouter extends AnyRouter = RegisteredRouter,
+	const TFrom extends string | undefined = undefined,
+	TStrict extends boolean = true,
+	TThrow extends boolean = true,
+	TSelected = unknown,
+	TStructuralSharing extends boolean = boolean,
+>(
+	opts: UseMatchOptions<
+		TRouter,
+		TFrom,
+		TStrict,
+		ThrowConstraint<TStrict, TThrow>,
+		TSelected,
+		TStructuralSharing
+	>,
+): ThrowOrOptional<UseMatchResult<TRouter, TFrom, TStrict, TSelected>, TThrow>;
+export function useMatch(opts: any, slot: symbol | undefined): any;
 export function useMatch(...args: any[]): any {
 	const [user, slot] = splitSlot(args);
 	const opts = user[0] ?? {};
@@ -67,6 +112,24 @@ export function useMatch(...args: any[]): any {
 	return undefined;
 }
 
+export function useParams<
+	TRouter extends AnyRouter = RegisteredRouter,
+	const TFrom extends string | undefined = undefined,
+	TStrict extends boolean = true,
+	TThrow extends boolean = true,
+	TSelected = unknown,
+	TStructuralSharing extends boolean = boolean,
+>(
+	opts: UseParamsOptions<
+		TRouter,
+		TFrom,
+		TStrict,
+		ThrowConstraint<TStrict, TThrow>,
+		TSelected,
+		TStructuralSharing
+	>,
+): ThrowOrOptional<UseParamsResult<TRouter, TFrom, TStrict, TSelected>, TThrow>;
+export function useParams(opts: any, slot: symbol | undefined): any;
 export function useParams(...args: any[]): any {
 	const [user, slot] = splitSlot(args);
 	const opts = user[0] ?? {};
@@ -85,6 +148,24 @@ export function useParams(...args: any[]): any {
 	);
 }
 
+export function useSearch<
+	TRouter extends AnyRouter = RegisteredRouter,
+	const TFrom extends string | undefined = undefined,
+	TStrict extends boolean = true,
+	TThrow extends boolean = true,
+	TSelected = unknown,
+	TStructuralSharing extends boolean = boolean,
+>(
+	opts: UseSearchOptions<
+		TRouter,
+		TFrom,
+		TStrict,
+		ThrowConstraint<TStrict, TThrow>,
+		TSelected,
+		TStructuralSharing
+	>,
+): ThrowOrOptional<UseSearchResult<TRouter, TFrom, TStrict, TSelected>, TThrow>;
+export function useSearch(opts: any, slot: symbol | undefined): any;
 export function useSearch(...args: any[]): any {
 	const [user, slot] = splitSlot(args);
 	const opts = user[0] ?? {};
@@ -100,6 +181,16 @@ export function useSearch(...args: any[]): any {
 	);
 }
 
+export function useLoaderData<
+	TRouter extends AnyRouter = RegisteredRouter,
+	const TFrom extends string | undefined = undefined,
+	TStrict extends boolean = true,
+	TSelected = unknown,
+	TStructuralSharing extends boolean = boolean,
+>(
+	opts: UseLoaderDataOptions<TRouter, TFrom, TStrict, TSelected, TStructuralSharing>,
+): UseLoaderDataResult<TRouter, TFrom, TStrict, TSelected>;
+export function useLoaderData(opts: any, slot: symbol | undefined): any;
 export function useLoaderData(...args: any[]): any {
 	const [user, slot] = splitSlot(args);
 	const opts = user[0] ?? {};
@@ -114,6 +205,15 @@ export function useLoaderData(...args: any[]): any {
 	);
 }
 
+export function useLoaderDeps<
+	TRouter extends AnyRouter = RegisteredRouter,
+	const TFrom extends string | undefined = undefined,
+	TSelected = unknown,
+	TStructuralSharing extends boolean = boolean,
+>(
+	opts: UseLoaderDepsOptions<TRouter, TFrom, TSelected, TStructuralSharing>,
+): UseLoaderDepsResult<TRouter, TFrom, TSelected>;
+export function useLoaderDeps(opts: any, slot: symbol | undefined): any;
 export function useLoaderDeps(...args: any[]): any {
 	const [user, slot] = splitSlot(args);
 	const opts = user[0] ?? {};
@@ -127,6 +227,15 @@ export function useLoaderDeps(...args: any[]): any {
 	);
 }
 
+export function useRouteContext<
+	TRouter extends AnyRouter = RegisteredRouter,
+	const TFrom extends string | undefined = undefined,
+	TStrict extends boolean = true,
+	TSelected = unknown,
+>(
+	opts: UseRouteContextOptions<TRouter, TFrom, TStrict, TSelected>,
+): UseRouteContextResult<TRouter, TFrom, TStrict, TSelected>;
+export function useRouteContext(opts: any, slot: symbol | undefined): any;
 export function useRouteContext(...args: any[]): any {
 	const [user, slot] = splitSlot(args);
 	const opts = user[0] ?? {};
@@ -139,6 +248,15 @@ export function useRouteContext(...args: any[]): any {
 	);
 }
 
+export function useLocation<
+	TRouter extends AnyRouter = RegisteredRouter,
+	TSelected = unknown,
+	TStructuralSharing extends boolean = boolean,
+>(
+	opts?: UseLocationBaseOptions<TRouter, TSelected, TStructuralSharing> &
+		StructuralSharingOption<TRouter, TSelected, TStructuralSharing>,
+): UseLocationResult<TRouter, TSelected>;
+export function useLocation(opts: any, slot: symbol | undefined): any;
 export function useLocation(...args: any[]): any {
 	const [user, slot] = splitSlot(args);
 	const opts = user[0] ?? {};
@@ -151,6 +269,15 @@ export function useLocation(...args: any[]): any {
 	);
 }
 
+export function useMatches<
+	TRouter extends AnyRouter = RegisteredRouter,
+	TSelected = unknown,
+	TStructuralSharing extends boolean = boolean,
+>(
+	opts?: UseMatchesBaseOptions<TRouter, TSelected, TStructuralSharing> &
+		StructuralSharingOption<TRouter, TSelected, TStructuralSharing>,
+): UseMatchesResult<TRouter, TSelected>;
+export function useMatches(opts: any, slot: symbol | undefined): any;
 export function useMatches(...args: any[]): any {
 	const [user, slot] = splitSlot(args);
 	const opts = user[0] ?? {};
@@ -163,6 +290,15 @@ export function useMatches(...args: any[]): any {
 	);
 }
 
+export function useParentMatches<
+	TRouter extends AnyRouter = RegisteredRouter,
+	TSelected = unknown,
+	TStructuralSharing extends boolean = boolean,
+>(
+	opts?: UseMatchesBaseOptions<TRouter, TSelected, TStructuralSharing> &
+		StructuralSharingOption<TRouter, TSelected, TStructuralSharing>,
+): UseMatchesResult<TRouter, TSelected>;
+export function useParentMatches(opts: any, slot: symbol | undefined): any;
 export function useParentMatches(...args: any[]): any {
 	const [user, slot] = splitSlot(args);
 	const opts = user[0] ?? {};
@@ -182,6 +318,15 @@ export function useParentMatches(...args: any[]): any {
 	);
 }
 
+export function useChildMatches<
+	TRouter extends AnyRouter = RegisteredRouter,
+	TSelected = unknown,
+	TStructuralSharing extends boolean = boolean,
+>(
+	opts?: UseMatchesBaseOptions<TRouter, TSelected, TStructuralSharing> &
+		StructuralSharingOption<TRouter, TSelected, TStructuralSharing>,
+): UseMatchesResult<TRouter, TSelected>;
+export function useChildMatches(opts: any, slot: symbol | undefined): any;
 export function useChildMatches(...args: any[]): any {
 	const [user, slot] = splitSlot(args);
 	const opts = user[0] ?? {};
@@ -200,6 +345,11 @@ export function useChildMatches(...args: any[]): any {
 
 // Returns a STABLE navigate function (upstream useCallback([from, router])) that
 // forwards to `router.navigate`, defaulting `from` to the hook's option.
+export function useNavigate<
+	TRouter extends AnyRouter = RegisteredRouter,
+	TDefaultFrom extends string = string,
+>(options?: { from?: FromPathOption<TRouter, TDefaultFrom> }): UseNavigateResult<TDefaultFrom>;
+export function useNavigate(options: any, slot: symbol | undefined): (to: any) => any;
 export function useNavigate(...args: any[]): (to: any) => any {
 	const [user, slot] = splitSlot(args);
 	const opts = user[0] ?? {};
@@ -213,6 +363,7 @@ export function useNavigate(...args: any[]): (to: any) => any {
 
 // True when the current history entry isn't the first (there is somewhere to go
 // back to) — per upstream useCanGoBack (location.state.__TSR_index !== 0).
+export function useCanGoBack(): boolean;
 export function useCanGoBack(...args: any[]): boolean {
 	const [, slot] = splitSlot(args);
 	const router = useRouter();

package/src/index.ts

@@ -19,9 +19,11 @@
 // createLink/useLinkProps, navigation blocking (useBlocker/Block), the full
 // read-hook set (useMatch and friends, nearest-match resolution via
 // matchContext), Route/getRouteApi hook accessors, Await/useAwaited, lazy
-// routes, and search validation/middleware from core. Deferred: file-based
-// routing + codegen (`createFileRoute`, @tanstack/router-plugin), SSR entries
-// (RouterServer/RouterClient, HeadContent/Scripts), and devtools.
+// routes, search validation/middleware from core, generated file routes,
+// document/head assets, and Start-compatible SSR/hydration. Devtools remain
+// separate.
+import './frameworkTypes';
+
 export * from '@tanstack/router-core';
 export {
 	createHistory,
@@ -48,25 +50,39 @@ export {
 	createRoute,
 	createRootRoute,
 	createRootRouteWithContext,
+	rootRouteWithContext,
 	createRouteMask,
 	getRouteApi,
 	Route,
 	RootRoute,
 	RouteApi,
+	NotFoundRoute,
 } from './route';
+export {
+	FileRoute,
+	createFileRoute,
+	FileRouteLoader,
+	LazyRoute,
+	createLazyRoute,
+	createLazyFileRoute,
+} from './fileRoute';
 // Framework-facing component types (react-router parity, on octane renderables).
 // route.ts also narrows router-core's *Extensions interfaces to these via module
 // augmentation — mirroring upstream's route.tsx/router.tsx `declare module`.
 export type {
+	DefaultRouteTypes,
 	SyncRouteComponent,
 	AsyncRouteComponent,
 	RouteComponent,
+	RouteTypes,
 	ErrorRouteComponent,
 	NotFoundRouteComponent,
+	AnyRootRoute,
 } from './route';
 export { routerContext, getRouterContext, matchContext, useRouter } from './context';
 export { useStore } from './useStore';
 export { useRouterState } from './useRouterState';
+export type { UseRouterStateOptions, UseRouterStateResult } from './useRouterState';
 export {
 	useMatch,
 	useLocation,
@@ -81,10 +97,53 @@ export {
 	useNavigate,
 	useCanGoBack,
 } from './hooks';
+export type {
+	UseLoaderDataBaseOptions,
+	UseLoaderDataOptions,
+	UseLoaderDataRoute,
+	UseLoaderDepsBaseOptions,
+	UseLoaderDepsOptions,
+	UseLoaderDepsRoute,
+	UseLocationBaseOptions,
+	UseLocationResult,
+	UseMatchBaseOptions,
+	UseMatchOptions,
+	UseMatchResult,
+	UseMatchRoute,
+	UseMatchesBaseOptions,
+	UseMatchesResult,
+	UseParamsBaseOptions,
+	UseParamsOptions,
+	UseParamsRoute,
+	UseRouteContextRoute,
+	UseSearchBaseOptions,
+	UseSearchOptions,
+	UseSearchRoute,
+} from './routeHookTypes';
 export { useAwaited } from './useAwaited';
+export type { AwaitOptions } from './useAwaited';
 export { useLinkProps, createLink, linkOptions } from './link';
+export type { LinkOptionsFn, LinkOptionsFnOptions } from './link';
+export type {
+	ActiveLinkOptionProps,
+	ActiveLinkOptions,
+	CreateLinkProps,
+	LinkComponent,
+	LinkComponentProps,
+	LinkComponentRoute,
+	LinkProps,
+	LinkPropsChildren,
+	OctaneAnchorProps,
+	OctaneRenderable,
+	UseLinkPropsOptions,
+} from './linkTypes';
 export { useBlocker, Block } from './useBlocker.tsrx';
-export type { UseBlockerOpts, ShouldBlockFn } from './useBlocker.tsrx';
+export type {
+	BlockerResolver,
+	ShouldBlockFn,
+	ShouldBlockFnArgs,
+	UseBlockerOpts,
+} from './useBlocker.tsrx';
 export { useMatchRoute, MatchRoute } from './MatchRoute.tsrx';
 export { useElementScrollRestoration } from './useElementScrollRestoration';
 export { lazyRouteComponent } from './lazyRouteComponent';
@@ -101,3 +160,24 @@ export { Match } from './Match.tsrx';
 export { CatchBoundary, ErrorComponent } from './CatchBoundary.tsrx';
 export { CatchNotFound, DefaultGlobalNotFound } from './not-found.tsrx';
 export { ClientOnly, useHydrated } from './ClientOnly.tsrx';
+export { HeadContent } from './HeadContent.tsrx';
+export type { HeadContentProps } from './HeadContent.tsrx';
+export { Scripts } from './Scripts.tsrx';
+export { ScriptOnce } from './ScriptOnce.tsrx';
+export { Asset } from './Asset.tsrx';
+export type { AssetProps } from './Asset.tsrx';
+export { useTags } from './headContentUtils';
+export { Html } from './Html';
+export type { HtmlProps } from './Html';
+export { Head } from './Head';
+export type { HeadProps } from './Head';
+export { Body } from './Body';
+export type { BodyProps } from './Body';
+export type { OctaneElementAttributes, OctaneScriptAttributes } from './frameworkTypes';
+export type {
+	InferStructuralSharing,
+	ValidateLinkOptions,
+	ValidateLinkOptionsArray,
+	ValidateUseParamsOptions,
+	ValidateUseSearchOptions,
+} from './typePrimitives';

package/src/lazyRouteComponent.ts

@@ -6,6 +6,7 @@
 //   createRoute({ path: 'item/$id', component: lazyRouteComponent(() => import('./Item')) })
 import { use, createElement } from 'octane';
 import { isModuleNotFoundError } from '@tanstack/router-core';
+import { toExternalHydrationThenable } from './externalHydration';
 
 export function lazyRouteComponent(
 	importer: () => Promise<any>,
@@ -48,7 +49,7 @@ export function lazyRouteComponent(
 			throw new Promise(() => {});
 		}
 		if (error) throw error;
-		if (!comp) use(load());
+		if (!comp) use(toExternalHydrationThenable(load()));
 		return createElement(comp, props);
 	};
 	Lazy.preload = load;