@octanejs/tanstack-router 0.2.7 → 0.2.9

package/src/route.ts

@@ -12,6 +12,7 @@ import type {
 	AnyContext,
 	AnyRoute,
 	AnyRouter,
+	Constrain,
 	ConstrainLiteral,
 	ErrorComponentProps,
 	NotFoundError,
@@ -35,6 +36,7 @@ import type {
 	UseNavigateResult,
 } from '@tanstack/router-core';
 import { createElement } from 'octane';
+import { createRouteHookBindings } from './routeHookBindings';
 import type { ComponentBody } from 'octane';
 import {
 	useMatch,
@@ -106,59 +108,13 @@ declare module '@tanstack/router-core' {
 // Attach the hook accessors to a route-shaped instance (Route / RootRoute /
 // RouteApi). `strictLoaderHooks: false` is RouteApi's mode — its loader hooks
 // pass `strict: false` upstream (the api may be read from ancestor layouts).
-function attachRouteHooks(self: any, strictLoaderHooks: boolean): void {
-	self.useMatch = (...args: any[]) => {
-		const [user, slot] = splitSlot(args);
-		const opts = user[0] ?? {};
-		return useMatch(
-			{ select: opts.select, structuralSharing: opts.structuralSharing, from: self.id },
-			subSlot(slot, 'r:m'),
-		);
-	};
-	self.useRouteContext = (...args: any[]) => {
-		const [user, slot] = splitSlot(args);
-		const opts = user[0] ?? {};
-		return useRouteContext({ ...opts, from: self.id }, subSlot(slot, 'r:ctx'));
-	};
-	self.useSearch = (...args: any[]) => {
-		const [user, slot] = splitSlot(args);
-		const opts = user[0] ?? {};
-		return useSearch(
-			{ select: opts.select, structuralSharing: opts.structuralSharing, from: self.id },
-			subSlot(slot, 'r:s'),
-		);
-	};
-	self.useParams = (...args: any[]) => {
-		const [user, slot] = splitSlot(args);
-		const opts = user[0] ?? {};
-		return useParams(
-			{ select: opts.select, structuralSharing: opts.structuralSharing, from: self.id },
-			subSlot(slot, 'r:p'),
-		);
-	};
-	self.useLoaderDeps = (...args: any[]) => {
-		const [user, slot] = splitSlot(args);
-		const opts = user[0] ?? {};
-		return useLoaderDeps(
-			strictLoaderHooks ? { ...opts, from: self.id } : { ...opts, from: self.id, strict: false },
-			subSlot(slot, 'r:d'),
-		);
-	};
-	self.useLoaderData = (...args: any[]) => {
-		const [user, slot] = splitSlot(args);
-		const opts = user[0] ?? {};
-		return useLoaderData(
-			strictLoaderHooks ? { ...opts, from: self.id } : { ...opts, from: self.id, strict: false },
-			subSlot(slot, 'r:l'),
-		);
-	};
-}
+const { attachRouteHooks, attachRouteNavigation: attachNavigation } = createRouteHookBindings(
+	{ useMatch, useParams, useSearch, useLoaderData, useLoaderDeps, useRouteContext, useNavigate },
+	useRouter,
+);
 
 function attachRouteNavigation(self: any): void {
-	self.useNavigate = (...args: any[]) => {
-		const [, slot] = splitSlot(args);
-		return useNavigate({ from: self.fullPath }, subSlot(slot, 'r:n'));
-	};
+	attachNavigation(self);
 	self.Link = (props: Record<string, unknown>) =>
 		createElement(Link as any, { from: self.fullPath, ...props });
 }
@@ -233,6 +189,96 @@ export class Route<
 	declare useLoaderData: UseLoaderDataRoute<TId>;
 	declare useNavigate: () => UseNavigateResult<TFullPath>;
 	declare Link: LinkComponentRoute<TFullPath>;
+	// These core combinators return this same binding instance. Only their
+	// children/file metadata changes; the ordinary bound methods stay available.
+	declare addChildren: <const TNewChildren>(
+		children: Constrain<TNewChildren, ReadonlyArray<AnyRoute> | Record<string, AnyRoute>>,
+	) => Route<
+		TRegister,
+		TParentRoute,
+		TPath,
+		TFullPath,
+		TCustomId,
+		TId,
+		TSearchValidator,
+		TParams,
+		TRouterContext,
+		TRouteContextFn,
+		TBeforeLoadFn,
+		TLoaderDeps,
+		TLoaderFn,
+		TNewChildren,
+		TFileRouteTypes,
+		TSSR,
+		TServerMiddlewares,
+		THandlers
+	>;
+	declare _addFileChildren: <const TNewChildren>(
+		children: TNewChildren,
+	) => Route<
+		TRegister,
+		TParentRoute,
+		TPath,
+		TFullPath,
+		TCustomId,
+		TId,
+		TSearchValidator,
+		TParams,
+		TRouterContext,
+		TRouteContextFn,
+		TBeforeLoadFn,
+		TLoaderDeps,
+		TLoaderFn,
+		TNewChildren,
+		TFileRouteTypes,
+		TSSR,
+		TServerMiddlewares,
+		THandlers
+	>;
+	declare _addFileTypes: <TNewFileRouteTypes>() => Route<
+		TRegister,
+		TParentRoute,
+		TPath,
+		TFullPath,
+		TCustomId,
+		TId,
+		TSearchValidator,
+		TParams,
+		TRouterContext,
+		TRouteContextFn,
+		TBeforeLoadFn,
+		TLoaderDeps,
+		TLoaderFn,
+		TChildren,
+		TNewFileRouteTypes,
+		TSSR,
+		TServerMiddlewares,
+		THandlers
+	>;
+	declare lazy: (
+		...args: Parameters<
+			RouteCore<
+				TRegister,
+				TParentRoute,
+				TPath,
+				TFullPath,
+				TCustomId,
+				TId,
+				TSearchValidator,
+				TParams,
+				TRouterContext,
+				TRouteContextFn,
+				TBeforeLoadFn,
+				TLoaderDeps,
+				TLoaderFn,
+				TChildren,
+				TFileRouteTypes,
+				TSSR,
+				TServerMiddlewares,
+				THandlers
+			>['lazy']
+		>
+	) => this;
 
 	/** @deprecated Use the `createRoute` function instead. */
 	constructor(
@@ -313,6 +359,96 @@ export class RootRoute<
 	declare useLoaderData: UseLoaderDataRoute<RootRouteId>;
 	declare useNavigate: () => UseNavigateResult<'/'>;
 	declare Link: LinkComponentRoute<'/'>;
+	// These core combinators return this same binding instance. Only their
+	// children/file metadata changes; the ordinary bound methods stay available.
+	declare addChildren: <const TNewChildren>(
+		children: Constrain<TNewChildren, ReadonlyArray<AnyRoute> | Record<string, AnyRoute>>,
+	) => Route<
+		TRegister,
+		any,
+		'/',
+		'/',
+		string,
+		RootRouteId,
+		TSearchValidator,
+		{},
+		TRouterContext,
+		TRouteContextFn,
+		TBeforeLoadFn,
+		TLoaderDeps,
+		TLoaderFn,
+		TNewChildren,
+		TFileRouteTypes,
+		TSSR,
+		TServerMiddlewares,
+		THandlers
+	>;
+	declare _addFileChildren: <const TNewChildren>(
+		children: TNewChildren,
+	) => Route<
+		TRegister,
+		any,
+		'/',
+		'/',
+		string,
+		RootRouteId,
+		TSearchValidator,
+		{},
+		TRouterContext,
+		TRouteContextFn,
+		TBeforeLoadFn,
+		TLoaderDeps,
+		TLoaderFn,
+		TNewChildren,
+		TFileRouteTypes,
+		TSSR,
+		TServerMiddlewares,
+		THandlers
+	>;
+	declare _addFileTypes: <TNewFileRouteTypes>() => Route<
+		TRegister,
+		any,
+		'/',
+		'/',
+		string,
+		RootRouteId,
+		TSearchValidator,
+		{},
+		TRouterContext,
+		TRouteContextFn,
+		TBeforeLoadFn,
+		TLoaderDeps,
+		TLoaderFn,
+		TChildren,
+		TNewFileRouteTypes,
+		TSSR,
+		TServerMiddlewares,
+		THandlers
+	>;
+	declare lazy: (
+		...args: Parameters<
+			RouteCore<
+				TRegister,
+				any,
+				'/',
+				'/',
+				string,
+				RootRouteId,
+				TSearchValidator,
+				{},
+				TRouterContext,
+				TRouteContextFn,
+				TBeforeLoadFn,
+				TLoaderDeps,
+				TLoaderFn,
+				TChildren,
+				TFileRouteTypes,
+				TSSR,
+				TServerMiddlewares,
+				THandlers
+			>['lazy']
+		>
+	) => this;
 
 	/** @deprecated Use `createRootRoute()` instead. */
 	constructor(

package/src/routeHookBindings.ts

@@ -0,0 +1,146 @@
+'use strong';
+
+import type * as Hooks from './hooks';
+import type { useRouter as UseRouter } from './context';
+import { splitSlot, subSlot } from './internal';
+
+type RouteHooks = Pick<
+	typeof Hooks,
+	| 'useMatch'
+	| 'useParams'
+	| 'useSearch'
+	| 'useLoaderData'
+	| 'useLoaderDeps'
+	| 'useRouteContext'
+	| 'useNavigate'
+>;
+
+// Each entry supplies its context once. Routes retain the same hook slots and
+// inherited router-core combinators without creating ordinary-renderer routes.
+export function createRouteHookBindings(hooks: RouteHooks, useRouter: typeof UseRouter) {
+	const {
+		useMatch,
+		useParams,
+		useSearch,
+		useLoaderData,
+		useLoaderDeps,
+		useRouteContext,
+		useNavigate,
+	} = hooks;
+	function attachRouteHooks(self: any, strictLoaderHooks: boolean): void {
+		self.useMatch = (...args: any[]) => {
+			const [user, slot] = splitSlot(args);
+			const opts = user[0] ?? {};
+			return useMatch(
+				{ select: opts.select, structuralSharing: opts.structuralSharing, from: self.id },
+				subSlot(slot, 'r:m'),
+			);
+		};
+		self.useRouteContext = (...args: any[]) => {
+			const [user, slot] = splitSlot(args);
+			const opts = user[0] ?? {};
+			return useRouteContext({ ...opts, from: self.id }, subSlot(slot, 'r:ctx'));
+		};
+		self.useSearch = (...args: any[]) => {
+			const [user, slot] = splitSlot(args);
+			const opts = user[0] ?? {};
+			return useSearch(
+				{ select: opts.select, structuralSharing: opts.structuralSharing, from: self.id },
+				subSlot(slot, 'r:s'),
+			);
+		};
+		self.useParams = (...args: any[]) => {
+			const [user, slot] = splitSlot(args);
+			const opts = user[0] ?? {};
+			return useParams(
+				{ select: opts.select, structuralSharing: opts.structuralSharing, from: self.id },
+				subSlot(slot, 'r:p'),
+			);
+		};
+		self.useLoaderDeps = (...args: any[]) => {
+			const [user, slot] = splitSlot(args);
+			const opts = user[0] ?? {};
+			return useLoaderDeps(
+				strictLoaderHooks ? { ...opts, from: self.id } : { ...opts, from: self.id, strict: false },
+				subSlot(slot, 'r:d'),
+			);
+		};
+		self.useLoaderData = (...args: any[]) => {
+			const [user, slot] = splitSlot(args);
+			const opts = user[0] ?? {};
+			return useLoaderData(
+				strictLoaderHooks ? { ...opts, from: self.id } : { ...opts, from: self.id, strict: false },
+				subSlot(slot, 'r:l'),
+			);
+		};
+	}
+
+	function attachRouteNavigation(self: any): void {
+		self.useNavigate = (...args: any[]) => {
+			const [, slot] = splitSlot(args);
+			return useNavigate({ from: self.fullPath }, subSlot(slot, 'r:n'));
+		};
+	}
+
+	function attachLazyRouteHooks(self: any) {
+		const id = self.options.id;
+		self.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 self.useMatch;
+		self.useRouteContext = ((...args: Array<any>) => {
+			const [user, slot] = splitSlot(args);
+			return useRouteContext({ ...(user[0] ?? {}), from: id }, subSlot(slot, 'lr:c'));
+		}) as typeof self.useRouteContext;
+		self.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 self.useSearch;
+		self.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 self.useParams;
+		self.useLoaderDeps = ((...args: Array<any>) => {
+			const [user, slot] = splitSlot(args);
+			return useLoaderDeps({ ...(user[0] ?? {}), from: id }, subSlot(slot, 'lr:d'));
+		}) as typeof self.useLoaderDeps;
+		self.useLoaderData = ((...args: Array<any>) => {
+			const [user, slot] = splitSlot(args);
+			return useLoaderData({ ...(user[0] ?? {}), from: id }, subSlot(slot, 'lr:l'));
+		}) as typeof self.useLoaderData;
+		self.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 self.useNavigate;
+	}
+
+	return { attachRouteHooks, attachRouteNavigation, attachLazyRouteHooks };
+}

package/src/routerStateBinding.ts

@@ -0,0 +1,41 @@
+// The reactive base every router hook reads through: subscribe to the router's
+// canonical snapshot store (`router.stores.__store`) and select a slice.
+import { useStore } from './useStore';
+import type { useRouter as StandardUseRouter } from './context';
+import { splitSlot, subSlot } from './internal';
+import type { AnyRouter, RegisteredRouter, RouterState } from '@tanstack/router-core';
+import type { StructuralSharingOption, ValidateSelected } from './structuralSharing';
+
+export type UseRouterStateOptions<TRouter extends AnyRouter, TSelected, TStructuralSharing> = {
+	router?: TRouter;
+	select?: (
+		state: RouterState<TRouter['routeTree']>,
+	) => ValidateSelected<TRouter, TSelected, TStructuralSharing>;
+} & StructuralSharingOption<TRouter, TSelected, TStructuralSharing>;
+
+export type UseRouterStateResult<TRouter extends AnyRouter, TSelected> = unknown extends TSelected
+	? RouterState<TRouter['routeTree']>
+	: TSelected;
+
+export function createUseRouterState(useRouter: typeof StandardUseRouter) {
+	function useRouterState<
+		TRouter extends AnyRouter = RegisteredRouter,
+		TSelected = unknown,
+		TStructuralSharing extends boolean = boolean,
+	>(
+		opts?: UseRouterStateOptions<TRouter, TSelected, TStructuralSharing>,
+	): UseRouterStateResult<TRouter, TSelected>;
+	function useRouterState(...args: any[]): any {
+		const [user, slot] = splitSlot(args);
+		const opts = (user[0] ?? {}) as { select?: (s: any) => any; router?: any };
+		const router = useRouter(opts.router ? { router: opts.router } : undefined);
+		return useStore(
+			router.stores.__store,
+			opts.select ?? ((s: any) => s),
+			undefined,
+			subSlot(slot, 'rs'),
+		);
+	}
+
+	return useRouterState;
+}

package/src/scriptComponent.tsrx

@@ -0,0 +1,27 @@
+import { createElement, useId } from 'octane';
+import type { RouterManagedTag } from '@tanstack/router-core';
+import { getAssetKeys } from './assetKeys.ts';
+
+// router-core's initial hydration scripts remove themselves before adoption.
+// Host descriptors leave no per-item template frames behind when they do, and
+// create live script elements that execute on later client navigation. This
+// shared owner intentionally remains outside Strong mode for both entries.
+export function createScripts(useScripts: () => Array<RouterManagedTag>) {
+	function Scripts() @{
+		const owner = useId();
+		const scripts = useScripts();
+		const keys = getAssetKeys('body', owner, scripts);
+		<>
+			{scripts.map((script, index) => {
+				const { assetKey, managedKey } = keys[index]!;
+				return createElement('script', {
+					...script.attrs,
+					key: assetKey,
+					'data-tsr-managed-key': managedKey,
+					dangerouslySetInnerHTML: { __html: script.children ?? '' },
+				});
+			})}
+		</>
+	}
+	return Scripts;
+}

package/src/scriptContentBinding.ts

@@ -0,0 +1,43 @@
+'use strong';
+
+import { composeSsrBodyScripts, deepEqual, getSsrBodyScriptParts } 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, RouterManagedTag } from '@tanstack/router-core';
+
+// router-core 1.171.34 composes body scripts through `getSsrBodyScriptParts` +
+// `composeSsrBodyScripts`, and the initial hydration `<Scripts>` take moved from
+// the removed `serverSsr.takeBufferedScripts()` (a single buffered tag) to
+// `serverSsr.takeInitialHydrationScriptTags()` (hydration tags plus the streaming
+// boundary), which `composeSsrBodyScripts` interleaves.
+const routeScriptAttrs = { suppressHydrationWarning: true };
+
+export function createUseScripts(useRouter: typeof UseRouter) {
+	function useScripts(...args: Array<unknown>): Array<RouterManagedTag> {
+		const [, slot] = splitSlot(args);
+		const router = useRouter();
+		const nonce = router.options.ssr?.nonce;
+		const getScripts = (matches: Array<AnyRouteMatch>) =>
+			composeSsrBodyScripts(
+				getSsrBodyScriptParts(matches, router.ssr?.manifest, nonce, routeScriptAttrs),
+			);
+
+		if (isServer ?? router.isServer) {
+			return composeSsrBodyScripts(
+				getSsrBodyScriptParts(
+					router.stores.matches.get(),
+					router.ssr?.manifest,
+					nonce,
+					routeScriptAttrs,
+				),
+				router.serverSsr?.takeInitialHydrationScriptTags(),
+			);
+		}
+
+		return useStore(router.stores.matches, getScripts, deepEqual, subSlot(slot, 'body:scripts'));
+	}
+
+	return useScripts;
+}

package/src/scriptContentUtils.ts

@@ -1,37 +1,4 @@
-import { composeSsrBodyScripts, deepEqual, getSsrBodyScriptParts } 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, RouterManagedTag } from '@tanstack/router-core';
+import { createUseScripts } from './scriptContentBinding';
 
-// router-core 1.171.34 composes body scripts through `getSsrBodyScriptParts` +
-// `composeSsrBodyScripts`, and the initial hydration `<Scripts>` take moved from
-// the removed `serverSsr.takeBufferedScripts()` (a single buffered tag) to
-// `serverSsr.takeInitialHydrationScriptTags()` (hydration tags plus the streaming
-// boundary), which `composeSsrBodyScripts` interleaves.
-const routeScriptAttrs = { suppressHydrationWarning: true };
-
-export function useScripts(...args: Array<unknown>): Array<RouterManagedTag> {
-	const [, slot] = splitSlot(args);
-	const router = useRouter();
-	const nonce = router.options.ssr?.nonce;
-	const getScripts = (matches: Array<AnyRouteMatch>) =>
-		composeSsrBodyScripts(
-			getSsrBodyScriptParts(matches, router.ssr?.manifest, nonce, routeScriptAttrs),
-		);
-
-	if (isServer ?? router.isServer) {
-		return composeSsrBodyScripts(
-			getSsrBodyScriptParts(
-				router.stores.matches.get(),
-				router.ssr?.manifest,
-				nonce,
-				routeScriptAttrs,
-			),
-			router.serverSsr?.takeInitialHydrationScriptTags(),
-		);
-	}
-
-	return useStore(router.stores.matches, getScripts, deepEqual, subSlot(slot, 'body:scripts'));
-}
+export const useScripts = createUseScripts(useRouter);

package/src/useRouterState.ts

@@ -1,37 +1,5 @@
-// The reactive base every router hook reads through: subscribe to the router's
-// canonical snapshot store (`router.stores.__store`) and select a slice.
-import { useStore } from './useStore';
 import { useRouter } from './context';
-import { splitSlot, subSlot } from './internal';
-import type { AnyRouter, RegisteredRouter, RouterState } from '@tanstack/router-core';
-import type { StructuralSharingOption, ValidateSelected } from './structuralSharing';
+import { createUseRouterState } from './routerStateBinding';
 
-export type UseRouterStateOptions<TRouter extends AnyRouter, TSelected, TStructuralSharing> = {
-	router?: TRouter;
-	select?: (
-		state: RouterState<TRouter['routeTree']>,
-	) => ValidateSelected<TRouter, TSelected, TStructuralSharing>;
-} & StructuralSharingOption<TRouter, TSelected, TStructuralSharing>;
-
-export type UseRouterStateResult<TRouter extends AnyRouter, TSelected> = unknown extends TSelected
-	? RouterState<TRouter['routeTree']>
-	: TSelected;
-
-export function useRouterState<
-	TRouter extends AnyRouter = RegisteredRouter,
-	TSelected = unknown,
-	TStructuralSharing extends boolean = boolean,
->(
-	opts?: UseRouterStateOptions<TRouter, TSelected, TStructuralSharing>,
-): UseRouterStateResult<TRouter, TSelected>;
-export function useRouterState(...args: any[]): any {
-	const [user, slot] = splitSlot(args);
-	const opts = (user[0] ?? {}) as { select?: (s: any) => any; router?: any };
-	const router = useRouter(opts.router ? { router: opts.router } : undefined);
-	return useStore(
-		router.stores.__store,
-		opts.select ?? ((s: any) => s),
-		undefined,
-		subSlot(slot, 'rs'),
-	);
-}
+export type { UseRouterStateOptions, UseRouterStateResult } from './routerStateBinding';
+export const useRouterState = createUseRouterState(useRouter);