neo.mjs 6.10.3 → 6.10.4

package/apps/ServiceWorker.mjs

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

package/apps/learnneo/view/LivePreview.mjs

@@ -1,6 +1,6 @@
-import Base from '../../../src/container/Base.mjs';
+import Base         from '../../../src/container/Base.mjs';
 import TabContainer from '../../../src/tab/Container.mjs';
-import TextArea from '../../../src/form/field/TextArea.mjs';
+import TextArea     from '../../../src/form/field/TextArea.mjs';
 
 /**
  * @class LearnNeo.view.LivePreview
@@ -22,7 +22,9 @@ class LivePreview extends Base {
          * @member {Object[]} items
          */
         items: [{
-            module: TabContainer,
+            module   : TabContainer,
+            reference: 'tab-container',
+
             items: [{
                 module: TextArea,
                 hideLabel: true,
@@ -38,15 +40,7 @@ class LivePreview extends Base {
                 reference: 'preview',
                 ntype: 'container'
             }]
-        }],
-        listeners: {
-            activeIndexChange: () => console.log('activeIndexChange')
-        }
-    }
-    onConstructed() {
-        console.log('constructed');
-        this.on('activeIndexChange', () => console.log('onConstructed'));
-        super.onConstructed();
+        }]
     }
 
     afterSetValue(value, oldValue) {
@@ -55,6 +49,14 @@ class LivePreview extends Base {
         }
     }
 
+    onConstructed() {
+        super.onConstructed();
+
+        let me = this;
+
+        me.getReference('tab-container').on('activeIndexChange', me.onActiveIndexChange, me)
+    }
+
     doIt(button) {
         let source = this.getReference('source').getValue();
 
@@ -92,7 +94,7 @@ class LivePreview extends Base {
         });
         var params = [];
         var vars = [];
-        // Figure out the parts of the source we'll be running. 
+        // Figure out the parts of the source we'll be running.
         // o The promises/import() corresponding to the user's import statements
         // o The vars holding the name of the imported module based on the module name for each import
         // o The rest of the user-provided source
@@ -105,8 +107,8 @@ class LivePreview extends Base {
         //       const Button = ButtonModule.default;
         //       // Class declaration goes here...
         //   });
-        // Making the promise part of the eval seems weird, but it made it easier to 
-        // set up the import vars. 
+        // Making the promise part of the eval seems weird, but it made it easier to
+        // set up the import vars.
 
         let promises = moduleNameAndPath.map(item => {
             params.push(`${item.moduleName}Module`);
@@ -164,6 +166,17 @@ class LivePreview extends Base {
         }
         return null
     }
+
+    /**
+     * @param {Object} data
+     * @param {Neo.component.Base} data.item
+     * @param {Number} data.oldValue
+     * @param {String} data.source
+     * @param {Number} data.value
+     */
+    onActiveIndexChange(data) {
+        console.log('onActiveIndexChange', data)
+    }
 }
 
 Neo.applyClassConfig(LivePreview);

package/apps/learnneo/view/home/HeaderToolbar.mjs

@@ -25,19 +25,29 @@ class HeaderToolbar extends Base {
             text  : 'neo.mjs'
         }, '->', {
             text: 'Docs',
-            ui  : 'tertiary'
+            ui  : 'ghost'
         }, {
             text: 'Learn',
-            ui  : 'tertiary'
+            ui  : 'ghost'
         }, {
             cls    : ['github-button'],
             iconCls: 'fa-brands fa-github',
-            ui     : 'tertiary',
-            url    : 'https://github.com/neomjs/neo'
+            ui     : 'ghost',
+            url    : 'https://github.com/neomjs/neo',
+            tooltip: {
+                html: 'GitHub',
+                showDelay: '0',
+                hideDelay: '0'
+            }
         }, {
             iconCls: 'fa-brands fa-slack',
-            ui     : 'tertiary',
-            url    : 'https://join.slack.com/t/neomjs/shared_invite/zt-6c50ueeu-3E1~M4T9xkNnb~M_prEEOA'
+            ui     : 'ghost',
+            url    : 'https://join.slack.com/t/neomjs/shared_invite/zt-6c50ueeu-3E1~M4T9xkNnb~M_prEEOA',
+            tooltip: {
+                html: 'Join Slack',
+                showDelay: '0',
+                hideDelay: '0'
+            }
         }]
     }
 }

