@octanejs/tanstack-router 0.1.60 → 0.2.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@octanejs/tanstack-router",
-  "version": "0.1.60",
+  "version": "0.2.0",
   "license": "MIT",
   "type": "module",
   "engines": {
@@ -52,22 +52,22 @@
     "./package.json": "./package.json"
   },
   "dependencies": {
-    "@tanstack/history": "1.162.0",
-    "@tanstack/router-core": "1.171.15",
+    "@tanstack/history": "1.162.4",
+    "@tanstack/router-core": "1.171.34",
     "@tanstack/store": "^0.9.3",
     "isbot": "^5.1.22"
   },
   "peerDependencies": {
-    "octane": "^0.7.0"
+    "octane": "^0.8.0"
   },
   "devDependencies": {
-    "@tanstack/react-router": "1.170.18",
+    "@tanstack/react-router": "1.170.41",
     "@tsrx/react": "^0.3.7",
     "esbuild": "^0.28.1",
     "react": "19.2.7",
     "react-dom": "19.2.7",
     "vitest": "^4.1.10",
-    "octane": "0.7.0"
+    "octane": "0.8.0"
   },
   "scripts": {
     "test": "vitest run"

package/src/CatchBoundary.tsrx

@@ -18,7 +18,7 @@ import type { OctaneNode } from 'octane';
 import type { ErrorInfo, ErrorRouteComponent } from './route.ts';
 
 export function CatchBoundary(props: {
-	getResetKey: () => number | string;
+	getResetKey: () => unknown;
 	children: OctaneNode;
 	errorComponent?: ErrorRouteComponent;
 	onCatch?: (error: Error, errorInfo: ErrorInfo) => void;
@@ -41,7 +41,7 @@ export function CatchBoundary(props: {
 function CatchErrorView(props: {
 	error: any;
 	reset: () => void;
-	getResetKey?: () => number | string;
+	getResetKey?: () => unknown;
 	errorComponent?: ErrorRouteComponent;
 	onCatch?: (error: Error, errorInfo: ErrorInfo) => void;
 }) @{

package/src/Match.tsrx

@@ -1,6 +1,5 @@
 // Renders one route match — port of react-router's Match.tsx (MatchView +
-// MatchInner + OnRendered). `Match` subscribes to the match's routeId and the
-// router's `loadedAt` (the error-boundary reset key), resolves the route's
+// MatchInner). `Match` subscribes to the match's routeId, resolves the route's
 // boundary components, and composes the pipeline exactly like upstream:
 //
 //   Shell > matchContext > Suspense? > CatchBoundary? > CatchNotFound? > MatchInner
@@ -9,22 +8,18 @@
 // component for it — otherwise `SafeFragment` passes through so suspensions and
 // errors bubble to the nearest ancestor boundary (upstream's
 // ResolvedSuspenseBoundary/ResolvedCatchBoundary/ResolvedNotFoundBoundary).
-// `MatchInner` handles the match STATUS: it suspends (a thrown promise, as
-// upstream) on pending/redirected/_displayPending/_forcePending, renders
-// the route's not-found UI for `status === 'notFound'`, throws to the
-// CatchBoundary for `status === 'error'`, and otherwise renders the route
-// component (or `<Outlet/>` for component-less layout routes) keyed by
-// remountDeps. `OnRendered` (rendered by the match directly below the root)
-// emits the router's `onRendered` event after the subtree commits — scroll
-// restoration restores on it.
-import { useRef, useLayoutEffect, createElement, Suspense } from 'octane';
-import {
-	createControlledPromise,
-	getLocationChangeInfo,
-	isNotFound,
-	rootRouteId,
-} from '@tanstack/router-core';
-import type { NotFoundError, ParsedLocation, RootRouteOptions } from '@tanstack/router-core';
+// `MatchInner` handles the match STATUS. router-core 1.171.34 owns the pending
+// lifecycle (pendingMs/pendingMinMs, redirects, min-pending) and exposes a single
+// in-flight transaction: a `pending` match suspends by throwing the transaction's
+// promise (`router._tx[5]`) during a navigation, or renders the route's pending
+// UI otherwise; `notFound` renders the route's not-found UI; `error` throws to the
+// CatchBoundary (server renders the error component inline). Otherwise it renders
+// the route component (or `<Outlet/>` for component-less layout routes) keyed by
+// remountDeps. Per-match error-boundary reset keys off the match object identity
+// (upstream dropped the global `loadedAt` store).
+import { createElement, Suspense } from 'octane';
+import { isNotFound, rootRouteId } from '@tanstack/router-core';
+import type { NotFoundError, RootRouteOptions } from '@tanstack/router-core';
 import type { ErrorInfo, ErrorRouteComponent } from './route.ts';
 import { useStore } from './useStore.ts';
 import { useRouter, matchContext as MatchContext } from './context.ts';
@@ -36,20 +31,19 @@ import { SafeFragment } from './SafeFragment.tsrx';
 import { ClientOnly } from './ClientOnly.tsrx';
 import { ScrollRestorationScript } from './scroll-restoration.tsrx';
 
-export function Match(props: { matchId: string }) @{
+export function Match(props: { routeId: string }) @{
 	const router = useRouter();
-	const matchStore = router.stores.matchStores.get(props.matchId)!;
-	const resetKey = useStore(router.stores.loadedAt, (l: any) => l as number | string);
+	// router-core 1.171.34 keys match stores by routeId (`byRoute`/`getMatchStore`),
+	// not by match-instance id, and dropped the global `loadedAt` reset store —
+	// upstream now resets each route's error boundary on its match object identity.
+	const matchStore = router.stores.getMatchStore(props.routeId);
 	const matchState = useStore(
 		matchStore,
 		(m: any) => ({
 			routeId: m.routeId,
 			ssr: m.ssr,
-			_displayPending: m._displayPending,
 		}),
-		(previous, next) =>
-			previous.routeId === next.routeId && previous.ssr === next.ssr &&
-				previous._displayPending === next._displayPending,
+		(previous, next) => previous.routeId === next.routeId && previous.ssr === next.ssr,
 	);
 	const routeId = matchState.routeId as string;
 	const route = (router.routesById as Record<string, any>)[routeId];
@@ -83,10 +77,10 @@ export function Match(props: { matchId: string }) @{
 	const parentRouteId = route.parentRoute?.id;
 
 	<ShellComponent>
-		<MatchContext value={props.matchId}>
+		<MatchContext value={props.routeId}>
 			<SuspenseWrap fallback={pendingElement}>
 				<CatchWrap
-					getResetKey={() => resetKey}
+					getResetKey={() => matchStore.get()}
 					errorComponent={routeErrorComponent || ErrorComponent}
 					onCatch={(error: Error, errorInfo: ErrorInfo) => {
 						if (isNotFound(error)) {
@@ -109,87 +103,30 @@ export function Match(props: { matchId: string }) @{
 							return createElement(routeNotFoundComponent, error as any);
 						}}
 					>
-						@if (resolvedNoSsr || matchState._displayPending) {
+						@if (resolvedNoSsr) {
 							<ClientOnly fallback={pendingElement}>
-								<MatchInner matchId={props.matchId} />
+								<MatchInner routeId={props.routeId} />
 							</ClientOnly>
 						} @else {
-							<MatchInner matchId={props.matchId} />
+							<MatchInner routeId={props.routeId} />
 						}
 					</NotFoundWrap>
 				</CatchWrap>
 			</SuspenseWrap>
 		</MatchContext>
-		@if (parentRouteId === rootRouteId) {
-			<>
-				<OnRendered />
-				@if (router.options.scrollRestoration) {
-					<ScrollRestorationScript />
-				}
-			</>
+		@if (parentRouteId === rootRouteId && router.options.scrollRestoration) {
+			<ScrollRestorationScript />
 		}
 	</ShellComponent>
 }
 
-function MatchInner(props: { matchId: string }) {
+function MatchInner(props: { routeId: string }) {
 	const router = useRouter();
-	const matchStore = router.stores.matchStores.get(props.matchId)!;
+	const matchStore = router.stores.getMatchStore(props.routeId);
 	const match = useStore(matchStore, (m: any) => m);
 	const routeId = match.routeId as string;
 	const route = (router.routesById as Record<string, any>)[routeId];
 
-	// The live match in the router (if still mounted there) wins over the
-	// snapshot for promise lookups, per upstream getMatchPromise.
-	const getMatchPromise = (key: 'displayPendingPromise' | 'minPendingPromise' | 'loadPromise') =>
-		router.getMatch(match.id)?._nonReactive[key] ?? match._nonReactive[key];
-
-	// Suspend by throwing, like upstream, not with `use()`. Each match state
-	// waits on a different promise, and `use()` is positional: a replay that
-	// finds the match in a new state would get the promise stored for the old
-	// one. Router-core's promises settle to `status: 'resolved'`, which `use()`
-	// reads as still pending, so that stored promise retries forever.
-	if (match._displayPending) {
-		throw getMatchPromise('displayPendingPromise')!;
-	}
-
-	if (match._forcePending) {
-		throw getMatchPromise('minPendingPromise')!;
-	}
-
-	if (match.status === 'pending') {
-		// Once pending UI shows, keep it up for at least pendingMinMs.
-		const pendingMinMs = route.options.pendingMinMs ?? router.options.defaultPendingMinMs;
-		if (pendingMinMs) {
-			const routerMatch = router.getMatch(match.id);
-			if (routerMatch && !routerMatch._nonReactive.minPendingPromise) {
-				const minPendingPromise = createControlledPromise<void>();
-				routerMatch._nonReactive.minPendingPromise = minPendingPromise;
-				setTimeout(() => {
-					minPendingPromise.resolve();
-					routerMatch._nonReactive.minPendingPromise = undefined;
-				}, pendingMinMs);
-			}
-		}
-		throw getMatchPromise('loadPromise')!;
-	}
-
-	if (match.status === 'notFound') {
-		return createElement(RouteNotFound, { routeId, error: match.error });
-	}
-
-	if (match.status === 'redirected') {
-		// Observed mid-transition while a redirect is in flight — stay suspended so
-		// this stale render is abandoned and the redirect completes.
-		const atom = matchStore as unknown as Partial<MatchAtom>;
-		throw typeof atom.subscribe === 'function'
-			? nextMatchUpdate(atom as MatchAtom, match)
-			: getMatchPromise('loadPromise')!;
-	}
-
-	if (match.status === 'error') {
-		throw match.error;
-	}
-
 	const Comp = route.options.component ?? router.options.defaultComponent;
 	const remountFn = route.options.remountDeps ?? router.options.defaultRemountDeps;
 	const remountDeps =
@@ -203,75 +140,52 @@ function MatchInner(props: { matchId: string }) {
 			: undefined;
 	const key =
 		remountDeps ? JSON.stringify(remountDeps) : undefined;
-	if (Comp) return createElement(Comp, key !== undefined ? { key } : {});
-	return createElement(Outlet, {});
-}
-
-interface MatchAtom {
-	get: () => object;
-	subscribe: (cb: () => void) => { unsubscribe: () => void };
-}
+	const out =
+		Comp ? createElement(Comp, key !== undefined ? { key } : {}) : createElement(Outlet, {});
 
-const matchUpdates = new WeakMap<object, Promise<void>>();
-
-// Settles on the first store update after `snapshot`. A redirected match waits
-// on this, not on its loadPromise: router-core resolves that promise when it
-// marks the redirect, and a settled promise retries on a microtask until the
-// redirect target has loaded, starving the timers and network callbacks that
-// load waits on. React's scheduler paces those retries; Octane's retry does
-// not. Server atoms cannot subscribe, so the server keeps upstream's promise:
-// a server redirect is answered before the app renders.
-function nextMatchUpdate(store: MatchAtom, snapshot: object): Promise<void> {
-	let update = matchUpdates.get(snapshot);
-	if (update === undefined) {
-		update = new Promise<void>((resolve) => {
-			const subscription = store.subscribe(() => {
-				subscription.unsubscribe();
-				resolve();
-			});
-			// The store may have moved on between this render and the subscription.
-			if (store.get() !== snapshot) {
-				subscription.unsubscribe();
-				resolve();
-			}
-		});
-		matchUpdates.set(snapshot, update);
+	if (match.status === 'pending') {
+		// router-core owns the pending lifecycle (pendingMs, pendingMinMs, redirects
+		// and min-pending timing). During an in-flight navigation a pending match
+		// suspends on the transaction's promise so the current page holds; outside a
+		// transaction (e.g. an initial client load) it shows the route's pending UI.
+		//
+		// Octane-specific divergence from react-router: a client-only
+		// (`ssr: false`/`data-only`) pending match renders its pending UI in place
+		// inside <ClientOnly> rather than throwing to the outer Suspense. Octane's
+		// Suspense keeps the suspended subtree's DOM hidden on fallback, so throwing
+		// would leave the hidden <ClientOnly> fallback in the tree alongside the
+		// visible Suspense fallback — two pending elements. React's <ClientOnly>
+		// swaps fallback→children, so upstream can always throw.
+		const resolvedNoSsr = match.ssr === false || match.ssr === 'data-only';
+		const tx = (router as any)._tx;
+		if (tx && !resolvedNoSsr) throw tx[5];
+		return pendingElementFor(router, route);
 	}
-	return update;
-}
-
-// Emits the router's `onRendered` event once the subtree below the root layout
-// has committed (this component renders as a later sibling of the match content,
-// so its layout effect runs after the subtree's). Tracks the previously-resolved
-// location in a ref because by effect time Transitioner has already advanced
-// `resolvedLocation` to the new location.
-function OnRendered() @{
-	const router = useRouter();
-	const prevResolvedLocationRef = useRef<ParsedLocation<any> | undefined>(undefined);
-	const renderedLocationKey = useStore(
-		router.stores.resolvedLocation,
-		(loc: ParsedLocation<any> | undefined) => loc?.state.__TSR_key,
-	);
 
-	useLayoutEffect(() => {
-		const currentResolvedLocation = router.stores.resolvedLocation.get();
-		const previousResolvedLocation = prevResolvedLocationRef.current;
+	if (match.status === 'notFound') {
+		return createElement(RouteNotFound, { routeId, error: match.error });
+	}
 
-		if (
-			currentResolvedLocation &&
-				(!previousResolvedLocation ||
-					previousResolvedLocation.href !== currentResolvedLocation.href)
-		) {
-			router.emit({
-				type: 'onRendered',
-				...getLocationChangeInfo(
-					router.stores.location.get(),
-					previousResolvedLocation ?? currentResolvedLocation,
-				),
+	if (match.status === 'error') {
+		// On the server there is no CatchBoundary to catch a throw, so render the
+		// error component inline (upstream MatchInner does the same); on the client
+		// throw to the nearest CatchBoundary.
+		if ((router as any).isServer) {
+			const ErrorComp =
+				(route.options.errorComponent ?? router.options.defaultErrorComponent) || ErrorComponent;
+			return createElement(ErrorComp as any, {
+				error: match.error,
+				reset: undefined,
+				info: { componentStack: '' },
 			});
 		}
-		prevResolvedLocationRef.current = currentResolvedLocation;
-	}, [renderedLocationKey, router]);
+		throw match.error;
+	}
+
+	return out;
+}
 
-	<></>
+function pendingElementFor(router: any, route: any) {
+	const PendingComponent = route.options.pendingComponent ?? router.options.defaultPendingComponent;
+	return PendingComponent ? createElement(PendingComponent, {}) : null;
 }

package/src/MatchRoute.tsrx

@@ -1,16 +1,18 @@
 // useMatchRoute / MatchRoute — port of react-router's Matches.tsx matcher pair.
-// The hook subscribes to `matchRouteDeps` (location href + resolved href +
-// status) so the matcher re-evaluates per navigation, and returns
-// `matchRoute(opts)` → false | matched params. The component renders its
-// children when matched — a render-prop child ALWAYS renders, receiving the
-// params (false when unmatched).
+// router-core 1.171.34 dropped the `matchRouteDeps` store; upstream now
+// subscribes to the location href, resolved-location href, and status directly
+// so the matcher re-evaluates per navigation, and returns `matchRoute(opts)` →
+// false | matched params. The component renders its children when matched — a
+// render-prop child ALWAYS renders, receiving the params (false when unmatched).
 import { useCallback, isChildrenBlock } from 'octane';
 import { useRouter } from './context.ts';
 import { useStore } from './useStore.ts';
 
 export function useMatchRoute() {
 	const router = useRouter();
-	useStore(router.stores.matchRouteDeps, (d) => d);
+	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 });

package/src/Matches.tsrx

@@ -14,7 +14,7 @@ import { useLayoutEffect, createElement, Suspense } from 'octane';
 import { setupScrollRestoration, rootRouteId } from '@tanstack/router-core';
 import { useStore } from './useStore.ts';
 import { useRouter, matchContext as MatchContext } from './context.ts';
-import { useTransitioner } from './Transitioner.tsrx';
+import { useTransitioner, settleOwner } from './Transitioner.tsrx';
 import { Match } from './Match.tsrx';
 import { CatchBoundary, ErrorComponent } from './CatchBoundary.tsrx';
 import { SafeFragment } from './SafeFragment.tsrx';
@@ -44,14 +44,25 @@ export function Matches() @{
 
 function MatchesInner() @{
 	const router = useRouter();
-	const matchId = useStore(router.stores.firstId, (id: any) => id as string | undefined);
-	const resetKey = useStore(router.stores.loadedAt, (l: any) => l as number | string);
+	// router-core 1.171.34 dropped the `firstId`/`loadedAt` stores: the root match
+	// is `matches[0]` and the global error boundary resets on its identity. While a
+	// 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 matches = useStore(router.stores.matches, (m: any) => acknowledgement[0] ?? m);
+	const rootMatch = matches[0];
+	const routeId = rootMatch?.routeId as string | undefined;
 	const CatchWrap = router.options.disableGlobalCatchBoundary ? SafeFragment : CatchBoundary;
 
-	<MatchContext value={matchId}>
-		<CatchWrap getResetKey={() => resetKey} errorComponent={ErrorComponent}>
-			@if (matchId) {
-				<Match matchId={matchId} />
+	useLayoutEffect(() => {
+		if (acknowledgement[0] === matches) settleOwner(acknowledgement, true);
+	}, [acknowledgement, matches]);
+
+	<MatchContext value={routeId}>
+		<CatchWrap getResetKey={() => rootMatch} errorComponent={ErrorComponent}>
+			@if (routeId) {
+				<Match routeId={routeId} />
 			}
 		</CatchWrap>
 	</MatchContext>

package/src/Outlet.tsrx

@@ -1,10 +1,10 @@
-// Renders the child match below the current one. Reads the current match id from
-// `matchContext`, finds the NEXT id in the match-id chain, and renders its `<Match/>`
-// — the pull-based descent that replaces a top-down state diff. Renders nothing at
-// a leaf.
+// Renders the child match below the current one. Reads the current routeId from
+// `matchContext`, finds the NEXT id in the route-id chain (`stores.ids`), and
+// renders its `<Match/>` — the pull-based descent that replaces a top-down state
+// diff. Renders nothing at a leaf.
 //
 // Not-found (react-router's Outlet, same order): when the URL matched no route,
-// router-core flags ONE match `globalNotFound` — with the default
+// router-core flags ONE match `_notFound` — with the default
 // `notFoundMode: 'fuzzy'` the deepest fuzzy-matched route that has children, with
 // `notFoundMode: 'root'` the root. That match still renders its own component
 // (the layout), and its `<Outlet/>` renders the not-found UI INSTEAD of a child
@@ -19,14 +19,19 @@ import { SafeFragment } from './SafeFragment.tsrx';
 
 export function Outlet() @{
 	const router = useRouter();
-	// Outlet only renders inside a match's component, so the context id (and its
-	// pooled store) are present — same invariant upstream asserts with invariant().
-	const parentId = useContext(matchContext)!;
-	const parentStore = router.stores.matchStores.get(parentId)!;
-	const parentRouteId = useStore(parentStore, (m: any) => m?.routeId as string | undefined);
-	const globalNotFound = useStore(parentStore, (m: any) => m?.globalNotFound ?? false as boolean);
-	const childId = useStore(router.stores.matchesId, (ids: Array<string>) => {
-		const i = ids.indexOf(parentId);
+	// Outlet only renders inside a match's component, so the context routeId (and
+	// its store) are present — same invariant upstream asserts with invariant().
+	// router-core 1.171.34 keys stores by routeId (`getMatchStore`/`ids`) and
+	// renamed the global-not-found match flag `globalNotFound` → `_notFound`.
+	const routeId = useContext(matchContext)!;
+	const parentStore = router.stores.getMatchStore(routeId);
+	const notFound = useStore(
+		parentStore,
+		(m: any) => ({ global: !!m?._notFound, error: m?.error }),
+		(a, b) => a.global === b.global && a.error === b.error,
+	);
+	const childId = useStore(router.stores.ids, (ids: Array<string>) => {
+		const i = ids.indexOf(routeId);
 		return i >= 0 ? ids[i + 1] : undefined;
 	});
 
@@ -35,16 +40,16 @@ export function Outlet() @{
 	// Outlet does the same) — the outermost pending UI for the initial load.
 	const DefaultPending = router.options.defaultPendingComponent;
 	const RootSuspense =
-		parentRouteId === rootRouteId ? Suspense : SafeFragment;
+		routeId === rootRouteId ? Suspense : SafeFragment;
 	const pendingElement =
 		DefaultPending ? createElement(DefaultPending, {}) : null;
 
-	@if (globalNotFound) {
-		<RouteNotFound routeId={parentRouteId!} />
+	@if (notFound.global) {
+		<RouteNotFound routeId={routeId} error={notFound.error} />
 	} @else {
 		@if (childId) {
 			<RootSuspense fallback={pendingElement}>
-				<Match matchId={childId} />
+				<Match routeId={childId} />
 			</RootSuspense>
 		}
 	}

package/src/ScriptOnce.tsrx

@@ -1,17 +1,22 @@
-import { useEffect, useState } from 'octane';
+// ScriptOnce — port of react-router's ScriptOnce.tsx. The server emits the
+// script; upstream's client renders null because the script removes itself
+// (`document.currentScript.remove()`) before React hydrates. Octane hydration
+// claims the server's structure instead, so the hydration render adopts the
+// server `<script>` without comparing its content (the client never runs it, and
+// may not have it) and the post-hydration render drops it. A client-only mount
+// renders nothing, as upstream does.
 import { isServer } from '@tanstack/router-core/isServer';
 import { useRouter } from './context.ts';
+import { useHydrated } from './ClientOnly.tsrx';
 
 export function ScriptOnce(props: { children: string }) @{
 	const router = useRouter();
-	const [hydrating, setHydrating] = useState(true);
-	useEffect(() => {
-		setHydrating(false);
-	}, []);
+	const hydrated = useHydrated();
 
-	@if ((isServer ?? router.isServer) || hydrating) {
+	@if ((isServer ?? router.isServer) || !hydrated) {
 		<script
 			nonce={router.options.ssr?.nonce}
+			suppressHydrationWarning
 			dangerouslySetInnerHTML={{
 				__html: props.children,
 			}}

package/src/Scripts.tsrx

@@ -1,37 +1,22 @@
-import { createElement, useEffect, useId, useState } from 'octane';
-import { isServer } from '@tanstack/router-core/isServer';
+import { createElement, useId } from 'octane';
 import type { RouterManagedTag } from '@tanstack/router-core';
 import { getAssetKeys } from './assetKeys.ts';
-import { useRouter } from './context.ts';
 import { useScripts } from './scriptContentUtils.ts';
 
+// router-core 1.171.34 owns the hydration-script lifecycle: the server appends
+// the initial hydration tags (and the streaming boundary) through
+// `useScripts()` / `takeInitialHydrationScriptTags()`, and those tags remove
+// themselves (`document.currentScript.remove()`) as they run. By the time the
+// client hydrates, the DOM holds only the body scripts, which is exactly what
+// the client renders — so there is no client-only barrier to prepend (the former
+// `$tsr-stream-barrier` belonged to the removed buffered-script model and left a
+// client <script> the server never rendered).
 export function Scripts() @{
 	const owner = useId();
-	const router = useRouter();
-	const scripts = useScripts();
-	const [hydrating, setHydrating] = useState(true);
-	useEffect(() => {
-		setHydrating(false);
-	}, []);
-	const renderScripts: Array<RouterManagedTag> =
-		!(isServer ?? router.isServer) && hydrating
-			? [
-					{
-						tag: 'script',
-						attrs: {
-							nonce: router.options.ssr?.nonce,
-							className: '$tsr',
-							id: '$tsr-stream-barrier',
-							suppressHydrationWarning: true,
-						},
-						children: '',
-					},
-					...scripts,
-				]
-			: scripts;
-	const keys = getAssetKeys('body', owner, renderScripts);
+	const scripts: Array<RouterManagedTag> = useScripts();
+	const keys = getAssetKeys('body', owner, scripts);
 	<>
-		{renderScripts.map((script, index) => {
+		{scripts.map((script, index) => {
 			const { assetKey, managedKey } = keys[index]!;
 			return createElement('script', {
 				...script.attrs,