@remix-run/router 1.4.0 → 1.5.0-pre.0

package/CHANGELOG.md

@@ -1,5 +1,24 @@
 # `@remix-run/router`
 
+## 1.5.0-pre.0
+
+### Minor Changes
+
+- Added support for [**Future Flags**](https://reactrouter.com/en/main/guides/api-development-strategy) in React Router. The first flag being introduced is `future.v7_normalizeFormMethod` which will normalize the exposed `useNavigation()/useFetcher()` `formMethod` fields as uppercase HTTP methods to align with the `fetch()` behavior. ([#10207](https://github.com/remix-run/react-router/pull/10207))
+
+  - When `future.v7_normalizeFormMethod === false` (default v6 behavior),
+    - `useNavigation().formMethod` is lowercase
+    - `useFetcher().formMethod` is lowercase
+  - When `future.v7_normalizeFormMethod === true`:
+    - `useNavigation().formMethod` is uppercase
+    - `useFetcher().formMethod` is uppercase
+
+### Patch Changes
+
+- Provide fetcher submission to `shouldRevalidate` if the fetcher action redirects ([#10208](https://github.com/remix-run/react-router/pull/10208))
+- Properly handle `lazy()` errors during router initialization ([#10201](https://github.com/remix-run/react-router/pull/10201))
+- Update to latest `@remix-run/web-fetch@4.3.3` ([#10216](https://github.com/remix-run/react-router/pull/10216))
+
 ## 1.4.0
 
 ### Minor Changes
@@ -64,7 +83,7 @@
 
 ### Patch Changes
 
-- Fix `generatePath` incorrectly applying parameters in some cases ([`bc6fefa1`](https://github.com/remix-run/react-router/commit/bc6fefa19019ce9f5250c8b5af9b8c5d3390e9d1))
+- Fix `generatePath` incorrectly applying parameters in some cases ([#10078](https://github.com/remix-run/react-router/pull/10078))
 
 ## 1.3.3
 

package/dist/index.d.ts

@@ -1,4 +1,4 @@
-export type { ActionFunction, ActionFunctionArgs, AgnosticDataIndexRouteObject, AgnosticDataNonIndexRouteObject, AgnosticDataRouteMatch, AgnosticDataRouteObject, AgnosticIndexRouteObject, AgnosticNonIndexRouteObject, AgnosticRouteMatch, AgnosticRouteObject, LazyRouteFunction, TrackedPromise, FormEncType, FormMethod, JsonFunction, LoaderFunction, LoaderFunctionArgs, ParamParseKey, Params, PathMatch, PathPattern, RedirectFunction, ShouldRevalidateFunction, Submission, } from "./utils";
+export type { ActionFunction, ActionFunctionArgs, AgnosticDataIndexRouteObject, AgnosticDataNonIndexRouteObject, AgnosticDataRouteMatch, AgnosticDataRouteObject, AgnosticIndexRouteObject, AgnosticNonIndexRouteObject, AgnosticRouteMatch, AgnosticRouteObject, LazyRouteFunction, TrackedPromise, FormEncType, FormMethod, HTMLFormMethod, JsonFunction, LoaderFunction, LoaderFunctionArgs, ParamParseKey, Params, PathMatch, PathPattern, RedirectFunction, ShouldRevalidateFunction, V7_FormMethod, } from "./utils";
 export { AbortedDeferredError, ErrorResponse, defer, generatePath, getToPathname, isRouteErrorResponse, joinPaths, json, matchPath, matchRoutes, normalizePathname, redirect, resolvePath, resolveTo, stripBasename, } from "./utils";
 export type { BrowserHistory, BrowserHistoryOptions, HashHistory, HashHistoryOptions, History, InitialEntry, Location, MemoryHistory, MemoryHistoryOptions, Path, To, } from "./history";
 export { Action, createBrowserHistory, createPath, createHashHistory, createMemoryHistory, parsePath, } from "./history";

package/dist/router.cjs.js

@@ -1,5 +1,5 @@
 /**
- * @remix-run/router v1.4.0
+ * @remix-run/router v1.5.0-pre.0
  *
  * Copyright (c) Remix Software Inc.
  *
@@ -1488,7 +1488,12 @@ function createRouter(init) {
   let manifest = {}; // Routes in tree format for matching
 
   let dataRoutes = convertRoutesToDataRoutes(init.routes, detectErrorBoundary, undefined, manifest);
-  let inFlightDataRoutes; // Cleanup function for history
+  let inFlightDataRoutes; // Config driven behavior flags
+
+  let future = _extends({
+    v7_normalizeFormMethod: false
+  }, init.future); // Cleanup function for history
+
 
   let unlistenHistory = null; // Externally-provided functions to call on all state changes
 
@@ -1652,35 +1657,16 @@ function createRouter(init) {
       }
 
       return startNavigation(historyAction, location);
-    });
+    }); // Kick off initial data load if needed.  Use Pop to avoid modifying history
+    // Note we don't do any handling of lazy here.  For SPA's it'll get handled
+    // in the normal navigation flow.  For SSR it's expected that lazy modules are
+    // resolved prior to router creation since we can't go into a fallbackElement
+    // UI for SSR'd apps
 
-    if (state.initialized) {
-      return router;
-    }
-
-    let lazyMatches = state.matches.filter(m => m.route.lazy);
-
-    if (lazyMatches.length === 0) {
-      // Kick off initial data load if needed.  Use Pop to avoid modifying history
+    if (!state.initialized) {
       startNavigation(exports.Action.Pop, state.location);
-      return router;
-    } // Load lazy modules, then kick off initial data load if needed
-
-
-    let lazyPromises = lazyMatches.map(m => loadLazyRouteModule(m.route, detectErrorBoundary, manifest));
-    Promise.all(lazyPromises).then(() => {
-      let initialized = !state.matches.some(m => m.route.loader) || init.hydrationData != null;
+    }
 
-      if (initialized) {
-        // We already have required loaderData so we can just set initialized
-        updateState({
-          initialized: true
-        });
-      } else {
-        // We still need to kick off initial data loads
-        startNavigation(exports.Action.Pop, state.location);
-      }
-    });
     return router;
   } // Clean up a router and it's side effects
 
@@ -1797,7 +1783,7 @@ function createRouter(init) {
       path,
       submission,
       error
-    } = normalizeNavigateOptions(to, opts);
+    } = normalizeNavigateOptions(to, future, opts);
     let currentLocation = state.location;
     let nextLocation = createLocation(state.location, path, opts && opts.state); // When using navigate as a PUSH/REPLACE we aren't reading an already-encoded
     // URL from window.location, so we need to encode it here so the behavior
@@ -1989,7 +1975,7 @@ function createRouter(init) {
       shortCircuited,
       loaderData,
       errors
-    } = await handleLoaders(request, location, matches, loadingNavigation, opts && opts.submission, opts && opts.replace, pendingActionData, pendingError);
+    } = await handleLoaders(request, location, matches, loadingNavigation, opts && opts.submission, opts && opts.fetcherSubmission, opts && opts.replace, pendingActionData, pendingError);
 
     if (shortCircuited) {
       return;
@@ -2102,7 +2088,7 @@ function createRouter(init) {
   // errors, etc.
 
 
-  async function handleLoaders(request, location, matches, overrideNavigation, submission, replace, pendingActionData, pendingError) {
+  async function handleLoaders(request, location, matches, overrideNavigation, submission, fetcherSubmission, replace, pendingActionData, pendingError) {
     // Figure out the right navigation we want to use for data loading
     let loadingNavigation = overrideNavigation;
 
@@ -2121,7 +2107,7 @@ function createRouter(init) {
     // we have it on the loading navigation so use that if available
 
 
-    let activeSubmission = submission ? submission : loadingNavigation.formMethod && loadingNavigation.formAction && loadingNavigation.formData && loadingNavigation.formEncType ? {
+    let activeSubmission = submission || fetcherSubmission ? submission || fetcherSubmission : loadingNavigation.formMethod && loadingNavigation.formAction && loadingNavigation.formData && loadingNavigation.formEncType ? {
       formMethod: loadingNavigation.formMethod,
       formAction: loadingNavigation.formAction,
       formData: loadingNavigation.formData,
@@ -2258,7 +2244,7 @@ function createRouter(init) {
     let {
       path,
       submission
-    } = normalizeNavigateOptions(href, opts, true);
+    } = normalizeNavigateOptions(href, future, opts, true);
     let match = getTargetMatch(matches, path);
     pendingPreventScrollReset = (opts && opts.preventScrollReset) === true;
 
@@ -2338,6 +2324,7 @@ function createRouter(init) {
         fetchers: new Map(state.fetchers)
       });
       return startRedirectNavigation(state, actionResult, {
+        submission,
         isFetchActionRedirect: true
       });
     } // Process any non-redirect errors thrown
@@ -2628,6 +2615,22 @@ function createRouter(init) {
         // Preserve this flag across redirects
         preventScrollReset: pendingPreventScrollReset
       });
+    } else if (isFetchActionRedirect) {
+      // For a fetch action redirect, we kick off a new loading navigation
+      // without the fetcher submission, but we send it along for shouldRevalidate
+      await startNavigation(redirectHistoryAction, redirectLocation, {
+        overrideNavigation: {
+          state: "loading",
+          location: redirectLocation,
+          formMethod: undefined,
+          formAction: undefined,
+          formEncType: undefined,
+          formData: undefined
+        },
+        fetcherSubmission: submission,
+        // Preserve this flag across redirects
+        preventScrollReset: pendingPreventScrollReset
+      });
     } else {
       // Otherwise, we kick off a new loading navigation, preserving the
       // submission info for the duration of this navigation
@@ -2973,11 +2976,11 @@ function createStaticHandler(routes, opts) {
       requestContext
     } = _temp2 === void 0 ? {} : _temp2;
     let url = new URL(request.url);
-    let method = request.method.toLowerCase();
+    let method = request.method;
     let location = createLocation("", createPath(url), null, "default");
     let matches = matchRoutes(dataRoutes, location, basename); // SSR supports HEAD requests while SPA doesn't
 
-    if (!isValidMethod(method) && method !== "head") {
+    if (!isValidMethod(method) && method !== "HEAD") {
       let error = getInternalRouterError(405, {
         method
       });
@@ -3065,11 +3068,11 @@ function createStaticHandler(routes, opts) {
       requestContext
     } = _temp3 === void 0 ? {} : _temp3;
     let url = new URL(request.url);
-    let method = request.method.toLowerCase();
+    let method = request.method;
     let location = createLocation("", createPath(url), null, "default");
     let matches = matchRoutes(dataRoutes, location, basename); // SSR supports HEAD requests while SPA doesn't
 
-    if (!isValidMethod(method) && method !== "head" && method !== "options") {
+    if (!isValidMethod(method) && method !== "HEAD" && method !== "OPTIONS") {
       throw getInternalRouterError(405, {
         method
       });
@@ -3362,7 +3365,7 @@ function isSubmissionNavigation(opts) {
 // URLSearchParams so they behave identically to links with query params
 
 
-function normalizeNavigateOptions(to, opts, isFetcher) {
+function normalizeNavigateOptions(to, future, opts, isFetcher) {
   if (isFetcher === void 0) {
     isFetcher = false;
   }
@@ -3388,8 +3391,9 @@ function normalizeNavigateOptions(to, opts, isFetcher) {
   let submission;
 
   if (opts.formData) {
+    let formMethod = opts.formMethod || "get";
     submission = {
-      formMethod: opts.formMethod || "get",
+      formMethod: future.v7_normalizeFormMethod ? formMethod.toUpperCase() : formMethod.toLowerCase(),
       formAction: stripHashFromPath(path),
       formEncType: opts && opts.formEncType || "application/x-www-form-urlencoded",
       formData: opts.formData
@@ -3829,7 +3833,10 @@ function createClientSideRequest(history, location, signal, submission) {
       formMethod,
       formEncType,
       formData
-    } = submission;
+    } = submission; // Didn't think we needed this but it turns out unlike other methods, patch
+    // won't be properly normalized to uppercase and results in a 405 error.
+    // See: https://fetch.spec.whatwg.org/#concept-method
+
     init.method = formMethod.toUpperCase();
     init.body = formEncType === "application/x-www-form-urlencoded" ? convertFormDataToSearchParams(formData) : formData;
   } // Content-Type is inferred (https://fetch.spec.whatwg.org/#dom-request)
@@ -4118,11 +4125,11 @@ function isQueryRouteResponse(obj) {
 }
 
 function isValidMethod(method) {
-  return validRequestMethods.has(method);
+  return validRequestMethods.has(method.toLowerCase());
 }
 
 function isMutationMethod(method) {
-  return validMutationMethods.has(method);
+  return validMutationMethods.has(method.toLowerCase());
 }
 
 async function resolveDeferredResults(currentMatches, matchesToLoad, results, signal, isFetcher, currentLoaderData) {