neo.mjs 8.9.1 → 8.10.1

package/apps/ServiceWorker.mjs

@@ -20,9 +20,9 @@ class ServiceWorker extends ServiceBase {
          */
         singleton: true,
         /**
-         * @member {String} version='8.9.1'
+         * @member {String} version='8.10.1'
          */
-        version: '8.9.1'
+        version: '8.10.1'
     }
 
     /**

package/apps/portal/index.html

@@ -16,7 +16,7 @@
         "@type": "Organization",
         "name": "Neo.mjs"
       },
-      "datePublished": "2025-01-25",
+      "datePublished": "2025-01-27",
       "publisher": {
         "@type": "Organization",
         "name": "Neo.mjs"

package/apps/portal/view/home/FooterContainer.mjs

@@ -107,7 +107,7 @@ class FooterContainer extends Container {
             }, {
                 module: Component,
                 cls   : ['neo-version'],
-                html  : 'v8.9.1'
+                html  : 'v8.10.1'
             }]
         }],
         /**

package/examples/ServiceWorker.mjs

@@ -20,9 +20,9 @@ class ServiceWorker extends ServiceBase {
          */
         singleton: true,
         /**
-         * @member {String} version='8.9.1'
+         * @member {String} version='8.10.1'
          */
-        version: '8.9.1'
+        version: '8.10.1'
     }
 
     /**

package/examples/grid/container/MainContainer.mjs

@@ -25,8 +25,8 @@ class MainContainer extends ConfigurationViewport {
     }
 
     createConfigurationComponents() {
-        let me     = this,
-            {view} = me.exampleComponent;
+        let me               = this,
+            {selectionModel} = me.exampleComponent.view;
 
         const selectionModelRadioDefaults = {
             module        : Radio,
@@ -46,35 +46,35 @@ class MainContainer extends ConfigurationViewport {
             value    : me.exampleComponent.height
         }, {
             ...selectionModelRadioDefaults,
-            checked       : view.selectionModel.ntype === 'selection-grid-cellmodel',
+            checked       : selectionModel.ntype === 'selection-grid-cellmodel',
             labelText     : 'selectionModel',
-            listeners     : {change: me.onRadioChange.bind(me, 'selectionModel', CellModel)},
+            listeners     : {change: me.onRadioViewChange.bind(me, 'selectionModel', CellModel)},
             style         : {marginTop: '10px'},
             valueLabelText: 'Cell'
         }, {
             ...selectionModelRadioDefaults,
-            checked       : view.selectionModel.ntype === 'selection-grid-columnmodel',
-            listeners     : {change: me.onRadioChange.bind(me, 'selectionModel', ColumnModel)},
+            checked       : selectionModel.ntype === 'selection-grid-columnmodel',
+            listeners     : {change: me.onRadioViewChange.bind(me, 'selectionModel', ColumnModel)},
             valueLabelText: 'Column'
         }, {
             ...selectionModelRadioDefaults,
-            checked       : view.selectionModel.ntype === 'selection-grid-rowmodel',
-            listeners     : {change: me.onRadioChange.bind(me, 'selectionModel', RowModel)},
+            checked       : selectionModel.ntype === 'selection-grid-rowmodel',
+            listeners     : {change: me.onRadioViewChange.bind(me, 'selectionModel', RowModel)},
             valueLabelText: 'Row'
         }, {
             ...selectionModelRadioDefaults,
-            checked       : view.selectionModel.ntype === 'selection-grid-cellcolumnmodel',
-            listeners     : {change: me.onRadioChange.bind(me, 'selectionModel', CellColumnModel)},
+            checked       : selectionModel.ntype === 'selection-grid-cellcolumnmodel',
+            listeners     : {change: me.onRadioViewChange.bind(me, 'selectionModel', CellColumnModel)},
             valueLabelText: 'Cell & Column'
         }, {
             ...selectionModelRadioDefaults,
-            checked       : view.selectionModel.ntype === 'selection-grid-cellrowmodel',
-            listeners     : {change: me.onRadioChange.bind(me, 'selectionModel', CellRowModel)},
+            checked       : selectionModel.ntype === 'selection-grid-cellrowmodel',
+            listeners     : {change: me.onRadioViewChange.bind(me, 'selectionModel', CellRowModel)},
             valueLabelText: 'Cell & Row'
         }, {
             ...selectionModelRadioDefaults,
-            checked       : view.selectionModel.ntype === 'selection-grid-cellcolumnrowmodel',
-            listeners     : {change: me.onRadioChange.bind(me, 'selectionModel', CellColumnRowModel)},
+            checked       : selectionModel.ntype === 'selection-grid-cellcolumnrowmodel',
+            listeners     : {change: me.onRadioViewChange.bind(me, 'selectionModel', CellColumnRowModel)},
             valueLabelText: 'Cell & Column & Row'
         }]
     }
@@ -97,6 +97,10 @@ class MainContainer extends ConfigurationViewport {
 
             viewConfig: {
                 selectionModel: CellModel
+            },
+
+            wrapperStyle: {
+                height: '250px'
             }
         }
     }
@@ -106,7 +110,7 @@ class MainContainer extends ConfigurationViewport {
      * @param {String} value
      * @param {Object} opts
      */
