Make filter a setter

As opposed to the second (or first curried) parameter.

From now on instead of `formsquare(form, filter)` we will write
`formsquare.filter(filter).parse(form)`.

closes: #8

Author: Rúnar Berg

Diff for: README.md

@@ -20,16 +20,15 @@ npm install --save formsquare
 ```js
 import formsquare from "formsquare";
 
-formsquare(form, filter);
+formsquare.parse(form);
 
 // or
-const parseForm = formsquare(filter);
-parseForm(form);
+formsquare.filter(myFilter).parse(form);
 ```
 
 Where `form` is an `HTMLFormElement` (like `document.forms[0]`) and
-`filter` is an optional predicate function (like `(el) =>
-!el.disabled`) that determines which form elements to include.
+`myFilter` is a predicate function (like `el => !el.disabled`) that
+determines which form elements to include.
 
 #### commonjs
 
@@ -109,17 +108,16 @@ Examples
 import formsquare from "formsquare";
 
 const form = document.getElementById("my-form");
-const filter = (el) => !el.disabled;
+const filter = el => !el.disabled;
 
-formsquare(form, filter);
-// {"foo": "bar"}
+formsquare.filter(filter).parse(form);
+//=> {"foo": "bar"}
 ```
 
-### Currying
+### Filters
 
-You can pass only a predicate function to formsquare and be returned
-with a new parser that will filter all form elements by that
-predicate.
+You can call `formsquare.filter` with a predicate be returned a new
+parser that will filter all form elements by that predicate.
 
 ```html
 <form>
@@ -131,18 +129,32 @@ predicate.
   <input value="foo" disabled>
   <input value="bar">
 </form>
+
+<form>
+  <input value="foo" disabled>
+  <input value="bar" class="hidden">
+  <input value="baz">
+</form>
 ```
 
 ```js
 import formsquare from "formsquare";
 
-const parseForm = formsquare((el) => !el.disabled);
+const { parse } = formsquare.filter(el => !el.disabled);
 
-parseForm(document.forms[0]);
-// "foo"
+parse(document.forms[0]);
+//=> "foo"
 
-parseForm(document.forms[1]);
-// "bar"
+parse(document.forms[1]);
+//=> "bar"
+
+// Filters can be chained
+
+formsquare
+  .filter(el => !el.disabled)
+  .filter(el => !el.classList.contains("hidden"))
+  .parse(document.forms[2]);
+//=> "baz"
 ```
 
 ### Simple forms
@@ -154,8 +166,8 @@ An empty form will always return `null`
 ```
 
 ```js
-formsquare(document.getElementById("empty-form"));
-// null
+formsquare.parse(document.getElementById("empty-form"));
+//=> null
 ```
 
 A form with a single element without an explicit name gives you a
@@ -169,12 +181,12 @@ singleton value.
 
 ```js
 const singletonForm = document.getElementById("singleton-form");
-formsquare(singletonForm);
-// 42
+formsquare.parse(singletonForm);
+//=> 42
 
 singletonForm[0].type = "text";
-formsquare(singletonForm);
-// "42"
+formsquare.parse(singletonForm);
+//=> "42"
 ```
 
 ### Collections of forms
@@ -194,11 +206,11 @@ it will be handled as a single form.
 ```
 
 ```js
-formsquare(document.forms);
-// {"foo": [2, 42], "bar": 5}
+formsquare.parse(document.forms);
+//=> {"foo": [2, 42], "bar": 5}
 
-[...document.forms].map(formsquare(() => true));
-// [{"foo": 2, "bar": 5}, {"foo": 42}]
+[...document.forms].map(formsquare.parse);
+//=> [{"foo": 2, "bar": 5}, {"foo": 42}]
 ```
 
 ### Checkboxes
@@ -215,8 +227,8 @@ attribute:
 
 ```js
 const checkboxForm = document.getElementById("checkbox-form");
