@octanejs/tanstack-router 0.2.8 → 0.2.9

package/README.md

@@ -135,26 +135,26 @@ package's `status.json`).
   synthetic events.
 - Router devtools are distributed separately and are not part of this binding.
 
-## Compiled code routes
+## Compiled route trees
 
-Use `@octanejs/tanstack-router/compiled` for a tree whose selected route, pending,
-error and not-found components are compiled Octane `@{ ... }` bodies. Its
-`CompiledRouterProvider`, `CompiledOutlet`, and `lazyCompiledRouteComponent`
-avoid retaining the descriptor renderer merely to select a route at runtime.
-TanStack still owns the matching, loading, navigation, history and render
-acknowledgements.
+Use `@octanejs/tanstack-router/compiled` for a tree whose selected route, shell,
+pending, error and not-found components are compiled Octane `@{ ... }` bodies.
+The entry exports `RouterProvider`, `Outlet`, and `lazyRouteComponent`; the
+existing `CompiledRouterProvider`, `CompiledOutlet`, and
+`lazyCompiledRouteComponent` names remain aliases. TanStack owns matching,
+loading, navigation, history and render acknowledgements.
 
 ```tsx
 import {
-  BaseRootRoute, BaseRoute, createRouter, createBrowserHistory,
-  CompiledRouterProvider, CompiledOutlet, lazyCompiledRouteComponent, useParams,
+  createRootRoute, createRoute, createRouter, createBrowserHistory,
+  RouterProvider, Outlet, lazyRouteComponent,
 } from '@octanejs/tanstack-router/compiled';
 
-const root = new BaseRootRoute({ component: Layout });
-const item = new BaseRoute({
+const root = createRootRoute({ component: Layout });
+const item = createRoute({
   getParentRoute: () => root,
   path: 'items/$id',
-  component: lazyCompiledRouteComponent(() => import('./Item')),
+  component: lazyRouteComponent(() => import('./Item')),
 });
 const router = createRouter({
   routeTree: root.addChildren([item]),
@@ -162,10 +162,10 @@ const router = createRouter({
 });
 
 function Layout() @{
-  <main><CompiledOutlet /></main>
+  <main><Outlet /></main>
 }
 function App() @{
-  <CompiledRouterProvider router={router} />
+  <RouterProvider router={router} />
 }
 ```
 
@@ -173,12 +173,32 @@ Import read/navigation hooks (`useMatch`, `useParams`, `useSearch`,
 `useLoaderData`, `useLoaderDeps`, `useRouteContext`, `useLocation`,
 `useMatches`, `useParentMatches`, `useChildMatches`, `useNavigate`,
 `useCanGoBack`, `useRouter`, and `useRouterState`) from the same `/compiled`
-entry. It owns a separate pair of non-callable contexts. Base route factories
-come directly from router-core: use the free hooks in the route components,
-rather than route-bound hooks or `Route.Link` from the normal Octane entry.
-
-The first compiled contract excludes `Wrap`, `InnerWrap`, and
-`shellComponent`; the provider reports a diagnostic if they are configured.
+entry. It owns separate non-callable contexts. Its `createRoute`,
+`createRootRoute`, `createRootRouteWithContext`, `getRouteApi`, `createFileRoute`,
+`createLazyRoute`, and `createLazyFileRoute` attach accessors to those contexts.
+Route-bound hooks and `Route.Link` work alongside the exported `Link`,
+`useLinkProps`, and `createLink`. Factories construct router-core base instances;
+they do not promise `instanceof Route` from the ordinary entry.
+
+The compiled entry also exports `Html`, `Head`, `Body`, `HeadContent`, `Scripts`,
+`Asset`, `useTags`, `getAssetKeys`, `ClientOnly`, and `useHydrated` for document
+shells. Root shells can read their root match and context. SSR and client builds
+must select the same entry for a tree. Start applications select this entry with
+`compiled: true` in their Start plugin options, including generated route and
+split-module imports.
+
+Compiled selection removes descriptor creation from route selection, bound
+links and document shells, but does not make the entire binding Strong or
+remove the generic renderer. Link retains synchronous `flushSync` so its
+transition cue is already visible in `onBeforeNavigate` callbacks. Both entries
+share a non-Strong script component that renders host descriptors: new inline and
+external scripts execute, and self-removing hydration data scripts leave no
+template row frames behind. Route scripts retain their managed nodes through
+hydration and are replaced with route ownership. The scroll-restoration
+script remains through adoption and is dropped afterward. Error propagation,
+scroll-script hydration compatibility, and lifecycle dependencies retain their
+existing contracts.
+
+`Wrap` and `InnerWrap` remain unsupported and produce an explicit diagnostic.
 For returned JSX, host strings, renderable wrappers or mixed route trees, retain
