neo.mjs 7.3.0 → 7.4.0

package/README.md

@@ -25,9 +25,10 @@ you have found the right spot.
 1. <a href="#introduction">Introduction</a>
 2. <a href="#use-cases">Potential Use Cases</a>
 3. <a href="#slack-channel">Slack Channel for questions & feedback</a>
-4. <a href="#getting-started">Getting Started</a>
-5. <a href="#cli">Command-Line Interface</a>
-6. <a href="#blog">Blog</a>
+4. <a href="#examples">Examples</a>
+5. <a href="#getting-started">Getting Started</a>
+6. <a href="#cli">Command-Line Interface</a>
+7. <a href="#blog">Blog</a>
 
 </br><h2 id="introduction">1. Introduction</h2>
 Neo.mjs drives the OMT (off the main thread) paradigm into perfection,
@@ -70,16 +71,21 @@ but instead on a super-fast update & navigation experience for returning users.
 Join our community:</br>
 <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&style=for-the-badge" alt="Join the Slack channel"></a>
 
-</br><h2 id="getting-started">4. Getting Started</h2>
+</br><h2 id="examples">4. Examples</h2>
+Some exciting Examples are listed here: <a href="https://neomjs.com/dist/production/apps/portal/#/examples">Neo.mjs Examples</a>
+
+Many more are included inside the repos `src/apps` & `src/examples` folders.
+
+</br><h2 id="getting-started">5. Getting Started</h2>
 * Take a look at the <a href="./.github/GETTING_STARTED.md">Getting Started Guide</a>
 * Make sure to dive into the <a href="https://neomjs.com/dist/production/apps/portal/#/learn/gettingstarted.Setup">Learning Section</a>
 * The most advanced tutorial to help you with getting up to speed is this one:</br>
    <a href="https://neomjs.com/dist/production/apps/portal/#/learn/tutorials.Earthquakes">Earthquakes Tutorial</a>
 
-</br><h2 id="cli">5. Command-Line Interface</h2>
+</br><h2 id="cli">6. Command-Line Interface</h2>
 You can find an in-depth description here: <a href="./buildScripts/README.md">Neo.mjs CLI</a>
 
-</br><h2 id="blog">6. Blog</h2>
+</br><h2 id="blog">7. Blog</h2>
 All Blog Posts are listed here: <a href="https://neomjs.com/dist/production/apps/portal/#/blog">Neo.mjs Blog</a>
 
 </br></br>

package/apps/ServiceWorker.mjs

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

package/apps/portal/index.html

@@ -16,7 +16,7 @@
         "@type": "Organization",
         "name": "Neo.mjs"
       },
