@rshono/core 1.0.0-rc.2 → 1.0.0-rc.21

package/dist/runtime/boundaries.d.ts

@@ -1,102 +1,116 @@
 import { Component, type ReactNode } from 'react';
 /**
- * What an {@link ErrorBoundary} / {@link Boundary} renders once a child throws.
- * Either a static node, or a render function that also gets a `reset` callback
- * to clear the error and re-render the children (e.g. a "Try again" button).
+ * What a {@link CatchBoundary} / {@link AsyncBoundary} renders once a child throws: either a static
+ * node, or a render function given the error and a `reset` callback that clears it and re-renders the
+ * children (a "Try again" button, say).
  *
- * The render-function form only works when the boundary is used from a `'use
- * client'` component — functions can't cross the server→client boundary. From a
- * server component, pass a `ReactNode`.
+ * The function form only works from a `'use client'` component — functions can't cross the
+ * server→client boundary. From a server component, pass a `ReactNode`.
  */
 export type ErrorFallback = ReactNode | ((error: Error, reset: () => void) => ReactNode);
-export interface ErrorBoundaryProps {
+/** Props for {@link CatchBoundary}. */
+export interface CatchBoundaryProps {
     /**
-     * Rendered in place of the children after one of them throws. Omit it to
-     * report the error via `onError` and re-throw to the next boundary out (or
-     * the global error page) instead of handling it here.
+     * Rendered in place of the children after one of them throws. Omit it to report the error via
+     * `onError` and re-throw to the next boundary out — or the app's `error` page — instead of handling it
+     * here.
      */
     fallback?: ErrorFallback;
-    /** Called with the caught error (for logging / reporting). */
+    /**
+     * Called with the caught error, for logging or reporting.
+     *
+     * A function prop, so — like {@link ErrorFallback}'s function form — it can only be passed from a
+     * `'use client'` component. React refuses one from a server component by name: "Event handlers cannot be
+     * passed to Client Component props".
+     */
     onError?: (error: Error) => void;
     /**
-     * When any value in this array changes while the boundary is showing its
-     * fallback, the error is cleared automatically. Pass the current pathname to
-     * recover when the user navigates away: `resetKeys={[useNavigation().url.pathname]}`.
+     * Clears the error automatically when any value in this array changes while the fallback is showing.
+     * Pass the current pathname to recover when the user navigates away — `resetKeys={[url.pathname]}` from a
+     * page's `url` prop, which is the form that works from the server component rendering this boundary, or
+     * `resetKeys={[useNavigation().url.pathname]}` inside a `'use client'` component.
      */
     resetKeys?: readonly unknown[];
+    /** The subtree this boundary protects. */
     children: ReactNode;
 }
-interface ErrorBoundaryState {
+interface CatchBoundaryState {
     error: Error | null;
 }
 /**
- * A general-purpose error boundary. Catches errors thrown while rendering its
- * children — a client island that blew up, or a server component that rejected
- * on a soft navigation — and renders `fallback` in their place instead of
- * tearing down the whole page.
+ * A general-purpose error boundary: catches what its children throw — a client island that blew up, a
+ * server component that rejected on a soft navigation — and renders `fallback` in their place rather
+ * than tearing down the page.
  *
- * It's a `'use client'` component (React error boundaries must be), so drop it
- * anywhere in the tree from a server or client component. Use {@link Boundary}
- * when you also want a Suspense loading fallback in the same wrapper.
+ * It is a `'use client'` component (React error boundaries must be), so a server component can render
+ * it too. Reach for {@link AsyncBoundary} when you also want a Suspense loading fallback.
  *
  * @example
  * ```tsx
- * import { ErrorBoundary } from '@rshono/core/client';
+ * import { CatchBoundary } from '@rshono/core/client';
  *
- * <ErrorBoundary fallback={(error, reset) => (
+ * <CatchBoundary fallback={(error, reset) => (
  *   <div role="alert">
  *     <p>{error.message}</p>
  *     <button onClick={reset}>Try again</button>
  *   </div>
  * )}>
  *   <RiskyWidget />
- * </ErrorBoundary>
+ * </CatchBoundary>
  * ```
+ *
+ * @see {@link https://react.dev/reference/react/Component#catching-rendering-errors-with-an-error-boundary | React — error boundaries}
+ * @see {@link https://www.rshono.com/docs/api#rshonocoreclient | Docs — `@rshono/core/client`}
  */
-export declare class ErrorBoundary extends Component<ErrorBoundaryProps, ErrorBoundaryState> {
-    state: ErrorBoundaryState;
-    static getDerivedStateFromError(error: Error): ErrorBoundaryState;
+export declare class CatchBoundary extends Component<CatchBoundaryProps, CatchBoundaryState> {
+    state: CatchBoundaryState;
+    static getDerivedStateFromError(error: Error): CatchBoundaryState;
     componentDidCatch(error: Error): void;
-    componentDidUpdate(prev: ErrorBoundaryProps): void;
+    componentDidUpdate(prev: CatchBoundaryProps): void;
     reset: () => void;
     render(): ReactNode;
 }
-export interface BoundaryProps {
-    /** Suspense fallback, shown while the children (or their data) are still loading. */
-    loading?: ReactNode;
+/** Props for {@link AsyncBoundary}. */
+export interface AsyncBoundaryProps {
+    /**
+     * Suspense fallback, shown while the children or their data are still loading. Required — a loading
+     * state is the reason to reach for this over {@link CatchBoundary}, so showing nothing is an explicit
+     * `loading={null}`.
+     */
+    loading: ReactNode;
     /** Error fallback, shown if a child throws. See {@link ErrorFallback}. */
     error?: ErrorFallback;
-    /** Called with the caught error. */
+    /** Called with the caught error. From a `'use client'` component only — see {@link CatchBoundaryProps.onError}. */
     onError?: (error: Error) => void;
-    /** Clears the error fallback when any value changes — see {@link ErrorBoundaryProps.resetKeys}. */
+    /** Clears the error fallback when any value changes — see {@link CatchBoundaryProps.resetKeys}. */
     resetKeys?: readonly unknown[];
+    /** The subtree this boundary suspends on and protects. */
     children: ReactNode;
 }
 /**
- * A loading + error boundary in one wrapper — the common case for an async
- * section of a page. It always renders the same shape:
+ * A loading and error boundary in one wrapper — the common case for an async section of a page. It
+ * always renders the same shape:
  *
  * ```tsx
- * <ErrorBoundary fallback={error}>
+ * <CatchBoundary fallback={error}>
  *   <Suspense fallback={loading}>{children}</Suspense>
- * </ErrorBoundary>
+ * </CatchBoundary>
  * ```
  *
- * so `error` catches anything the children throw (including while suspended) and
- * `loading` shows until they resolve. Both fallbacks are optional: omit
- * `loading` and nothing shows while loading; omit `error` and thrown errors
- * propagate to the next boundary out (or the global error page) rather than
- * being caught here.
+ * so `loading` shows until the children resolve and `error` catches whatever they throw, suspended or
+ * not. `error` is optional: omit it and errors propagate to the next boundary out.
  *
  * @example
  * ```tsx
- * import { Boundary } from '@rshono/core/client';
+ * import { AsyncBoundary } from '@rshono/core/client';
  *
- * <Boundary loading={<Spinner />} error={(e, reset) => <Retry onClick={reset} />}>
+ * <AsyncBoundary loading={<Spinner />} error={(e, reset) => <Retry onClick={reset} />}>
  *   <SlowServerComponent />
- * </Boundary>
+ * </AsyncBoundary>
  * ```
+ *
+ * @see {@link https://react.dev/reference/react/Suspense | React — `<Suspense>`}
+ * @see {@link https://www.rshono.com/docs/api#rshonocoreclient | Docs — `@rshono/core/client`}
  */
-export declare function Boundary({ loading, error, onError, resetKeys, children }: BoundaryProps): ReactNode;
+export declare function AsyncBoundary({ loading, error, onError, resetKeys, children }: AsyncBoundaryProps): ReactNode;
 export {};
-//# sourceMappingURL=boundaries.d.ts.map

package/dist/runtime/boundaries.js

@@ -2,12 +2,9 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { Component, Suspense } from 'react';
 import { isControlDigest } from './control.js';
-/**
- * `redirect()` and `notFound()` reach the browser as a thrown error carrying a control digest.
- * They are navigation, not failure, so no boundary may absorb one — otherwise a `redirect()` from
- * a component inside a `<Boundary>` would render "something went wrong" instead of navigating.
- * They're re-thrown to the root, where the runtime turns the digest into a real navigation.
- */
+// `redirect()` and `notFound()` reach the browser as a thrown error carrying a control digest. They are
+// navigation, not failure, so no boundary absorbs one — they are re-thrown to the root, where the
+// runtime turns the digest into a real navigation.
 function isControlError(error) {
     return isControlDigest(error?.digest);
 }
@@ -15,37 +12,38 @@ function keysChanged(a, b) {
     return a.length !== b.length || a.some((value, i) => !Object.is(value, b[i]));
 }
 /**
- * A general-purpose error boundary. Catches errors thrown while rendering its
- * children — a client island that blew up, or a server component that rejected
- * on a soft navigation — and renders `fallback` in their place instead of
- * tearing down the whole page.
+ * A general-purpose error boundary: catches what its children throw — a client island that blew up, a
+ * server component that rejected on a soft navigation — and renders `fallback` in their place rather
+ * than tearing down the page.
  *
- * It's a `'use client'` component (React error boundaries must be), so drop it
- * anywhere in the tree from a server or client component. Use {@link Boundary}
- * when you also want a Suspense loading fallback in the same wrapper.
+ * It is a `'use client'` component (React error boundaries must be), so a server component can render
+ * it too. Reach for {@link AsyncBoundary} when you also want a Suspense loading fallback.
  *
  * @example
  * ```tsx
- * import { ErrorBoundary } from '@rshono/core/client';
+ * import { CatchBoundary } from '@rshono/core/client';
  *
- * <ErrorBoundary fallback={(error, reset) => (
+ * <CatchBoundary fallback={(error, reset) => (
  *   <div role="alert">
  *     <p>{error.message}</p>
  *     <button onClick={reset}>Try again</button>
  *   </div>
  * )}>
  *   <RiskyWidget />
- * </ErrorBoundary>
+ * </CatchBoundary>
  * ```
+ *
+ * @see {@link https://react.dev/reference/react/Component#catching-rendering-errors-with-an-error-boundary | React — error boundaries}
+ * @see {@link https://www.rshono.com/docs/api#rshonocoreclient | Docs — `@rshono/core/client`}
  */
-export class ErrorBoundary extends Component {
+export class CatchBoundary extends Component {
     state = { error: null };
     static getDerivedStateFromError(error) {
         return { error };
     }
     componentDidCatch(error) {
         if (isControlError(error))
-            return; // a redirect isn't an error to report
+            return;
         this.props.onError?.(error);
     }
     componentDidUpdate(prev) {
@@ -61,41 +59,41 @@ export class ErrorBoundary extends Component {
         const { error } = this.state;
         if (error !== null) {
             if (isControlError(error))
-                throw error; // navigation in flight — never show a fallback for it
+                throw error;
             const { fallback } = this.props;
             if (fallback === undefined)
-                throw error; // no local fallback → propagate to an outer boundary
+                throw error; // propagate to an outer boundary
             return typeof fallback === 'function' ? fallback(error, this.reset) : fallback;
         }
         return this.props.children;
     }
 }
 /**
- * A loading + error boundary in one wrapper — the common case for an async
- * section of a page. It always renders the same shape:
+ * A loading and error boundary in one wrapper — the common case for an async section of a page. It
+ * always renders the same shape:
  *
  * ```tsx
- * <ErrorBoundary fallback={error}>
+ * <CatchBoundary fallback={error}>
  *   <Suspense fallback={loading}>{children}</Suspense>
- * </ErrorBoundary>
+ * </CatchBoundary>
  * ```
  *
- * so `error` catches anything the children throw (including while suspended) and
- * `loading` shows until they resolve. Both fallbacks are optional: omit
- * `loading` and nothing shows while loading; omit `error` and thrown errors
- * propagate to the next boundary out (or the global error page) rather than
- * being caught here.
+ * so `loading` shows until the children resolve and `error` catches whatever they throw, suspended or
+ * not. `error` is optional: omit it and errors propagate to the next boundary out.
  *
  * @example
  * ```tsx
- * import { Boundary } from '@rshono/core/client';
+ * import { AsyncBoundary } from '@rshono/core/client';
  *
- * <Boundary loading={<Spinner />} error={(e, reset) => <Retry onClick={reset} />}>
+ * <AsyncBoundary loading={<Spinner />} error={(e, reset) => <Retry onClick={reset} />}>
  *   <SlowServerComponent />
- * </Boundary>
+ * </AsyncBoundary>
  * ```
+ *
+ * @see {@link https://react.dev/reference/react/Suspense | React — `<Suspense>`}
+ * @see {@link https://www.rshono.com/docs/api#rshonocoreclient | Docs — `@rshono/core/client`}
  */
-export function Boundary({ loading = null, error, onError, resetKeys, children }) {
-    return (_jsx(ErrorBoundary, { fallback: error, onError: onError, resetKeys: resetKeys, children: _jsx(Suspense, { fallback: loading, children: children }) }));
+export function AsyncBoundary({ loading, error, onError, resetKeys, children }) {
+    return (_jsx(CatchBoundary, { fallback: error, onError: onError, resetKeys: resetKeys, children: _jsx(Suspense, { fallback: loading, children: children }) }));
 }
 //# sourceMappingURL=boundaries.js.map

package/dist/runtime/boundaries.js.map

@@ -1 +1 @@
-{"version":3,"file":"boundaries.js","sourceRoot":"","sources":["../../src/runtime/boundaries.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;AAEb,OAAO,EAAE,SAAS,EAAE,QAAQ,EAAkB,MAAM,OAAO,CAAC;AAC5D,OAAO,EAAE,eAAe,EAAE,MAAM,cAAc,CAAC;AAE/C;;;;;GAKG;AACH,SAAS,cAAc,CAAC,KAAc;IACpC,OAAO,eAAe,CAAE,KAAqC,EAAE,MAAM,CAAC,CAAC;AACzE,CAAC;AAmCD,SAAS,WAAW,CAAC,CAAqB,EAAE,CAAqB;IAC/D,OAAO,CAAC,CAAC,MAAM,KAAK,CAAC,CAAC,MAAM,IAAI,CAAC,CAAC,IAAI,CAAC,CAAC,KAAK,EAAE,CAAC,EAAE,EAAE,CAAC,CAAC,MAAM,CAAC,EAAE,CAAC,KAAK,EAAE,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;AAChF,CAAC;AAED;;;;;;;;;;;;;;;;;;;;;;;GAuBG;AACH,MAAM,OAAO,aAAc,SAAQ,SAAiD;IAClF,KAAK,GAAuB,EAAE,KAAK,EAAE,IAAI,EAAE,CAAC;IAE5C,MAAM,CAAC,wBAAwB,CAAC,KAAY;QAC1C,OAAO,EAAE,KAAK,EAAE,CAAC;IACnB,CAAC;IAED,iBAAiB,CAAC,KAAY;QAC5B,IAAI,cAAc,CAAC,KAAK,CAAC;YAAE,OAAO,CAAC,sCAAsC;QACzE,IAAI,CAAC,KAAK,CAAC,OAAO,EAAE,CAAC,KAAK,CAAC,CAAC;IAC9B,CAAC;IAED,kBAAkB,CAAC,IAAwB;QACzC,MAAM,EAAE,SAAS,EAAE,GAAG,IAAI,CAAC,KAAK,CAAC;QACjC,IAAI,IAAI,CAAC,KAAK,CAAC,KAAK,IAAI,IAAI,CAAC,SAAS,IAAI,SAAS,IAAI,WAAW,CAAC,IAAI,CAAC,SAAS,EAAE,SAAS,CAAC,EAAE,CAAC;YAC9F,IAAI,CAAC,KAAK,EAAE,CAAC;QACf,CAAC;IACH,CAAC;IAED,KAAK,GAAG,GAAS,EAAE;QACjB,IAAI,CAAC,QAAQ,CAAC,EAAE,KAAK,EAAE,IAAI,EAAE,CAAC,CAAC;IACjC,CAAC,CAAC;IAEF,MAAM;QACJ,MAAM,EAAE,KAAK,EAAE,GAAG,IAAI,CAAC,KAAK,CAAC;QAC7B,IAAI,KAAK,KAAK,IAAI,EAAE,CAAC;YACnB,IAAI,cAAc,CAAC,KAAK,CAAC;gBAAE,MAAM,KAAK,CAAC,CAAC,sDAAsD;YAC9F,MAAM,EAAE,QAAQ,EAAE,GAAG,IAAI,CAAC,KAAK,CAAC;YAChC,IAAI,QAAQ,KAAK,SAAS;gBAAE,MAAM,KAAK,CAAC,CAAC,qDAAqD;YAC9F,OAAO,OAAO,QAAQ,KAAK,UAAU,CAAC,CAAC,CAAC,QAAQ,CAAC,KAAK,EAAE,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,QAAQ,CAAC;QACjF,CAAC;QACD,OAAO,IAAI,CAAC,KAAK,CAAC,QAAQ,CAAC;IAC7B,CAAC;CACF;AAcD;;;;;;;;;;;;;;;;;;;;;;;;GAwBG;AACH,MAAM,UAAU,QAAQ,CAAC,EAAE,OAAO,GAAG,IAAI,EAAE,KAAK,EAAE,OAAO,EAAE,SAAS,EAAE,QAAQ,EAAiB;IAC7F,OAAO,CACL,KAAC,aAAa,IAAC,QAAQ,EAAE,KAAK,EAAE,OAAO,EAAE,OAAO,EAAE,SAAS,EAAE,SAAS,YACpE,KAAC,QAAQ,IAAC,QAAQ,EAAE,OAAO,YAAG,QAAQ,GAAY,GACpC,CACjB,CAAC;AACJ,CAAC","sourcesContent":["'use client';\n\nimport { Component, Suspense, type ReactNode } from 'react';\nimport { isControlDigest } from './control.js';\n\n/**\n * `redirect()` and `notFound()` reach the browser as a thrown error carrying a control digest.\n * They are navigation, not failure, so no boundary may absorb one — otherwise a `redirect()` from\n * a component inside a `<Boundary>` would render \"something went wrong\" instead of navigating.\n * They're re-thrown to the root, where the runtime turns the digest into a real navigation.\n */\nfunction isControlError(error: unknown): boolean {\n  return isControlDigest((error as { digest?: unknown } | null)?.digest);\n}\n\n/**\n * What an {@link ErrorBoundary} / {@link Boundary} renders once a child throws.\n * Either a static node, or a render function that also gets a `reset` callback\n * to clear the error and re-render the children (e.g. a \"Try again\" button).\n *\n * The render-function form only works when the boundary is used from a `'use\n * client'` component — functions can't cross the server→client boundary. From a\n * server component, pass a `ReactNode`.\n */\nexport type ErrorFallback = ReactNode | ((error: Error, reset: () => void) => ReactNode);\n\nexport interface ErrorBoundaryProps {\n  /**\n   * Rendered in place of the children after one of them throws. Omit it to\n   * report the error via `onError` and re-throw to the next boundary out (or\n   * the global error page) instead of handling it here.\n   */\n  fallback?: ErrorFallback;\n  /** Called with the caught error (for logging / reporting). */\n  onError?: (error: Error) => void;\n  /**\n   * When any value in this array changes while the boundary is showing its\n   * fallback, the error is cleared automatically. Pass the current pathname to\n   * recover when the user navigates away: `resetKeys={[useNavigation().url.pathname]}`.\n   */\n  resetKeys?: readonly unknown[];\n  children: ReactNode;\n}\n\ninterface ErrorBoundaryState {\n  error: Error | null;\n}\n\nfunction keysChanged(a: readonly unknown[], b: readonly unknown[]): boolean {\n  return a.length !== b.length || a.some((value, i) => !Object.is(value, b[i]));\n}\n\n/**\n * A general-purpose error boundary. Catches errors thrown while rendering its\n * children — a client island that blew up, or a server component that rejected\n * on a soft navigation — and renders `fallback` in their place instead of\n * tearing down the whole page.\n *\n * It's a `'use client'` component (React error boundaries must be), so drop it\n * anywhere in the tree from a server or client component. Use {@link Boundary}\n * when you also want a Suspense loading fallback in the same wrapper.\n *\n * @example\n * ```tsx\n * import { ErrorBoundary } from '@rshono/core/client';\n *\n * <ErrorBoundary fallback={(error, reset) => (\n *   <div role=\"alert\">\n *     <p>{error.message}</p>\n *     <button onClick={reset}>Try again</button>\n *   </div>\n * )}>\n *   <RiskyWidget />\n * </ErrorBoundary>\n * ```\n */\nexport class ErrorBoundary extends Component<ErrorBoundaryProps, ErrorBoundaryState> {\n  state: ErrorBoundaryState = { error: null };\n\n  static getDerivedStateFromError(error: Error): ErrorBoundaryState {\n    return { error };\n  }\n\n  componentDidCatch(error: Error): void {\n    if (isControlError(error)) return; // a redirect isn't an error to report\n    this.props.onError?.(error);\n  }\n\n  componentDidUpdate(prev: ErrorBoundaryProps): void {\n    const { resetKeys } = this.props;\n    if (this.state.error && prev.resetKeys && resetKeys && keysChanged(prev.resetKeys, resetKeys)) {\n      this.reset();\n    }\n  }\n\n  reset = (): void => {\n    this.setState({ error: null });\n  };\n\n  render(): ReactNode {\n    const { error } = this.state;\n    if (error !== null) {\n      if (isControlError(error)) throw error; // navigation in flight — never show a fallback for it\n      const { fallback } = this.props;\n      if (fallback === undefined) throw error; // no local fallback → propagate to an outer boundary\n      return typeof fallback === 'function' ? fallback(error, this.reset) : fallback;\n    }\n    return this.props.children;\n  }\n}\n\nexport interface BoundaryProps {\n  /** Suspense fallback, shown while the children (or their data) are still loading. */\n  loading?: ReactNode;\n  /** Error fallback, shown if a child throws. See {@link ErrorFallback}. */\n  error?: ErrorFallback;\n  /** Called with the caught error. */\n  onError?: (error: Error) => void;\n  /** Clears the error fallback when any value changes — see {@link ErrorBoundaryProps.resetKeys}. */\n  resetKeys?: readonly unknown[];\n  children: ReactNode;\n}\n\n/**\n * A loading + error boundary in one wrapper — the common case for an async\n * section of a page. It always renders the same shape:\n *\n * ```tsx\n * <ErrorBoundary fallback={error}>\n *   <Suspense fallback={loading}>{children}</Suspense>\n * </ErrorBoundary>\n * ```\n *\n * so `error` catches anything the children throw (including while suspended) and\n * `loading` shows until they resolve. Both fallbacks are optional: omit\n * `loading` and nothing shows while loading; omit `error` and thrown errors\n * propagate to the next boundary out (or the global error page) rather than\n * being caught here.\n *\n * @example\n * ```tsx\n * import { Boundary } from '@rshono/core/client';\n *\n * <Boundary loading={<Spinner />} error={(e, reset) => <Retry onClick={reset} />}>\n *   <SlowServerComponent />\n * </Boundary>\n * ```\n */\nexport function Boundary({ loading = null, error, onError, resetKeys, children }: BoundaryProps): ReactNode {\n  return (\n    <ErrorBoundary fallback={error} onError={onError} resetKeys={resetKeys}>\n      <Suspense fallback={loading}>{children}</Suspense>\n    </ErrorBoundary>\n  );\n}\n"]}
+{"version":3,"file":"boundaries.js","sourceRoot":"","sources":["../../src/runtime/boundaries.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;AAEb,OAAO,EAAE,SAAS,EAAE,QAAQ,EAAkB,MAAM,OAAO,CAAC;AAC5D,OAAO,EAAE,eAAe,EAAE,MAAM,cAAc,CAAC;AAE/C,wGAAwG;AACxG,kGAAkG;AAClG,mDAAmD;AACnD,SAAS,cAAc,CAAC,KAAc;IACpC,OAAO,eAAe,CAAE,KAAqC,EAAE,MAAM,CAAC,CAAC;AACzE,CAAC;AA2CD,SAAS,WAAW,CAAC,CAAqB,EAAE,CAAqB;IAC/D,OAAO,CAAC,CAAC,MAAM,KAAK,CAAC,CAAC,MAAM,IAAI,CAAC,CAAC,IAAI,CAAC,CAAC,KAAK,EAAE,CAAC,EAAE,EAAE,CAAC,CAAC,MAAM,CAAC,EAAE,CAAC,KAAK,EAAE,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;AAChF,CAAC;AAED;;;;;;;;;;;;;;;;;;;;;;;;GAwBG;AACH,MAAM,OAAO,aAAc,SAAQ,SAAiD;IAClF,KAAK,GAAuB,EAAE,KAAK,EAAE,IAAI,EAAE,CAAC;IAE5C,MAAM,CAAC,wBAAwB,CAAC,KAAY;QAC1C,OAAO,EAAE,KAAK,EAAE,CAAC;IACnB,CAAC;IAED,iBAAiB,CAAC,KAAY;QAC5B,IAAI,cAAc,CAAC,KAAK,CAAC;YAAE,OAAO;QAClC,IAAI,CAAC,KAAK,CAAC,OAAO,EAAE,CAAC,KAAK,CAAC,CAAC;IAC9B,CAAC;IAED,kBAAkB,CAAC,IAAwB;QACzC,MAAM,EAAE,SAAS,EAAE,GAAG,IAAI,CAAC,KAAK,CAAC;QACjC,IAAI,IAAI,CAAC,KAAK,CAAC,KAAK,IAAI,IAAI,CAAC,SAAS,IAAI,SAAS,IAAI,WAAW,CAAC,IAAI,CAAC,SAAS,EAAE,SAAS,CAAC,EAAE,CAAC;YAC9F,IAAI,CAAC,KAAK,EAAE,CAAC;QACf,CAAC;IACH,CAAC;IAED,KAAK,GAAG,GAAS,EAAE;QACjB,IAAI,CAAC,QAAQ,CAAC,EAAE,KAAK,EAAE,IAAI,EAAE,CAAC,CAAC;IACjC,CAAC,CAAC;IAEF,MAAM;QACJ,MAAM,EAAE,KAAK,EAAE,GAAG,IAAI,CAAC,KAAK,CAAC;QAC7B,IAAI,KAAK,KAAK,IAAI,EAAE,CAAC;YACnB,IAAI,cAAc,CAAC,KAAK,CAAC;gBAAE,MAAM,KAAK,CAAC;YACvC,MAAM,EAAE,QAAQ,EAAE,GAAG,IAAI,CAAC,KAAK,CAAC;YAChC,IAAI,QAAQ,KAAK,SAAS;gBAAE,MAAM,KAAK,CAAC,CAAC,iCAAiC;YAC1E,OAAO,OAAO,QAAQ,KAAK,UAAU,CAAC,CAAC,CAAC,QAAQ,CAAC,KAAK,EAAE,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,QAAQ,CAAC;QACjF,CAAC;QACD,OAAO,IAAI,CAAC,KAAK,CAAC,QAAQ,CAAC;IAC7B,CAAC;CACF;AAoBD;;;;;;;;;;;;;;;;;;;;;;;;GAwBG;AACH,MAAM,UAAU,aAAa,CAAC,EAAE,OAAO,EAAE,KAAK,EAAE,OAAO,EAAE,SAAS,EAAE,QAAQ,EAAsB;IAChG,OAAO,CACL,KAAC,aAAa,IAAC,QAAQ,EAAE,KAAK,EAAE,OAAO,EAAE,OAAO,EAAE,SAAS,EAAE,SAAS,YACpE,KAAC,QAAQ,IAAC,QAAQ,EAAE,OAAO,YAAG,QAAQ,GAAY,GACpC,CACjB,CAAC;AACJ,CAAC","sourcesContent":["'use client';\n\nimport { Component, Suspense, type ReactNode } from 'react';\nimport { isControlDigest } from './control.js';\n\n// `redirect()` and `notFound()` reach the browser as a thrown error carrying a control digest. They are\n// navigation, not failure, so no boundary absorbs one — they are re-thrown to the root, where the\n// runtime turns the digest into a real navigation.\nfunction isControlError(error: unknown): boolean {\n  return isControlDigest((error as { digest?: unknown } | null)?.digest);\n}\n\n/**\n * What a {@link CatchBoundary} / {@link AsyncBoundary} renders once a child throws: either a static\n * node, or a render function given the error and a `reset` callback that clears it and re-renders the\n * children (a \"Try again\" button, say).\n *\n * The function form only works from a `'use client'` component — functions can't cross the\n * server→client boundary. From a server component, pass a `ReactNode`.\n */\nexport type ErrorFallback = ReactNode | ((error: Error, reset: () => void) => ReactNode);\n\n/** Props for {@link CatchBoundary}. */\nexport interface CatchBoundaryProps {\n  /**\n   * Rendered in place of the children after one of them throws. Omit it to report the error via\n   * `onError` and re-throw to the next boundary out — or the app's `error` page — instead of handling it\n   * here.\n   */\n  fallback?: ErrorFallback;\n  /**\n   * Called with the caught error, for logging or reporting.\n   *\n   * A function prop, so — like {@link ErrorFallback}'s function form — it can only be passed from a\n   * `'use client'` component. React refuses one from a server component by name: \"Event handlers cannot be\n   * passed to Client Component props\".\n   */\n  onError?: (error: Error) => void;\n  /**\n   * Clears the error automatically when any value in this array changes while the fallback is showing.\n   * Pass the current pathname to recover when the user navigates away — `resetKeys={[url.pathname]}` from a\n   * page's `url` prop, which is the form that works from the server component rendering this boundary, or\n   * `resetKeys={[useNavigation().url.pathname]}` inside a `'use client'` component.\n   */\n  resetKeys?: readonly unknown[];\n  /** The subtree this boundary protects. */\n  children: ReactNode;\n}\n\ninterface CatchBoundaryState {\n  error: Error | null;\n}\n\nfunction keysChanged(a: readonly unknown[], b: readonly unknown[]): boolean {\n  return a.length !== b.length || a.some((value, i) => !Object.is(value, b[i]));\n}\n\n/**\n * A general-purpose error boundary: catches what its children throw — a client island that blew up, a\n * server component that rejected on a soft navigation — and renders `fallback` in their place rather\n * than tearing down the page.\n *\n * It is a `'use client'` component (React error boundaries must be), so a server component can render\n * it too. Reach for {@link AsyncBoundary} when you also want a Suspense loading fallback.\n *\n * @example\n * ```tsx\n * import { CatchBoundary } from '@rshono/core/client';\n *\n * <CatchBoundary fallback={(error, reset) => (\n *   <div role=\"alert\">\n *     <p>{error.message}</p>\n *     <button onClick={reset}>Try again</button>\n *   </div>\n * )}>\n *   <RiskyWidget />\n * </CatchBoundary>\n * ```\n *\n * @see {@link https://react.dev/reference/react/Component#catching-rendering-errors-with-an-error-boundary | React — error boundaries}\n * @see {@link https://www.rshono.com/docs/api#rshonocoreclient | Docs — `@rshono/core/client`}\n */\nexport class CatchBoundary extends Component<CatchBoundaryProps, CatchBoundaryState> {\n  state: CatchBoundaryState = { error: null };\n\n  static getDerivedStateFromError(error: Error): CatchBoundaryState {\n    return { error };\n  }\n\n  componentDidCatch(error: Error): void {\n    if (isControlError(error)) return;\n    this.props.onError?.(error);\n  }\n\n  componentDidUpdate(prev: CatchBoundaryProps): void {\n    const { resetKeys } = this.props;\n    if (this.state.error && prev.resetKeys && resetKeys && keysChanged(prev.resetKeys, resetKeys)) {\n      this.reset();\n    }\n  }\n\n  reset = (): void => {\n    this.setState({ error: null });\n  };\n\n  render(): ReactNode {\n    const { error } = this.state;\n    if (error !== null) {\n      if (isControlError(error)) throw error;\n      const { fallback } = this.props;\n      if (fallback === undefined) throw error; // propagate to an outer boundary\n      return typeof fallback === 'function' ? fallback(error, this.reset) : fallback;\n    }\n    return this.props.children;\n  }\n}\n\n/** Props for {@link AsyncBoundary}. */\nexport interface AsyncBoundaryProps {\n  /**\n   * Suspense fallback, shown while the children or their data are still loading. Required — a loading\n   * state is the reason to reach for this over {@link CatchBoundary}, so showing nothing is an explicit\n   * `loading={null}`.\n   */\n  loading: ReactNode;\n  /** Error fallback, shown if a child throws. See {@link ErrorFallback}. */\n  error?: ErrorFallback;\n  /** Called with the caught error. From a `'use client'` component only — see {@link CatchBoundaryProps.onError}. */\n  onError?: (error: Error) => void;\n  /** Clears the error fallback when any value changes — see {@link CatchBoundaryProps.resetKeys}. */\n  resetKeys?: readonly unknown[];\n  /** The subtree this boundary suspends on and protects. */\n  children: ReactNode;\n}\n\n/**\n * A loading and error boundary in one wrapper — the common case for an async section of a page. It\n * always renders the same shape:\n *\n * ```tsx\n * <CatchBoundary fallback={error}>\n *   <Suspense fallback={loading}>{children}</Suspense>\n * </CatchBoundary>\n * ```\n *\n * so `loading` shows until the children resolve and `error` catches whatever they throw, suspended or\n * not. `error` is optional: omit it and errors propagate to the next boundary out.\n *\n * @example\n * ```tsx\n * import { AsyncBoundary } from '@rshono/core/client';\n *\n * <AsyncBoundary loading={<Spinner />} error={(e, reset) => <Retry onClick={reset} />}>\n *   <SlowServerComponent />\n * </AsyncBoundary>\n * ```\n *\n * @see {@link https://react.dev/reference/react/Suspense | React — `<Suspense>`}\n * @see {@link https://www.rshono.com/docs/api#rshonocoreclient | Docs — `@rshono/core/client`}\n */\nexport function AsyncBoundary({ loading, error, onError, resetKeys, children }: AsyncBoundaryProps): ReactNode {\n  return (\n    <CatchBoundary fallback={error} onError={onError} resetKeys={resetKeys}>\n      <Suspense fallback={loading}>{children}</Suspense>\n    </CatchBoundary>\n  );\n}\n"]}

package/dist/runtime/client.d.ts

@@ -1,16 +1,25 @@
 /**
- * `@rshono/core/client` — the browser-side surface, for use from `'use client'`
- * modules: {@link useNavigation} for the current URL and soft navigation, and
- * {@link Boundary} / {@link ErrorBoundary} / {@link NavigationProgress} as
- * components.
+ * `@rshono/core/client` — the browser-side surface: `useNavigation()` for the current URL and soft
+ * navigation, plus the `<AsyncBoundary>` and `<CatchBoundary>` components.
  *
- * Every export is itself a `'use client'` module, so a server component can
- * render {@link Boundary} or {@link NavigationProgress} directly — but the hook
- * needs a client component. In a server component, read the same request data
- * from `getContext()` in `@rshono/core/server`.
+ * Every export is itself a `'use client'` module, so a server component can render `<AsyncBoundary>`
+ * directly — but the hook needs a client component. In a server component, read the same request data
+ * from `getRequestContext()` in `@rshono/core/server`.
+ *
+ * @example
+ * ```tsx
+ * 'use client';
+ * import { useNavigation } from '@rshono/core/client';
+ *
+ * export function Tab() {
+ *   const { url, router } = useNavigation();
+ *   return <button onClick={() => router.push(`${url.pathname}?tab=details`)}>Details</button>;
+ * }
+ * ```
+ *
+ * @see {@link https://www.rshono.com/docs/api#rshonocoreclient | Docs — `@rshono/core/client`}
  *
  * @packageDocumentation
  */
-export { NavigationProgress, useNavigation, type Navigation, type NavigationProgressProps, type Router } from './navigation.js';
-export { Boundary, ErrorBoundary, type BoundaryProps, type ErrorBoundaryProps, type ErrorFallback } from './boundaries.js';
-//# sourceMappingURL=client.d.ts.map
+export { useNavigation, type NavigationRouter, type NavigationState } from './navigation.js';
+export { AsyncBoundary, CatchBoundary, type AsyncBoundaryProps, type CatchBoundaryProps, type ErrorFallback } from './boundaries.js';

package/dist/runtime/client.js

@@ -1,16 +1,26 @@
 /**
- * `@rshono/core/client` — the browser-side surface, for use from `'use client'`
- * modules: {@link useNavigation} for the current URL and soft navigation, and
- * {@link Boundary} / {@link ErrorBoundary} / {@link NavigationProgress} as
- * components.
+ * `@rshono/core/client` — the browser-side surface: `useNavigation()` for the current URL and soft
+ * navigation, plus the `<AsyncBoundary>` and `<CatchBoundary>` components.
  *
- * Every export is itself a `'use client'` module, so a server component can
- * render {@link Boundary} or {@link NavigationProgress} directly — but the hook
- * needs a client component. In a server component, read the same request data
- * from `getContext()` in `@rshono/core/server`.
+ * Every export is itself a `'use client'` module, so a server component can render `<AsyncBoundary>`
+ * directly — but the hook needs a client component. In a server component, read the same request data
+ * from `getRequestContext()` in `@rshono/core/server`.
+ *
+ * @example
+ * ```tsx
+ * 'use client';
+ * import { useNavigation } from '@rshono/core/client';
+ *
+ * export function Tab() {
+ *   const { url, router } = useNavigation();
+ *   return <button onClick={() => router.push(`${url.pathname}?tab=details`)}>Details</button>;
+ * }
+ * ```
+ *
+ * @see {@link https://www.rshono.com/docs/api#rshonocoreclient | Docs — `@rshono/core/client`}
  *
  * @packageDocumentation
  */
-export { NavigationProgress, useNavigation } from './navigation.js';
-export { Boundary, ErrorBoundary } from './boundaries.js';
+export { useNavigation } from './navigation.js';
+export { AsyncBoundary, CatchBoundary } from './boundaries.js';
 //# sourceMappingURL=client.js.map

package/dist/runtime/client.js.map

@@ -1 +1 @@
-{"version":3,"file":"client.js","sourceRoot":"","sources":["../../src/runtime/client.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;GAYG;AAEH,OAAO,EAAE,kBAAkB,EAAE,aAAa,EAA8D,MAAM,iBAAiB,CAAC;AAChI,OAAO,EAAE,QAAQ,EAAE,aAAa,EAAmE,MAAM,iBAAiB,CAAC","sourcesContent":["/**\n * `@rshono/core/client` — the browser-side surface, for use from `'use client'`\n * modules: {@link useNavigation} for the current URL and soft navigation, and\n * {@link Boundary} / {@link ErrorBoundary} / {@link NavigationProgress} as\n * components.\n *\n * Every export is itself a `'use client'` module, so a server component can\n * render {@link Boundary} or {@link NavigationProgress} directly — but the hook\n * needs a client component. In a server component, read the same request data\n * from `getContext()` in `@rshono/core/server`.\n *\n * @packageDocumentation\n */\n\nexport { NavigationProgress, useNavigation, type Navigation, type NavigationProgressProps, type Router } from './navigation.js';\nexport { Boundary, ErrorBoundary, type BoundaryProps, type ErrorBoundaryProps, type ErrorFallback } from './boundaries.js';\n"]}
+{"version":3,"file":"client.js","sourceRoot":"","sources":["../../src/runtime/client.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;GAsBG;AAEH,OAAO,EAAE,aAAa,EAA+C,MAAM,iBAAiB,CAAC;AAC7F,OAAO,EAAE,aAAa,EAAE,aAAa,EAAwE,MAAM,iBAAiB,CAAC","sourcesContent":["/**\n * `@rshono/core/client` — the browser-side surface: `useNavigation()` for the current URL and soft\n * navigation, plus the `<AsyncBoundary>` and `<CatchBoundary>` components.\n *\n * Every export is itself a `'use client'` module, so a server component can render `<AsyncBoundary>`\n * directly — but the hook needs a client component. In a server component, read the same request data\n * from `getRequestContext()` in `@rshono/core/server`.\n *\n * @example\n * ```tsx\n * 'use client';\n * import { useNavigation } from '@rshono/core/client';\n *\n * export function Tab() {\n *   const { url, router } = useNavigation();\n *   return <button onClick={() => router.push(`${url.pathname}?tab=details`)}>Details</button>;\n * }\n * ```\n *\n * @see {@link https://www.rshono.com/docs/api#rshonocoreclient | Docs — `@rshono/core/client`}\n *\n * @packageDocumentation\n */\n\nexport { useNavigation, type NavigationRouter, type NavigationState } from './navigation.js';\nexport { AsyncBoundary, CatchBoundary, type AsyncBoundaryProps, type CatchBoundaryProps, type ErrorFallback } from './boundaries.js';\n"]}