-    onRadioChange(config, value, opts) {
+    onRadioViewChange(config, value, opts) {
         if (opts.value === true) { // we only want to listen to check events, not uncheck
             this.exampleComponent.view[config] = value
         }

package/examples/table/cellEditing/MainContainer.mjs

@@ -44,7 +44,8 @@ class MainContainer extends ConfigurationViewport {
      * @returns {Object[]}
      */
     createConfigurationComponents() {
-        let me = this;
+        let me               = this,
+            {selectionModel} = me.exampleComponent.view;
 
         const selectionModelRadioDefaults = {
             module        : Radio,
@@ -64,25 +65,25 @@ class MainContainer extends ConfigurationViewport {
             value    : me.exampleComponent.height
         }, {
             ...selectionModelRadioDefaults,
-            checked       : me.exampleComponent.selectionModel.ntype === 'selection-table-cellmodel',
+            checked       : selectionModel.ntype === 'selection-table-cellmodel',
             labelText     : 'selectionModel',
-            listeners     : {change: me.onRadioChange.bind(me, 'selectionModel', CellModel)},
+            listeners     : {change: me.onRadioViewChange.bind(me, 'selectionModel', CellModel)},
             style         : {marginTop: '10px'},
             valueLabelText: 'Cell'
         }, {
             ...selectionModelRadioDefaults,
-            checked       : me.exampleComponent.selectionModel.ntype === 'selection-table-cellcolumnmodel',
-            listeners     : {change: me.onRadioChange.bind(me, 'selectionModel', CellColumnModel)},
+            checked       : selectionModel.ntype === 'selection-table-cellcolumnmodel',
+            listeners     : {change: me.onRadioViewChange.bind(me, 'selectionModel', CellColumnModel)},
             valueLabelText: 'Cell & Column'
         }, {
             ...selectionModelRadioDefaults,
-            checked       : me.exampleComponent.selectionModel.ntype === 'selection-table-cellrowmodel',
-            listeners     : {change: me.onRadioChange.bind(me, 'selectionModel', CellRowModel)},
+            checked       : selectionModel.ntype === 'selection-table-cellrowmodel',
+            listeners     : {change: me.onRadioViewChange.bind(me, 'selectionModel', CellRowModel)},
             valueLabelText: 'Cell & Row'
         }, {
             ...selectionModelRadioDefaults,
-            checked       : me.exampleComponent.selectionModel.ntype === 'selection-table-cellcolumnrowmodel',
-            listeners     : {change: me.onRadioChange.bind(me, 'selectionModel', CellColumnRowModel)},
+            checked       : selectionModel.ntype === 'selection-table-cellcolumnrowmodel',
+            listeners     : {change: me.onRadioViewChange.bind(me, 'selectionModel', CellColumnRowModel)},
             valueLabelText: 'Cell & Column & Row'
         }, {
             module        : CheckBox,
@@ -106,12 +107,15 @@ class MainContainer extends ConfigurationViewport {
      */
     createExampleComponent() {
         return {
-            module        : TableContainer,
-            bind          : {store : 'stores.mainStore'},
-            cellEditing   : true,
-            parentId      : this.id,
-            selectionModel: CellModel,
-            store         : MainStore,
+            module     : TableContainer,
+            bind       : {store: 'stores.mainStore'},
+            cellEditing: true,
+            parentId   : this.id,
+            store      : MainStore,
+
+            viewConfig: {
+                selectionModel: CellModel
+            },
 
             columnDefaults: {
                 editable: true
@@ -169,6 +173,17 @@ class MainContainer extends ConfigurationViewport {
     onPluginConfigChange(config, opts) {
         this.exampleComponent.getPlugin('table-cell-editing')[config] = opts.value
     }
+
+    /**
+     * @param {String} config
+     * @param {String} value
+     * @param {Object} opts
+     */
+    onRadioViewChange(config, value, opts) {
+        if (opts.value === true) { // we only want to listen to check events, not uncheck
+            this.exampleComponent.view[config] = value
+        }
+    }
 }
 
 export default Neo.setupClass(MainContainer);

package/examples/table/container/MainContainer.mjs

@@ -27,7 +27,8 @@ class MainContainer extends ConfigurationViewport {
     }
 
     createConfigurationComponents() {
-        let me = this;
+        let me               = this,
+            {selectionModel} = me.exampleComponent.view;
 
         const selectionModelRadioDefaults = {
             module        : Radio,
@@ -47,35 +48,35 @@ class MainContainer extends ConfigurationViewport {
             value    : me.exampleComponent.height
         }, {
             ...selectionModelRadioDefaults,
-            checked       : me.exampleComponent.selectionModel.ntype === 'selection-table-cellmodel',
+            checked       : selectionModel.ntype === 'selection-table-cellmodel',
             labelText     : 'selectionModel',
-            listeners     : {change: me.onRadioChange.bind(me, 'selectionModel', CellModel)},
+            listeners     : {change: me.onRadioViewChange.bind(me, 'selectionModel', CellModel)},
             style         : {marginTop: '10px'},
             valueLabelText: 'Cell'
         }, {
             ...selectionModelRadioDefaults,
-            checked       : me.exampleComponent.selectionModel.ntype === 'selection-table-columnmodel',
-            listeners     : {change: me.onRadioChange.bind(me, 'selectionModel', ColumnModel)},
+            checked       : selectionModel.ntype === 'selection-table-columnmodel',
+            listeners     : {change: me.onRadioViewChange.bind(me, 'selectionModel', ColumnModel)},
             valueLabelText: 'Column'
         }, {
             ...selectionModelRadioDefaults,
-            checked       : me.exampleComponent.selectionModel.ntype === 'selection-table-rowmodel',
-            listeners     : {change: me.onRadioChange.bind(me, 'selectionModel', RowModel)},
+            checked       : selectionModel.ntype === 'selection-table-rowmodel',
+            listeners     : {change: me.onRadioViewChange.bind(me, 'selectionModel', RowModel)},
             valueLabelText: 'Row'
         }, {
             ...selectionModelRadioDefaults,
-            checked       : me.exampleComponent.selectionModel.ntype === 'selection-table-cellcolumnmodel',
-            listeners     : {change: me.onRadioChange.bind(me, 'selectionModel', CellColumnModel)},
+            checked       : selectionModel.ntype === 'selection-table-cellcolumnmodel',
+            listeners     : {change: me.onRadioViewChange.bind(me, 'selectionModel', CellColumnModel)},
             valueLabelText: 'Cell & Column'
         }, {
             ...selectionModelRadioDefaults,
-            checked       : me.exampleComponent.selectionModel.ntype === 'selection-table-cellrowmodel',
-            listeners     : {change: me.onRadioChange.bind(me, 'selectionModel', CellRowModel)},
+            checked       : selectionModel.ntype === 'selection-table-cellrowmodel',
+            listeners     : {change: me.onRadioViewChange.bind(me, 'selectionModel', CellRowModel)},
             valueLabelText: 'Cell & Row'
         }, {
             ...selectionModelRadioDefaults,
-            checked       : me.exampleComponent.selectionModel.ntype === 'selection-table-cellcolumnrowmodel',
-            listeners     : {change: me.onRadioChange.bind(me, 'selectionModel', CellColumnRowModel)},
+            checked       : selectionModel.ntype === 'selection-table-cellcolumnrowmodel',
+            listeners     : {change: me.onRadioViewChange.bind(me, 'selectionModel', CellColumnRowModel)},
             valueLabelText: 'Cell & Column & Row'
         }, {
             module   : Checkbox,
@@ -88,8 +89,8 @@ class MainContainer extends ConfigurationViewport {
             checked  : false,
             labelText: 'Fit width',
             listeners: {
-                change({ value }) {
-                    const { style } = me.exampleComponent;
+                change({value}) {
+                    const {style} = me.exampleComponent;
 
                     if (value) {
                         style.width = '100%';
@@ -100,7 +101,7 @@ class MainContainer extends ConfigurationViewport {
                     }
 
                     me.exampleComponent.style = style;
-                    me.exampleComponent.update();
+                    me.exampleComponent.update()
                 }
             },
             style: {marginTop: '10px'}
@@ -112,9 +113,12 @@ class MainContainer extends ConfigurationViewport {
      */
     createExampleComponent() {
         return Neo.create(TableContainer, {
-            id            : 'myTableStoreContainer',
-            selectionModel: CellModel,
-            store         : MainStore,
+            id   : 'myTableStoreContainer',
+            store: MainStore,
+
+            viewConfig: {
+                selectionModel: CellModel
+            },
 
             columns: [
                 {dataField: 'firstname', text: 'Firstname'},
@@ -180,6 +184,17 @@ class MainContainer extends ConfigurationViewport {
     editButtonHandler(data) {
         console.log(data)
     }
+
+    /**
+     * @param {String} config
+     * @param {String} value
+     * @param {Object} opts
+     */
+    onRadioViewChange(config, value, opts) {
+        if (opts.value === true) { // we only want to listen to check events, not uncheck
+            this.exampleComponent.view[config] = value
+        }
+    }
 }
 
 export default Neo.setupClass(MainContainer);

package/examples/tableFiltering/MainContainer.mjs

@@ -47,9 +47,9 @@ class MainContainer extends Viewport {
         }, {
             module           : TableContainer,
             id               : 'myTableFilterContainer',
-            selectionModel   : CellModel,
             showHeaderFilters: true,
             store            : MainStore,
+            viewConfig       : {selectionModel: CellModel},
             width            : '100%',
             wrapperStyle     : {height: '300px'},
 

package/examples/tableStore/MainContainer.mjs

@@ -60,7 +60,8 @@ class MainContainer extends Viewport {
                     for (; j < repeats; j++) {
                         for (i=0; i < countRecords; i++) {
                             record = store.items[i];
-                            Object.entries(record).forEach(([field, value]) => {
+
+                            Object.entries(record[Symbol.for('data')]).forEach(([field, value]) => {
                                 if (field !== 'githubId') {
                                     if (value.includes(string1)) {
                                         newValue = value.replace(string1, string2);
@@ -72,7 +73,7 @@ class MainContainer extends Viewport {
 
                                     record[field] = newValue; // triggers the change
                                 }
-                            });
+                            })
                         }
                     }
                 }
@@ -110,7 +111,7 @@ class MainContainer extends Viewport {
                 listeners: {
                     change: function(data) {
                         if (data.value) {
-                            Neo.getComponent('myTableStoreContainer').selectionModel = {
+                            Neo.getComponent('myTableStoreContainer').view.selectionModel = {
                                 ntype: this.value
                             };
                         }
@@ -127,7 +128,7 @@ class MainContainer extends Viewport {
                 listeners: {
                     change: function(data) {
                         if (data.value) {
-                            Neo.getComponent('myTableStoreContainer').selectionModel = {
+                            Neo.getComponent('myTableStoreContainer').view.selectionModel = {
                                 ntype: this.value
                             };
                         }
@@ -144,7 +145,7 @@ class MainContainer extends Viewport {
                 listeners: {
                     change: function(data) {
                         if (data.value) {
-                            Neo.getComponent('myTableStoreContainer').selectionModel = {
+                            Neo.getComponent('myTableStoreContainer').view.selectionModel = {
                                 ntype: this.value
                             };
                         }
@@ -161,7 +162,7 @@ class MainContainer extends Viewport {
                 listeners: {
                     change: function(data) {
                         if (data.value) {
-                            Neo.getComponent('myTableStoreContainer').selectionModel = {
+                            Neo.getComponent('myTableStoreContainer').view.selectionModel = {
                                 ntype: this.value
                             };
                         }
@@ -178,7 +179,7 @@ class MainContainer extends Viewport {
                 listeners: {
                     change: function(data) {
                         if (data.value) {
-                            Neo.getComponent('myTableStoreContainer').selectionModel = {
+                            Neo.getComponent('myTableStoreContainer').view.selectionModel = {
                                 ntype: this.value
                             };
                         }
@@ -186,12 +187,12 @@ class MainContainer extends Viewport {
                 }
             }]
         }, {
-            module        : TableContainer,
-            id            : 'myTableStoreContainer',
-            selectionModel: CellModel,
-            store         : MainStore,
-            width         : '100%',
-            wrapperStyle  : {height: '300px'},
+            module      : TableContainer,
+            id          : 'myTableStoreContainer',
+            store       : MainStore,
+            viewConfig  : {selectionModel: CellModel},
+            width       : '100%',
+            wrapperStyle: {height: '300px'},
 
             columns: [{
                 dataField: 'firstname',

package/examples/tableStore/MainModel.mjs

@@ -10,16 +10,16 @@ class MainModel extends Model {
 
         fields: [{
             name: 'country',
-            type: 'string'
+            type: 'html'
         }, {
             name: 'firstname',
-            type: 'string'
+            type: 'html'
         }, {
             name: 'githubId',
             type: 'string'
         }, {
             name: 'lastname',
-            type: 'string'
+            type: 'html'
         }]
     }
 }

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "neo.mjs",
-    "version": "8.9.1",
+    "version": "8.10.1",
     "description": "The webworkers driven UI framework",
     "type": "module",
     "repository": {

package/resources/data/deck/learnneo/pages/benefits/Speed.md

@@ -21,10 +21,10 @@ If you move quickly, you might reach 20,000 or 30,000 delta updates per second.
 second — but we've never actually hit the limit.
 
 <pre data-neo>
-import Base  from '../container/Base.mjs';
-import Helix from '../component/Helix.mjs';
+import Container from '../container/Base.mjs';
+import Helix     from '../component/Helix.mjs';
 
-class MainView extends Base {
+class MainView extends Container {
     static config = {
         className: 'Benefits.speed.MainView',
         layout   : 'fit',

package/resources/scss/src/button/Base.scss

@@ -65,7 +65,7 @@
     .neo-button-glyph {
         color         : var(--button-glyph-color);
         font-size     : 12px;
-        margin        : 0 6px 0 0;
+        margin        : var(--button-glyph-margin);
         pointer-events: none;
         z-index       : 2;
     }

package/resources/scss/src/table/View.scss

@@ -9,8 +9,6 @@
 
     .neo-table-row {
         .neo-table-cell {
-            position: relative;
-
             &.neo-is-modified {
                 &:after {
                     border-color: transparent var(--table-cell-ismodified-color) transparent transparent;

package/resources/scss/src/toolbar/Base.scss

@@ -147,7 +147,7 @@
         .neo-button {
             &.icon-left {
                 .neo-button-glyph {
-                    margin: 0 6px 0 0;
+                    margin: var(--button-glyph-margin);
                 }
             }
         }

package/resources/scss/theme-dark/button/Base.scss

@@ -29,6 +29,7 @@ $text-color      : #bbb;
     --button-glyph-color-active                 : #{$text-color};
     --button-glyph-color-disabled               : #{$text-color};
     --button-glyph-color-hover                  : #{$text-color};
+    --button-glyph-margin                       : 1px 6px 0 0;
     --button-height                             : initial;
     --button-margin                             : 2px;
     --button-opacity-disabled                   : var(--neo-disabled-opacity);

package/resources/scss/theme-light/button/Base.scss

@@ -28,6 +28,7 @@ $text-color      : #1c60a0;
     --button-glyph-color-active                 : #{$text-color};
     --button-glyph-color-disabled               : #{$text-color};
     --button-glyph-color-hover                  : #{$text-color};
+    --button-glyph-margin                       : 1px 6px 0 0;
     --button-height                             : initial;
     --button-margin                             : 2px;
     --button-opacity-disabled                   : var(--neo-disabled-opacity);

package/resources/scss/theme-neo-light/button/Base.scss

@@ -39,6 +39,7 @@
     --button-glyph-color-hover                  : var(--sem-color-text-neutral-reversed);
     --button-glyph-color-active                 : var(--sem-color-text-neutral-reversed);
     --button-glyph-color-disabled               : var(--sem-color-text-neutral-disabled);
+    --button-glyph-margin                       : 1px 6px 0 0;
 
     --button-background-image                   : none;
     --button-background-gradient-end            : #323536;

package/src/DefaultConfig.mjs

@@ -262,12 +262,12 @@ const DefaultConfig = {
     useVdomWorker: true,
     /**
      * buildScripts/injectPackageVersion.mjs will update this value
-     * @default '8.9.1'
+     * @default '8.10.1'
      * @memberOf! module:Neo
      * @name config.version
      * @type String
      */
-    version: '8.9.1'
+    version: '8.10.1'
 };
 
 Object.assign(DefaultConfig, {

package/src/Main.mjs

@@ -213,6 +213,7 @@ class Main extends core.Base {
         }
 
         this.registerAddon(module.default);
+        await this.timeout(20); // Wait until remotes are registered
 
         return true
     }

package/src/component/Base.mjs

@@ -1684,7 +1684,7 @@ class Component extends Base {
      * Convenience shortcut
      * @param {String[]|String} id=this.id
      * @param {String} appName=this.appName
-     * @returns {Promise<Neo.util.Rectangle||Neo.util.Rectangle[]>}
+     * @returns {Promise<Neo.util.Rectangle|Neo.util.Rectangle[]>}
      */
     async getDomRect(id=this.id, appName=this.appName) {
         let result = await Neo.main.DomAccess.getBoundingClientRect({appName, id, windowId: this.windowId});
@@ -1696,42 +1696,6 @@ class Component extends Base {
         return Rectangle.clone(result)
     }
 
-    /**
-     * In case you are sure a DOMRect exists, use getDomRect()
-     * Otherwise you can wait for it using this method.
-     * @example:
-     *     await this.render(true);
-     *     await this.waitForDomRect();
-     * @param {Object}          opts
-     * @param {String}          opts.appName=this.appName
-     * @param {Number}          opts.attempts=10 Reruns in case the rect height or width equals 0
-     * @param {Number}          opts.delay=50    Time in ms before checking again
-     * @param {String[]|String} opts.id=this.id
-     * @returns {Promise<Neo.util.Rectangle||Neo.util.Rectangle[]>}
-     */
-    async waitForDomRect({appName=this.appName, attempts=10, delay=50, id=this.id}) {
-        let me     = this,
-            result = await me.getDomRect(id, appName),
-            reRun  = false;
-
-        if (Array.isArray(result)) {
-            result.forEach(rect => {
-                if (rect.height < 1 || rect.width < 1) {
-                    reRun = true
-                }
-            })
-        } else if (result.height < 1 || result.width < 1) {
-            reRun = true
-        }
-
-        if (reRun && attempts > 0) {
-            await me.timeout(delay);
-            return await me.waitForDomRect({appName, attempts: attempts-1, delay, id})
-        }
-
-        return result
-    }
-
     /**
      * Honors different item roots for mount / render OPs
      * @returns {String}
@@ -2758,6 +2722,42 @@ class Component extends Base {
 
         me.hasUnmountedVdomChanges = !mounted && me.hasBeenMounted
     }
+
+    /**
+     * In case you are sure a DOMRect exists, use getDomRect()
+     * Otherwise you can wait for it using this method.
+     * @example:
+     *     await this.render(true);
+     *     await this.waitForDomRect();
+     * @param {Object}          opts
+     * @param {String}          opts.appName=this.appName
+     * @param {Number}          opts.attempts=10 Reruns in case the rect height or width equals 0
+     * @param {Number}          opts.delay=50    Time in ms before checking again
+     * @param {String[]|String} opts.id=this.id
+     * @returns {Promise<Neo.util.Rectangle|Neo.util.Rectangle[]>}
+     */
+    async waitForDomRect({appName=this.appName, attempts=10, delay=50, id=this.id}) {
+        let me     = this,
+            result = await me.getDomRect(id, appName),
+            reRun  = false;
+
+        if (Array.isArray(result)) {
+            result.forEach(rect => {
+                if (rect.height < 1 || rect.width < 1) {
+                    reRun = true
+                }
+            })
+        } else if (result.height < 1 || result.width < 1) {
+            reRun = true
+        }
+
+        if (reRun && attempts > 0) {
+            await me.timeout(delay);
+            return await me.waitForDomRect({appName, attempts: attempts-1, delay, id})
+        }
+
+        return result
+    }
 }
 
 /**