Remove future.v7_normalizeFormMethod

Author: brophdawg11

.changeset/fair-cheetahs-hope.md

@@ -0,0 +1,6 @@
+---
+"react-router-dom": major
+"react-router": major
+---
+
+Remove `future.v7_normalizeFormMethod` future flag

docs/community/api-development-strategy.md

@@ -56,18 +56,15 @@ These flags are only applicable when using a [Data Router][picking-a-router] and
 
 ```js
 const router = createBrowserRouter(routes, {
-  future: {
-    v7_normalizeFormMethod: true,
-  },
+  future: {},
 });
 ```
 
-| Flag                                      | Description                                                           |
-| ----------------------------------------- | --------------------------------------------------------------------- |
-| `v7_fetcherPersist`                       | Delay active fetcher cleanup until they return to an `idle` state     |
-| `v7_normalizeFormMethod`                  | Normalize `useNavigation().formMethod` to be an uppercase HTTP Method |
-| [`v7_partialHydration`][partialhydration] | Support partial hydration for Server-rendered apps                    |
-| `v7_prependBasename`                      | Prepend the router basename to navigate/fetch paths                   |
+| Flag                                      | Description                                                       |
+| ----------------------------------------- | ----------------------------------------------------------------- |
+| `v7_fetcherPersist`                       | Delay active fetcher cleanup until they return to an `idle` state |
+| [`v7_partialHydration`][partialhydration] | Support partial hydration for Server-rendered apps                |
+| `v7_prependBasename`                      | Prepend the router basename to navigate/fetch paths               |
 
 #### `createStaticHandler` Future Flags
 

packages/react-router/__tests__/router/submission-test.ts

@@ -536,7 +536,7 @@ describe("submissions", () => {
         expect(t.router.state.fetchers.get("key")?.formMethod).toBeUndefined();
       });
 
