neo.mjs 7.0.1 → 7.0.3

package/README.md

@@ -11,12 +11,15 @@
   <a href="./CONTRIBUTING.md"><img src="https://img.shields.io/badge/PRs-welcome-green.svg?logo=GitHub&logoColor=white" alt="PRs Welcome"></a>
 </p>
 
-# Harness the Power of Multi-Threading for Ultra-Fast Frontends
+# Modern Enterprise-Ready JavaScript Framework
 
 ## Content
 1. <a href="#introduction">Introduction</a>
 2. <a href="#slack-channel">Slack Channel for questions & feedback</a>
 3. <a href="#architectures">Scalable frontend architectures</a>
+4. <a href="#getting-started">Getting Started</a>
+5. <a href="#cli">Command-Line Interface</a>
+6. <a href="#blog">Blog</a>
 
 </br></br>
 <h2 id="introduction">1. Introduction</h2>
@@ -56,17 +59,36 @@ Potential Use-Cases:
 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></br>
+<h2 id="getting-started">4. Getting Started</h2>
+Take a look at the <a href="./.github/GETTING_STARTED.md">Getting Started Guide</a>
+</br></br>
+There are 2 options:
 
+1. In case you want to create a Neo.mjs App (workspace), use
+   > npx neo-app@latest
+ 
+2. In case you want to work on the Framework and your App in parallel, you can fork this repository and use
+   > npm run create-app
+
+   inside of it.
 
-</br></br>
 
-[Spoiler] We are in the middle of wrapping up the new Framework Website,
-which will include the first version of a self-study based Learning Section.
+* You can easily move your app from the framework to a workspace or vice versa.
+* The CLI inside the framework and inside a workspace works the same.
 
-We are aiming to release it on August 1st, 2024.
+Make sure to take a look into the <a href="https://neomjs.com/dist/production/apps/portal/#/learn/Setup">Learning Section</a>
 
-The current development state is already inside the dev branch.
+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/Earthquakes">Earthquakes Tutorial</a>
 
+</br></br>
+<h2 id="cli">5. Command-Line Interface</h2>
+You can find an in-depth description here: <a href="./buildScripts/README.md">Neo.mjs CLI</a>
+
+</br></br>
+<h2 id="blog">6. Blog</h2>
+All Blog Posts are listed here: <a href="https://neomjs.com/dist/production/apps/portal/#/blog">Neo.mjs Blog</a>
 
 </br></br>
 Copyright (c) 2015 - today, <a href="https://www.linkedin.com/in/tobiasuhlig/">Tobias Uhlig</a>

package/apps/ServiceWorker.mjs

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

package/apps/portal/Overwrites.mjs

@@ -4,16 +4,6 @@ Neo.overwrites = {
             Base: {
                 editRoute: false
             }
-        },
-        form: {
-            field: {
-                Base: {
-                    delayable: {
-                        fireChangeEvent    : null,
-                        fireUserChangeEvent: null
-                    }
-                }
-            }
         }
     }
 }

package/apps/portal/index.html

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

package/apps/portal/view/home/FeatureSection.mjs

