@octanejs/remix-router 0.1.0

package/src/lib/DefaultErrorComponent.tsrx

@@ -0,0 +1,47 @@
+// DefaultErrorComponent — port of react-router@7.18.1 lib/hooks.tsx's default
+// error UI. Markup-identical (differential fixtures still avoid it — the dev
+// stack trace can never byte-match across runtimes).
+import { useContext } from 'octane';
+import { RouteErrorContext, ENABLE_DEV_WARNINGS } from './context.ts';
+import { isRouteErrorResponse } from './router/utils.ts';
+
+export function DefaultErrorComponent() @{
+	const error = useContext(RouteErrorContext);
+	const message =
+		isRouteErrorResponse(error)
+			? error.status + ' ' + error.statusText
+			: error instanceof Error
+				? error.message
+				: JSON.stringify(error);
+	const stack =
+		error instanceof Error ? error.stack : null;
+	const lightgrey = 'rgba(200,200,200, 0.5)';
+
+	if (ENABLE_DEV_WARNINGS) {
+		console.error('Error handled by React Router default ErrorBoundary:', error);
+	}
+
+	<>
+		<h2>Unexpected Application Error!</h2>
+		<h3 style={{ fontStyle: 'italic' }}>
+			{message as string}
+		</h3>
+		@if (stack) {
+			<pre style={{ padding: '0.5rem', backgroundColor: lightgrey }}>
+				{stack as string}
+			</pre>
+		}
+		@if (ENABLE_DEV_WARNINGS) {
+			<>
+				<p>💿 Hey developer 👋</p>
+				<p>
+					{'You can provide a way better UX than this when your app throws errors by providing your own '}
+					<code style={{ padding: '2px 4px', backgroundColor: lightgrey }}>ErrorBoundary</code>
+					{' or '}
+					<code style={{ padding: '2px 4px', backgroundColor: lightgrey }}>errorElement</code>
+					{' prop on your route.'}
+				</p>
+			</>
+		}
+	</>
+}

package/src/lib/DefaultErrorComponent.tsrx.d.ts

@@ -0,0 +1,2 @@
+// Type declaration for the .tsrx component (resolved by relative path).
+export declare const DefaultErrorComponent: (props?: {}) => unknown;

package/src/lib/RenderErrorBoundary.tsrx

