v3.2.0

package.json

@@ -1,6 +1,6 @@
 {
   "name": "remix-hook-form",
-  "version": "3.1.0",
+  "version": "3.2.0",
   "description": "Utility wrapper around react-hook-form for use with Remix.run",
   "type": "module",
   "main": "./dist/index.cjs",

src/utilities/index.test.ts

@@ -1,4 +1,4 @@
-import { array, boolean, object, string } from "zod";
+import { array, boolean, number, object, string } from "zod";
 import {
   createFormData,
   generateFormData,
@@ -22,11 +22,11 @@ describe("createFormData", () => {
         test: "1",
         number: 2,
       },
-      array: ["1", "2", "3"],
+      array: [1, 2, 3],
     };
     const formData = createFormData(data);
 
-    expect(formData.get("name")).toEqual(data.name);
+    expect(formData.get("name")).toEqual(JSON.stringify(data.name));
     expect(formData.get("age")).toEqual(data.age.toString());
     expect(formData.get("object")).toEqual(JSON.stringify(data.object));
     expect(formData.get("array")).toEqual(JSON.stringify(data.array));
@@ -92,7 +92,7 @@ describe("parseFormData", () => {
     const parsedData = await parseFormData(request);
     expect(parsedData).toEqual({
       name: "John Doe",
-      age: "30",
+      age: 30,
       hobbies: ["Reading", "Writing", "Coding"],
       other: {
         skills: ["testing", "testing"],
@@ -283,7 +283,7 @@ describe("getFormDataFromSearchParams", () => {
 
     expect(formData).toStrictEqual({
       colors: ["red", "green", "blue"],
-      numbers: ["1", "2", "3"],
+      numbers: [1, 2, 3],
     });
   });
 });
@@ -323,6 +323,39 @@ describe("validateFormData", () => {
   });
 });
 
+describe("createFormData", () => {
+  it("doesn't mess up types when passed from frontend to backend", async () => {
+    const formData = createFormData({
+      name: "123",
+      age: 30,
+      hobbies: ["Reading", "Writing", "Coding"],
+      boolean: true,
+      numbers: [1, 2, 3],
+      other: {
+        skills: ["testing", "testing"],
+        something: "else",
+      },
+    });
+    const request = new Request("http://localhost:3000", { method: "POST" });
+    const requestFormDataSpy = vi.spyOn(request, "formData");
+
+    requestFormDataSpy.mockResolvedValueOnce(formData);
+    const parsed = await parseFormData<typeof formData>(request);
+
+    expect(parsed).toStrictEqual({
+      name: "123",
+      age: 30,
+      hobbies: ["Reading", "Writing", "Coding"],
+      boolean: true,
+      numbers: [1, 2, 3],
+      other: {
+        skills: ["testing", "testing"],
+        something: "else",
+      },
+    });
+  });
+});
+
 describe("getValidatedFormData", () => {
   it("gets valid form data from a GET request", async () => {
     const request = {
@@ -334,7 +367,7 @@ describe("getValidatedFormData", () => {
         name: string(),
       }),
       colors: array(string()),
-      numbers: array(string()),
+      numbers: array(number()),
     });
     const formData = await getValidatedFormData(
       request as any,
@@ -346,14 +379,14 @@ describe("getValidatedFormData", () => {
           name: "john",
         },
         colors: ["red", "green", "blue"],
-        numbers: ["1", "2", "3"],
+        numbers: [1, 2, 3],
       },
       receivedValues: {
         user: {
           name: "john",
         },
         colors: ["red", "green", "blue"],
-        numbers: ["1", "2", "3"],
+        numbers: [1, 2, 3],
       },
       errors: undefined,
     });
@@ -362,10 +395,10 @@ describe("getValidatedFormData", () => {
   it("gets valid form data from a POST request when it is js", async () => {
     const formData = {
       name: "John Doe",
-      age: "30",
+      age: 30,
       hobbies: ["Reading", "Writing", "Coding"],
       boolean: true,
-      numbers: ["1", "2", "3"],
+      numbers: [1, 2, 3],
       other: {
         skills: ["testing", "testing"],
         something: "else",
@@ -378,9 +411,9 @@ describe("getValidatedFormData", () => {
 
     const schema = object({
       name: string(),
-      age: string(),
+      age: number(),
       boolean: boolean(),
-      numbers: array(string()),
+      numbers: array(number()),
       hobbies: array(string()),
       other: object({
         skills: array(string()),
@@ -414,7 +447,7 @@ describe("getValidatedFormData", () => {
 
     const schema = object({
       name: string(),
-      age: string(),
+      age: number(),
       hobbies: array(string()),
       other: object({
         skills: array(string()),
@@ -428,7 +461,7 @@ describe("getValidatedFormData", () => {
     expect(returnData).toStrictEqual({
       data: {
         name: "John Doe",
-        age: "30",
+        age: 30,
         hobbies: ["Reading", "Writing", "Coding"],
         other: {
           skills: ["testing", "testing"],
@@ -437,7 +470,7 @@ describe("getValidatedFormData", () => {
       },
       receivedValues: {
         name: "John Doe",
-        age: "30",
+        age: 30,
         hobbies: ["Reading", "Writing", "Coding"],
         other: {
           skills: ["testing", "testing"],

src/utilities/index.ts

@@ -7,22 +7,10 @@ import type {
 } from "react-hook-form";
 
 const tryParseJSON = (jsonString: string) => {
-  if (jsonString === "null") {
-    return null;
-  }
-  if (jsonString === "undefined") {
-    return undefined;
-  }
   try {
     const json = JSON.parse(jsonString);
-    if (
-      typeof json === "object" ||
-      typeof json === "boolean" ||
-      typeof json === "string"
-    ) {
-      return json;
-    }
-    return jsonString;
+
+    return json;
   } catch (e) {
     return jsonString;
   }
@@ -165,19 +153,9 @@ export const createFormData = <T extends FieldValues>(data: T): FormData => {
     return formData;
   }
   Object.entries(data).map(([key, value]) => {
-    if (Array.isArray(value)) {
-      formData.append(key, JSON.stringify(value));
-    } else if (value instanceof File || value instanceof Blob) {
+    if (value instanceof File || value instanceof Blob) {
       formData.append(key, value);
-    } else if (typeof value === "object" && value !== null) {
-      formData.append(key, JSON.stringify(value));
-    } else if (typeof value === "boolean") {
-      formData.append(key, value.toString());
-    } else if (typeof value === "number") {
-      formData.append(key, value.toString());
-    } else {
-      formData.append(key, value);
-    }
+    } else formData.append(key, JSON.stringify(value));
   });
 
   return formData;