@real-router/react 0.27.1 → 0.27.3

package/src/components/InkLink.tsx

@@ -1,134 +0,0 @@
-import { Text, useFocus, useInput } from "ink";
-import { memo } from "react";
-
-import { EMPTY_OPTIONS, EMPTY_PARAMS } from "../constants";
-import { shallowEqual } from "../dom-utils";
-import { useIsActiveRoute } from "../hooks/useIsActiveRoute";
-import { useRouter } from "../hooks/useRouter";
-
-import type { InkLinkProps } from "../ink-types";
-import type { FC } from "react";
-
-/**
- * Pick the most specific value across focus / active / base priority.
- * Focus wins over active; active wins over base. Each layer falls through
- * to the next when its value is undefined, matching the original explicit
- * if/else cascade for both `color` and `inverse`.
- */
-function pickPriority<T>(
-  isFocused: boolean,
-  isRouteActive: boolean,
-  focusValue: T | undefined,
-  activeValue: T | undefined,
-  baseValue: T | undefined,
-): T | undefined {
-  if (isFocused) {
-    return focusValue ?? activeValue ?? baseValue;
-  }
-
-  if (isRouteActive) {
-    return activeValue ?? baseValue;
-  }
-
-  return baseValue;
-}
-
-function areInkLinkPropsEqual(
-  prev: Readonly<InkLinkProps>,
-  next: Readonly<InkLinkProps>,
-): boolean {
-  return (
-    prev.routeName === next.routeName &&
-    prev.activeStrict === next.activeStrict &&
-    prev.ignoreQueryParams === next.ignoreQueryParams &&
-    prev.color === next.color &&
-    prev.activeColor === next.activeColor &&
-    prev.focusColor === next.focusColor &&
-    prev.inverse === next.inverse &&
-    prev.activeInverse === next.activeInverse &&
-    prev.focusInverse === next.focusInverse &&
-    prev.id === next.id &&
-    prev.autoFocus === next.autoFocus &&
-    prev.onSelect === next.onSelect &&
-    prev.children === next.children &&
-    shallowEqual(prev.routeParams, next.routeParams) &&
-    shallowEqual(prev.routeOptions, next.routeOptions)
-  );
-}
-
-const InkLinkImpl: FC<InkLinkProps> = ({
-  routeName,
-  routeParams = EMPTY_PARAMS,
-  routeOptions = EMPTY_OPTIONS,
-  activeStrict = false,
-  ignoreQueryParams = true,
-  color,
-  activeColor,
-  focusColor,
-  inverse,
-  activeInverse,
-  focusInverse,
-  id,
-  autoFocus,
-  onSelect,
-  children,
-}) => {
-  const router = useRouter();
-  const { isFocused } = useFocus({
-    ...(id !== undefined && { id }),
-    ...(autoFocus !== undefined && { autoFocus }),
-  });
-  const isRouteActive = useIsActiveRoute(
-    routeName,
-    routeParams,
-    activeStrict,
-    ignoreQueryParams,
-  );
-
-  // No useCallback: `useInput` consumes the handler via its own internal
-  // ref; a stable identity provides no cache-bail-out benefit here. Same
-  // reasoning as Link's handleClick.
-  useInput(
-    (_input, key) => {
-      if (key.return) {
-        onSelect?.();
-        router.navigate(routeName, routeParams, routeOptions).catch(() => {});
-      }
-    },
-    { isActive: isFocused },
-  );
-
-  const finalColor = pickPriority(
-    isFocused,
-    isRouteActive,
-    focusColor,
-    activeColor,
-    color,
-  );
-  const finalInverse = pickPriority(
-    isFocused,
-    isRouteActive,
-    focusInverse,
-    activeInverse,
-    inverse,
-  );
-
-  const textProps: { color?: string; inverse?: boolean } = {};
-
-  if (finalColor !== undefined) {
-    textProps.color = finalColor;
-  }
-
-  if (finalInverse !== undefined) {
-    textProps.inverse = finalInverse;
-  }
-
-  return <Text {...textProps}>{children}</Text>;
-};
-
-export const InkLink: FC<InkLinkProps> = memo(
-  InkLinkImpl,
-  areInkLinkPropsEqual,
-);
-
-InkLink.displayName = "InkLink";

