neo.mjs 6.25.0 → 6.27.0

package/apps/ServiceWorker.mjs

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

package/apps/portal/index.html

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

package/apps/portal/view/about/Container.mjs

@@ -31,6 +31,15 @@ class Container extends Base {
             profileLinkedIn: 'https://www.linkedin.com/in/tobiasuhlig/',
             profileX       : 'https://x.com/UhligTobias',
             teamRole       : 'Co-Founder & Core Team Member'
+        }, {
+            module         : MemberContainer,
+            location       : 'Florida, USA',
+            name           : 'Rich Waters',
+            picture        : 'rwaters.png',
+            profileGitHub  : 'https://github.com/rwaters',
+            profileLinkedIn: 'https://www.linkedin.com/in/rwaters/',
+            profileX       : 'https://x.com/rwaters',
+            teamRole       : 'Co-Founder & Core Team Member'
         }, {
             module         : MemberContainer,
             location       : 'Germany',

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

@@ -1,8 +1,5 @@
 import BaseContainer from './BaseContainer.mjs';
 import ContentBox    from '../ContentBox.mjs';
-import Component     from '../../../../../src/component/Base.mjs';
-import Container     from '../../../../../src/container/Base.mjs';
-
 
 /**
  * @class Portal.view.home.parts.Features
@@ -10,56 +7,92 @@ import Container     from '../../../../../src/container/Base.mjs';
  */
 class Features extends BaseContainer {
     static config = {
+        /**
+         * @member {String} className='Portal.view.home.parts.Features'
+         * @protected
+         */
         className: 'Portal.view.home.parts.Features',
+        /**
+         * @member {String[]} cls=['portal-home-features']
+         */
         cls: ['portal-home-features'],
-        layout: {ntype: 'vbox', align: 'stretch', wrap: 'wrap'},
-        items: [
-            {
-            module: Container,
-            layout: {ntype: 'hbox'},
-            itemDefaults: {
-                module: Component,
-                style: {width: '33%', margin: '1em', padding: '1em', border: 'thin solid lightgray'}
-            },
-            items: [{
-                module: Component,
-                html: `
-                        <h2>Extremely High Performance</h2>
-                        <ul>
-                        <li>Multi-threaded via web workers
-                        <li>Lightning fast rendering
-                        </ul>
-                        <p>Neo.mjs runs key processes in separate web workers, each running in a parallel thread: one thread for app logic, one for managing DOM updates, and one for communicating with the backend. And if you have specialized or processor-intensive tasks, you can easily spawn additional threads.</p>
-                        <p>Besides the benefit of running in a separate thread, the DOM update thread has highly optimized code for tracking and applying delta updates, easily handling tens of thousands of updates per second.</p>
-                `
-            }, {
-                module: Component,
-                html: `
-                        <h2>Multi-Window Applications</h2>
-                        <ul>
-                        <li>Neo.mjs uniquely allows you to create multi-window applications
-                        <li>Application logic, state, data, and component instances are seamlessly shared
-                        </ul>
-                        <p>Neo.mjs components can be rendered to the DOM for any shared web worker. Your app logic listens to events, maintains state, and shares data, without caring where the component is rendering, even if it's to another browser window.</p>
-                `
-            }, {
-            module: Component,
-            html: `
-                    <h2>Powerful Framework Features</h2>
-                    <ul>
-                    <li>Component-based, declaratively configured 
-                    <li>Standard ECMAscript, without proprietary extenions
-                    <li>Property lifecycle hooks, elegant state management
-                    </ul>
-                    <p>Neo.mjs components are abstract, and configured declaratively. Compared to other libraries, Neo.mjs has features that make it much easier to do data binding, and to detect property updates and events.</p>
-                    <p>Since Neo.mjs uses standard JavaScript, there are no special WebPack transpilations. This also makes debugging easier: any statement you write in your application logic also runs in the devtools console.</p>
-            `
-        }]
-         },  {
-            module: Component,
-            html: 'You can read more about Neo.mjs featuers and benefits in <a href="#/learn/WhyNeo-Features">the Learning section</a>. Scroll down to see some running examples.'
+        /**
+         * @member {Object|String} layout='grid'
+         */
+        layout: 'grid',
+        /**
+         * @member {Object} itemDefaults
+         */
+        itemDefaults: {
+            module: ContentBox
+        },
+        /**
+         * @member {Object[]} items
+         */
+        items: [{
+            header: 'Multi-threading',
+            route : '#/learn/WhyNeo-Quick',
+
+            content: [
+                'Following the OMT (Off the Main-Thread) paradigm',
+                'Your Apps & the Framework live within an Application Worker',
+                'Non-blocking, no-freeze, user interaction responses, even for heavy data i/o, processing, and intensive, complex screen updating',
+                'Additional Workers for OffscreenCanvas, Data, Delta-Updates & Tasks',
+                'A ServiceWorker connected to the App Worker for predictive Caching'
+            ]
+        }, {
+            header: 'Multi-Window Apps',
+            route : '#/learn/WhyNeo-Quick',
+
+            content: [
+                'No need for a Native Shell (e.g. Electron)',
+                'Sharing Data across Windows',
+                'Sharing State across Windows',
+                'Moving Components across Windows while keeping the same JS instances'
+            ]
+        }, {
+            header: 'Modern JavaScript directly in your Browser',
+            route : '#/learn/WhyNeo-Quick',
+
+            content: [
+                'The Dev-Mode runs without the need for Transpilations or Compilations',
+                'Using the latest ECMAScript Features, as soon as the Browser Support is there',
+                'Simple and powerful Debugging',
+                'Reduced Development Costs'
+            ]
+        }, {
+            header: 'Powerful Component-Library',
+            route : '#/learn/WhyNeo-Quick',
+
+            content: [
+                'Declarative Component-Trees',
+                'High Order Components',
+                'Many out-of-the-box Components, including nested lazy-loaded forms',
+                'Multiple themes, which can get nested'
+            ]
+        }, {
+            header: 'Elegant State Management',
+            route : '#/learn/WhyNeo-Speed',
+
+            content: [
+                'Multiple communicating State-Providers',
+                'Observable',
+                'Supporting different architectures like MVVM without enforcing them'
+            ]
+        }, {
+            header: 'Core Features',
+            route : '#/learn/WhyNeo-Speed',
+
+            content: [
+                'RPC Layer (cross-realm, including Backends)',
+                'Extensibility',
+                'Scalability',
+                'Class Config System',
+                'Drag & Drop',
+                'Mixins, Plugins & Main-Thread Addons'
+            ]
         }]
-}
+    }
 }
 
 Neo.setupClass(Features);

package/apps/portal/view/learn/MainContainer.mjs

@@ -31,6 +31,7 @@ class MainContainer extends Container {
         items: [{
             module   : Container,
             cls      : ['sidenav-container'],
+            flex     : 'none',
             layout   : 'fit',
             reference: 'sidenav-container',
             tag      : 'aside',
@@ -40,8 +41,9 @@ class MainContainer extends Container {
                 reference: 'tree'
             }, {
                 ntype  : 'button',
+                bind   : {hidden: data => data.size !== 'x-small'},
                 cls    : ['sidenav-button'],
-                handler: 'onSideNaveToggleButtonClick',
+                handler: 'onSideNavToggleButtonClick',
                 iconCls: 'fas fa-bars',
                 ui     : 'secondary'
             }]
@@ -55,9 +57,7 @@ class MainContainer extends Container {
             module: PageContainer
         }, {
             module   : PageSectionsContainer,
-            bind     : {hidden: data => data.size !== 'large'},
-            reference: 'page-sections-container',
-            width    : 250
+            reference: 'page-sections-container'
         }],
         /**
          * @member {Object} layout={ntype:'hbox',align:'stretch'}

package/apps/portal/view/learn/MainContainerController.mjs

@@ -121,6 +121,13 @@ class MainContainerController extends Controller {
         this.navigateTo(this.getModel().getData('nextPageRecord').id)
     }
 
+    /**
+     * @param {Object} data
+     */
+    onPageSectionsToggleButtonClick(data) {
+        this.getReference('page-sections-container').toggleCls('neo-expanded')
+    }
+
     /**
      * @param {Object} data
      */
@@ -159,7 +166,7 @@ class MainContainerController extends Controller {
     /**
      * @param {Object} data
      */
-    onSideNaveToggleButtonClick(data) {
+    onSideNavToggleButtonClick(data) {
         this.getReference('sidenav-container').toggleCls('neo-expanded')
     }
 }

package/apps/portal/view/learn/PageSectionsContainer.mjs

@@ -20,21 +20,26 @@ class PageSectionsContainer extends Container {
          * @member {Object[]} items
          */
         items: [{
+            ntype  : 'button',
+            bind   : {hidden: data => data.size === 'large'},
+            cls    : ['sections-container-button'],
+            handler: 'onPageSectionsToggleButtonClick',
+            iconCls: 'fas fa-bars',
+            ui     : 'secondary'
+        }, {
             vdom:
             {cn: [
                 {tag: 'h3', html: 'On this page'}
             ]}
-
         }, {
             module   : PageSectionsList,
+            listeners: {pageListSelect: 'up.onPageListSelect'},
             reference: 'list'
         }],
         /**
          * @member {Object} layout={ntype:'vbox'}
          */
-        layout: {
-            ntype: 'vbox'
-        }
+        layout: {ntype: 'vbox'}
     }
 
     /**
@@ -44,6 +49,13 @@ class PageSectionsContainer extends Container {
     get list() {
         return this.getReference('list')
     }
+
+    /**
+     * @param {Object} data
+     */
+    onPageListSelect(data) {
+        this.toggleCls('neo-expanded', false)
+    }
 }
 
 Neo.setupClass(PageSectionsContainer);

package/apps/portal/view/learn/PageSectionsList.mjs

@@ -62,6 +62,8 @@ class PageSectionsList extends List {
         if (record) {
             me.isAnimating = true;
 
+            me.fire('pageListSelect', {record});
+
             await Neo.main.DomAccess.scrollIntoView({
                 querySelector: `[data-record-id='${record.id}']`,
                 windowId     : me.windowId

package/examples/ServiceWorker.mjs

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

package/package.json

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

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

@@ -61,41 +61,6 @@
     animation-timeline: --page-scroll;
 }
 
-//@scroll-timeline --page-scroll {
-//    source: auto;
-//    orientation: vertical;
-//    scroll-offsets: 0%, 100%;
-//}
-
-
-/* Style and position the progress bar */
-.portal-home-progress {
-    position: fixed;
-    z-index: 1000;
-    top: 0;
-    height: 2px;
-    width: 100%;
-    background: var(--button-background-color);
-    background: var(--sem-color-surface-primary-background);
-
-    scale: 0 1;
-    transform-origin: left;
-
-    /* Attach the animation using an anonymous Scroll Progress Timeline */
-    animation: grow-progress linear;
-    animation-timeline: --page-scroll;
-}
-
-@keyframes grow-progress {
-    to {
-        scale: 1 1;
-    }
-}
-
-//.page {
-//  scroll-timeline: --page block;
-//}
-
 .portal-home-maincontainer {
     scroll-timeline: --page-scroll block;
 }

package/resources/scss/src/apps/portal/home/ContentBox.scss

@@ -1,18 +1,13 @@
 .portal-content-box {
-    border         : 1px solid darkgray;
+    border         : 1px solid var(--sem-color-border-default);
     cursor         : pointer;
     color          : #000;
-    margin-top     : 2em;
+    min-width      : 300px;
     padding        : 0 1em 1em 1em;
     text-decoration: none;
-    width          : 300px;
 
     &:hover {
-        background-color: lightblue;
-    }
-
-    &:not(:last-child) {
-        margin-right: 3em;
+        background-color: var(--sem-color-surface-primary-background);
     }
 
     .portal-content-box-content {
@@ -22,8 +17,4 @@
     .portal-content-box-header {
 
     }
-
-    @media (max-width: 600px) {
-        margin-right: 0;
-    }
 }

package/resources/scss/src/apps/portal/home/MainContainer.scss

@@ -2,4 +2,27 @@
     overflow-x      : hidden!important;
     scroll-behavior : smooth;
     scroll-snap-type: y mandatory;
+
+    /* Style and position the progress bar */
+    .portal-home-progress {
+        background      : var(--sem-color-surface-primary-background);
+        height          : 4px;
+        position        : fixed;
+        scale           : 0 1;
+        top             : 0;
+        transform-origin: left;
+        width           : 100%;
+        z-index         : 1000;
+
+
+        /* Attach the animation using an anonymous Scroll Progress Timeline */
+        animation         : grow-progress linear;
+        animation-timeline: --page-scroll;
+    }
+
+    @keyframes grow-progress {
+        to {
+            scale: 1 1;
+        }
+    }
 }

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

@@ -2,52 +2,23 @@
     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;
-        margin     : 0;
         line-height: 1em;
+        margin     : 0;
+        text-align : center;
     }
 
     .neo-h2 {
         font-size  : min(max(3.5vw, 24px), 44px);
         font-weight: 600;
-        text-align : center;
-        margin     : 0;
         line-height: 1em;
+        margin     : 0;
+        text-align : center;
     }
 
     .page-live-preview {

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

@@ -1,5 +1,15 @@
 .portal-home-features {
-    padding      : 3em;
-    overflow-y   : auto;
-    place-content: start;
+    gap                  : 2em;
+    grid-template-columns: repeat(3, 1fr);
+    overflow-x           : auto;
+    padding              : 2em;
+    place-content        : start;
+
+    @media (max-width: 1000px) {
+        grid-template-columns: repeat(2, 1fr);
+    }
+
+    @media (max-width: 700px) {
+        grid-template-columns: repeat(6, 1fr);
+    }
 }

package/resources/scss/src/apps/portal/learn/ContentView.scss

@@ -3,7 +3,7 @@
     border-radius   : 8px;
     letter-spacing  : 1px;
     margin          : 0 auto;
-    max-width       : 900px;
+    max-width       : 1200px;
     overflow        : unset;
     padding         : 0 3rem;
     width           : -webkit-fill-available;
@@ -11,7 +11,7 @@
     pre[data-javascript] {
         border       : thin solid lightgray;
         border-radius: 4px;
-        min-width    : fit-content;
+        overflow-x   : scroll;
         padding      : 12px;
     }
 

package/resources/scss/src/apps/portal/learn/MainContainer.scss

@@ -5,6 +5,10 @@
         margin: 0;
     }
 
+    .sidenav-button {
+        display: none;
+    }
+
     .sidenav-container {
         min-width: 350px;
         width    : 350px;
@@ -17,6 +21,7 @@
             overflow  : visible;
             position  : fixed;
             transition: left 250ms ease-out;
+            z-index   : 101;
 
             &.neo-expanded {
                 left: 0;
@@ -24,11 +29,13 @@
 
             .sidenav-button {
                 box-shadow: 0 5px 10px rgba(0,0,0,.3);
+                display   : flex;
                 height    : 35px;
                 min-width : 35px;
                 position  : absolute;
                 right     : -42px;
                 width     : 35px;
+                z-index   : 101;
             }
         }
     }

package/resources/scss/src/apps/portal/learn/PageSectionsContainer.scss

@@ -3,12 +3,42 @@
     border          : none; // reset the default 1px
     display         : block;
     flex-shrink     : 0;
+    min-width       : 250px;
     position        : fixed;
     right           : 0;
     width           : 250px;
     z-index         : 1;
 
     h3 {
-        margin-left: 16px;
+        margin-bottom: .4em;
+        margin-left  : 16px;
+    }
+
+    .sections-container-button {
+        display: none;
+    }
+
+    @media (max-width: 1296px) {
+        background-color: #fff;
+        box-shadow      : 0 5px 10px rgba(0,0,0,.3);
+        overflow        : visible;
+        right           : -250px;
+        transition      : right 250ms ease-out;
+        z-index         : 100;
+
+        &.neo-expanded {
+            right: 0;
+        }
+
+        .sections-container-button {
+            background-color: #fff;
+            box-shadow      : 0 5px 10px rgba(0,0,0,.3);
+            display         : flex;
+            height          : 35px;
+            min-width       : 35px;
+            position        : absolute;
+            left            : -42px;
+            width           : 35px;
+        }
     }
 }

package/src/DefaultConfig.mjs

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

package/src/code/LivePreview.mjs

@@ -178,7 +178,7 @@ class LivePreview extends Container {
                 position: 'fixed',
                 top     : rect.y      + 'px',
                 width   : rect.width  + 'px',
-                zIndex  : 100
+                zIndex  : 103
             });
 
             me.update();

package/src/component/Video.mjs

@@ -1,13 +1,18 @@
 import BaseComponent from '../component/Base.mjs';
-import VDomUtil      from '../util/VDom.mjs';
+import VDomUtil from '../util/VDom.mjs';
 
 /**
  * @class Neo.component.Video
  * @extends Neo.component.Base
  *
  * @example
- *     ntype: 'video',
- *     url: 'https://video-ssl.itunes.apple.com/itunes-assets/Video125/v4/a0/57/54/a0575426-dd8e-2d25-bdf3-139702870b50/mzvf_786190431362224858.640x464.h264lc.U.p.m4v'
+ *     ntype   : 'video',
+ *     url     : 'https://video-ssl.itunes.apple.com/itunes-assets/Video125/v4/a0/57/54/a0575426-dd8e-2d25-bdf3-139702870b50/mzvf_786190431362224858.640x464.h264lc.U.p.m4v'
+ *     autoplay: true
+ *
+ * @methods
+ *      play
+ *      pause
  */
 class Video extends BaseComponent {
     static config = {
@@ -25,6 +30,19 @@ class Video extends BaseComponent {
          * @member {String[]} baseCls=['neo-video']
          */
         baseCls: ['neo-video'],
+        /**
+         * Automatically start the video
+         * Initial setting, which does not make sense to change later
+         * !!Most browsers only support muted autostart
+         * @member {Boolean} autoplay=false
+         */
+        autoplay: false,
+        /**
+         * In case the browser does not support the video source
+         * the component should show an error.
+         * @member {Boolean} errorMsg='The browser does not support the video'
+         */
+        errorMsg: 'Your browser does not support the video tag.',
         /**
          * Current state of the video
          * @member {Boolean} playing_=false
@@ -45,18 +63,17 @@ class Video extends BaseComponent {
         _vdom: {
             cn: [{
                 flag: 'ghost',
-                cls : ['neo-video-ghost'],
-                cn  : [{
-                    // The <i> tag defines a part of text in an alternate voice or mood. The content inside is typically displayed in italic.
+                cls: ['neo-video-ghost'],
+                cn: [{
                     tag: 'i',
                     cls: ['fa-solid', 'fa-circle-play']
                 }]
             }, {
                 // Neo specific configs
-                tag      : 'video',
-                flag     : 'media',
+                tag: 'video',
+                flag: 'media',
+                cls: ['neo-video-media'],
                 removeDom: true,
-                cls      : ['neo-video-media'],
                 // dom attributes
                 autoplay: true,
                 controls: true
@@ -72,8 +89,9 @@ class Video extends BaseComponent {
 
         let me = this;
 
+        me.handleAutoplay();
         me.addDomListeners(
-            {click: me.play,  delegate: '.neo-video-ghost'},
+            {click: me.play, delegate: '.neo-video-ghost'},
             {click: me.pause, delegate: '.neo-video-media'}
         )
     }
@@ -100,8 +118,8 @@ class Video extends BaseComponent {
      */
     afterSetPlaying(value, oldValue) {
         let {vdom} = this,
-            media  = VDomUtil.getFlags(vdom, 'media')[0],
-            ghost  = VDomUtil.getFlags(vdom, 'ghost')[0];
+            media = VDomUtil.getFlags(vdom, 'media')[0],
+            ghost = VDomUtil.getFlags(vdom, 'ghost')[0];
 
         ghost.removeDom = value;
         media.removeDom = !value;
@@ -117,20 +135,39 @@ class Video extends BaseComponent {
      * @param {String|null} oldValue
      */
     afterSetUrl(value, oldValue) {
-        if (!value) {
-            return
-        }
+        if (!value) return;
 
-        let me    = this,
-            media = me.vdom.cn[1];
+        let {vdom} = this,
+            media = VDomUtil.getFlags(vdom, 'media')[0];
 
         media.cn = [{
-            tag : 'source',
-            src : value,
-            type: me.type
+            tag: 'source',
+            src: value,
+            type: this.type
+        }, {
+            tag: 'span',
+            html: this.errorMsg,
         }];
 
-        me.update()
+        this.update()
+    }
+
+    /**
+     * autoplay - run the event listeners
+     */
+    handleAutoplay() {
+        if (!this.autoplay) return;
+
+        let {vdom} = this,
+            media = VDomUtil.getFlags(vdom, 'media')[0];
+
+        // Most browsers require videos to be muted for autoplay to work.
+        media.muted = true;
+        // Allows inline playback on iOS devices
+        media.playsInline = true;
+
+        this.update();
+        this.playing = true;
     }
 
     /**