@remix-run/router 1.0.5 → 1.1.0-pre.1

package/dist/router.umd.js

@@ -1,5 +1,5 @@
 /**
- * @remix-run/router v1.0.5
+ * @remix-run/router v1.1.0-pre.1
  *
  * Copyright (c) Remix Software Inc.
  *
@@ -613,9 +613,9 @@
       parentPath = "";
     }
 
-    routes.forEach((route, index) => {
+    let flattenRoute = (route, index, relativePath) => {
       let meta = {
-        relativePath: route.path || "",
+        relativePath: relativePath === undefined ? route.path || "" : relativePath,
         caseSensitive: route.caseSensitive === true,
         childrenIndex: index,
         route
@@ -649,9 +649,71 @@
         score: computeScore(path, route.index),
         routesMeta
       });
+    };
+
+    routes.forEach((route, index) => {
+      var _route$path;
+
+      // coarse-grain check for optional params
+      if (route.path === "" || !((_route$path = route.path) != null && _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) {
+    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("/"));
+    let result = []; // All child paths with the prefix.  Do this for all children before the
+    // optional version for all children so we get consistent ordering where the
+    // parent optional aspect is preferred as required.  Otherwise, we can get
+    // child sections interspersed where deeper optional segments are higher than
+    // parent optional segments, where for example, /:two would explodes _earlier_
+    // then /:one.  By always including the parent as required _for all children_
+    // first, we avoid this issue
+
+    result.push(...restExploded.map(subpath => subpath === "" ? required : [required, subpath].join("/"))); // Then if this is an optional value, add all child versions without
+
+    if (isOptional) {
+      result.push(...restExploded);
+    } // for absolute paths, ensure `/` instead of empty segment
+
+
+    return result.map(exploded => path.startsWith("/") && exploded === "" ? "/" : exploded);
+  }
 
   function rankRouteBranches(branches) {
     branches.sort((a, b) => a.score !== b.score ? b.score - a.score // Higher score first
@@ -735,14 +797,24 @@
    */
 
 
