neo.mjs 6.10.9 → 6.10.11

package/apps/ServiceWorker.mjs

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

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

@@ -1,6 +1,6 @@
 import ContentStore from '../../store/Content.mjs'
-import LivePreview  from './LivePreview.mjs';
-import TreeList     from '../../../../src/tree/List.mjs';
+import LivePreview from './LivePreview.mjs';
+import TreeList from '../../../../src/tree/List.mjs';
 
 /**
  * @class Portal.view.learn.ContentTreeList
@@ -57,14 +57,17 @@ class ContentTreeList extends TreeList {
 
             await Neo.main.addon.Markdown.markdownToHtml(modifiedHtml)
                 .then(
-                    html => me.fire('contentChange', {
-                        component: me,
-                        html,
-                        record,
-                        isLab: record.name?.startsWith('Lab:')
-                    }),
+                    html => {
+                        html = me.insertLabDivs(html);
+                        me.fire('contentChange', {
+                            component: me,
+                            html,
+                            record,
+                            isLab: record.name?.startsWith('Lab:')
+                        });
+                    },
                     () => me.fire('contentChange', {component: me}));
-            await this.timeout(50);
+            await this.timeout(50); // Do we need this?
             Object.keys(neoDivs).forEach(key => {
                 // Create LivePreview for each iteration, set value to neoDivs[key]
                 let foo = Neo.create(LivePreview, {
@@ -72,7 +75,6 @@ class ContentTreeList extends TreeList {
                     parentId: key,
                     appName: this.appName
                 })
-                console.log(foo);
             });
         }
     }
@@ -89,12 +91,23 @@ class ContentTreeList extends TreeList {
         var updatedHtml = htmlString.replace(preRegex, (match, preContent) => {
             const key = `pre-live-preview-${Neo.core.IdGenerator.getId()}-${count++}`;
             map[key] = preContent;
-            return `<div id="${key}"/>`;
+            return `<div id="${key}"></div>`;
         });
         return updatedHtml;
 
     }
 
+    insertLabDivs(inputString) {
+        // Replace <!-- lab --> with <div class="lab">
+        let modifiedString = inputString.replace(/<!--\s*lab\s*-->/g, '<div class="lab">');
+
+        // Replace <!-- /lab --> with </div>
+        modifiedString = modifiedString.replace(/<!--\s*\/lab\s*-->/g, '</div>');
+
+        return modifiedString;
+
+    }
+
     async highlightPreContent(htmlString) {
         // 1. Replace <pre data-javascript> with unique tokens and create a HighlightJS.highlightAuto promise for each
         // 2. When all promises are resolved, use their values to replace the tokens.
@@ -169,7 +182,6 @@ class ContentTreeList extends TreeList {
                 me.deck = search.deck || 'learnneo';
 
                 me.doLoadStore();
-                console.log(search);
             })
     }
 

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

@@ -13,6 +13,7 @@ class LivePreview extends Base {
          * @protected
          */
         className: 'Portal.view.learn.LivePreview',
+        baseCls: ['learn-live-preview'],
         value_: null,
         autoMount: true,
         autoRender: true,
