Add support for application/json and txt/plain serialization

Author: brophdawg11

packages/react-router-dom/dom.ts

@@ -253,10 +253,18 @@ export function getFormSubmissionInfo(
       `Cannot submit element that is not <form>, <button>, or ` +
         `<input type="submit|image">`
     );
-  } else if (options.encType === null) {
+  } else if (
+    options.encType !== undefined &&
+    options.encType !== "application/x-www-form-urlencoded" &&
+    options.encType !== "multipart/form-data"
+  ) {
+    // Any encType other than these (null, application/json, text/plain) means
+    // we will not be submitting as FormData so send the payload through.  The
+    // @remix-run/router will handle serialization of the payload upon Request
+    // creation if needed
     method = options.method || defaultMethod;
     action = options.action || null;
-    encType = null;
+    encType = options.encType;
     payload = target;
   } else {
     method = options.method || defaultMethod;
@@ -273,6 +281,8 @@ export function getFormSubmissionInfo(
           formData.append(name, value);
         }
       } else if (target != null) {
+        // To be deprecated in v7 so the default behavior of undefined matches
+        // the null behavior of no-serialization
         for (let name of Object.keys(target)) {
           // @ts-expect-error
           formData.append(name, target[name]);

packages/router/__tests__/router-test.ts

@@ -4834,6 +4834,7 @@ describe("a router", () => {
       await t.navigate("/tasks", {
         // @ts-expect-error
         formMethod: "head",
+        // @ts-expect-error
         formData: formData,
       });
       expect(t.router.state.navigation.state).toBe("idle");
@@ -4874,6 +4875,7 @@ describe("a router", () => {
       await t.navigate("/tasks", {
         // @ts-expect-error
         formMethod: "options",
+        // @ts-expect-error
         formData: formData,
       });
       expect(t.router.state.navigation.state).toBe("idle");
@@ -6006,6 +6008,161 @@ describe("a router", () => {
       expect((await req.formData()).get("file")).toEqual("file.txt");
     });
 
+    it("serializes payload as application/x-www-form-urlencoded", async () => {
+      let t = setup({
+        routes: [{ id: "root", path: "/", action: true }],
+      });
+
+      let payload = { a: "1" };
+      let nav = await t.navigate("/", {
+        formMethod: "post",
+        formEncType: "application/x-www-form-urlencoded",
+        payload,
+      });
+      await nav.actions.root.resolve("ACTION");
+
+      expect(nav.actions.root.stub).toHaveBeenCalledWith({
+        params: {},
+        request: expect.any(Request),
+        payload,
+      });
+
+      let request = nav.actions.root.stub.mock.calls[0][0].request;
+      expect(request.method).toBe("POST");
+      expect(request.url).toBe("http://localhost/");
+      expect(request.headers.get("Content-Type")).toBe(
+        "application/x-www-form-urlencoded;charset=UTF-8"
+      );
+      expect((await request.formData()).get("a")).toBe("1");
+    });
+
+    it("serializes payload as application/json if specified (object)", async () => {
+      let t = setup({
+        routes: [{ id: "root", path: "/", action: true }],
+      });
+
+      let payload = { a: "1" };
+      let nav = await t.navigate("/", {
+        formMethod: "post",
+        formEncType: "application/json",
+        payload,
+      });
+      await nav.actions.root.resolve("ACTION");
+
+      expect(nav.actions.root.stub).toHaveBeenCalledWith({
+        params: {},
+        request: expect.any(Request),
+        payload,
+      });
+
+      let request = nav.actions.root.stub.mock.calls[0][0].request;
+      expect(request.method).toBe("POST");
+      expect(request.url).toBe("http://localhost/");
+      expect(request.headers.get("Content-Type")).toBe("application/json");
+      expect(JSON.parse(await request.text())).toEqual(payload);
+    });
+
+    it("serializes payload as application/json if specified (array)", async () => {
+      let t = setup({
+        routes: [{ id: "root", path: "/", action: true }],
+      });
+
+      let payload = [1, 2, 3];
+      let nav = await t.navigate("/", {
+        formMethod: "post",
+        formEncType: "application/json",
+        payload,
+      });
+      await nav.actions.root.resolve("ACTION");
+
+      expect(nav.actions.root.stub).toHaveBeenCalledWith({
+        params: {},
+        request: expect.any(Request),
+        payload,
+      });
+
+      let request = nav.actions.root.stub.mock.calls[0][0].request;
+      expect(request.method).toBe("POST");
+      expect(request.url).toBe("http://localhost/");
+      expect(request.headers.get("Content-Type")).toBe("application/json");
+      expect(JSON.parse(await request.text())).toEqual(payload);
+    });
+
+    it("serializes payload as text/plain if specified", async () => {
+      let t = setup({
+        routes: [{ id: "root", path: "/", action: true }],
+      });
+
+      let payload = "plain text";
+      let nav = await t.navigate("/", {
+        formMethod: "post",
+        formEncType: "text/plain",
+        payload,
+      });
+      await nav.actions.root.resolve("ACTION");
+
+      expect(nav.actions.root.stub).toHaveBeenCalledWith({
+        params: {},
+        request: expect.any(Request),
+        payload,
+      });
+
+      let request = nav.actions.root.stub.mock.calls[0][0].request;
+      expect(request.method).toBe("POST");
+      expect(request.url).toBe("http://localhost/");
+      expect(request.headers.get("Content-Type")).toBe("text/plain");
+      expect(await request.text()).toEqual(payload);
+    });
+
+    it("does not serialize payload when encType=undefined", async () => {
+      let t = setup({
+        routes: [{ id: "root", path: "/", action: true }],
+      });
+
+      let payload = { a: "1" };
+      let nav = await t.navigate("/", {
+        formMethod: "post",
+        payload,
+      });
+      await nav.actions.root.resolve("ACTION");
+
+      expect(nav.actions.root.stub).toHaveBeenCalledWith({
+        params: {},
+        request: expect.any(Request),
+        payload,
+      });
+
+      let request = nav.actions.root.stub.mock.calls[0][0].request;
+      expect(request.method).toBe("POST");
+      expect(request.body).toBe(null);
+      expect(request.headers.get("Content-Type")).toBe(null);
+    });
+
+    it("does not serialize payload when encType=null", async () => {
+      let t = setup({
+        routes: [{ id: "root", path: "/", action: true }],
+      });
+
+      let payload = { a: "1" };
+      let nav = await t.navigate("/", {
+        formMethod: "post",
+        formEncType: null,
+        payload,
+      });
+      await nav.actions.root.resolve("ACTION");
+
+      expect(nav.actions.root.stub).toHaveBeenCalledWith({
+        params: {},
+        request: expect.any(Request),
+        payload,
+      });
+
+      let request = nav.actions.root.stub.mock.calls[0][0].request;
+      expect(request.method).toBe("POST");
+      expect(request.body).toBe(null);
+      expect(request.headers.get("Content-Type")).toBe(null);
+    });
+
     it("races actions and loaders against abort signals", async () => {
       let loaderDfd = createDeferred();
       let actionDfd = createDeferred();