-`RouterProvider`, `Outlet` and `lazyRouteComponent` from the ordinary entry.
-SSR and client builds must select the same entry for a tree.
+the ordinary entry. Its public APIs and contexts remain available unchanged.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@octanejs/tanstack-router",
-  "version": "0.2.8",
+  "version": "0.2.9",
   "license": "MIT",
   "type": "module",
   "engines": {
@@ -65,7 +65,7 @@
     "@tanstack/react-router": "1.170.41",
     "@tsrx/react": "^0.4.5",
     "esbuild": "^0.28.1",
-    "octane": "0.13.6",
+    "octane": "0.13.7",
     "react": "19.2.7",
     "react-dom": "19.2.7",
     "vitest": "^4.1.10"

package/src/Asset.tsrx

@@ -1,137 +1,5 @@
-import { createElement, useLayoutEffect } from 'octane';
-import { isServer } from '@tanstack/router-core/isServer';
-import type { RouterManagedTag } from '@tanstack/router-core';
 import { useRouter } from './context.ts';
-import { useHydrated } from './ClientOnly.tsrx';
+import { createAsset } from './assetComponent.tsrx';
 
-export type AssetProps = RouterManagedTag & {
-	assetKey: string;
-	target: 'head' | 'body';
-};
-
-type ManagedAssetProps = AssetProps & { managedKey?: string };
-
-const MANAGED_KEY_ATTR = 'data-tsr-managed-key';
-
-// Elements currently owned by a mounted Asset. A managed key is a 32-bit
-// content hash, so a collision must not let a second Asset adopt, and later
-// remove, an element another Asset still owns.
-const claimedElements = new WeakSet<Element>();
-
-function attributeName(name: string) {
-	switch (name) {
-		case 'charSet':
-			return 'charset';
-		case 'className':
-			return 'class';
-		case 'crossOrigin':
-			return 'crossorigin';
-		case 'httpEquiv':
-			return 'http-equiv';
-		default:
-			return name;
-	}
-}
-
-function setAttributes(element: Element, attrs: RouterManagedTag['attrs']) {
-	if (!attrs) {
-		return;
-	}
-	for (const [name, value] of Object.entries(attrs)) {
-		if (
-			name === 'suppressHydrationWarning' ||
-			value === undefined ||
-			value === null ||
-			value === false
-		) {
-			continue;
-		}
-		element.setAttribute(attributeName(name), value === true ? '' : String(value));
-	}
-}
-
-function findManagedElement(parent: HTMLElement, key: string) {
-	for (const element of parent.querySelectorAll(`[${MANAGED_KEY_ATTR}]`)) {
-		if (element.getAttribute(MANAGED_KEY_ATTR) === key && !claimedElements.has(element)) {
-			return element;
-		}
-	}
-	return undefined;
-}
-
-function claim(element: Element) {
-	claimedElements.add(element);
-	return () => {
-		claimedElements.delete(element);
-		element.remove();
-	};
-}
-
-function mountAsset(props: ManagedAssetProps) {
-	const parent = props.target === 'head' ? document.head : document.body;
-	const managedKey = props.managedKey ?? props.assetKey;
-	const existing = findManagedElement(parent, managedKey);
-	if (existing) {
-		return claim(existing);
-	}
-
-	const element = document.createElement(props.tag);
-	element.setAttribute(MANAGED_KEY_ATTR, managedKey);
-	setAttributes(element, props.attrs);
-	if (typeof props.children === 'string') {
-		element.textContent = props.children;
-	}
-	parent.appendChild(element);
-	return claim(element);
-}
-
-export function Asset(props: AssetProps) @{
-	const router = useRouter();
-	const hydrated = useHydrated();
-	const managedKey = (props as ManagedAssetProps).managedKey ?? props.assetKey;
-
-	if (!(isServer ?? router.isServer)) {
-		// Compare attrs by value: a rebuilt tag list allocates new attrs objects on
-		// 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],
-		);
-	}
-
-	const visibleTag =
-		(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)}
-			</title>
-		}
-		@case 'meta': {
-			<meta {...props.attrs} data-tsr-managed-key={managedKey} />
-		}
-		@case 'link': {
-			<link {...props.attrs} data-tsr-managed-key={managedKey} />
-		}
-		@case 'style': {
-			{createElement('style', {
-				...props.attrs,
-				'data-tsr-managed-key': managedKey,
-				dangerouslySetInnerHTML: { __html: props.children ?? '' },
-			})}
-		}
-		@case 'script': {
-			<script
-				{...props.attrs}
-				data-tsr-managed-key={managedKey}
-				dangerouslySetInnerHTML={{ __html: props.children ?? '' }}
-			/>
-		}
-		@default: {
-			<></>
-		}
-	}
-}
+export const Asset = createAsset(useRouter);
+export type { AssetProps } from './assetComponent.tsrx';