-      it("normalizes to uppercase in v7 via v7_normalizeFormMethod", async () => {
+      it("normalizes to uppercase", async () => {
         let t = setup({
           routes: [
             {
@@ -553,7 +553,6 @@ describe("submissions", () => {
             },
           ],
           future: {
-            v7_normalizeFormMethod: true,
             v7_prependBasename: false,
           },
         });

packages/react-router/__tests__/router/utils/data-router-setup.ts

@@ -507,7 +507,7 @@ export function setup({
     // Otherwise we should only need a loader for the leaf match
     let activeLoaderMatches = [match];
     // @ts-expect-error
-    if (opts?.formMethod != null && opts.formMethod.toLowerCase() !== "get") {
+    if (opts?.formMethod != null && opts.formMethod.toUpperCase() !== "GET") {
       if (currentRouter.state.navigation?.location) {
         let matches = matchRoutes(
           inFlightRoutes || currentRouter.routes,
@@ -572,7 +572,7 @@ export function setup({
     invariant(currentRouter, "No currentRouter available");
 
     // @ts-expect-error
-    if (opts?.formMethod != null && opts.formMethod.toLowerCase() !== "get") {
+    if (opts?.formMethod != null && opts.formMethod.toUpperCase() !== "GET") {
       activeActionType = "navigation";
       activeActionNavigationId = navigationId;
       // Assume happy path and mark this navigations loaders as active.  Even if
@@ -662,7 +662,7 @@ export function setup({
     invariant(currentRouter, "No currentRouter available");
 
     // @ts-expect-error
-    if (opts?.formMethod != null && opts.formMethod.toLowerCase() !== "get") {
+    if (opts?.formMethod != null && opts.formMethod.toUpperCase() !== "GET") {
       activeActionType = "fetch";
       activeActionFetchId = navigationId;
     } else {

packages/react-router/lib/dom/dom.ts

@@ -59,9 +59,9 @@ export type URLSearchParamsInit =
   supports arrays as values in the object form of the initializer
   instead of just strings. This is convenient when you need multiple
   values for a given key, but don't want to use an array initializer.
-  
+
   For example, instead of:
-  
+
   ```tsx
   let searchParams = new URLSearchParams([
     ['sort', 'name'],

packages/react-router/lib/dom/server.tsx

@@ -304,7 +304,6 @@ export function createStaticRouter(
     get future() {
       return {
         v7_fetcherPersist: false,
-        v7_normalizeFormMethod: false,
         v7_partialHydration: opts.future?.v7_partialHydration === true,
         v7_prependBasename: false,
         unstable_skipActionErrorRevalidation: false,

packages/react-router/lib/dom/ssr/browser.tsx

@@ -162,7 +162,6 @@ function createHydratedRouter(): RemixRouter {
     history: createBrowserHistory(),
     basename: ssrInfo.context.basename,
     future: {
-      v7_normalizeFormMethod: true,
       v7_fetcherPersist: ssrInfo.context.future.v3_fetcherPersist,
       v7_partialHydration: true,
       v7_prependBasename: true,

packages/react-router/lib/router/index.ts

@@ -34,7 +34,6 @@ export type {
   TrackedPromise,
   UIMatch,
   UpperCaseFormMethod,
-  V7_FormMethod,
 } from "./utils";
 
 export {

packages/react-router/lib/router/router.ts

@@ -33,8 +33,6 @@ import type {
   Submission,
   SuccessResult,
   UIMatch,
-  V7_FormMethod,
-  V7_MutationFormMethod,
 } from "./utils";
 import {
   ErrorResponseImpl,
@@ -355,7 +353,6 @@ export type HydrationState = Partial<
  */
 export interface FutureConfig {
   v7_fetcherPersist: boolean;
-  v7_normalizeFormMethod: boolean;
   v7_partialHydration: boolean;
   v7_prependBasename: boolean;
   unstable_skipActionErrorRevalidation: boolean;
@@ -714,17 +711,17 @@ interface RevalidatingFetcher extends FetchLoadMatch {
 }
 
 const validMutationMethodsArr: MutationFormMethod[] = [
-  "post",
-  "put",
-  "patch",
-  "delete",
+  "POST",
+  "PUT",
+  "PATCH",
+  "DELETE",
 ];
 const validMutationMethods = new Set<MutationFormMethod>(
   validMutationMethodsArr
 );
 
 const validRequestMethodsArr: FormMethod[] = [
-  "get",
+  "GET",
   ...validMutationMethodsArr,
 ];
 const validRequestMethods = new Set<FormMethod>(validRequestMethodsArr);
@@ -822,7 +819,6 @@ export function createRouter(init: RouterInit): Router {
   // Config driven behavior flags
   let future: FutureConfig = {
     v7_fetcherPersist: false,
-    v7_normalizeFormMethod: false,
     v7_partialHydration: false,
     v7_prependBasename: false,
     unstable_skipActionErrorRevalidation: false,
@@ -1341,7 +1337,6 @@ export function createRouter(init: RouterInit): Router {
       opts?.relative
     );
     let { path, submission, error } = normalizeNavigateOptions(
-      future.v7_normalizeFormMethod,
       false,
       normalizedPath,
       opts
@@ -1995,7 +1990,6 @@ export function createRouter(init: RouterInit): Router {
     }
 
     let { path, submission, error } = normalizeNavigateOptions(
-      future.v7_normalizeFormMethod,
       true,
       normalizedPath,
       opts
@@ -3243,7 +3237,7 @@ export function createStaticHandler(
     );
 
     try {
-      if (isMutationMethod(request.method.toLowerCase())) {
+      if (isMutationMethod(request.method)) {
         let result = await submit(
           request,
           matches,
@@ -3715,7 +3709,6 @@ function normalizeTo(
 // Normalize navigation options by converting formMethod=GET formData objects to
 // URLSearchParams so they behave identically to links with query params
 function normalizeNavigateOptions(
-  normalizeFormMethod: boolean,
   isFetcher: boolean,
   path: string,
   opts?: BaseNavigateOrFetchOptions
@@ -3743,9 +3736,7 @@ function normalizeNavigateOptions(
 
   // Create a Submission on non-GET navigations
   let rawFormMethod = opts.formMethod || "get";
-  let formMethod = normalizeFormMethod
-    ? (rawFormMethod.toUpperCase() as V7_FormMethod)
-    : (rawFormMethod.toLowerCase() as FormMethod);
+  let formMethod = rawFormMethod.toUpperCase() as FormMethod;
   let formAction = stripHashFromPath(path);
 
   if (opts.body !== undefined) {
@@ -4987,14 +4978,12 @@ function isRedirectResponse(result: any): result is Response {
   return status >= 300 && status <= 399 && location != null;
 }
 
-function isValidMethod(method: string): method is FormMethod | V7_FormMethod {
-  return validRequestMethods.has(method.toLowerCase() as FormMethod);
+function isValidMethod(method: string): method is FormMethod {
+  return validRequestMethods.has(method.toUpperCase() as FormMethod);
 }
 
-function isMutationMethod(
-  method: string
-): method is MutationFormMethod | V7_MutationFormMethod {
-  return validMutationMethods.has(method.toLowerCase() as MutationFormMethod);
+function isMutationMethod(method: string): method is MutationFormMethod {
+  return validMutationMethods.has(method.toUpperCase() as MutationFormMethod);
 }
 
 async function resolveDeferredResults(

packages/react-router/lib/router/utils.ts

@@ -82,18 +82,11 @@ export type UpperCaseFormMethod = Uppercase<LowerCaseFormMethod>;
 export type HTMLFormMethod = LowerCaseFormMethod | UpperCaseFormMethod;
 
 /**
- * Active navigation/fetcher form methods are exposed in lowercase on the
- * RouterState
+ * Active navigation/fetcher form methods are exposed in uppercase on the
+ * RouterState. This is to align with the normalization done via fetch().
  */
-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 FormMethod = UpperCaseFormMethod;
+export type MutationFormMethod = Exclude<FormMethod, "GET">;
 
 export type FormEncType =
   | "application/x-www-form-urlencoded"
@@ -116,23 +109,23 @@ type JsonValue = JsonPrimitive | JsonObject | JsonArray;
  */
 export type Submission =
   | {
-      formMethod: FormMethod | V7_FormMethod;
+      formMethod: FormMethod;
       formAction: string;
       formEncType: FormEncType;
       formData: FormData;
       json: undefined;
       text: undefined;
     }
   | {
-      formMethod: FormMethod | V7_FormMethod;
+      formMethod: FormMethod;
       formAction: string;
       formEncType: FormEncType;
       formData: undefined;
       json: JsonValue;
       text: undefined;
     }
   | {
-      formMethod: FormMethod | V7_FormMethod;
+      formMethod: FormMethod;
       formAction: string;
       formEncType: FormEncType;
       formData: undefined;