@fregante/dom-form-serializer 2.1.0-0

package/lib/deserialize.js

@@ -0,0 +1,45 @@
+import KeyExtractors from './KeyExtractors'
+import InputWriters from './InputWriters'
+import flattenData from './flattenData'
+import getInputElements from './getInputElements'
+import getElementType from './getElementType'
+
+/**
+ * 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
+ */
+export default function deserialize (form, data, options = {}) {
+  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)
+    }
+  )
+}

package/lib/flattenData.js

@@ -0,0 +1,34 @@
+import defaultKeyJoiner from './keyJoiner'
+
+export default function flattenData (data, parentKey, options = {}) {
+  const flatData = {}
+  const keyJoiner = options.keyJoiner || defaultKeyJoiner
+
+  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(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
+}

package/lib/getElementType.js

@@ -0,0 +1,14 @@
+export default 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()
+}

package/lib/getInputElements.js

@@ -0,0 +1,39 @@
+import getElementType from './getElementType'
+
+export default 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
+    }
+  )
+}

package/lib/index.js

@@ -0,0 +1,4 @@
+import serialize from './serialize'
+import deserialize from './deserialize'
+
+export { serialize, deserialize }

package/lib/keyJoiner.js

@@ -0,0 +1,3 @@
+export default function keyJoiner (parentKey, childKey) {
+  return parentKey + '[' + childKey + ']'
+}

package/lib/keySplitter.js

@@ -0,0 +1,9 @@
+export default 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
+}

package/lib/serialize.js

@@ -0,0 +1,47 @@
+import KeyExtractors from './KeyExtractors'
+import InputReaders from './InputReaders'
+import KeyAssignmentValidators from './KeyAssignmentValidators'
+import defaultKeySplitter from './keySplitter'
+import getInputElements from './getInputElements'
+import getElementType from './getElementType'
+import assignKeyValue from './assignKeyValue'
+
+/**
+ * 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}
+ */
+export default function serialize (element, options = {}) {
+  let data = {}
+  options.keySplitter = options.keySplitter || defaultKeySplitter
+  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
+}

package/package.json

@@ -0,0 +1,53 @@
+{
+  "name": "@fregante/dom-form-serializer",
+  "version": "2.1.0-0",
+  "description": "Serialize form inputs",
+  "main": "dist/dom-form-serializer.js",
+  "module": "dist/dom-form-serializer.mjs",
+  "files": [
+    "lib",
+    "dist"
+  ],
+  "engines": {
+    "node": ">=18"
+  },
+  "scripts": {
+    "lint": "standard",
+    "prebuild": "npm run lint",
+    "build": "rollup -c",
+    "watch": "rollup -c -w",
+    "test": "mocha --require @babel/register test/*.js",
+    "prepublishOnly": "npm run build && npm test"
+  },
+  "author": "Jeferson Daniel",
+  "license": "MIT",
+  "keywords": [
+    "form",
+    "serialize",
+    "client",
+    "browser"
+  ],
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/jefersondaniel/dom-form-serializer.git"
+  },
+  "devDependencies": {
+    "@babel/core": "^7.24.0",
+    "@babel/preset-env": "^7.24.0",
+    "@babel/register": "^7.23.0",
+    "@rollup/plugin-babel": "^6.0.4",
+    "chai": "^4.4.1",
+    "domify": "^1.4.0",
+    "global-jsdom": "^24.0.0",
+    "jsdom": "^24.0.0",
+    "mocha": "^10.4.0",
+    "rollup": "^4.13.0",
+    "standard": "^17.1.0"
+  },
+  "dependencies": {},
+  "standard": {
+    "ignore": [
+      "dist"
+    ]
+  }
+}