@@ -0,0 +1,117 @@
+// RenderErrorBoundary — port of the class boundary in react-router@7.18.1
+// lib/hooks.tsx onto octane's @try/@catch (octane has no class components).
+// RSC digest branches are dropped (RSCRouterContext is hardwired false here).
+//
+// Upstream semantics reproduced:
+// - getDerivedStateFromProps: the retained error resets when the location
+//   changes or a revalidation returns to "idle"; otherwise a NEW props.error
+//   surfaces while a stale one is retained even if app state cleared it.
+// - getDerivedStateFromError: render errors thrown below become the error.
+// - componentDidCatch → onError (or the upstream console.error) once per
+//   distinct caught error, DURING the catch render — so a rethrow escapes to
+//   the parent boundary.
+// - Render: error !== undefined → RouteContext(routeContext) →
+//   RouteErrorContext(error) → component; else children.
+//
+// Octane mapping: DATA errors (props.error, from router state.errors) never
+// throw — the error branch renders directly. RENDER errors land in @catch;
+// the catch view applies the same precedence (props.error wins) and leaves
+// the catch state via reset() one commit after the location/revalidation
+// derivation says the error cleared (documented divergence: upstream clears
+// in a render-phase derivation; same observable outcome).
+import { useRef, useLayoutEffect } from 'octane';
+import { RouteContext, RouteErrorContext } from './context.ts';
+
+export function RenderErrorBoundary(props) @{
+	// getDerivedStateFromProps, run during render (pure derivation).
+	const state = useRef({
+		location: props.location,
+		revalidation: props.revalidation,
+		error: props.error,
+	});
+	{
+		const s = state.current;
+		if (
+			s.location !== props.location || s.revalidation !== 'idle' && props.revalidation === 'idle'
+		) {
+			state.current = {
+				error: props.error,
+				location: props.location,
+				revalidation: props.revalidation,
+			};
+		} else {
+			state.current = {
+				error: props.error !== undefined ? props.error : s.error,
+				location: s.location,
+				revalidation: props.revalidation || s.revalidation,
+			};
+		}
+	}
+
+	@try {
+		@if (state.current.error !== undefined) {
+			<RouteContext.Provider value={props.routeContext}>
+				<RouteErrorContext.Provider
+					value={state.current.error}
+				>{props.component}</RouteErrorContext.Provider>
+			</RouteContext.Provider>
+		} @else {
+			<>
+				{props.children}
+			</>
+		}
+	} @catch (caught, reset) {
+		<CaughtErrorView
+			caught={caught}
+			reset={reset}
+			error={props.error}
+			location={props.location}
+			revalidation={props.revalidation}
+			routeContext={props.routeContext}
+			component={props.component}
+			onError={props.onError}
+		/>
+	}
+}
+
+function CaughtErrorView(props) @{
+	// componentDidCatch parity — once per distinct caught error, during render
+	// so a rethrowing onError escapes to the parent boundary.
+	const reported = useRef(null);
+	if (reported.current !== props.caught) {
+		reported.current = props.caught;
+		if (props.onError) {
+			props.onError(props.caught, { componentStack: '' });
+		} else {
+			console.error('React Router caught the following error during render', props.caught);
+		}
+	}
+
+	// Error precedence per upstream derivation: a defined props.error (data
+	// error for this location) wins over the caught render error.
+	const error =
+		props.error !== undefined ? props.error : props.caught;
+
+	// Leave the catch state when the location changes or a revalidation
+	// completes — the octane analogue of upstream's render-phase reset.
+	// `location` stays pinned at the catch baseline (upstream's state.location
+	// only moves on reset), but `revalidation` must TRACK every render the way
+	// upstream's derived state does (`props.revalidation || state.revalidation`)
+	// — a render error is usually caught while revalidation is already "idle",
+	// and the recovery signal is the SUBSEQUENT loading → idle transition, not
+	// a transition relative to the frozen catch-time value.
+	const baseline = useRef({ location: props.location, revalidation: props.revalidation });
+	useLayoutEffect(() => {
+		const b = baseline.current;
+		const shouldReset =
+			b.location !== props.location || b.revalidation !== 'idle' && props.revalidation === 'idle';
+		b.revalidation = props.revalidation || b.revalidation;
+		if (shouldReset) {
+			props.reset();
+		}
+	}, [props.location, props.revalidation]);
+
+	<RouteContext.Provider value={props.routeContext}>
+		<RouteErrorContext.Provider value={error}>{props.component}</RouteErrorContext.Provider>
+	</RouteContext.Provider>
+}

package/src/lib/RenderErrorBoundary.tsrx.d.ts

@@ -0,0 +1,14 @@
+// Type declaration for the .tsrx component (resolved by relative path).
+import type { Location } from './router/history';
+import type { RevalidationState } from './router/router';
+import type { RouteContextObject } from './context';
+
+export declare const RenderErrorBoundary: (props: {
+	location: Location;
+	revalidation: RevalidationState;
+	error: any;
+	component: unknown;
+	routeContext: RouteContextObject;
+	onError?: (error: unknown, errorInfo?: unknown) => void;
+	children?: unknown;
+}) => unknown;

package/src/lib/actions.ts

