neo.mjs 6.9.10 → 6.9.12

package/buildScripts/convertDesignTokens.mjs

@@ -0,0 +1,173 @@
+import fs   from 'fs-extra';
+import os   from 'os';
+import path from 'path';
+
+let jsonPath    = './resources/design-tokens/json',
+    jsonFolder  = fs.readdirSync(jsonPath),
+    tokenPrefix = '',
+    tokenRegex  = new RegExp(/{(.*?)}/g),
+    emptyString, fileContent, keyMaxLength, map, match, matches, output;
+
+function capitalize(value) {
+    return value[0].toUpperCase() + value.slice(1);
+}
+
+function createEmptyString(len) {
+    return ' '.repeat(len);
+}
+
+function parseTokens(fileContent, prefix=tokenPrefix, map=[]) {
+    let baseKey, baseValue, keyValue, keys, modify, ns;
+
+    Object.entries(fileContent).forEach(([key, value]) => {
+        key = key.replace(/\?/g, '');
+        key = key.replace(/&/g, '-'); // some token names contain & chars
+        ns  = prefix === tokenPrefix ? (tokenPrefix + key) : key === 'value' ? prefix : `${prefix}-${key}`;
+
+        if (typeof value === 'object') {
+            keys   = Object.keys(value);
+            modify = value[keys[0]]?.$extensions?.['studio.tokens']?.modify || // the first key could contain the value,
+                     value[keys[1]]?.$extensions?.['studio.tokens']?.modify;   // so we are checking the 2nd too
+
+            if (modify) {
+                // assuming that each object contains its base value
+                keys.forEach(objKey => {
+                    if (!value[objKey].$extensions) {
+                        baseKey   = objKey;
+                        baseValue = value[baseKey].value;
+                    }
+                });
+
+                keys.forEach(objKey => {
+                    if (objKey !== baseKey) {
+                        modify   = value[objKey].$extensions?.['studio.tokens']?.modify;
+                        keyValue = `${modify.type}(${baseValue}, ${modify.value * 100}%)`;
+
+                        map.push([`${ns}-${objKey}`, keyValue]);
+                    } else {
+                        parseTokens(value[baseKey], `${ns}-${baseKey}`, map);
+                    }
+                })
+            } else {
+                parseTokens(value, ns, map);
+            }
+        } else if (key !== 'description' && key !== 'type') {
+            if (typeof value === 'string') {
+                if (!value.includes('{')) {
+                    if (value.includes(' ')) {
+                        value = `'${value}'`;
+                    }
+                } else {
+                    value   = value.replace(/\?/g, '');
+                    matches = value.matchAll(tokenRegex);
+
+                    // replace . with - only inside each token
+                    for (match of matches) {
+                        value = value.replace(match[0], match[0].replace(/\./g, '-'));
+                    }
+
+                    /*
+                     * some design tokens contain operations without empty spaces
+                     * e.g. {token}*0.9
+                     * calc() relies on having spaces around operators
+                     */
+                    value = value.replace(/(\S)(\*)(\S)/g, '$1 $2 $3');
+                    value = value.replace(/(\S)(\/)(\S)/g, '$1 $2 $3');
+
+                    // most likely a multiplication
+                    if (!value.endsWith('}')) {
+                        value = `calc(${value})`;
+                    }
+
+                    // convert tokens into CSS variables
+                    value = value.replace(/{(.*?)}/g, `var(--${tokenPrefix}$1)`);
+
+                    // multiple occurrences of a css variable need to get wrapped into calc()
+                    if (value.indexOf('var') !== value.lastIndexOf('var')) {
+                        value = `calc(${value})`;
+                    }
+
+                    // -token needs to get converted
+                    if (value.startsWith('-')) {
+                        value = `calc(${value.substring(1)} * -1)`
+                    }
+                }
+            }
+
+            map.push([ns, value]);
+        }
+    });
+
+    return map;
+}
+
+function replaceObjectValue(obj) {
+    Object.entries(obj).forEach(([key, value]) => {
+        if (key === 'value') {
+            if (typeof value === 'object') {
+                Object.entries(value).forEach(([valKey, prop]) => {
+                    // some token vars contain an empty string, which SCSS can not handle.
+                    if (prop === '') {
+                        prop = 'none';
+                    }
+
+                    obj[valKey] = {
+                        type : obj.type,
+                        value: prop
+                    };
+                });
+
+                delete obj.type;
+                delete obj.value;
+            }
+        } else if (typeof value === 'object') {
+            replaceObjectValue(value);
+        }
+    });
+}
+
+function sortArray(a, b) {
+    const nameA = a[0].toUpperCase();
+    const nameB = b[0].toUpperCase();
+    if (nameA < nameB) {
+        return -1;
+    }
+    if (nameA > nameB) {
+        return 1;
+    }
+
+    return 0;
+}
+
+jsonFolder.forEach(fileName => {
+    if (fileName.endsWith(".json")) {
+        console.log('Parsing file:', fileName);
+
+        fileContent  = JSON.parse(fs.readFileSync(path.join(jsonPath, fileName)));
+        keyMaxLength = 0;
+        output       = [':root .neo-theme-neo-light {'];
+
+        replaceObjectValue(fileContent);
+
+        map = parseTokens(fileContent);
+
+        map.sort(sortArray);
+
+        map.forEach(item => {
+            keyMaxLength = Math.max(item[0].length, keyMaxLength);
+        });
+
+        map.forEach(item => {
+            emptyString = createEmptyString(keyMaxLength - item[0].length);
+
+            output.push(`    --${item[0] + emptyString}: ${item[1]};`);
+        });
+
+        output.push('}');
+        output.push('');
+
+        fileName = capitalize(fileName.split('.').shift()) + '.scss'
+
+        fs.writeFileSync(path.join('./resources/scss/theme-neo-light/design-tokens/', fileName), output.join(os.EOL));
+    }
+});

