@octanejs/remix-router 0.1.0

package/src/lib/dom/Form.tsrx

@@ -0,0 +1,76 @@
+// Form — transcribed from react-router@7.18.1 lib/dom/lib.tsx onto octane.
+// forwardRef → ref-as-prop. The submit handler is a NATIVE delegated `submit`
+// listener (octane has no synthetic events): `event.submitter` is read
+// directly off the native SubmitEvent where React goes through
+// `event.nativeEvent.submitter` — same value, no behavior change.
+import { startTransition, useContext } from 'octane';
+import { NavigationContext } from '../context.ts';
+import { ABSOLUTE_URL_REGEX } from '../router/url.ts';
+import { useFormAction, useSubmit } from './lib.ts';
+
+const defaultMethod = 'get';
+
+export function Form(props) @{
+	const {
+		discover = 'render',
+		fetcherKey,
+		navigate,
+		reloadDocument,
+		replace,
+		state,
+		method = defaultMethod,
+		action,
+		onSubmit,
+		relative,
+		preventScrollReset,
+		viewTransition,
+		defaultShouldRevalidate,
+		ref,
+		children,
+		...rest
+	} = props;
+
+	const { useTransitions } = useContext(NavigationContext);
+	const submit = useSubmit();
+	const formAction = useFormAction(action, { relative });
+	const formMethod =
+		method.toLowerCase() === 'get' ? 'get' : 'post';
+	const isAbsolute = typeof action === 'string' && ABSOLUTE_URL_REGEX.test(action);
+
+	function submitHandler(event) {
+		onSubmit && onSubmit(event);
+		if (event.defaultPrevented) return;
+		event.preventDefault();
+
+		const submitter = event.submitter ?? null;
+
+		const submitMethod = submitter && submitter.getAttribute('formmethod') || method;
+
+		const doSubmit = () => submit(submitter || event.currentTarget, {
+			fetcherKey,
+			method: submitMethod,
+			navigate,
+			replace,
+			state,
+			relative,
+			preventScrollReset,
+			viewTransition,
+			defaultShouldRevalidate,
+		});
+
+		if (useTransitions && navigate !== false) {
+			startTransition(() => doSubmit());
+		} else {
+			doSubmit();
+		}
+	}
+
+	<form
+		ref={ref}
+		method={formMethod}
+		action={formAction}
+		onSubmit={reloadDocument ? onSubmit : submitHandler}
+		{...rest}
+		data-discover={!isAbsolute && discover === 'render' ? 'true' : undefined}
+	>{children}</form>
+}

package/src/lib/dom/Form.tsrx.d.ts

@@ -0,0 +1,22 @@
+// Type declaration for the .tsrx component (resolved by relative path).
+import type { RelativeRoutingType } from '../router/router';
+
+export declare const Form: (props: {
+	children?: unknown;
+	method?: 'get' | 'post' | 'put' | 'patch' | 'delete' | string;
+	action?: string;
+	encType?: 'application/x-www-form-urlencoded' | 'multipart/form-data' | 'text/plain';
+	navigate?: boolean;
+	fetcherKey?: string;
+	replace?: boolean;
+	state?: any;
+	relative?: RelativeRoutingType;
+	preventScrollReset?: boolean;
+	reloadDocument?: boolean;
+	viewTransition?: boolean;
+	defaultShouldRevalidate?: boolean;
+	discover?: 'render' | 'none';
+	onSubmit?: (event: SubmitEvent) => void;
+	ref?: unknown;
+	[key: string]: unknown;
+}) => unknown;

package/src/lib/dom/Link.tsrx