-      "datePublished": "2024-09-13",
+      "datePublished": "2024-09-15",
       "publisher": {
         "@type": "Organization",
         "name": "Neo.mjs"

package/apps/portal/resources/data/examples_devmode.json

@@ -1,88 +1,115 @@
 [{
-    "id"           : 18,
+    "id"           : 22,
     "image"        : "devmode/sharedcovid.png",
     "name"         : "Multi Window Covid App",
     "sharedWorkers": true,
     "sourceUrl"    : "apps/sharedcovid",
     "url"          : "apps/sharedcovid/index.html#mainview=table"
 }, {
-    "id"       : 17,
+    "id"       : 21,
     "image"    : "devmode/calendar-preview.png",
     "name"     : "Calendar",
     "sourceUrl": "src/calendar",
     "url"      : "examples/calendar/basic/index.html"
 }, {
-    "id"       : 16,
+    "id"       : 20,
     "image"    : "devmode/helix.png",
     "name"     : "component.Helix",
     "sourceUrl": "examples/component/helix",
     "url"      : "examples/component/helix/index.html"
 }, {
-    "id"       : 15,
+    "id"       : 19,
     "image"    : "devmode/coronaGallery.png",
     "name"     : "COVID-19 Gallery",
     "sourceUrl": "examples/component/coronaGallery",
     "url"      : "examples/component/coronaGallery/index.html"
 }, {
-    "id"       : 14,
+    "id"       : 18,
+    "image"    : "devmode/offscreenCanvas.png",
+    "name"     : "OffscreenCanvas",
+    "sourceUrl": "https://github.com/neomjs/offscreen-canvas/",
+    "url"      : "https://neomjs.github.io/pages2/workspace/neo-offscreen-canvas-demo/apps/myapp/index.html"
+}, {
+    "id"           : 17,
+    "image"        : "devmode/sharedOffscreenCanvas.png",
+    "name"         : "Multi-Window OffscreenCanvas",
+    "sourceUrl"    : "https://github.com/neomjs/shared-offscreen",
+    "sharedWorkers": true,
+    "url"          : "https://neomjs.github.io/pages2/workspace/neo-shared-offscreen-canvas-demo/apps/mainapp/index.html"
+}, {
+    "id"       : 16,
     "image"    : "devmode/tabContainer.png",
     "name"     : "tab.Container",
     "sourceUrl": "examples/tab/container",
     "url"      : "examples/tab/container/index.html"
 }, {
-    "id"       : 13,
+    "id"       : 15,
     "image"    : "devmode/model-component-example.png",
     "name"     : "View Models Example",
     "sourceUrl": "examples/model/advanced",
     "url"      : "examples/model/advanced/index.html"
 }, {
-    "id"       : 12,
+    "id"       : 14,
     "image"    : "devmode/dragdrop.png",
     "name"     : "Dialog drag&drop",
     "sourceUrl": "examples/dialog",
     "url"      : "examples/dialog/"
 }, {
-    "id"       : 11,
+    "id"           : 13,
+    "image"        : "dist_prod/colorsApp.png",
+    "name"         : "Colors Dashboard",
+    "sharedWorkers": true,
+    "sourceUrl"    : "apps/colors",
+    "url"          : "apps/colors/index.html"
+}, {
+    "id"       : 12,
     "image"    : "devmode/covidDashboard.png",
     "name"     : "Covid Dashboard",
     "sourceUrl": "apps/covid",
     "url"      : "apps/covid/index.html"
 }, {
-    "id"       : 10,
+    "id"       : 11,
     "image"    : "devmode/coronaHelix.png",
     "name"     : "COVID-19 Helix",
     "sourceUrl": "examples/component/coronaHelix",
     "url"      : "examples/component/coronaHelix/index.html"
 }, {
-    "id"       : 9,
+    "id"       : 10,
     "image"    : "devmode/gallery.png",
     "name"     : "component.Gallery",
     "sourceUrl": "examples/component/gallery",
     "url"      : "examples/component/gallery/index.html"
 }, {
-    "id"       : 8,
+    "id"       : 9,
     "image"    : "devmode/tableFiltering.png",
     "name"     : "Table Filtering",
     "sourceUrl": "examples/tableFiltering",
     "url"      : "examples/tableFiltering/"
 }, {
-    "id"       : 7,
+    "id"       : 8,
     "image"    : "devmode/dateSelector.png",
     "name"     : "component.DateSelector",
     "sourceUrl": "examples/component/dateSelector",
     "url"      : "examples/component/dateSelector/index.html"
 }, {
-    "id"       : 6,
+    "id"       : 7,
     "image"    : "devmode/dateField.png",
     "name"     : "form.field.Date",
     "sourceUrl": "examples/form/field/date",
     "url"      : "examples/form/field/date/index.html"
 }, {
-    "id"       : 5,
+    "id"       : 6,
     "image"    : "devmode/selectField.png",
     "name"     : "form.field.ComboBox",
     "sourceUrl": "examples/form/field/combobox",
     "url"      : "examples/form/field/combobox/index.html"
+}, {
+    "id"           : 5,
+    "image"        : "dist_prod/portalApp.png",
+    "name"         : "Portal App",
+    "sharedWorkers": true,
+    "sourceUrl"    : "apps/portal",
+    "url"          : "apps/portal/index.html"
 }, {
     "id"       : 4,
     "image"    : "devmode/siesta.png",

package/apps/portal/resources/data/examples_dist_dev.json

@@ -1,88 +1,115 @@
 [{
-    "id"           : 17,
+    "id"           : 21,
     "image"        : "devmode/sharedcovid.png",
     "name"         : "Multi Window Covid App",
     "sharedWorkers": true,
     "sourceUrl"    : "apps/sharedcovid",
     "url"          : "dist/development/apps/sharedcovid/index.html#mainview=table"
 }, {
-    "id"       : 16,
+    "id"       : 20,
     "image"    : "devmode/calendar-preview.png",
     "name"     : "Calendar",
     "sourceUrl": "src/calendar",
     "url"      : "dist/development/examples/calendar/basic/index.html"
 }, {
-    "id"       : 15,
+    "id"       : 19,
     "image"    : "devmode/helix.png",
     "name"     : "component.Helix",
     "sourceUrl": "examples/component/helix",
     "url"      : "dist/development/examples/component/helix/index.html"
 }, {
-    "id"       : 14,
+    "id"       : 18,
     "image"    : "devmode/coronaGallery.png",
     "name"     : "COVID-19 Gallery",
     "sourceUrl": "examples/component/coronaGallery",
     "url"      : "dist/development/examples/component/coronaGallery/index.html"
 }, {
-    "id"       : 13,
+    "id"       : 17,
+    "image"    : "devmode/offscreenCanvas.png",
+    "name"     : "OffscreenCanvas",
+    "sourceUrl": "https://github.com/neomjs/offscreen-canvas/tree/main/apps/myapp",
+    "url"      : "https://neomjs.github.io/pages2/workspace/neo-offscreen-canvas-demo/dist/development/apps/myapp/index.html"
+}, {
+    "id"           : 16,
+    "image"        : "devmode/sharedOffscreenCanvas.png",
+    "name"         : "Multi-Window OffscreenCanvas",
+    "sharedWorkers": true,
+    "sourceUrl"    : "https://github.com/neomjs/shared-offscreen",
+    "url"          : "https://neomjs.github.io/pages2/workspace/neo-shared-offscreen-canvas-demo/dist/development/apps/mainapp/index.html"
+}, {
+    "id"       : 15,
     "image"    : "devmode/tabContainer.png",
     "name"     : "tab.Container",
     "sourceUrl": "examples/tab/container",
     "url"      : "dist/development/examples/tab/container/index.html"
 }, {
-    "id"       : 12,
+    "id"       : 14,
     "image"    : "devmode/model-component-example.png",
     "name"     : "View Models Example",
     "sourceUrl": "examples/model/advanced",
     "url"      : "dist/development/examples/model/advanced/index.html"
 }, {
-    "id"       : 11,
+    "id"       : 13,
     "image"    : "devmode/dragdrop.png",
     "name"     : "Dialog drag&drop",
     "sourceUrl": "examples/dialog",
     "url"      : "dist/development/examples/dialog/"
 }, {
-    "id"       : 10,
+    "id"           : 12,
+    "image"        : "dist_prod/colorsApp.png",
+    "name"         : "Colors Dashboard",
+    "sharedWorkers": true,
+    "sourceUrl"    : "apps/colors",
+    "url"          : "dist/development/apps/colors/index.html"
+}, {
+    "id"       : 11,
     "image"    : "devmode/covidDashboard.png",
     "name"     : "Covid Dashboard",
     "sourceUrl": "apps/covid",
     "url"      : "dist/development/apps/covid/index.html#mainview=table"
 }, {
-    "id"       : 9,
+    "id"       : 10,
     "image"    : "devmode/coronaHelix.png",
     "name"     : "COVID-19 Helix",
     "sourceUrl": "examples/component/coronaHelix",
     "url"      : "dist/development/examples/component/coronaHelix/index.html"
 }, {
-    "id"       : 8,
+    "id"       : 9,
     "image"    : "devmode/gallery.png",
     "name"     : "component.Gallery",
     "sourceUrl": "examples/component/gallery",
     "url"      : "dist/development/examples/component/gallery/index.html"
 }, {
-    "id"       : 7,
+    "id"       : 8,
     "image"    : "devmode/tableFiltering.png",
     "name"     : "Table Filtering",
     "sourceUrl": "examples/tableFiltering",
     "url"      : "dist/development/examples/tableFiltering/"
 }, {
-    "id"       : 6,
+    "id"       : 7,
     "image"    : "devmode/dateSelector.png",
     "name"     : "component.DateSelector",
     "sourceUrl": "examples/component/dateSelector",
     "url"      : "dist/development/examples/component/dateSelector/index.html"
 }, {
-    "id"       : 5,
+    "id"       : 6,
     "image"    : "devmode/dateField.png",
     "name"     : "form.field.Date",
     "sourceUrl": "examples/form/field/date",
     "url"      : "dist/development/examples/form/field/date/index.html"
 }, {
-    "id"       : 4,
+    "id"       : 5,
     "image"    : "devmode/selectField.png",
     "name"     : "form.field.ComboBox",
     "sourceUrl": "examples/form/field/combobox",
     "url"      : "dist/development/examples/form/field/combobox/index.html"
+}, {
+    "id"           : 4,
+    "image"        : "dist_prod/portalApp.png",
+    "name"         : "Portal App",
+    "sharedWorkers": true,
+    "sourceUrl"    : "apps/portal",
+    "url"          : "dist/development/apps/portal/index.html"
 }, {
     "hidden"       : true,
     "id"           : 3,

package/apps/portal/resources/data/examples_dist_prod.json

@@ -1,88 +1,115 @@
 [{
-    "id"           : 17,
+    "id"           : 21,
     "image"        : "devmode/sharedcovid.png",
     "name"         : "Multi Window Covid App",
     "sharedWorkers": true,
     "sourceUrl"    : "apps/sharedcovid",
     "url"          : "dist/production/apps/sharedcovid/index.html#mainview=table"
 }, {
-    "id"       : 16,
+    "id"       : 20,
     "image"    : "devmode/calendar-preview.png",
     "name"     : "Calendar",
     "sourceUrl": "src/calendar",
     "url"      : "dist/production/examples/calendar/basic/index.html"
 }, {
-    "id"       : 15,
+    "id"       : 19,
     "image"    : "devmode/helix.png",
     "name"     : "component.Helix",
     "sourceUrl": "examples/component/helix",
     "url"      : "dist/production/examples/component/helix/index.html"
 }, {
-    "id"       : 14,
+    "id"       : 18,
     "image"    : "devmode/coronaGallery.png",
     "name"     : "COVID-19 Gallery",
     "sourceUrl": "examples/component/coronaGallery",
     "url"      : "dist/production/examples/component/coronaGallery/index.html"
 }, {
-    "id"       : 13,
+    "id"       : 17,
+    "image"    : "devmode/offscreenCanvas.png",
+    "name"     : "OffscreenCanvas",
+    "sourceUrl": "https://github.com/neomjs/offscreen-canvas/tree/main/apps/myapp",
+    "url"      : "https://neomjs.github.io/pages2/workspace/neo-offscreen-canvas-demo/dist/production/apps/myapp/index.html"
+}, {
+    "id"           : 16,
+    "image"        : "devmode/sharedOffscreenCanvas.png",
+    "name"         : "Multi-Window OffscreenCanvas",
+    "sharedWorkers": true,
+    "sourceUrl"    : "https://github.com/neomjs/shared-offscreen",
+    "url"          : "https://neomjs.github.io/pages2/workspace/neo-shared-offscreen-canvas-demo/dist/production/apps/mainapp/index.html"
+}, {
+    "id"       : 15,
     "image"    : "devmode/tabContainer.png",
     "name"     : "tab.Container",
     "sourceUrl": "examples/tab/container",
     "url"      : "dist/production/examples/tab/container/index.html"
 }, {
-    "id"       : 12,
+    "id"       : 14,
     "image"    : "devmode/model-component-example.png",
     "name"     : "View Models Example",
     "sourceUrl": "examples/model/advanced",
     "url"      : "dist/production/examples/model/advanced/index.html"
 }, {
-    "id"       : 11,
+    "id"       : 13,
     "image"    : "devmode/dragdrop.png",
     "name"     : "Dialog drag&drop",
     "sourceUrl": "examples/dialog",
     "url"      : "dist/production/examples/dialog/"
 }, {
-    "id"       : 10,
+    "id"           : 12,
+    "image"        : "dist_prod/colorsApp.png",
+    "name"         : "Colors Dashboard",
+    "sharedWorkers": true,
+    "sourceUrl"    : "apps/colors",
+    "url"          : "dist/production/apps/colors/index.html"
+}, {
+    "id"       : 11,
     "image"    : "devmode/covidDashboard.png",
     "name"     : "Covid Dashboard",
     "sourceUrl": "apps/covid",
     "url"      : "dist/production/apps/covid/index.html#mainview=table"
 }, {
-    "id"       : 9,
+    "id"       : 10,
     "image"    : "devmode/coronaHelix.png",
     "name"     : "COVID-19 Helix",
     "sourceUrl": "examples/component/coronaHelix",
     "url"      : "dist/production/examples/component/coronaHelix/index.html"
 }, {
-    "id"       : 8,
+    "id"       : 9,
     "image"    : "devmode/gallery.png",
     "name"     : "component.Gallery",
     "sourceUrl": "examples/component/gallery",
     "url"      : "dist/production/examples/component/gallery/index.html"
 }, {
-    "id"       : 7,
+    "id"       : 8,
     "image"    : "devmode/tableFiltering.png",
     "name"     : "Table Filtering",
     "sourceUrl": "examples/tableFiltering",
     "url"      : "dist/production/examples/tableFiltering/"
 }, {
-    "id"       : 6,
+    "id"       : 7,
     "image"    : "devmode/dateSelector.png",
     "name"     : "component.DateSelector",
     "sourceUrl": "examples/component/dateSelector",
     "url"      : "dist/production/examples/component/dateSelector/index.html"
 }, {
-    "id"       : 5,
+    "id"       : 6,
     "image"    : "devmode/dateField.png",
     "name"     : "form.field.Date",
     "sourceUrl": "examples/form/field/date",
     "url"      : "dist/production/examples/form/field/date/index.html"
 }, {
-    "id"       : 4,
+    "id"       : 5,
     "image"    : "devmode/selectField.png",
     "name"     : "form.field.ComboBox",
     "sourceUrl": "examples/form/field/combobox",
     "url"      : "dist/production/examples/form/field/combobox/index.html"
+}, {
+    "id"           : 4,
+    "image"        : "dist_prod/portalApp.png",
+    "name"         : "Portal App",
+    "sharedWorkers": true,
+    "sourceUrl"    : "apps/portal",
+    "url"          : "dist/production/apps/portal/index.html"
 }, {
     "hidden"       : true,
     "id"           : 3,

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

@@ -54,9 +54,9 @@ class List extends BaseList {
     }
 
     /**
-     * @member {String} basePath
+     * @member {String} imageBasePath
      */
-    get basePath() {
+    get imageBasePath() {
         let basePath;
 
         if (Neo.config.isGitHubPages) {
@@ -114,20 +114,18 @@ class List extends BaseList {
      * @param {Object} record
      */
     createItemContent(record) {
-        let {basePath} = this;
+        let {imageBasePath} = this;
 
         const vdomCn = [
             {cls: ['content'], data: {recordId: record.id}, cn: [
                 {cls: ['neo-relative'], cn: [
-                    {cls: ['neo-full-size', 'preview-image'], flag: `image-${record.id}`
-                        //backgroundImage: `url('${basePath}/blog/${record.image}'), linear-gradient(#777, #333)`
-                    },
+                    {cls: ['neo-full-size', 'preview-image'], flag: `image-${record.id}`},
                     {cls: ['neo-absolute', 'neo-item-bottom-position'], cn: [
                         {tag: 'a', cls: ['neo-title'], href: record.url, target: '_blank', cn: [
                             {flag: 'name', html: record.name.replace(List.nameRegEx, "$1")}
                         ]},
                         {cls: ['neo-top-20'], cn: [
-                            {tag: 'img', cls: ['neo-user-image'], src: `${basePath}/blogAuthor/${record.authorImage}`},
+                            {tag: 'img', cls: ['neo-user-image'], src: `${imageBasePath}/blogAuthor/${record.authorImage}`},
                             {cls: ['neo-inner-content'], cn: [
                                 {cls: ['neo-inner-details'], flag: 'author', cn: [
                                     {tag: 'span', cls: ['neo-bold'], html: record.author}
@@ -216,12 +214,12 @@ class List extends BaseList {
      * @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,
+        let me                     = this,
+            {imageBasePath, 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++) {
@@ -231,7 +229,7 @@ class List extends BaseList {
                 needsUpdate = true;
 
                 node.style = {
-                    backgroundImage: `url('${basePath}/blog/${record.image}'), linear-gradient(#777, #333)`
+                    backgroundImage: `url('${imageBasePath}/blog/${record.image}'), linear-gradient(#777, #333)`
                 }
             }
         }