@octanejs/tanstack-router 0.2.3 → 0.2.5

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@octanejs/tanstack-router",
-  "version": "0.2.3",
+  "version": "0.2.5",
   "license": "MIT",
   "type": "module",
   "engines": {
@@ -58,13 +58,13 @@
     "isbot": "^5.1.22"
   },
   "peerDependencies": {
-    "octane": "^0.10.0"
+    "octane": "^0.11.0"
   },
   "devDependencies": {
     "@tanstack/react-router": "1.170.41",
-    "@tsrx/react": "^0.3.7",
+    "@tsrx/react": "^0.4.5",
     "esbuild": "^0.28.1",
-    "octane": "0.10.0",
+    "octane": "0.11.0",
     "react": "19.2.7",
     "react-dom": "19.2.7",
     "vitest": "^4.1.10"

package/src/Asset.tsrx

@@ -4,11 +4,10 @@ import type { RouterManagedTag } from '@tanstack/router-core';
 import { useRouter } from './context.ts';
 import { useHydrated } from './ClientOnly.tsrx';
 
-export type AssetProps =
-	RouterManagedTag & {
-		assetKey: string;
-		target: 'head' | 'body';
-	};
+export type AssetProps = RouterManagedTag & {
+	assetKey: string;
+	target: 'head' | 'body';
+};
 
 type ManagedAssetProps = AssetProps & { managedKey?: string };
 
@@ -40,8 +39,10 @@ function setAttributes(element: Element, attrs: RouterManagedTag['attrs']) {
 	}
 	for (const [name, value] of Object.entries(attrs)) {
 		if (
-			name === 'suppressHydrationWarning' || value === undefined || value === null ||
-				value === false
+			name === 'suppressHydrationWarning' ||
+			value === undefined ||
+			value === null ||
+			value === false
 		) {
 			continue;
 		}
@@ -67,8 +68,7 @@ function claim(element: Element) {
 }
 
 function mountAsset(props: ManagedAssetProps) {
-	const parent =
-		props.target === 'head' ? document.head : document.body;
+	const parent = props.target === 'head' ? document.head : document.body;
 	const managedKey = props.managedKey ?? props.assetKey;
 	const existing = findManagedElement(parent, managedKey);
 	if (existing) {
@@ -95,23 +95,19 @@ export function Asset(props: AssetProps) @{
 		// every navigation, and an identity dependency would remove and re-add
 		// unchanged assets such as the stylesheet.
 		const attrsKey = JSON.stringify(props.attrs ?? null);
-		useLayoutEffect(() => mountAsset(props), [
-			props.assetKey,
-			managedKey,
-			props.tag,
-			attrsKey,
-			props.children,
-			props.target,
-		]);
+		useLayoutEffect(
+			() => mountAsset(props),
+			[props.assetKey, managedKey, props.tag, attrsKey, props.children, props.target],
+		);
 	}
 
 	const visibleTag =
-		(isServer ?? router.isServer) || props.target === 'body' && !hydrated ? props.tag : undefined;
+		(isServer ?? router.isServer) || (props.target === 'body' && !hydrated) ? props.tag : undefined;
 
 	@switch (visibleTag) {
 		@case 'title': {
 			<title {...props.attrs} data-tsr-managed-key={managedKey}>
-				{props.children ?? '' as string}
+				{props.children ?? ('' as string)}
 			</title>
 		}
 		@case 'meta': {

package/src/Await.tsrx

@@ -20,8 +20,6 @@ export function Await(props: {
 	@try {
 		<AwaitInner promise={props.promise} render={props.children} />
 	} @pending {
-		<>
-			{props.fallback}
-		</>
+		<>{props.fallback}</>
 	}
 }

package/src/CatchBoundary.tsrx

@@ -24,9 +24,7 @@ export function CatchBoundary(props: {
 	onCatch?: (error: Error, errorInfo: ErrorInfo) => void;
 }) @{
 	@try {
-		<>
-			{props.children}
-		</>
+		<>{props.children}</>
 	} @catch (error, reset) {
 		<CatchErrorView
 			error={error}
@@ -55,8 +53,7 @@ function CatchErrorView(props: {
 
 	// Reset when the reset key rolls (navigation). Skip the mount render — the key
 	// captured while catching is the baseline.
-	const resetKey =
-		props.getResetKey ? props.getResetKey() : undefined;
+	const resetKey = props.getResetKey ? props.getResetKey() : undefined;
 	const keyRef = useRef(resetKey);
 	useLayoutEffect(() => {
 		if (keyRef.current !== resetKey) {
@@ -93,9 +90,7 @@ export function ErrorComponent(props: {
 		<div style="height:.25rem"></div>
 		@if (show) {
 			<div>
-				<pre
-					style="font-size:.7em;border:1px solid red;border-radius:.25rem;padding:.3rem;color:red;overflow:auto"
-				>
+				<pre style="font-size:.7em;border:1px solid red;border-radius:.25rem;padding:.3rem;color:red;overflow:auto">
 					@if (props.error?.message) {
 						<code>{props.error.message as string}</code>
 					}

package/src/ClientOnly.tsrx

@@ -13,12 +13,15 @@ const subscribe = () => () => {};
 
 export function useHydrated(...args: Array<unknown>) {
 	const [, slot] = splitSlot(args);
-	return useSyncExternalStore(subscribe, () => true, () => false, subSlot(slot, 'hydrated'));
+	return useSyncExternalStore(
+		subscribe,
+		() => true,
+		() => false,
+		subSlot(slot, 'hydrated'),
+	);
 }
 
 export function ClientOnly(props: { children?: OctaneNode; fallback?: OctaneNode }) @{
 	const hydrated = useHydrated();
-	<>
-		{hydrated ? props.children : props.fallback ?? null}
-	</>
+	<>{hydrated ? props.children : (props.fallback ?? null)}</>
 }

package/src/Link.tsrx

@@ -23,18 +23,20 @@ export function Link<
 	TMaskFrom extends string = TFrom,
 	TMaskTo extends string = '',
 >(props: LinkComponentProps<'a', TRouter, TFrom, TTo, TMaskFrom, TMaskTo>) @{
-	const { _asChild: AsChild, children, ...rest } = props as
-		typeof props & {
-			_asChild?: any;
-		};
+	const {
+		_asChild: AsChild,
+		children,
+		...rest
+	} = props as typeof props & {
+		_asChild?: any;
+	};
 	const linkProps = useLinkProps(
 		rest as UseLinkPropsOptions<TRouter, TFrom, TTo, TMaskFrom, TMaskTo>,
-	) as
-		OctaneAnchorProps & {
-			disabled?: boolean;
-			'data-status'?: string;
-			'data-transitioning'?: string;
-		};
+	) as OctaneAnchorProps & {
+		disabled?: boolean;
+		'data-status'?: string;
+		'data-transitioning'?: string;
+	};
 	const { disabled: _disabled, ...aProps } = linkProps;
 
 	const resolvedChildren =
@@ -48,6 +50,6 @@ export function Link<
 	@if (AsChild) {
 		<AsChild {...linkProps}>{resolvedChildren}</AsChild>
 	} @else {
-		<a {...aProps as Record<string, any>}>{resolvedChildren}</a>
+		<a {...(aProps as Record<string, any>)}>{resolvedChildren}</a>
 	}
 }

package/src/Match.tsrx

@@ -52,15 +52,16 @@ export function Match(props: { routeId: string }) @{
 	const routeErrorComponent = route.options.errorComponent ?? router.options.defaultErrorComponent;
 	const routeOnCatch = route.options.onCatch ?? router.options.defaultOnCatch;
 	const routeNotFoundComponent = route.isRoot
-		? route.options.notFoundComponent ?? router.options.notFoundRoute?.options.component
+		? (route.options.notFoundComponent ?? router.options.notFoundRoute?.options.component)
 		: route.options.notFoundComponent;
 	const resolvedNoSsr = matchState.ssr === false || matchState.ssr === 'data-only';
 
 	// Boundary presence, per upstream MatchView. The root route only gets a
 	// Suspense boundary when explicitly opted in via wrapInSuspense.
 	const suspenseSignal =
-		route.options.wrapInSuspense ?? PendingComponent ??
-			(routeErrorComponent as ErrorRouteComponent | undefined)?.preload;
+		route.options.wrapInSuspense ??
+		PendingComponent ??
+		(routeErrorComponent as ErrorRouteComponent | undefined)?.preload;
 	const SuspenseWrap =
 		(!route.isRoot || route.options.wrapInSuspense || resolvedNoSsr) &&
 		(suspenseSignal || resolvedNoSsr)
@@ -69,11 +70,10 @@ export function Match(props: { routeId: string }) @{
 	const CatchWrap = routeErrorComponent ? CatchBoundary : SafeFragment;
 	const NotFoundWrap = routeNotFoundComponent ? CatchNotFound : SafeFragment;
 	const ShellComponent = route.isRoot
-		? (route.options as RootRouteOptions).shellComponent ?? SafeFragment
+		? ((route.options as RootRouteOptions).shellComponent ?? SafeFragment)
 		: SafeFragment;
 
-	const pendingElement =
-		PendingComponent ? createElement(PendingComponent, {}) : null;
+	const pendingElement = PendingComponent ? createElement(PendingComponent, {}) : null;
 	const parentRouteId = route.parentRoute?.id;
 
 	<ShellComponent>
@@ -95,8 +95,9 @@ export function Match(props: { routeId: string }) @{
 							(error as any).routeId ??= routeId;
 
 							if (
-								!routeNotFoundComponent || error.routeId && error.routeId !== routeId ||
-									!error.routeId && !route.isRoot
+								!routeNotFoundComponent ||
+								(error.routeId && error.routeId !== routeId) ||
+								(!error.routeId && !route.isRoot)
 							) {
 								throw error;
 							}
@@ -129,19 +130,18 @@ function MatchInner(props: { routeId: string }) {
 
 	const Comp = route.options.component ?? router.options.defaultComponent;
 	const remountFn = route.options.remountDeps ?? router.options.defaultRemountDeps;
-	const remountDeps =
-		remountFn
-			? remountFn({
-					routeId,
-					loaderDeps: match.loaderDeps,
-					params: match._strictParams,
-					search: match._strictSearch,
-				})
-			: undefined;
-	const key =
-		remountDeps ? JSON.stringify(remountDeps) : undefined;
-	const out =
-		Comp ? createElement(Comp, key !== undefined ? { key } : {}) : createElement(Outlet, {});
+	const remountDeps = remountFn
+		? remountFn({
+				routeId,
+				loaderDeps: match.loaderDeps,
+				params: match._strictParams,
+				search: match._strictSearch,
+			})
+		: undefined;
+	const key = remountDeps ? JSON.stringify(remountDeps) : undefined;
+	const out = Comp
+		? createElement(Comp, key !== undefined ? { key } : {})
+		: createElement(Outlet, {});
 
 	if (match.status === 'pending') {
 		// router-core owns the pending lifecycle (pendingMs, pendingMinMs, redirects

package/src/MatchRoute.tsrx

@@ -13,10 +13,13 @@ export function useMatchRoute() {
 	useStore(router.stores.location, (l: any) => l.href as string);
 	useStore(router.stores.resolvedLocation, (l: any) => l?.href as string | undefined);
 	useStore(router.stores.status, (s: any) => s as string);
-	return useCallback((opts: Record<string, any>) => {
-		const { pending, caseSensitive, fuzzy, includeSearch, ...rest } = opts;
-		return router.matchRoute(rest as any, { pending, caseSensitive, fuzzy, includeSearch });
-	}, [router]);
+	return useCallback(
+		(opts: Record<string, any>) => {
+			const { pending, caseSensitive, fuzzy, includeSearch, ...rest } = opts;
+			return router.matchRoute(rest as any, { pending, caseSensitive, fuzzy, includeSearch });
+		},
+		[router],
+	);
 }
 
 // Props are permissive (`Record<string, any>` + optional render-prop children) —
@@ -31,7 +34,5 @@ export function MatchRoute(props: Record<string, any>) @{
 			: params
 				? props.children
 				: null;
-	<>
-		{out}
-	</>
+	<>{out}</>
 }

package/src/Matches.tsrx

@@ -24,8 +24,7 @@ export function Matches() @{
 	const rootRoute = (router.routesById as any)[rootRouteId];
 	const PendingComponent =
 		rootRoute.options.pendingComponent ?? router.options.defaultPendingComponent;
-	const pendingElement =
-		PendingComponent ? createElement(PendingComponent, {}) : null;
+	const pendingElement = PendingComponent ? createElement(PendingComponent, {}) : null;
 	const InnerWrap = router.options.InnerWrap ?? SafeFragment;
 
 	// `createRouter({ scrollRestoration: true })` wires scroll save/restore here, so
@@ -49,7 +48,7 @@ function MatchesInner() @{
 	// navigation transition is pending, render the matches router-core expects
 	// (`acknowledgement[0]`) so the committed tree equals what it awaits, then
 	// settle that render acknowledgement from a layout effect once it lands.
-	const acknowledgement: Array<any> = (router as any)._rendered ??= [];
+	const acknowledgement: Array<any> = ((router as any)._rendered ??= []);
 	const matches = useStore(router.stores.matches, (m: any) => acknowledgement[0] ?? m);
 	const rootMatch = matches[0];
 	const routeId = rootMatch?.routeId as string | undefined;

package/src/Outlet.tsrx

@@ -39,10 +39,8 @@ export function Outlet() @{
 	// whose fallback is the router's defaultPendingComponent (react-router's
 	// Outlet does the same) — the outermost pending UI for the initial load.
 	const DefaultPending = router.options.defaultPendingComponent;
-	const RootSuspense =
-		routeId === rootRouteId ? Suspense : SafeFragment;
-	const pendingElement =
-		DefaultPending ? createElement(DefaultPending, {}) : null;
+	const RootSuspense = routeId === rootRouteId ? Suspense : SafeFragment;
+	const pendingElement = DefaultPending ? createElement(DefaultPending, {}) : null;
 
 	@if (notFound.global) {
 		<RouteNotFound routeId={routeId} error={notFound.error} />

package/src/RouteNotFound.tsrx

@@ -16,7 +16,7 @@ export function RouteNotFound(props: { routeId: string; error?: any }) @{
 	const NotFound = route.options.notFoundComponent ?? router.options.defaultNotFoundComponent;
 
 	@if (NotFound) {
-		<NotFound {...props.error ?? {}} />
+		<NotFound {...(props.error ?? {})} />
 	} @else {
 		<p>Not Found</p>
 	}

package/src/RouterProvider.tsrx

@@ -14,11 +14,10 @@ import { SafeFragment } from './SafeFragment.tsrx';
 // Upstream's `RouterProps` is `Omit<RouterOptions<…>, 'context'> & { router }` —
 // extra props reconfigure the instance via `router.update()`. The octane binding
 // keeps the router-typed member strict and the option passthrough permissive.
-export type RouterProps =
-	{
-		router: AnyRouter;
-		context?: Record<string, any>;
-	} & Record<string, any>;
+export type RouterProps = {
+	router: AnyRouter;
+	context?: Record<string, any>;
+} & Record<string, any>;
 
 export function RouterContextProvider(props: RouterProps & { children?: OctaneNode }) @{
 	const { router, children, ...rest } = props;

package/src/SafeFragment.tsrx

@@ -9,7 +9,5 @@
 // it stands in for Suspense/CatchBoundary/CatchNotFound/shellComponent at dynamic
 // boundary slots, so it must accept any boundary's props and render only children.
 export function SafeFragment(props: any) @{
-	<>
-		{props.children}
-	</>
+	<>{props.children}</>
 }

package/src/Transitioner.tsrx

@@ -33,19 +33,18 @@ export function useTransitioner() {
 	const router = useRouter() as any;
 	const [, forceRender] = useState<object>();
 
-	const acknowledgement: Array<any> = router._rendered ??= [];
+	const acknowledgement: Array<any> = (router._rendered ??= []);
 
-	router.startTransition = (fn: () => void, expected: unknown) => new Promise<boolean>((
-		resolve,
-	) => {
-		// A newer transition supersedes an unrendered older one.
-		settleOwner(acknowledgement, false);
-		acknowledgement.push(expected, resolve);
-		// Force `MatchesInner` to re-read: it renders `acknowledgement[0]` and
-		// settles this promise from a layout effect once that commit lands.
-		forceRender({});
-		startTransition(fn);
-	});
+	router.startTransition = (fn: () => void, expected: unknown) =>
+		new Promise<boolean>((resolve) => {
+			// A newer transition supersedes an unrendered older one.
+			settleOwner(acknowledgement, false);
+			acknowledgement.push(expected, resolve);
+			// Force `MatchesInner` to re-read: it renders `acknowledgement[0]` and
+			// settles this promise from a layout effect once that commit lands.
+			forceRender({});
+			startTransition(fn);
+		});
 
 	useLayoutEffect(() => {
 		const unsub = router.history.subscribe(() => router.load());
@@ -58,16 +57,14 @@ export function useTransitioner() {
 		// the swapped-in router's load.
 		router.updateLatestLocation?.();
 		const location = router.latestLocation;
-		const nextLocation = router.buildLocation(
-			{
-				to: location.pathname,
-				search: true,
-				params: true,
-				hash: true,
-				state: true,
-				_includeValidateSearch: true,
-			} as any,
-		);
+		const nextLocation = router.buildLocation({
+			to: location.pathname,
+			search: true,
+			params: true,
+			hash: true,
+			state: true,
+			_includeValidateSearch: true,
+		} as any);
 		if (trimPathRight(location.publicHref) !== trimPathRight(nextLocation.publicHref)) {
 			router.commitLocation({ ...nextLocation, replace: true, ignoreBlocker: true });
 			return unsub;
@@ -76,7 +73,7 @@ export function useTransitioner() {
 		const resolvedLocation = router.stores.resolvedLocation.get();
 		if (
 			resolvedLocation?.href === location.href &&
-				resolvedLocation.state.__TSR_key === location.state.__TSR_key
+			resolvedLocation.state.__TSR_key === location.state.__TSR_key
 		) {
 			// Already resolved (SSR hydration): emit `onRendered` for scroll
 			// restoration and devtools. The match tree has already committed by the

package/src/not-found.tsrx

@@ -40,11 +40,15 @@ export function CatchNotFound(props: {
 				throw error;
 			}
 		}}
-		errorComponent={(p: ErrorComponentProps) => NotFoundFallback({
-			error: p.error,
-			render: props.fallback,
-		})}
-	>{props.children}</CatchBoundary>
+		errorComponent={(p: ErrorComponentProps) =>
+			NotFoundFallback({
+				error: p.error,
+				render: props.fallback,
+			})
+		}
+	>
+		{props.children}
+	</CatchBoundary>
 }
 
 export function DefaultGlobalNotFound() @{

package/src/scroll-restoration.tsrx

@@ -5,9 +5,7 @@
 // itself before React hydrates. Octane hydration claims the server's arm, so the
 // client takes the arm the server took and ScriptOnce adopts, then drops, the
 // server's script.
-import {
-	getScrollRestorationScriptForRouter,
-} from '@tanstack/router-core/scroll-restoration-script';
+import { getScrollRestorationScriptForRouter } from '@tanstack/router-core/scroll-restoration-script';
 import type { AnyRouter } from '@tanstack/router-core';
 import { useRouter } from './context.ts';
 import { ScriptOnce } from './ScriptOnce.tsrx';

package/src/ssr/RouterClient.tsrx

@@ -16,7 +16,7 @@ const ready = {
 function getHydrationPromise(router: AnyRouter) {
 	let promise = hydrationPromises.get(router);
 	if (!promise) {
-		promise = router.stores.ids.get().length ? ready as PromiseLike<void> : hydrate(router);
+		promise = router.stores.ids.get().length ? (ready as PromiseLike<void>) : hydrate(router);
 		hydrationPromises.set(router, promise);
 	}
 	return promise;

package/src/useBlocker.tsrx

@@ -108,8 +108,12 @@ export function useBlocker(
 	opts?: UseBlockerOpts | LegacyBlockerOpts | LegacyBlockerFn,
 	condition?: boolean | any,
 ): BlockerResolver {
-	const { shouldBlockFn, enableBeforeUnload = true, disabled = false, withResolver = false } =
-		_resolveBlockerOpts(opts, condition);
+	const {
+		shouldBlockFn,
+		enableBeforeUnload = true,
+		disabled = false,
+		withResolver = false,
+	} = _resolveBlockerOpts(opts, condition);
 
 	const router = useRouter();
 	const { history } = router;
@@ -182,23 +186,19 @@ export function useBlocker(
 
 // Upstream's PromptProps: the blocker options plus optional children (a render
 // prop receiving the resolver, or plain renderables).
-export type PromptProps =
-	(UseBlockerOpts | LegacyBlockerOpts) & {
-		children?: OctaneNode | ((params: BlockerResolver) => OctaneNode);
-	};
+export type PromptProps = (UseBlockerOpts | LegacyBlockerOpts) & {
+	children?: OctaneNode | ((params: BlockerResolver) => OctaneNode);
+};
 
 // Declarative blocker: registers useBlocker and renders children (optionally a
 // render prop receiving the resolver).
 export function Block(props: PromptProps) @{
 	const { children, ...rest } = props;
 	const resolver = useBlocker(rest);
-	const out =
-		children
-			? typeof children === 'function' && !isChildrenBlock(children)
-				? children(resolver)
-				: children
-			: null;
-	<>
-		{out}
-	</>
+	const out = children
+		? typeof children === 'function' && !isChildrenBlock(children)
+			? children(resolver)
+			: children
+		: null;
+	<>{out}</>
 }