@uniflowed/router 0.5.0 → 0.7.0

package/internal/resolved-summary.js

@@ -6,12 +6,12 @@ import { routeBoundaries, suspenseId } from "./boundary-data.js";
 import type { RouteBoundary } from "./boundary-data.js";
 import type { RouteParams, SearchParams } from "./routing.js";
 
-type RouteStatus = 200 | 401 | 403 | 404 | 500;
+type RouteStatus = 200 | 400 | 401 | 403 | 404 | 500;
 
 type RouteMetadata = { readonly [string]: mixed, ... };
 
 type RouteErrorLike = {
-  readonly kind: "thrown" | "unauthorized" | "forbidden",
+  readonly kind: "thrown" | "unauthorized" | "forbidden" | "badRequest",
   ...
 };
 
@@ -71,7 +71,8 @@ export type ResolvedTemplateSummary = {|
 export type ResolvedRouteErrorSummary =
   | {| readonly kind: "thrown" |}
   | {| readonly kind: "unauthorized" |}
-  | {| readonly kind: "forbidden" |};
+  | {| readonly kind: "forbidden" |}
+  | {| readonly kind: "badRequest" |};
 
 export type ResolvedErrorBoundarySummary = {|
   readonly above: number,
@@ -195,5 +196,8 @@ function summarizeError(error: ?RouteErrorLike): ?ResolvedRouteErrorSummary {
   if (error.kind === "forbidden") {
     return { kind: "forbidden" };
   }
+  if (error.kind === "badRequest") {
+    return { kind: "badRequest" };
+  }
   return { kind: "thrown" };
 }

package/internal/routing.js

@@ -10,12 +10,34 @@
 /** One parameter a route path captures. */
 export type RouteParamSpec = {| readonly name: string, readonly catchAll: boolean |};
 
-/** The parameters captured from a URL. A catch-all captures the rest as a list. */
+/**
+ * The parameters captured from a URL. A catch-all captures the rest as a list:
+ * `[...slug]` at least one segment, `[[...slug]]` any number, none included.
+ */
 export type RouteParams = { readonly [string]: string | $ReadOnlyArray<string> };
 
-/** The query string, as a read-only map. */
+/** The query string, as a read-only map. A repeated key keeps its last value. */
 export type SearchParams = { readonly [string]: string };
 
+/**
+ * The query string with every value of a repeated key kept, in order:
+ * `?tag=a&tag=b` is `{ tag: ["a", "b"] }`. See [`parseSearchAll`].
+ */
+export type SearchParamsAll = { readonly [string]: $ReadOnlyArray<string> };
+
+/**
+ * One reason a query did not fit the schema a page declared for it.
+ *
+ * The shape of `@uniflowed/validator`'s `Issue`, written out here so that this
+ * file stays free of imports: `path` is where in the query the problem is —
+ * `["tags", "1"]` for the second `tag`.
+ */
+export type SearchParamsIssue = {|
+  readonly code: string,
+  readonly message: string,
+  readonly path?: $ReadOnlyArray<string>,
+|};
+
 /** A lazy route module entry from the generated route table. */
 export type RouteModule<TModule = mixed> = () => Promise<TModule>;
 
@@ -165,11 +187,18 @@ export type RouteMatch<TRoute extends { readonly path: string, ... } = UnknownRo
 export type RouteError =
   | {| readonly kind: "thrown", readonly error: mixed |}
   | {| readonly kind: "unauthorized" |}
-  | {| readonly kind: "forbidden" |};
+  | {| readonly kind: "forbidden" |}
+  /**
+   * The query did not fit the schema the page exports as `searchParams`.
+   * The request's fault rather than the page's, so a `400` — and the issues
+   * say which parameter and why, so an `$error.js` can say so too.
+   */
+  | {| readonly kind: "badRequest", readonly issues: $ReadOnlyArray<SearchParamsIssue> |};
 
 /** The status a `RouteError` answers with. */
-export function routeErrorStatus(error: RouteError): 401 | 403 | 500 {
+export function routeErrorStatus(error: RouteError): 400 | 401 | 403 | 500 {
   return match (error) {
+    {kind: "badRequest", ...} => 400,
     {kind: "unauthorized"} => 401,
     {kind: "forbidden"} => 403,
     {kind: "thrown", ...} => 500,
@@ -192,6 +221,24 @@ export class UnauthorizedError extends Error {
   }
 }
 
+/**
+ * Thrown when a query does not fit the page's `searchParams` schema; the
+ * renderer answers with the error boundary, as a `400`.
+ */
+export class SearchParamsError extends Error {
+  issues: $ReadOnlyArray<SearchParamsIssue>;
+
+  constructor(issues: $ReadOnlyArray<SearchParamsIssue>) {
+    super(
+      `the query string does not fit this page's searchParams schema: ${issues
+        .map((issue) => `${(issue.path ?? []).join(".") || "(query)"}: ${issue.message}`)
+        .join("; ")}`,
+    );
+    this.name = "SearchParamsError";
+    this.issues = issues;
+  }
+}
+
 /** Thrown by `forbidden()`; the renderer answers with the error boundary. */
 export class ForbiddenError extends Error {
   constructor() {
@@ -281,13 +328,21 @@ export class RedirectError extends Error {
 type Segment =
   | {| readonly kind: "static", readonly value: string |}
   | {| readonly kind: "param", readonly name: string |}
-  | {| readonly kind: "catchAll", readonly name: string |};
+  | {| readonly kind: "catchAll", readonly name: string |}
+  | {| readonly kind: "optionalCatchAll", readonly name: string |};
 
+/**
+ * A route path, as segments: `posts` is static, `:slug` a parameter, `:slug*`
+ * a catch-all (`[...slug]`) and `:slug*?` an optional one (`[[...slug]]`).
+ */
 function compile(routePath: string): $ReadOnlyArray<Segment> {
   return routePath
     .split("/")
     .filter((segment) => segment !== "")
     .map((segment): Segment => {
+      if (segment.startsWith(":") && segment.endsWith("*?")) {
+        return { kind: "optionalCatchAll", name: segment.slice(1, -2) };
+      }
       if (segment.startsWith(":") && segment.endsWith("*")) {
         return { kind: "catchAll", name: segment.slice(1, -1) };
       }
@@ -300,7 +355,8 @@ function compile(routePath: string): $ReadOnlyArray<Segment> {
 
 /**
  * How specific a route is, for ranking: a static segment outranks a parameter,
- * which outranks a catch-all, and a longer path outranks a shorter one.
+ * which outranks a catch-all, which outranks an optional one, and a longer
+ * path outranks a shorter one.
  */
 function specificity(segments: $ReadOnlyArray<Segment>): number {
   let score = 0;
@@ -309,6 +365,7 @@ function specificity(segments: $ReadOnlyArray<Segment>): number {
       {kind: "static", ...} => 3,
       {kind: "param", ...} => 2,
       {kind: "catchAll", ...} => 1,
+      {kind: "optionalCatchAll", ...} => 0,
     };
   }
   return score;
@@ -336,6 +393,17 @@ function matchSegments(
         index += 1;
       }
       {kind: "catchAll", name: const name} => {
+        // `[...slug]` needs something to take: `/docs` is not
+        // `/docs/[...slug]`, which is what `[[...slug]]` is for. Without
+        // this a catch-all outranked the page at its parent path — one more
+        // segment is one more point — and answered `/docs` in its place.
+        if (index >= parts.length) {
+          return null;
+        }
+        params[name] = parts.slice(index).map(decodeSegment);
+        index = parts.length;
+      }
+      {kind: "optionalCatchAll", name: const name} => {
         params[name] = parts.slice(index).map(decodeSegment);
         index = parts.length;
       }
@@ -377,6 +445,26 @@ export function buildRoute(routePath: string, params?: RouteParams): string {
               describeParam(value),
           );
         }
+        // The URL an empty list builds is the parent path, which this route
+        // does not serve — a link that 404s. An optional catch-all does.
+        if (value.length === 0) {
+          throw new Error(
+            `route ${routePath} takes at least one segment for :${name}*, and got an empty ` +
+              `array; a route that also serves its parent path is [[...${name}]], :${name}*?`,
+          );
+        }
+        for (const part of value) {
+          parts.push(encodeURIComponent(part));
+        }
+      }
+      {kind: "optionalCatchAll", name: const name} => {
+        const value = values[name];
+        if (value == null || typeof value === "string") {
+          throw new Error(
+            `route ${routePath} takes an array of segments for :${name}*?, and got ` +
+              describeParam(value),
+          );
+        }
         for (const part of value) {
           parts.push(encodeURIComponent(part));
         }
@@ -455,7 +543,8 @@ function covers(segments: $ReadOnlyArray<Segment>, parts: $ReadOnlyArray<string>
     const next = match (segment) {
       {kind: "static", value: const value} => parts[index] === value ? index + 1 : -1,
       {kind: "param", ...} => index < parts.length ? index + 1 : -1,
-      {kind: "catchAll", ...} => parts.length,
+      {kind: "catchAll", ...} => index < parts.length ? parts.length : -1,
+      {kind: "optionalCatchAll", ...} => parts.length,
     };
     if (next === -1) {
       return false;
@@ -517,6 +606,31 @@ export function parseSearch(search: string): SearchParams {
   return params;
 }
 
+/**
+ * Every value of every key in a query string, in order.
+ *
+ * [`parseSearch`] keeps the last value of a repeated key, which is what a page
+ * that reads `searchParams.q` wants and loses `?tag=a&tag=b`'s first tag. This
+ * is the same query with nothing dropped, for a page that declares no schema
+ * and needs the repeats; a page that declares one gets arrays wherever the
+ * schema says array.
+ */
+export function parseSearchAll(search: string): SearchParamsAll {
+  // A `Map` and then `Object.fromEntries`, which defines own properties: a
+  // query is written by whoever sent the request, and `?__proto__=x` must be a
+  // key like any other rather than a lookup that finds `Object.prototype`.
+  const params = new Map<string, Array<string>>();
+  for (const [key, value] of new URLSearchParams(search)) {
+    const values = params.get(key);
+    if (values == null) {
+      params.set(key, [value]);
+    } else {
+      values.push(value);
+    }
+  }
+  return Object.fromEntries(params);
+}
+
 /** Stop rendering the current page and show the not-found page instead. */
 export function notFound(): empty {
   throw new NotFoundError();

package/internal/runtime.js

@@ -101,6 +101,7 @@ import {
   routeNavigations,
 } from "./navigation-cache.js";
 import {
+  NotFoundError,
   hasClientPage,
   matchRoute,
   nearestBoundary,
@@ -112,17 +113,27 @@ import {
   beneath,
   interceptingRoutes,
   loadOnce,
+  pageSearchParams,
+  resolveFailure,
   resolveInterception,
   resolveMatch,
 } from "./resolve.js";
 import type { Metadata, ResolvedRoute, RouteTable } from "./resolve.js";
 
-export type { RouteError, RouteParamSpec, RouteParams, SearchParams } from "./routing.js";
+export type {
+  RouteError,
+  RouteParamSpec,
+  RouteParams,
+  SearchParams,
+  SearchParamsAll,
+  SearchParamsIssue,
+} from "./routing.js";
 
 export {
   ForbiddenError,
   NotFoundError,
   RedirectError,
+  SearchParamsError,
   UnauthorizedError,
   buildRoute,
   forbidden,
@@ -130,6 +141,7 @@ export {
   matchRoute,
   notFound,
   parseSearch,
+  parseSearchAll,
   permanentRedirect,
   redirect,
   routeErrorStatus,
@@ -370,18 +382,60 @@ export type Router = {|
  */
 let mountedRouter: Router | null = null;
 
-/** Publish `router` as [`mountedRouter`] while its provider is mounted. */
-hook useMountedRouter(router: Router): void {
+/**
+ * How the provider on screen shows its not-found page for the URL it is on, or
+ * `null` when none is mounted. See [`showNotFoundPage`].
+ */
+let mountedNotFound: ShowNotFound | null = null;
+
+/**
+ * Show the not-found page for the URL on screen, and run `alongside` in the
+ * same transition as the commit that shows it. Resolves `false`, having shown
+ * nothing, when there is no not-found page to be had for it.
+ */
+type ShowNotFound = (alongside: () => void) => Promise<boolean>;
+
+/**
+ * Publish `router` as [`mountedRouter`], and its not-found page as
+ * [`mountedNotFound`], while its provider is mounted.
+ */
+hook useMountedRouter(router: Router, showNotFound: ShowNotFound): void {
   useEffect(() => {
     mountedRouter = router;
+    mountedNotFound = showNotFound;
     return () => {
       if (mountedRouter === router) {
         mountedRouter = null;
+        mountedNotFound = null;
       }
     };
   });
 }
 
+/**
+ * Show the page a loader's `notFound()` would have shown for the URL on screen,
+ * because something below the route's error boundary threw `NotFoundError`.
+ *
+ * What a loader's `notFound()` shows is not a boundary catching it: the
+ * resolver resolves the route again as its not-found page (`resolveFailure`).
+ * A hydrated server action that calls `notFound()` throws the same error in the
+ * browser (`../action.js`), React hands it to the nearest boundary, and the
+ * boundary asks for that same resolution here rather than rendering the error
+ * view (ubugeeei-prod/uf#1489). A page rendered from its modules resolves it
+ * in the browser; a page React Server Components rendered asks the server for
+ * the not-found payload of its URL, because only the server has the module.
+ *
+ * `alongside` is the boundary letting go of the error, run in the transition
+ * that commits the not-found page so the page that threw is never rendered
+ * again in between. `false` when there is nothing to show — no router mounted,
+ * or a host that did not answer with a not-found payload — and the boundary
+ * then shows its error view, as it did before.
+ */
+export function showNotFoundPage(alongside: () => void): Promise<boolean> {
+  const show = mountedNotFound;
+  return show == null ? Promise.resolve(false) : show(alongside);
+}
+
 /**
  * Go where a server action's `redirect()` pointed.
  *
@@ -1046,7 +1100,25 @@ component ModuleRouter(url: string, initial: ResolvedRoute, children: React.Node
     },
   };
 
-  useMountedRouter(router);
+  // The URL on screen resolved as its not-found page, in the page: the table
+  // this router resolves from has the not-found modules too. No history entry
+  // is written, because the URL is still the one the visitor is on.
+  const showNotFound = async (alongside: () => void): Promise<boolean> => {
+    if (!isBrowser()) {
+      return false;
+    }
+    const here =
+      (applicationPathOf(window.location.pathname) ?? window.location.pathname) +
+      window.location.search;
+    const nextResolved = await resolveFailure(routeTable(), here, new NotFoundError());
+    startTransition(() => {
+      show(nextResolved);
+      alongside();
+    });
+    return true;
+  };
+
+  useMountedRouter(router, showNotFound);
 
   const value: RouterState = {
     route: routeState(resolved),
@@ -1320,7 +1392,37 @@ component FlightRouter(flight: Promise<FlightRoot>, children: React.Node) {
     },
   };
 
-  useMountedRouter(router);
+  // The URL on screen as its not-found page, asked of the server: the payload
+  // for this URL with `notFound`, which renders the not-found resolution a
+  // loader's `notFound()` would have. Not kept in the navigation cache, because
+  // it is not what a navigation to this URL shows. Anything that is not such a
+  // payload — a document, a payload another build rendered, a host that ignored
+  // the request and answered the page — is nothing to show, and the boundary
+  // falls back to its error view.
+  const showNotFound = async (alongside: () => void): Promise<boolean> => {
+    if (!isBrowser()) {
+      return false;
+    }
+    const fetched = await fetchFlight(window.location.pathname + window.location.search, {
+      ...flightFetchOptions(root.route.interception?.from ?? null),
+      notFound: true,
+    });
+    if (fetched.kind === "document") {
+      return false;
+    }
+    const payload = fetched.root;
+    const nextRoot = await payload;
+    if (fromAnotherDeployment(nextRoot.deployment) || nextRoot.route.status !== 404) {
+      return false;
+    }
+    startTransition(() => {
+      show(payload, nextRoot);
+      alongside();
+    });
+    return true;
+  };
+
+  useMountedRouter(router, showNotFound);
 
   const value: RouterState = {
     route: root.route,
@@ -1616,7 +1718,7 @@ component RenderedPage(data: mixed) {
   // uf-lint-disable react-compiler/static-components
   return (
     <>
-      <Page params={resolved.params} searchParams={resolved.searchParams} data={data} />
+      <Page params={resolved.params} searchParams={pageSearchParams(resolved)} data={data} />
       {payloadElements(data)}
     </>
   );

package/internal/search-params.js

@@ -0,0 +1,234 @@
+// @flow
+//
+// Internal to `@uniflowed/router`: a page's `searchParams` schema, run against
+// the query string.
+//
+// A page that exports
+//
+//     export const searchParams = object({ page: number(), tag: array(string()) });
+//
+// is handed the schema's output as its `searchParams` prop instead of the
+// string map every other page gets. Two things stand between a query string
+// and that schema, and both are this file.
+//
+// **Shape.** A query is a list of pairs, and a key may repeat. Which repeats
+// are a list and which are one value is not something the query says — it is
+// what the schema says, so the schema is asked: a field described as an array
+// (or a set, or a tuple) gets every value in order, and any other field gets
+// the last one, which is what `parseSearch` has always kept. A field that is a
+// bare array and whose key is absent gets `[]`, because no `tag` in the query
+// is no tags rather than a malformed request.
+//
+// **Type.** Every value in a query is a string, and `number()` refuses a string.
+// A field described as a number, a boolean, a bigint or a date is given the
+// value the string spells when it spells one — `"2"` is `2`, `"true"` is
+// `true` — and the string itself when it does not, so the schema's own message
+// is what a malformed value is reported with. A field the schema reads as a
+// string is left alone, which is why `pipe(string(), transform(Number))` still
+// sees the string it asked for.
+//
+// Everything past that is the schema's: optionality, defaults, refinements,
+// transforms. A query that does not fit is a `SearchParamsError`, which the
+// resolver turns into the error boundary with a `400` — the request's fault,
+// not the page's.
+
+// The two subpaths rather than the package: a browser bundle of the router
+// carries the parser and the description reader, and none of the builders.
+import { safeParseAsync } from "@uniflowed/validator/parse";
+import { describe } from "@uniflowed/validator/schema";
+import type { Description, Schema } from "@uniflowed/validator/schema";
+
+import { SearchParamsError, parseSearchAll } from "./routing.js";
+import type { SearchParamsAll } from "./routing.js";
+
+/**
+ * The value a page's `searchParams` schema produces for `search`.
+ *
+ * Throws a [`SearchParamsError`] carrying every issue when the query does not
+ * fit, rather than returning them: the resolver's catch is what turns a thrown
+ * router error into a boundary, and this is one.
+ */
+export async function parseSearchParams(
+  schema: Schema<mixed, mixed>,
+  search: string,
+): Promise<mixed> {
+  const input = searchParamsInput(describe(schema), parseSearchAll(search));
+  const result = await safeParseAsync(schema, input);
+  if (!result.ok) {
+    throw new SearchParamsError(result.issues);
+  }
+  return result.value;
+}
+
+/**
+ * The object a schema described by `description` is given for a query.
+ *
+ * Exported for the tests, which hold the shape and the coercion to what the
+ * header says without a route table around them.
+ */
+export function searchParamsInput(
+  description: Description,
+  query: SearchParamsAll,
+): { readonly [string]: mixed } {
+  const fields = objectFields(description);
+  // Built as a `Map` and turned into an object once, by `Object.fromEntries`,
+  // which defines own properties: `?__proto__=x` is a key like any other.
+  const input = new Map<string, mixed>();
+  for (const key of Object.keys(query)) {
+    const values = query[key];
+    const field = fields.get(key);
+    if (field == null) {
+      // A key the schema does not name: an `object()` strips it and a
+      // `strictObject()` refuses it, and a `looseObject()` keeps it as the
+      // query had it — one value, or every value of a repeated key.
+      input.set(key, values.length === 1 ? values[0] : values);
+    } else {
+      input.set(key, fieldValue(field, values));
+    }
+  }
+  for (const [key, field] of fields) {
+    if (!input.has(key) && isList(plain(field))) {
+      input.set(key, []);
+    }
+  }
+  return Object.fromEntries(input);
+}
+
+/** The fields a schema names, when it is an object or an intersection of them. */
+function objectFields(description: Description): Map<string, Description> {
+  const found = new Map<string, Description>();
+  const visit = (node: Description): void => {
+    const unwrapped = unwrap(node);
+    if (unwrapped.kind === "object") {
+      for (const [key, field] of unwrapped.entries) {
+        found.set(key, field);
+      }
+    } else if (unwrapped.kind === "intersect") {
+      for (const part of unwrapped.parts) {
+        visit(part);
+      }
+    }
+  };
+  visit(description);
+  return found;
+}
+
+/** What one field is given: every value for a list, the last for anything else. */
+function fieldValue(field: Description, values: $ReadOnlyArray<string>): mixed {
+  const described = unwrap(field);
+  if (described.kind === "array" || described.kind === "set") {
+    const item = described.item;
+    return values.map((value) => coerce(item, value));
+  }
+  if (described.kind === "tuple") {
+    const items = described.items;
+    return values.map((value, index) =>
+      index < items.length ? coerce(items[index], value) : value,
+    );
+  }
+  return coerce(described, values[values.length - 1]);
+}
+
+/** The value `raw` spells for a field described by `description`, or `raw`. */
+function coerce(description: Description, raw: string): mixed {
+  const described = unwrap(description);
+  switch (described.kind) {
+    case "number":
+      return numeric(raw) ?? raw;
+    case "bigint":
+      return /^[-+]?\d+$/.test(raw.trim()) ? BigInt(raw.trim()) : raw;
+    case "boolean":
+      return raw === "true" ? true : raw === "false" ? false : raw;
+    case "date": {
+      const date = new Date(raw);
+      return Number.isNaN(date.getTime()) ? raw : date;
+    }
+    case "literal": {
+      const value = described.value;
+      if (typeof value === "number") return numeric(raw) === value ? value : raw;
+      if (typeof value === "boolean") return raw === String(value) ? value : raw;
+      if (value === null) return raw === "null" ? null : raw;
+      return raw;
+    }
+    case "union": {
+      // The string itself when some option takes it as it is, so
+      // `union([literal("all"), number()])` reads `all` as `"all"` and `3` as 3.
+      const options = described.options.map(unwrap);
+      if (options.some((option) => acceptsAsIs(option, raw))) {
+        return raw;
+      }
+      for (const option of options) {
+        const coerced = coerce(option, raw);
+        if (coerced !== raw) return coerced;
+      }
+      return raw;
+    }
+    default:
+      return raw;
+  }
+}
+
+/** Whether a field described this way takes `raw` without coercion. */
+function acceptsAsIs(described: Description, raw: string): boolean {
+  switch (described.kind) {
+    case "string":
+    case "unknown":
+      return true;
+    case "enum":
+      return described.values.includes(raw);
+    case "literal":
+      return described.value === raw;
+    default:
+      return false;
+  }
+}
+
+/** A finite number `raw` spells, or `null`. `""` is not zero. */
+function numeric(raw: string): ?number {
+  if (raw.trim() === "") return null;
+  const value = Number(raw);
+  return Number.isFinite(value) ? value : null;
+}
+
+/**
+ * A description with every wrapper that does not change what the value *is*
+ * taken off: optionality, defaults, `pipe` steps and `lazy`.
+ */
+function unwrap(description: Description): Description {
+  const inner = innerOf(description, true);
+  return inner == null ? description : unwrap(inner);
+}
+
+/**
+ * The same, keeping optionality and defaults: whether a field that is absent
+ * from the query should be an empty list is a question about the field as it
+ * was written, and `optional(array(…))` answers it differently from
+ * `array(…)`.
+ */
+function plain(description: Description): Description {
+  const inner = innerOf(description, false);
+  return inner == null ? description : plain(inner);
+}
+
+/** What a wrapper wraps, or `null` for a description that is not one. */
+function innerOf(description: Description, optionality: boolean): ?Description {
+  switch (description.kind) {
+    case "transformed":
+    case "constrained":
+      return description.inner;
+    case "lazy":
+      return description.inner();
+    case "optional":
+    case "nullable":
+    case "nullish":
+    case "default":
+    case "fallback":
+      return optionality ? description.inner : null;
+    default:
+      return null;
+  }
+}
+
+function isList(description: Description): boolean {
+  return description.kind === "array" || description.kind === "set";
+}

package/middleware.js

@@ -455,6 +455,12 @@ function matchPrefix(routePath: string, pathname: string): RouteParams | null {
 
   for (let index = 0; index < wanted.length; index += 1) {
     const segment = wanted[index];
+    // A prefix, so the rest of the path — none of it included — is either
+    // catch-all's: `[[...slug]]` is `:slug*?`, `[...slug]` is `:slug*`.
+    if (segment.startsWith(":") && segment.endsWith("*?")) {
+      params[segment.slice(1, -2)] = given.slice(index);
+      return params as $FlowFixMe;
+    }
     if (segment.startsWith(":") && segment.endsWith("*")) {
       params[segment.slice(1, -1)] = given.slice(index);
       return params as $FlowFixMe;

package/native.js

@@ -207,6 +207,9 @@ export function nativeScreenName(routePath: string): string {
   }
   const name = segments
     .map((segment) => {
+      if (segment.startsWith(":") && segment.endsWith("*?")) {
+        return `Any${titlePart(segment.slice(1, -2))}`;
+      }
       if (segment.startsWith(":") && segment.endsWith("*")) {
         return `All${titlePart(segment.slice(1, -1))}`;
       }