@@ -0,0 +1,90 @@
+// Vendored from react-router@7.18.1 packages/react-router/lib/actions.ts — unmodified.
+// Re-vendor with `node scripts/vendor-remix-router.mjs`; never hand-edit.
+export function throwIfPotentialCSRFAttack(
+	request: Request,
+	allowedActionOrigins: string[] | undefined,
+) {
+	let originHeader = request.headers.get('origin');
+	let originDomain: string | null = null;
+
+	try {
+		originDomain =
+			typeof originHeader === 'string' && originHeader !== 'null'
+				? new URL(originHeader).host
+				: originHeader;
+	} catch {
+		throw new Error(`\`origin\` header is not a valid URL. Aborting the action.`);
+	}
+	let host = new URL(request.url).host;
+
+	if (originDomain && originDomain !== host) {
+		if (!isAllowedOrigin(originDomain, allowedActionOrigins)) {
+			// This seems to be an CSRF attack. We should not proceed with the action.
+			throw new Error(
+				'The `request.url` host does not match `origin` header from a forwarded ' +
+					'action request. Aborting the action.',
+			);
+		}
+	}
+}
+
+// Implementation of micromatch by Next.js https://github.com/vercel/next.js/blob/ea927b583d24f42e538001bf13370e38c91d17bf/packages/next/src/server/app-render/csrf-protection.ts#L6
+function matchWildcardDomain(domain: string, pattern: string) {
+	const domainParts = domain.split('.');
+	const patternParts = pattern.split('.');
+
+	if (patternParts.length < 1) {
+		// pattern is empty and therefore invalid to match against
+		return false;
+	}
+
+	if (domainParts.length < patternParts.length) {
+		// domain has too few segments and thus cannot match
+		return false;
+	}
+
+	while (patternParts.length) {
+		const patternPart = patternParts.pop();
+		const domainPart = domainParts.pop();
+
+		switch (patternPart) {
+			case '': {
+				// invalid pattern. pattern segments must be non empty
+				return false;
+			}
+			case '*': {
+				// wildcard matches anything so we continue if the domain part is non-empty
+				if (domainPart) {
+					continue;
+				} else {
+					return false;
+				}
+			}
+			case '**': {
+				// if this is not the last item in the pattern the pattern is invalid
+				if (patternParts.length > 0) {
+					return false;
+				}
+				// recursive wildcard matches anything so we terminate here if the domain part is non empty
+				return domainPart !== undefined;
+			}
+			case undefined:
+			default: {
+				if (domainPart !== patternPart) {
+					return false;
+				}
+			}
+		}
+	}
+
+	// We exhausted the pattern. If we also exhausted the domain we have a match
+	return domainParts.length === 0;
+}
+
+function isAllowedOrigin(originDomain: string, allowedActionOrigins: string[] | undefined = []) {
+	return allowedActionOrigins.some(
+		(allowedOrigin) =>
+			allowedOrigin &&
+			(allowedOrigin === originDomain || matchWildcardDomain(originDomain, allowedOrigin)),
+	);
+}

package/src/lib/components/MemoryRouter.tsrx

@@ -0,0 +1,42 @@
+// MemoryRouter — transcribed from react-router@7.18.1 lib/components.tsx.
+// A declarative Router over an in-memory history stack.
+import { startTransition, useCallback, useLayoutEffect, useRef, useState } from 'octane';
+import { createMemoryHistory } from '../router/history.ts';
+import { Router } from './Router.tsrx';
+
+export function MemoryRouter(props) @{
+	const { basename, children, initialEntries, initialIndex, useTransitions } = props;
+
+	const historyRef = useRef(null);
+	if (historyRef.current == null) {
+		historyRef.current = createMemoryHistory({
+			initialEntries,
+			initialIndex,
+			v5Compat: true,
+		});
+	}
+
+	const history = historyRef.current;
+	const [state, setStateImpl] = useState({
+		action: history.action,
+		location: history.location,
+	});
+	const setState = useCallback((newState) => {
+		if (useTransitions === false) {
+			setStateImpl(newState);
+		} else {
+			startTransition(() => setStateImpl(newState));
+		}
+	}, [useTransitions]);
+
+	useLayoutEffect(() => history.listen(setState), [history, setState]);
+
+	<Router
+		basename={basename}
+		location={state.location}
+		navigationType={state.action}
+		navigator={history}
+		useTransitions={useTransitions}
+		children={children}
+	/>
+}

package/src/lib/components/MemoryRouter.tsrx.d.ts

@@ -0,0 +1,10 @@
+// Type declaration for the .tsrx component (resolved by relative path).
+import type { InitialEntry } from '../router/history';
+
+export declare const MemoryRouter: (props: {
+	basename?: string;
+	children?: unknown;
+	initialEntries?: InitialEntry[];
+	initialIndex?: number;
+	useTransitions?: boolean;
+}) => unknown;

package/src/lib/components/Navigate.ts