-formsquare(checkboxForm);
-// [false, true]
+formsquare.parse(checkboxForm);
+//=> [false, true]
 ```
 
 Checkboxes with explicit values are handled differently:
@@ -225,17 +237,17 @@ Checkboxes with explicit values are handled differently:
 checkboxForm[0].value = "false";
 checkboxForm[1].value = "on";
 
-formsquare(checkboxForm);
-// ["on"]
+formsquare.parse(checkboxForm);
+//=> ["on"]
 ```
 
 And if no checkbox is checked, you will get the empty array:
 
 ```js
 checkboxForm[1].checked = false;
 
-formsquare(checkboxForm);
-// []
+formsquare.parse(checkboxForm);
+//=> []
 ```
 
 ### Files
@@ -254,15 +266,13 @@ Granted that a user uploaded the file `foo.txt` conatining the text
 `foo`:
 
 ```js
-formsquare(document.forms[0]).then((file) => {
-  console.log(file);
-});
-
-// {
-//   "body": "Zm9v",
-//   "name": "foo.txt",
-//   "type": "text/plain"
-// }
+await formsquare.parse(document.forms[0]);
+
+//=> {
+//     body: "Zm9v",
+//     name: "foo.txt",
+//     type: "text/plain",
+//   }
 ```
 
 Alternatives

Diff for: examples/index.html

@@ -5,7 +5,10 @@
     <title>Formsquare examples</title>
     <style>
       .example output {
+        display: block;
         font-family: monospace;
+        max-width: 100%;
+        overflow-x: auto;
         white-space: pre;
       }
     </style>
@@ -31,7 +34,7 @@ <h3>Basic</h3>
 
           const div = document.getElementById("readme-example-basic");
           const form = div.querySelector("form");
-          const obj = formsquare(form, el => !el.disabled);
+          const obj = formsquare.filter(el => !el.disabled).parse(form);
           const output = div.querySelector("output");
 
           output.textContent = JSON.stringify(obj);
@@ -53,16 +56,16 @@ <h3>Basic (no module)</h3>
           {
             const div = document.getElementById("readme-example-basic-nomodule");
             const form = div.querySelector("form");
-            const obj = formsquare(form, el => !el.disabled);
+            const obj = formsquare.filter(el => !el.disabled).parse(form);
             const output = div.querySelector("output");
 
             output.textContent = JSON.stringify(obj);
           }
         </script>
       </div>
 
-      <div class="example" id="readme-example-curry">
-        <h3>Curry</h3>
+      <div class="example" id="readme-example-filters">
+        <h3>Filters</h3>
 
         <form>
           <input value="foo">
@@ -74,21 +77,34 @@ <h3>Curry</h3>
           <input value="bar">
         </form>
 
+        <form>
+          <input value="foo" disabled>
+          <input value="bar" class="hidden">
+          <input value="baz">
+        </form>
+
         <output></output>
 
         <script type="module">
           import formsquare from "/dist/module/formsquare.js";
 
-          const div = document.getElementById("readme-example-curry");
-          const parseForm = formsquare(el => !el.disabled);
-
+          const { parse } = formsquare.filter(el => !el.disabled);
+          const div = document.getElementById("readme-example-filters");
           const forms = div.querySelectorAll("form");
           const output = div.querySelector("output");
+          const parsed = [];
+
+          parsed.push(parse(forms[0]));
+          parsed.push(parse(forms[1]))
+
+          parsed.push(
+            formsquare
+              .filter(el => !el.disabled)
+              .filter(el => !el.classList.contains("hidden"))
+              .parse(forms[2]),
+          );
 
-          output.textContent = [...forms]
-            .map(parseForm)
-            .map(JSON.stringify)
-            .join("\n");
+          output.textContent = parsed.map(JSON.stringify).join("\n");
         </script>
       </div>
 
@@ -104,7 +120,7 @@ <h3>Empty</h3>
 
           const div = document.getElementById("readme-example-empty");
           const form = div.querySelector("form");
-          const obj = formsquare(form);
+          const obj = formsquare.parse(form);
           const output = div.querySelector("output");
 
           output.textContent = JSON.stringify(obj);
