Merge tags to main (#6)

* update patchChildren to update nodes before removing; otherwise removes then re-adds nodes that already existed

* use for..in loop on key generation

* update tests and package name when bundling

* 0.2.2

* update metadata & cdn tags

* update metadata & cdn tags

* update metadata & cdn tags

* add npm publish tag to update-origin step of publish

* 0.2.3

* [npm publish] update metadata & cdn tags

Co-authored-by: george treviranus <george.treviranus@servicenow.com>
Co-authored-by: George Treviranus <hello@geotrev.com>

Author: 3 people

.gitignore

@@ -5,4 +5,4 @@ debug.log
 dist/
 lib/
 node_modules/
-demo/bundle.js
+test/bundle.js

.npmignore

@@ -8,11 +8,11 @@ debug.log
 # build helpers
 build/
 
-# tests
+# unit tests
 src/__tests__/
 
-# demo
-demo/
+# live tests
+test/
 
 # configs
 .browserslistrc

README.md

@@ -37,16 +37,16 @@ patch(...)
 <!-- The unminified bundle for development -->
 <script
   type="text/javascript"
-  src="https://cdn.jsdelivr.net/npm/omdomdom@0.2.1/dist/omdomdom.js"
-  integrity="sha256-0NKRNWXlyGHJqE2rt9TL0ZfUKZOTpl9yDaV2IDrVOtU="
+  src="https://cdn.jsdelivr.net/npm/omdomdom@0.2.3/dist/omdomdom.js"
+  integrity="sha256-HBLiViWpBlIc3sW3GXN1ZDGOqzCCZSzP4COMH2ToKrk="
   crossorigin="anonymous"
 ></script>
 
 <!-- Minified/uglified bundle for production -->
 <script
   type="text/javascript"
-  src="https://cdn.jsdelivr.net/npm/omdomdom@0.2.1/dist/omdomdom.min.js"
-  integrity="sha256-z2QunatqIwvTpeWq5IoXEI+thliEu0jLGUKIikVuv4I="
+  src="https://cdn.jsdelivr.net/npm/omdomdom@0.2.3/dist/omdomdom.min.js"
+  integrity="sha256-hQMZhQOXCXn6iVdmSzECnZ/C+NszStwrZSkKBpBCsZw="
   crossorigin="anonymous"
 ></script>
 ```

package-lock.json

@@ -1,10 +1,10 @@
 {
   "name": "omdomdom",
-  "version": "0.2.1",
+  "version": "0.2.3",
   "description": "A virtual DOM implementation that turns strings into HTML",
-  "main": "lib/omdomdom.cjs.min.js",
-  "module": "lib/omdomdom.es.min.js",
-  "browser": "dist/omdomdom.min.js",
+  "main": "lib/omdomdom.cjs.js",
+  "module": "lib/omdomdom.es.js",
+  "browser": "dist/omdomdom.js",
   "type": "module",
   "scripts": {
     "test": "jest",
@@ -13,7 +13,7 @@
     "build": "BABEL_ENV=build rollup -c",
     "build:publish": "BABEL_ENV=publish rollup -c",
     "lint": "eslint . --ext .js -c .eslintrc.json --ignore-path .eslintignore",
-    "git:update-origin": "git add . && git commit -m 'update metadata & cdn tags' && git push && git push --tags",
+    "git:update-origin": "git add . && git commit -m '[npm publish] update metadata & cdn tags' && git push && git push --tags",
     "prepublishOnly": "paopu && npm run git:update-origin",
     "preversion": "npm test",
     "postversion": "npm run build:publish"
@@ -53,7 +53,7 @@
   "files": [
     "lib/*.{js,map}",
     "dist/*.{js,map}",
-    "src/*.js"
+    "src/**/*.js"
   ],
   "repository": {
     "type": "git",

package.json

@@ -33,13 +33,13 @@ const terserPlugin = terser({
       }
     },
   },
-  mangle: { reserved: ["OmDomDom"] },
+  mangle: { reserved: ["omdomdom"] },
 })
 
 const baseOutput = (format) => ({
   banner,
   format,
-  name: "OmDomDom",
+  name: "omdomdom",
   sourcemap: true,
 })
 

rollup.config.js

@@ -76,7 +76,7 @@ describe("utilities", () => {
     ]
 
     it("returns null if no keys were detected", () => {
-      expect(createKeyMap(withNoKeys)).toBeNull()
+      expect(createKeyMap(withNoKeys)).toBeUndefined()
     })
 
     it("returns the map object if keys were detected", () => {

src/__tests__/utilities.spec.js

@@ -7,75 +7,62 @@ const DATA_KEY_ATTRIBUTE = "data-key"
  * @param {VirtualNode} template - new virtual node tree.
  * @param {VirtualNode} vNode - existing virtual node tree.
  */
-export const updateChildren = (template, vNode, update) => {
+export function patchChildren(template, vNode, patch) {
   const templateChildrenLength = template.children.length
   const vNodeChildrenLength = vNode.children.length
 
   if (!templateChildrenLength && !vNodeChildrenLength) return
 
   const vNodeKeyMap = createKeyMap(vNode.children)
+  let nextChildren = Array(templateChildrenLength)
 
-  // There were no keys found:
+  if (vNodeKeyMap !== undefined) {
+    forEach(template.children, (templateChild, idx) => {
+      const childNodes = vNode.node.childNodes
+      const key = templateChild.attributes[DATA_KEY_ATTRIBUTE]
 
-  if (!vNodeKeyMap) {
-    // Remove extra nodes if template.children is smaller
-    let delta = vNodeChildrenLength - templateChildrenLength
-    if (delta > 0) {
-      while (delta-- > 0) {
-        const child = vNode.children.pop()
-        vNode.node.removeChild(child.node)
-      }
-    }
+      if (Object.prototype.hasOwnProperty.call(vNodeKeyMap, key)) {
+        const keyedChild = vNodeKeyMap[key]
+
+        if (Array.prototype.indexOf.call(childNodes, keyedChild.node) !== idx) {
+          insertBefore(vNode, keyedChild, childNodes[idx])
+        }
+
+        nextChildren[idx] = keyedChild
 
-    return forEach(template.children, (templateChild, idx) => {
+        // Remove entry to prevent dupes
+        delete vNodeKeyMap[key]
+        patch(templateChild, nextChildren[idx])
+      } else {
+        insertBefore(vNode, templateChild, childNodes[idx])
+        nextChildren[idx] = templateChild
+      }
+    })
+  } else {
+    forEach(template.children, (templateChild, idx) => {
       const vNodeChild = vNode.children[idx]
 
       if (typeof vNodeChild !== "undefined") {
-        update(templateChild, vNodeChild)
+        patch(templateChild, vNodeChild)
+        nextChildren[idx] = vNodeChild
       } else {
         vNode.node.appendChild(templateChild.node)
-        vNode.children.push(templateChild)
+        nextChildren[idx] = templateChild
       }
     })
   }
 
-  // There were keys found, resolve them:
-
-  let nextChildren = Array(templateChildrenLength)
-
-  // Match keys and update/move children in-place
-  forEach(template.children, (child, idx) => {
-    const childNodes = vNode.node.childNodes
-    const key = child.attributes[DATA_KEY_ATTRIBUTE]
-
-    if (Object.prototype.hasOwnProperty.call(vNodeKeyMap, key)) {
-      const keyChild = vNodeKeyMap[key]
-
-      if (Array.prototype.indexOf.call(childNodes, keyChild.node) !== idx) {
-        insertBefore(vNode, keyChild, childNodes[idx])
-      }
-
-      nextChildren[idx] = keyChild
-
-      // Prevent duplicates, remove the entry and let it insert at
-      // its natural index in the `else` block.
-      delete vNodeKeyMap[key]
-      update(child, nextChildren[idx])
-    } else {
-      insertBefore(vNode, child, childNodes[idx])
-      nextChildren[idx] = child
-    }
-  })
-
   vNode.children = nextChildren
 
   // Remove any real nodes that are left over from the diff
   let childNodesLength = vNode.node.childNodes.length
   let delta = childNodesLength - templateChildrenLength
+
   if (delta > 0) {
-    while (delta-- > 0) {
+    while (delta > 0) {
       vNode.node.removeChild(vNode.node.childNodes[childNodesLength - 1])
       childNodesLength--
+      delta--
     }
   }
 }

src/children/index.js

@@ -1,7 +1,7 @@
 import { forEach, assignVNode } from "./utilities"
 import { toHTML } from "./parsers"
 import { updateAttributes, getAttributes } from "./attributes"
-import { updateChildren } from "./children"
+import { patchChildren } from "./children"
 
 /**
  * Object representation of a DOM element.
@@ -39,7 +39,7 @@ export const patch = (template, vNode, rootNode) => {
   updateAttributes(template, vNode)
 
   // Diff child nodes recursively
-  updateChildren(template, vNode, patch)
+  patchChildren(template, vNode, patch)
 }
 
 /**

src/omdomdom.js

@@ -49,21 +49,23 @@ export const forEach = (items, fn) => {
 /**
  * Generates a <key: vNode> map of a virtual node list.
  * @param {VirtualNode[]} children
- * @returns {Object.<string, VirtualNode>}
+ * @returns {Object.<string, VirtualNode>|undefined}
  */
 export const createKeyMap = (children) => {
   const map = {}
-  let hasKeys = false
 
   forEach(children, (child) => {
     const key = child.attributes[DATA_KEY_ATTRIBUTE]
     if (keyIsValid(map, key)) {
       map[key] = child
-      if (!hasKeys) hasKeys = true
     }
   })
 
-  return hasKeys ? map : null
+  // Cheap way to check if the map contains keys,
+  // and if so, returns the map on the first iteration.
+  for (const _ in map) {
+    return map
+  }
 }
 
 export const insertBefore = (parent, child, refNode) => {