package/src/ClientOnly.tsrx

@@ -1,3 +1,5 @@
+'use strong';
+
 // ClientOnly / useHydrated — port of react-router's ClientOnly.tsx. Renders
 // children only once the client has hydrated: `useHydrated` reads a constant
 // external store whose server snapshot is `false` and client snapshot is

package/src/Link.tsrx

@@ -1,55 +1,4 @@
-// A navigating anchor — a thin shell over `useLinkProps` (link.ts), which
-// carries ALL of react-router Link's behavior: href building (mask-aware),
-// external-URL + dangerous-protocol handling, active-state detection,
-// preloading (intent/viewport/render), and the navigate click handler with
-// replace/resetScroll/hashScrollIntoView/viewTransition/startTransition/
-// ignoreBlocker forwarded. Children may be a render prop —
-// `{({ isActive, isTransitioning }) => …}` — and `createLink` renders a custom
-// component via the internal `_asChild` prop. Ref is a prop (octane's model —
-// no forwardRef); `disabled` renders without an href + role="link" (upstream
-// drops the anchor's disabled attribute; the aria props carry the state).
-import { isChildrenBlock } from 'octane';
 import { useLinkProps } from './link.ts';
-import type { AnyRouter, RegisteredRouter } from '@tanstack/router-core';
-import type { LinkComponentProps, OctaneAnchorProps, UseLinkPropsOptions } from './linkTypes.ts';
+import { createLinkComponent } from './linkComponent.tsrx';
 
-// Keep the generic implementation signature visible to `.tsrx` consumers so
-// route-aware `to`/`params`/`search` inference and native anchor event types are
-// available before declaration emit.
-export function Link<
-	TRouter extends AnyRouter = RegisteredRouter,
-	TFrom extends string = string,
-	TTo extends string | undefined = undefined,
-	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 linkProps = useLinkProps(
-		rest as UseLinkPropsOptions<TRouter, TFrom, TTo, TMaskFrom, TMaskTo>,
-	) as OctaneAnchorProps & {
-		disabled?: boolean;
-		'data-status'?: string;
-		'data-transitioning'?: string;
-	};
-	const { disabled: _disabled, ...aProps } = linkProps;
-
-	const resolvedChildren =
-		typeof children === 'function' && !isChildrenBlock(children)
-			? children({
-					isActive: linkProps['data-status'] === 'active',
-					isTransitioning: linkProps['data-transitioning'] === 'transitioning',
-				})
-			: children;
-
-	@if (AsChild) {
-		<AsChild {...linkProps}>{resolvedChildren}</AsChild>
-	} @else {
-		<a {...(aProps as Record<string, any>)}>{resolvedChildren}</a>
-	}
-}
+export const Link = createLinkComponent(useLinkProps);

