@octanejs/tanstack-router 0.2.8 → 0.2.9

package/src/linkBinding.ts

@@ -0,0 +1,391 @@
+// Shared useLinkProps behavior — port of react-router's link.tsx
+// (client path; SSR link rendering arrives with the SSR entries). All of Link's
+// behavior lives here so both `<Link>` and custom `createLink` components share
+// it: href building (mask-aware via publicHref), external-URL detection with
+// dangerous-protocol blocking, active-state detection (exactPathTest /
+// trailing-slash-aware fuzzy prefix + deepEqual partial search match),
+// preloading ('intent' with delay + touchstart/focus, 'viewport' via
+// IntersectionObserver, 'render' once on mount), the click handler (navigate
+// with replace/resetScroll/hashScrollIntoView/viewTransition/startTransition/
+// ignoreBlocker forwarded), and data-status/data-transitioning reflection.
+import { useRef, useState, useEffect, useCallback, flushSync } from 'octane';
+import {
+	deepEqual,
+	exactPathTest,
+	functionalUpdate,
+	isDangerousProtocol,
+	preloadWarning,
+	removeTrailingSlash,
+} from '@tanstack/router-core';
+import type { useRouter as UseRouter } from './context';
+import { useStore } from './useStore';
+import { splitSlot, subSlot } from './internal';
+import type { AnyRouter, RegisteredRouter } from '@tanstack/router-core';
+import type { OctaneAnchorProps, UseLinkPropsOptions } from './linkTypes';
+
+const STATIC_EMPTY_OBJECT = {};
+const STATIC_ACTIVE_OBJECT = { class: 'active' };
+const STATIC_DISABLED_PROPS = { role: 'link', 'aria-disabled': true };
+const STATIC_ACTIVE_PROPS = { 'data-status': 'active', 'aria-current': 'page' };
+const STATIC_TRANSITIONING_PROPS = { 'data-transitioning': 'transitioning' };
+
+const timeoutMap = new WeakMap<EventTarget, ReturnType<typeof setTimeout>>();
+
+const composeHandlers = (handlers: Array<undefined | ((e: any) => void)>) => (e: Event) => {
+	for (const handler of handlers) {
+		if (!handler) continue;
+		if (e.defaultPrevented) return;
+		handler(e);
+	}
+};
+
+function getHrefOption(
+	publicHref: string,
+	external: boolean,
+	history: any,
+	disabled: boolean | undefined,
+): { href: string; external: boolean } | undefined {
+	if (disabled) return undefined;
+	// Full URL means a rewrite changed the origin — treat as external-like.
+	if (external) return { href: publicHref, external: true };
+	return { href: history.createHref(publicHref) || '/', external: false };
+}
+
+function isSafeInternal(to: unknown): boolean {
+	if (typeof to !== 'string') return false;
+	const zero = to.charCodeAt(0);
+	if (zero === 47) return to.charCodeAt(1) !== 47; // '/' but not '//'
+	return zero === 46; // '.', '..', './', '../'
+}
+
+function isCtrlEvent(e: MouseEvent): boolean {
+	return !!(e.metaKey || e.altKey || e.ctrlKey || e.shiftKey);
+}
+
+// Merge base/active/inactive styles. Objects merge like upstream; if any is a
+// string the parts join with ';' (octane host styles accept both forms).
+function mergeStyles(base: any, active: any, inactive: any): any {
+	if (!base && !active && !inactive) return undefined;
+	const parts = [base, active, inactive].filter(Boolean);
+	if (parts.length === 1) return parts[0];
+	if (parts.some((p) => typeof p === 'string')) {
+		return parts
+			.map((p) =>
+				typeof p === 'string'
+					? p.replace(/;\s*$/, '')
+					: Object.entries(p)
+							.map(([k, v]) => `${k.replace(/[A-Z]/g, (c) => '-' + c.toLowerCase())}:${v}`)
+							.join(';'),
+			)
+			.join(';');
+	}
+	return Object.assign({}, ...parts);
+}
+
+export function createUseLinkProps(useRouter: typeof UseRouter) {
+	function useLinkProps<
+		TRouter extends AnyRouter = RegisteredRouter,
+		const TFrom extends string = string,
+		const TTo extends string | undefined = undefined,
+		const TMaskFrom extends string = TFrom,
+		const TMaskTo extends string = '',
+	>(options: UseLinkPropsOptions<TRouter, TFrom, TTo, TMaskFrom, TMaskTo>): OctaneAnchorProps;
+	function useLinkProps(...args: any[]): Record<string, any> {
+		const [user, slot] = splitSlot(args);
+		const options = (user[0] ?? {}) as Record<string, any>;
+		const router = useRouter();
+
+		const {
+			// custom props
+			activeProps,
+			inactiveProps,
+			activeOptions,
+			to,
+			preload: userPreload,
+			preloadDelay: userPreloadDelay,
+			preloadIntentProximity: _preloadIntentProximity,
+			hashScrollIntoView,
+			replace,
+			startTransition,
+			resetScroll,
+			viewTransition,
+			// element props
+			children: _children,
+			target,
+			disabled,
+			style,
+			class: klass,
+			className,
+			onClick,
+			onBlur,
+			onFocus,
+			onMouseEnter,
+			onMouseLeave,
+			onTouchStart,
+			ignoreBlocker,
+			ref: userRef,
+			// consumed by buildLocation — not spread onto the element
+			params: _params,
+			search: _search,
+			hash: _hash,
+			state: _state,
+			mask: _mask,
+			reloadDocument: _reloadDocument,
+			unsafeRelative: _unsafeRelative,
+			from: _from,
+			_fromLocation,
+			...propsSafeToSpread
+		} = options;
+
+		// Subscribe to the location (by href) — active state re-derives per commit.
+		const currentLocation: any = useStore(
+			router.stores.location,
+			(l: any) => l,
+			(prev: any, next: any) => prev.href === next.href,
+			subSlot(slot, 'lp:loc'),
+		);
+
+		const next = router.buildLocation({ _fromLocation: currentLocation, ...options } as any);
+
+		const hrefOptionPublicHref = next.maskedLocation
+			? next.maskedLocation.publicHref
+			: next.publicHref;
+		const hrefOptionExternal = next.maskedLocation ? next.maskedLocation.external : next.external;
+		const hrefOption = getHrefOption(
+			hrefOptionPublicHref,
+			hrefOptionExternal,
+			router.history,
+			disabled,
+		);
+
+		// External URL detection + dangerous-protocol blocking (javascript:, data:…).
+		const externalLink = (() => {
+			if (hrefOption?.external) {
+				if (isDangerousProtocol(hrefOption.href, router.protocolAllowlist)) return undefined;
+				return hrefOption.href;
+			}
+			if (isSafeInternal(to)) return undefined;
+			if (typeof to !== 'string' || to.indexOf(':') === -1) return undefined;
+			try {
+				new URL(to);
+				if (isDangerousProtocol(to, router.protocolAllowlist)) return undefined;
+				return to;
+			} catch {
+				/* not an absolute URL */
+			}
+			return undefined;
+		})();
+
+		const isActive = (() => {
+			if (externalLink) return false;
+			if (activeOptions?.exact) {
+				if (!exactPathTest(currentLocation.pathname, next.pathname, router.basepath)) {
+					return false;
+				}
+			} else {
+				const currentPathSplit = removeTrailingSlash(currentLocation.pathname, router.basepath);
+				const nextPathSplit = removeTrailingSlash(next.pathname, router.basepath);
+				const pathIsFuzzyEqual =
+					currentPathSplit.startsWith(nextPathSplit) &&
+					(currentPathSplit.length === nextPathSplit.length ||
+						currentPathSplit[nextPathSplit.length] === '/');
+				if (!pathIsFuzzyEqual) return false;
+			}
+			if (activeOptions?.includeSearch ?? true) {
+				// 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;
+			return true;
+		})();
+
+		const resolvedActiveProps: Record<string, any> = isActive
+			? (functionalUpdate(activeProps, {}) ?? STATIC_ACTIVE_OBJECT)
+			: STATIC_EMPTY_OBJECT;
+		const resolvedInactiveProps: Record<string, any> = isActive
+			? STATIC_EMPTY_OBJECT
+			: (functionalUpdate(inactiveProps, {}) ?? STATIC_EMPTY_OBJECT);
+
+		// Class composes clsx-style (octane normalizeClass folds arrays + falsy).
+		const resolvedClass = [
+			klass ?? className,
+			resolvedActiveProps.class ?? resolvedActiveProps.className,
+			resolvedInactiveProps.class ?? resolvedInactiveProps.className,
+		].filter(Boolean);
+		const resolvedStyle = mergeStyles(
+			style,
+			resolvedActiveProps.style,
+			resolvedInactiveProps.style,
+		);
+
+		const [isTransitioning, setIsTransitioning] = useState(false, subSlot(slot, 'lp:t'));
+		const hasRenderFetched = useRef(false, subSlot(slot, 'lp:rf'));
+		const elRef = useRef<Element | null>(null, subSlot(slot, 'lp:el'));
+
+		const preload =
+			options.reloadDocument || externalLink
+				? false
+				: (userPreload ?? router.options.defaultPreload);
+		const preloadDelay = userPreloadDelay ?? router.options.defaultPreloadDelay ?? 0;
+
+		const doPreload = useCallback(
+			() => {
+				router.preloadRoute({ ...options, _builtLocation: next } as any).catch((err: unknown) => {
+					console.warn(err);
+					console.warn(preloadWarning);
+				});
+			},
+			[router, next.href],
+			subSlot(slot, 'lp:dp'),
+		);
+
+		// preload="viewport": preload when the anchor scrolls into view (100px margin).
+		useEffect(
+			() => {
+				if (disabled || preload !== 'viewport') return;
+				const el = elRef.current;
+				if (!el || typeof IntersectionObserver === 'undefined') return;
+				const io = new IntersectionObserver(
+					(entries) => {
+						for (const entry of entries) {
+							if (entry.isIntersecting) doPreload();
+						}
+					},
+					{ rootMargin: '100px' },
+				);
+				io.observe(el);
+				return () => io.disconnect();
+			},
+			[disabled, preload, doPreload],
+			subSlot(slot, 'lp:io'),
+		);
+
+		// preload="render": preload once on mount.
+		useEffect(
+			() => {
+				if (hasRenderFetched.current) return;
+				if (!disabled && preload === 'render') {
+					doPreload();
+					hasRenderFetched.current = true;
+				}
+			},
+			[disabled, doPreload, preload],
+			subSlot(slot, 'lp:pr'),
+		);
+
+		const handleClick = (e: MouseEvent) => {
+			const elementTarget = (e.currentTarget as Element | null)?.getAttribute?.('target');
+			const effectiveTarget = target !== undefined ? target : elementTarget;
+			if (
+				!disabled &&
+				!isCtrlEvent(e) &&
+				!e.defaultPrevented &&
+				(!effectiveTarget || effectiveTarget === '_self') &&
+				e.button === 0
+			) {
+				e.preventDefault();
+
+				flushSync(() => {
+					setIsTransitioning(true);
+				});
+				const unsub = router.subscribe('onResolved', () => {
+					unsub();
+					setIsTransitioning(false);
+				});
+
+				router.navigate({
+					...options,
+					replace,
+					resetScroll,
+					hashScrollIntoView,
+					startTransition,
+					viewTransition,
+					ignoreBlocker,
+				});
+			}
+		};
+
+		const captureRef = (el: Element | null) => {
+			elRef.current = el;
+		};
+		const composedRef = userRef ? [captureRef, userRef] : captureRef;
+
+		if (externalLink) {
+			return {
+				...propsSafeToSpread,
+				ref: composedRef,
+				href: externalLink,
+				...(target !== undefined && { target }),
+				...(disabled !== undefined && { disabled }),
+				...(resolvedStyle !== undefined && { style: resolvedStyle }),
+				...(resolvedClass.length > 0 && { class: resolvedClass }),
+				...(onClick && { onClick }),
+				...(onBlur && { onBlur }),
+				...(onFocus && { onFocus }),
+				...(onMouseEnter && { onMouseEnter }),
+				...(onMouseLeave && { onMouseLeave }),
+				...(onTouchStart && { onTouchStart }),
+			};
+		}
+
+		const enqueueIntentPreload = (e: MouseEvent | FocusEvent) => {
+			if (disabled || preload !== 'intent') return;
+			if (!preloadDelay) {
+				doPreload();
+				return;
+			}
+			const eventTarget = e.currentTarget as EventTarget;
+			if (timeoutMap.has(eventTarget)) return;
+			const id = setTimeout(() => {
+				timeoutMap.delete(eventTarget);
+				doPreload();
+			}, preloadDelay);
+			timeoutMap.set(eventTarget, id);
+		};
+
+		const handleTouchStart = () => {
+			if (disabled || preload !== 'intent') return;
+			doPreload();
+		};
+
+		const handleLeave = (e: MouseEvent | FocusEvent) => {
+			if (disabled || !preload || !preloadDelay) return;
+			const eventTarget = e.currentTarget as EventTarget;
+			const id = timeoutMap.get(eventTarget);
+			if (id) {
+				clearTimeout(id);
+				timeoutMap.delete(eventTarget);
+			}
+		};
+
+		return {
+			...propsSafeToSpread,
+			...resolvedActiveProps,
+			...resolvedInactiveProps,
+			href: hrefOption?.href,
+			ref: composedRef,
+			onClick: composeHandlers([onClick, handleClick]),
+			onBlur: composeHandlers([onBlur, handleLeave]),
+			onFocus: composeHandlers([onFocus, enqueueIntentPreload]),
+			onMouseEnter: composeHandlers([onMouseEnter, enqueueIntentPreload]),
+			onMouseLeave: composeHandlers([onMouseLeave, handleLeave]),
+			onTouchStart: composeHandlers([onTouchStart, handleTouchStart]),
+			disabled: !!disabled,
+			...(target !== undefined && { target }),
+			...(resolvedStyle !== undefined && { style: resolvedStyle }),
+			...(resolvedClass.length > 0 && { class: resolvedClass }),
+			...(disabled && STATIC_DISABLED_PROPS),
+			...(isActive && STATIC_ACTIVE_PROPS),
+			...(isTransitioning && STATIC_TRANSITIONING_PROPS),
+		};
+	}
+
+	return useLinkProps;
+}

package/src/linkComponent.tsrx

@@ -0,0 +1,61 @@
+'use strong';
+
+// 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 type { useLinkProps as UseLinkProps } from './link.ts';
+import type { AnyRouter, RegisteredRouter } from '@tanstack/router-core';
+import type { LinkComponentProps, OctaneAnchorProps, UseLinkPropsOptions } from './linkTypes.ts';
+
+// 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 createLinkComponent(useLinkProps: typeof UseLinkProps) {
+	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>
+		}
+	}
+
+	return Link;
+}

