@fregante/dom-form-serializer 2.1.0-0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2016 Jeferson Daniel
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,271 @@
+# DOM Form Serializer
+
+[![CI](https://github.com/jefersondaniel/dom-form-serializer/actions/workflows/ci.yml/badge.svg)](https://github.com/jefersondaniel/dom-form-serializer/actions/workflows/ci.yml)
+[![npm version](https://badge.fury.io/js/dom-form-serializer.svg)](https://www.npmjs.com/package/dom-form-serializer)
+[![npm](https://img.shields.io/npm/dm/dom-form-serializer.svg)](https://www.npmjs.com/package/dom-form-serializer)
+
+Serialize forms fields into a JSON representation.
+
+## About
+
+This project is a fork of [Backbone.Syphon](https://github.com/marionettejs/backbone.syphon) that has no dependency on backbone and jquery. It aims to make it easy to serialize the fields of a form into a simple JSON object.
+
+### Installing
+
+```
+npm install dom-form-serializer
+```
+
+## Basic Usage
+
+### Serialize
+
+```js
+var serialize = require('dom-form-serializer').serialize
+serialize(document.querySelector('#form'))
+```
+
+### Keys Retrieved By "name" Attribute
+
+The default behavior for serializing fields is to use the field's "name" attribute as the key in the serialized object.
+
+```html
+<form id="form">
+  <input name="a">
+  <select name="b"></select>
+  <textarea name="c"></textarea>
+</form>
+```
+
+```js
+serialize(document.querySelector('#form'))
+
+// will produce =>
+
+{
+  a: "",
+  b: "",
+  c: ""
+}
+```
+
+### Checkboxes
+
+By default, a checkbox will return a boolean value signifying whether or not it is checked.
+
+```html
+<form id="form">
+  <input type="checkbox" name="a">
+  <input type="checkbox" name="b" checked>
+  <input type="checkbox" name="c" indeterminate>
+</form>
+```
+
+```js
+serialize(document.querySelector('#form'));
+
+// will produce =>
+
+{
+  a: false,
+  b: true,
+  c: null
+}
+```
+
+### Radio Button Groups
+
+Radio button groups (grouped by the input element "name" attribute) will produce a single value, from the selected
+radio button.
+
+```html
+<form id="form">
+  <input type="radio" name="a" value="1">
+  <input type="radio" name="a" value="2" checked>
+  <input type="radio" name="a" value="3">
+  <input type="radio" name="a" value="4">
+</form>
+```
+
+```js
+serialize(document.querySelector('#form'))
+
+// will produce =>
+
+{
+  a: "2"
+}
+```
+
+This behavior can be changed by registering a different set of Key Extractors, Input Readers, and Key Assignment
+Validators. See the tests
+[serialize.spec.js](https://github.com/jefersondaniel/dom-form-serializer/blob/master/test/serialize.spec.js) for more examples on these.
+
+### Drop Down Lists
+
+Serializing drop down lists (`<select>`) will result in value of the selected option.
+
+
+```html
+<form id="form">
+  <select name="foo">
+    <option value="bar"></option>
+  </select>
+</form>
+```
+
+
+```js
+serialize(document.querySelector('#form'))
+
+// will produce =>
+
+{
+  foo: "bar"    
+}
+```
+
+### Multiple Select Boxes
+
+Serializing multiple select boxes (`<select multiple>`) will yield the selected options as an array.
+
+```html
+<form id="form">
+  <select name="foo" multiple>
+    <option value="foo"></option>
+    <option value="bar" selected></option>
+    <option value="baz" selected></option>
+  </select>
+</form>
+```
+
+```js
+serialize(document.querySelector('#form'))
+
+// will produce =>
+
+{
+  foo: ["bar", "baz"]    
+}
+```
+
+## Basic Usage: Deserialize
+
+You can also deserialize an object's values back into their field equivalent. It uses the same conventions and configuration as the serialization process, with the introduction of Input Writers to handle populating the fields with the values
+
+```html
+<form id="form">
+  <input type="text" name="a">
+  <input type="text" name="b">
+</form>
+```
+
+```js
+var data = {
+  a: "foo",
+  b: "bar"
+};
+
+deserialize(document.querySelector('#form'), data);
+```
+
+This will populate the form field elements with the correct values from the `data` parameter.
+
+## Ignored Input Types
+
+The following types of input are ignored, and not included in the resulting JavaScript object:
+
+* `<input type="submit">` buttons
+* `<input type="reset"`> buttons
+* standard `<button>` tags
+
+If you need to get a value from the specific button that was clicked, you can use a DOM event to listen for that element being manipulated (clicked, for example) and manually grab
+the data you need.
+
+### Ignoring Other Input Types
+
+You can define ignored selectors using the ignoredTypes option.
+
+```js
+// ignore all <textarea> input elements
+serialize(element, {ignoredTypes: ['textarea']})
+```
+
+## Serializing Nested Attributes And Field Names
+
+`serialize` will parse nested attribute names and create a nested result object, using the Rails standard of `name="foo[bar][baz]"` by default.
+
+```html
+<form>
+  <input type="text" name="foo[bar]" value="a value">
+  <input type="text" name="foo[baz][quux]" value="another value">
+</form>
+```
+
+will produce
+
+```js
+{
+  foo: {
+    bar: "a value",
+    baz: {
+      quux: "another value"
+    }
+  }
+}
+```
+
+### Array Inputs
+
+`serialize` will parse multiple inputs named after the convention `name="foo[bar][]"` into elements of the array `bar`.
+
+```html
+<form>
+  <input type="checkbox" name="foo[bar][]" value="baz" checked="checked">
+  <input type="checkbox" name="foo[bar][]" value="qux" checked="checked">
+</form>
+```
+
+will produce
+
+```js
+{
+  foo: {
+    bar: ["baz", "qux"]
+  }
+}
+```
+
+### Custom splitters
+
+If your keys are split by something else than the Rails Array convention (for example `name="foo.bar.quux"`), you may pass this delimiter into `serialize` using the `keySplitter` option.
+
+```html
+<form id="form">
+  <input type="text" name="widget" value="wombat">
+  <input type="text" name="foo.bar" value="baz">
+  <input type="text" name="foo.baz.quux" value="qux">
+</form>
+```
+
+```js
+serialize(document.querySelector('#form'), { keySplitter: key => key.split('.') })
+
+// will produce =>
+
+{
+  widget: "wombat",
+  foo: {
+    bar: "baz",
+    baz: {
+      quux: "qux"
+    }
+  }
+}
+
+```
+
+# Acknowledgments
+
+[Backbone.Syphon](https://github.com/marionettejs/backbone.syphon)
+

package/dist/dom-form-serializer.js

@@ -0,0 +1,354 @@
+(function (global, factory) {
+  typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports) :
+  typeof define === 'function' && define.amd ? define(['exports'], factory) :
+  (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global.DOMFormSerializer = {}));
+})(this, (function (exports) { 'use strict';
+
+  class TypeRegistry {
+    constructor() {
+      let initial = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+      this.registeredTypes = initial;
+    }
+    get(type) {
+      if (typeof this.registeredTypes[type] !== 'undefined') {
+        return this.registeredTypes[type];
+      } else {
+        return this.registeredTypes.default;
+      }
+    }
+    register(type, item) {
+      if (typeof this.registeredTypes[type] === 'undefined') {
+        this.registeredTypes[type] = item;
+      }
+    }
+    registerDefault(item) {
+      this.register('default', item);
+    }
+  }
+
+  class KeyExtractors extends TypeRegistry {
+    constructor(options) {
+      super(options);
+      this.registerDefault(el => el.getAttribute('name') || '');
+    }
+  }
+
+  class InputReaders extends TypeRegistry {
+    constructor(options) {
+      super(options);
+      this.registerDefault(el => el.value);
+      this.register('checkbox', el => el.getAttribute('value') !== null ? el.checked ? el.getAttribute('value') : null : el.checked);
+      this.register('select', el => getSelectValue(el));
+    }
+  }
+
+  /**
+   * Read select values
+   *
+   * @see {@link https://github.com/jquery/jquery/blob/master/src/attributes/val.js|Github}
+   * @param {object} Select element
+   * @return {string|Array} Select value(s)
+   */
+  function getSelectValue(elem) {
+    let value, option, i;
+    const options = elem.options;
+    const index = elem.selectedIndex;
+    const one = elem.type === 'select-one';
+    const values = one ? null : [];
+    const max = one ? index + 1 : options.length;
+    if (index < 0) {
+      i = max;
+    } else {
+      i = one ? index : 0;
+    }
+
+    // Loop through all the selected options
+    for (; i < max; i++) {
+      option = options[i];
+
+      // Support: IE <=9 only
+      // IE8-9 doesn't update selected after form reset
+      if ((option.selected || i === index) &&
+      // Don't return options that are disabled or in a disabled optgroup
+      !option.disabled && !(option.parentNode.disabled && option.parentNode.tagName.toLowerCase() === 'optgroup')) {
+        // Get the specific value for the option
+        value = option.value;
+
+        // We don't need an array for one selects
+        if (one) {
+          return value;
+        }
+
+        // Multi-Selects return an array
+        values.push(value);
+      }
+    }
+    return values;
+  }
+
+  class KeyAssignmentValidators extends TypeRegistry {
+    constructor(options) {
+      super(options);
+      this.registerDefault(() => true);
+      this.register('radio', el => el.checked);
+    }
+  }
+
+  function keySplitter(key) {
+    const matches = key.match(/[^[\]]+/g);
+    let lastKey;
+    if (key.length > 1 && key.indexOf('[]') === key.length - 2) {
+      lastKey = matches.pop();
+      matches.push([lastKey]);
+    }
+    return matches;
+  }
+
+  function getElementType(el) {
+    let typeAttr;
+    const tagName = el.tagName;
+    let type = tagName;
+    if (tagName.toLowerCase() === 'input') {
+      typeAttr = el.getAttribute('type');
+      if (typeAttr) {
+        type = typeAttr;
+      } else {
+        type = 'text';
+      }
+    }
+    return type.toLowerCase();
+  }
+
+  function getInputElements(element, options) {
+    return Array.prototype.filter.call(element.querySelectorAll('input,select,textarea'), el => {
+      if (el.tagName.toLowerCase() === 'input' && (el.type === 'submit' || el.type === 'reset')) {
+        return false;
+      }
+      const myType = getElementType(el);
+      const extractor = options.keyExtractors.get(myType);
+      const identifier = extractor(el);
+      const foundInInclude = (options.include || []).indexOf(identifier) !== -1;
+      const foundInExclude = (options.exclude || []).indexOf(identifier) !== -1;
+      let foundInIgnored = false;
+      let reject = false;
+      if (options.ignoredTypes) {
+        for (const selector of options.ignoredTypes) {
+          if (el.matches(selector)) {
+            foundInIgnored = true;
+          }
+        }
+      }
+      if (foundInInclude) {
+        reject = false;
+      } else {
+        if (options.include) {
+          reject = true;
+        } else {
+          reject = foundInExclude || foundInIgnored;
+        }
+      }
+      return !reject;
+    });
+  }
+
+  const UNSAFE_KEYS = ['__proto__', 'constructor', 'prototype'];
+  function assignKeyValue(obj, keychain, value) {
+    if (!keychain) {
+      return obj;
+    }
+    const key = keychain.shift();
+
+    // Refuse to walk into prototype-pollution sinks.
+    if (UNSAFE_KEYS.indexOf(key) !== -1) {
+      return obj;
+    }
+
+    // build the current object we need to store data
+    if (!obj[key]) {
+      obj[key] = Array.isArray(key) ? [] : {};
+    }
+
+    // if it's the last key in the chain, assign the value directly
+    if (keychain.length === 0) {
+      if (!Array.isArray(obj[key])) {
+        obj[key] = value;
+      } else if (value !== null) {
+        obj[key].push(value);
+      }
+    }
+
+    // recursive parsing of the array, depth-first
+    if (keychain.length > 0) {
+      assignKeyValue(obj[key], keychain, value);
+    }
+    return obj;
+  }
+
+  /**
+   * Get a JSON object that represents all of the form inputs, in this element.
+   *
+   * @param {HTMLElement} Root element
+   * @param {object} options
+   * @param {object} options.inputReaders
+   * @param {object} options.keyAssignmentValidators
+   * @param {object} options.keyExtractors
+   * @param {object} options.keySplitter
+   * @param {string[]} options.include
+   * @param {string[]} options.exclude
+   * @param {string[]} options.ignoredTypes
+   * @return {object}
+   */
+  function serialize(element) {
+    let options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
+    let data = {};
+    options.keySplitter = options.keySplitter || keySplitter;
+    options.keyExtractors = new KeyExtractors(options.keyExtractors || {});
+    options.inputReaders = new InputReaders(options.inputReaders || {});
+    options.keyAssignmentValidators = new KeyAssignmentValidators(options.keyAssignmentValidators || {});
+    Array.prototype.forEach.call(getInputElements(element, options), el => {
+      const type = getElementType(el);
+      const keyExtractor = options.keyExtractors.get(type);
+      const key = keyExtractor(el);
+      const inputReader = options.inputReaders.get(type);
+      const value = inputReader(el);
+      const validKeyAssignment = options.keyAssignmentValidators.get(type);
+      if (validKeyAssignment(el, key, value)) {
+        const keychain = options.keySplitter(key);
+        data = assignKeyValue(data, keychain, value);
+      }
+    });
+    return data;
+  }
+
+  class InputWriters extends TypeRegistry {
+    constructor(options) {
+      super(options);
+      this.registerDefault((el, value) => {
+        el.value = value !== null && value !== void 0 ? value : '';
+      });
+      this.register('checkbox', (el, value) => {
+        if (value === null) {
+          el.indeterminate = true;
+        } else {
+          el.checked = Array.isArray(value) ? value.indexOf(el.value) !== -1 : value;
+        }
+      });
+      this.register('radio', function (el, value) {
+        if (value !== undefined) {
+          el.checked = el.value === value.toString();
+        }
+      });
+      this.register('select', setSelectValue);
+    }
+  }
+  function makeArray(arr) {
+    const ret = [];
+    if (arr !== null) {
+      if (Array.isArray(arr)) {
+        ret.push.apply(ret, arr);
+      } else {
+        ret.push(arr);
+      }
+    }
+    return ret;
+  }
+
+  /**
+   * Write select values
+   *
+   * @see {@link https://github.com/jquery/jquery/blob/master/src/attributes/val.js|Github}
+   * @param {object} Select element
+   * @param {string|array} Select value
+   */
+  function setSelectValue(elem, value) {
+    let optionSet, option;
+    const options = elem.options;
+    const values = makeArray(value);
+    let i = options.length;
+    while (i--) {
+      option = options[i];
+      /* eslint-disable no-cond-assign */
+      if (values.indexOf(option.value) > -1) {
+        option.setAttribute('selected', true);
+        optionSet = true;
+      }
+      /* eslint-enable no-cond-assign */
+    }
+
+    // Force browsers to behave consistently when non-matching value is set
+    if (!optionSet) {
+      elem.selectedIndex = -1;
+    }
+  }
+
+  function keyJoiner(parentKey, childKey) {
+    return parentKey + '[' + childKey + ']';
+  }
+
+  function flattenData(data, parentKey) {
+    let options = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {};
+    const flatData = {};
+    const keyJoiner$1 = options.keyJoiner || keyJoiner;
+    for (let keyName in data) {
+      if (!Object.prototype.hasOwnProperty.call(data, keyName)) {
+        continue;
+      }
+      const value = data[keyName];
+      let hash = {};
+
+      // If there is a parent key, join it with
+      // the current, child key.
+      if (parentKey) {
+        keyName = keyJoiner$1(parentKey, keyName);
+      }
+      if (Array.isArray(value)) {
+        hash[keyName + '[]'] = value;
+        hash[keyName] = value;
+      } else if (typeof value === 'object') {
+        hash = flattenData(value, keyName, options);
+      } else {
+        hash[keyName] = value;
+      }
+      Object.assign(flatData, hash);
+    }
+    return flatData;
+  }
+
+  /**
+   * Use the given JSON object to populate all of the form inputs, in this element.
+   *
+   * @param {HTMLElement} Root element
+   * @param {object} options
+   * @param {object} options.inputWriters
+   * @param {object} options.keyExtractors
+   * @param {object} options.keySplitter
+   * @param {string[]} options.include
+   * @param {string[]} options.exclude
+   * @param {string[]} options.ignoredTypes
+   */
+  function deserialize(form, data) {
+    let options = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {};
+    const flattenedData = flattenData(data, null, options);
+    const arrayValueIndexes = {};
+    options.keyExtractors = new KeyExtractors(options.keyExtractors || {});
+    options.inputWriters = new InputWriters(options.inputWriters || {});
+    Array.prototype.forEach.call(getInputElements(form, options), el => {
+      const type = getElementType(el);
+      const keyExtractor = options.keyExtractors.get(type);
+      const key = keyExtractor(el);
+      const inputWriter = options.inputWriters.get(type);
+      let value = flattenedData[key];
+      if (Array.isArray(value) && key.endsWith('[]') && type !== 'checkbox' && type !== 'select') {
+        const index = arrayValueIndexes[key] || 0;
+        value = value[index];
+        arrayValueIndexes[key] = index + 1;
+      }
+      inputWriter(el, value);
+    });
+  }
+
+  exports.deserialize = deserialize;
+  exports.serialize = serialize;
+
+}));
+//# sourceMappingURL=dom-form-serializer.js.map