Merge pull request #26 from remix-run/logan/formdata

feat(form-data): allow passing a form to FormData

Author: ryanflorence

.changeset/real-news-divide.md

@@ -0,0 +1,5 @@
+---
+"@remix-run/web-form-data": patch
+---
+
+allow passing a form to FormData. implementation taken from https://github.com/tchak/remix-router-turbo/blob/main/test/setup-test-env.ts, thank you @tchak

packages/form-data/src/form-data.js

@@ -6,18 +6,6 @@ export class FormData {
    * @param {HTMLFormElement} [form]
    */
   constructor(form) {
-    if (form !== undefined) {
-      const error = isHTMLFormElement(form)
-        ? new TypeError(
-            "FormData constructor: HTMLFormElement parameter is not supported, if you need it submit an issue"
-          )
-        : new TypeError(
-            "FormData constructor: Argument 1 does not implement interface HTMLFormElement."
-          );
-
-      throw error;
-    }
-
     /**
      * @private
      * @readonly
@@ -26,6 +14,24 @@ export class FormData {
     this._entries = [];
 
     Object.defineProperty(this, "_entries", { enumerable: false });
+
+    if (isHTMLFormElement(form)) {
+      for (const element of form.elements) {
+        if (isSelectElement(element)) {
+          for (const option of element.options) {
+            if (option.selected) {
+              this.append(element.name, option.value);
+            }
+          }
+        } else if (
+          isInputElement(element) &&
+          (element.checked || !["radio", "checkbox"].includes(element.type)) &&
+          element.name
+        ) {
+          this.append(element.name, element.value);
+        }
+      }
+    }
   }
   get [Symbol.toStringTag]() {
     return "FormData";
@@ -312,3 +318,21 @@ const BlobFile = class File {
 const panic = (error) => {
   throw error;
 };
+
+/**
+ *
+ * @param {Element} element
+ * @returns {element is HTMLSelectElement}
+ */
+function isSelectElement(element) {
+  return element.tagName === "SELECT";
+}
+
+/**
+ *
+ * @param {Element} element
+ * @returns {element is HTMLInputElement}
+ */
+function isInputElement(element) {
+  return element.tagName === "INPUT" || element.tagName === "TEXTAREA";
+}

packages/form-data/test/form-data.spec.js

@@ -7,7 +7,7 @@ import { assert } from "./test.js";
  * @param {import('./test').Test} test
  */
 export const test = (test) => {
-  test("test baisc", async () => {
+  test("test basic", async () => {
     assert.equal(typeof FormData, "function");
     assert.isEqual(typeof lib.FormData, "function");
   });
@@ -259,4 +259,74 @@ export const test = (test) => {
       "rename.md"
     );
   });
+
+  test("Should allow passing a form element", () => {
+    /** @type {globalThis.HTMLFormElement} */
+    let form;
+
+    if (typeof window === 'undefined') {
+      /** @implements {globalThis.HTMLFormElement} */
+      class FakeForm {
+        get [Symbol.toStringTag]() {
+          return "HTMLFormElement";
+        }
+
+        toString() {
+          return `<form></form>`;
+        }
+
+        // @ts-ignore
+        get elements() {
+          return [
+            {
+              tagName: "INPUT",
+              name: "inside",
+              value: "",
+            },
+            {
+              tagName: "INPUT",
+              name: "outside",
+              value: "",
+              form: "my-form",
+            },
+            {
+              tagName: "INPUT",
+              name: "remember-me",
+              value: "on",
+              checked: true,
+            }
+          ]
+        }
+
+        get id() {
+          return "my-form"
+        }
+      }
+
+      form = /** @type {globalThis.HTMLFormElement} */ (/** @type {unknown} */ (new FakeForm()))
+    } else {
+      form = document.createElement('form');
+      let inside = document.createElement('input')
+      let outside = document.createElement('input')
+      let checkbox = document.createElement('input')
+
+      form.id = 'my-form'
+      inside.name = 'inside'
+      outside.name = 'outside'
+      outside.setAttribute('form', 'my-form')
+      checkbox.name = "remember-me"
+      checkbox.type = 'checkbox'
+      checkbox.checked = true;
+
+      form.appendChild(inside);
+      form.appendChild(checkbox);
+      document.body.appendChild(form);
+      document.body.appendChild(outside);
+    }
+
+    const formData = new FormData(form);
+    assert.equal(formData.has("inside"), true)
+    assert.equal(formData.has("outside"), true)
+    assert.equal(formData.get("remember-me"), "on")
+  })
 };