package/src/components/InkRouterProvider.tsx

@@ -1,9 +0,0 @@
-import { RouterProvider } from "../RouterProvider";
-
-import type { InkRouterProviderProps } from "../ink-types";
-import type { FC } from "react";
-
-export const InkRouterProvider: FC<InkRouterProviderProps> = ({
-  router,
-  children,
-}) => <RouterProvider router={router}>{children}</RouterProvider>;

package/src/components/Link.tsx

@@ -1,117 +0,0 @@
-import { memo, useMemo } from "react";
-
-import { EMPTY_PARAMS, EMPTY_OPTIONS } from "../constants";
-import {
-  shouldNavigate,
-  buildHref,
-  buildActiveClassName,
-  navigateWithHash,
-  shallowEqual,
-} from "../dom-utils";
-import { useIsActiveRoute } from "../hooks/useIsActiveRoute";
-import { useRouter } from "../hooks/useRouter";
-
-import type { LinkProps } from "../types";
-import type { FC, MouseEvent } from "react";
-
-function areLinkPropsEqual(
-  prev: Readonly<LinkProps>,
-  next: Readonly<LinkProps>,
-): boolean {
-  return (
-    prev.routeName === next.routeName &&
-    prev.className === next.className &&
-    prev.activeClassName === next.activeClassName &&
-    prev.activeStrict === next.activeStrict &&
-    prev.ignoreQueryParams === next.ignoreQueryParams &&
-    prev.onClick === next.onClick &&
-    prev.target === next.target &&
-    prev.style === next.style &&
-    prev.children === next.children &&
-    prev.hash === next.hash &&
-    shallowEqual(prev.routeParams, next.routeParams) &&
-    shallowEqual(prev.routeOptions, next.routeOptions)
-  );
-}
-
-const LinkImpl: FC<LinkProps> = ({
-  routeName,
-  routeParams = EMPTY_PARAMS,
-  routeOptions = EMPTY_OPTIONS,
-  className,
-  activeClassName = "active",
-  activeStrict = false,
-  ignoreQueryParams = true,
-  hash,
-  onClick,
-  target,
-  children,
-  ...props
-}) => {
-  // memo + areLinkPropsEqual guarantees that on bail-out the component does
-  // not render; on render, routeParams/routeOptions either changed reference
-  // (true change) or comparator failed (e.g., BigInt fallback to identity),
-  // so they're safe to use directly in hook deps.
-
-  const router = useRouter();
-
-  // When `hash` prop is set, active state requires both route AND hash to
-  // match (#532). Without this, three tab links sharing routeName="settings"
-  // would all be marked active by route-name alone, defeating tab semantics.
-  const isActive = useIsActiveRoute(
-    routeName,
-    routeParams,
-    activeStrict,
-    ignoreQueryParams,
-    hash,
-  );
-
-  // No useMemo: outer memo()+shallowEqual prevents Link re-render unless a
-  // prop actually changed. When this body runs, either `hash` differs from
-  // last render or another prop changed — in both cases the `{ hash }` alloc
-  // is unavoidable. The useMemo wrapper added one closure + deps slot per
-  // render without saving an allocation.
-  const hashOption = hash === undefined ? undefined : { hash };
-  const href = buildHref(router, routeName, routeParams, hashOption);
-
-  // useCallback was wasteful: 7 deps recreated the closure on every meaningful
-  // render anyway, and `<a onClick>` does not benefit from a stable function
-  // identity (no child-memo-bail-out chain past it). Inline arrow function is
-  // what React Compiler emits automatically for this shape.
-  const handleClick = (evt: MouseEvent<HTMLAnchorElement>) => {
-    if (onClick) {
-      onClick(evt);
-
-      if (evt.defaultPrevented) {
-        return;
-      }
-    }
-
-    if (!shouldNavigate(evt.nativeEvent) || target === "_blank") {
-      return;
-    }
-
-    evt.preventDefault();
-    navigateWithHash(router, routeName, routeParams, hash, routeOptions).catch(
-      () => {},
-    );
-  };
-
-  // Memoize the joined class string. parseTokens + Set + join on every render
-  // adds up on pages with N Links navigating frequently; deps cover every
-  // input the function reads so cache invalidation is exact.
-  const finalClassName = useMemo(
-    () => buildActiveClassName(isActive, activeClassName, className),
-    [isActive, activeClassName, className],
-  );
-
-  return (
-    <a {...props} href={href} className={finalClassName} onClick={handleClick}>
-      {children}
-    </a>
-  );
-};
-
-export const Link: FC<LinkProps> = memo(LinkImpl, areLinkPropsEqual);
-
-Link.displayName = "Link";

