@octanejs/tanstack-router 0.1.9 → 0.1.10

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@octanejs/tanstack-router",
-  "version": "0.1.9",
+  "version": "0.1.10",
   "license": "MIT",
   "type": "module",
   "engines": {
@@ -43,16 +43,16 @@
     "@tanstack/store": "^0.9.3"
   },
   "peerDependencies": {
-    "octane": "0.1.10"
+    "octane": "0.1.11"
   },
   "devDependencies": {
     "@tanstack/react-router": "1.170.16",
-    "@tsrx/react": "^0.2.37",
+    "@tsrx/react": "^0.2.44",
     "esbuild": "^0.28.1",
     "react": "^19.2.0",
     "react-dom": "^19.2.0",
     "vitest": "^4.1.9",
-    "octane": "0.1.10"
+    "octane": "0.1.11"
   },
   "scripts": {
     "test": "vitest run"

package/src/Await.tsrx

@@ -4,13 +4,18 @@
 // `render` prop (re-passing it as `{children}` would be an identifier, not a literal
 // render-prop, so the consumer's `<Await>{(d) => …}</Await>` stays the public API).
 import { use } from 'octane';
+import type { OctaneNode } from 'octane';
 
-function AwaitInner(props) {
+function AwaitInner(props: { promise: Promise<any>; render: (data: any) => OctaneNode }) {
 	const data = use(props.promise);
 	return props.render(data);
 }
 
-export function Await(props) @{
+export function Await(props: {
+	promise: Promise<any>;
+	fallback?: OctaneNode;
+	children: (data: any) => OctaneNode;
+}) @{
 	@try {
 		<AwaitInner promise={props.promise} render={props.children} />
 	} @pending {

package/src/CatchBoundary.tsrx

@@ -14,8 +14,15 @@
 //     commit later, same observable outcome). Match passes the router's `loadedAt`
 //     so navigation clears route error UI.
 import { useState, useRef, useLayoutEffect } from 'octane';
+import type { OctaneNode } from 'octane';
+import type { ErrorInfo, ErrorRouteComponent } from './route.ts';
 
-export function CatchBoundary(props) @{
+export function CatchBoundary(props: {
+	getResetKey: () => number | string;
+	children: OctaneNode;
+	errorComponent?: ErrorRouteComponent;
+	onCatch?: (error: Error, errorInfo: ErrorInfo) => void;
+}) @{
 	@try {
 		<>
 			{props.children}
@@ -31,10 +38,16 @@ export function CatchBoundary(props) @{
 	}
 }
 
-function CatchErrorView(props) @{
+function CatchErrorView(props: {
+	error: any;
+	reset: () => void;
+	getResetKey?: () => number | string;
+	errorComponent?: ErrorRouteComponent;
+	onCatch?: (error: Error, errorInfo: ErrorInfo) => void;
+}) @{
 	// componentDidCatch parity — once per distinct caught error, during render so a
 	// rethrow (the notFound-forwarding path) escapes to the parent boundary.
-	const reported = useRef(null);
+	const reported = useRef<unknown>(null);
 	if (reported.current !== props.error) {
 		reported.current = props.error;
 		if (props.onCatch) props.onCatch(props.error, { componentStack: '' });
@@ -60,7 +73,11 @@ function CatchErrorView(props) @{
 // The default error UI, markup-identical to react-router's ErrorComponent (string
 // styles serialize to the same inline css React produces, so the differential rig
 // can byte-compare it).
-export function ErrorComponent(props) @{
+export function ErrorComponent(props: {
+	error: any;
+	reset?: () => void;
+	info?: { componentStack?: string };
+}) @{
 	const [show, setShow] = useState(process.env.NODE_ENV !== 'production');
 
 	<div style="padding:.5rem;max-width:100%">

package/src/CatchBoundary.tsrx.d.ts

@@ -1,8 +1,14 @@
 // Type declaration for the .tsrx components (resolved by relative path).
+import type { ErrorInfo, ErrorRouteComponent } from './route';
+
 export declare const CatchBoundary: (props: {
-	getResetKey?: () => number | string;
-	errorComponent?: unknown;
-	onCatch?: (error: any, errorInfo: { componentStack: string }) => void;
+	getResetKey: () => number | string;
+	errorComponent?: ErrorRouteComponent;
+	onCatch?: (error: Error, errorInfo: ErrorInfo) => void;
 	children?: unknown;
 }) => unknown;
-export declare const ErrorComponent: (props: { error: any; reset?: () => void }) => unknown;
+export declare const ErrorComponent: (props: {
+	error: any;
+	reset?: () => void;
+	info?: { componentStack?: string };
+}) => unknown;

package/src/ClientOnly.tsrx

@@ -6,6 +6,7 @@
 // compiler slots the hook calls (and withSlot-disambiguates useHydrated's
 // call sites).
 import { useSyncExternalStore } from 'octane';
+import type { OctaneNode } from 'octane';
 
 const subscribe = () => () => {};
 
@@ -13,7 +14,7 @@ export function useHydrated() {
 	return useSyncExternalStore(subscribe, () => true, () => false);
 }
 
-export function ClientOnly(props) @{
+export function ClientOnly(props: { children?: OctaneNode; fallback?: OctaneNode }) @{
 	const hydrated = useHydrated();
 	<>
 		{hydrated ? props.children : props.fallback ?? null}

package/src/Link.tsrx

@@ -11,7 +11,10 @@
 import { isChildrenBlock } from 'octane';
 import { useLinkProps } from './link.ts';
 
-export function Link(props) @{
+// Props are permissive (`any`) at the implementation boundary — upstream's Link
+// implementation is likewise `(props: any)` behind the generic `LinkComponent<'a'>`
+// facade; the full type-safe `to`/`params`/`search` surface is a follow-up.
+export function Link(props: any) @{
 	const { _asChild: AsChild, children, ...rest } = props;
 	const linkProps = useLinkProps(rest);
 	const { disabled: _disabled, ...aProps } = linkProps;

package/src/Match.tsrx

@@ -24,6 +24,8 @@ import {
 	isNotFound,
 	rootRouteId,
 } from '@tanstack/router-core';
+import type { NotFoundError, ParsedLocation, RootRouteOptions } from '@tanstack/router-core';
+import type { ErrorInfo, ErrorRouteComponent } from './route.ts';
 import { useStore } from './useStore.ts';
 import { useRouter, matchContext } from './context.ts';
 import { Outlet } from './Outlet.tsrx';
@@ -32,11 +34,11 @@ import { CatchBoundary, ErrorComponent } from './CatchBoundary.tsrx';
 import { CatchNotFound } from './not-found.tsrx';
 import { SafeFragment } from './SafeFragment.tsrx';
 
-export function Match(props) @{
+export function Match(props: { matchId: string }) @{
 	const router = useRouter();
-	const matchStore = router.stores.matchStores.get(props.matchId);
+	const matchStore = router.stores.matchStores.get(props.matchId)!;
 	const resetKey = useStore(router.stores.loadedAt, (l) => l);
-	const routeId = useStore(matchStore, (m) => m.routeId);
+	const routeId = useStore(matchStore, (m) => m.routeId as string);
 	const route = router.routesById[routeId];
 
 	const PendingComponent = route.options.pendingComponent ?? router.options.defaultPendingComponent;
@@ -50,12 +52,15 @@ export function Match(props) @{
 	// Suspense boundary when explicitly opted in via wrapInSuspense.
 	const SuspenseWrap =
 		(!route.isRoot || route.options.wrapInSuspense) &&
-		(route.options.wrapInSuspense ?? PendingComponent ?? routeErrorComponent?.preload)
+		(route.options.wrapInSuspense ?? PendingComponent ??
+		(routeErrorComponent as ErrorRouteComponent | undefined)?.preload)
 			? Suspense
 			: SafeFragment;
 	const CatchWrap = routeErrorComponent ? CatchBoundary : SafeFragment;
 	const NotFoundWrap = routeNotFoundComponent ? CatchNotFound : SafeFragment;
-	const ShellComponent = route.isRoot ? route.options.shellComponent ?? SafeFragment : SafeFragment;
+	const ShellComponent = route.isRoot
+		? (route.options as RootRouteOptions).shellComponent ?? SafeFragment
+		: SafeFragment;
 
 	const pendingElement =
 		PendingComponent ? createElement(PendingComponent, {}) : null;
@@ -67,7 +72,7 @@ export function Match(props) @{
 				<CatchWrap
 					getResetKey={() => resetKey}
 					errorComponent={routeErrorComponent || ErrorComponent}
-					onCatch={(error, errorInfo) => {
+					onCatch={(error: Error, errorInfo: ErrorInfo) => {
 						if (isNotFound(error)) {
 							error.routeId ??= routeId;
 							throw error;
@@ -76,7 +81,7 @@ export function Match(props) @{
 					}}
 				>
 					<NotFoundWrap
-						fallback={(error) => {
+						fallback={(error: NotFoundError) => {
 							error.routeId ??= routeId;
 
 							if (
@@ -85,7 +90,7 @@ export function Match(props) @{
 							) {
 								throw error;
 							}
-							return createElement(routeNotFoundComponent, error);
+							return createElement(routeNotFoundComponent, error as any);
 						}}
 					>
 						<MatchInner matchId={props.matchId} />
@@ -99,24 +104,24 @@ export function Match(props) @{
 	</ShellComponent>
 }
 
-function MatchInner(props) {
+function MatchInner(props: { matchId: string }) {
 	const router = useRouter();
-	const matchStore = router.stores.matchStores.get(props.matchId);
+	const matchStore = router.stores.matchStores.get(props.matchId)!;
 	const match = useStore(matchStore, (m) => m);
-	const routeId = match.routeId;
+	const routeId = match.routeId as string;
 	const route = router.routesById[routeId];
 
 	// The live match in the router (if still mounted there) wins over the
 	// snapshot for promise lookups, per upstream getMatchPromise.
-	const getMatchPromise = (key) => router.getMatch(match.id)?._nonReactive[key] ??
-		match._nonReactive[key];
+	const getMatchPromise = (key: 'displayPendingPromise' | 'minPendingPromise' | 'loadPromise') =>
+		router.getMatch(match.id)?._nonReactive[key] ?? match._nonReactive[key];
 
 	if (match._displayPending) {
-		use(getMatchPromise('displayPendingPromise'));
+		use(getMatchPromise('displayPendingPromise')!);
 	}
 
 	if (match._forcePending) {
-		use(getMatchPromise('minPendingPromise'));
+		use(getMatchPromise('minPendingPromise')!);
 	}
 
 	if (match.status === 'pending') {
@@ -125,7 +130,7 @@ function MatchInner(props) {
 		if (pendingMinMs) {
 			const routerMatch = router.getMatch(match.id);
 			if (routerMatch && !routerMatch._nonReactive.minPendingPromise) {
-				const minPendingPromise = createControlledPromise();
+				const minPendingPromise = createControlledPromise<void>();
 				routerMatch._nonReactive.minPendingPromise = minPendingPromise;
 				setTimeout(() => {
 					minPendingPromise.resolve();
@@ -133,7 +138,7 @@ function MatchInner(props) {
 				}, pendingMinMs);
 			}
 		}
-		use(getMatchPromise('loadPromise'));
+		use(getMatchPromise('loadPromise')!);
 	}
 
 	if (match.status === 'notFound') {
@@ -143,7 +148,7 @@ function MatchInner(props) {
 	if (match.status === 'redirected') {
 		// Observed mid-transition while a redirect is in flight — suspend on the
 		// load so this stale render is abandoned and the redirect completes.
-		use(getMatchPromise('loadPromise'));
+		use(getMatchPromise('loadPromise')!);
 	}
 
 	if (match.status === 'error') {
@@ -174,7 +179,7 @@ function MatchInner(props) {
 // `resolvedLocation` to the new location.
 function OnRendered() @{
 	const router = useRouter();
-	const prevResolvedLocationRef = useRef(undefined);
+	const prevResolvedLocationRef = useRef<ParsedLocation<any> | undefined>(undefined);
 	const renderedLocationKey = useStore(
 		router.stores.resolvedLocation,
 		(loc) => loc?.state.__TSR_key,

package/src/MatchRoute.tsrx

@@ -11,13 +11,16 @@ import { useStore } from './useStore.ts';
 export function useMatchRoute() {
 	const router = useRouter();
 	useStore(router.stores.matchRouteDeps, (d) => d);
-	return useCallback((opts) => {
+	return useCallback((opts: Record<string, any>) => {
 		const { pending, caseSensitive, fuzzy, includeSearch, ...rest } = opts;
-		return router.matchRoute(rest, { pending, caseSensitive, fuzzy, includeSearch });
+		return router.matchRoute(rest as any, { pending, caseSensitive, fuzzy, includeSearch });
 	}, [router]);
 }
 
-export function MatchRoute(props) @{
+// Props are permissive (`Record<string, any>` + optional render-prop children) —
+// upstream's MakeMatchRouteOptions generics are the type-safe facade; the octane
+// binding keeps the loose v1 surface (see Link).
+export function MatchRoute(props: Record<string, any>) @{
 	const matchRoute = useMatchRoute();
 	const params = matchRoute(props);
 	const out =

package/src/Navigate.tsrx

@@ -1,8 +1,9 @@
 // Imperative navigation as a component: navigates once on mount, renders nothing.
 import { useLayoutEffect, useRef } from 'octane';
+import type { NavigateOptions } from '@tanstack/router-core';
 import { useNavigate } from './hooks.ts';
 
-export function Navigate(props) @{
+export function Navigate(props: NavigateOptions) @{
 	const navigate = useNavigate();
 	const done = useRef(false);
 

package/src/Outlet.tsrx

@@ -19,9 +19,11 @@ import { SafeFragment } from './SafeFragment.tsrx';
 
 export function Outlet() @{
 	const router = useRouter();
-	const parentId = useContext(matchContext);
-	const parentStore = router.stores.matchStores.get(parentId);
-	const parentRouteId = useStore(parentStore, (m) => m?.routeId);
+	// 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) => m?.routeId as string | undefined);
 	const globalNotFound = useStore(parentStore, (m) => m?.globalNotFound ?? false);
 	const childId = useStore(router.stores.matchesId, (ids) => {
 		const i = ids.indexOf(parentId);
@@ -38,7 +40,7 @@ export function Outlet() @{
 		DefaultPending ? createElement(DefaultPending, {}) : null;
 
 	@if (globalNotFound) {
-		<RouteNotFound routeId={parentRouteId} />
+		<RouteNotFound routeId={parentRouteId!} />
 	} @else {
 		@if (childId) {
 			<RootSuspense fallback={pendingElement}>

package/src/RouteNotFound.tsrx

@@ -10,7 +10,7 @@
 // `notFound({ data })` payload arrives as the `data` prop.
 import { useRouter } from './context.ts';
 
-export function RouteNotFound(props) @{
+export function RouteNotFound(props: { routeId: string; error?: any }) @{
 	const router = useRouter();
 	const route = router.routesById[props.routeId];
 	const NotFound = route.options.notFoundComponent ?? router.options.defaultNotFoundComponent;

package/src/RouterProvider.tsrx

@@ -5,11 +5,21 @@
 // instance), wraps in `router.options.Wrap` when configured, and provides the
 // router; `RouterProvider` renders `<Matches/>` inside it.
 import { hasKeys } from '@tanstack/router-core';
+import type { AnyRouter } from '@tanstack/router-core';
+import type { OctaneNode } from 'octane';
 import { routerContext } from './context.ts';
 import { Matches } from './Matches.tsrx';
 import { SafeFragment } from './SafeFragment.tsrx';
 
-export function RouterContextProvider(props) @{
+// Upstream's `RouterProps` is `Omit<RouterOptions<…>, 'context'> & { router }` —
+// extra props reconfigure the instance via `router.update()`. The octane binding
+// keeps the router-typed member strict and the option passthrough permissive.
+export type RouterProps = {
+		router: AnyRouter;
+		context?: Record<string, any>;
+	} & Record<string, any>;
+
+export function RouterContextProvider(props: RouterProps & { children?: OctaneNode }) @{
 	const { router, children, ...rest } = props;
 	if (hasKeys(rest)) {
 		router.update({
@@ -28,7 +38,7 @@ export function RouterContextProvider(props) @{
 	</Wrap>
 }
 
-export function RouterProvider(props) @{
+export function RouterProvider(props: RouterProps) @{
 	const { router, ...rest } = props;
 
 	<RouterContextProvider router={router} {...rest}>

package/src/RouterProvider.tsrx.d.ts

@@ -1,8 +1,12 @@
 // Type declaration for the .tsrx component (resolved by relative path).
 import type { AnyRouter } from '@tanstack/router-core';
 
-export declare const RouterProvider: (props: { router: AnyRouter; children?: unknown }) => unknown;
-export declare const RouterContextProvider: (props: {
-	router: import('@tanstack/router-core').AnyRouter;
-	children?: unknown;
-}) => unknown;
+export type RouterProps = {
+	router: AnyRouter;
+	context?: Record<string, any>;
+} & Record<string, any>;
+
+export declare const RouterProvider: (props: RouterProps) => unknown;
+export declare const RouterContextProvider: (
+	props: RouterProps & { children?: unknown },
+) => unknown;

package/src/SafeFragment.tsrx

@@ -5,7 +5,10 @@
 // — crucially — means a route WITHOUT a pendingComponent/errorComponent does not
 // create a boundary at all, so suspensions and errors bubble to the nearest
 // ancestor that has one (react-router parity).
-export function SafeFragment(props) @{
+// Props are `any` (upstream parity: react-router's `SafeFragment(props: any)`) —
+// it stands in for Suspense/CatchBoundary/CatchNotFound/shellComponent at dynamic
+// boundary slots, so it must accept any boundary's props and render only children.
+export function SafeFragment(props: any) @{
 	<>
 		{props.children}
 	</>

package/src/index.ts

@@ -54,6 +54,16 @@ export {
 	RootRoute,
 	RouteApi,
 } from './route';
+// Framework-facing component types (react-router parity, on octane renderables).
+// route.ts also narrows router-core's *Extensions interfaces to these via module
+// augmentation — mirroring upstream's route.tsx/router.tsx `declare module`.
+export type {
+	SyncRouteComponent,
+	AsyncRouteComponent,
+	RouteComponent,
+	ErrorRouteComponent,
+	NotFoundRouteComponent,
+} from './route';
 export { routerContext, getRouterContext, matchContext, useRouter } from './context';
 export { useStore } from './useStore';
 export { useRouterState } from './useRouterState';
@@ -74,11 +84,13 @@ export {
 export { useAwaited } from './useAwaited';
 export { useLinkProps, createLink, linkOptions } from './link';
 export { useBlocker, Block } from './useBlocker.tsrx';
+export type { UseBlockerOpts, ShouldBlockFn } from './useBlocker.tsrx';
 export { useMatchRoute, MatchRoute } from './MatchRoute.tsrx';
 export { useElementScrollRestoration } from './useElementScrollRestoration';
 export { lazyRouteComponent } from './lazyRouteComponent';
 
 export { RouterProvider, RouterContextProvider } from './RouterProvider.tsrx';
+export type { RouterProps } from './RouterProvider.tsrx';
 export { Outlet } from './Outlet.tsrx';
 export { Link } from './Link.tsrx';
 export { Navigate } from './Navigate.tsrx';

package/src/not-found.tsrx

@@ -4,18 +4,28 @@
 // up; the reset key is `not-found-${pathname}-${status}` so navigating away (or a
 // new load settling) clears the not-found UI.
 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 { CatchBoundary } from './CatchBoundary.tsrx';
 
-function NotFoundFallback(props) {
+function NotFoundFallback(props: {
+	error: unknown;
+	render?: (error: NotFoundError) => OctaneNode;
+}) {
 	if (isNotFound(props.error)) {
 		return props.render ? props.render(props.error) : null;
 	}
 	throw props.error;
 }
 
-export function CatchNotFound(props) @{
+export function CatchNotFound(props: {
+	fallback?: (error: NotFoundError) => OctaneNode;
+	onCatch?: (error: Error, errorInfo: ErrorInfo) => void;
+	children: OctaneNode;
+}) @{
 	const router = useRouter();
 	const pathname = useStore(router.stores.location, (l) => l.pathname);
 	const status = useStore(router.stores.status, (s) => s);
@@ -23,14 +33,17 @@ export function CatchNotFound(props) @{
 
 	<CatchBoundary
 		getResetKey={() => resetKey}
-		onCatch={(error, errorInfo) => {
+		onCatch={(error: Error, errorInfo: ErrorInfo) => {
 			if (isNotFound(error)) {
 				if (props.onCatch) props.onCatch(error, errorInfo);
 			} else {
 				throw error;
 			}
 		}}
-		errorComponent={(p) => NotFoundFallback({ error: p.error, render: props.fallback })}
+		errorComponent={(p: ErrorComponentProps) => NotFoundFallback({
+			error: p.error,
+			render: props.fallback,
+		})}
 	>{props.children}</CatchBoundary>
 }
 

package/src/not-found.tsrx.d.ts

@@ -1,7 +1,10 @@
 // Type declaration for the .tsrx components (resolved by relative path).
+import type { NotFoundError } from '@tanstack/router-core';
+import type { ErrorInfo } from './route';
+
 export declare const CatchNotFound: (props: {
-	fallback?: (error: any) => unknown;
-	onCatch?: (error: any, errorInfo: { componentStack: string }) => void;
+	fallback?: (error: NotFoundError) => unknown;
+	onCatch?: (error: Error, errorInfo: ErrorInfo) => void;
 	children?: unknown;
 }) => unknown;
 export declare const DefaultGlobalNotFound: () => unknown;

package/src/route.ts

@@ -8,7 +8,9 @@
 // `withSlot` and passes the call-site symbol as the trailing argument, which
 // each accessor forwards to the hooks it composes.
 import { BaseRoute, BaseRootRoute, BaseRouteApi, notFound } from '@tanstack/router-core';
+import type { ErrorComponentProps, NotFoundRouteProps } from '@tanstack/router-core';
 import { createElement } from 'octane';
+import type { OctaneNode } from 'octane';
 import {
 	useMatch,
 	useParams,
@@ -22,6 +24,45 @@ import { useRouter } from './context';
 import { splitSlot, subSlot } from './internal';
 import { Link } from './Link.tsrx';
 
+// ── Component types (react-router's route.tsx, on octane renderables) ────────
+// Octane analog of React's `ErrorInfo` (octane reports no component stacks).
+export type ErrorInfo = {
+	componentStack?: string | null;
+	digest?: string | null;
+};
+
+export type SyncRouteComponent<TProps> = (props: TProps) => OctaneNode;
+export type AsyncRouteComponent<TProps> = SyncRouteComponent<TProps> & {
+	preload?: () => Promise<void>;
+};
+export type RouteComponent = AsyncRouteComponent<{}>;
+export type ErrorRouteComponent = AsyncRouteComponent<ErrorComponentProps>;
+export type NotFoundRouteComponent = SyncRouteComponent<NotFoundRouteProps>;
+
+// router-core leaves the framework-facing component options typed `unknown` and
+// each binding narrows them via interface merging — react-router's route.tsx /
+// router.tsx do exactly this with React types; this is the octane equivalent.
+declare module '@tanstack/router-core' {
+	interface UpdatableRouteOptionsExtensions {
+		component?: RouteComponent;
+		errorComponent?: false | null | undefined | ErrorRouteComponent;
+		notFoundComponent?: NotFoundRouteComponent;
+		pendingComponent?: RouteComponent;
+	}
+	interface RootRouteOptionsExtensions {
+		shellComponent?: (props: { children: OctaneNode }) => OctaneNode;
+	}
+	interface RouterOptionsExtensions {
+		defaultComponent?: RouteComponent;
+		defaultErrorComponent?: ErrorRouteComponent;
+		defaultPendingComponent?: RouteComponent;
+		defaultNotFoundComponent?: NotFoundRouteComponent;
+		Wrap?: (props: { children: OctaneNode }) => OctaneNode;
+		InnerWrap?: (props: { children: OctaneNode }) => OctaneNode;
+		defaultOnCatch?: (error: Error, errorInfo: ErrorInfo) => void;
+	}
+}
+
 // 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).

package/src/useBlocker.tsrx

@@ -7,9 +7,62 @@
 // in .tsrx so the compiler slots the internal useState/useEffect and callers'
 // withSlot wrapping keeps per-call-site state independent.
 import { useState, useEffect, isChildrenBlock } from 'octane';
+import type { OctaneNode } from 'octane';
+import type { BlockerFnArgs, HistoryAction, HistoryLocation } from '@tanstack/history';
 import { useRouter } from './context.ts';
 
-const IDLE_RESOLVER = {
+// 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
+// route factories are untyped (`createRoute(options: any)`), so the union of
+// matched-route shapes collapses to the loosely-typed equivalent.
+export interface ShouldBlockFnLocation {
+	routeId: string;
+	fullPath: string;
+	pathname: string;
+	params: Record<string, string>;
+	search: Record<string, any>;
+}
+
+export type BlockerResolver =
+	| {
+			status: 'blocked';
+			current: ShouldBlockFnLocation;
+			next: ShouldBlockFnLocation;
+			action: HistoryAction;
+			proceed: () => void;
+			reset: () => void;
+	  }
+	| {
+			status: 'idle';
+			current: undefined;
+			next: undefined;
+			action: undefined;
+			proceed: undefined;
+			reset: undefined;
+	  };
+
+export type ShouldBlockFnArgs = {
+	current: ShouldBlockFnLocation;
+	next: ShouldBlockFnLocation;
+	action: HistoryAction;
+};
+
+export type ShouldBlockFn = (args: ShouldBlockFnArgs) => boolean | Promise<boolean>;
+
+export type UseBlockerOpts = {
+	shouldBlockFn: ShouldBlockFn;
+	enableBeforeUnload?: boolean | (() => boolean);
+	disabled?: boolean;
+	withResolver?: boolean;
+};
+
+type LegacyBlockerFn = () => Promise<any> | any;
+type LegacyBlockerOpts = {
+	blockerFn?: LegacyBlockerFn;
+	condition?: boolean | any;
+};
+
+const IDLE_RESOLVER: BlockerResolver = {
 	status: 'idle',
 	current: undefined,
 	next: undefined,
@@ -18,7 +71,10 @@ const IDLE_RESOLVER = {
 	reset: undefined,
 };
 
-function _resolveBlockerOpts(opts, condition) {
+function _resolveBlockerOpts(
+	opts?: UseBlockerOpts | LegacyBlockerOpts | LegacyBlockerFn,
+	condition?: boolean | any,
+): UseBlockerOpts {
 	if (opts === undefined) {
 		return { shouldBlockFn: () => true, withResolver: false };
 	}
@@ -48,18 +104,21 @@ function _resolveBlockerOpts(opts, condition) {
 	};
 }
 
-export function useBlocker(opts, condition) {
+export function useBlocker(
+	opts?: UseBlockerOpts | LegacyBlockerOpts | LegacyBlockerFn,
+	condition?: boolean | any,
+): BlockerResolver {
 	const { shouldBlockFn, enableBeforeUnload = true, disabled = false, withResolver = false } =
 		_resolveBlockerOpts(opts, condition);
 
 	const router = useRouter();
 	const { history } = router;
 
-	const [resolver, setResolver] = useState(IDLE_RESOLVER);
+	const [resolver, setResolver] = useState<BlockerResolver>(IDLE_RESOLVER);
 
 	useEffect(() => {
-		const blockerFnComposed = async (blockerFnArgs) => {
-			function getLocation(location) {
+		const blockerFnComposed = async (blockerFnArgs: BlockerFnArgs) => {
+			function getLocation(location: HistoryLocation): ShouldBlockFnLocation {
 				const parsedLocation = router.parseLocation(location);
 				const matchedRoutes = router.getMatchedRoutes(parsedLocation.pathname);
 				if (matchedRoutes.foundRoute === undefined) {
@@ -95,7 +154,7 @@ export function useBlocker(opts, condition) {
 			if (!withResolver) return shouldBlock;
 			if (!shouldBlock) return false;
 
-			const promise = new Promise((resolve) => {
+			const promise = new Promise<boolean>((resolve) => {
 				setResolver({
 					status: 'blocked',
 					current,
@@ -119,9 +178,15 @@ export function useBlocker(opts, condition) {
 	return resolver;
 }
 
+// Upstream's PromptProps: the blocker options plus optional children (a render
+// prop receiving the resolver, or plain renderables).
+export type PromptProps = (UseBlockerOpts | LegacyBlockerOpts) & {
+		children?: OctaneNode | ((params: BlockerResolver) => OctaneNode);
+	};
+
 // Declarative blocker: registers useBlocker and renders children (optionally a
 // render prop receiving the resolver).
-export function Block(props) @{
+export function Block(props: PromptProps) @{
 	const { children, ...rest } = props;
 	const resolver = useBlocker(rest);
 	const out =

package/src/useBlocker.tsrx.d.ts

@@ -1,3 +1,59 @@
 // Type declaration for the .tsrx module (resolved by relative path).
-export declare const useBlocker: (opts?: unknown, condition?: unknown) => unknown;
-export declare const Block: (props: Record<string, unknown>) => unknown;
+import type { HistoryAction } from '@tanstack/history';
+
+export interface ShouldBlockFnLocation {
+	routeId: string;
+	fullPath: string;
+	pathname: string;
+	params: Record<string, string>;
+	search: Record<string, any>;
+}
+
+export type BlockerResolver =
+	| {
+			status: 'blocked';
+			current: ShouldBlockFnLocation;
+			next: ShouldBlockFnLocation;
+			action: HistoryAction;
+			proceed: () => void;
+			reset: () => void;
+	  }
+	| {
+			status: 'idle';
+			current: undefined;
+			next: undefined;
+			action: undefined;
+			proceed: undefined;
+			reset: undefined;
+	  };
+
+export type ShouldBlockFnArgs = {
+	current: ShouldBlockFnLocation;
+	next: ShouldBlockFnLocation;
+	action: HistoryAction;
+};
+
+export type ShouldBlockFn = (args: ShouldBlockFnArgs) => boolean | Promise<boolean>;
+
+export type UseBlockerOpts = {
+	shouldBlockFn: ShouldBlockFn;
+	enableBeforeUnload?: boolean | (() => boolean);
+	disabled?: boolean;
+	withResolver?: boolean;
+};
+
+type LegacyBlockerFn = () => Promise<any> | any;
+type LegacyBlockerOpts = {
+	blockerFn?: LegacyBlockerFn;
+	condition?: boolean | any;
+};
+
+export type PromptProps = (UseBlockerOpts | LegacyBlockerOpts) & {
+	children?: unknown | ((params: BlockerResolver) => unknown);
+};
+
+export declare const useBlocker: (
+	opts?: UseBlockerOpts | LegacyBlockerOpts | LegacyBlockerFn,
+	condition?: boolean | any,
+) => BlockerResolver;
+export declare const Block: (props: PromptProps) => unknown;

package/src/useStore.ts

@@ -13,11 +13,22 @@ interface Atom<T> {
 	get: () => T;
 }
 
-export function useStore<T, S = T>(...args: any[]): S {
+// Public signature mirrors @tanstack/react-store's `useStore(store, selector,
+// compare)`; the store parameter is the structural `{ get }` shape so router-core's
+// `RouterReadableStore`/`RouterWritableStore` atoms (whose types omit `subscribe`)
+// infer `T` directly. The trailing `slot` is the binding's forwarded call-site slot
+// (see internal.ts) — the implementation splits it off the raw argument list.
+export function useStore<T, S = T>(
+	atom: { get: () => T },
+	selector?: (state: T) => S,
+	compare?: (a: S, b: S) => boolean,
+	slot?: symbol,
+): S;
+export function useStore(...args: any[]): any {
 	const [user, slot] = splitSlot(args);
-	const atom = user[0] as Atom<T>;
-	const selector = (user[1] ?? ((s: T) => s as unknown as S)) as (s: T) => S;
-	const compare = (user[2] ?? Object.is) as (a: S, b: S) => boolean;
+	const atom = user[0] as Atom<unknown>;
+	const selector = (user[1] ?? ((s: unknown) => s)) as (s: unknown) => unknown;
+	const compare = (user[2] ?? Object.is) as (a: unknown, b: unknown) => boolean;
 
 	// Re-subscribe only when the atom identity changes (it's stable across renders).
 	const subscribe = useCallback(
@@ -28,8 +39,8 @@ export function useStore<T, S = T>(...args: any[]): S {
 
 	// Memoize selector output: same store input → same output; structurally-equal
 	// output keeps its previous reference (so useSyncExternalStore doesn't loop).
-	const cache = useRef<{ in: T; out: S } | null>(null, subSlot(slot, 'us:cache'));
-	const getSnapshot = (): S => {
+	const cache = useRef<{ in: unknown; out: unknown } | null>(null, subSlot(slot, 'us:cache'));
+	const getSnapshot = (): unknown => {
 		const input = atom.get();
 		const prev = cache.current;
 		if (prev && Object.is(prev.in, input)) return prev.out;