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

package/dist/utils.d.ts

@@ -50,8 +50,25 @@ export interface ErrorResult {
  * Result from a loader or action - potentially successful or unsuccessful
  */
 export declare type DataResult = SuccessResult | DeferredResult | RedirectResult | ErrorResult;
-export declare type MutationFormMethod = "post" | "put" | "patch" | "delete";
-export declare type FormMethod = "get" | MutationFormMethod;
+declare type LowerCaseFormMethod = "get" | "post" | "put" | "patch" | "delete";
+declare type UpperCaseFormMethod = Uppercase<LowerCaseFormMethod>;
+/**
+ * Users can specify either lowercase or uppercase form methods on <Form>,
+ * useSubmit(), <fetcher.Form>, etc.
+ */
+export declare type HTMLFormMethod = LowerCaseFormMethod | UpperCaseFormMethod;
+/**
+ * Active navigation/fetcher form methods are exposed in lowercase on the
+ * RouterState
+ */
+export declare type FormMethod = LowerCaseFormMethod;
+export declare type MutationFormMethod = Exclude<FormMethod, "get">;
+/**
+ * In v7, active navigation/fetcher form methods are exposed in uppercase on the
+ * RouterState.  This is to align with the normalization done via fetch().
+ */
+export declare type V7_FormMethod = UpperCaseFormMethod;
+export declare type V7_MutationFormMethod = Exclude<V7_FormMethod, "GET">;
 export declare type FormEncType = "application/x-www-form-urlencoded" | "multipart/form-data";
 /**
  * @private
@@ -59,7 +76,7 @@ export declare type FormEncType = "application/x-www-form-urlencoded" | "multipa
  * external consumption
  */
 export interface Submission {
-    formMethod: FormMethod;
+    formMethod: FormMethod | V7_FormMethod;
     formAction: string;
     formEncType: FormEncType;
     formData: FormData;

package/index.ts

@@ -13,6 +13,7 @@ export type {
   TrackedPromise,
   FormEncType,
   FormMethod,
+  HTMLFormMethod,
   JsonFunction,
   LoaderFunction,
   LoaderFunctionArgs,
@@ -22,7 +23,7 @@ export type {
   PathPattern,
   RedirectFunction,
   ShouldRevalidateFunction,
-  Submission,
+  V7_FormMethod,
 } from "./utils";
 
 export {

package/package.json

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

package/router.ts

@@ -22,12 +22,15 @@ import type {
   Submission,
   SuccessResult,
   AgnosticRouteMatch,
-  MutationFormMethod,
   ShouldRevalidateFunction,
   RouteManifest,
   ImmutableRouteKey,
   ActionFunction,
   LoaderFunction,
+  V7_MutationFormMethod,
+  V7_FormMethod,
+  HTMLFormMethod,
+  MutationFormMethod,
 } from "./utils";
 import {
   DeferredData,
@@ -326,15 +329,23 @@ export type HydrationState = Partial<
   Pick<RouterState, "loaderData" | "actionData" | "errors">
 >;
 
+/**
+ * Future flags to toggle new feature behavior
+ */
+export interface FutureConfig {
+  v7_normalizeFormMethod: boolean;
+}
+
 /**
  * Initialization options for createRouter
  */
 export interface RouterInit {
-  basename?: string;
   routes: AgnosticRouteObject[];
   history: History;
-  hydrationData?: HydrationState;
+  basename?: string;
   detectErrorBoundary?: DetectErrorBoundaryFunction;
+  future?: FutureConfig;
+  hydrationData?: HydrationState;
 }
 
 /**
@@ -415,7 +426,7 @@ type SubmissionNavigateOptions = {
   replace?: boolean;
   state?: any;
   preventScrollReset?: boolean;
-  formMethod?: FormMethod;
+  formMethod?: HTMLFormMethod;
   formEncType?: FormEncType;
   formData: FormData;
 };
@@ -449,7 +460,7 @@ export type NavigationStates = {
   Loading: {
     state: "loading";
     location: Location;
-    formMethod: FormMethod | undefined;
+    formMethod: FormMethod | V7_FormMethod | undefined;
     formAction: string | undefined;
     formEncType: FormEncType | undefined;
     formData: FormData | undefined;
@@ -457,7 +468,7 @@ export type NavigationStates = {
   Submitting: {
     state: "submitting";
     location: Location;
-    formMethod: FormMethod;
+    formMethod: FormMethod | V7_FormMethod;
     formAction: string;
     formEncType: FormEncType;
     formData: FormData;
@@ -483,7 +494,7 @@ type FetcherStates<TData = any> = {
   };
   Loading: {
     state: "loading";
-    formMethod: FormMethod | undefined;
+    formMethod: FormMethod | V7_FormMethod | undefined;
     formAction: string | undefined;
     formEncType: FormEncType | undefined;
     formData: FormData | undefined;
@@ -492,7 +503,7 @@ type FetcherStates<TData = any> = {
   };
   Submitting: {
     state: "submitting";
-    formMethod: FormMethod;
+    formMethod: FormMethod | V7_FormMethod;
     formAction: string;
     formEncType: FormEncType;
     formData: FormData;
@@ -676,6 +687,11 @@ export function createRouter(init: RouterInit): Router {
     manifest
   );
   let inFlightDataRoutes: AgnosticDataRouteObject[] | undefined;
+  // Config driven behavior flags
+  let future: FutureConfig = {
+    v7_normalizeFormMethod: false,
+    ...init.future,
+  };
   // Cleanup function for history
   let unlistenHistory: (() => void) | null = null;
   // Externally-provided functions to call on all state changes
@@ -862,35 +878,15 @@ export function createRouter(init: RouterInit): Router {
       }
     );
 
-    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
+    // 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) {
       startNavigation(HistoryAction.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(HistoryAction.Pop, state.location);
-      }
-    });
-
     return router;
   }
 
@@ -1033,7 +1029,11 @@ export function createRouter(init: RouterInit): Router {
       return;
     }
 
-    let { path, submission, error } = normalizeNavigateOptions(to, opts);
+    let { path, submission, error } = normalizeNavigateOptions(
+      to,
+      future,
+      opts
+    );
 
     let currentLocation = state.location;
     let nextLocation = createLocation(state.location, path, opts && opts.state);
@@ -1152,6 +1152,7 @@ export function createRouter(init: RouterInit): Router {
     location: Location,
     opts?: {
       submission?: Submission;
+      fetcherSubmission?: Submission;
       overrideNavigation?: Navigation;
       pendingError?: ErrorResponse;
       startUninterruptedRevalidation?: boolean;
@@ -1263,6 +1264,7 @@ export function createRouter(init: RouterInit): Router {
       matches,
       loadingNavigation,
       opts && opts.submission,
+      opts && opts.fetcherSubmission,
       opts && opts.replace,
       pendingActionData,
       pendingError
@@ -1385,6 +1387,7 @@ export function createRouter(init: RouterInit): Router {
     matches: AgnosticDataRouteMatch[],
     overrideNavigation?: Navigation,
     submission?: Submission,
+    fetcherSubmission?: Submission,
     replace?: boolean,
     pendingActionData?: RouteData,
     pendingError?: RouteData
@@ -1406,19 +1409,20 @@ export function createRouter(init: RouterInit): Router {
 
     // If this was a redirect from an action we don't have a "submission" but
     // we have it on the loading navigation so use that if available
-    let activeSubmission = submission
-      ? submission
-      : loadingNavigation.formMethod &&
-        loadingNavigation.formAction &&
-        loadingNavigation.formData &&
-        loadingNavigation.formEncType
-      ? {
-          formMethod: loadingNavigation.formMethod,
-          formAction: loadingNavigation.formAction,
-          formData: loadingNavigation.formData,
-          formEncType: loadingNavigation.formEncType,
-        }
-      : undefined;
+    let activeSubmission =
+      submission || fetcherSubmission
+        ? submission || fetcherSubmission
+        : loadingNavigation.formMethod &&
+          loadingNavigation.formAction &&
+          loadingNavigation.formData &&
+          loadingNavigation.formEncType
+        ? {
+            formMethod: loadingNavigation.formMethod,
+            formAction: loadingNavigation.formAction,
+            formData: loadingNavigation.formData,
+            formEncType: loadingNavigation.formEncType,
+          }
+        : undefined;
 
     let routesToUse = inFlightDataRoutes || dataRoutes;
     let [matchesToLoad, revalidatingFetchers] = getMatchesToLoad(
@@ -1588,7 +1592,12 @@ export function createRouter(init: RouterInit): Router {
       return;
     }
 
-    let { path, submission } = normalizeNavigateOptions(href, opts, true);
+    let { path, submission } = normalizeNavigateOptions(
+      href,
+      future,
+      opts,
+      true
+    );
     let match = getTargetMatch(matches, path);
 
     pendingPreventScrollReset = (opts && opts.preventScrollReset) === true;
@@ -1680,6 +1689,7 @@ export function createRouter(init: RouterInit): Router {
       updateState({ fetchers: new Map(state.fetchers) });
 
       return startRedirectNavigation(state, actionResult, {
+        submission,
         isFetchActionRedirect: true,
       });
     }
@@ -2047,6 +2057,22 @@ export function createRouter(init: RouterInit): Router {
         // 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
@@ -2461,12 +2487,12 @@ export function createStaticHandler(
     { requestContext }: { requestContext?: unknown } = {}
   ): Promise<StaticHandlerContext | Response> {
     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 });
       let { matches: methodNotAllowedMatches, route } =
         getShortCircuitMatches(dataRoutes);
@@ -2543,12 +2569,12 @@ export function createStaticHandler(
     }: { requestContext?: unknown; routeId?: string } = {}
   ): Promise<any> {
     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 });
     } else if (!matches) {
       throw getInternalRouterError(404, { pathname: location.pathname });
@@ -2943,6 +2969,7 @@ function isSubmissionNavigation(
 // URLSearchParams so they behave identically to links with query params
 function normalizeNavigateOptions(
   to: To,
+  future: FutureConfig,
   opts?: RouterNavigateOptions,
   isFetcher = false
 ): {
@@ -2967,8 +2994,11 @@ function normalizeNavigateOptions(
   // Create a Submission on non-GET navigations
   let submission: Submission | undefined;
   if (opts.formData) {
+    let formMethod = opts.formMethod || "get";
     submission = {
-      formMethod: opts.formMethod || "get",
+      formMethod: future.v7_normalizeFormMethod
+        ? (formMethod.toUpperCase() as V7_FormMethod)
+        : (formMethod.toLowerCase() as FormMethod),
       formAction: stripHashFromPath(path),
       formEncType:
         (opts && opts.formEncType) || "application/x-www-form-urlencoded",
@@ -3482,6 +3512,9 @@ function createClientSideRequest(
 
   if (submission && isMutationMethod(submission.formMethod)) {
     let { formMethod, formEncType, formData } = 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"
@@ -3851,12 +3884,14 @@ function isQueryRouteResponse(obj: any): obj is QueryRouteResponse {
   );
 }
 
-function isValidMethod(method: string): method is FormMethod {
-  return validRequestMethods.has(method as FormMethod);
+function isValidMethod(method: string): method is FormMethod | V7_FormMethod {
+  return validRequestMethods.has(method.toLowerCase() as FormMethod);
 }
 
-function isMutationMethod(method?: string): method is MutationFormMethod {
-  return validMutationMethods.has(method as MutationFormMethod);
+function isMutationMethod(
+  method: string
+): method is MutationFormMethod | V7_MutationFormMethod {
+  return validMutationMethods.has(method.toLowerCase() as MutationFormMethod);
 }
 
 async function resolveDeferredResults(

package/utils.ts

@@ -63,8 +63,28 @@ export type DataResult =
   | RedirectResult
   | ErrorResult;
 
-export type MutationFormMethod = "post" | "put" | "patch" | "delete";
-export type FormMethod = "get" | MutationFormMethod;
+type LowerCaseFormMethod = "get" | "post" | "put" | "patch" | "delete";
+type UpperCaseFormMethod = Uppercase<LowerCaseFormMethod>;
+
+/**
+ * Users can specify either lowercase or uppercase form methods on <Form>,
+ * useSubmit(), <fetcher.Form>, etc.
+ */
+export type HTMLFormMethod = LowerCaseFormMethod | UpperCaseFormMethod;
+
+/**
+ * Active navigation/fetcher form methods are exposed in lowercase on the
+ * RouterState
+ */
+export type FormMethod = LowerCaseFormMethod;
+export type MutationFormMethod = Exclude<FormMethod, "get">;
+
+/**
+ * In v7, active navigation/fetcher form methods are exposed in uppercase on the
+ * RouterState.  This is to align with the normalization done via fetch().
+ */
+export type V7_FormMethod = UpperCaseFormMethod;
+export type V7_MutationFormMethod = Exclude<V7_FormMethod, "GET">;
 
 export type FormEncType =
   | "application/x-www-form-urlencoded"
@@ -76,7 +96,7 @@ export type FormEncType =
  * external consumption
  */
 export interface Submission {
-  formMethod: FormMethod;
+  formMethod: FormMethod | V7_FormMethod;
   formAction: string;
   formEncType: FormEncType;
   formData: FormData;