neo.mjs 10.0.0-alpha.5 → 10.0.0-beta.2

package/src/component/MagicMoveText.mjs

@@ -51,10 +51,6 @@ class MagicMoveText extends Component {
          * @member {String} fontFamily_='Helvetica Neue'
          */
         fontFamily_: 'Helvetica Neue',
-        /**
-         * @member {String} text_=null
-         */
-        text_: null,
         /**
          * Time in ms for the fadeIn, fadeOut and move character OPs
          * @member {Number} transitionTime_=500
@@ -258,11 +254,7 @@ class MagicMoveText extends Component {
             value?.split('').forEach(char => {
                 me.chars.push({name: char});
 
-                if (char === ' ') {
-                    char = ' '
-                }
-
-                measureElement.cn.push({tag: 'span', html: char})
+                measureElement.cn.push({tag: 'span', text: char})
             });
 
             if (me.mounted) {
@@ -301,8 +293,8 @@ class MagicMoveText extends Component {
 
                 charsContainer.push({
                     cls  : ['neo-char'],
-                    html : char.name,
-                    style: {color: me.colorFadeIn, left: char.left, opacity: 0, top: char.top}
+                    style: {color: me.colorFadeIn, left: char.left, opacity: 0, top: char.top},
+                    text : char.name
                 })
             }
         });
@@ -354,7 +346,7 @@ class MagicMoveText extends Component {
             me.chars[index].top  = `${rect.top  - parentRect.top }px`;
         });
 
-        measureWrapper.removeDom = true;
+        //measureWrapper.removeDom = true;
         await me.promiseUpdate()
     }
 
@@ -409,7 +401,7 @@ class MagicMoveText extends Component {
         if (start) {
             me.intervalId = setInterval(me.cycleText.bind(me), me.autoCycleInterval);
 
-            me.timeout(20).then(() => {me.cycleText()});
+            me.timeout(20).then(() => {me.cycleText()})
         } else {
             clearInterval(me.intervalId)
         }
@@ -491,7 +483,7 @@ class MagicMoveText extends Component {
 
         charsContainer.cn.length = 0;
 
-        charsContainer.cn.push({html: me.text});
+        charsContainer.cn.push({text: me.text});
         await me.promiseUpdate();
 
         me.isTransitioning = false

package/src/component/Process.mjs

@@ -169,12 +169,12 @@ class Process extends Base {
             curItem, content;
 
         items.forEach((newItem) => {
-            curItem = Neo.clone(itemLayout, true),
+            curItem = Neo.clone(itemLayout, true);
             content = curItem.cn[3];
 
             content.cn[0].cls.push(newItem.iconCls);
-            content.cn[1].html = newItem.title;
-            content.cn[2].html = newItem.text;
+            content.cn[1].text = newItem.title;
+            content.cn[2].text = newItem.text;
 
             NeoArray.add(vdomRoot.cn, curItem)
         })

package/src/component/Progress.mjs

@@ -84,7 +84,7 @@ class Progress extends Base {
             delete label.removeDom
         }
 
-        label.html = value;
+        label.text = value;
         this.update()
     }
 

package/src/component/StatusBadge.mjs

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

package/src/component/Timer.mjs

@@ -74,7 +74,7 @@ class Timer extends Component {
                             {tag: 'button',cls: 'fa fa-play'}
                         ]},
                         {cls: 'flip-card-back', cn : [
-                            {cls: 'runner', html: '00:00'}
+                            {cls: 'runner', text: '00:00'}
                         ]}
                     ]}
                 ]}
@@ -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.html = value;
+        timer.text = 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.html = value
+        vdom.text = value
     }
 
     /**
@@ -221,8 +221,10 @@ class Toast extends Component {
         let vdom = this.getTextRootVdom().cn[0];
 
         vdom.removeDom = Neo.isEmpty(value);
-        vdom.html      = value;
-        NeoArray[value ? 'add' : 'remove'](vdom.cls, 'neo-toast-has-title')
+        vdom.text      = value;
+        NeoArray.toggle(vdom.cls, 'neo-toast-has-title', value);
+
+        this.update()
     }
 
     /**

package/src/container/AccordionItem.mjs

@@ -78,7 +78,7 @@ class AccordionContainer extends Base {
                 flag   : 'titleEl',
                 ntype  : 'component',
                 baseCls: ['neo-accordion-header-title'],
-                html   : title
+                text   : title
             }, {
                 ntype  : 'component',
                 baseCls: ['neo-accordion-header-arrow'],
@@ -154,7 +154,7 @@ class AccordionContainer extends Base {
         let titleEl = this.down({flag: 'titleEl'});
 
         if (titleEl) {
-            titleEl.html = newValue
+            titleEl.text = newValue
         }
     }
 

package/src/container/Base.mjs

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

package/src/core/Base.mjs

@@ -80,12 +80,28 @@ class Base {
          * @member {String|null} id_=null
          */
         id_: null,
+        /**
+         * An array of remote method names that should be intercepted.
+         * Names used here must be present inside the `remote_` config.
+         * If a remote call for one of these methods arrives, `onInterceptRemotes()` will be called.
+         * @member {String[]|null} interceptRemotes=null
+         * @protected
+         */
+        interceptRemotes: null,
         /**
          * Neo.create() will change this flag to true after the onConstructed() chain is done.
          * @member {Boolean} isConstructed=false
          * @protected
          */
         isConstructed: false,
+        /**
+         * The config will get set to `true` once the Promise of `async initAsync()` is resolved.
+         * You can use `afterSetIsReady()` to get notified once the ready state is reached.
+         * Since not all classes use the Observable mixin, Neo will not fire an event.
+         * method body.
+         * @member {Boolean} isReady=false
+         */
+        isReady_: false,
         /**
          * Add mixins as an array of classNames, imported modules or a mixed version
          * @member {String[]|Neo.core.Base[]|null} mixins=null
@@ -96,7 +112,17 @@ class Base {
          * @member {Class} module=null
          * @protected
          */
-        module: null
+        module: null,
+        /**
+         * Remote method access for other threads. Example use case:
+         * remote: {app: ['myRemoteMethod']}
+         *
+         * ONLY supported for singletons.
+         *
+         * @member {Object|null} remote_=null
+         * @protected
+         */
+        remote_: null
     }
 
     /**
@@ -154,7 +180,11 @@ class Base {
          */
         intercept(me, 'destroy', me.isDestroyedCheck, me);
 