@@ -0,0 +1,91 @@
+// Link — transcribed from react-router@7.18.1 lib/dom/lib.tsx onto octane.
+// forwardRef → ref-as-prop (octane refs are props; documented divergence).
+// Framework-mode prefetching (usePrefetchBehavior / PrefetchPageLinks) is
+// inert outside a FrameworkContext upstream and is dropped here — the
+// `prefetch` prop is accepted and ignored (framework mode is out of scope).
+import { useContext } from 'octane';
+import { NavigationContext } from '../context.ts';
+import { ABSOLUTE_URL_REGEX } from '../router/url.ts';
+import { parseToInfo, resolveTo, joinPaths } from '../router/utils.ts';
+import { useHref, useLocation } from '../hooks.ts';
+import { useLinkClickHandler } from './hooks.ts';
+
+export function Link(props) @{
+	const {
+		onClick,
+		discover = 'render',
+		prefetch = 'none',
+		relative,
+		reloadDocument,
+		replace,
+		mask,
+		state,
+		target,
+		to: toProp,
+		preventScrollReset,
+		viewTransition,
+		defaultShouldRevalidate,
+		ref,
+		children,
+		...rest
+	} = props;
+
+	const { basename, navigator, useTransitions } = useContext(NavigationContext);
+	const isAbsolute = typeof toProp === 'string' && ABSOLUTE_URL_REGEX.test(toProp);
+
+	const parsed = parseToInfo(toProp, basename);
+	const to = parsed.to;
+
+	// Rendered into <a href> for relative URLs
+	const href = useHref(to, { relative });
+	const location = useLocation();
+
+	let maskedHref = null;
+
+	if (mask) {
+		// Inlined version of the `useHref` logic operating off the masked location
+		// instead of the current location
+		const resolved = resolveTo(mask, [], location.mask ? location.mask.pathname : '/', true);
+
+		// If we're operating within a basename, prepend it to the pathname prior
+		// to creating the href.  If this is a root navigation, then just use the raw
+		// basename which allows the basename to have full control over the presence
+		// of a trailing slash on root links
+		if (basename !== '/') {
+			resolved.pathname = resolved.pathname === '/'
+				? basename
+				: joinPaths([basename, resolved.pathname]);
+		}
+
+		maskedHref = navigator.createHref(resolved);
+	}
+
+	const internalOnClick = useLinkClickHandler(to, {
+		replace,
+		mask,
+		state,
+		target,
+		preventScrollReset,
+		relative,
+		viewTransition,
+		defaultShouldRevalidate,
+		useTransitions,
+	});
+	function handleClick(event) {
+		if (onClick) onClick(event);
+		if (!event.defaultPrevented) {
+			internalOnClick(event);
+		}
+	}
+
+	const isSpaLink = !(parsed.isExternal || reloadDocument);
+
+	<a
+		{...rest}
+		href={(isSpaLink ? maskedHref : undefined) || parsed.absoluteURL || href}
+		onClick={isSpaLink ? handleClick : onClick}
+		ref={ref}
+		target={target}
+		data-discover={!isAbsolute && discover === 'render' ? 'true' : undefined}
+	>{children}</a>
+}

package/src/lib/dom/Link.tsrx.d.ts

@@ -0,0 +1,22 @@
+// Type declaration for the .tsrx component (resolved by relative path).
+import type { To } from '../router/history';
+import type { RelativeRoutingType } from '../router/router';
+
+export declare const Link: (props: {
+	to: To;
+	children?: unknown;
+	onClick?: (event: MouseEvent) => void;
+	discover?: 'render' | 'none';
+	prefetch?: 'none' | 'intent' | 'render' | 'viewport';
+	relative?: RelativeRoutingType;
+	reloadDocument?: boolean;
+	replace?: boolean;
+	mask?: To;
+	state?: any;
+	target?: string;
+	preventScrollReset?: boolean;
+	viewTransition?: boolean;
+	defaultShouldRevalidate?: boolean;
+	ref?: unknown;
+	[key: string]: unknown;
+}) => unknown;

package/src/lib/dom/NavLink.tsrx

