neo.mjs 9.15.0 → 10.0.0-alpha.1

package/src/main/mixin/DeltaUpdates.mjs

@@ -1,352 +0,0 @@
-import Base from '../../core/Base.mjs';
-
-/**
- * Logic to apply the deltas generated by vdom.Helper to the real DOM
- * @class Neo.main.mixin.DeltaUpdates
- * @extends Neo.core.Base
- * @singleton
- */
-class DeltaUpdates extends Base {
-    static config = {
-        /**
-         * @member {String} className='Neo.main.mixin.DeltaUpdates'
-         * @protected
-         */
-        className: 'Neo.main.mixin.DeltaUpdates'
-    }
-
-    /**
-     * @param {HTMLElement} node
-     * @param {String} nodeName
-     */
-    du_changeNodeName(node, nodeName) {
-        let {attributes} = node,
-            clone        = document.createElement(nodeName),
-            i            = 0,
-            len          = attributes.length,
-            attribute;
-
-        if (node) {
-            for (; i < len; i++) {
-                attribute = attributes.item(i);
-                clone.setAttribute(attribute.nodeName, attribute.nodeValue)
-            }
-
-            clone.innerHTML= node.innerHTML;
-
-            node.parentNode.replaceChild(clone, node)
-        }
-    }
-
-    /**
-     * @param {Object} delta
-     * @param {String} delta.id
-     */
-    du_focusNode(delta) {
-        this.getElement(delta.id)?.focus()
-    }
-
-    /**
-     * node.children contains the "real" nodes (tags)
-     * node.childNodes contains texts & comments as nodes too
-     * since every vtype:'text' is wrapped inside a comment block (as an id),
-     * we need the amount of nodes which are not comments to get the "realIndex".
-     * insertAdjacentHTML() is faster than creating a node (template), but only available
-     * for children and not for childNodes.
-     * In case there are no comments (=> vtype: 'text' nodes), we stick to it for performance reasons.
-     *
-     * @param {Object} delta
-     * @param {String} delta.index
-     * @param {String} delta.outerHTML
-     * @param {String} delta.parentId
-     */
-    du_insertNode(delta) {
-        let {index}       = delta,
-            parentNode    = this.getElementOrBody(delta.parentId),
-            countChildren = parentNode?.childNodes.length,
-            i             = 0,
-            realIndex     = index,
-            hasComments   = false,
-            node;
-
-        if (parentNode) {
-            // console.log('insertNode', index, countChildren, delta.parentId);
-
-            if (countChildren <= 20 && parentNode.nodeName !== 'TBODY') {
-                for (; i < countChildren; i++) {
-                    if (parentNode.childNodes[i].nodeType === 8) { // ignore comments
-                        if (i < realIndex) {
-                            realIndex++
-                        }
-
-                        hasComments = true
-                    }
-                }
-            }
-
-            if (!hasComments) {
-                countChildren = parentNode.children.length;
-
-                if (index > 0 && index >= countChildren) {
-                    parentNode.insertAdjacentHTML('beforeend', delta.outerHTML);
-                    return
-                }
-
-                if (countChildren > 0 && countChildren > index) {
-                    parentNode.children[index].insertAdjacentHTML('beforebegin', delta.outerHTML)
-                } else if (countChildren > 0) {
-                    parentNode.children[countChildren - 1].insertAdjacentHTML('afterend', delta.outerHTML)
-                } else {
-                    parentNode.insertAdjacentHTML('beforeend', delta.outerHTML)
-                }
-            } else {
-                node = this.htmlStringToElement(delta.outerHTML);
-
-                if (countChildren > 0 && countChildren > realIndex) {
-                    parentNode.insertBefore(node, parentNode.childNodes[realIndex])
-                } else {
-                    parentNode.appendChild(node)
-                }
-            }
-        }
-    }
-
-    /**
-     * @param {Object} delta
-     * @param {String} delta.id
-     * @param {String} delta.index
-     * @param {String} delta.parentId
-     */
-    du_moveNode({id, index, parentId}) {
-        let node       = this.getElement(id),
-            parentNode = this.getElement(parentId),
-            currentNode;
-
-        if (node && parentNode) {
-            if (index >= parentNode.children.length) {
-                parentNode.appendChild(node)
-            } else {
-                currentNode = parentNode.children[index];
-
-                if (node && currentNode.id !== id) {
-                    // Check for a direct swap OP
-                    if (node === currentNode.nextElementSibling) {
-                        node.replaceWith(currentNode)
-                    }
-
-                    parentNode.insertBefore(node, currentNode)
-                }
-            }
-        }
-    }
-
-    /**
-     * @param {Object} delta
-     * @param {String} delta.parentId
-     */
-    du_removeAll(delta) {
-        let node = this.getElement(delta.parentId);
-
-        if (node) {
-            node.innerHTML = ''
-        }
-    }
-
-    /**
-     * @param {Object} delta
-     * @param {String} delta.id
-     * @param {String} delta.parentId
-     */
-    du_removeNode(delta) {
-        let node = this.getElement(delta.id),
-            reg, startTag;
-
-        if (!node) { // could be a vtype: text
-            node = delta.parentId && this.getElementOrBody(delta.parentId);
-
-            if (node) {
-                startTag = `<!-- ${delta.id} -->`;
-                reg      = new RegExp(startTag + '[\\s\\S]*?<!-- \/neo-vtext -->');
-
-                node.innerHTML = node.innerHTML.replace(reg, '')
-            }
-        } else {
-            node.remove()
-        }
-    }
-
-    /**
-     * @param {Object} delta
-     * @param {String} delta.fromId
-     * @param {String} delta.parentId
-     * @param {String} delta.toId
-     */
-    du_replaceChild(delta) {
-        let me   = this,
-            node = me.getElement(delta.parentId);
-
-        node?.replaceChild(me.getElement(delta.toId), me.getElement(delta.fromId))
-    }
-
-    /**
-     * @param {Object} delta
-     * @param {String} [delta.id]
-     * @param {String} [delta.value
-     */
-    du_setTextContent(delta) {
-        let me   = this,
-            node = me.getElement(delta.id);
-
-        if (node) {
-            node.textContent = delta.value
-        }
-    }
-
-    /**
-     * @param {Object} delta
-     * @param {Object} [delta.attributes]
-     * @param {String} [delta.cls]
-     * @param {String} [delta.id]
-     * @param {String} [delta.innerHTML]
-     * @param {String} [delta.outerHTML]
-     * @param {Object} [delta.style]
-     */
-    du_updateNode(delta) {
-        let me   = this,
-            node = me.getElementOrBody(delta.id);
-
-        if (node) {
-            Object.entries(delta).forEach(([prop, value]) => {
-                switch(prop) {
-                    case 'attributes':
-                        Object.entries(value).forEach(([key, val]) => {
-                            if (me.voidAttributes.includes(key)) {
-                                node[key] = val === 'true' // vnode attribute values get converted into strings
-                            } else if (val === null || val === '') {
-                                if (key === 'value') {
-                                    node[key] = '' // input fields => pseudo attribute can not be removed
-                                } else {
-                                    node.removeAttribute(key)
-                                }
-                            } else if (key === 'id') {
-                                node[Neo.config.useDomIds ? 'id' : 'data-neo-id'] = val
-                            } else if (key === 'spellcheck' && val === 'false') {
-                                // see https://github.com/neomjs/neo/issues/1922
-                                node[key] = false
-                            } else {
-                                if (key === 'value') {
-                                    node[key] = val
-                                } else {
-                                    node.setAttribute(key, val)
-                                }
-                            }
-                        });
-                        break
-                    case 'cls':
-                        value.add    && node.classList.add(...value.add);
-                        value.remove && node.classList.remove(...value.remove);
-                        break
-                    case 'innerHTML':
-                        node.innerHTML = value || '';
-                        break
-                    case 'nodeName':
-                        me.du_changeNodeName(node, value);
-                        break
-                    case 'outerHTML':
-                        node.outerHTML = value || '';
-                        break
-                    case 'style':
-                        if (Neo.isObject(value)) {
-                            Object.entries(value).forEach(([key, val]) => {
-                                let important;
-
-                                if (Neo.isString(val) && val.includes('!important')) {
-                                    val = val.replace('!important', '').trim();
-                                    important = 'important'
-                                }
-
-                                node.style.setProperty(Neo.decamel(key), val, important)
-                            })
-                        }
-                        break
-                }
-            })
-        }
-    }
-
-    /**
-     * @param {Object} delta
-     * @param {String} delta.id
-     * @param {String} delta.parentId
-     * @param {String} delta.value
-     */
-    du_updateVtext(delta) {
-        let me        = this,
-            node      = me.getElement(delta.parentId),
-            innerHTML = node.innerHTML,
-            startTag  = `<!-- ${delta.id} -->`,
-            reg       = new RegExp(startTag + '[\\s\\S]*?<!-- \/neo-vtext -->');
-
-        node.innerHTML = innerHTML.replace(reg, delta.value)
-    }
-
-    /**
-     * @param {String} html representing a single element
-     * @returns {ChildNode}
-     */
-    htmlStringToElement(html) {
-        const template = document.createElement('template');
-        template.innerHTML = html;
-        return template.content
-    }
-
-    /**
-     * @param {Object} data
-     * @param {Object|Object[]} data.deltas
-     * @param {String} data.id
-     * @param {String} [data.origin='app']
-     */
-    update(data) {
-        let me       = this,
-            {deltas} = data,
-            i        = 0,
-            len, map;
-
-        deltas = Array.isArray(deltas) ? deltas : [deltas];
-        len    = deltas.length;
-
-        if (Neo.config.logDeltaUpdates && len > 0) {
-            me.countDeltas += len;
-            me.countUpdates++;
-            console.log('update ' + me.countUpdates, 'total deltas ', me.countDeltas, Neo.clone(data, true))
-        }
-
-        if (Neo.config.renderCountDeltas && len > 0) {
-            me.countDeltasPer250ms += len
-        }
-
-        map = {
-            focusNode     : me.du_focusNode,
-            insertNode    : me.du_insertNode,
-            moveNode      : me.du_moveNode,
-            removeAll     : me.du_removeAll,
-            removeNode    : me.du_removeNode,
-            replaceChild  : me.du_replaceChild,
-            setTextContent: me.du_setTextContent,
-            updateVtext   : me.du_updateVtext,
-            default       : me.du_updateNode
-        };
-
-        for (; i < len; i++) {
-            (map[deltas[i].action] || map['default']).call(me, deltas[i])
-        }
-
-        Neo.worker.Manager.sendMessage(data.origin || 'app', {
-            action : 'reply',
-            replyId: data.id,
-            success: true
-        })
-    }
-}
-
-export default Neo.setupClass(DeltaUpdates);