@@ -0,0 +1,60 @@
+// Navigate — transcribed from react-router@7.18.1 lib/components.tsx.
+// Renders nothing; navigates from an effect on mount/update. Plain .ts (no
+// JSX needed); the hooks it composes handle a slotless caller via bare-tag
+// sub-slots.
+import { useContext, useEffect } from 'octane';
+import { NavigationContext, RouteContext } from '../context';
+import { invariant, warning } from '../router/history';
+import type { To } from '../router/history';
+import type { RelativeRoutingType } from '../router/router';
+import { getResolveToMatches, resolveTo } from '../router/utils';
+import { useInRouterContext, useLocation, useNavigate } from '../hooks';
+
+export interface NavigateProps {
+	to: To;
+	replace?: boolean;
+	state?: any;
+	relative?: RelativeRoutingType;
+}
+
+/**
+ * A component-based version of `useNavigate` to use in a render-prop-less
+ * context — navigates to the given `to` value whenever it renders.
+ */
+export function Navigate(props: NavigateProps): null {
+	const { to, replace, state, relative } = props;
+	invariant(
+		useInRouterContext(),
+		`<Navigate> may be used only in the context of a <Router> component.`,
+	);
+
+	const { static: isStatic } = useContext(NavigationContext);
+
+	warning(
+		!isStatic,
+		`<Navigate> must not be used on the initial render in a <StaticRouter>. ` +
+			`This is a no-op, but you should modify your code so the <Navigate> is ` +
+			`only ever rendered in response to some user interaction or state change.`,
+	);
+
+	const { matches } = useContext(RouteContext);
+	const { pathname: locationPathname } = useLocation();
+	const navigate = useNavigate() as (to: To, opts?: any) => void;
+
+	// Resolve the path outside of the effect so repeat effect runs navigate to
+	// the same place (upstream: StrictMode double-invoke safety).
+	const path = resolveTo(to, getResolveToMatches(matches), locationPathname, relative === 'path');
+	const jsonPath = JSON.stringify(path);
+
+	// Plain-.ts component: hand-passed stable slot (state is keyed per
+	// component-instance scope).
+	useEffect(
+		() => {
+			navigate(JSON.parse(jsonPath), { replace, state, relative });
+		},
+		[navigate, jsonPath, relative, replace, state],
+		Symbol.for('rr:navigate:eff') as any,
+	);
+
+	return null;
+}

package/src/lib/components/Router.tsrx

@@ -0,0 +1,88 @@
+// Router — transcribed from react-router@7.18.1 lib/components.tsx. The
+// low-level context provider every router variant renders through.
+import { useMemo } from 'octane';
+import { LocationContext, NavigationContext } from '../context.ts';
+import { Action as NavigationType, invariant, parsePath, warning } from '../router/history.ts';
+import { stripBasename } from '../router/utils.ts';
+import { useInRouterContext } from '../hooks.ts';
+
+export function Router(props) @{
+	const {
+		basename: basenameProp = '/',
+		children = null,
+		location: locationPropIn,
+		navigationType = NavigationType.Pop,
+		navigator,
+		static: staticProp = false,
+		useTransitions,
+	} = props;
+
+	invariant(
+		!useInRouterContext(),
+		`You cannot render a <Router> inside another <Router>.` +
+			` You should never have more than one in your app.`,
+	);
+
+	// Preserve trailing slashes on basename, so we can let the user control
+	// the enforcement of trailing slashes throughout the app
+	const basename = basenameProp.replace(/^\/*/, '/');
+	const navigationContext = useMemo(
+		() => ({
+			basename,
+			navigator,
+			static: staticProp,
+			useTransitions,
+			future: {},
+		}),
+		[basename, navigator, staticProp, useTransitions],
+	);
+
+	let locationProp = locationPropIn;
+	if (typeof locationProp === 'string') {
+		locationProp = parsePath(locationProp);
+	}
+
+	const {
+		pathname = '/',
+		search = '',
+		hash = '',
+		state = null,
+		key = 'default',
+		mask,
+	} = locationProp;
+
+	const locationContext = useMemo(() => {
+		const trailingPathname = stripBasename(pathname, basename);
+
+		if (trailingPathname == null) {
+			return null;
+		}
+
+		return {
+			location: {
+				pathname: trailingPathname,
+				search,
+				hash,
+				state,
+				key,
+				mask,
+			},
+			navigationType,
+		};
+	}, [basename, pathname, search, hash, state, key, navigationType, mask]);
+
+	warning(
+		locationContext != null,
+		`<Router basename="${basename}"> is not able to match the URL ` +
+			`"${pathname}${search}${hash}" because it does not start with the ` +
+			`basename, so the <Router> won't render anything.`,
+	);
+
+	@if (locationContext == null) {
+		<></>
+	} @else {
+		<NavigationContext.Provider value={navigationContext}>
+			<LocationContext.Provider value={locationContext}>{children}</LocationContext.Provider>
+		</NavigationContext.Provider>
+	}
+}

package/src/lib/components/Router.tsrx.d.ts

@@ -0,0 +1,13 @@
+// Type declaration for the .tsrx component (resolved by relative path).
+import type { Location } from '../router/history';
+import type { Navigator } from '../context';
+
+export declare const Router: (props: {
+	basename?: string;
+	children?: unknown;
+	location: Partial<Location> | string;
+	navigationType?: any;
+	navigator: Navigator;
+	static?: boolean;
+	useTransitions?: boolean;
+}) => unknown;