package/examples/ServiceWorker.mjs

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

package/package.json

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

package/resources/data/deck/learnneo/p/stylesheet.md

@@ -18,7 +18,6 @@ and information is lost.
 <br>
 
 To show highlighted Neo.mjs source code use
-<pre>
 &lt;pre data-javascript>
 // Source code goes here
 &lt;/pre>
@@ -52,3 +51,7 @@ This is the item contents.
 This is the item contents.
 </details>
 
+<pre data-neo>
+let a = 1;
+</pre>
+

package/resources/design-tokens/json/component.json

@@ -319,6 +319,28 @@
           }
         }
       }
+    },
+    "tooltip": {
+      "height": {
+        "value": "{height.24}",
+        "type": "sizing"
+      },
+      "spacinghorizontal": {
+        "value": "{sem.spacing.xsmall}",
+        "type": "spacing"
+      },
+      "fg": {
+        "value": "{sem.color.fg.neutral.inverted}",
+        "type": "color"
+      },
+      "bg": {
+        "value": "{sem.color.bg.neutral.contrast}",
+        "type": "color"
+      },
+      "borderradius": {
+        "value": "{sem.borderradius.medium}",
+        "type": "borderRadius"
+      }
     }
   }
 }

package/resources/design-tokens/json/core.json

@@ -257,6 +257,10 @@
       "value": "16px",
       "type": "sizing"
     },
+    "24": {
+      "value": "24px",
+      "type": "sizing"
+    },
     "32": {
       "value": "32px",
       "type": "sizing"

package/resources/design-tokens/json/semantic.json

@@ -40,6 +40,10 @@
           "disabled": {
             "value": "{gray.200}",
             "type": "color"
+          },
+          "contrast": {
+            "value": "{gray.900}",
+            "type": "color"
           }
         },
         "primary": {
@@ -82,6 +86,10 @@
           "disabled": {
             "value": "{gray.300}",
             "type": "color"
+          },
+          "inverted": {
+            "value": "{white}",
+            "type": "color"
           }
         },
         "primary": {

package/resources/scss/src/tooltip/Base.scss

@@ -1,7 +1,11 @@
 .neo-tooltip {
-    border    : 1px solid #0d86e7;
-    box-shadow: 3px 3px 4px rgba(0,0,0, .6);
-    font-size : 13px;
-    padding   : 5px 10px;
-    position  : absolute;
-}
+    background-color: var(--tooltip-bg);
+    border          : var(--tooltip-border);
+    border-radius   : var(--tooltip-borderradius);
+    box-shadow      : var(--tooltip-boxshadow);
+    color           : var(--tooltip-color);
+    font-size       : var(--tooltip-fontsize);
+    height          : var(--tooltip-height);
+    padding         : var(--tooltip-padding);
+    position        : absolute;
+}

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

@@ -0,0 +1,10 @@
+:root .neo-theme-neo-light { // .neo-tooltip
+    --tooltip-bg            : black;
+    --tooltip-border        : grey;
+    --tooltip-borderradius  : 4px;
+    --tooltip-boxshadow     : none;
+    --tooltip-color         : white;
+    --tooltip-fontsize      : 14px;
+    --tooltip-height        : 24px;
+    --tooltip-padding       : 2px 8px 0;
+}

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

@@ -0,0 +1,10 @@
+:root .neo-theme-neo-light { // .neo-tooltip
+    --tooltip-bg            : white;
+    --tooltip-border        : lightgrey;
+    --tooltip-borderradius  : 4px;
+    --tooltip-boxshadow     : none;
+    --tooltip-color         : black;
+    --tooltip-fontsize      : 14px;
+    --tooltip-height        : 24px;
+    --tooltip-padding       : 2px 8px 0;
+}

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

@@ -45,28 +45,28 @@ $border-width    : 1px;
     --button-use-gradients                      : false;
 
     // {module: Button; ui: --ghost}
