neo.mjs 6.18.2 → 6.18.3

package/resources/data/deck/learnneo/pages/TestLivePreview.md

@@ -4,15 +4,16 @@ To code a live preview, enclose the code in a `pre` tag with the `data-neo` attr
 
 Imports are relative to the portal app running within the framework. That means
 Neo.mjs imports should be coded to go up four levels, then look into the `src`
-directory. For example, to import _container_, use `import Base from '../../../../src/container/Base.mjs`
+directory. For example, to import _container_, use `import Base from '../container/Base.mjs`
 
 You can define as many classes you need, such as component models and controllers, but the the _last_
 class being defined is assumed to be the view being rendered. In other words, if the final class definition is a component, it's rendered.
 
 <pre data-neo>
-import Base from '../../../../src/container/Base.mjs';
-import Button from '../../../../src/button/Base.mjs';
-import Split from '../../../../src/button/Split.mjs';
+import Base   from '../container/Base.mjs';
+import Button from '../button/Base.mjs';
+import Split  from '../button/Split.mjs';
+
 class Bar extends Base {
     static config = {
         ntype: 'demoFoo',

package/resources/data/deck/learnneo/pages/TodoList.md

@@ -4,9 +4,9 @@ In case you did not work with neo yet, but come from a more HTML driven ecosyste
 you could achieve the task in a similar way.
 
 <pre data-neo>
-import Component from '../../../../src/component/Base.mjs';
-import NeoArray  from '../../../../src/util/Array.mjs';
-import VdomUtil  from '../../../../src/util/VDom.mjs';
+import Component from '../component/Base.mjs';
+import NeoArray  from '../util/Array.mjs';
+import VdomUtil  from '../util/VDom.mjs';
 
 class MainComponent extends Component {
     static config = {
@@ -117,12 +117,12 @@ Neo.setupClass(MainComponent);
 content
 
 <pre data-neo>
-import Container from '../../../../src/container/Base.mjs';
-import List      from '../../../../src/list/Base.mjs';
-import Model     from '../../../../src/data/Model.mjs';
-import Store     from '../../../../src/data/Store.mjs';
-import TextField from '../../../../src/form/field/Text.mjs';
-import Toolbar   from '../../../../src/toolbar/Base.mjs';
+import Container from '../container/Base.mjs';
+import List      from '../list/Base.mjs';
+import Model     from '../data/Model.mjs';
+import Store     from '../data/Store.mjs';
+import TextField from '../form/field/Text.mjs';
+import Toolbar   from '../toolbar/Base.mjs';
 
 class TodoListModel extends Model {
     static config = {

package/resources/data/deck/learnneo/pages/Welcome.md

@@ -50,8 +50,8 @@ icon on the right  <span class="far fa-xs fa-window-maximize"></span>. This web
 and the ability to launch browser windows &mdash; all integrated within a single app &mdash; is a unique feature of Neo.mjs!
 
 <pre data-neo>
-import Button    from '../../../../src/button/Base.mjs';
-import Container from '../../../../src/container/Base.mjs';
+import Button    from '../button/Base.mjs';
+import Container from '../container/Base.mjs';
 
 class MainView extends Container {
     static config = {
@@ -65,4 +65,4 @@ class MainView extends Container {
 }
 
 Neo.setupClass(MainView);
-</pre>
+</pre>

package/resources/data/deck/learnneo/pages/WhyNeo-Multi-Window.md

@@ -15,8 +15,8 @@ running the code. Even though it's running in a new window, it's still part of t
 seamlessly share events, data, etc. — the code doesn't care that some code is running in a
 separate window.
 <pre data-neo>
-import Button    from '../../../../src/button/Base.mjs';
-import Container from '../../../../src/container/Base.mjs';
+import Button    from '../button/Base.mjs';
+import Container from '../container/Base.mjs';
 
 class MainView extends Container {
     static config = {

package/resources/data/deck/learnneo/pages/WhyNeo-Speed.md

@@ -21,8 +21,8 @@ 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 '../../../../src/container/Base.mjs';
-import Helix from '../../../../src/component/Helix.mjs';
+import Base from '../container/Base.mjs';
+import Helix from '../component/Helix.mjs';
 class Foo extends Base {
     static config = {
         className: 'Foo',

package/resources/scss/src/apps/portal/HeaderToolbar.scss

@@ -82,52 +82,6 @@
     }
 }
 
-.hello-world {
-    animation-timeline: view(block 100% -500%);
-
-    animation-name: appear-animation;
-    animation-fill-mode: both;
-    animation-duration: 1ms; /* Firefox requires this to apply the animation */
-    animation-timing-function: linear;
-}
-
-@keyframes appear-animation {
-    0% {
-        transform: translateX(-400%);
-        opacity  : 0;
-    }
-    90% {
-        opacity: .3;
-    }
-    100% {
-        transform: translateX(0);
-        opacity  : 1;
-    }
-}
-
-.cool-stuff {
-    animation-timeline       : view(block 100% -500%);
-    animation-name           : appear-cool-stuff;
-    animation-fill-mode      : both;
-    animation-duration       : 1ms; /* Firefox requires this to apply the animation */
-    animation-timing-function: linear;
-}
-
-@keyframes appear-cool-stuff {
-    0% {
-        transform: translateX(400%);
-        opacity  : 0;
-    }
-    90% {
-        opacity: .3;
-    }
-    100% {
-        transform: translateX(0);
-        opacity  : 1;
-    }
-}
-
-
 //.page {
 //  scroll-timeline: --page block;
 //}

package/resources/scss/src/apps/portal/home/parts/BaseContainer.scss

@@ -2,6 +2,39 @@
     min-height       : 100%;
     scroll-snap-align: center;
 
+    @keyframes appear-left {
+        0%   {opacity: 0; transform: translateX(-400%);}
+        90%  {opacity: .3;}
+        100% {opacity: 1; transform: translateX(0);}
+    }
+
+    @keyframes appear-right {
+        0%   {opacity: 0; transform: translateX(400%);}
+        90%  {opacity: .3;}
+        100% {opacity: 1; transform: translateX(0);}
+    }
+
+    &:not(:first-child) {
+        &:not(:last-child) {
+            animation-timeline       : view(block 100% -500%);
+            animation-fill-mode      : both;
+            animation-duration       : 1ms; /* Firefox requires this to apply the animation */
+            animation-timing-function: linear;
+
+            &:nth-child(even) {
+                animation-name: appear-right;
+            }
+
+            &:nth-child(odd) {
+                animation-name: appear-left;
+            }
+        }
+    }
+
+    .neo-content {
+        font-size: min(max(2.3vw, 16px), 30px);
+    }
+
     .neo-h1 {
         font-size  : min(max(5.5vw, 30px), 64px);
         text-align : center;
@@ -17,10 +50,6 @@
         line-height: 1em;
     }
 
-    .neo-content {
-        font-size: min(max(2.3vw, 16px), 30px);
-    }
-
     .page-live-preview {
         margin: 0;
     }

package/resources/scss/src/{apps/portal/learn → code}/LivePreview.scss

@@ -1,4 +1,4 @@
-.learn-live-preview {
+.neo-code-live-preview {
     margin-bottom: 2em;
 
     .live-preview-container {

package/resources/scss/src/component/Helix.scss

@@ -4,7 +4,6 @@
     display         : flex;
     font-family     : var(--neo-font-family);
     margin          : 0;
-    overflow        : hidden;
     padding         : 0;
     perspective     : 800px;
     transform       : translateZ(0px);
@@ -65,7 +64,7 @@
         height             : 160px;
         overflow           : hidden;
         width              : 120px;
-        will-change        : transform;
+        will-change        : auto;
 
         &:focus {
             outline: 0;

package/src/DefaultConfig.mjs

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

package/{apps/portal/view/learn → src/code}/LivePreview.mjs

@@ -1,6 +1,6 @@
-import Container    from '../../../../src/container/Base.mjs';
-import MonacoEditor from '../../../../src/component/wrapper/MonacoEditor.mjs'
-import TabContainer from '../../../../src/tab/Container.mjs';
+import Container    from '../container/Base.mjs';
+import MonacoEditor from '../component/wrapper/MonacoEditor.mjs'
+import TabContainer from '../tab/Container.mjs';
 
 const
     classDeclarationRegex = /class\s+([a-zA-Z$_][a-zA-Z0-9$_]*)\s*(?:extends\s+[a-zA-Z$_][a-zA-Z0-9$_]*)?\s*{[\s\S]*?}/g,
@@ -8,7 +8,7 @@ const
     importRegex           = /import\s+([\w-]+)\s+from\s+['"]([^'"]+)['"]/;
 
 /**
- * @class Portal.view.learn.LivePreview
+ * @class Neo.code.LivePreview
  * @extends Neo.container.Base
  */
 class LivePreview extends Container {
@@ -22,10 +22,10 @@ class LivePreview extends Container {
 
     static config = {
         /**
-         * @member {String} className='Portal.view.learn.LivePreview'
+         * @member {String} className='Neo.code.LivePreview'
          * @protected
          */
-        className: 'Portal.view.learn.LivePreview',
+        className: 'Neo.code.LivePreview',
         /**
          * @member {String} ntype='live-preview'
          * @protected
@@ -36,14 +36,22 @@ class LivePreview extends Container {
          * @member {String} activeView_='source'
          */
         activeView_: 'source',
-
-        baseCls         : ['learn-live-preview'],
-        value_          : null,
-        autoMount       : true,
-        autoRender      : true,
+        /**
+         * @member {String[]} baseCls=['neo-code-live-preview']
+         */
+        baseCls: ['neo-code-live-preview'],
+        /**
+         * @member {Boolean} disableRunSource=false
+         */
         disableRunSource: false,
-        height          : 400,
-        layout          : 'fit',
+        /**
+         * @member {Number} height=400
+         */
+        height: 400,
+        /**
+         * @member {Object|String} layout='fit'
+         */
+        layout: 'fit',
         /**
          * @member {Object[]} items
          */
@@ -56,27 +64,21 @@ class LivePreview extends Container {
             items: [{
                 module         : MonacoEditor,
                 hideLabel      : true,
+                listeners      : {editorChange: 'up.onEditorChange'},
                 style          : {height: '100%'},
                 reference      : 'editor',
-                tabButtonConfig: {
-                    text: 'Source'
-                },
-                listeners      : {
-                    editorChange: data => {
-                        let container         = data.component.up({className: 'Portal.view.learn.LivePreview'});
-                        container.editorValue = data.value;
-
-                        if (container.previewContainer) {
-                            container.doRunSource()
-                        }
-                    }
-                }
+                tabButtonConfig: {text: 'Source'}
             }, {
                 module         : Container,
                 reference      : 'preview',
                 tabButtonConfig: {text: 'Preview'}
             }]
-        }]
+        }],
+        /**
+         * The code to display inside the Monaco editor
+         * @member {String|null} value_=null
+         */
+        value_: null,
     }
 
     /**
@@ -300,6 +302,20 @@ class LivePreview extends Container {
         me.activeView === 'preview' && me.doRunSource()
     }
 
+    /**
+     * @param {Object} data
+     */
+    onEditorChange(data) {
+        let me = this;
+
+        me.editorValue = data.value;
+
+        // We are not using getPreviewContainer(), since we only want to update the LivePreview in case it is visible.
+        if (me.previewContainer) {
+            me.doRunSource()
+        }
+    }
+
     /**
      * @param {Object} data
      */

package/src/main/addon/ResizeObserver.mjs

@@ -19,6 +19,12 @@ class NeoResizeObserver extends Base {
          * @protected
          */
         instance: null,
+        /**
+         * If a target node is not found when calling register(),
+         * we can specify the amount of retries with a 100ms delay.
+         * @member {Number} registerAttempts=3
+         */
+        registerAttempts: 3,
         /**
          * Remote method access for other workers
          * @member {Object} remote
@@ -92,9 +98,19 @@ class NeoResizeObserver extends Base {
     /**
      * @param {Object} data
      * @param {String} data.id
+     * @param {Number} count=0
      */
-    register(data) {
-        this.instance.observe(DomAccess.getElement(data.id))
+    async register(data, count=0) {
+        let me   = this,
+            node = DomAccess.getElement(data.id);
+
+        if (node) {
+            me.instance.observe(node)
+        } else if (count < me.registerAttempts) {
+            await me.timeout(100);
+            count++;
+            me.register(data, count)
+        }
     }
 
     /**

package/apps/portal/view/home/parts/HelloWorld.mjs

@@ -1,83 +0,0 @@
-import BaseContainer        from './BaseContainer.mjs';
-import LivePreviewContainer from '../preview/PageCodeContainer.mjs';
-
-/**
- * @class Portal.view.home.parts.HelloWorld
- * @extends Portal.view.home.parts.BaseContainer
- */
-class HelloWorld extends BaseContainer {
-    static config = {
-        /**
-         * @member {String} className='Portal.view.home.parts.HelloWorld'
-         * @protected
-         */
-        className: 'Portal.view.home.parts.HelloWorld',
-
-        cls: ['page', 'hello-world'],
-        /**
-         * @member {Object} layout=null
-         */
-//        layout: null,
-
-        responsiveConfig: {
-            oldPhone: {maxWidth: 320},
-            phone   : {maxWidth: 480},
-            tablet  : {maxWidth: 770},
-            medium  : {maxWidth: 840},
-            large   : {minWidth: 841}
-        },
-
-        responsive: {
-            medium: {layout: {ntype: 'vbox', align: 'stretch', pack: 'center'}},
-            large : {layout: {ntype: 'hbox', align: 'stretch', pack: 'center'}}
-        },
-        /**
-         * @member {Object[]} items
-         */
-        items: [{
-            ntype : 'container',
-            flex  : '1',
-            style : {padding: '2rem'},
-            layout: {ntype: 'vbox', align: 'center', pack: 'center'},
-            items : [{
-                cls : 'neo-h1',
-                flex: 'none',
-                html: 'Hello World',
-                vdom: {tag: 'h1'}
-            }, {
-                cls : 'neo-h2',
-                flex: 'none',
-                html: 'Your first code snippet',
-                vdom: {tag: 'h2'}
-            }, {
-                cls : 'neo-content',
-                flex: 'none',
-                html: 'If you understand these lines, you are ready to start with Neo.mjs',
-                vdom: {tag: 'p'}
-            }]
-        }, {
-            module: LivePreviewContainer,
-            flex  : 0.8,
-            value : [
-                "import Container from '../../../../src/container/Base.mjs';",
-                "",
-                "class MainView extends Container {",
-                "    static config = {",
-                "        className: 'Portal.view.MainView',",
-                "        layout   : {ntype:'vbox', align:'stretch'},",
-                "        items    : [{",
-                "            module: Container,",
-                "            html  : 'Hello World'",
-                "        }]",
-                "    }",
-                "}",
-                "",
-                "Neo.setupClass(MainView);"
-            ].join('\n')
-        }]
-    }
-}
-
-Neo.setupClass(HelloWorld);
-
-export default HelloWorld;

package/apps/portal/view/home/preview/PageCodeContainer.mjs

@@ -1,55 +0,0 @@
-import Container   from '../../../../../src/container/Base.mjs';
-import LivePreview from '../../learn/LivePreview.mjs';
-
-/**
- * @class Portal.view.home.preview.PageCodeContainer
- * @extends Neo.container.Base
- */
-class PageCodeContainer extends Container {
-    static config = {
-        /**
-         * @member {String} className='Portal.view.home.preview.PageCodeContainer'
-         * @protected
-         */
-        className: 'Portal.view.home.preview.PageCodeContainer',
-        /**
-         * @member {String} ntype='page-code-container'
-         * @protected
-         */
-        ntype: 'page-code-container',
-        /**
-         * @member {String[]} cls=['page-code-container']
-         * @protected
-         */
-        cls: ['page-code-container'],
-        /**
-         * @member {Object} layout={ntype:'vbox',align:'stretch',pack:'center'}
-         */
-        layout: {ntype: 'vbox', align: 'stretch', pack: 'center'},
-        /**
-         * @member {Object[]} items
-         */
-        items : [{
-            module: LivePreview,
-            cls   : ['live-preview']
-        }],
-        /**
-         * @member {String|null} value_=null
-         */
-        value_: null,
-    }
-
-    /**
-     * Triggered after the size config got changed
-     * @param {String|null} value
-     * @param {String|null} oldValue
-     * @protected
-     */
-    afterSetValue(value, oldValue) {
-        this.items[0].value = value
-    }
-}
-
-Neo.setupClass(PageCodeContainer);
-
-export default PageCodeContainer;

package/resources/scss/src/apps/portal/Viewport.scss

@@ -1,3 +0,0 @@
-.learnneo-viewport {
-
-}

package/resources/scss/src/apps/portal/home/preview/PageCodeContainer.scss

@@ -1,115 +0,0 @@
-.page-code-container {
-  position: relative;
-  padding: 20px;
-
-  &::before {
-    position:absolute;
-    inset: 0;
-    opacity: .4;
-    content: "";
-    background: {
-      image   : url("../../../../../../../../resources/images/logo/neo_logo_secondary.svg");
-      size: auto 90%;
-      repeat: no-repeat;
-      position: center;
-    }
-  }
-
-  .live-preview {
-    opacity: 0.9;
-
-    .live-preview-container {
-      & > .neo-tab-header-toolbar {
-        background: var(--sem-color-surface-primary-background);
-        border-radius: 15px 15px 0 0;
-        padding-right: 10px;
-        padding-left: 14px;
-
-        .neo-button-text {
-          color: slategrey!important;
-        }
-
-        .pressed {
-          border-bottom-right-radius: 0;
-          border-bottom-left-radius: 0;
-
-          .neo-button-text {
-            color: darkslategrey !important;
-          }
-
-          .neo-tab-button-indicator {
-            background-color: darkslategrey;
-          }
-        }
-
-      }
-
-      & > .neo-tab-content-container {
-        .monaco-editor {
-          .margin, .sticky-widget-line-numbers, .active-line-number {
-            background: #263238;
-            color: #cdd3de;
-          }
-
-          .monaco-editor-background, .sticky-widget-lines-scrollable {
-            background: #1B2225;
-            color: #cdd3de;
-
-            // keys
-            .mtk1 {
-              color: #CDFF8E;
-            }
-
-            // class, extends, static
-            .mtk6 {
-              color: #8EDCF5;
-            }
-
-            // numbers
-            .mtk7 {
-              color: #D6FF00
-            }
-
-            // Comment
-            .mtk8 {
-              color: #98A8B5;
-            }
-
-            // strings
-            .mtk20 {
-              color: #D6FF00
-            }
-
-            // Classname: MainView, Container
-            .mtk22 {
-                color: #cccccc;
-            }
-
-            /**
-             * Cursor
-             *  not used
-             *  - .monaco-mouse-cursor-text
-             *  - .cursors-layer
-             *  - .cursor-line-style
-             */
-            .cursor,
-            .cursor-solid {
-              background-color: #ffffff;
-            }
-
-            // not in use
-            .important {
-              color: #FFA9A9;
-              font-style: italic;
-            }
-
-            // not in use
-            .id {
-              color: #F3A5F7;
-            }
-          }
-        }
-      }
-    }
-  }
-}