-        me.remote && setTimeout(me.initRemote.bind(me), 1)
+        // Triggers async logic after the construction chain is done.
+        Promise.resolve().then(async () => {
+            await me.initAsync();
+            me.isReady = true
+        })
     }
 
     /**
@@ -181,7 +211,7 @@ class Base {
             if (hasManager) {
                 Neo.manager.Instance.register(me);
             } else {
-                Neo.idMap = Neo.idMap || {};
+                Neo.idMap ??= {};
                 Neo.idMap[me.id] = me
             }
         }
@@ -255,6 +285,24 @@ class Base {
         return value
     }
 
+    /**
+     * Triggered before the remote config gets changed
+     * @param {Object|null} value
+     * @param {Object|null} oldValue
+     * @returns {Object|null}
+     * @protected
+     */
+    beforeSetRemote(value, oldValue) {
+        let me = this;
+
+        // Only allow remote access for singletons or main thread addons
+        if (value && !me.singleton && !me.isMainThreadAddon) {
+            throw new Error('Remote method access is only functional for Singleton classes ' + me.className)
+        }
+
+        return value
+    }
+
     /**
      * @param {String} fn               The name of a function to find in the passed scope object.
      * @param {Object} originName       The name of the method inside the originScope.
@@ -367,11 +415,23 @@ class Base {
 
     /**
      * Gets triggered after onConstructed() is done
-     * @see {@link Neo.core.Base#onConstructed onConstructed}
-     * @tutorial 02_ClassSystem
      */
     init() {}
 
