@octanejs/tanstack-router 0.1.60 → 0.2.0

package/src/Transitioner.tsrx

@@ -1,57 +1,66 @@
-// The navigation engine — port of react-router's Transitioner. It runs as a
-// hook because a rendered sibling would put an SSR marker before a root route's
+// The navigation engine — port of react-router's Transitioner. It runs as a hook
+// because a rendered sibling would place an SSR marker before a root route's
 // document-level <html> node and outside the #__app hydration range.
-// It (1) supplies `router.startTransition` so every navigation state update rides
-// an octane transition (concurrent navigation: the current page holds while the
-// next route suspends), (2) subscribes to history so back/forward and `Link`
-// clicks reload the matches, (3) kicks off the initial `router.load()` (skipped
-// when hydrating SSR — ssr-client triggers it) and commits a canonical-URL
-// replace when the mounted URL isn't in canonical form, and (4) drives the router
-// EVENT LIFECYCLE: `onLoad` when a load settles, `onBeforeRouteMount` /
-// `onResolved` when all pending work (load + transition + pending matches)
-// drains, then commits `status: 'idle'` + `resolvedLocation`. router-core's
-// scroll restoration, devtools, and `router.subscribe` consumers all key off
-// these events, and `useRouterState` selectors on `resolvedLocation` depend on
-// the commit.
-import { useEffect, useLayoutEffect, useRef, useState, startTransition } from 'octane';
-import { batch } from '@tanstack/store';
+//
+// router-core 1.171.34 owns the navigation lifecycle end to end: `load` drives
+// `startViewTransition` → `startTransition(commit, matches)`, awaits the render
+// acknowledgement, then emits `onLoad`/`onBeforeRouteMount`/`onResolved`/
+// `onRendered` and commits `status`/`resolvedLocation` itself. The binding's only
+// remaining jobs are:
+//   1. Supply `router.startTransition(fn, expected)` as that render
+//      ACKNOWLEDGEMENT — a promise router-core awaits that resolves `true` only
+//      once `MatchesInner` has rendered the `expected` matches (via `settleOwner`).
+//      Running `fn` inside an octane transition is what lets the current page hold
+//      while the next route suspends.
+//   2. Subscribe to history so back/forward and `Link` clicks reload; replace a
+//      non-canonical mounted URL (mirrors the server-side check in beforeLoad);
+//      and kick off the initial load — or, when hydrating an already-resolved SSR
+//      location, acknowledge the first render so `onRendered` consumers (scroll
+//      restoration, devtools) fire.
+import { useLayoutEffect, useState, startTransition } from 'octane';
 import { getLocationChangeInfo, trimPathRight } from '@tanstack/router-core';
 import { useRouter } from './context.ts';
-import { useStore } from './useStore.ts';
-import { usePrevious } from './utils.ts';
 
-export function useTransitioner() {
-	const router = useRouter();
-	const mountLoadForRouter = useRef({ router, mounted: false });
-	const [isTransitioning, setIsTransitioning] = useState(false);
+// Resolve the pending render acknowledgement with whether the expected matches
+// rendered, then clear the slot. `owner` is `router._rendered`: `[expected, resolve]`.
+export function settleOwner(owner: Array<any>, rendered: boolean) {
+	const settle = owner[1] as ((rendered: boolean) => void) | undefined;
+	owner.length = 0;
+	settle?.(rendered);
+}
 
-	const isLoading = useStore(router.stores.isLoading, (v) => v);
-	const hasPending = useStore(router.stores.hasPending, (v) => v);
+export function useTransitioner() {
+	const router = useRouter() as any;
+	const [, forceRender] = useState<object>();
 
-	const previousIsLoading = usePrevious(isLoading);
-	const isAnyPending = isLoading || isTransitioning || hasPending;
-	const previousIsAnyPending = usePrevious(isAnyPending);
-	const isPagePending = isLoading || hasPending;
-	const previousIsPagePending = usePrevious(isPagePending);
+	const acknowledgement: Array<any> = router._rendered ??= [];
 
-	router.startTransition = (fn: () => void) => {
-		setIsTransitioning(true);
-		startTransition(() => {
-			fn();
-			setIsTransitioning(false);
-		});
-	};
+	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);
+	});
 
