@octanejs/tanstack-router 0.2.7 → 0.2.9

package/README.md

@@ -134,3 +134,71 @@ package's `status.json`).
 - **Native DOM events** — link callbacks receive browser events rather than React
   synthetic events.
 - Router devtools are distributed separately and are not part of this binding.
+
+## Compiled route trees
+
+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 {
+  createRootRoute, createRoute, createRouter, createBrowserHistory,
+  RouterProvider, Outlet, lazyRouteComponent,
+} from '@octanejs/tanstack-router/compiled';
+
+const root = createRootRoute({ component: Layout });
+const item = createRoute({
+  getParentRoute: () => root,
+  path: 'items/$id',
+  component: lazyRouteComponent(() => import('./Item')),
+});
+const router = createRouter({
+  routeTree: root.addChildren([item]),
+  history: createBrowserHistory(),
+});
+
+function Layout() @{
+  <main><Outlet /></main>
+}
+function App() @{
+  <RouterProvider router={router} />
+}
+```
+
+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 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
+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.7",
+  "version": "0.2.9",
   "license": "MIT",
   "type": "module",
   "engines": {
@@ -37,6 +37,7 @@
   "exports": {
     ".": "./src/index.ts",
     "./history": "./src/history.ts",
+    "./compiled": "./src/compiled.ts",
     "./ssr/server": {
       "types": "./src/ssr/server.ts",
       "default": "./src/ssr/server.ts"
@@ -64,7 +65,7 @@
     "@tanstack/react-router": "1.170.41",
     "@tsrx/react": "^0.4.5",
     "esbuild": "^0.28.1",
-    "octane": "0.13.0",
+    "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();
+	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

@@ -19,7 +19,7 @@
 //      restoration, devtools) fire.
 import { useLayoutEffect, useState, startTransition } from 'octane';
 import { getLocationChangeInfo, trimPathRight } from '@tanstack/router-core';
-import { useRouter } from './context.ts';
+import type { AnyRouter } from '@tanstack/router-core';
 
 // Resolve the pending render acknowledgement with whether the expected matches
 // rendered, then clear the slot. `owner` is `router._rendered`: `[expected, resolve]`.
@@ -29,9 +29,9 @@ export function settleOwner(owner: Array<any>, rendered: boolean) {
 	settle?.(rendered);
 }
 
-export function useTransitioner() {
-	const router = useRouter() as any;
-	const [, forceRender] = useState<object>();
+export function useTransitioner(routerInstance: AnyRouter) {
+	const router = routerInstance as any;
+	const [expectedMatches, setExpectedMatches] = useState<unknown>();
 
 	const acknowledgement: Array<any> = (router._rendered ??= []);
 
@@ -40,9 +40,9 @@ export function useTransitioner() {
 			// 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() {
 		}
 		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;
+};