neo.mjs 6.32.0 → 6.33.0

package/README.md

@@ -6,7 +6,7 @@
   <a href="https://npmcharts.com/compare/neo.mjs?minimal=true"><img src="https://img.shields.io/npm/dm/neo.mjs.svg?label=Downloads" alt="Downloads"></a>
   <a href="https://www.npmjs.com/package/neo.mjs"><img src="https://img.shields.io/npm/v/neo.mjs.svg?logo=npm" alt="Version"></a>
   <a href="https://www.npmjs.com/package/neo.mjs"><img src="https://img.shields.io/npm/l/neo.mjs.svg?label=License" alt="License"></a>
-  <a href="https://join.slack.com/t/neomjs/shared_invite/zt-6c50ueeu-3E1~M4T9xkNnb~M_prEEOA"><img src="https://img.shields.io/badge/Slack-neo.mjs-brightgreen.svg?logo=slack" alt="Join the Slack channel"></a>
+  <a href="https://join.slack.com/t/neomjs/shared_invite/zt-6c50ueeu-3E1~M4T9xkNnb~M_prEEOA"><img src="https://img.shields.io/badge/Slack-Neo.mjs-brightgreen.svg?logo=slack" alt="Join the Slack channel"></a>
   <a href="https://discord.gg/6p8paPq"><img src="https://img.shields.io/discord/656620537514164249?label=Discord&logo=discord&logoColor=white" alt="Discord Chat"></a>
   <a href="./CONTRIBUTING.md"><img src="https://img.shields.io/badge/PRs-welcome-green.svg?logo=GitHub&logoColor=white" alt="PRs Welcome"></a>
 </p>

package/apps/ServiceWorker.mjs

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

package/apps/portal/view/blog/List.mjs

@@ -25,6 +25,11 @@ class List extends BaseList {
          * @member {String[]} baseCls=['portal-blog-list','neo-list']
          */
         baseCls: ['portal-blog-list', 'neo-list'],
+        /**
+         * Specify how many blog item images to preload when intersecting
+         * @member {Number} preloadImages=5
+         */
+        preloadImages: 5,
         /**
          * @member {Neo.data.Store} store=BlogPosts
          */
@@ -42,6 +47,61 @@ class List extends BaseList {
         ]}
     }
 
