@octanejs/tanstack-router 0.2.9 → 0.3.0

package/src/not-found.tsrx

@@ -6,14 +6,14 @@
 import { isNotFound } from '@tanstack/router-core';
 import type { ErrorComponentProps, NotFoundError } from '@tanstack/router-core';
 import type { OctaneNode } from 'octane';
-import type { ErrorInfo } from './route.ts';
-import { useRouter } from './context.ts';
-import { useStore } from './useStore.ts';
+import type { ErrorInfo } from './route';
+import { useRouter } from './context';
+import { useStore } from './useStore';
 import { CatchBoundary } from './CatchBoundary.tsrx';
 
 function NotFoundFallback(props: {
 	error: unknown;
-	render?: (error: NotFoundError) => OctaneNode;
+	render?: ((error: NotFoundError) => OctaneNode) | undefined;
 }) {
 	if (isNotFound(props.error)) {
 		return props.render ? props.render(props.error) : null;

package/src/route.ts

@@ -637,7 +637,8 @@ export class RouteApi<TId, TRouter extends AnyRouter = RegisteredRouter> extends
 		}) as unknown as typeof this.Link;
 	}
 
-	notFound = (opts?: NotFoundError) => notFound({ routeId: this.id, ...opts } as NotFoundError);
+	override notFound = (opts?: NotFoundError) =>
+		notFound({ routeId: this.id, ...opts } as NotFoundError);
 }
 
 export function getRouteApi<const TId, TRouter extends AnyRouter = RegisteredRouter>(

package/src/router.ts

@@ -11,7 +11,9 @@ import {
 	createNonReactiveMutableStore,
 	createNonReactiveReadonlyStore,
 } from '@tanstack/router-core';
+import { isServer } from '@tanstack/router-core/isServer';
 import { createAtom, batch } from '@tanstack/store';
+import { prepareInitialHistoryState } from './historyState';
 import type { RouterHistory } from '@tanstack/history';
 import type {
 	AnyRoute,
@@ -73,6 +75,9 @@ export class Router<
 		// render-readiness boundary and the previous view-transition/load wrapper is
 		// no longer needed. HTTP status is derived on demand by the SSR layer
 		// (`getSsrStatus`), not stored on the router.
+		if (!options.history && !(isServer ?? options.isServer ?? isServerEnv)) {
+			prepareInitialHistoryState();
+		}
 		super(options, octaneStoreFactory);
 	}
 }

package/src/routerStateBinding.ts

@@ -1,3 +1,5 @@
+'use strong';
+
 // The reactive base every router hook reads through: subscribe to the router's
 // canonical snapshot store (`router.stores.__store`) and select a slice.
 import { useStore } from './useStore';

package/src/scriptComponent.tsrx

@@ -1,26 +1,33 @@
-import { createElement, useId } from 'octane';
+'use strong';
+
+import { trustHTML, useId } from 'octane';
 import type { RouterManagedTag } from '@tanstack/router-core';
-import { getAssetKeys } from './assetKeys.ts';
+import { getAssetKeys } from './assetKeys';
+
+function scriptAttributes(attrs: RouterManagedTag['attrs']) {
+	if (!attrs || !Object.prototype.hasOwnProperty.call(attrs, '__executeOnMount')) return attrs;
+	const { __executeOnMount: _compilerMetadata, ...attributes } = attrs;
+	return attributes;
+}
 
-// 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.
+// A direct host row leaves no item frame behind when router-core's transport
+// scripts remove themselves before hydration.
+// External scripts follow dynamic-insertion loading rules: neither array order
+// nor a defer attribute serializes their execution after client navigation.
 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 ?? '' },
-				});
-			})}
+			@for (const script of scripts; index position; key keys[position]!.assetKey) {
+				<script
+					{...scriptAttributes(script.attrs)}
+					__executeOnMount
+					data-tsr-managed-key={keys[position]!.managedKey}
+					dangerouslySetInnerHTML={trustHTML(script.children ?? '')}
+				/>
+			}
 		</>
 	}
 	return Scripts;

package/src/scroll-restoration.tsrx

@@ -7,7 +7,7 @@
 // server's script.
 import { getScrollRestorationScriptForRouter } from '@tanstack/router-core/scroll-restoration-script';
 import type { AnyRouter } from '@tanstack/router-core';
-import { useRouter } from './context.ts';
+import { useRouter } from './context';
 import { ScriptOnce } from './ScriptOnce.tsrx';
 
 function rendersScript(router: AnyRouter): boolean {

package/src/ssr/RouterClient.tsrx

@@ -2,7 +2,7 @@ import { use } from 'octane';
 import { hydrate } from '@tanstack/router-core/ssr/client';
 import type { AnyRouter } from '@tanstack/router-core';
 import { RouterProvider } from '../RouterProvider.tsrx';
-import { toExternalHydrationThenable } from '../externalHydration.ts';
+import { toExternalHydrationThenable } from '../externalHydration';
 
 const hydrationPromises = new WeakMap<AnyRouter, PromiseLike<void>>();
 const ready = {

package/src/ssr/renderRouterToStream.ts

@@ -95,9 +95,13 @@ export async function renderRouterToStream({
 // transform does). So, for a document render, fold the leading style run into the
 // shell `<head>` and prepend the doctype — what octane's native-injection
 // document mode (and, before it, an explicit relocate transform) used to do. Only
-// the shell prefix (through `</head>`) is buffered; everything after streams
-// straight through, preserving out-of-order boundary flushing. A non-document
-// render (no `</head>`) passes through unchanged.
+// the styles move: the comment naming octane's hydration protocol stays before
+// `<html>`, where hydrateRoot reads it. Only the shell prefix (through `</head>`)
+// is buffered; everything after streams straight through, preserving
+// out-of-order boundary flushing. A non-document render (no `</head>`) passes
+// through unchanged.
+const LEADING_STYLE = /<style\b[\s\S]*?<\/style>/gi;
+
 export function finalizeDocumentShell(
 	source: ReadableStream<Uint8Array>,
 ): ReadableStream<Uint8Array> {
@@ -131,9 +135,14 @@ export function finalizeDocumentShell(
 					if (htmlStart >= 0) {
 						if (htmlStart > 0) {
 							const leading = prefix.slice(0, htmlStart);
+							const styles = leading.match(LEADING_STYLE) ?? [];
 							const doc = prefix.slice(htmlStart);
 							const headClose = doc.indexOf('</head>');
-							prefix = doc.slice(0, headClose) + leading + doc.slice(headClose);
+							prefix =
+								leading.replace(LEADING_STYLE, '') +
+								doc.slice(0, headClose) +
+								styles.join('') +
+								doc.slice(headClose);
 						}
 						if (!/^\s*<!doctype/i.test(prefix)) prefix = '<!DOCTYPE html>' + prefix;
 					}

package/src/useBlocker.tsrx

@@ -9,7 +9,7 @@
 import { useState, useEffect, isChildrenBlock } from 'octane';
 import type { OctaneNode } from 'octane';
 import type { BlockerFnArgs, HistoryAction, HistoryLocation } from '@tanstack/history';
-import { useRouter } from './context.ts';
+import { useRouter } from './context';
 
 // Blocker types, ported from react-router's useBlocker.tsx. Upstream derives the
 // location shapes from the registered route tree's generics; the octane binding's

package/src/useStore.ts

@@ -1,3 +1,5 @@
+'use strong';
+
 // The keystone adapter. Everything reactive in the router funnels through
 // `@tanstack/react-store`'s `useStore(atom, selector)`, which is
 // `useSyncExternalStoreWithSelector(atom.subscribe→unsubscribe, atom.get, …,