-    --button-ghost-background-color             : var(--button-text-color);
-    --button-ghost-background-color-active      : #{$border-color};
-    --button-ghost-background-color-disabled    : inherit;
-    --button-ghost-background-color-hover       : var(--button-text-color);
+    --button-ghost-background-color             : var(--cmp-button-ghost-bg-default);
+    --button-ghost-background-color-active      : var(--cmp-button-ghost-bg-active);
+    --button-ghost-background-color-disabled    : var(--cmp-button-ghost-bg-disabled);
+    --button-ghost-background-color-hover       : var(--cmp-button-ghost-bg-hover);
     --button-ghost-background-image             : none;
-    --button-ghost-badge-background-color       : var(--button-badge-color);
-    --button-ghost-badge-color                  : var(--button-badge-background-color);
-    --button-ghost-border                       : #{$border-width} #{$border-style} var(--button-background-color);
-    --button-ghost-border-active                : #{$border-width} #{$border-style} #{$border-color};
+    --button-ghost-badge-background-color       : transparent;
+    --button-ghost-badge-color                  : transparent;
+    --button-ghost-border                       : none;
+    --button-ghost-border-active                : none;
     --button-ghost-border-disabled              : inherit;
-    --button-ghost-border-hover                 : #{$border-width} #{$border-style} #{$text-color};
-    --button-ghost-border-pressed               : #{$border-width} #{$border-style} #{$text-color};
-    --button-ghost-glyph-color                  : var(--button-background-color);
-    --button-ghost-glyph-color-active           : var(--button-background-color);
-    --button-ghost-glyph-color-disabled         : inherit;
-    --button-ghost-glyph-color-hover            : var(--button-background-color);
-    --button-ghost-opacity-disabled             : var(--neo-disabled-opacity);
+    --button-ghost-border-hover                 : none;
+    --button-ghost-border-pressed               : none;
+    --button-ghost-glyph-color                  : var(--cmp-button-ghost-fg-default);
+    --button-ghost-glyph-color-active           : inherit;
+    --button-ghost-glyph-color-disabled         : var(--cmp-button-ghost-fg-disabled);
+    --button-ghost-glyph-color-hover            : inherit;
+    --button-ghost-opacity-disabled             : inherit;
     --button-ghost-ripple-background-color      : inherit;
-    --button-ghost-text-color                   : var(--button-background-color);
-    --button-ghost-text-color-active            : var(--button-background-color);
-    --button-ghost-text-color-disabled          : inherit;
-    --button-ghost-text-color-hover             : var(--button-background-color);
+    --button-ghost-text-color                   : var(--cmp-button-ghost-fg-default);
+    --button-ghost-text-color-active            : inherit;
+    --button-ghost-text-color-disabled          : var(--cmp-button-ghost-fg-disabled);
+    --button-ghost-text-color-hover             : inherit;
 
     // {module: Button; ui: --secondary}
     --button-secondary-background-color         : var(--cmp-button-secondary-bg-default);
@@ -116,3 +116,7 @@ $border-width    : 1px;
     --button-tertiary-text-color-disabled       : inherit;
     --button-tertiary-text-color-hover          : var(--button-text-color);
 }
+
+.neo-button {
+    min-width: var(--cmp-button-height);
+}

package/resources/scss/theme-neo-light/design-tokens/Component.scss

@@ -70,4 +70,10 @@
     --cmp-tab-unselected-bg-active              : var(--sem-color-bg-neutral-active);
     --cmp-tab-unselected-bg-default             : transparent;
     --cmp-tab-unselected-bg-hover               : var(--sem-color-bg-neutral-hover);
+
+    --cmp-tooltip-bg                            : var(--sem-color-bg-neutral-contrast);
+    --cmp-tooltip-borderradius                  : var(--sem-borderradius-medium);
+    --cmp-tooltip-fg                            : var(--sem-color-fg-neutral-inverted);
+    --cmp-tooltip-height                        : var(--height-24);
+    --cmp-tooltip-spacinghorizontal             : var(--sem-spacing-xsmall);
 }

package/resources/scss/theme-neo-light/design-tokens/Core.scss

@@ -6,6 +6,7 @@
     --core-fontfamily-mono     : 'Source Code Pro';
     --core-fontfamily-sans     : 'Source Sans 3';
     --core-fontfamily-serif    : 'Source Serif Pro';