+    /**
+     * @member {String} basePath
+     */
+    get basePath() {
+        let basePath;
+
+        if (Neo.config.isGitHubPages) {
+            basePath = '../../../../resources_pub/website';
+
+            if (Neo.config.environment !== 'development') {
+                basePath = '../../' + basePath
+            }
+        } else {
+            basePath = 'https://raw.githubusercontent.com/neomjs/pages/main/resources_pub/website'
+        }
+
+        return basePath
+    }
+
+    /**
+     * @param {Object} config
+     */
+    construct(config) {
+        super.construct(config);
+
+        let me = this;
+
+        me.addDomListeners({
+            intersect: me.onIntersect,
+            scope    : me
+        })
+    }
+
+    /**
+     * Triggered after the mounted config got changed
+     * @param {Boolean} value
+     * @param {Boolean} oldValue
+     * @protected
+     */
+    afterSetMounted(value, oldValue) {
+        super.afterSetMounted(value, oldValue);
+
+        let me = this;
+
+        value && me.timeout(50).then(() => {
+            Neo.main.addon.IntersectionObserver.register({
+                callback: 'isVisible',
+                id      : me.id,
+                observe : ['.content'],
+                root    : `#${me.parentId}`,
+                windowId: me.windowId
+            })
+        })
+    }
+
     /**
      * @param {Neo.data.Store} value
      * @param {Neo.data.Store} oldValue
@@ -59,23 +119,13 @@ class List extends BaseList {
      * @param {Object} record
      */
     createItemContent(record) {
-        let basePath;
-
-        if (Neo.config.isGitHubPages) {
-            basePath = '../../../../resources_pub/website';
-
-            if (Neo.config.environment !== 'development') {
-                basePath = '../../' + basePath
-            }
-        } else {
-            basePath = 'https://raw.githubusercontent.com/neomjs/pages/main/resources_pub/website'
-        }
+        let {basePath} = this;
 
         const vdomCn = [
-            {cls: ['content'], cn: [
+            {cls: ['content'], data: {recordId: record.id}, cn: [
                 {cls: ['neo-relative'], cn: [
-                    {cls: ['neo-full-size', 'preview-image'], style: {
-                        backgroundImage: `url('${basePath}/blog/${record.image}'), linear-gradient(#777, #333)`}
+                    {cls: ['neo-full-size', 'preview-image'], flag: `image-${record.id}`
+                        //backgroundImage: `url('${basePath}/blog/${record.image}'), linear-gradient(#777, #333)`
                     },
                     {cls: ['neo-absolute', 'neo-item-bottom-position'], cn: [
                         {tag: 'a', cls: ['neo-title'], href: record.url, target: '_blank', cn: [
@@ -166,6 +216,33 @@ class List extends BaseList {
     getVnodeRoot() {
         return this.vnode.childNodes[0]
     }
+
+    /**
+     * @param {Object} data
+     */
+    onIntersect(data) {
+        let me                = this,
+            {basePath, store} = me,
+            record            = store.get(parseInt(data.data.recordId)),
+            i                 = store.indexOf(record),
+            len               = Math.min(i + me.preloadImages, store.getCount()),
+            needsUpdate       = false,
+            node;
+
+        for (; i < len; i++) {
+            node = VDomUtil.getByFlag(me.vdom, `image-${record.id}`);
+
+            if (!node.style) {
+                needsUpdate = true;
+
+                node.style = {
+                    backgroundImage: `url('${basePath}/blog/${record.image}'), linear-gradient(#777, #333)`
+                }
+            }
+        }
+
+        needsUpdate && me.update()
+    }
 }
 
 Neo.setupClass(List);

package/examples/ServiceWorker.mjs

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

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "neo.mjs",
-    "version": "6.32.0",
+    "version": "6.33.0",
     "description": "The webworkers driven UI framework",
     "type": "module",
     "repository": {
@@ -52,12 +52,12 @@
         "envinfo": "^7.13.0",
         "fs-extra": "^11.2.0",
         "highlightjs-line-numbers.js": "^2.8.0",
-        "inquirer": "^10.1.7",
+        "inquirer": "^10.1.8",
         "marked": "^13.0.3",
         "monaco-editor": "^0.50.0",
         "neo-jsdoc": "1.0.1",
         "neo-jsdoc-x": "1.0.5",
-        "postcss": "^8.4.40",
+        "postcss": "^8.4.41",
         "sass": "^1.77.8",
         "siesta-lite": "5.5.2",
         "url": "^0.11.4",

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

@@ -619,14 +619,15 @@ The feed looks like this. (For simplicity, some values are omitted.)
         "longitude": -21.949,
         "size": 0.6,
         "humanReadableLocation": "6,1 km SV af Helgafelli"
-        }, {
+    }, {
         "timestamp": "2017-10-13T09:50:50.000Z",
         "latitude": 65.124,
         "longitude": -16.288,
         "size": 0.9,
         "humanReadableLocation": "6,1 km NA af Her\u00F0ubrei\u00F0art\u00F6glum"
-        },
-    ...]
+    }, //...
+    ]
+}
 </pre>
 
 The store defines a `type` for the date field. There are a few pre-defined field types that convert 

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

@@ -79,7 +79,7 @@ class MainView extends Container {
             }
         }]
     }
-    foo(data){
+    foo(data) {
         Neo.Main.log({value:data.value})
     }
 }
@@ -99,7 +99,7 @@ class MainViewController extends Controller {
     static config = {
         className: 'Example.view.MainViewController'
     }
-    foo(data){
+    foo(data) {
         Neo.Main.log({value:data.value})
     }
 }
@@ -111,11 +111,9 @@ import TextField from '../form/field/Text.mjs';
 
 class MainView extends Container {
     static config = {
-        controller: {
-            module: MainViewController
-        },
-        className: 'Example.view.MainView',
-        layout   : {ntype:'vbox', align:'start'},
+        className : 'Example.view.MainView',
+        controller: MainViewController,
+        layout    : {ntype:'vbox', align:'start'},
 
         items: [{
             module   : TextField,
@@ -143,10 +141,10 @@ class MainViewController extends Controller {
     static config = {
         className: 'Example.view.MainViewController'
     }
-    foo(data){
+    foo(data) {
         Neo.Main.log({value:data.value})
     }
-    onComponentConstructed(){
+    onComponentConstructed() {
         debugger
     }
 }
@@ -158,11 +156,9 @@ import TextField from '../form/field/Text.mjs';
 
 class MainView extends Container {
     static config = {
-        controller: {
-            module: MainViewController
-        },
         className: 'Example.view.MainView',
-        layout   : {ntype:'vbox', align:'start'},
+        controller: MainViewController,
+        layout    : {ntype:'vbox', align:'start'},
 
         items: [{
             module   : TextField,
@@ -185,12 +181,12 @@ class MainViewController extends Controller {
     static config = {
         className: 'Example.view.MainViewController'
     }
-    foo(data){
-        Neo.Main.log('foo' + {value:data.value}
+    foo(data) {
+        Neo.Main.log('foo' + {value:data.value})
     }
 
     // This is a controller lifecycle method run after the controller's view has been constructed
-    onComponentConstructed(){
+    onComponentConstructed() {
         // Note the use of this.getReference() -- that's used to get a component reference with the specified name
         this.getReference('nameTextfield').on('change', this.foo, this)
     }
@@ -203,11 +199,9 @@ import TextField from '../form/field/Text.mjs';
 
 class MainView extends Container {
     static config = {
-        controller: {
-            module: MainViewController
-        },
         className: 'Example.view.MainView',
-        layout   : {ntype:'vbox', align:'start'},
+        controller: MainViewController,
+        layout    : {ntype:'vbox', align:'start'},
 
         items: [{
             module   : TextField,
@@ -219,7 +213,6 @@ class MainView extends Container {
 Neo.setupClass(MainView);
 </pre>
 
-
 ## Events versus binding
 
 Events and binding are similar concepts &mdash; both are a way to detect, and react to, some kind of action or change.
@@ -228,9 +221,7 @@ Events are fired for user actions, such as a button click event, a component rec
 Non-visual classes can also fire an event; for example, a `Neo.data.Store` fires a `load` event, and other events
 relating to changes to the store. The event handler if a function run when the event fires.
 
-A binding detects a changed view model value, and assigns it to a property. 
-
-
+A binding detects a changed view model value, and assigns it to a property.
 
 ### When to use an event
 
@@ -240,7 +231,6 @@ might have a Save button, and in its click event handler you'd write logic to ma
 Events can be fired for a state change, such as an input field's value changing, or something like a user event,
 like a button click or component focus.
 
-
 ### When to use a binding
 
 A binding is a way to keep properties in sync with values in the view model hierarchy. For example, button text, 
@@ -255,9 +245,9 @@ To contrast syntax, and to illustrate the simplicity of a binding, let's look at
 to reflect the value of a text field. THe first example uses events; the second uses bindings.
 
 <pre data-neo>
+import Component from '../component/Base.mjs';
 import Container from '../container/Base.mjs';
 import TextField from '../form/field/Text.mjs';
-import Component from '../component/Base.mjs';
 
 class MainView extends Container {    
     static config = {
@@ -268,24 +258,24 @@ class MainView extends Container {
             module   : TextField,
             labelText: 'Text',
             reference: 'textFieldOne',
-            value: 'Hello',
+            value    : 'Hello',
             listeners: {
-                change    : 'up.onTextChange'
+                change: 'up.onTextChange'
             }
         }, {
             module   : TextField,
             labelText: 'Text',
             reference: 'textFieldTwo',
-            value: 'world!',
+            value    : 'world!',
             listeners: {
-                change    : 'up.onTextChange'
+                change: 'up.onTextChange'
             }
         }, {
-            module: Component,
-            reference: 'foo',
+            module   : Component,
+            reference: 'foo'
         }]        
     }
-    onTextChange(data){
+    onTextChange(data) {
         this.getReference('foo').html = `${this.getReference('textFieldOne').value} ${this.getReference('textFieldTwo').value}`
     }
 }
@@ -293,9 +283,9 @@ Neo.setupClass(MainView);
 </pre>
 
 <pre data-neo>
+import Component from '../component/Base.mjs';
 import Container from '../container/Base.mjs';
 import TextField from '../form/field/Text.mjs';
-import Component from '../component/Base.mjs';
 
 class MainView extends Container {    
     static config = {
@@ -306,22 +296,22 @@ class MainView extends Container {
                 bar: 'world!'
             }
         },
-        layout   : {ntype:'vbox', align:'start'},
-        
-        items: [{
+
+        layout: {ntype:'vbox', align:'start'},
+        items : [{
             module   : TextField,
             labelText: 'Text',
-            bind: {value: {twoWay: true, value: data => data.foo}}
+            bind     : {value: {twoWay: true, value: data => data.foo}}
         }, {
             module   : TextField,
             labelText: 'Text',
-            bind: {value: {twoWay: true, value: data => data.bar}}
+            bind     : {value: {twoWay: true, value: data => data.bar}}
         }, {
             module: Component,
-            bind: {html: data => `${data.foo} ${data.bar}`}
+            bind  : {html: data => `${data.foo} ${data.bar}`}
         }]
     }
-    onTextChange(data){
+    onTextChange(data) {
         this.getReference('foo').html = data.value;
     }
 }

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

@@ -1,9 +1,9 @@
-Neo.mjs is multi-threaded. There are app worker threads
+Neo.mjs is multi-threaded. There are worker threads
 that handle data access, application logic,
 and keeping track of DOM updates. Practically all your
 application logic is run in parallel in these threads.
 However, anything that needs to actually reference or update
-the DOM, or use the `window` object, must be done in the main 
+the DOM (`window.document`), or just use the `window` object, must be done in the main 
 application thread. 
 
 That's the purpose of main thread addons. These are classes whose
@@ -18,15 +18,14 @@ please return a specified `window` property." Neo.mjs
 lets you do that via `Neo.Main.getByPath()`. For
 example, the following statement logs the URL query string.
 
-
 <pre data-javascript>
-const search = await Neo.Main.getByPath('window.location.search');
+const search = await Neo.Main.getByPath({path: 'window.location.search'});
 console.log(search); // Logs the search string
 </pre>
 
-`Neo.Main` has some simple methods for accessing the 
-main thread, but for something with a non-trivial API
-you'd use a _main thread addon_. 
+`Neo.Main` & `Neo.main.DomAccess` provide some basic methods for accessing the 
+main thread, but in case you want to use a third party library which relies on directly
+working with the DOM, you'd use a _main thread addon_. 
 
 Google Maps is a good example of this. In Neo.mjs, most
 views are responsible for updating their own vdom, but
@@ -36,11 +35,10 @@ certain things via the Google Maps API. Therefore, in Neo.mjs,
 Google Maps is implemented as a main thread addon which
 loads the libraries and exposes whatever methods we'll need
 to run from the other Neo.mjs threads. In addition, in a
-Neo.mjs application we want to use Google maps like any other
+Neo.mjs application we want to use Google Maps like any other
 component, so Neo.mjs also provides a component wrapper. In
 summary: 
 - The main-thread addon contains the code run in the main thread,
-and exposes what methods can be run by other web-workders,
-and
+and exposes what methods can be run by other web-workers (remote method access)
 - The component wrapper lets you use it like any other component,
 internally calling the main thread methods as needed.

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

@@ -8,6 +8,10 @@
     padding         : 0 3rem;
     width           : -webkit-fill-available;
 
+    @media (max-width: 600px) {
+        padding: 1rem 1rem 0;
+    }
+
     pre[data-javascript] {
         border       : thin solid lightgray;
         border-radius: 4px;

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

@@ -29,14 +29,15 @@
             }
 
             .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;
+                background-color: #fff;
+                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;
 
                 .neo-button-glyph {
                     font-size: 13px;

package/resources/scss/src/apps/portal/services/Component.scss

@@ -5,7 +5,8 @@
 
     .info-block {
         background-color: lighten(#8BA6FF, 10%);
-        border-radius   : 10px;
+        border-radius   : 8px;
+        box-shadow      : 0 3px 6px rgba(0, 0, 0, 0.3);
         margin-left     : auto;
         margin-right    : auto;
         margin-top      : 2em;

package/src/DefaultConfig.mjs

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