@remix-run/router 1.0.5-pre.2 → 1.1.0-pre.0

package/dist/utils.d.ts

@@ -48,8 +48,8 @@ export interface ErrorResult {
  * Result from a loader or action - potentially successful or unsuccessful
  */
 export declare type DataResult = SuccessResult | DeferredResult | RedirectResult | ErrorResult;
-export declare type SubmissionFormMethod = "post" | "put" | "patch" | "delete";
-export declare type FormMethod = "get" | SubmissionFormMethod;
+export declare type MutationFormMethod = "post" | "put" | "patch" | "delete";
+export declare type FormMethod = "get" | MutationFormMethod;
 export declare type FormEncType = "application/x-www-form-urlencoded" | "multipart/form-data";
 /**
  * @private
@@ -57,7 +57,7 @@ export declare type FormEncType = "application/x-www-form-urlencoded" | "multipa
  * external consumption
  */
 export interface Submission {
-    formMethod: SubmissionFormMethod;
+    formMethod: FormMethod;
     formAction: string;
     formEncType: FormEncType;
     formData: FormData;
@@ -158,7 +158,7 @@ export declare type AgnosticDataNonIndexRouteObject = AgnosticNonIndexRouteObjec
  * A data route object, which is just a RouteObject with a required unique ID
  */
 export declare type AgnosticDataRouteObject = AgnosticDataIndexRouteObject | AgnosticDataNonIndexRouteObject;
-declare type _PathParam<Path extends string> = Path extends `${infer L}/${infer R}` ? _PathParam<L> | _PathParam<R> : Path extends `${string}:${infer Param}` ? Param : never;
+declare type _PathParam<Path extends string> = Path extends `${infer L}/${infer R}` ? _PathParam<L> | _PathParam<R> : Path extends `:${infer Param}` ? Param : never;
 /**
  * Examples:
  * "/a/b/*" -> "*"
@@ -213,7 +213,7 @@ export declare function matchRoutes<RouteObjectType extends AgnosticRouteObject
  *
  * @see https://reactrouter.com/utils/generate-path
  */
-export declare function generatePath<Path extends string>(path: Path, params?: {
+export declare function generatePath<Path extends string>(originalPath: Path, params?: {
     [key in PathParam<Path>]: string;
 }): string;
 /**

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@remix-run/router",
-  "version": "1.0.5-pre.2",
+  "version": "1.1.0-pre.0",
   "description": "Nested/Data-driven/Framework-agnostic Routing",
   "keywords": [
     "remix",

package/router.ts

@@ -21,7 +21,7 @@ import type {
   Submission,
   SuccessResult,
   AgnosticRouteMatch,
-  SubmissionFormMethod,
+  MutationFormMethod,
 } from "./utils";
 import {
   DeferredData,
@@ -521,15 +521,20 @@ interface QueryRouteResponse {
   response: Response;
 }
 
-const validActionMethodsArr: SubmissionFormMethod[] = [
+const validMutationMethodsArr: MutationFormMethod[] = [
   "post",
   "put",
   "patch",
   "delete",
 ];
-const validActionMethods = new Set<SubmissionFormMethod>(validActionMethodsArr);
+const validMutationMethods = new Set<MutationFormMethod>(
+  validMutationMethodsArr
+);
 
-const validRequestMethodsArr: FormMethod[] = ["get", ...validActionMethodsArr];
+const validRequestMethodsArr: FormMethod[] = [
+  "get",
+  ...validMutationMethodsArr,
+];
 const validRequestMethods = new Set<FormMethod>(validRequestMethodsArr);
 
 const redirectStatusCodes = new Set([301, 302, 303, 307, 308]);
@@ -811,7 +816,8 @@ export function createRouter(init: RouterInit): Router {
     };
 
     let historyAction =
-      (opts && opts.replace) === true || submission != null
+      (opts && opts.replace) === true ||
+      (submission != null && isMutationMethod(submission.formMethod))
         ? HistoryAction.Replace
         : HistoryAction.Push;
     let preventScrollReset =
@@ -935,7 +941,11 @@ export function createRouter(init: RouterInit): Router {
       pendingError = {
         [findNearestBoundary(matches).route.id]: opts.pendingError,
       };
-    } else if (opts && opts.submission) {
+    } else if (
+      opts &&
+      opts.submission &&
+      isMutationMethod(opts.submission.formMethod)
+    ) {
       // Call action if we received an action submission
       let actionOutput = await handleAction(
         request,
@@ -1095,6 +1105,7 @@ export function createRouter(init: RouterInit): Router {
         formAction: undefined,
         formEncType: undefined,
         formData: undefined,
+        ...submission,
       };
       loadingNavigation = navigation;
     }
@@ -1259,7 +1270,7 @@ export function createRouter(init: RouterInit): Router {
     let { path, submission } = normalizeNavigateOptions(href, opts, true);
     let match = getTargetMatch(matches, path);
 
-    if (submission) {
+    if (submission && isMutationMethod(submission.formMethod)) {
       handleFetcherAction(key, routeId, path, match, matches, submission);
       return;
     }
@@ -1267,7 +1278,7 @@ export function createRouter(init: RouterInit): Router {
     // Store off the match so we can call it's shouldRevalidate on subsequent
     // revalidations
     fetchLoadMatches.set(key, [path, match, matches]);
-    handleFetcherLoader(key, routeId, path, match, matches);
+    handleFetcherLoader(key, routeId, path, match, matches, submission);
   }
 
   // Call the action for the matched fetcher.submit(), and then handle redirects,
@@ -1494,7 +1505,8 @@ export function createRouter(init: RouterInit): Router {
     routeId: string,
     path: string,
     match: AgnosticDataRouteMatch,
-    matches: AgnosticDataRouteMatch[]
+    matches: AgnosticDataRouteMatch[],
+    submission?: Submission
   ) {
     let existingFetcher = state.fetchers.get(key);
     // Put this fetcher into it's loading state
@@ -1504,6 +1516,7 @@ export function createRouter(init: RouterInit): Router {
       formAction: undefined,
       formEncType: undefined,
       formData: undefined,
+      ...submission,
       data: existingFetcher && existingFetcher.data,
     };
     state.fetchers.set(key, loadingFetcher);
@@ -1635,12 +1648,12 @@ export function createRouter(init: RouterInit): Router {
     let { formMethod, formAction, formEncType, formData } = state.navigation;
 
     // If this was a 307/308 submission we want to preserve the HTTP method and
-    // re-submit the POST/PUT/PATCH/DELETE as a submission navigation to the
+    // re-submit the GET/POST/PUT/PATCH/DELETE as a submission navigation to the
     // redirected location
     if (
       redirectPreserveMethodStatusCodes.has(redirect.status) &&
       formMethod &&
-      isSubmissionMethod(formMethod) &&
+      isMutationMethod(formMethod) &&
       formEncType &&
       formData
     ) {
@@ -2096,7 +2109,7 @@ export function unstable_createStaticHandler(
     );
 
     try {
-      if (isSubmissionMethod(request.method.toLowerCase())) {
+      if (isMutationMethod(request.method.toLowerCase())) {
         let result = await submit(
           request,
           matches,
@@ -2244,7 +2257,11 @@ export function unstable_createStaticHandler(
     }
 
     // Create a GET request for the loaders
-    let loaderRequest = new Request(request.url, { signal: request.signal });
+    let loaderRequest = new Request(request.url, {
+      headers: request.headers,
+      redirect: request.redirect,
+      signal: request.signal,
+    });
     let context = await loadRouteData(loaderRequest, matches, requestContext);
 
     return {
@@ -2409,17 +2426,19 @@ function normalizeNavigateOptions(
   }
 
   // Create a Submission on non-GET navigations
-  if (opts.formMethod && isSubmissionMethod(opts.formMethod)) {
-    return {
-      path,
-      submission: {
-        formMethod: opts.formMethod,
-        formAction: stripHashFromPath(path),
-        formEncType:
-          (opts && opts.formEncType) || "application/x-www-form-urlencoded",
-        formData: opts.formData,
-      },
+  let submission: Submission | undefined;
+  if (opts.formData) {
+    submission = {
+      formMethod: opts.formMethod || "get",
+      formAction: stripHashFromPath(path),
+      formEncType:
+        (opts && opts.formEncType) || "application/x-www-form-urlencoded",
+      formData: opts.formData,
     };
+
+    if (isMutationMethod(submission.formMethod)) {
+      return { path, submission };
+    }
   }
 
   // Flatten submission onto URLSearchParams for GET submissions
@@ -2444,7 +2463,7 @@ function normalizeNavigateOptions(
     };
   }
 
-  return { path: createPath(parsedPath) };
+  return { path: createPath(parsedPath), submission };
 }
 
 // Filter out all routes below any caught error as they aren't going to
@@ -2767,7 +2786,7 @@ function createClientSideRequest(
   let url = createClientSideURL(stripHashFromPath(location)).toString();
   let init: RequestInit = { signal };
 
-  if (submission) {
+  if (submission && isMutationMethod(submission.formMethod)) {
     let { formMethod, formEncType, formData } = submission;
     init.method = formMethod.toUpperCase();
     init.body =
@@ -2833,9 +2852,14 @@ function processRouteLoaderData(
         error = Object.values(pendingError)[0];
         pendingError = undefined;
       }
-      errors = Object.assign(errors || {}, {
-        [boundaryMatch.route.id]: error,
-      });
+
+      errors = errors || {};
+
+      // Prefer higher error values if lower errors bubble to the same boundary
+      if (errors[boundaryMatch.route.id] == null) {
+        errors[boundaryMatch.route.id] = error;
+      }
+
       // Once we find our first (highest) error, we set the status code and
       // prevent deeper status codes from overriding
       if (!foundError) {
@@ -3115,8 +3139,8 @@ function isValidMethod(method: string): method is FormMethod {
   return validRequestMethods.has(method as FormMethod);
 }
 
-function isSubmissionMethod(method: string): method is SubmissionFormMethod {
-  return validActionMethods.has(method as SubmissionFormMethod);
+function isMutationMethod(method?: string): method is MutationFormMethod {
+  return validMutationMethods.has(method as MutationFormMethod);
 }
 
 async function resolveDeferredResults(

package/utils.ts

@@ -61,8 +61,8 @@ export type DataResult =
   | RedirectResult
   | ErrorResult;
 
-export type SubmissionFormMethod = "post" | "put" | "patch" | "delete";
-export type FormMethod = "get" | SubmissionFormMethod;
+export type MutationFormMethod = "post" | "put" | "patch" | "delete";
+export type FormMethod = "get" | MutationFormMethod;
 
 export type FormEncType =
   | "application/x-www-form-urlencoded"
@@ -74,7 +74,7 @@ export type FormEncType =
  * external consumption
  */
 export interface Submission {
-  formMethod: SubmissionFormMethod;
+  formMethod: FormMethod;
   formAction: string;
   formEncType: FormEncType;
   formData: FormData;
@@ -197,7 +197,7 @@ type _PathParam<Path extends string> =
   Path extends `${infer L}/${infer R}`
     ? _PathParam<L> | _PathParam<R>
     : // find params after `:`
-    Path extends `${string}:${infer Param}`
+    Path extends `:${infer Param}`
     ? Param
     : // otherwise, there aren't any params present
       never;
@@ -372,9 +372,14 @@ function flattenRoutes<
   parentsMeta: RouteMeta<RouteObjectType>[] = [],
   parentPath = ""
 ): RouteBranch<RouteObjectType>[] {
-  routes.forEach((route, index) => {
+  let flattenRoute = (
+    route: RouteObjectType,
+    index: number,
+    relativePath?: string
+  ) => {
     let meta: RouteMeta<RouteObjectType> = {
-      relativePath: route.path || "",
+      relativePath:
+        relativePath === undefined ? route.path || "" : relativePath,
       caseSensitive: route.caseSensitive === true,
       childrenIndex: index,
       route,
@@ -415,12 +420,75 @@ function flattenRoutes<
       return;
     }
 
-    branches.push({ path, score: computeScore(path, route.index), routesMeta });
+    branches.push({
+      path,
+      score: computeScore(path, route.index),
+      routesMeta,
+    });
+  };
+  routes.forEach((route, index) => {
+    // coarse-grain check for optional params
+    if (route.path === "" || !route.path?.includes("?")) {
+      flattenRoute(route, index);
+    } else {
+      for (let exploded of explodeOptionalSegments(route.path)) {
+        flattenRoute(route, index, exploded);
+      }
+    }
   });
 
   return branches;
 }
 
+/**
+ * Computes all combinations of optional path segments for a given path,
+ * excluding combinations that are ambiguous and of lower priority.
+ *
+ * For example, `/one/:two?/three/:four?/:five?` explodes to:
+ * - `/one/three`
+ * - `/one/:two/three`
+ * - `/one/three/:four`
+ * - `/one/three/:five`
+ * - `/one/:two/three/:four`
+ * - `/one/:two/three/:five`
+ * - `/one/three/:four/:five`
+ * - `/one/:two/three/:four/:five`
+ */
+function explodeOptionalSegments(path: string): string[] {
+  let segments = path.split("/");
+  if (segments.length === 0) return [];
+
+  let [first, ...rest] = segments;
+
+  // Optional path segments are denoted by a trailing `?`
+  let isOptional = first.endsWith("?");
+  // Compute the corresponding required segment: `foo?` -> `foo`
+  let required = first.replace(/\?$/, "");
+
+  if (rest.length === 0) {
+    // Intepret empty string as omitting an optional segment
+    // `["one", "", "three"]` corresponds to omitting `:two` from `/one/:two?/three` -> `/one/three`
+    return isOptional ? ["", required] : [required];
+  }
+
+  let restExploded = explodeOptionalSegments(rest.join("/"));
+  return restExploded
+    .flatMap((subpath) => {
+      // /one + / + :two/three -> /one/:two/three
+      let requiredExploded =
+        subpath === "" ? required : required + "/" + subpath;
+      // For optional segments, return the exploded path _without_ current segment first (`subpath`)
+      // and exploded path _with_ current segment later (`subpath`)
+      // This ensures that exploded paths are emitted in priority order
+      // `/one/three/:four` will come before `/one/three/:five`
+      return isOptional ? [subpath, requiredExploded] : [requiredExploded];
+    })
+    .map((exploded) => {
+      // for absolute paths, ensure `/` instead of empty segment
+      return path.startsWith("/") && exploded === "" ? "/" : exploded;
+    });
+}
+
 function rankRouteBranches(branches: RouteBranch[]): void {
   branches.sort((a, b) =>
     a.score !== b.score
@@ -534,16 +602,32 @@ function matchRouteBranch<
  * @see https://reactrouter.com/utils/generate-path
  */
 export function generatePath<Path extends string>(
-  path: Path,
+  originalPath: Path,
   params: {
     [key in PathParam<Path>]: string;
   } = {} as any
 ): string {
+  let path = originalPath;
+  if (path.endsWith("*") && path !== "*" && !path.endsWith("/*")) {
+    warning(
+      false,
+      `Route path "${path}" will be treated as if it were ` +
+        `"${path.replace(/\*$/, "/*")}" because the \`*\` character must ` +
+        `always follow a \`/\` in the pattern. To get rid of this warning, ` +
+        `please change the route path to "${path.replace(/\*$/, "/*")}".`
+    );
+    path = path.replace(/\*$/, "/*") as Path;
+  }
+
   return path
-    .replace(/:(\w+)/g, (_, key: PathParam<Path>) => {
+    .replace(/^:(\w+)/g, (_, key: PathParam<Path>) => {
       invariant(params[key] != null, `Missing ":${key}" param`);
       return params[key]!;
     })
+    .replace(/\/:(\w+)/g, (_, key: PathParam<Path>) => {
+      invariant(params[key] != null, `Missing ":${key}" param`);
+      return `/${params[key]!}`;
+    })
     .replace(/(\/?)\*/, (_, prefix, __, str) => {
       const star = "*" as PathParam<Path>;
 
@@ -682,9 +766,9 @@ function compilePath(
       .replace(/\/*\*?$/, "") // Ignore trailing / and /*, we'll handle it below
       .replace(/^\/*/, "/") // Make sure it has a leading /
       .replace(/[\\.*+^$?{}|()[\]]/g, "\\$&") // Escape special regex chars
-      .replace(/:(\w+)/g, (_: string, paramName: string) => {
+      .replace(/\/:(\w+)/g, (_: string, paramName: string) => {
         paramNames.push(paramName);
-        return "([^\\/]+)";
+        return "/([^\\/]+)";
       });
 
   if (path.endsWith("*")) {