package/src/route.ts

@@ -36,6 +36,7 @@ import type {
 	UseNavigateResult,
 } from '@tanstack/router-core';
 import { createElement } from 'octane';
+import { createRouteHookBindings } from './routeHookBindings';
 import type { ComponentBody } from 'octane';
 import {
 	useMatch,
@@ -107,59 +108,13 @@ declare module '@tanstack/router-core' {
 // Attach the hook accessors to a route-shaped instance (Route / RootRoute /
 // RouteApi). `strictLoaderHooks: false` is RouteApi's mode — its loader hooks
 // pass `strict: false` upstream (the api may be read from ancestor layouts).
-function attachRouteHooks(self: any, strictLoaderHooks: boolean): void {
-	self.useMatch = (...args: any[]) => {
-		const [user, slot] = splitSlot(args);
-		const opts = user[0] ?? {};
-		return useMatch(
-			{ select: opts.select, structuralSharing: opts.structuralSharing, from: self.id },
-			subSlot(slot, 'r:m'),
-		);
-	};
-	self.useRouteContext = (...args: any[]) => {
-		const [user, slot] = splitSlot(args);
-		const opts = user[0] ?? {};
-		return useRouteContext({ ...opts, from: self.id }, subSlot(slot, 'r:ctx'));
-	};
-	self.useSearch = (...args: any[]) => {
-		const [user, slot] = splitSlot(args);
-		const opts = user[0] ?? {};
-		return useSearch(
-			{ select: opts.select, structuralSharing: opts.structuralSharing, from: self.id },
-			subSlot(slot, 'r:s'),
-		);
-	};
-	self.useParams = (...args: any[]) => {
-		const [user, slot] = splitSlot(args);
-		const opts = user[0] ?? {};
-		return useParams(
-			{ select: opts.select, structuralSharing: opts.structuralSharing, from: self.id },
-			subSlot(slot, 'r:p'),
-		);
-	};
-	self.useLoaderDeps = (...args: any[]) => {
-		const [user, slot] = splitSlot(args);
-		const opts = user[0] ?? {};
-		return useLoaderDeps(
-			strictLoaderHooks ? { ...opts, from: self.id } : { ...opts, from: self.id, strict: false },
-			subSlot(slot, 'r:d'),
-		);
-	};
-	self.useLoaderData = (...args: any[]) => {
-		const [user, slot] = splitSlot(args);
-		const opts = user[0] ?? {};
-		return useLoaderData(
-			strictLoaderHooks ? { ...opts, from: self.id } : { ...opts, from: self.id, strict: false },
-			subSlot(slot, 'r:l'),
-		);
-	};
-}
+const { attachRouteHooks, attachRouteNavigation: attachNavigation } = createRouteHookBindings(
+	{ useMatch, useParams, useSearch, useLoaderData, useLoaderDeps, useRouteContext, useNavigate },
+	useRouter,
+);
 
 function attachRouteNavigation(self: any): void {
-	self.useNavigate = (...args: any[]) => {
-		const [, slot] = splitSlot(args);
-		return useNavigate({ from: self.fullPath }, subSlot(slot, 'r:n'));
-	};
+	attachNavigation(self);
 	self.Link = (props: Record<string, unknown>) =>
 		createElement(Link as any, { from: self.fullPath, ...props });
 }

package/src/routeHookBindings.ts

@@ -0,0 +1,146 @@
+'use strong';
+
+import type * as Hooks from './hooks';
+import type { useRouter as UseRouter } from './context';
+import { splitSlot, subSlot } from './internal';
+
+type RouteHooks = Pick<
+	typeof Hooks,
+	| 'useMatch'
+	| 'useParams'
+	| 'useSearch'
+	| 'useLoaderData'
+	| 'useLoaderDeps'
+	| 'useRouteContext'
+	| 'useNavigate'
+>;
+
+// Each entry supplies its context once. Routes retain the same hook slots and
+// inherited router-core combinators without creating ordinary-renderer routes.
+export function createRouteHookBindings(hooks: RouteHooks, useRouter: typeof UseRouter) {
+	const {
+		useMatch,
+		useParams,
+		useSearch,
+		useLoaderData,
+		useLoaderDeps,
+		useRouteContext,
+		useNavigate,
+	} = hooks;
+	function attachRouteHooks(self: any, strictLoaderHooks: boolean): void {
+		self.useMatch = (...args: any[]) => {
+			const [user, slot] = splitSlot(args);
+			const opts = user[0] ?? {};
+			return useMatch(
+				{ select: opts.select, structuralSharing: opts.structuralSharing, from: self.id },
+				subSlot(slot, 'r:m'),
+			);
+		};
+		self.useRouteContext = (...args: any[]) => {
+			const [user, slot] = splitSlot(args);
+			const opts = user[0] ?? {};
+			return useRouteContext({ ...opts, from: self.id }, subSlot(slot, 'r:ctx'));
+		};
+		self.useSearch = (...args: any[]) => {
+			const [user, slot] = splitSlot(args);
+			const opts = user[0] ?? {};
+			return useSearch(
+				{ select: opts.select, structuralSharing: opts.structuralSharing, from: self.id },
+				subSlot(slot, 'r:s'),
+			);
+		};
+		self.useParams = (...args: any[]) => {
+			const [user, slot] = splitSlot(args);
+			const opts = user[0] ?? {};
+			return useParams(
+				{ select: opts.select, structuralSharing: opts.structuralSharing, from: self.id },
+				subSlot(slot, 'r:p'),
+			);
+		};
+		self.useLoaderDeps = (...args: any[]) => {
+			const [user, slot] = splitSlot(args);
+			const opts = user[0] ?? {};
+			return useLoaderDeps(
+				strictLoaderHooks ? { ...opts, from: self.id } : { ...opts, from: self.id, strict: false },
+				subSlot(slot, 'r:d'),
+			);
+		};
+		self.useLoaderData = (...args: any[]) => {
+			const [user, slot] = splitSlot(args);
+			const opts = user[0] ?? {};
+			return useLoaderData(
+				strictLoaderHooks ? { ...opts, from: self.id } : { ...opts, from: self.id, strict: false },
+				subSlot(slot, 'r:l'),
+			);
+		};
+	}
+
+	function attachRouteNavigation(self: any): void {
+		self.useNavigate = (...args: any[]) => {
+			const [, slot] = splitSlot(args);
+			return useNavigate({ from: self.fullPath }, subSlot(slot, 'r:n'));
+		};
+	}
+
+	function attachLazyRouteHooks(self: any) {
+		const id = self.options.id;
+		self.useMatch = ((...args: Array<any>) => {
+			const [user, slot] = splitSlot(args);
+			const options = user[0] ?? {};
+			return useMatch(
+				{
+					select: options.select,
+					from: id,
+					structuralSharing: options.structuralSharing,
+				},
+				subSlot(slot, 'lr:m'),
+			);
+		}) as typeof self.useMatch;
+		self.useRouteContext = ((...args: Array<any>) => {
+			const [user, slot] = splitSlot(args);
+			return useRouteContext({ ...(user[0] ?? {}), from: id }, subSlot(slot, 'lr:c'));
+		}) as typeof self.useRouteContext;
+		self.useSearch = ((...args: Array<any>) => {
+			const [user, slot] = splitSlot(args);
+			const options = user[0] ?? {};
+			return useSearch(
+				{
+					select: options.select,
+					from: id,
+					structuralSharing: options.structuralSharing,
+				},
+				subSlot(slot, 'lr:s'),
+			);
+		}) as typeof self.useSearch;
+		self.useParams = ((...args: Array<any>) => {
+			const [user, slot] = splitSlot(args);
+			const options = user[0] ?? {};
+			return useParams(
+				{
+					select: options.select,
+					from: id,
+					structuralSharing: options.structuralSharing,
+				},
+				subSlot(slot, 'lr:p'),
+			);
+		}) as typeof self.useParams;
+		self.useLoaderDeps = ((...args: Array<any>) => {
+			const [user, slot] = splitSlot(args);
+			return useLoaderDeps({ ...(user[0] ?? {}), from: id }, subSlot(slot, 'lr:d'));
+		}) as typeof self.useLoaderDeps;
+		self.useLoaderData = ((...args: Array<any>) => {
+			const [user, slot] = splitSlot(args);
+			return useLoaderData({ ...(user[0] ?? {}), from: id }, subSlot(slot, 'lr:l'));
+		}) as typeof self.useLoaderData;
+		self.useNavigate = ((...args: Array<any>) => {
+			const [, slot] = splitSlot(args);
+			const router = useRouter();
+			return useNavigate(
+				{ from: (router.routesById as Record<string, any>)[id].fullPath },
+				subSlot(slot, 'lr:n'),
+			);
+		}) as typeof self.useNavigate;
+	}
+
+	return { attachRouteHooks, attachRouteNavigation, attachLazyRouteHooks };
+}

package/src/scriptComponent.tsrx

@@ -0,0 +1,27 @@
+import { createElement, useId } from 'octane';
+import type { RouterManagedTag } from '@tanstack/router-core';
+import { getAssetKeys } from './assetKeys.ts';
+
+// router-core's initial hydration scripts remove themselves before adoption.
+// Host descriptors leave no per-item template frames behind when they do, and
+// create live script elements that execute on later client navigation. This
+// shared owner intentionally remains outside Strong mode for both entries.
+export function createScripts(useScripts: () => Array<RouterManagedTag>) {
+	function Scripts() @{
+		const owner = useId();
+		const scripts = 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 ?? '' },
+				});
+			})}
+		</>
+	}
+	return Scripts;
+}