neo.mjs 9.16.0 → 10.0.0-alpha.1

package/resources/data/deck/learnneo/pages/guides/events/DomEvents.md

@@ -44,14 +44,14 @@ class MainView extends Container {
         style    : {padding: '1em'},
 
         items: [{
-            vdom: {tag: 'button', innerHTML: 'Button 1'},
+            vdom: {tag: 'button', html: 'Button 1'},
 
             domListeners: [{
                 click: data => Neo.Main.log({value: `Clicked on ${data.component.id}`})
             }]
         }, {
             style: {marginTop: '1em'},
-            vdom : {tag: 'button', innerHTML: 'Button 2'},
+            vdom : {tag: 'button', html: 'Button 2'},
 
             domListeners: [{
                 click(data) {
@@ -82,7 +82,7 @@ class MainView extends Container {
         style    : {padding: '1em'},
 
         items: [{
-            vdom: {tag: 'button', innerHTML: 'Button 1'},
+            vdom: {tag: 'button', html: 'Button 1'},
 
             domListeners: [{
                 click: 'up.onButtonClick'
@@ -129,7 +129,7 @@ class MainView extends Container {
         style     : {padding: '1em'},
 
         items: [{
-            vdom: {tag: 'button', innerHTML: 'Button 1'},
+            vdom: {tag: 'button', html: 'Button 1'},
 
             domListeners: [{
                 click: 'onButtonClick'
@@ -247,7 +247,7 @@ class MainView extends Container {
         style    : {padding: '1em'},
 
         items: [{
-            vdom : {tag: 'button', innerHTML: 'Button 1'},
+            vdom : {tag: 'button', html: 'Button 1'},
 
             domListeners: [
                 {click: data => Neo.Main.log({value: 'Listener 1'})},

package/resources/data/deck/training/pages/2022-12-27T21-55-23-144Z.md

@@ -27,13 +27,13 @@ class MainContainer extends Viewport {
                     iconCls: 'fa fa-home',
                     text: 'Tab 1'
                 },
-                vdom: { innerHTML: 'Welcome to your new Neo App.' }
+                vdom: { html: 'Welcome to your new Neo App.' }
             }, {
                 header: {
                     iconCls: 'fa fa-play-circle',
                     text: 'Tab 2'
                 },
-                vdom: { innerHTML: 'Have fun creating something awesome!' }
+                vdom: { html: 'Have fun creating something awesome!' }
             }]
         }]
     }

package/resources/data/deck/training/pages/2022-12-29T18-36-08-226Z.md

@@ -37,7 +37,7 @@ Now add a new tab:
             iconCls: 'fa fa-home',
             text: 'Hi there!'
         },
-        vdom: { innerHTML: 'Yet another tab.' }
+        vdom: { html: 'Yet another tab.' }
     })
 
 ??Enable the Ctrl-right-click debugger

package/resources/data/deck/training/pages/2022-12-29T18-36-56-893Z.md

@@ -85,7 +85,7 @@ class MainContainer extends Viewport {
                     text: 'Tab 1'
                 },
                 vdom: {
-                    innerHTML: 'Welcome to your new Neo App.'
+                    html: 'Welcome to your new Neo App.'
                 }
             }, {
                 header: {
@@ -93,7 +93,7 @@ class MainContainer extends Viewport {
                     text: 'Tab 2'
                 },
                 vdom: {
-                    innerHTML: 'Have fun creating something awesome!'
+                    html: 'Have fun creating something awesome!'
                 }
             }]
         }],

package/resources/data/deck/training/pages/2022-12-29T20-37-08-919Z.md

@@ -30,13 +30,13 @@ class MainContainer extends Viewport {
                     iconCls: 'fa fa-home',
                     text: 'Tab 1'
                 },
-                vdom: { innerHTML: 'Welcome to your new Neo App.' }
+                vdom: { html: 'Welcome to your new Neo App.' }
             }, {
                 header: {
                     iconCls: 'fa fa-play-circle',
                     text: 'Tab 2'
                 },
-                vdom: { innerHTML: 'Have fun creating something awesome!' }
+                vdom: { html: 'Have fun creating something awesome!' }
             }]
         }]
     }

package/resources/data/deck/training/pages/2022-12-29T20-37-20-344Z.md

@@ -27,13 +27,13 @@ class MainContainer extends Viewport {
                     iconCls: 'fa fa-home',
                     text: 'Tab 1'
                 },
-                vdom: { innerHTML: 'Welcome to your new Neo App.' }
+                vdom: { html: 'Welcome to your new Neo App.' }
             }, {
                 header: {
                     iconCls: 'fa fa-play-circle',
                     text: 'Tab 2'
                 },
-                vdom: { innerHTML: 'Have fun creating something awesome!' }
+                vdom: { html: 'Have fun creating something awesome!' }
             }]
         }]
     }

package/resources/data/deck/training/pages/2023-01-13T21-48-17-258Z.md