+    --core-fontsize-label      : 1rem;
     --core-fontsize-body       : 16px;
     --core-fontsize-h1         : 2.5rem;
     --core-fontsize-h2         : 1.75rem;
@@ -42,6 +43,7 @@
     --height-48                : 48px;
     --height-56                : 56px;
     --height-8                 : 8px;
+    --height-24                : 24px;
     --purple-100               : #efe3ff;
     --purple-200               : #d0aaff;
     --purple-300               : #b071ff;

package/resources/scss/theme-neo-light/design-tokens/Semantic.scss

@@ -3,11 +3,11 @@
     --sem-borderradius-medium                                           : var(--borderradius-4);
     --sem-borderradius-none                                             : var(--borderradius-0);
     --sem-borderwidth-focus                                             : 3px;
-    --sem-color-bg-neutral-active                                       : var(--gray-300);
+    --sem-color-bg-neutral-active                                       : rgba(0, 0, 0, .1);
     --sem-color-bg-neutral-default                                      : var(--gray-50);
     --sem-color-bg-neutral-disabled                                     : var(--gray-200);
     --sem-color-bg-neutral-highlighted                                  : var(--white);
-    --sem-color-bg-neutral-hover                                        : var(--gray-200);
+    --sem-color-bg-neutral-hover                                        :rgba(0, 0, 0, .05);
     --sem-color-bg-primary-active                                       : var(--green-600);
     --sem-color-bg-primary-background                                   : var(--green-50);
     --sem-color-bg-primary-default                                      : var(--green-400);
@@ -64,4 +64,6 @@
     --sem-typo-label-regular-fontFamily                                 : var(--core-fontfamily-sans);
     --sem-typo-label-regular-fontSize                                   : var(--core-fontsize-body);
     --sem-typo-label-regular-fontWeight                                 : var(--core-fontweight-regular);
+    --sem-color-bg-neutral-contrast                                     : var(--gray-900);
+    --sem-color-fg-neutral-inverted                                     : var(--white);
 }

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

@@ -0,0 +1,13 @@
+:root .neo-theme-neo-light { // .neo-tooltip
+    --tooltip-bg            : var(--cmp-tooltip-bg);
+    --tooltip-border        : none;
+    --tooltip-borderradius  : var(--cmp-tooltip-borderradius);
+    --tooltip-boxshadow     : none;
+    --tooltip-color         : var(--cmp-tooltip-fg);
+    --tooltip-fontsize      : 14px;
+    --tooltip-height        : var(--cmp-tooltip-height);
+    --tooltip-padding       : 2px var(--cmp-tooltip-spacinghorizontal) 0;
+}
+
+
+// 3px 3px 4px rgba(0,0,0, .6);

package/src/DefaultConfig.mjs

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

package/src/Main.mjs

@@ -454,7 +454,7 @@ class Main extends core.Base {
      * @param {String} data.y
      */
     windowMoveTo(data) {
-        this.openWindows[data.windowName].moveTo(data.x, data.y);
+        this.openWindows[data.windowName]?.moveTo(data.x, data.y);
     }
 
     /**

package/src/core/Observable.mjs

@@ -91,6 +91,21 @@ class Observable extends Base {
         return null;
     }
 
+    /**
+     * Call the passed function, or a function by *name* which exists in the passed scope's
+     * or this component's ownership chain.
+     * @param {Function|String} fn A function, or the name of a function to find in the passed scope object/
+     * @param {Object} scope The scope to find the function in if it is specified as a string.
+     * @param {Array} args Arguments to pass to the callback.
+     */
+    callback(fn, scope=this, args) {
+        if (fn) {
+            const handler = this.resolveCallback(fn, scope);
+
+            handler.fn.apply(handler.scope, args);
+        }
+    }
+
     /**
      * @param name
      */
@@ -127,21 +142,6 @@ class Observable extends Base {
         }
     }
 
-    /**
-     * Call the passed function, or a function by *name* which exists in the passed scope's
-     * or this component's ownership chain.
-     * @param {Function|String} fn A function, or the name of a function to find in the passed scope object/
-     * @param {Object} scope The scope to find the function in if it is specified as a string.
-     * @param {Array} args Arguments to pass to the callback.
-     */
-    callback(fn, scope=this, args) {
-        if (fn) {
-            const handler = this.resolveCallback(fn, scope);
-
-            handler.fn.apply(handler.scope, args);
-        }
-    }
-
     /**
      * @param {Object} config
      */