package/src/components/RouterErrorBoundary.tsx

@@ -1,69 +0,0 @@
-import { createDismissableError } from "@real-router/sources";
-import {
-  useEffect,
-  useLayoutEffect,
-  useMemo,
-  useRef,
-  useSyncExternalStore,
-} from "react";
-
-import { useRouter } from "../hooks/useRouter";
-
-import type { RouterError, State } from "@real-router/core";
-import type { ReactElement, ReactNode } from "react";
-
-export interface RouterErrorBoundaryProps {
-  readonly children: ReactNode;
-  readonly fallback: (error: RouterError, resetError: () => void) => ReactNode;
-  readonly onError?: (
-    error: RouterError,
-    toRoute: State | null,
-    fromRoute: State | null,
-  ) => void;
-}
-
-export function RouterErrorBoundary({
-  children,
-  fallback,
-  onError,
-}: RouterErrorBoundaryProps): ReactElement {
-  const router = useRouter();
-  // Per-router cached in @real-router/sources — the WeakMap lookup is cheap,
-  // but useMemo avoids it entirely on stable-router re-renders (the common
-  // case for boundaries mounted in app shells).
-  const store = useMemo(() => createDismissableError(router), [router]);
-  const snapshot = useSyncExternalStore(
-    store.subscribe,
-    store.getSnapshot,
-    store.getSnapshot,
-  );
-
-  const onErrorRef = useRef(onError);
-
-  // "Latest ref" pattern shared with useRouteEnter/useRouteExit: sync the
-  // callback to the ref via useLayoutEffect (synchronous, post-render,
-  // pre-paint) so the snapshot effect below reads the freshest callback
-  // without listing `onError` as a dep — and StrictMode's double-effect
-  // pass writes the same value twice harmlessly.
-  useLayoutEffect(() => {
-    onErrorRef.current = onError;
-  });
-
-  useEffect(() => {
-    if (snapshot.error) {
-      onErrorRef.current?.(
-        snapshot.error,
-        snapshot.toRoute,
-        snapshot.fromRoute,
-      );
-    }
-    // eslint-disable-next-line @eslint-react/exhaustive-deps -- onError tracked via ref, snapshot fields accessed inside callback
-  }, [snapshot.version]);
-
-  return (
-    <>
-      {children}
-      {snapshot.error ? fallback(snapshot.error, snapshot.resetError) : null}
-    </>
-  );
-}

package/src/components/ServerOnly.tsx

@@ -1,26 +0,0 @@
-import { useEffect, useState } from "react";
-
-import type { ReactNode } from "react";
-
-export interface ServerOnlyProps {
-  readonly children: ReactNode;
-  readonly fallback?: ReactNode;
-}
-
-export function ServerOnly({
-  children,
-  fallback = null,
-}: ServerOnlyProps): ReactNode {
-  const [mounted, setMounted] = useState(false);
-
-  useEffect(() => {
-    // SSR/hydration boundary: server emits the children branch, client matches
-    // it on first paint, then this effect flips state to swap in the fallback
-    // (or hide entirely). The intentional re-render keeps markup consistent
-    // across renders.
-    // eslint-disable-next-line @eslint-react/set-state-in-effect -- intentional post-hydration swap
-    setMounted(true);
-  }, []);
-
-  return mounted ? fallback : children;
-}

package/src/components/Streamed.tsx