package/buildScripts/webpack/json/myApps.template.json

@@ -4,6 +4,7 @@
         "Docs",
         "Form",
         "Krausest",
+        "NewWebsite",
         "RealWorld",
         "RealWorld2",
         "SharedCovid",

package/examples/ConfigurationViewport.mjs

@@ -6,8 +6,9 @@ import Viewport     from '../src/container/Viewport.mjs';
 
 // add custom themes here
 const themes = [
-    {name: 'neo-theme-dark',  label: 'Theme Dark'},
-    {name: 'neo-theme-light', label: 'Theme Light'}
+    {name: 'neo-theme-light',     label: 'Theme Light'},
+    {name: 'neo-theme-dark',      label: 'Theme Dark'},
+    {name: 'neo-theme-neo-light', label: 'Theme Neo-Light'}
 ]
 
 /**
@@ -121,12 +122,12 @@ class ConfigurationViewport extends Viewport {
                     handler: bindAppend(me.onSwitchTheme, me, 'cmp'),
                     style  : {marginTop: '20px'},
                     text   : theme === 'neo-theme-dark' ? 'Theme Light' : 'Theme Dark',
-                    width  : 100
+                    width  : 130
                 }, {
                     module : Button,
                     handler: me.logInstance.bind(me),
                     text   : 'Log Instance',
-                    width  : 100
+                    width  : 130
                 }]
             }]
         }];
@@ -184,7 +185,7 @@ class ConfigurationViewport extends Viewport {
         let me          = this,
             button      = data.component,
             countThemes = themes.length,
-            newTheme, oldIndex, oldTheme, themeIndex;
+            futureIndex, newTheme, oldIndex, oldTheme, themeIndex;
 
         themes.forEach((theme, index) => {
             if (button.text === theme.label) {
@@ -193,14 +194,16 @@ class ConfigurationViewport extends Viewport {
             }
         });
 
-        oldIndex = (themeIndex + 1) % countThemes;
-        oldTheme = themes[oldIndex].name;
+        futureIndex = (themeIndex + countThemes +1) % countThemes;
+        oldIndex    = (themeIndex + countThemes -1) % countThemes;
+        oldTheme    = themes[oldIndex].name;
 
-        button.text = themes[oldIndex].label;
+
+        button.text = themes[futureIndex].label;
 
         if (target === 'cmp') {
             me.exampleComponent.theme = newTheme;
-        } else {
+        } else {console.log(newTheme, oldTheme);
             Neo.applyDeltas(me.appName, {
                 cls: {
                     add   : [newTheme],

package/examples/ServiceWorker.mjs

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

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "neo.mjs",
-    "version": "6.9.10",
+    "version": "6.9.12",
     "description": "The webworkers driven UI framework",
     "type": "module",
     "repository": {
@@ -16,6 +16,7 @@
         "build-all-questions": "node ./buildScripts/buildAll.mjs -f",
         "build-themes": "node ./buildScripts/buildThemes.mjs -f",
         "build-threads": "node ./buildScripts/webpack/buildThreads.mjs -f",
+        "convert-design-tokens": "node ./buildScripts/convertDesignTokens.mjs",
         "create-app": "node ./buildScripts/createApp.mjs",
         "create-class": "node ./buildScripts/createClass.mjs",
         "create-component": "node ./buildScripts/createComponent.mjs",
@@ -52,7 +53,7 @@
         "envinfo": "^7.11.0",
         "fs-extra": "^11.1.1",
         "highlightjs-line-numbers.js": "^2.8.0",
-        "inquirer": "^9.2.11",
+        "inquirer": "^9.2.12",
         "neo-jsdoc": "1.0.1",
         "neo-jsdoc-x": "1.0.5",
         "postcss": "^8.4.31",

package/resources/data/{learnneo → deck/learnneo}/p/2023-10-01T18-29-19-158Z.md

@@ -1,12 +1,9 @@
-# This is a h1
-## This is a h2
-### This is a h3
-#### This is a h4
-
 
 Neo.mjs is a framework used to create <mark>browser-based</mark> applications.
 
-Some key features and benefits of Neo.mjs are:
+# Some key features and benefits of Neo.mjs are:
+
+<code><A code snippet></code>
 
 <details>
 <summary>Multi-Threaded</summary>

package/resources/data/deck/learnneo/p/2023-10-08T20-20-37-336Z.md

@@ -0,0 +1,36 @@
+Neo.mjs uses standard modular JavaScript, so you're free to use other class 
+features, like private members.
+<pre><code class="javascript">
+class Human extends Mammal {
+    static config = {
+        className: 'Simple.example.Human',
+        name     : 'J. Doe',
+        married  : false
+    }
+
+    static #privateStaticField = 'foo'
+
+    #privateInstanceField = 'bar'
+
+    #privateInstanceMethod() {
+        console.log(`Psst. Don't tell anyone, but ${this.#privateInstanceField} and ${Human.#privateStaticField}`);
+    }
+
+    speak(tellSecret) {
+        console.log(`Hello! My name is ${this.name}. I am ${this.married?'':'not'} married.`);
+        if (tellSecret) this.#privateInstanceMethod();
+    }
+
+    yodel() {
+        console.log('Yodelay hee hoo!');
+    }
+}
+
+Neo.applyClassConfig(Human);
+
+const myPerson = Neo.create(Human, {
+    name: 'Herbert'
+});
+
+myPerson.speak(true);
+</code></pre>

package/resources/data/deck/learnneo/p/stylesheet.md

@@ -0,0 +1,58 @@
+<details>
+<summary>Training material advice</summary>
+Training content is different than self-study content. 
+Training material _augments_ the lecture. The audience should be focused on what the speaker is
+saying; the slides support the lecture. An important concept in writing
+training material is to avoid a _wall of words_, where there are lengthy
+paragraphs. People will read what's in front of them. If you have a lecture slide
+with a lot of text, your audience will be reading while you are lecturing, 
+and information is lost.
+</details>
+
+
+# This is an h1
+## This is an h2
+### This is an h3
+#### This is an h4
+
+<br>
+
+To show highlighted source code use
+<pre>
+&lt;pre>
+&lt;code class="javascript">
+// Source code goes here
+&lt;/code>
+&lt;/pre>
+
+<pre>
+<code class="javascript">
+import Base from '../../../node_modules/neo.mjs/src/core/Base.mjs';
+
+class Mammal extends Base {
+    static config = {
+        className: 'Simple.example.Mammal'
+    }
+}
+</code>
+</pre>
+
+For short in-line statements of code use &lt;code> or backticks.
+
+When definining variables avoid `var` &mdash; use `let` or `const` instead.
+
+<br>
+
+For expandable bullet points and lab steps use a &lt;details> tag 
+<pre>
+&lt;details>
+&lt;summary>This describes the item&lt;/summary>
+This is the item contents.
+&lt;/details>
+</pre>
+
+<details>
+<summary>This describes the item</summary>
+This is the item contents.
+</details>
+

package/resources/data/{learnneo → deck/learnneo}/t.json

@@ -4,7 +4,7 @@
             "id": "2023-10-01T18-29-19-158Z",
             "parentId": null,
             "isLeaf": true,
-            "name": "Why Neo.mjs?"
+            "name": "Why Neo.mjs? "
         },
         {
             "id": "2023-09-26T17-26-15-104Z",
@@ -124,7 +124,24 @@
             "id": "2023-10-16T19-38-29-590Z",
             "parentId": null,
             "isLeaf": false,
-            "name": "Mixins"
+            "name": "Mixins "
+        },
+        {
+            "id": "2023-10-31T13-59-37-550Z",
+            "parentId": "2023-10-16T19-38-29-590Z",
+            "isLeaf": true,
+            "name": "New Node"
+        },
+        {
+            "id": "appendix",
+            "parentId": null,
+            "name": "Appendix"
+        },
+        {
+            "id": "stylesheet",
+            "parentId": "appendix",
+            "name": "Stylesheet",
+            "isLeaf": true
         }
     ]
 }

package/resources/data/deck/training/p/2022-12-27T21-54-52-300Z.md

@@ -0,0 +1,11 @@
+If you look at _package.json_ you'll see what scripts you can use. 
+
+To generate a new app run<br>
+`npm run create-app`
+<br>You typicically choose all defaults when prompted. We'll use `create-app` a few times
+during this training, but in a work environment it's not used very often.
+
+At the start of your coding session you'll probably run <br>
+`npm run server-start`
+<br>and as you write code and need new classes you might run <br>
+`npm run create-class`.

package/resources/data/deck/training/p/2022-12-27T21-55-23-144Z.md

@@ -0,0 +1,43 @@
+Neo source files are JavaScript _modules_, using the `.msj` file extension.
+
+JavaScript modules support `import`, `export` (to control which values are
+available outside of the file). 
+
+<pre class="runnable text readonly">
+import Component from '../../../node_modules/neo.mjs/src/component/Base.mjs';
+import TabContainer from '../../../node_modules/neo.mjs/src/tab/Container.mjs';
+import Viewport from '../../../node_modules/neo.mjs/src/container/Viewport.mjs';
+
+class MainContainer extends Viewport {
+    static config = {
+        className: 'Starter.view.MainContainer',
+        ntype: 'main',
+        autoMount: true,
+        style: { padding: '20px' },
+        layout: { ntype: 'fit' },
+        items: [{
+            module: TabContainer,
+            itemDefaults: {
+                module: Component,
+                cls: ['neo-examples-tab-component'],
+                style: { padding: '20px' }
+            },
+            items: [{
+                tabButtonConfig: {
+                    iconCls: 'fa fa-home',
+                    text: 'Tab 1'
+                },
+                vdom: { innerHTML: 'Welcome to your new Neo App.' }
+            }, {
+                tabButtonConfig: {
+                    iconCls: 'fa fa-play-circle',
+                    text: 'Tab 2'
+                },
+                vdom: { innerHTML: 'Have fun creating something awesome!' }
+            }]
+        }]
+    }
+}
+Neo.applyClassConfig(MainContainer);
+export default MainContainer;
+</pre>

package/resources/data/deck/training/p/2022-12-27T21-55-30-948Z.md

@@ -0,0 +1 @@
+<img height="540" src="resources/images/FlowOfExecution.jpg"></img>

package/resources/data/deck/training/p/2022-12-27T21-55-43-542Z.md

@@ -0,0 +1,84 @@
+Change the starter app's main view to show a table.
+
+<pre class="runnable javascript readonly">
+import Table from "../../../node_modules/neo.mjs/src/table/Container.mjs";
+import Viewport from "../../../node_modules/neo.mjs/src/container/Viewport.mjs";
+import Store from "../../../node_modules/neo.mjs/src/data/Store.mjs";
+
+class MainContainer extends Viewport {
+    static config = {
+        className: "Starter.view.MainContainer",
+        autoMount: true,
+        items: [{
+            module: Table,
+            flex: 1,
+            store: {
+                module: Store,
+                model: {
+                    fields: [{
+                        name: "humanReadableLocation",
+                    }, {
+                        name: "size",
+                        ntype: "data-field-float",
+                    }, {
+                        name: "timestamp",
+                        type: "Date",
+                    }, {
+                        name: "title",
+                        calculate: (data, field, item) => item.humanReadableLocation,
+                    }, {
+                        name: "position",
+                        calculate: (data, field, item) => ({
+                            lat: item.latitude,
+                            lng: item.longitude,
+                        }),
+                    },
+                    ],
+                },
+                url: "https://apis.is/earthquake/is",
+                responseRoot: "results",
+                autoLoad: true,
+            },
+            columns: [{
+                dataField: "timestamp",
+                text: "Date",
+                renderer: (data) =>
+                    data.value.toLocaleDateString(undefined, {
+                        weekday: "long",
+                        year: "numeric",
+                        month: "long",
+                        day: "numeric",
+                    }),
+            }, {
+                dataField: "humanReadableLocation",
+                text: "Location",
+            }, {
+                dataField: "size",
+                text: "Magnitude",
+                align: "right",
+                width: 100,
+                renderer: (data) => data.value.toLocaleString(),
+            }],
+        }],
+        layout: {ntype: "fit"},
+    };
+
+    afterSetMounted(value, oldValue) {
+        super.afterSetMounted(value, oldValue);
+        if (!value) return;
+        this.addDomListeners({
+            "neo-debug-item-select": (event) => {
+                event.path.forEach((item) => {
+                    const component = Neo.getComponent(item.id);
+                    if (component) console.log(component);
+                });
+            },
+        });
+    }
+}
+
+Neo.applyClassConfig(MainContainer);
+
+export default MainContainer;
+
+</pre>

package/resources/data/deck/training/p/2022-12-27T22-23-55-083Z.md

@@ -0,0 +1 @@
+<img height="580" src="resources/images/intro/InitialTable.png"/>

package/resources/data/deck/training/p/2022-12-27T22-24-07-886Z.md

@@ -0,0 +1,8 @@
+As we discussed before, the app is 
+- Class-based
+- Declarative
+
+The app 
+- Calls a web service
+- Populates a store
+- Shows store data in a table

package/resources/data/deck/training/p/2022-12-27T22-24-52-295Z.md

@@ -0,0 +1,8 @@
+Let's review the code and see how it _describes_ what it's doing. Even if you 
+knew nothing about Neo you could deduce what the code is doing.
+
+Note how the store defines the field types. This defines how values in the
+feed are converted as the store's records are created.
+
+And the table has column renderers which translate how the store values
+are shown to the user.

package/resources/data/deck/training/p/2022-12-27T22-25-03-853Z.md

@@ -0,0 +1,5 @@
+And it's class based. That means we can use inherited 
+methods. And we extend classes from the framework, or
+classes we define.
+
+We'll explore this more when we refactor some configs into reusable classes.

package/resources/data/deck/training/p/2022-12-27T22-43-58-924Z.md

@@ -0,0 +1,10 @@
+Note that the way we've coded the app, the grid is _not_ reusable.
+
+You can reuse any class config block by creating a new class that
+extends the component's class. In other words, if you want to 
+reuse a table, you create a new class that extends `Neo.container.Table`
+and uses the same config.
+
+Besides reuse, other good reasons to put your components into their own classes
+is make code more abstract, to isolate complexity, and to allow
+those to be tested in isolation. 

package/resources/data/deck/training/p/2022-12-27T22-44-28-881Z.md

@@ -0,0 +1,3 @@
+The store's model — which some people call the _record definition_ — 
+describes how values in the feed are translated into values in each record.
+

package/resources/data/deck/training/p/2022-12-27T22-44-41-791Z.md

@@ -0,0 +1,4 @@
+The `store` config specifies a URL, and a `model`.
+
+The store also has `autoLoad:true`, which means upon creation the 
+store immediatesly calls its url.

package/resources/data/deck/training/p/2022-12-27T22-45-21-032Z.md

@@ -0,0 +1,7 @@
+Now that the table is its own class
+- The main container code is cleaner
+- The table is reusable
+
+Since it's reusable, we can create a couple of instances in the main container. 
+To do that, just copy and paste the table's config, give both `flex:1`, and
+change the parent container's layout to `vbox`.

package/resources/data/deck/training/p/2022-12-27T22-49-22-078Z.md

@@ -0,0 +1,4 @@
+Neo has a feature that allows _shared, bindable, data_.
+
+A `Neo.model.Component` instance holds properties that can be values like
+strings, numbers, or even references, like component or store references.

package/resources/data/deck/training/p/2022-12-27T22-50-20-626Z.md

@@ -0,0 +1,4 @@
+A component model can have two sections: `data` and `stores`.
+
+<a href="http://localhost:8080/examples/model/twoway/" target="example">http://localhost:8080/examples/model/twoway/</a>
+

package/resources/data/deck/training/p/2022-12-28T16-58-55-192Z.md

@@ -0,0 +1,9 @@
+As we discussed before, any time you configure a class via a config
+you're free to create a class encapsulating the config properties.
+
+In other words, any time you have an `ntype` or `module` block, 
+you're free to create a new class that extends that type, and
+move the config to the new class `static getConfig` mehtod.
+
+Trivial classes might be done inline. Or to keep the view cleaner, 
+and more declarative, use a separate view model class.

package/resources/data/deck/training/p/2022-12-28T17-10-18-058Z.md

@@ -0,0 +1,15 @@
+The property's setter is run as the view model property changes.
+<pre class="runnable text readonly 200">
+{
+    module: Label,
+    bind: {
+        // Neo.component.Label.mjs has a text_ config.
+        // The value returned by the arrow function is assigned to label.text
+        text: data => \`The value of foo is "${data.foo || ''}"\`
+    }
+}
+</pre>
+
+See <a href="http://localhost:8080/ex/model/oneway/" target="example">
+examples/model/oneway/MainContainer.mjs
+</a>