package/src/main/addon/WindowPosition.mjs

@@ -1,7 +1,6 @@
 import Base from '../../core/Base.mjs';
 
 /**
- *
  * @class Neo.main.addon.WindowPosition
  * @extends Neo.core.Base
  * @singleton
@@ -13,14 +12,22 @@ class WindowPosition extends Base {
          * @protected
          */
         className: 'Neo.main.addon.WindowPosition',
+        /**
+         * @member {Boolean} adjustWindowPositions=true
+         */
+        adjustWindowPositions: true,
         /**
          * @member {String|null} intervalId=null
          */
         intervalId: null,
         /**
-         * @member {Number} intervalTime=100
+         * @member {Number} intervalTime=20
          */
         intervalTime: 20,
+        /**
+         * @member {Boolean} observeResize_=true
+         */
+        observeResize_: true,
         /**
          * Remote method access for other workers
          * @member {Object} remote
@@ -29,6 +36,7 @@ class WindowPosition extends Base {
         remote: {
             app: [
                 'registerWindow',
+                'setConfigs',
                 'setDock',
                 'unregisterWindow'
             ]
@@ -65,8 +73,21 @@ class WindowPosition extends Base {
         me.screenLeft = win.screenLeft;
         me.screenTop  = win.screenTop;
 
-        win.addEventListener('mouseout', me.onMouseOut.bind(me));
-        win.addEventListener('resize',   me.onResize.bind(me));
+        win.addEventListener('mouseout', me.onMouseOut.bind(me))
+    }
+
+    /**
+     * Triggered after the observeResize config got changed
+     * @param {Boolean} value
+     * @param {Boolean} oldValue
+     * @protected
+     */
+    afterSetObserveResize(value, oldValue) {
+        let me = this;
+
+        if (value) {
+            window[value ? 'addEventListener' : 'removeEventListener']('resize', me.onResize.bind(me))
+        }
     }
 
     /**
@@ -82,8 +103,8 @@ class WindowPosition extends Base {
                 windowName: key,
                 x         : position.left,
                 y         : position.top
-            });
-        });
+            })
+        })
     }
 
     /**
@@ -100,7 +121,7 @@ class WindowPosition extends Base {
         if (me.screenLeft !== screenLeft || me.screenTop !== screenTop) {
             winData = Neo.Main.getWindowData();
 
-            me.adjustPositions();
+            me.adjustWindowPositions && me.adjustPositions();
 
             Manager.sendMessage('app', {
                 action: 'windowPositionChange',
@@ -111,7 +132,7 @@ class WindowPosition extends Base {
             });
 
             me.screenLeft = screenLeft;
-            me.screenTop  = screenTop;
+            me.screenTop  = screenTop
         }
     }
 
@@ -124,7 +145,7 @@ class WindowPosition extends Base {
      */
     dockDirectionChange(oldValue, newValue) {
         return (oldValue === 'bottom' || oldValue === 'top') && (newValue === 'left' || newValue === 'right')
-            || (newValue === 'bottom' || newValue === 'top') && (oldValue === 'left' || oldValue === 'right');
+            || (newValue === 'bottom' || newValue === 'top') && (oldValue === 'left' || oldValue === 'right')
     }
 
     /**
@@ -134,29 +155,26 @@ class WindowPosition extends Base {
         let win = window,
             left, top;
 
-        switch (data.dock) {
+        switch(data.dock) {
             case 'bottom':
                 left = win.screenLeft;
                 top  = win.outerHeight + win.screenTop - 50;
-                break;
+                break
             case 'left':
                 left = win.screenLeft - data.size;
                 top  = win.screenTop  + 28;
-                break;
+                break
             case 'right':
                 left = win.outerWidth + win.screenLeft;
                 top  = win.screenTop  + 28;
-                break;
+                break
             case 'top':
                 left = win.screenLeft;
                 top  = win.screenTop - data.size + 78;
-                break;
+                break
         }
 
-        return {
-            left: left,
-            top : top
-        };
+        return {left, top}
     }
 
     /**
@@ -167,11 +185,11 @@ class WindowPosition extends Base {
 
         if (!event.toElement) {
             if (!me.intervalId) {
-                me.intervalId = setInterval(me.checkMovement.bind(me), me.intervalTime);
+                me.intervalId = setInterval(me.checkMovement.bind(me), me.intervalTime)
             }
         } else if (me.intervalId) {
             clearInterval(me.intervalId);
-            me.intervalId = null;
+            me.intervalId = null
         }
     }
 
@@ -188,21 +206,21 @@ class WindowPosition extends Base {
                 case 'bottom':
                 case 'top':
                     width = win.outerWidth;
-                    break;
+                    break
                 case 'left':
                 case 'right':
                     height = win.outerHeight - 28;
-                    break;
+                    break
             }
 
             Neo.Main.windowResizeTo({
                 height    : height,
                 width     : width,
                 windowName: key
-            });
+            })
         });
 
-        me.adjustPositions();
+        me.adjustWindowPositions && me.adjustPositions()
     }
 
     /**
@@ -212,7 +230,17 @@ class WindowPosition extends Base {
      * @param {Number} data.size
      */
     registerWindow(data) {
-        this.windows[data.name] = data;
+        this.windows[data.name] = data
+    }
+
+    /**
+     * Set configs from within the app worker
+     * @param {Object} data
+     * @param {String} data.appName
+     */
+    setConfigs(data) {
+        delete data.appName;
+        this.set(data)
     }
 
     /**
@@ -239,14 +267,14 @@ class WindowPosition extends Base {
                     height    : dock === 'bottom' || dock === 'top'   ? win.size : window.outerHeight - 28,
                     width     : dock === 'left'   || dock === 'right' ? win.size : window.outerWidth,
                     windowName: name
-                });
+                })
             }
 
             Neo.Main.windowMoveTo({
                 windowName: name,
                 x         : position.left,
                 y         : position.top
-            });
+            })
         }
     }
 
@@ -255,7 +283,7 @@ class WindowPosition extends Base {
      * @param {String} data.name
      */
     unregisterWindow(data) {
-        delete this.windows[data.name];
+        delete this.windows[data.name]
     }
 }
 