package/src/Matches.tsrx

@@ -32,16 +32,16 @@ export function Matches() @{
 	useLayoutEffect(() => {
 		if (router.options.scrollRestoration) setupScrollRestoration(router);
 	}, [router]);
-	useTransitioner(router);
+	const expectedMatches = useTransitioner(router);
 
 	<InnerWrap>
 		<Suspense fallback={pendingElement}>
-			<MatchesInner />
+			<MatchesInner expectedMatches={expectedMatches} />
 		</Suspense>
 	</InnerWrap>
 }
 
-function MatchesInner() @{
+function MatchesInner(props: { expectedMatches: unknown }) @{
 	const router = useRouter();
 	// 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
@@ -49,7 +49,9 @@ function MatchesInner() @{
 	// (`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 matches = useStore(router.stores.matches, (m: any) =>
+		acknowledgement[0] === props.expectedMatches ? (props.expectedMatches ?? m) : m,
+	) as any;
 	const rootMatch = matches[0];
 	const routeId = rootMatch?.routeId as string | undefined;
 	const CatchWrap = router.options.disableGlobalCatchBoundary ? SafeFragment : CatchBoundary;

package/src/Scripts.tsrx

@@ -1,6 +1,4 @@
-import { createElement, useId } from 'octane';
-import type { RouterManagedTag } from '@tanstack/router-core';
-import { getAssetKeys } from './assetKeys.ts';
+import { createScripts } from './scriptComponent.tsrx';
 import { useScripts } from './scriptContentUtils.ts';
 
 // router-core 1.171.34 owns the hydration-script lifecycle: the server appends
@@ -11,19 +9,4 @@ import { useScripts } from './scriptContentUtils.ts';
 // 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 scripts: Array<RouterManagedTag> = 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 ?? '' },
-			});
-		})}
-	</>
-}
+export const Scripts = createScripts(useScripts);

package/src/Transitioner.tsrx

@@ -31,7 +31,7 @@ export function settleOwner(owner: Array<any>, rendered: boolean) {
 
 export function useTransitioner(routerInstance: AnyRouter) {
 	const router = routerInstance as any;
-	const [, forceRender] = useState<object>();
+	const [expectedMatches, setExpectedMatches] = useState<unknown>();
 
 	const acknowledgement: Array<any> = (router._rendered ??= []);
 
@@ -40,9 +40,9 @@ export function useTransitioner(routerInstance: AnyRouter) {
 			// 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({});
+			// Publish the matches this transaction needs. MatchesInner consumes this
+			// snapshot and acknowledges it only after that exact tree commits.
+			setExpectedMatches(expected);
 			startTransition(fn);
 		});
 
@@ -93,4 +93,5 @@ export function useTransitioner(routerInstance: AnyRouter) {
 		}
 		return unsub;
 	}, [router, router.history]);
+	return expectedMatches;
 }

package/src/assetComponent.tsrx