-  function generatePath(path, params) {
+  function generatePath(originalPath, params) {
     if (params === void 0) {
       params = {};
     }
 
-    return path.replace(/:(\w+)/g, (_, key) => {
+    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(/\*$/, "/*");
+    }
+
+    return path.replace(/^:(\w+)/g, (_, key) => {
       invariant(params[key] != null, "Missing \":" + key + "\" param");
       return params[key];
+    }).replace(/\/:(\w+)/g, (_, key) => {
+      invariant(params[key] != null, "Missing \":" + key + "\" param");
+      return "/" + params[key];
     }).replace(/(\/?)\*/, (_, prefix, __, str) => {
       const star = "*";
 
@@ -814,9 +886,9 @@
     let regexpSource = "^" + path.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, (_, paramName) => {
+    .replace(/\/:(\w+)/g, (_, paramName) => {
       paramNames.push(paramName);
-      return "([^\\/]+)";
+      return "/([^\\/]+)";
     });
 
     if (path.endsWith("*")) {
@@ -1297,9 +1369,9 @@
    * A Router instance manages all navigation and data loading/mutations
    */
 
-  const validActionMethodsArr = ["post", "put", "patch", "delete"];
-  const validActionMethods = new Set(validActionMethodsArr);
-  const validRequestMethodsArr = ["get", ...validActionMethodsArr];
+  const validMutationMethodsArr = ["post", "put", "patch", "delete"];
+  const validMutationMethods = new Set(validMutationMethodsArr);
+  const validRequestMethodsArr = ["get", ...validMutationMethodsArr];
   const validRequestMethods = new Set(validRequestMethodsArr);
   const redirectStatusCodes = new Set([301, 302, 303, 307, 308]);
   const redirectPreserveMethodStatusCodes = new Set([307, 308]);
@@ -1536,7 +1608,7 @@
       // without having to touch history
 
       location = _extends({}, location, init.history.encodeLocation(location));
-      let historyAction = (opts && opts.replace) === true || submission != null ? exports.Action.Replace : exports.Action.Push;
+      let historyAction = (opts && opts.replace) === true || submission != null && isMutationMethod(submission.formMethod) ? exports.Action.Replace : exports.Action.Push;
       let preventScrollReset = opts && "preventScrollReset" in opts ? opts.preventScrollReset === true : undefined;
       return await startNavigation(historyAction, location, {
         submission,
@@ -1640,7 +1712,7 @@
         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, location, opts.submission, matches, {
           replace: opts.replace
@@ -1767,14 +1839,15 @@
       let loadingNavigation = overrideNavigation;
 
       if (!loadingNavigation) {
-        let navigation = {
+        let navigation = _extends({
           state: "loading",
           location,
           formMethod: undefined,
           formAction: undefined,
           formEncType: undefined,
           formData: undefined
-        };
+        }, submission);
+
         loadingNavigation = navigation;
       }
 
@@ -1909,7 +1982,7 @@
       } = normalizeNavigateOptions(href, opts, true);
       let match = getTargetMatch(matches, path);
 
-      if (submission) {
+      if (submission && isMutationMethod(submission.formMethod)) {
         handleFetcherAction(key, routeId, path, match, matches, submission);
         return;
       } // Store off the match so we can call it's shouldRevalidate on subsequent
@@ -1917,7 +1990,7 @@
 
 
       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,
     // errors, and revalidation
 
@@ -2098,17 +2171,19 @@
     } // Call the matched loader for fetcher.load(), handling redirects, errors, etc.
 
 
-    async function handleFetcherLoader(key, routeId, path, match, matches) {
+    async function handleFetcherLoader(key, routeId, path, match, matches, submission) {
       let existingFetcher = state.fetchers.get(key); // Put this fetcher into it's loading state
 
-      let loadingFetcher = {
+      let loadingFetcher = _extends({
         state: "loading",
         formMethod: undefined,
         formAction: undefined,
         formEncType: undefined,
-        formData: undefined,
+        formData: undefined
+      }, submission, {
         data: existingFetcher && existingFetcher.data
-      };
+      });
+
       state.fetchers.set(key, loadingFetcher);
       updateState({
         fetchers: new Map(state.fetchers)
@@ -2228,10 +2303,10 @@
         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) && formEncType && formData) {
+      if (redirectPreserveMethodStatusCodes.has(redirect.status) && formMethod && isMutationMethod(formMethod) && formEncType && formData) {
         await startNavigation(redirectHistoryAction, redirectLocation, {
           submission: {
             formMethod,
@@ -2642,7 +2717,7 @@
       invariant(request.signal, "query()/queryRoute() requests must contain an AbortController signal");
 
       try {
-        if (isSubmissionMethod(request.method.toLowerCase())) {
+        if (isMutationMethod(request.method.toLowerCase())) {
           let result = await submit(request, matches, routeMatch || getTargetMatch(matches, location), requestContext, routeMatch != null);
           return result;
         }
@@ -2759,6 +2834,8 @@
 
 
       let loaderRequest = new Request(request.url, {
+        headers: request.headers,
+        redirect: request.redirect,
         signal: request.signal
       });
       let context = await loadRouteData(loaderRequest, matches, requestContext);
@@ -2874,16 +2951,22 @@
     } // 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;
+
+    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
 
 
@@ -2907,7 +2990,8 @@
     }
 
     return {
-      path: createPath(parsedPath)
+      path: createPath(parsedPath),
+      submission
     };
   } // Filter out all routes below any caught error as they aren't going to
   // render so we don't need to load them
@@ -3151,7 +3235,7 @@
       signal
     };
 
-    if (submission) {
+    if (submission && isMutationMethod(submission.formMethod)) {
       let {
         formMethod,
         formEncType,
@@ -3201,11 +3285,14 @@
           pendingError = undefined;
         }
 
-        errors = Object.assign(errors || {}, {
-          [boundaryMatch.route.id]: error
-        }); // Once we find our first (highest) error, we set the status code and
+        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) {
           foundError = true;
           statusCode = isRouteErrorResponse(result.error) ? result.error.status : 500;
@@ -3421,8 +3508,8 @@
     return validRequestMethods.has(method);
   }
 
-  function isSubmissionMethod(method) {
-    return validActionMethods.has(method);
+  function isMutationMethod(method) {
+    return validMutationMethods.has(method);
   }
 
   async function resolveDeferredResults(currentMatches, matchesToLoad, results, signal, isFetcher, currentLoaderData) {