@@ -1,30 +0,0 @@
-import { Suspense } from "react";
-
-import type { ReactNode } from "react";
-
-export interface StreamedProps {
-  /** Shown while any descendant `use(promise)` / `<Await>` is pending. */
-  readonly fallback: ReactNode;
-  readonly children: ReactNode;
-}
-
-/**
- * Cross-adapter alias for `<Suspense fallback={…}>`. Pairs with `<Await>`
- * for symmetry with `<Streamed>` boundaries in the SvelteKit / Solid
- * deferred-data conventions.
- *
- * ```tsx
- * <Streamed fallback={<Spinner />}>
- *   <Await<Review[]> name="reviews">
- *     {(reviews) => <ReviewList items={reviews} />}
- *   </Await>
- * </Streamed>
- * ```
- *
- * The component is a thin wrapper around React's native `<Suspense>` — no
- * additional behaviour. Use plain `<Suspense>` directly if you don't need
- * the cross-framework naming alignment.
- */
-export function Streamed({ fallback, children }: StreamedProps): ReactNode {
-  return <Suspense fallback={fallback}>{children}</Suspense>;
-}

package/src/components/modern/RouteView/RouteView.tsx

@@ -1,69 +0,0 @@
-import { useMemo, useRef } from "react";
-
-import { Match, NotFound, Self } from "./components";
-import { buildRenderList, collectElements } from "./helpers";
-import { useRouteNode } from "../../../hooks/useRouteNode";
-
-import type { RouteViewProps } from "./types";
-import type { ReactElement } from "react";
-
-function RouteViewRoot({
-  nodeName,
-  children,
-}: Readonly<RouteViewProps>): ReactElement | null {
-  const { route } = useRouteNode(nodeName);
-  const hasBeenActivatedRef = useRef<Set<string> | null>(null);
-
-  // eslint-disable-next-line @eslint-react/refs -- lazy init: assign once when null to avoid `new Set()` allocation on every render
-  hasBeenActivatedRef.current ??= new Set();
-
-  // Skip the Children.forEach + collectElements traversal when the children
-  // reference is unchanged. The common SPA case is a stable JSX tree across
-  // re-renders, so the cache hits on every render except the first.
-  //
-  // Streaming SSR caveat: with `renderToReadableStream`, React may invoke
-  // RouteView multiple times across chunks with a fresh `children` reference
-  // each time. The useMemo misses on each new render and the traversal runs
-  // again — this is the expected SSR cost; the alternative would be build-
-  // time codegen of the static route tree, which is out of scope here.
-  const elements = useMemo(() => {
-    const collected: ReactElement[] = [];
-
-    collectElements(children, collected);
-
-    return collected;
-  }, [children]);
-
-  if (!route) {
-    return null;
-  }
-
-  const { rendered } = buildRenderList(
-    elements,
-    route.name,
-    nodeName,
-    // eslint-disable-next-line @eslint-react/refs -- stable Set ref read for keepAlive tracking (never reassigned)
-    hasBeenActivatedRef.current,
-  );
-
-  if (rendered.length > 0) {
-    return <>{rendered}</>;
-  }
-
-  return null;
-}
-
-RouteViewRoot.displayName = "RouteView";
-
-export const RouteView = Object.assign(RouteViewRoot, {
-  Match,
-  Self,
-  NotFound,
-});
-
-export type {
-  RouteViewProps,
-  MatchProps as RouteViewMatchProps,
-  SelfProps as RouteViewSelfProps,
-  NotFoundProps as RouteViewNotFoundProps,
-} from "./types";

package/src/components/modern/RouteView/components.tsx

@@ -1,19 +0,0 @@
-import type { MatchProps, NotFoundProps, SelfProps } from "./types";
-
-export function Match(_props: MatchProps): null {
-  return null;
-}
-
-Match.displayName = "RouteView.Match";
-
-export function Self(_props: SelfProps): null {
-  return null;
-}
-
-Self.displayName = "RouteView.Self";
-
-export function NotFound(_props: NotFoundProps): null {
-  return null;
-}
-
-NotFound.displayName = "RouteView.NotFound";