@@ -37,6 +37,7 @@ class FeatureSection extends Container {
          */
         headline_: null,
         /**
+         * Can either contain a route or a URL
          * @member {String|null} learnMoreRoute_=null
          */
         learnMoreRoute_: null,
@@ -136,7 +137,8 @@ class FeatureSection extends Container {
      * @protected
      */
     afterSetLearnMoreRoute(value, oldValue) {
-        this.getItem('learn-more-button').route = value
+        let targetConfig = value.startsWith('http') ? 'url' : 'route';
+        this.getItem('learn-more-button')[targetConfig] = value
     }
 
     /**

package/apps/portal/view/home/FooterContainer.mjs

@@ -111,7 +111,7 @@ class FooterContainer extends Container {
             }, {
                 module: Component,
                 cls   : ['neo-version'],
-                html  : 'v7.0.1'
+                html  : 'v7.0.3'
             }]
         }],
         /**

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

@@ -20,9 +20,9 @@ class Colors extends FeatureSection {
          */
         headline: 'Amazing Potential',
         /**
-         * @member {String} learnMoreRoute='#/learn/WhyNeo-Speed'
+         * @member {String} learnMoreRoute='https://itnext.io/sharing-real-time-websocket-data-across-multiple-browser-windows-4e0538dd7563?source=friends_link&sk=9efb3e4f38c82fb3e04899c61bb5fcb8'
          */
-        learnMoreRoute: '#/learn/WhyNeo-Speed',
+        learnMoreRoute: 'https://itnext.io/sharing-real-time-websocket-data-across-multiple-browser-windows-4e0538dd7563?source=friends_link&sk=9efb3e4f38c82fb3e04899c61bb5fcb8',
         /**
          * @member {String} livePreviewCode
          */

package/buildScripts/README.md

@@ -11,8 +11,8 @@ You can run each script inside your terminal. E.g.:
 
 Make sure to call them on the top-level folder (the one containing the package.json).
 
-In case you want to pass program options, please use the node based calls instead. E.g.:
-> node ./buildScripts/buildAll.js -h
+In case you want to pass program options, use -- before adding options. E.g.:
+> npm run build-all -- -h
 
 All programs which are using options also have the visual inquirer interface in place.</br>
 So it is up to you if you prefer adding the options manually (e.g. for adding them into your own CI),</br>
@@ -25,15 +25,14 @@ where the framework is included as a node module, but needs to deploy to a top-l
 ## Content
 1. <a href="#build-all">build-all</a>
 2. <a href="#build-all-questions">build-all-questions</a>
-3. <a href="#build-my-apps">build-my-apps</a>
-4. <a href="#build-themes">build-themes</a>
-5. <a href="#build-threads">build-threads</a>
-6. <a href="#create-app">create-app</a>
-7. <a href="#generate-docs-json">generate-docs-json</a>
-8. <a href="#server-start">server-start</a>
+3. <a href="#build-themes">build-themes</a>
+4. <a href="#build-threads">build-threads</a>
+5. <a href="#create-app">create-app</a>
+6. <a href="#generate-docs-json">generate-docs-json</a>
+7. <a href="#server-start">server-start</a>
 
 ## build-all
-> node ./buildScripts/buildAll.js -f -n
+> npm run build-all
 
 It is strongly recommended to run this program after each git pull on this repo.
 
@@ -70,7 +69,7 @@ or dist/production.
 Source code: <a href="./buildAll.js">build-all</a>
 
 ## build-all-questions
-> node ./buildScripts/buildAll.js -f
+> npm run build-all-questions
 
 This entry point is running the build-all program without passing options,
 so we can select them using the inquirer interface.
@@ -130,64 +129,8 @@ neo.mjs buildAll
 
 Source code: <a href="./buildAll.js">build-all</a>
 
-## build-my-apps
-> node ./buildScripts/webpack/buildMyApps.js -f
-
-```bash
-Options:
-  -V, --version       output the version number
-  -i, --info          print environment debug info
-  -a, --apps <value>  "all", "Covid", "RealWorld", "RealWorld2", "SharedCovid", "SharedCovidChart", "SharedCovidGallery",
-                      "SharedCovidHelix", "SharedCovidMap", "SharedDialog", "SharedDialog2", "Website"
-  -e, --env <value>   "all", "dev", "prod"
-  -f, --framework    
-  -n, --noquestions  
-  -h, --help          display help for command
-```
-
-build-my-apps is very similar to build-threads => App.
-
-In both cases we are parsing <a href="../src/worker/App.mjs">worker/App</a>,
-which will dynamically import all Apps inside the src/app folder and the Docs App and create split chunks
-for all combinations. This enables you to add multiple Apps on one Page with close to zero overhead
-in dist/development & dist/production.
-
-The only difference to build-threads => App is that you can limit the generation of the App related index.html files,
-so it is a little faster.
-
-Let us take a look at the different inquirer steps:
-1. Pick the -e (env) option:
-```bash
-neo % npm run build-my-apps
-
-> neo.mjs@1.4.14 build-my-apps /Users/Shared/github/neomjs/neo
-> node ./buildScripts/webpack/buildMyApps.js -f
-
-neo.mjs buildMyApps
-? Please choose the environment: (Use arrow keys)
-❯ all 
-  dev 
-  prod 
-```
-2. Pick the -a (apps) option:
-```bash
-neo.mjs buildMyApps
-? Please choose the environment: all
-? Please choose which apps you want to build: (Press <space> to select, <a> to toggle all, <i> to invert selection)
-❯◯ Covid
- ◯ RealWorld
- ◯ RealWorld2
- ◯ SharedCovid
- ◯ SharedCovidChart
- ◯ SharedCovidGallery
- ◯ SharedCovidHelix
-(Move up and down to reveal more choices)
-```
-
-Source code: <a href="./webpack/buildMyApps.js">build-my-apps</a>
-
 ## build-themes
-> node ./buildScripts/webpack/buildThemes.js -f
+> npm run build-themes
 
 ```bash
 Options:
@@ -238,7 +181,7 @@ neo.mjs buildThemes
 Source code: <a href="./webpack/buildThemes.js">build-themes</a>
 
 ## build-threads
-> node ./buildScripts/webpack/buildThreads.js -f
+> npm run build-threads
 
 Since the default neo.mjs setup is using 3 workers, we have the following 4 threads to build:</br>
 "app", "data", "main", "vdom"
@@ -286,7 +229,7 @@ neo.mjs buildThreads
 Source code: <a href="./webpack/buildThreads.js">build-threads</a>
 
 ## create-app
-> node ./buildScripts/createApp.js
+> npm run create-app
 
 Again: In case you want to create an App (workspace) based on neo.mjs, you don't need to clone this repository.</br>
 Please take a look at the <a href="https://github.com/neomjs/create-app">create-app repository</a> (npx neo-app).
@@ -294,14 +237,14 @@ Please take a look at the <a href="https://github.com/neomjs/create-app">create-
 If you want to create a new Demo App inside the framework repo,
 using the create-app program makes sense, since you can work on the app & framework code in parallel.
 
-Using the default options, this will generate the following 3 files:
+Using the default options, this will generate the following 4 files:
 ```
 neo
  | - apps
  |    | - myapp
  |    |    | - app.mjs
- |    |    | - config.json
  |    |    | - index.html
+ |    |    | - neo-config.json
  |    |    | - MainContainer.mjs
 ```
 
@@ -377,14 +320,15 @@ neo.mjs create-app
 No worries, you can easily change the options after you created your App shell.
 
 E.g. in case you want to add the MapboxGL main thread addon later on,
-you can add it inside your index.html file:
-```js
-Object.assign(Neo.config, {
-    appPath         : 'apps/myapp/app.mjs',
-    basePath        : '../../',
-    environment     : 'development',
-    mainThreadAddons: ['MapboxGL', 'Stylesheet']
-});
+you can add it inside your neo-config.json file:
+```json
+{
+    "appPath"         : "apps/myapp/app.mjs",
+    "basePath"        : "../../",
+    "environment"     : "development",
+    "mainPath"        : "./Main.mjs",
+    "mainThreadAddons": ["DragDrop", "MapboxGL", "Navigator", "Stylesheet"]
+}
 ```
 
 Regarding the -u (SharedWorkers) option:</br>
@@ -399,7 +343,7 @@ Using SharedWorkers, you need to open a separate Window to inspect them:</br>
 Source code: <a href="./buildScripts/createApp.js">create-app</a>
 
 ## generate-docs-json
-> node ./buildScripts/docs/jsdocx.js
+> npm run generate-docs-json
 
 neo.mjs is using jsdoc
 > https://github.com/jsdoc/jsdoc
@@ -414,7 +358,7 @@ There are several enhancements around it to polish it for our class system impro
 Source code: <a href="./docs/jsdocx.js">generate-docs-json</a>
 
 ## server-start
-> webpack serve -c ./buildScripts/webpack/webpack.server.config.js --open
+> npm run server-start
 
 To open JS modules locally inside your Browser you need a web-server, since importing files is not possible
 otherwise for security reasons. You could enable this on an OS level, but this is definitely not recommended.

package/examples/ServiceWorker.mjs

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

package/examples/component/coronaGallery/CountryGallery.mjs

@@ -60,6 +60,7 @@ class CountryGallery extends Gallery {
     createItem(vdomItem, record, index) {
         let me    = this,
             cls   = ['neo-gallery-item', 'image-wrap', 'view', 'neo-transition-1000'],
+            fn    = CountryGallery.formatNumber,
             style = {height: (me.itemHeight - 70) + 'px', width: me.itemWidth  + 'px'};
 
         return {cls, id: me.getItemVnodeId(record[me.keyProperty]), tabIndex: '-1', cn: [
@@ -72,24 +73,24 @@ class CountryGallery extends Gallery {
                     {tag: 'table', cls: ['neo-content-table'], cn: [
                         {tag: 'tr', cn: [
                             {tag: 'td', html: 'Cases'},
-                            {tag: 'td', cls: ['neo-align-right'], html: record.cases},
+                            {tag: 'td', cls: ['neo-align-right'], html: fn(record.cases)},
                             {tag: 'td', style: {width: '100%'}},
                             {tag: 'td', html: 'Cases today'},
-                            {tag: 'td', cls: ['neo-align-right'], html: record.todayCases}
+                            {tag: 'td', cls: ['neo-align-right'], html: fn(record.todayCases)}
                         ]},
                         {tag: 'tr', cn: [
                             {tag: 'td', html: 'Deaths'},
-                            {tag: 'td', cls: ['neo-align-right', 'neo-content-deaths'], html: record.deaths},
+                            {tag: 'td', cls: ['neo-align-right', 'neo-content-deaths'], html: fn(record.deaths)},
                             {tag: 'td', style: {width: '100%'}},
                             {tag: 'td', html: 'Deaths today'},
-                            {tag: 'td', cls: ['neo-align-right', 'neo-content-deaths'], html: record.todayDeaths}
+                            {tag: 'td', cls: ['neo-align-right', 'neo-content-deaths'], html: fn(record.todayDeaths)}
                         ]},
                         {tag: 'tr', cn: [
                             {tag: 'td', html: 'Recovered'},
-                            {tag: 'td', cls: ['neo-align-right', 'neo-content-recovered'], html: record.recovered},
+                            {tag: 'td', cls: ['neo-align-right', 'neo-content-recovered'], html: fn(record.recovered)},
                             {tag: 'td', style: {width: '100%'}},
                             {tag: 'td', html: 'Critical'},
-                            {tag: 'td', cls: ['neo-align-right', 'neo-content-critical'], html: record.critical}
+                            {tag: 'td', cls: ['neo-align-right', 'neo-content-critical'], html: fn(record.critical)}
                         ]}
                     ]}
                 ]}
@@ -97,6 +98,14 @@ class CountryGallery extends Gallery {
         ]}
     }
 
+    /**
+     * @param {Number} value
+     * @returns {String}
+     */
+    static formatNumber(value) {
+        return value.toLocaleString()
+    }
+
     /**
      * @param {String} name
      * @returns {String} url