dist

deno.json

@@ -1,6 +1,6 @@
 {
     "name": "@n2geoff/um",
-    "version": "0.4.1",
+    "version": "0.5.0",
     "exports": "./index.js",
     "tasks": {
       "dev": "deno run --watch index.js",

dist/um.js

@@ -1,32 +1,128 @@
-/**
+/*! Emerj v1.0.0 | MIT LICENSE | https://github.com/bryhoyt/emerj */
- * HTML Tag Scripting Function
+var diff = {
+    attrs(elem) {
+        const attrs = {};
+        for (let i=0; i < elem.attributes.length; i++) {
+            const attr = elem.attributes[i];
+            attrs[attr.name] = attr.value;
+        }
+        return attrs;
+    },
+    nodesByKey(parent, makeKey) {
+        const map = {};
+        for (let j=0; j < parent.childNodes.length; j++) {
+            const key = makeKey(parent.childNodes[j]);
+            if (key) map[key] = parent.childNodes[j];
+        }
+        return map;
+    },
+    merge(base, modified, opts) {
+        /* Merge any differences between base and modified back into base.
          *
- * Generates new DOM element(s) from a tag, attributes
+         * Operates only the children nodes, and does not change the root node or its
+         * attributes.
          *
- * @param {String} tag                 - tag name
+         * Conceptually similar to React's reconciliation algorithm:
- * @param {Object|String|Array} args   - attributes, text or array of child elements
+         * https://facebook.github.io/react/docs/reconciliation.html
          *
- * @returns {HTMLElement} The created DOM element(s)
+         * I haven't thoroughly tested performance to compare to naive DOM updates (i.e.
+         * just updating the entire DOM from a string using .innerHTML), but some quick
+         * tests on a basic DOMs were twice as fast -- so at least it's not slower in
+         * a simple scenario -- and it's definitely "fast enough" for responsive UI and
+         * even smooth animation.
+         *
+         * The real advantage for me is not so much performance, but that state & identity
+         * of existing elements is preserved -- text typed into an <input>, an open
+         * <select> dropdown, scroll position, ad-hoc attached events, canvas paint, etc,
+         * are preserved as long as an element's identity remains.
+         *
+         * See https://korynunn.wordpress.com/2013/03/19/the-dom-isnt-slow-you-are/
          */
-function h(tag, ...args) {
+        opts = opts || {};
-    const el = document.createElement(tag);
+        opts.key = opts.key || (node => node.id);
 
-    // support all scalar values as TextNodes
+        if (typeof modified === 'string') {
-    const isScalar = (value) => ["boolean", "string", "number"].includes(typeof value);
+            const html = modified;
-
+            // Make sure the parent element of the provided HTML is of the same type as
-    args.forEach((arg) => {
+            // `base`'s parent. This matters when the HTML contains fragments that are
-        if (isScalar(arg)) {
+            // only valid inside certain elements, eg <td>s, which must have a <tr>
-            el.appendChild(document.createTextNode(arg));
+            // parent.
-        } else if (Array.isArray(arg)) {
+            modified = document.createElement(base.tagName);
-            el.append(...arg);
+            modified.innerHTML = html;
-        } else {
-            Object.assign(el, arg);
         }
-    });
 
-    return el;
+        // Naively recurse into the children, if any, replacing or updating new
+        // elements that are in the same position as old, deleting trailing elements
+        // when the new list contains fewer children, or appending new elements if
+        // it contains more children.
+        //
+        // For re-ordered children, the `id` attribute can be used to preserve identity.
+
+        // Loop through .childNodes, not just .children, so we compare text nodes (and
+        // comment nodes, fwiw) too.
+
+        const nodesByKey = {old: this.nodesByKey(base, opts.key),
+                          new: this.nodesByKey(modified, opts.key)};
+
+        let idx;
+        for (idx=0; modified.firstChild; idx++) {
+            const newNode = modified.removeChild(modified.firstChild);
+            if (idx >= base.childNodes.length) {
+                // It's a new node. Append it.
+                base.appendChild(newNode);
+                continue;
             }
 
+            let baseNode = base.childNodes[idx];
+
+            // If the children are indexed, then make sure to retain their identity in
+            // the new order.
+            const newKey = opts.key(newNode);
+            if (opts.key(baseNode) || newKey) {
+                // If the new node has a key, then either use its existing match, or insert it.
+                // If not, but the old node has a key, then make sure to leave it untouched and insert the new one instead.
+                // Else neither node has a key. Just overwrite old with new.
+                const match = (newKey && newKey in nodesByKey.old)? nodesByKey.old[newKey]: newNode;
+                if (match !== baseNode) {
+                    baseNode = base.insertBefore(match, baseNode);
+                }
+            }
+
+            if (baseNode.nodeType !== newNode.nodeType || baseNode.tagName !== newNode.tagName) {
+                // Completely different node types. Just update the whole subtree, like React does.
+                base.replaceChild(newNode, baseNode);
+            } else if ([Node.TEXT_NODE, Node.COMMENT_NODE].indexOf(baseNode.nodeType) >= 0) {
+                // This is the terminating case of the merge() recursion.
+                if (baseNode.textContent === newNode.textContent) continue;  // Don't write if we don't need to.
+                baseNode.textContent = newNode.textContent;
+            } else if (baseNode !== newNode) {   // Only need to update if we haven't just inserted the newNode in.
+                // It's an existing node with the same tag name. Update only what's necessary.
+                // First, make dicts of attributes, for fast lookup:
+                const attrs = {base: this.attrs(baseNode), new: this.attrs(newNode)};
+                for (const attr in attrs.base) {
+                    // Remove any missing attributes.
+                    if (attr in attrs.new) continue;
+                    baseNode.removeAttribute(attr);
+                }
+                for (const attr in attrs.new) {
+                    // Add and update any new or modified attributes.
+                    if (attr in attrs.base && attrs.base[attr] === attrs.new[attr]) continue;
+                    baseNode.setAttribute(attr, attrs.new[attr]);
+                }
+                // Now, recurse into the children. If the only children are text, this will
+                // be the final recursion on this node.
+                this.merge(baseNode, newNode);
+            }
+        }
+        while (base.childNodes.length > idx) {
+            // If base has more children than modified, delete the extras.
+            base.removeChild(base.lastChild);
+        }
+    },
+};
+
+/*! Um v0.5.0 | MIT LICENSE | https://github.com/n2geoff/um */
+
 /**
  * App Builder
  *
@@ -83,7 +179,7 @@ function app(opts) {
 
     /** update dom */
     const update = () => {
-        document.querySelector(mount).replaceChildren(view(state, actions));
+        diff.merge(document.querySelector(mount), view(state, actions));
     };
 
     // mount view
@@ -94,4 +190,37 @@ function app(opts) {
     return {state,update}
 }
 
+/**
+ * HTML Tag Scripting Function
+ *
+ * Generates new DOM element(s) from a tag, attributes
+ *
+ * @param {String} tag                 - tag name
+ * @param {Object|String|Array} args   - attributes, text or array of child elements
+ *
+ * @returns {HTMLElement} The created DOM element(s)
+ */
+function h(tag, ...args) {
+    const el = document.createElement(tag);
+
+    // support all scalar values as TextNodes
+    const isScalar = (value) => ["boolean", "string", "number"].includes(typeof value);
+
+    for(let i = 0; i < args.length; i++) {
+        if (isScalar(args[i])) {
+            el.appendChild(document.createTextNode(args[i]));
+        } else if (Array.isArray(args[i])) {
+            el.append(...args[i]);
+        } else {
+            for(const [k,v] of Object.entries(args[i])) {
+                // if not both ways, some attributes do not render
+                el.setAttribute(k, v);
+                el[k] = v;
+            }
+        }
+    }
+
+    return el;
+}
+
 export { app, h };

dist/um.min.js

@@ -1,3 +1,4 @@
-/*! Um v:0.4.1 | MIT LICENSE | https://github.com/n2geoff/um */
+/*! Emerj v1.0.0 | MIT LICENSE | https://github.com/bryhoyt/emerj */
-function h(tag,...args){const el=document.createElement(tag);return args.forEach((arg=>{["boolean","string","number"].includes(typeof arg)?el.appendChild(document.createTextNode(arg)):Array.isArray(arg)?el.append(...arg):Object.assign(el,arg)})),el}function app(opts){const state=check(opts.state,{}),view=check(opts.view,(()=>null)),actions=check(opts.actions,{}),mount=opts.mount||"body";function check(value,type){return typeof value==typeof type?value:type}const update=()=>{document.querySelector(mount).replaceChildren(view(state,actions))};return opts.view&&mount&&function(data,actions){Object.entries(actions).forEach((([name,action])=>{"function"==typeof action&&(actions[name]=(...args)=>{Object.assign(state,action(data,...args)),update()})})),update()}(state,actions),{state:state,update:update}}export{app,h};
+var diff={attrs(elem){const attrs={};for(let i=0;i<elem.attributes.length;i++){const attr=elem.attributes[i];attrs[attr.name]=attr.value}return attrs},nodesByKey(parent,makeKey){const map={};for(let j=0;j<parent.childNodes.length;j++){const key=makeKey(parent.childNodes[j]);key&&(map[key]=parent.childNodes[j])}return map},merge(base,modified,opts){if((opts=opts||{}).key=opts.key||(node=>node.id),"string"==typeof modified){const html=modified;(modified=document.createElement(base.tagName)).innerHTML=html}const nodesByKey={old:this.nodesByKey(base,opts.key),new:this.nodesByKey(modified,opts.key)};let idx;for(idx=0;modified.firstChild;idx++){const newNode=modified.removeChild(modified.firstChild);if(idx>=base.childNodes.length){base.appendChild(newNode);continue}let baseNode=base.childNodes[idx];const newKey=opts.key(newNode);if(opts.key(baseNode)||newKey){const match=newKey&&newKey in nodesByKey.old?nodesByKey.old[newKey]:newNode;match!==baseNode&&(baseNode=base.insertBefore(match,baseNode))}if(baseNode.nodeType!==newNode.nodeType||baseNode.tagName!==newNode.tagName)base.replaceChild(newNode,baseNode);else if([Node.TEXT_NODE,Node.COMMENT_NODE].indexOf(baseNode.nodeType)>=0){if(baseNode.textContent===newNode.textContent)continue;baseNode.textContent=newNode.textContent}else if(baseNode!==newNode){const attrs={base:this.attrs(baseNode),new:this.attrs(newNode)};for(const attr in attrs.base)attr in attrs.new||baseNode.removeAttribute(attr);for(const attr in attrs.new)attr in attrs.base&&attrs.base[attr]===attrs.new[attr]||baseNode.setAttribute(attr,attrs.new[attr]);this.merge(baseNode,newNode)}}for(;base.childNodes.length>idx;)base.removeChild(base.lastChild)}};
+/*! Um v0.5.0 | MIT LICENSE | https://github.com/n2geoff/um */function app(opts){const state=check(opts.state,{}),view=check(opts.view,(()=>null)),actions=check(opts.actions,{}),mount=opts.mount||"body";function check(value,type){return typeof value==typeof type?value:type}const update=()=>{diff.merge(document.querySelector(mount),view(state,actions))};return opts.view&&mount&&function(data,actions){Object.entries(actions).forEach((([name,action])=>{"function"==typeof action&&(actions[name]=(...args)=>{Object.assign(state,action(data,...args)),update()})})),update()}(state,actions),{state:state,update:update}}function h(tag,...args){const el=document.createElement(tag);for(let i=0;i<args.length;i++)if(value=args[i],["boolean","string","number"].includes(typeof value))el.appendChild(document.createTextNode(args[i]));else if(Array.isArray(args[i]))el.append(...args[i]);else for(const[k,v]of Object.entries(args[i]))el.setAttribute(k,v),el[k]=v;var value;return el}export{app,h};
 //# sourceMappingURL=true

dist/um.min.js.map

@@ -1 +1 @@
-{"version":3,"names":["h","tag","args","el","document","createElement","forEach","arg","includes","appendChild","createTextNode","Array","isArray","append","Object","assign","app","opts","state","check","view","actions","mount","value","type","update","querySelector","replaceChildren","data","entries","name","action","dispatch"],"sources":["dist/um.js"],"mappings":"AAUA,SAASA,EAAEC,OAAQC,MACf,MAAMC,GAAKC,SAASC,cAAcJ,KAelC,OAVAC,KAAKI,SAASC,MAFc,CAAC,UAAW,SAAU,UAAUC,gBAG3CD,KACTJ,GAAGM,YAAYL,SAASM,eAAeH,MAChCI,MAAMC,QAAQL,KACrBJ,GAAGU,UAAUN,KAEbO,OAAOC,OAAOZ,GAAII,IACtB,IAGGJ,EACX,CAgBA,SAASa,IAAIC,MAET,MAAMC,MAAUC,MAAMF,KAAKC,MAAO,CAAC,GAC7BE,KAAUD,MAAMF,KAAKG,MAAM,IAAM,OACjCC,QAAUF,MAAMF,KAAKI,QAAS,CAAC,GAC/BC,MAAUL,KAAKK,OAAS,OAS9B,SAASH,MAAMI,MAAOC,MAClB,cAAcD,cAAiBC,KAAOD,MAAQC,IAClD,CAyBA,MAAMC,OAAS,KACXrB,SAASsB,cAAcJ,OAAOK,gBAAgBP,KAAKF,MAAOG,SAAS,EAQvE,OAJIJ,KAAKG,MAAQE,OAtBjB,SAAkBM,KAAMP,SACpBP,OAAOe,QAAQR,SAASf,SAAQ,EAAEwB,KAAMC,WACd,mBAAXA,SACPV,QAAQS,MAAQ,IAAI5B,QAEhBY,OAAOC,OAAOG,MAAOa,OAAOH,QAAS1B,OAGrCuB,QAAQ,EAEhB,IAGJA,QACJ,CASIO,CAASd,MAAOG,SAGb,CAACH,YAAMO,cAClB,QAEST,IAAKhB","ignoreList":[]}
+{"version":3,"names":["diff","attrs","elem","i","attributes","length","attr","name","value","nodesByKey","parent","makeKey","map","j","childNodes","key","merge","base","modified","opts","node","id","html","document","createElement","tagName","innerHTML","old","this","new","idx","firstChild","newNode","removeChild","appendChild","baseNode","newKey","match","insertBefore","nodeType","replaceChild","Node","TEXT_NODE","COMMENT_NODE","indexOf","textContent","removeAttribute","setAttribute","lastChild","app","state","check","view","actions","mount","type","update","querySelector","data","Object","entries","forEach","action","args","assign","dispatch","h","tag","el","includes","createTextNode","Array","isArray","append","k","v"],"sources":["dist/um.js"],"mappings":"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","ignoreList":[]}