@@ -128,10 +144,10 @@ <h3>Singleton</h3>
           const output = div.querySelector("output");
           const strings = [];
 
-          strings.push(JSON.stringify(formsquare(form)));
+          strings.push(JSON.stringify(formsquare.parse(form)));
 
           form[0].type = "text";
-          strings.push(JSON.stringify(formsquare(form)));
+          strings.push(JSON.stringify(formsquare.parse(form)));
 
           output.textContent = strings.join("\n");
         </script>
@@ -155,11 +171,11 @@ <h3>Checkboxes</h3>
           const output = div.querySelector("output");
           const strings = [];
 
-          strings.push(JSON.stringify(formsquare(form)));
+          strings.push(JSON.stringify(formsquare.parse(form)));
 
           form[0].value = "false";
           form[1].value = "on"
-          strings.push(JSON.stringify(formsquare(form)));
+          strings.push(JSON.stringify(formsquare.parse(form)));
 
           output.textContent = strings.join("\n");
         </script>
@@ -180,7 +196,7 @@ <h3>Week</h3>
           const div = document.getElementById("readme-example-week");
           const form = div.querySelector("form");
           const output = div.querySelector("output");
-          const string = JSON.stringify(formsquare(form));
+          const string = JSON.stringify(formsquare.parse(form));
 
           output.textContent = string;
         </script>
@@ -202,8 +218,12 @@ <h3>Files</h3>
           const form = div.querySelector("form");
           const output = div.querySelector("output");
 
-          formsquare(form).then((data) => {
-            output.textContent = JSON.stringify(data);
+          form.addEventListener("input", event => {
+            formsquare
+              .parse(form)
+              .then((data) => {
+                output.textContent = JSON.stringify(data);
+              });
           });
         </script>
       </div>
@@ -225,13 +245,14 @@ <h3>Collections of forms</h3>
         <script type="module">
           import formsquare from "/dist/module/formsquare.js";
 
+          const { parse } = formsquare;
           const div = document.getElementById("readme-example-form-collection");
           const forms = div.querySelectorAll("form");
           const output = div.querySelector("output");
           const strings = [];
 
-          strings.push(JSON.stringify(formsquare(forms)));
-          strings.push(JSON.stringify([...forms].map(formsquare(() => true))));
+          strings.push(JSON.stringify(parse(forms)));
+          strings.push(JSON.stringify([...forms].map(parse)));
 
           output.textContent = strings.join("\n");
         </script>

Diff for: src/formsquare.js

@@ -1,15 +1,37 @@
+// @flow
+
 import { formElements } from "./elements.js";
 import parse from "./parser.js";
 
-import { constant, filter } from "./utils.js";
+import { allPass, filter } from "./utils.js";
+
+interface Formsquare {
+  filter((HTMLElement) => boolean): Formsquare;
+  parse(HTMLFormElement | Array<HTMLFormElement>): any;
+}
+
+function newFormsquare({
+  filters = [],
+}: {
+  filters?: Array<(HTMLElement) => boolean>,
+} = {}): Formsquare {
+  const formsquare: any = Object.create(null);
+
+  Object.defineProperty(formsquare, "filter", {
+    value(p: HTMLElement => boolean): Formsquare {
+      return newFormsquare({ filters: [...filters, p] });
+    },
+  });
 
-export default function formsquare(form, includeEl = constant(true)) {
-  if (typeof form === "function") {
-    // Curry.
-    return f => formsquare(f, form);
-  }
+  Object.defineProperty(formsquare, "parse", {
+    value(form: HTMLFormElement | Array<HTMLFormElement>): any {
+      const elements = filter(allPass(filters), formElements(form));
 
-  const elements = filter(includeEl, formElements(form));
+      return parse(elements);
+    },
+  });
 
-  return parse(elements);
+  return formsquare;
 }
+
+export default newFormsquare();

Diff for: src/module.js

@@ -1 +1,3 @@
+// @flow
+
 export { default } from "./formsquare.js";