neo.mjs 9.15.0 → 10.0.0-alpha.1

package/src/Main.mjs

@@ -1,6 +1,7 @@
 import Neo           from './Neo.mjs';
 import * as core     from './core/_export.mjs';
-import DomAccess     from './main/DomAccess.mjs';
+import DomAccess     from './main/DomAccess.mjs'; // has to get imported before DeltaUpdates
+import DeltaUpdates  from './main/DeltaUpdates.mjs';
 import DomEvents     from './main/DomEvents.mjs';
 import Observable    from './core/Observable.mjs';
 import WorkerManager from './worker/Manager.mjs';
@@ -336,8 +337,9 @@ class Main extends core.Base {
      * @protected
      */
     processQueue(queue, start) {
-        let me    = this,
-            limit = me.timeLimit,
+        let me     = this,
+            {mode} = me,
+            limit  = me.timeLimit,
             operation;
 
         while (operation = queue.shift()) {
@@ -345,7 +347,14 @@ class Main extends core.Base {
                 queue.unshift(operation);
                 return requestAnimationFrame(me.renderFrame.bind(me))
             } else {
-                DomAccess[me.mode](operation);
+                if (mode === 'read') {
+                    DomAccess.read(operation)
+                } else if (mode === 'write') {
+                    DeltaUpdates.insertNode(operation)
+                } else {
+                    DeltaUpdates.update(operation)
+                }
+
                 WorkerManager.resolveDomOperationPromise(operation.replyId)
             }
         }
@@ -531,7 +540,7 @@ class Main extends core.Base {
     }
 
     /**
-     * Open a new popup window and return if successfull
+     * Open a new popup window and return if successful
      * @param {Object} data
      * @param {String} data.url
      * @param {String} data.windowFeatures

package/src/button/Base.mjs

@@ -380,7 +380,7 @@ class Button extends Component {
         textNode.removeDom = isEmpty;
 
         if (!isEmpty) {
-            textNode.innerHTML = value
+            textNode.html = value
         }
 
         me.update()

package/src/calendar/view/calendars/List.mjs

@@ -77,7 +77,7 @@ class List extends ComponentList {
 
         return [
             checkBox.createVdomReference(),
-            {tag: 'i', cls: ['neo-edit-icon', 'fas fa-edit'], id: me.getEditIconId(index)}
+            {tag: 'i', cls: ['neo-edit-icon', 'fas', 'fa-edit'], id: me.getEditIconId(index)}
         ]
     }
 

package/src/component/Base.mjs

@@ -1663,7 +1663,7 @@ class Component extends Base {
         controller = me.getConfigInstanceByNtype('controller', ntype);
 
         if (!ntype) {
-            me[closestController] = controller;
+            me[closestController] = controller
         }
 
         return controller
@@ -1911,7 +1911,7 @@ class Component extends Base {
         } else {
             let style = me.style;
             style.visibility = 'hidden';
-            me.style = style;
+            me.style = style
         }
 
         me._hidden = true
@@ -2136,14 +2136,14 @@ class Component extends Base {
     onFocusEnter(data) {
         // If we are hidden, or unmounted while we still contain focus, we have to revert
         // focus to where it came from if possible
-        this.focusEnterData = data;
+        this.focusEnterData = data
     }
 
     /**
      * @param {Object} data
      */
     onFocusLeave(data) {
-        this.focusEnterData = null;
+        this.focusEnterData = null
     }
 
     /**
@@ -2171,11 +2171,11 @@ class Component extends Base {
 
     /**
      * Gets called from the render() promise success handler
-     * @param {Object} data
+     * @param {Object} vnode
      * @param {Boolean} autoMount Mount the DOM after the vnode got created
      * @protected
      */
-    onRender(data, autoMount) {
+    onRender(vnode, autoMount) {
         let me    = this,
             {app} = me;
 
@@ -2189,9 +2189,9 @@ class Component extends Base {
                 app.fire('render')
             }
 
-            me.vnode = data;
+            me.vnode = vnode;
 
-            let childIds = ComponentManager.getChildIds(data),
+            let childIds = ComponentManager.getChildIds(vnode),
                 i        = 0,
                 len      = childIds.length,
                 child;
@@ -2333,11 +2333,11 @@ class Component extends Base {
                 autoMount,
                 parentId   : autoMount ? me.getMountedParentId()    : undefined,
                 parentIndex: autoMount ? me.getMountedParentIndex() : undefined,
-                windowId   : me.windowId,
-                ...ComponentManager.getVdomTree(me.vdom)
+                vdom       : ComponentManager.getVdomTree(me.vdom),
+                windowId   : me.windowId
             });
 
-            me.onRender(data, useVdomWorker ? autoMount : false);
+            me.onRender(data.vnode, useVdomWorker ? autoMount : false);
             me.isVdomUpdating = false;
 
             autoMount && !useVdomWorker && me.mount();

package/src/component/Chip.mjs

@@ -132,7 +132,7 @@ class Chip extends Component {
             textNode.removeDom = true
         } else {
             textNode.removeDom = false;
-            textNode.innerHTML = value
+            textNode.html      = value
         }
 
         this.update()

package/src/component/Helix.mjs

@@ -701,8 +701,8 @@ class Helix extends Component {
 
             if (me.showCloneInfo) {
                 itemVdom.cn.push({
-                    cls      : ['contact-name'],
-                    innerHTML: record.firstname + ' ' + record.lastname
+                    cls : ['contact-name'],
+                    html: record.firstname + ' ' + record.lastname
                 })
             }
 
@@ -711,7 +711,7 @@ class Helix extends Component {
                 autoMount  : true,
                 parentId   : group.id,
                 parentIndex: store.getCount(),
-                ...itemVdom
+                vdom       : itemVdom
             }).then(data => {
                 me.clonedItems.push(itemVdom);
 

package/src/component/Process.mjs

@@ -173,8 +173,8 @@ class Process extends Base {
             content = curItem.cn[3];
 
             content.cn[0].cls.push(newItem.iconCls);
-            content.cn[1].innerHTML = newItem.title;
-            content.cn[2].innerHTML = newItem.text;
+            content.cn[1].html = newItem.title;
+            content.cn[2].html = newItem.text;
 
             NeoArray.add(vdomRoot.cn, curItem)
         })

package/src/component/StatusBadge.mjs

@@ -329,7 +329,7 @@ class StatusBadge extends Base {
                     break;
             }
 
-            labelNode.innerHTML = showLabel;
+            labelNode.html = showLabel;
 
             me.updateStateIconNode(showStateIcon);
             me.updateSideIconNode(showSideIcon)
@@ -382,7 +382,7 @@ class StatusBadge extends Base {
     updateLabelNode(value) {
         let labelNode = this.getVdomRoot().cn[1];
 
-        labelNode.innerHTML = value;
+        labelNode.html      = value;
         labelNode.removeDom = !Boolean(value);
 
         this.update()

package/src/component/Timer.mjs

@@ -283,7 +283,7 @@ class Timer extends Component {
         let me    = this,
             timer = me.vdom.cn[0].cn[1].cn[0].cn[1].cn[0];
 
-        timer.innerHTML = value;
+        timer.html = value;
         me.update()
     }
 

package/src/component/Toast.mjs

@@ -175,7 +175,7 @@ class Toast extends Component {
     afterSetMsg(value, oldValue) {
         let vdom = this.getTextRootVdom().cn[1];
 
-        vdom.innerHTML = value
+        vdom.html = value
     }
 
     /**
@@ -221,7 +221,7 @@ class Toast extends Component {
         let vdom = this.getTextRootVdom().cn[0];
 
         vdom.removeDom = Neo.isEmpty(value);
-        vdom.innerHTML = value;
+        vdom.html      = value;
         NeoArray[value ? 'add' : 'remove'](vdom.cls, 'neo-toast-has-title')
     }
 

package/src/container/Base.mjs

@@ -389,7 +389,7 @@ class Container extends Component {
             case 'String': {
                 item = Neo.create({
                     module: Component,
-                    vdom  : {innerHTML: item},
+                    vdom  : {html: item},
                     ...config
                 });
 

package/src/form/field/CheckBox.mjs

@@ -324,7 +324,7 @@ class CheckBox extends Field {
             value = `<span class="${me.labelIdCls.join(',')}">${me.labelId}</span>${me.labelIdSeparator + value}`
         }
 
-        me.vdom.cn[0].cn[0].innerHTML = value;
+        me.vdom.cn[0].cn[0].html = value;
         me.update()
     }
 
@@ -397,7 +397,7 @@ class CheckBox extends Field {
             showLabel  = !!value; // hide the label, in case value === null || value === ''
 
         if (showLabel) {
-            valueLabel.innerHTML = value
+            valueLabel.html = value
         }
 
         valueLabel.removeDom = !showLabel;

package/src/form/field/FileUpload.mjs

@@ -410,13 +410,13 @@ class FileUpload extends Field {
                 escapedFileName = StringUtil.escapeHtml(file.name);
 
             if (me.types && !types[type]) {
-                body.cn[0].innerHTML = escapedFileName;
-                body.cn[1].innerHTML = `${me.invalidFileFormat} (.${type}) ${me.formatSize(file.size)}`;
+                body.cn[0].html = escapedFileName;
+                body.cn[1].html = `${me.invalidFileFormat} (.${type}) ${me.formatSize(file.size)}`;
                 me.error = me.pleaseUseTheseTypes?.replace('{allowedFileTypes}', Object.keys(types).join(' .'))
             }
             else if (file.size > me.maxSize) {
-                body.cn[0].innerHTML = escapedFileName;
-                body.cn[1].innerHTML = me.formatSize(file.size);
+                body.cn[0].html = escapedFileName;
+                body.cn[1].html = me.formatSize(file.size);
                 me.error = me.fileSizeMoreThan?.replace('{allowedFileSize}', String(me._maxSize).toUpperCase());
             }
             // If it passes the type and maxSize check, upload it
@@ -448,7 +448,7 @@ class FileUpload extends Field {
         await me.timeout(100);
         me.focus(me.vdom.cn[2].id);
 
-        me.vdom.cn[1].cn[0].innerHTML = StringUtil.escapeHtml(file.name);
+        me.vdom.cn[1].cn[0].html = StringUtil.escapeHtml(file.name);
         me.update();
         me.state = 'uploading';
 
@@ -492,7 +492,7 @@ class FileUpload extends Field {
 
         (vdom.style || (vdom.style = {}))['--upload-progress'] = `${progress}turn`;
 
-        vdom.cn[1].cn[1].innerHTML = `${this.uploading}... (${Math.round(progress * 100)}%)`;
+        vdom.cn[1].cn[1].html = `${this.uploading}... (${Math.round(progress * 100)}%)`;
 
         this.uploadSize = loaded;
         this.update();
@@ -673,7 +673,7 @@ class FileUpload extends Field {
 
             me.documentId = document.id;
             me.fileSize = me.formatSize(document.size);
-            me.vdom.cn[1].cn[0].innerHTML = StringUtil.escapeHtml(document.fileName);
+            me.vdom.cn[1].cn[0].html = StringUtil.escapeHtml(document.fileName);
             me.state = me.documentStatusMap[document.status];
         }
     }
@@ -704,15 +704,15 @@ class FileUpload extends Field {
                 isChangeEventNeeded = true;
                 break;
             case 'upload-failed':
-                status.innerHTML = `${me.uploadFailed}${isNaN(me.progress) ? '' : `... (${Math.round(me.progress * 100)}%)`}`;
+                status.html = `${me.uploadFailed}${isNaN(me.progress) ? '' : `... (${Math.round(me.progress * 100)}%)`}`;
                 isChangeEventNeeded = true;
                 break;
             case 'processing':
-                status.innerHTML = `${me.scanning}... (${me.formatSize(me.uploadSize)})`;
+                status.html = `${me.scanning}... (${me.formatSize(me.uploadSize)})`;
                 vdom.inert = true;
                 break;
             case 'scan-failed':
-                status.innerHTML = `${me.malwareFoundInFile}. \u2022 ${me.fileSize}`;
+                status.html = `${me.malwareFoundInFile}. \u2022 ${me.fileSize}`;
                 me.error = me.pleaseCheck;
                 isChangeEventNeeded = true;
                 break;
@@ -721,19 +721,19 @@ class FileUpload extends Field {
                 anchor.href = me.createUrl(me.downloadUrl, {
                     [me.documentIdParameter] : me.documentId
                 });
-                status.innerHTML = me.fileSize;
+                status.html = me.fileSize;
                 isChangeEventNeeded = true;
                 break;
             case 'not-downloadable':
-                status.innerHTML = me.document ? me.fileSize : `${me.successfullyUploaded} \u2022 ${me.fileSize}`;
+                status.html = me.document ? me.fileSize : `${me.successfullyUploaded} \u2022 ${me.fileSize}`;
                 isChangeEventNeeded = true;
                 break;
             case 'deleted':
-                status.innerHTML = me.fileWasDeleted;
+                status.html = me.fileWasDeleted;
                 isChangeEventNeeded = true;
                 break;
             case 'error':
-                status.innerHTML = me.fileIsInAnErrorState;
+                status.html = me.fileIsInAnErrorState;
                 me.error = me.pleaseCheck;
                 isChangeEventNeeded = true;
             }

package/src/form/field/Range.mjs

@@ -109,7 +109,7 @@ class Range extends Number {
         let me = this;
 
         if (me.showResultInLabel) {
-            me.getLabelEl().innerHTML = `[${me.value}] ` + me.labelText
+            me.getLabelEl().html = `[${me.value}] ` + me.labelText
         }
     }
 }

package/src/form/field/Text.mjs

@@ -594,7 +594,7 @@ class Text extends Field {
             value = `<span class="${me.labelIdCls.join(',')}">${me.labelId}</span>${me.labelIdSeparator + value}`
         }
 
-        me.getLabelEl().innerHTML = value;
+        me.getLabelEl().html = value;
 
         if (!me.hideLabel) {
             if (me.labelPosition === 'inline') {

package/src/form/field/trigger/Base.mjs

@@ -137,10 +137,10 @@ class Base extends Component {
     afterSetIconCls(value, oldValue) {
         let {cls} = this;
 
-        NeoArray.remove(cls, oldValue);
+        NeoArray.remove(cls, oldValue?.split(' '));
 
         if (value && value !== '') {
-            NeoArray.add(cls, value)
+            NeoArray.add(cls, value?.split(' '))
         }
 
         this.cls = cls

package/src/form/field/trigger/SpinUpDown.mjs

@@ -44,8 +44,8 @@ class SpinUpDown extends Base {
         let me = this;
 
         me.vdom.cn = [
-            {cls: ['neo-spin-button', 'neo-up',   me.spinButtonUpIconCls]},
-            {cls: ['neo-spin-button', 'neo-down', me.spinButtonDownIconCls]}
+            {cls: ['neo-spin-button', 'neo-up',   ...me.spinButtonUpIconCls  .split(' ')]},
+            {cls: ['neo-spin-button', 'neo-down', ...me.spinButtonDownIconCls.split(' ')]}
         ];
 
         me.update();

package/src/grid/View.mjs

@@ -522,7 +522,7 @@ class GridView extends Component {
         }
 
         if (Neo.typeOf(rendererOutput) === 'Object') {
-            cellConfig.innerHTML = rendererOutput.html  || ''
+            cellConfig.html = rendererOutput.html  || ''
         } else {
             cellConfig.cn = rendererOutput
         }