@@ -0,0 +1,146 @@
+'use strong';
+
+import { useLayoutEffect, useMemo, trustHTML } from 'octane';
+import { isServer } from '@tanstack/router-core/isServer';
+import type { RouterManagedTag } from '@tanstack/router-core';
+import type { useRouter as UseRouter } from './context.ts';
+import { useHydrated } from './ClientOnly.tsrx';
+
+export type AssetProps = RouterManagedTag & {
+	assetKey: string;
+	target: 'head' | 'body';
+};
+
+type ManagedAssetProps = AssetProps & { managedKey?: string };
+
+const MANAGED_KEY_ATTR = 'data-tsr-managed-key';
+
+// Elements currently owned by a mounted Asset. A managed key is a 32-bit
+// content hash, so a collision must not let a second Asset adopt, and later
+// remove, an element another Asset still owns.
+const claimedElements = new WeakSet<Element>();
+
+function attributeName(name: string) {
+	switch (name) {
+		case 'charSet':
+			return 'charset';
+		case 'className':
+			return 'class';
+		case 'crossOrigin':
+			return 'crossorigin';
+		case 'httpEquiv':
+			return 'http-equiv';
+		default:
+			return name;
+	}
+}
+
+function setAttributes(element: Element, attrs: RouterManagedTag['attrs']) {
+	if (!attrs) {
+		return;
+	}
+	for (const [name, value] of Object.entries(attrs)) {
+		if (
+			name === 'suppressHydrationWarning' ||
+			value === undefined ||
+			value === null ||
+			value === false
+		) {
+			continue;
+		}
+		element.setAttribute(attributeName(name), value === true ? '' : String(value));
+	}
+}
+
+function findManagedElement(parent: HTMLElement, key: string) {
+	for (const element of parent.querySelectorAll(`[${MANAGED_KEY_ATTR}]`)) {
+		if (element.getAttribute(MANAGED_KEY_ATTR) === key && !claimedElements.has(element)) {
+			return element;
+		}
+	}
+	return undefined;
+}
+
+function claim(element: Element) {
+	claimedElements.add(element);
+	return () => {
+		claimedElements.delete(element);
+		element.remove();
+	};
+}
+
+function mountAsset(props: ManagedAssetProps) {
+	const parent = props.target === 'head' ? document.head : document.body;
+	const managedKey = props.managedKey ?? props.assetKey;
+	const existing = findManagedElement(parent, managedKey);
+	if (existing) {
+		return claim(existing);
+	}
+
+	const element = document.createElement(props.tag);
+	element.setAttribute(MANAGED_KEY_ATTR, managedKey);
+	setAttributes(element, props.attrs);
+	if (typeof props.children === 'string') {
+		element.textContent = props.children;
+	}
+	parent.appendChild(element);
+	return claim(element);
+}
+
+export function createAsset(useRouter: typeof UseRouter) {
+	function Asset(props: AssetProps) @{
+		const router = useRouter();
+		const hydrated = useHydrated();
+		const managedKey = (props as ManagedAssetProps).managedKey ?? props.assetKey;
+
+		if (!(isServer ?? router.isServer)) {
+			// Compare attrs by value: a rebuilt tag list allocates new attrs objects on
+			// every navigation, and an identity dependency would remove and re-add
+			// unchanged assets such as the stylesheet.
+			const attrsKey = JSON.stringify(props.attrs ?? null);
+			const asset = useMemo(
+				() => props,
+				[props.assetKey, managedKey, props.tag, attrsKey, props.children, props.target],
+			);
+			useLayoutEffect(() => mountAsset(asset));
+		}
+
+		const visibleTag =
+			(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)}
+				</title>
+			}
+			@case 'meta': {
+				<meta {...props.attrs} data-tsr-managed-key={managedKey} />
+			}
+			@case 'link': {
+				<link {...props.attrs} data-tsr-managed-key={managedKey} />
+			}
+			@case 'style': {
+				<style
+					{...props.attrs}
+					data-tsr-managed-key={managedKey}
+					dangerouslySetInnerHTML={trustHTML(props.children ?? '')}
+				/>
+			}
+			@case 'script': {
+				<script
+					{...props.attrs}
+					data-tsr-managed-key={managedKey}
+					dangerouslySetInnerHTML={trustHTML(props.children ?? '')}
+				/>
+			}
+			@default: {
+				<></>
+			}
+		}
+	}
+
+	return Asset;
+}

package/src/compiled/Document.tsrx