+    /**
+     * You can use this method in subclasses to perform asynchronous initialization logic.
+     * Make sure to use the parent call `await super.initAsync()` at the beginning of their implementations,
+     * or the registration of remote methods will get delayed.
+     *
+     * A common use case is requiring conditional or optional dynamic imports or fetching initial data.
+     *
+     * Once the promise returned by this method is fulfilled, the `isReady` config will be set to `true`.
+     * @returns {Promise<void>} A promise that resolves when the asynchronous initialization is complete.
+     */
+    async initAsync() {
+        this.remote && this.initRemote()
+    }
+
     /**
      * Applies all class configs to this instance
      * @param {Object} config
@@ -393,19 +453,14 @@ class Base {
      * @protected
      */
     initRemote() {
-        let me                  = this,
-            {className, remote} = me,
+        let {className, remote} = this,
             {currentWorker}     = Neo;
 
-        if (!me.singleton && !me.isMainThreadAddon) {
-            throw new Error('Remote method access is only functional for Singleton classes ' + className)
-        }
-
-        if (!Neo.config.unitTestMode && Neo.isObject(remote)) {
+        if (!Neo.config.unitTestMode) {
             if (Neo.workerId !== 'main' && currentWorker.isSharedWorker && !currentWorker.isConnected) {
                 currentWorker.on('connected', () => {
                     Base.sendRemotes(className, remote)
-                }, me, {once: true})
+                }, this, {once: true})
             } else {
                 Base.sendRemotes(className, remote)
             }
@@ -456,10 +511,18 @@ class Base {
 
     /**
      * Gets triggered after all constructors are done
-     * @tutorial 02_ClassSystem
      */
     onConstructed() {}
 
+    /**
+     * Placeholder method for intercepting remote calls.
+     * Subclasses can override this method to implement custom interception logic.
+     * @param {Object} msg The remote message object.
+     */
+    onInterceptRemotes(msg) {
+        // No-op in base class
+    }
+
     /**
      * Helper method to replace string based values containing "@config:" with the matching config value
      * of this instance.

package/src/core/Util.mjs

@@ -175,7 +175,18 @@ class Util extends Base {
      * @returns {Boolean}
      */
     static isObject(value) {
-        return value?.constructor?.name === 'Object' || false
+        return value?.constructor?.name === 'Object'
+    }
+
+    /**
+     * Returns true if the passed value is a promise.
+     * We are intentionally not checking for `value instanceof Promise`,
+     * to support any "thenable" objects for flexibility.
+     * @param {Object} value The value to test
+     * @returns {Boolean}
+     */
+    static isPromise(value) {
+        return typeof value?.then === 'function'
     }
 
     /**
@@ -184,7 +195,7 @@ class Util extends Base {
      * @returns {Boolean}
      */
     static isRecord(value) {
-        return value?.constructor?.name === 'Record' || false
+        return value?.constructor?.name === 'Record'
     }
 
     /**
@@ -233,6 +244,7 @@ Neo.applyFromNs(Neo, Util, {
     isFunction       : 'isFunction',
     isNumber         : 'isNumber',
     isObject         : 'isObject',
+    isPromise        : 'isPromise',
     isRecord         : 'isRecord',
     isString         : 'isString',
     toArray          : 'toArray'

package/src/date/DayViewComponent.mjs

@@ -104,7 +104,7 @@ class DayViewComponent extends Base {
         for (; i < len; i++) {
             config =
             {cls: ['neo-cell'], cn: [
-                {cls : ['neo-cell-content'], html: me.intlFormatDay.format(date)}
+                {cls : ['neo-cell-content'], text: me.intlFormatDay.format(date)}
             ]};
 
             day = date.getDay();
@@ -168,7 +168,7 @@ class DayViewComponent extends Base {
                     tabIndex: hasContent ? -1 : null,
                     cn: [{
                         cls : ['neo-cell-content'],
-                        html: hasContent ? day : me.showDisabledDays ? date.getDate() : ''
+                        text: hasContent ? day : me.showDisabledDays ? date.getDate() : ''
                     }]
                 };
 

package/src/date/SelectorContainer.mjs

@@ -332,7 +332,7 @@ class SelectorContainer extends Container {
             for (; i < 7; i++) {
                 node = centerEl.cn[i];
 
-                node.cn[0].html = me.intlFormatDay.format(date);
+                node.cn[0].text = me.intlFormatDay.format(date);
 
                 day = date.getDay();
 

package/src/draggable/grid/header/toolbar/SortZone.mjs

@@ -54,15 +54,15 @@ class SortZone extends BaseSortZone {
 
         let me            = this,
             grid          = me.owner.parent,
-            {view}        = grid,
-            gridRows      = view.getVdomRoot().cn,
+            {body}        = grid,
+            bodyWrapperId = Neo.getId('grid-body-wrapper'),
+            gridRows      = body.getVdomRoot().cn,
             columnIndex   = me.dragElement['aria-colindex'] - 1,
-            {dataField}   = view.columnPositions.getAt(columnIndex),
-            cells         = view.getColumnCells(dataField),
+            {dataField}   = body.columnPositions.getAt(columnIndex),
+            cells         = body.getColumnCells(dataField),
             rows          = [],
             config        = await super.createDragProxy(data, false),
             rect          = await grid.getDomRect(),
-            viewWrapperId = Neo.getId('grid-view-wrapper'),
             row;
 
         config.cls = ['neo-grid-wrapper', me.owner.getTheme()];
@@ -85,9 +85,9 @@ class SortZone extends BaseSortZone {
         {cn: [
             {cls: ['neo-grid-container'], cn: [
                 {...config.vdom, cls: ['neo-grid-header-toolbar', 'neo-toolbar']},
-                {cls: ['neo-grid-view-wrapper'], id: viewWrapperId, cn: [
-                    {cls: ['neo-grid-view'], cn: rows},
-                    {cls: ['neo-grid-scrollbar'], style: {height: view.vdom.cn[0].height}}
+                {cls: ['neo-grid-body-wrapper'], id: bodyWrapperId, cn: [
+                    {cls: ['neo-grid-body'], cn: rows},
+                    {cls: ['neo-grid-scrollbar'], style: {height: body.vdom.cn[0].height}}
                 ]}
             ]}
         ]};
@@ -95,8 +95,8 @@ class SortZone extends BaseSortZone {
         config.listeners = {
             mounted() {
                 Neo.main.DomAccess.scrollTo({
-                    id      : viewWrapperId,
-                    value   : view.scrollTop,
+                    id      : bodyWrapperId,
+                    value   : body.scrollTop,
                     windowId: this.windowId
                 })
             }
@@ -133,11 +133,11 @@ class SortZone extends BaseSortZone {
         owner.updateDepth = 2;
         owner.update();
 
-        await owner.passSizeToView();
+        await owner.passSizeToBody();
 
         await this.timeout(20);
 
-        owner.parent.view.createViewData()
+        owner.parent.body.createViewData()
     }
 
     /**
@@ -148,11 +148,11 @@ class SortZone extends BaseSortZone {
 
         if (this.moveColumnContent) {
             let me             = this,
-                {view}         = me.owner.parent,
+                {body}         = me.owner.parent,
                 columnIndex    = me.dragElement['aria-colindex'] - 1,
-                columnPosition = view.columnPositions.getAt(columnIndex),
+                columnPosition = body.columnPositions.getAt(columnIndex),
                 {dataField}    = columnPosition,
-                cells          = view.getColumnCells(dataField);
+                cells          = body.getColumnCells(dataField);
 
             columnPosition.hidden = true;
 
@@ -160,7 +160,7 @@ class SortZone extends BaseSortZone {
                 cell.style.visibility = 'hidden'
             });
 
-            view.update()
+            body.update()
         }
     }
 
@@ -174,12 +174,12 @@ class SortZone extends BaseSortZone {
         if (this.moveColumnContent) {
             let me                = this,
                 {itemRects}       = me,
-                {view}            = me.owner.parent,
-                {columnPositions} = view,
+                {body}            = me.owner.parent,
+                {columnPositions} = body,
                 column1Position   = columnPositions.getAt(index1),
                 column2Position   = columnPositions.getAt(index2),
-                column1Cells      = view.getColumnCells(column1Position.dataField),
-                column2Cells      = view.getColumnCells(column2Position.dataField);
+                column1Cells      = body.getColumnCells(column1Position.dataField),
+                column2Cells      = body.getColumnCells(column2Position.dataField);
 
             Object.assign(column1Position, {
                 width: itemRects[index2].width,
@@ -203,7 +203,7 @@ class SortZone extends BaseSortZone {
                 node.style.width = column2Position.width + 'px'
             });
 
-            view.update()
+            body.update()
         }
     }
 }

package/src/draggable/table/header/toolbar/SortZone.mjs

@@ -63,7 +63,7 @@ class SortZone extends BaseSortZone {
         owner.updateDepth = 2;
         owner.update();
 
-        owner.parent.view.createViewData()
+        owner.parent.body.createViewData()
     }
 }
 

package/src/form/field/CheckBox.mjs

@@ -397,7 +397,7 @@ class CheckBox extends Field {
             showLabel  = !!value; // hide the label, in case value === null || value === ''
 
         if (showLabel) {
-            valueLabel.html = value
+            valueLabel.text = value
         }
 
         valueLabel.removeDom = !showLabel;
@@ -582,16 +582,16 @@ class CheckBox extends Field {
         if (!(me.clean && !me.mounted)) {
             me._error = value; // silent update
 
-            NeoArray[value ? 'add' : 'remove'](cls, 'neo-invalid');
+            NeoArray.toggle(cls, 'neo-invalid', value);
             me.cls = cls;
 
             errorWrapper = me.vdom.cn[1];
             errorNode    = errorWrapper.cn[0];
 
             if (showError) {
-                errorNode.html = value
+                errorNode.text = value
             } else {
-                delete errorNode.html
+                delete errorNode.text
             }
 
             errorWrapper.removeDom = !showError;