@@ -8,13 +8,13 @@ name_: '',
 _vdom: {
     tag: 'div',
     style: 'fontWeight:bold',
-    innerHTML: ''
+    html: ''
 }
 
 ...
 
 afterSetName(name, oldName) {
-    this.vdom.innerHTML = name;
+    this.vdom.html = name;
     this.update();
 }
 </pre>

package/resources/data/deck/training/pages/2023-02-05T17-44-53-815Z.md

@@ -27,8 +27,8 @@ in the `afterSetBusiness()` method.
         },    
         vdom: {
             cn: [{
-                tag: 'h2',
-                innerHTML: 'foo'
+                tag : 'h2',
+                html: 'foo'
             }]
         }
     }, {
@@ -47,14 +47,14 @@ Change the detail view's `afterSetBusiness()` method to update the `vdom`.
     afterSetBusiness(business){
         if (!business) return;
         const view = this.getReference('view');
-        view.vdom.cn[0].innerHTML = business.title;
+        view.vdom.cn[0].html = business.title;
         view.update();
     }
 
 <b>Important: </b>The `update()` method tells Neo to apply vdom changes to the DOM.
 Any time you change a set of vdom properties you need to run `update()`.
 
-You don't need the first item's `innerHTML:'foo'` property any more, so you can 
+You don't need the first item's `html:'foo'` property any more, so you can 
 remove that from the first item's config.
 
 Save, refresh, and confirm that the title is shown as the business is set.
@@ -76,8 +76,8 @@ The util method lets you find the node using the id (or using a more complex sel
 Use the utility method, replacing the statement referencing the vdom hierarchy.
 
 <pre>
-    <s>view.vdom.cn[0].innerHTML = business.title;</s>
-    Neo.util.VDom.find(view.vdom, 'title').vdom.innerHTML = business.title;
+    <s>view.vdom.cn[0].html = business.title;</s>
+    Neo.util.VDom.find(view.vdom, 'title').vdom.html = business.title;
 </pre>
 
 
@@ -96,7 +96,7 @@ find = Neo.util.VDom.find;
 afterSetBusiness(business){
     if (!business) return;
     const view = this.getReference('view');
-    this.find(view.vdom, 'title').vdom.innerHTML = business.title;
+    this.find(view.vdom, 'title').vdom.html = business.title;
     view.update();
 }
 </pre>
@@ -173,7 +173,7 @@ be a div that shows the address.
 
 Then modify the `afterSetBusiness()` method to update the _address_ element's
 `cn` to be an array of items, one per item in the address array. Each item should
-be a _div_ with its `innerHTML` set to that part of the address.
+be a _div_ with its `html` set to that part of the address.
 
 Hint: The business record's `address` property is an array, and the `cn` is 
 also an array. Maybe there's a easy way to map the address array into a new
@@ -186,7 +186,7 @@ Here's one way to code it. How does this compare to your solution?
 
     this.find(view.vdom, 'address').vdom.cn = business
         .address
-        .map(item => ({tag: 'div', innerHTML: item}));
+        .map(item => ({tag: 'div', html: item}));
 
 ??One last point...
 

package/resources/data/deck/training/pages/2023-10-14T19-25-08-153Z.md

@@ -98,7 +98,7 @@ item in our container. In Neo.mjs terms we're _configuring_ the button. Neo.mjs
 which components and objects are _described_. It's an abstraction. In other words we're saying 
 what we want, but not how it's done. We want a button with some text — how that's done
 isn't important here in the container. A non-declarative approach would be more focused on _how_,
-where you might way "I want a <button> HTML element with its innerHTML set to some value." 
+where you might way "I want a <button> HTML element with its html set to some value." 
 
 In another topic you'll learn about the Neo.mjs config system and declaratively describing
 views, controllers, and other things.

package/src/DefaultConfig.mjs

@@ -246,6 +246,18 @@ const DefaultConfig = {
      * @type Boolean
      */
     useSharedWorkers: false,
+    /**
+     * `true` will let the `vdom.Helper` create a String-based representation of the vnode tree.
+     * Main will then use e.g.`parentNode.insertAdjacentHTML('beforeend', delta.outerHTML);`
+     * This affects the initial painting of your apps, but also the creation of new component trees at run-time.
+     * `false` will skip the creation of the String, and instead use DOM APIs to generate a fragment inside Main,
+     * into which the vnode tree will get applied.
+     * @default false
+     * @memberOf! module:Neo
+     * @name config.useStringBasedMounting
+     * @type Boolean
+     */
+    useStringBasedMounting: false,
     /**
      * True will generate a new task worker, which can get filled with own expensive remote methods
      * @default false
@@ -264,12 +276,12 @@ const DefaultConfig = {
     useVdomWorker: true,
     /**
      * buildScripts/injectPackageVersion.mjs will update this value
-     * @default '9.16.0'
+     * @default '10.0.0-alpha.1'
      * @memberOf! module:Neo
      * @name config.version
      * @type String
      */
-    version: '9.16.0'
+    version: '10.0.0-alpha.1'
 };
 
 Object.assign(DefaultConfig, {

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
         }