@@ -0,0 +1,101 @@
+'use strong';
+
+import { useEffect, useId, HYDRATION_RANGE_BOUNDARY, createPortal, useState } from 'octane';
+import { DEV_STYLES_ATTR } from '@tanstack/router-core';
+import type { AssetCrossOriginConfig } from '@tanstack/router-core';
+import { createAsset } from '../assetComponent.tsrx';
+import { createUseTags } from '../headContentBinding';
+import { createUseScripts } from '../scriptContentBinding';
+import { createScripts } from '../scriptComponent.tsrx';
+import { getAssetKeys } from '../assetKeys';
+import { useHydrated } from '../ClientOnly.tsrx';
+import { useRouter } from './bindings';
+
+import { isServer } from '@tanstack/router-core/isServer';
+
+import type { HtmlProps } from '../Html';
+import type { HeadProps } from '../Head';
+import type { BodyProps } from '../Body';
+
+// This boundary returns the authored children directly, as the ordinary Body
+// owner does. Adding a template frame here changes the SSR range it claims.
+function HydrationRangeOwner(props: Pick<BodyProps, 'children'>) {
+	return props.children;
+}
+
+(
+	HydrationRangeOwner as typeof HydrationRangeOwner & {
+		[HYDRATION_RANGE_BOUNDARY]: 'owner';
+	}
+)[HYDRATION_RANGE_BOUNDARY] = 'owner';
+
+// Preserve the ordinary document and hydration-range ownership. Start owns
+// the outer passthrough boundary; this entry reads the compiled router context.
+export function Html(props: HtmlProps) @{
+	const router = useRouter();
+	const { children, ...attrs } = props;
+	@if (isServer ?? router.isServer) {
+		<html {...attrs}>{children}</html>
+	} @else {
+		<>{children}</>
+	}
+}
+
+export function Head(props: HeadProps) @{
+	const router = useRouter();
+	const { children, ...attrs } = props;
+	@if (isServer ?? router.isServer) {
+		<head {...attrs}>{children}</head>
+	} @else {
+		// Capture the portal target once, before client adoption. This is a
+		// browser handle, not state copied from a post-hydration effect.
+		const [target] = useState(() => (typeof document === 'undefined' ? null : document.head));
+		@if (target) {
+			<>
+				{createPortal(() => @{
+					<>{children}</>
+				}, target)}
+			</>
+		}
+	}
+}
+
+export function Body(props: BodyProps) @{
+	const router = useRouter();
+	const { children, ...attrs } = props;
+	@if (isServer ?? router.isServer) {
+		<body {...attrs}>
+			<div id="__app">
+				<HydrationRangeOwner children={children} />
+			</div>
+		</body>
+	} @else {
+		<HydrationRangeOwner children={children} />
+	}
+}
+export const Asset = createAsset(useRouter);
+export const useTags = createUseTags(useRouter);
+const useScripts = createUseScripts(useRouter);
+export const Scripts = createScripts(useScripts);
+
+export function HeadContent(props: { assetCrossOrigin?: AssetCrossOriginConfig }) @{
+	const owner = useId();
+	const tags = useTags(props.assetCrossOrigin);
+	const hydrated = useHydrated();
+	useEffect(() => {
+		if (process.env.NODE_ENV !== 'production' && hydrated) {
+			document.querySelectorAll(`link[${DEV_STYLES_ATTR}]`).forEach((element) => element.remove());
+		}
+	});
+	const filtered =
+		process.env.NODE_ENV !== 'production' && hydrated
+			? tags.filter((tag) => tag.tag !== 'link' || tag.attrs?.[DEV_STYLES_ATTR] !== true)
+			: tags;
+	const keys = getAssetKeys('head', owner, filtered);
+	const assets = filtered.map((tag, index) => ({ ...tag, ...keys[index]! }));
+	<>
+		@for (const asset of assets; key asset.assetKey) {
+			<Asset {...asset} target="head" />
+		}
+	</>
+}

package/src/compiled/Link.tsrx

@@ -0,0 +1,18 @@
+'use strong';
+
+import { createUseLinkProps } from '../linkBinding';
+import { createLinkComponent } from '../linkComponent.tsrx';
+import { useRouter } from './bindings';
+import type { createLink as StandardCreateLink } from '../link';
+
+// The shared hook intentionally retains flushSync's synchronous navigation cue.
+// The compiled entry does not relax its observable event timing.
+export const useLinkProps = createUseLinkProps(useRouter);
+export const Link = createLinkComponent(useLinkProps);
+
+export const createLink: typeof StandardCreateLink = (Component: any) => {
+	function CreatedLink(props: any) @{
+		<Link {...props} _asChild={Component} />
+	}
+	return CreatedLink as any;
+};