@@ -22,18 +23,20 @@ class LivePreview extends Base {
          * @member {Object[]} items
          */
         items: [{
-            module   : TabContainer,
+            module: TabContainer,
             reference: 'tab-container',
             cls: 'live-preview-container',
-
             items: [{
                 module: TextArea,
                 hideLabel: true,
                 style: {height: '100%'},
                 reference: 'textArea',
                 tabButtonConfig: {
-                    text: 'Editor'
+                    text: 'Source'
                 },
+                listeners: {
+                    change: data => data.component.up({className: 'Portal.view.learn.LivePreview'}).value = data.value
+                }
             }, {
                 tabButtonConfig: {
                     text: 'Preview'
@@ -58,10 +61,8 @@ class LivePreview extends Base {
         me.getReference('tab-container').on('activeIndexChange', me.onActiveIndexChange, me)
     }
 
-    doIt(button) {
-        let source = this.getReference('source').getValue();
-
-        this.getReference('codePreview').src = source;
+    doRunSource() {
+        let source = this.value;
 
         const importRegex = /import\s+([\w-]+)\s+from\s+['"]([^'"]+)['"]/;
         const exportRegex = /export\s+(?:default\s+)?(?:const|let|var|class|function|async\s+function|generator\s+function|async\s+generator\s+function|(\{[\s\S]*?\}))/g;
@@ -73,6 +74,7 @@ class LivePreview extends Base {
 
         const moduleNameAndPath = [];
 
+        const className = this.findLastClassName(source);
         source.split('\n').forEach(line => {
             let importMatch = line.match(importRegex);
             if (importMatch) {
@@ -123,13 +125,11 @@ class LivePreview extends Base {
             .then(([${params.join(', ')}]) => {
                     ${vars.join('\n')}
                     ${cleanLines.join('\n')}
-                    container.add({module:Bar});
+                    if (${className} && Neo.component.Base.isPrototypeOf(${className})) container.add({module:${className}});
                 })
             .catch(error=>container.add({ntype:'component',html:error.message}));
         `;
 
-        // console.log(codeString);
-
         const container = this.getReference('preview');
         container.removeAll();
         try {
@@ -176,7 +176,24 @@ class LivePreview extends Base {
      * @param {Number} data.value
      */
     onActiveIndexChange(data) {
-        console.log('onActiveIndexChange', data)
+        if (data.item.reference !== 'preview') return;
+        this.doRunSource();
+    }
+    findLastClassName(sourceCode) {
+        // Define a regular expression to match class declarations
+        const classDeclarationRegex = /class\s+([a-zA-Z$_][a-zA-Z0-9$_]*)\s*(?:extends\s+[a-zA-Z$_][a-zA-Z0-9$_]*)?\s*{[\s\S]*?}/g;
+
+        let match;
+        let lastClassName = null;
+
+        // Iterate through all matches of the regular expression
+        while ((match = classDeclarationRegex.exec(sourceCode)) !== null) {
+            // Update the last class name found
+            lastClassName = match[1];
+        }
+
+        return lastClassName;
+
     }
 }
 

package/buildScripts/createAppMinimal.mjs

@@ -0,0 +1,391 @@
+import chalk          from 'chalk';
+import { spawnSync }  from 'child_process';
+import { Command }    from 'commander/esm.mjs';
+import envinfo        from 'envinfo';
+import fs             from 'fs-extra';
+import inquirer       from 'inquirer';
+import os             from 'os';
+import path           from 'path';
+
+const __dirname   = path.resolve(),
+    cwd           = process.cwd(),
+    requireJson   = path => JSON.parse(fs.readFileSync((path))),
+    packageJson   = requireJson(path.join(__dirname, 'package.json')),
+    insideNeo     = packageJson.name === 'neo.mjs',
+    neoPath       = insideNeo ? './' : './node_modules/neo.mjs/',
+    addonChoices  = fs.readdirSync(path.join(neoPath, '/src/main/addon')).map(item => item.slice(0, -4)),
+    program       = new Command(),
+    programName   = `${packageJson.name} create-app`,
+    questions     = [],
+    scssFolders   = fs.readdirSync(path.join(neoPath, '/resources/scss')),
+    themeFolders  = [];
+
+scssFolders.forEach(folder => {
+    if (folder.includes('theme')) {
+        themeFolders.push(`neo-${folder}`);
+    }
+});
+
+program
+    .name(programName)
+    .version(packageJson.version)
+    .option('-i, --info', 'print environment debug info')
+    .option('-a, --appName <value>')
+    .option('-m, --mainThreadAddons <value>', `Comma separated list of:\n${addonChoices.join(', ')}\nDefaults to DragDrop, Stylesheet`)
+    .option('-s, --useServiceWorker <value>', '"yes", "no"')
+    .option('-t, --themes <value>', ['all', ...themeFolders, 'none'].join(", "))
+    .option('-u, --useSharedWorkers <value>', '"yes", "no"')
+    .allowUnknownOption()
+    .on('--help', () => {
+        console.log('\nIn case you have any issues, please create a ticket here:');
+        console.log(chalk.cyan(process.env.npm_package_bugs_url));
+    })
+    .parse(process.argv);
+
+const programOpts = program.opts();
+
+if (programOpts.info) {
+    console.log(chalk.bold('\nEnvironment Info:'));
+    console.log(`\n  current version of ${packageJson.name}: ${packageJson.version}`);
+    console.log(`  running from ${__dirname}`);
+
+    envinfo
+        .run({
+            System:       ['OS', 'CPU'],
+            Binaries:     ['Node', 'npm', 'Yarn'],
+            Browsers:     ['Chrome', 'Edge', 'Firefox', 'Safari'],
+            npmPackages:  ['neo.mjs']
+        }, {
+            duplicates:   true,
+            showNotFound: true
+        })
+        .then(console.log);
+} else {
+    console.log(chalk.green(programName));
+
+    if (programOpts.mainThreadAddons) {
+        programOpts.mainThreadAddons = programOpts.mainThreadAddons.split(',');
+    }
+
+    if (!programOpts.appName) {
+        questions.push({
+            type:     'input',
+            name:     'appName',
+            message:  'Please choose a name for your neo app:',
+            default:  'MyApp'
+        });
+    }
+
+    if (!programOpts.themes) {
+        questions.push({
+            type:     'list',
+            name:     'themes',
+            message:  'Please choose a theme for your neo app:',
+            choices:  ['all', ...themeFolders, 'none'],
+            default:  'all'
+        });
+    }
+
+    if (!programOpts.mainThreadAddons) {
+        questions.push({
+            type:     'checkbox',
+            name:     'mainThreadAddons',
+            message:  'Please choose your main thread addons:',
+            choices:  addonChoices,
+            default:  ['DragDrop', 'Stylesheet']
+        });
+    }
+
+    if (!programOpts.useSharedWorkers) {
+        questions.push({
+            type:     'list',
+            name:     'useSharedWorkers',
+            message:  'Do you want to use SharedWorkers? Pick yes for multiple main threads (Browser Windows):',
+            choices:  ['yes', 'no'],
+            default:  'no'
+        });
+    }
+
+    if (!programOpts.useServiceWorker) {
+        questions.push({
+            type:     'list',
+            name:     'useServiceWorker',
+            message:  'Do you want to use a ServiceWorker for caching assets?',
+            choices:  ['yes', 'no'],
+            default:  'no'
+        });
+    }
+
+    inquirer.prompt(questions).then(answers => {
+        let appName            = programOpts.appName || answers.appName,
+            mainThreadAddons   = programOpts.mainThreadAddons || answers.mainThreadAddons,
+            themes             = programOpts.themes || answers.themes,
+            useSharedWorkers   = programOpts.useSharedWorkers || answers.useSharedWorkers,
+            useServiceWorker   = programOpts.useServiceWorker || answers.useServiceWorker,
+            lAppName           = appName.toLowerCase(),
+            appPath            = 'apps/' + lAppName + '/',
+            dir                = 'apps/' + lAppName,
+            folder             = path.resolve(cwd, dir),
+            startDate          = new Date();
+
+        if (!Array.isArray(themes)) {
+            themes = [themes];
+        }
+
+        if (themes.length > 0 && !themes.includes('none') && !mainThreadAddons.includes('Stylesheet')) {
+            console.error('ERROR! The Stylesheet mainThreadAddon is mandatory in case you are using themes');
+            console.log('Exiting with error.');
+            process.exit(1);
+        }
+
+        fs.mkdir(path.join(folder, '/view'), {recursive: true}, (err) => {
+            if (err) {
+                throw err;
+            }
+
+            let content, className;
+            const neoSrcPath = `../../../${insideNeo ? '' : 'node_modules/neo.mjs/'}src`;
+
+            const appContent = [
+                "import Viewport from './view/Viewport.mjs';",
+                "",
+                "export const onStart = () => Neo.app({",
+                "    mainView: Viewport,",
+                "    name    : '" + appName + "'",
+                "});"
+            ].join(os.EOL);
+
+            fs.writeFileSync(folder + '/app.mjs', appContent);
+
+            const indexContent = `
+<!DOCTYPE HTML>
+<html>
+<head>
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <meta charset="UTF-8">
+    <title>${appName}</title>
+</head>
+<body>
+    <script src="../../src/MicroLoader.mjs" type="module"></script>
+    <script>
+    new MutationObserver((mutationsList, observer) => {
+        for (let mutation of mutationsList) {
+            for (let addedNode of mutation.addedNodes) {
+                if (addedNode.className && addedNode.className.includes(\'neo-viewport\')) {
+                    addedNode.addEventListener("contextmenu", function (e) {
+                        if (!(e.ctrlKey || e.metaKey)) return;
+                        e.stopPropagation();
+                        e.preventDefault();
+                        const event = new Event('neo-debug-item-select', {bubbles: true});
+                        e.target.dispatchEvent(event);
+                    });
+                    observer.disconnect(); // We found the viewport so we\'re finished listening
+                }
+            }
+        }
+    }).observe(document.body, {childList: true, subtree: false});
+    </script>
+</body>
+</html>
+`;
+            fs.writeFileSync(path.join(folder, 'index.html'), indexContent);
+
+
+
+            let neoConfig = {
+                appPath:      `${insideNeo ? '' : '../../'}${appPath}app.mjs`,
+                basePath:     '../../',
+                environment:  'development',
+                mainPath:     `${insideNeo ? './' : '../node_modules/neo.mjs/src/'}Main.mjs`
+            };
+
+            if (!(mainThreadAddons.includes('DragDrop') && mainThreadAddons.includes('Stylesheet') && mainThreadAddons.length === 2)) {
+                neoConfig.mainThreadAddons = mainThreadAddons;
+            }
+
+            if (!themes.includes('all')) { // default value
+                if (themes.includes('none')) {
+                    neoConfig.themes = [];
+                } else {
+                    neoConfig.themes = themes;
+                }
+            }
+
+            if (useSharedWorkers !== 'no') {
+                neoConfig.useSharedWorkers = true;
+            }
+
+            if (useServiceWorker !== 'no') {
+                neoConfig.useServiceWorker = true;
+            }
+
+            if (!insideNeo) {
+                neoConfig.workerBasePath = '../../node_modules/neo.mjs/src/worker/';
+            }
+
+            let configs = Object.entries(neoConfig).sort((a, b) => a[0].localeCompare(b[0]));
+            neoConfig = {};
+
+            configs.forEach(([key, value]) => {
+                neoConfig[key] = value;
+            });
+
+            fs.writeFileSync(path.join(folder, 'neo-config.json'), JSON.stringify(neoConfig, null, 4));
+
+            // App source files: viewport and main view
+
+
+
+
+            // -------------------------------------------------------------------------
+
+            className = 'Viewport';
+            content = `
+import Base     from '${neoSrcPath}/container/Viewport.mjs';
+import MainView from './MainView.mjs';
+
+class ${className} extends Base {
+    static config = {
+        className:  '${appName}.view.${className}',
+        autoMount:  true,
+        layout:     {ntype: 'fit'},
+        items:      [{module:MainView}],
+    }
+    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(${className});
+export default ${className};
+`;
+            fs.writeFileSync(path.join(`${folder}/view/${className}.mjs`), content);
+
+
+
+
+            // -------------------------------------------------------------------------
+
+            className = 'MainView';
+            content = `
+import Base        from '${neoSrcPath}/container/Base.mjs';
+import Controller  from './${className}Controller.mjs';
+import ViewModel   from './${className}Model.mjs';
+
+class ${className} extends Base {
+    static config = {
+        className: '${appName}.view.${className}',
+        
+        controller: {module: Controller},
+        model: {module: ViewModel},
+
+        layout: {ntype: 'fit'},
+        items: [],
+    }
+}
+
+Neo.applyClassConfig(${className});
+
+export default ${className};
+            `;
+            fs.writeFileSync(path.join(`${folder}/view/${className}.mjs`), content);
+
+
+
+
+
+            // -------------------------------------------------------------------------
+
+            className = 'MainViewController';
+            content = `
+import Base from '${neoSrcPath}/controller/Component.mjs';
+
+class ${className} extends Base {
+    static config = {
+        className: '${appName}.view.${className}',
+    }
+}
+
+Neo.applyClassConfig(${className});
+
+export default ${className};
+            `;
+            fs.writeFileSync(path.join(`${folder}/view/${className}.mjs`), content);
+
+
+
+
+
+            // -------------------------------------------------------------------------
+
+            className = 'MainViewModel';
+            content = `
+import Base from '${neoSrcPath}/model/Component.mjs';
+
+class ${className} extends Base {
+    static config = {
+        className: '${appName}.view.${className}',
+
+        data: {}
+    }
+}
+
+Neo.applyClassConfig(${className});
+
+export default ${className};
+            `;
+            fs.writeFileSync(path.join(`${folder}/view/${className}.mjs`), content);
+
+
+
+
+
+            // -------------------------------------------------------------------------
+
+            let appJsonPath = path.resolve(cwd, 'buildScripts/myApps.json'),
+                appJson;
+
+            if (fs.existsSync(appJsonPath)) {
+                appJson = requireJson(appJsonPath);
+            } else {
+                appJsonPath = path.resolve(__dirname, 'buildScripts/webpack/json/myApps.json');
+
+                if (fs.existsSync(appJsonPath)) {
+                    appJson = requireJson(appJsonPath);
+                } else {
+                    appJson = requireJson(path.resolve(__dirname, 'buildScripts/webpack/json/myApps.template.json'));
+                }
+            }
+
+            if (!appJson.apps.includes(appName)) {
+                appJson.apps.push(appName);
+                appJson.apps.sort();
+            }
+
+            fs.writeFileSync(appJsonPath, JSON.stringify(appJson, null, 4));
+
+            if (mainThreadAddons.includes('HighlightJS')) {
+                spawnSync('node', [
+                    './buildScripts/copyFolder.mjs',
+                    '-s',
+                    path.resolve(neoPath, 'docs/resources'),
+                    '-t',
+                    path.resolve(folder, 'resources'),
+                ], {env: process.env, cwd: process.cwd(), stdio: 'inherit'});
+            }
+
+            const processTime = (Math.round((new Date - startDate) * 100) / 100000).toFixed(2);
+            console.log(`\nTotal time for ${programName}: ${processTime} s`);
+
+            process.exit();
+        });
+    });
+}

package/examples/ServiceWorker.mjs

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

package/examples/button/base/neo-config.json

@@ -2,5 +2,6 @@
     "appPath"    : "examples/button/base/app.mjs",
     "basePath"   : "../../../",
     "environment": "development",
-    "mainPath"   : "./Main.mjs"
+    "mainPath"   : "./Main.mjs",
+    "themes"     : ["neo-theme-neo-light"]   
 }

package/examples/list/chip/neo-config.json

@@ -2,6 +2,5 @@
     "appPath"         : "examples/list/chip/app.mjs",
     "basePath"        : "../../../",
     "environment"     : "development",
-    "mainPath"        : "./Main.mjs",
-    "mainThreadAddons": ["Stylesheet"]
+    "mainPath"        : "./Main.mjs"
 }