feat: add initial formData polyfill for Request

[jacob-ebey]

No description provided.

[tchak]

I think FormData is supposed to implement iterator interface

[ryanflorence]

I think FormData is supposed to implement iterator interface

Good catch @tchak

let formData = new FormData();
formData.add("single", "heyo");
formData.append("multi", "one");
formData.append("multi", "two");

let results = []
for (let [k, v] of formData) results.push([k,v]);
expect(results).toEqual([
  ["single", "heyo"],
  ["multi", "one"],
  ["multi", "two"]
]);

@jacob-ebey let's add a little unit test on this too and hit each method along with that test ^

[ryanflorence]

I think the syntax is something weird like this?

class RemixFormData {
  [Symbol.iterator]() {
    return {
      next: () => {
        // when you're done
        return { done: true };
        // when you're still iterating
        return { value };
      }
    }
  }
}

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Iteration_protocols

[mjackson]

You already have an iterable object in this._params, so I think you can just do this:

class RemixFormData {
  [Symbol.iterator]() {
    return this._params.entries();
  }
}

[sergiodxa]

Wouldn't this change make the Remix Request object not be the same as the standard Request object? What if instead of doing request.formData() to get the FormData you pass the instance on the loader arguments?

export let loader: LoaderFunction = async ({ request, formData }) => {
  // use request with the same standard API as documented in MDN
  // and also use formData which should follow the interface also documented in MDN
};

[jacob-ebey]

Wouldn't this change make the Remix Request object not be the same as the standard Request object? What if instead of doing request.formData() to get the FormData you pass the instance on the loader arguments?

export let loader: LoaderFunction = async ({ request, formData }) => {
  // use request with the same standard API as documented in MDN
  // and also use formData which should follow the interface also documented in MDN
};

.formData exists on a fetch Request object: https://developer.mozilla.org/en-US/docs/Web/API/Request/formData

let req = new Request("http://test.com", {
  method: "POST",
  body: "test=value",
  headers: { "Content-Type": "application/x-www-form-urlencoded" },
});
req.formData().then((data) => {
  console.log(data.get("test"));
});

[sergiodxa]

TIL, ignore me then

[kiliman]

TIL, ignore me then

Don't feel bad. I didn't know about that until I saw the example that Ryan posted on the new Remix website.

I've always been doing:

const data = new URLSearchParams(await request.text())

[sergiodxa]

@kiliman don't worry, I didn't feel bad 🙂 , I was also doing that, I even created a whole utility on Remix Utils for that await bodyParser.toSearchParams(request), once this ships it will become deprecated, this is simpler.

[mjackson]

I've been trying to keep the DOM types out of our node packages! Do you need this for IterableIterator? Or something else?

[jacob-ebey]

Yeah, "FormData" type isn't itterable without it :/

[mjackson]

I wonder if you could just use let results = Array.from(formData) here?