@@ -0,0 +1,118 @@
+// NavLink — transcribed from react-router@7.18.1 lib/dom/lib.tsx onto octane.
+// forwardRef → ref-as-prop. Renders <Link> with active/pending-derived
+// className/style/aria-current; `className`, `style`, and `children` accept
+// render props receiving { isActive, isPending, isTransitioning }. Octane
+// note: a render-prop children is a plain function; the natural block
+// children pass through untouched (isChildrenBlock guard, as in Await).
+import { isChildrenBlock, useContext } from 'octane';
+import { DataRouterStateContext, NavigationContext } from '../context.ts';
+import { stripBasename } from '../router/utils.ts';
+import { useLocation, useResolvedPath } from '../hooks.ts';
+import { useViewTransitionState } from './lib.ts';
+import { Link } from './Link.tsrx';
+
+export function NavLink(props) @{
+	const {
+		'aria-current': ariaCurrentProp = 'page',
+		caseSensitive = false,
+		className: classNameProp = '',
+		end = false,
+		style: styleProp,
+		to,
+		viewTransition,
+		children,
+		ref,
+		...rest
+	} = props;
+
+	const path = useResolvedPath(to, { relative: rest.relative });
+	const location = useLocation();
+	const routerState = useContext(DataRouterStateContext);
+	const { navigator, basename } = useContext(NavigationContext);
+	const isTransitioning =
+		routerState != null &&
+			// Conditional usage is OK here because the usage of a data router is static
+			useViewTransitionState(path) &&
+			viewTransition === true;
+
+	let toPathname = navigator.encodeLocation
+		? navigator.encodeLocation(path).pathname
+		: path.pathname;
+	let locationPathname = location.pathname;
+	let nextLocationPathname =
+		routerState && routerState.navigation && routerState.navigation.location
+			? routerState.navigation.location.pathname
+			: null;
+
+	if (!caseSensitive) {
+		locationPathname = locationPathname.toLowerCase();
+		nextLocationPathname = nextLocationPathname ? nextLocationPathname.toLowerCase() : null;
+		toPathname = toPathname.toLowerCase();
+	}
+
+	if (nextLocationPathname && basename) {
+		nextLocationPathname = stripBasename(nextLocationPathname, basename) || nextLocationPathname;
+	}
+
+	// If the `to` has a trailing slash, look at that exact spot.  Otherwise,
+	// we're looking for a slash _after_ what's in `to`.  For example:
+	//
+	// <NavLink to="/users"> and <NavLink to="/users/">
+	// both want to look for a / at index 6 to match URL `/users/matt`
+	const endSlashPosition =
+		toPathname !== '/' && toPathname.endsWith('/') ? toPathname.length - 1 : toPathname.length;
+	const isActive =
+		locationPathname === toPathname ||
+			!end && locationPathname.startsWith(toPathname) &&
+				locationPathname.charAt(endSlashPosition) === '/';
+
+	const isPending =
+		nextLocationPathname != null &&
+			(nextLocationPathname === toPathname ||
+				!end && nextLocationPathname.startsWith(toPathname) &&
+					nextLocationPathname.charAt(toPathname.length) === '/');
+
+	const renderProps = {
+		isActive,
+		isPending,
+		isTransitioning,
+	};
+
+	const ariaCurrent = isActive ? ariaCurrentProp : undefined;
+
+	let className;
+	if (typeof classNameProp === 'function') {
+		className = classNameProp(renderProps);
+	} else {
+		// If the className prop is not a function, we use a default `active`
+		// class for <NavLink />s that are active. In v5 `active` was the default
+		// value for `activeClassName`, but we are removing that API and can still
+		// use the old default behavior for a cleaner upgrade path and keep the
+		// simple styling rules working as they currently do.
+		className = [
+			classNameProp,
+			isActive ? 'active' : null,
+			isPending ? 'pending' : null,
+			isTransitioning ? 'transitioning' : null,
+		].filter(Boolean).join(' ');
+	}
+
+	const style =
+		typeof styleProp === 'function' ? styleProp(renderProps) : styleProp;
+
+	// Render-prop children are called with the state object; block children
+	// pass through untouched (PROP position — see the children-forwarding rule).
+	const resolvedChildren =
+		typeof children === 'function' && !isChildrenBlock(children) ? children(renderProps) : children;
+
+	<Link
+		{...rest}
+		aria-current={ariaCurrent}
+		className={className}
+		ref={ref}
+		style={style}
+		to={to}
+		viewTransition={viewTransition}
+		children={resolvedChildren}
+	/>
+}

package/src/lib/dom/NavLink.tsrx.d.ts

@@ -0,0 +1,33 @@
+// Type declaration for the .tsrx component (resolved by relative path).
+import type { To } from '../router/history';
+import type { RelativeRoutingType } from '../router/router';
+
+export type NavLinkRenderProps = {
+	isActive: boolean;
+	isPending: boolean;
+	isTransitioning: boolean;
+};
+
+export declare const NavLink: (props: {
+	to: To;
+	children?: unknown | ((props: NavLinkRenderProps) => unknown);
+	'aria-current'?: string;
+	caseSensitive?: boolean;
+	className?: string | ((props: NavLinkRenderProps) => string | undefined);
+	end?: boolean;
+	style?: object | ((props: NavLinkRenderProps) => object | undefined);
+	onClick?: (event: MouseEvent) => void;
+	discover?: 'render' | 'none';
+	prefetch?: 'none' | 'intent' | 'render' | 'viewport';
+	relative?: RelativeRoutingType;
+	reloadDocument?: boolean;
+	replace?: boolean;
+	mask?: To;
+	state?: any;
+	target?: string;
+	preventScrollReset?: boolean;
+	viewTransition?: boolean;
+	defaultShouldRevalidate?: boolean;
+	ref?: unknown;
+	[key: string]: unknown;
+}) => unknown;