package/src/worker/App.mjs

@@ -29,6 +29,7 @@ class App extends Base {
             main: [
                 'createNeoInstance',
                 'destroyNeoInstance',
+                'fireEvent',
                 'setConfigs'
             ]
         },
@@ -189,6 +190,30 @@ class App extends Base {
         return false
     }
 
+    /**
+     * Fires a custom event based on core.Observable on any app realm based Neo instance from main
+     * @param {Object} data
+     * @param {String} data.id
+     * @param {String} data.name
+     */
+    fireEvent(data) {
+        let instance = Neo.get(data.id),
+            name;
+
+        if (instance) {
+            name = data.name;
+
+            delete data.id;
+            delete data.name;
+
+            instance.fire(name, data);
+
+            return true
+        }
+
+        return false
+    }
+
     /**
      * Only needed for the SharedWorkers context
      * @param {String} eventName
@@ -196,7 +221,7 @@ class App extends Base {
      */
     fireMainViewsEvent(eventName, data) {
         this.ports.forEach(port => {
-            Neo.apps[port.appName].mainViewInstance.fire(eventName, data)
+            Neo.apps[port.appName].mainView.fire(eventName, data)
         })
     }
 

package/src/worker/Canvas.mjs

@@ -45,7 +45,7 @@ class Canvas extends Base {
 
         me.sendMessage('app', {action: 'registerPort', transfer: port2}, [port2]);
 
-        me.channelPorts.app = port1;
+        me.channelPorts.app = port1
     }
 
     /**
@@ -58,7 +58,7 @@ class Canvas extends Base {
             action : 'reply',
             replyId: data.id,
             success: true
-        });
+        })
     }
 
     /**
@@ -75,8 +75,8 @@ class Canvas extends Base {
             /* webpackMode: "lazy" */
             `../../${path}/canvas.mjs`
         ).then(module => {
-            module.onStart();
-        });
+            module.onStart()
+        })
     }
 }