-	// Subscribe to location changes and load the new location. On mount, also
-	// verify the current URL is in canonical form (search serialization,
-	// trailing slash) and replace it if not — mirroring the server-side redirect
-	// check in router.beforeLoad.
-	useEffect(() => {
+	useLayoutEffect(() => {
 		const unsub = router.history.subscribe(() => router.load());
 
+		// octane has no StrictMode double-invoke, so this layout effect runs once per
+		// mounted router and re-runs only when the router (or its history) is swapped
+		// on a live provider — exactly when the new router needs its initial load.
+		// Upstream guards this block with a dev-only `mounted` ref purely to absorb
+		// React's StrictMode double-invoke; keeping that ref here would instead skip
+		// the swapped-in router's load.
+		router.updateLatestLocation?.();
+		const location = router.latestLocation;
 		const nextLocation = router.buildLocation(
 			{
-				to: router.latestLocation.pathname,
+				to: location.pathname,
 				search: true,
 				params: true,
 				hash: true,
@@ -59,70 +68,32 @@ export function useTransitioner() {
 				_includeValidateSearch: true,
 			} as any,
 		);
-		if (
-			trimPathRight(router.latestLocation.publicHref) !== trimPathRight(nextLocation.publicHref)
-		) {
-			router.commitLocation({ ...nextLocation, replace: true });
+		if (trimPathRight(location.publicHref) !== trimPathRight(nextLocation.publicHref)) {
+			router.commitLocation({ ...nextLocation, replace: true, ignoreBlocker: true });
+			return unsub;
 		}
 
-		return () => unsub();
-	}, [router, router.history]);
-
-	// Initial load. Skipped when hydrating from SSR (ssr-client triggers it) and
-	// on re-runs for the same router instance.
-	useLayoutEffect(() => {
+		const resolvedLocation = router.stores.resolvedLocation.get();
 		if (
-			typeof window !== 'undefined' && router.ssr ||
-				mountLoadForRouter.current.router === router && mountLoadForRouter.current.mounted
+			resolvedLocation?.href === location.href &&
+				resolvedLocation.state.__TSR_key === location.state.__TSR_key
 		) {
-			return;
-		}
-		mountLoadForRouter.current = { router, mounted: true };
-		router.load().catch((err: unknown) => {
-			console.error(err);
-		});
-	}, [router]);
-
-	// The router was loading and now it's not — the new matches are in state.
-	useLayoutEffect(() => {
-		if (previousIsLoading && !isLoading) {
+			// Already resolved (SSR hydration): emit `onRendered` for scroll
+			// restoration and devtools. The match tree has already committed by the
+			// time this layout effect runs (child effects fire before the parent's),
+			// so emit directly rather than through the acknowledgement/settle path:
+			// hydration acknowledges the matches already on screen, which — unlike a
+			// navigation that commits the *next* matches — triggers no re-render for
+			// `MatchesInner`'s settle effect to run on.
 			router.emit({
-				type: 'onLoad',
-				...getLocationChangeInfo(
-					router.stores.location.get(),
-					router.stores.resolvedLocation.get(),
-				),
+				type: 'onRendered',
+				...getLocationChangeInfo(resolvedLocation, resolvedLocation),
 			});
-		}
-	}, [previousIsLoading, router, isLoading]);
-
-	useLayoutEffect(() => {
-		if (previousIsPagePending && !isPagePending) {
-			router.emit({
-				type: 'onBeforeRouteMount',
-				...getLocationChangeInfo(
-					router.stores.location.get(),
-					router.stores.resolvedLocation.get(),
-				),
+		} else if (!router._tx) {
+			router.load({ sync: true }).catch((err: unknown) => {
+				console.error(err);
 			});
 		}
-	}, [isPagePending, previousIsPagePending, router]);
-
-	// Everything pending has drained — resolve the navigation: emit onResolved and
-	// commit status idle + resolvedLocation (what `onRendered` and scroll
-	// restoration key off).
-	useLayoutEffect(() => {
-		if (previousIsAnyPending && !isAnyPending) {
-			const changeInfo = getLocationChangeInfo(
-				router.stores.location.get(),
-				router.stores.resolvedLocation.get(),
-			);
-			router.emit({ type: 'onResolved', ...changeInfo });
-
-			batch(() => {
-				router.stores.status.set('idle');
-				router.stores.resolvedLocation.set(router.stores.location.get());
-			});
-		}
-	}, [isAnyPending, previousIsAnyPending, router]);
+		return unsub;
+	}, [router, router.history]);
 }

package/src/hooks.ts

@@ -1,9 +1,9 @@
 // The read hooks — ports of react-router's useMatch.tsx / useParams / useSearch /
 // useLoaderData / useLoaderDeps / useRouteContext / useNavigate / useCanGoBack /
 // Matches.tsx (useMatches / useParentMatches / useChildMatches). Everything match-
-// shaped funnels through `useMatch`, which subscribes to ONE match store:
-//   - `from` given → `router.stores.getRouteMatchStore(from)` (a cached computed
-//     that resolves a routeId to its current match);
+// shaped funnels through `useMatch`, which subscribes to ONE match store via
+// `router.stores.getMatchStore(routeId)`:
+//   - `from` given → that routeId's match store;
 //   - no `from` → the NEAREST match via `matchContext` (the match id the enclosing
 //     `<Match>` provided) — NOT the leaf match.
 // A missing match throws unless `shouldThrow: false` (upstream invariant).
@@ -89,9 +89,8 @@ export function useMatch(...args: any[]): any {
 	// octane has no rules of hooks, so the nearest-match context is read
 	// unconditionally (upstream reads a dummy context when `from` is given).
 	const nearestMatchId = useContext(matchContext);
-	const matchStore = opts.from
-		? router.stores.getRouteMatchStore(opts.from)
-		: router.stores.matchStores.get(nearestMatchId as string);
+	const routeId = opts.from ?? (nearestMatchId as string);
+	const matchStore = router.stores.getMatchStore(routeId);
 
 	const selector = useStructuralSharing(opts, router, subSlot(slot, 'm'));
 	const matchSelection = useStore(
@@ -302,13 +301,13 @@ export function useParentMatches(opts: any, slot: symbol | undefined): any;
 export function useParentMatches(...args: any[]): any {
 	const [user, slot] = splitSlot(args);
 	const opts = user[0] ?? {};
-	const contextMatchId = useContext(matchContext);
+	const contextRouteId = useContext(matchContext);
 	return useMatches(
 		{
 			select: (matches: any[]) => {
 				matches = matches.slice(
 					0,
-					matches.findIndex((d: any) => d.id === contextMatchId),
+					matches.findIndex((d: any) => d.routeId === contextRouteId),
 				);
 				return opts.select ? opts.select(matches) : matches;
 			},
@@ -330,11 +329,11 @@ export function useChildMatches(opts: any, slot: symbol | undefined): any;
 export function useChildMatches(...args: any[]): any {
 	const [user, slot] = splitSlot(args);
 	const opts = user[0] ?? {};
-	const contextMatchId = useContext(matchContext);
+	const contextRouteId = useContext(matchContext);
 	return useMatches(
 		{
 			select: (matches: any[]) => {
-				matches = matches.slice(matches.findIndex((d: any) => d.id === contextMatchId) + 1);
+				matches = matches.slice(matches.findIndex((d: any) => d.routeId === contextRouteId) + 1);
 				return opts.select ? opts.select(matches) : matches;
 			},
 			structuralSharing: opts.structuralSharing,

package/src/link.ts

@@ -195,10 +195,14 @@ export function useLinkProps(...args: any[]): Record<string, any> {
 			if (!pathIsFuzzyEqual) return false;
 		}
 		if (activeOptions?.includeSearch ?? true) {
-			const searchTest = deepEqual(currentLocation.search, next.search, {
-				partial: !activeOptions?.exact,
-				ignoreUndefined: !activeOptions?.explicitUndefined,
-			});
+			// router-core 1.171.34 deepEqual: positional (partial, explicitUndefined)
+			// instead of an options object; the 4th arg is explicitUndefined directly.
+			const searchTest = deepEqual(
+				currentLocation.search,
+				next.search,
+				!activeOptions?.exact,
+				activeOptions?.explicitUndefined,
+			);
 			if (!searchTest) return false;
 		}
 		if (activeOptions?.includeHash) return currentLocation.hash === next.hash;

package/src/router.ts

@@ -12,7 +12,6 @@ import {
 	createNonReactiveReadonlyStore,
 } from '@tanstack/router-core';
 import { createAtom, batch } from '@tanstack/store';
-import { startTransition } from 'octane';
 import type { RouterHistory } from '@tanstack/history';
 import type {
 	AnyRoute,
@@ -23,11 +22,12 @@ import type {
 
 const isServerEnv = typeof document === 'undefined';
 
-// Batch router mutations atomically, including resolved commits delivered by a
-// later View Transition callback. The transition scope preserves navigation
-// bookkeeping; useSyncExternalStore notifications still render urgently. Routes
-// that keep stale content while new data loads should defer their render input
-// with useDeferredValue. Server snapshots use the non-reactive factory below.
+// Store factory for RouterCore — the only framework-specific wiring. Client
+// stores are reactive @tanstack/store atoms (framework-agnostic; `createAtom`
+// lives in @tanstack/store, not @tanstack/react-store); server snapshots use the
+// non-reactive factory. router-core 1.171.34 drives concurrent navigation through
+// `router.startTransition` (see Transitioner), so `batch` is a plain atomic batch
+// rather than one wrapped in an octane transition.
 const octaneStoreFactory = (opts: { isServer?: boolean }) => {
 	if (opts?.isServer ?? isServerEnv) {
 		return {
@@ -39,7 +39,7 @@ const octaneStoreFactory = (opts: { isServer?: boolean }) => {
 	return {
 		createMutableStore: createAtom,
 		createReadonlyStore: createAtom,
-		batch: (fn: () => void) => startTransition(() => batch(fn)),
+		batch,
 	};
 };
 
@@ -65,102 +65,15 @@ export class Router<
 			TDehydrated
 		>,
 	) {
+		// router-core 1.171.34 owns the navigation lifecycle end to end: it drives
+		// `startViewTransition` → `startTransition(commit, matches)` and awaits the
+		// render acknowledgement (supplied by `useTransitioner`), then emits
+		// onLoad/onBeforeRouteMount/onResolved/onRendered and commits
+		// `status`/`resolvedLocation` itself. So `await router.load()` is already a
+		// render-readiness boundary and the previous view-transition/load wrapper is
+		// no longer needed. HTTP status is derived on demand by the SSR layer
+		// (`getSsrStatus`), not stored on the router.
 		super(options, octaneStoreFactory);
-
-		// router-core starts the resolved-match commit through startViewTransition,
-		// whose browser callback may run after router-core's load promise resolves.
-		// Track those callbacks so `await router.load()` is a real render-readiness
-		// boundary: the active match tree is committed before a consumer's first
-		// render or hydration pass.
-		const coreLoad = this.load.bind(this);
-		const coreStartViewTransition = this.startViewTransition.bind(this);
-		const pendingViewCommits = new Set<Promise<void>>();
-		const activeLoadScopes = new Set<Set<Promise<void>>>();
-
-		this.startViewTransition = (fn: () => Promise<void>) => {
-			let resolveCommit!: () => void;
-			let rejectCommit!: (error: unknown) => void;
-			const commit = new Promise<void>((resolve, reject) => {
-				resolveCommit = resolve;
-				rejectCommit = reject;
-			});
-			pendingViewCommits.add(commit);
-			for (const scope of activeLoadScopes) scope.add(commit);
-			// Keep only unsettled callbacks globally. A later load waits for a prior
-			// callback so no mutation can land after its readiness boundary, but only
-			// the active scopes above own (and therefore propagate) this failure.
-			void commit.then(
-				() => pendingViewCommits.delete(commit),
-				() => pendingViewCommits.delete(commit),
-			);
-
-			const runCommit = async () => {
-				try {
-					await fn();
-					resolveCommit();
-				} catch (error) {
-					rejectCommit(error);
-				}
-			};
-
-			try {
-				coreStartViewTransition(runCommit);
-			} catch (error) {
-				rejectCommit(error);
-				throw error;
-			}
-		};
-
-		this.load = async (...args: any[]) => {
-			const prerequisiteCommits = new Set(pendingViewCommits);
-			const viewCommits = new Set<Promise<void>>();
-			activeLoadScopes.add(viewCommits);
-			let hasLoadError = false;
-			let loadError: unknown;
-			let result: void;
-			try {
-				result = await coreLoad(...args);
-			} catch (error) {
-				hasLoadError = true;
-				loadError = error;
-			} finally {
-				// All commits started by this core load are now registered. Stop
-				// accepting commits from later navigations before awaiting this scope.
-				activeLoadScopes.delete(viewCommits);
-			}
-
-			let hasCommitError = false;
-			let commitError: unknown;
-			const [, outcomes] = await Promise.all([
-				Promise.allSettled(prerequisiteCommits),
-				Promise.allSettled(viewCommits),
-			]);
-			const rejected = outcomes.find((outcome) => outcome.status === 'rejected');
-			if (rejected?.status === 'rejected') {
-				hasCommitError = true;
-				commitError = rejected.reason;
-			}
-			if (hasLoadError) throw loadError;
-			if (hasCommitError) throw commitError;
-
-			// RouterCore derives the final HTTP status immediately after its internal
-			// load promise resolves. A platform-deferred View Transition can commit the
-			// new tree only after that point, so finalize every branch once the
-			// render-ready tree is present. RouterCore has already committed a
-			// redirect and its HTTP status together, so preserve that authoritative
-			// status; otherwise a successful tree must also clear a stale 404/500.
-			const state = this.state;
-			const statusCode =
-				state.redirect != null
-					? state.statusCode
-					: this.hasNotFoundMatch()
-						? 404
-						: state.matches.some((match: any) => match.status === 'error')
-							? 500
-							: 200;
-			this.stores.statusCode.set(statusCode);
-			return result;
-		};
 	}
 }
 

package/src/scriptContentUtils.ts

@@ -1,64 +1,37 @@
-import { deepEqual } from '@tanstack/router-core';
+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, AnyRouter, RouterManagedTag } from '@tanstack/router-core';
+import type { AnyRouteMatch, RouterManagedTag } from '@tanstack/router-core';
 
-function getScripts(router: AnyRouter, matches: Array<AnyRouteMatch>) {
-	const nonce = router.options.ssr?.nonce;
-	const scripts: Array<RouterManagedTag> = matches
-		.flatMap((match) => match.scripts ?? [])
-		.filter((script) => script !== undefined)
-		.map(({ children, ...attrs }) => ({
-			tag: 'script',
-			attrs: { ...attrs, nonce },
-			children,
-		}));
-
-	const manifest = router.ssr?.manifest;
-	if (manifest) {
-		for (const match of matches) {
-			for (const asset of manifest.routes[match.routeId]?.scripts ?? []) {
-				scripts.push({
-					tag: 'script',
-					attrs: { ...asset.attrs, nonce },
-					children: asset.children,
-				});
-			}
-		}
-	}
-
-	return scripts;
-}
+// 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) {
-		const scripts = getScripts(router, router.stores.matches.get());
-		const buffered = router.serverSsr?.takeBufferedScripts();
-		if (!buffered || buffered.tag !== 'script') {
-			return scripts;
-		}
-		return [
-			{
-				tag: 'script',
-				attrs: buffered.attrs,
-				children:
-					typeof buffered.children === 'string'
-						? buffered.children.replace(/;document\.currentScript\.remove\(\)$/, '')
-						: buffered.children,
-			},
-			...scripts,
-		];
+		return composeSsrBodyScripts(
+			getSsrBodyScriptParts(
+				router.stores.matches.get(),
+				router.ssr?.manifest,
+				nonce,
+				routeScriptAttrs,
+			),
+			router.serverSsr?.takeInitialHydrationScriptTags(),
+		);
 	}
 
-	return useStore(
-		router.stores.matches,
-		(matches: Array<AnyRouteMatch>) => getScripts(router, matches),
-		deepEqual,
-		subSlot(slot, 'body:scripts'),
-	);
+	return useStore(router.stores.matches, getScripts, deepEqual, subSlot(slot, 'body:scripts'));
 }

package/src/scroll-restoration.tsrx

@@ -1,15 +1,28 @@
+// Port of react-router's scroll-restoration.tsx. router-core's server build of
+// `getScrollRestorationScriptForRouter` returns the inline restore script unless
+// a `scrollRestoration` function declines the location; its client build always
+// returns null. Upstream's client renders null because its ScriptOnce removes
+// 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 type { AnyRouter } from '@tanstack/router-core';
 import { useRouter } from './context.ts';
 import { ScriptOnce } from './ScriptOnce.tsrx';
 
+function rendersScript(router: AnyRouter): boolean {
+	const option = router.options.scrollRestoration;
+	return typeof option !== 'function' || option({ location: router.latestLocation });
+}
+
 export function ScrollRestorationScript() @{
 	const router = useRouter();
 	const script = getScrollRestorationScriptForRouter(router);
 
-	@if (script) {
-		<ScriptOnce children={script} />
+	@if (script !== null || rendersScript(router)) {
+		<ScriptOnce children={script ?? ''} />
 	} @else {
 		<></>
 	}

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.matchesId.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;