neo.mjs 6.1.5 → 6.2.1

package/apps/ServiceWorker.mjs

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

package/buildScripts/createClass.mjs

@@ -1,7 +1,7 @@
 #!/usr/bin/env node
 
 import chalk           from 'chalk';
-import { Command }     from 'commander/esm.mjs';
+import {Command}       from 'commander/esm.mjs';
 import envinfo         from 'envinfo';
 import fs              from 'fs-extra';
 import inquirer        from 'inquirer';
@@ -10,36 +10,37 @@ import path            from 'path';
 import {fileURLToPath} from 'url';
 
 const
-      __dirname   = fileURLToPath(new URL('../', import.meta.url)),
-      cwd         = process.cwd(),
-      requireJson = path => JSON.parse(fs.readFileSync((path))),
-      packageJson = requireJson(path.join(__dirname, 'package.json')),
-      insideNeo   = process.env.npm_package_name === 'neo.mjs',
-      program     = new Command(),
-      programName = `${packageJson.name} create-class`,
-      questions   = [],
-      /**
-       * Maintain a list of dir-names recognized as source root directories.
-       * When not using dot notation with a class-name, the program assumes
-       * that we want to create the class inside the cwd. The proper namespace
-       * is then looked up by traversing the directory path up to the first
-       * folder that matches an entry in "sourceRootDirs". The owning
-       * folder (parent of cwd, child of sourceRootDirs[n]) will then be used as the
-       * namespace for this created class.
-       * Can be overwritten with the -s option.
-       * @type {String[]}
-       */
-      sourceRootDirs = ['apps'];
+    __dirname      = fileURLToPath(new URL('../', import.meta.url)),
+    cwd            = process.cwd(),
+    requireJson    = path => JSON.parse(fs.readFileSync((path))),
+    packageJson    = requireJson(path.join(__dirname, 'package.json')),
+    insideNeo      = process.env.npm_package_name === 'neo.mjs',
+    program        = new Command(),
+    programName    = `${packageJson.name} create-class`,
+    questions      = [],
+    /**
+     * Maintain a list of dir-names recognized as source root directories.
+     * When not using dot notation with a class-name, the program assumes
+     * that we want to create the class inside the cwd. The proper namespace
+     * is then looked up by traversing the directory path up to the first
+     * folder that matches an entry in "sourceRootDirs". The owning
+     * folder (parent of cwd, child of sourceRootDirs[n]) will then be used as the
+     * namespace for this created class.
+     * Can be overwritten with the -s option.
+     * @type {String[]}
+     */
+    sourceRootDirs = ['apps'];
 
 program
     .name(programName)
     .version(packageJson.version)
-    .option('-i, --info',              'print environment debug info')
-    .option('-d, --drop',              'drops class in the currently selected folder')
+    .option('-i, --info', 'print environment debug info')
+    .option('-d, --drop', 'drops class in the currently selected folder')
     .option('-n, --singleton <value>', 'Create a singleton? Pick "yes" or "no"')
-    .option('-s, --source <value>',    `name of the folder containing the project. Defaults to any of ${sourceRootDirs.join(',')}`)
+    .option('-s, --source <value>', `name of the folder containing the project. Defaults to any of ${sourceRootDirs.join(',')}`)
     .option('-b, --baseClass <value>')
     .option('-c, --className <value>')
+    .option('-r, --scss <value>')
     .allowUnknownOption()
     .on('--help', () => {
         console.log('\nIn case you have any issues, please create a ticket here:');
@@ -144,9 +145,11 @@ if (programOpts.info) {
         className   = programOpts.className || answers.className,
         singleton   = programOpts.singleton || answers.singleton || 'no',
         isDrop      = programOpts.drop,
+        scssClass   = programOpts.scss,
         isSingleton = singleton === 'yes',
         startDate   = new Date(),
-        baseType, classFolder, configName, file, folderDelta, importName, importPath, index, ns, root, rootLowerCase, viewFile;
+        baseType, classFolder, configName, file, folderDelta, importName, importPath, index, ns, root, rootLowerCase,
+        viewFile;
 
     if (className.endsWith('.mjs')) {
         className = className.slice(0, -4);
@@ -241,7 +244,8 @@ if (programOpts.info) {
         file,
         folderDelta,
         ns,
-        root
+        root,
+        scssClass
     });
 
     if (baseClass === 'data.Model') {
@@ -259,7 +263,7 @@ if (programOpts.info) {
      * @param {Number} index=contentArray.length - 1
      * @returns {String[]}
      */
-    function addComma(contentArray, index=contentArray.length - 1) {
+    function addComma(contentArray, index = contentArray.length - 1) {
         contentArray[index] += ',';
         return contentArray;
     }
@@ -329,7 +333,7 @@ if (programOpts.info) {
         content.splice(i, 0, `import ${importName} from '${opts.importPath}';`);
 
         // find the longest import module name
-        for (i=0; i < len; i++) {
+        for (i = 0; i < len; i++) {
             codeLine = content[i];
 
             if (codeLine === '') {
@@ -340,7 +344,7 @@ if (programOpts.info) {
         }
 
         // adjust the block-formatting for imports
-        for (i=0; i < len; i++) {
+        for (i = 0; i < len; i++) {
             codeLine = content[i];
 
             if (codeLine === '') {
@@ -353,7 +357,7 @@ if (programOpts.info) {
             if (adjustSpaces > 0) {
                 spaces = '';
 
-                for (j=0; j < adjustSpaces; j++) {
+                for (j = 0; j < adjustSpaces; j++) {
                     spaces += ' ';
                 }
 
@@ -396,7 +400,7 @@ if (programOpts.info) {
                 }
 
                 if (className > configName) {
-                    for (j=i; j > 0; j--) {
+                    for (j = i; j > 0; j--) {
                         if (content[j].includes('/**')) {
                             addConfig({
                                 baseType,
@@ -444,7 +448,8 @@ if (programOpts.info) {
             file,
             folderDelta,
             ns,
-            root
+            root,
+            scssClass = undefined,
         } = opts, baseFileName;
 
         fs.mkdirpSync(classFolder, {recursive: true});
@@ -464,10 +469,11 @@ if (programOpts.info) {
             file,
             folderDelta,
             ns,
-            root
+            root,
+            scssClass
         }));
 
-        switch(baseClass) {
+        switch (baseClass) {
             case 'controller.Component': {
                 baseType   = 'Neo.controller.Component';
                 configName = 'controller';
@@ -555,7 +561,9 @@ if (programOpts.info) {
             isSingleton   = opts.isSingleton,
             file          = opts.file,
             i             = 0,
-            importDelta   = '';
+            importDelta   = '',
+            scssClass     = opts.scssClass,
+            isScss        = scssClass !== null && scssClass !== undefined;
 
         if (root === 'Neo') {
             if (className.startsWith('Neo.examples')) {
@@ -592,6 +600,13 @@ if (programOpts.info) {
             `        className: '${className}'`
         );
 
+        isScss && addComma(classContent).push(
+            "        /**",
+            `         * @member {String[]} baseCls=['${scssClass}']`,
+            "         * @protected",
+            "         */",
+            `         baseCls: ['${scssClass}']`);
+
         baseClass === 'table.Container' && addComma(classContent).push(
             "        /**",
             "         * @member {Object[]} columns",

package/buildScripts/createComponent.mjs

@@ -0,0 +1,250 @@
+#!/usr/bin/env node
+
+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 path            from 'path';
+import {fileURLToPath} from 'url';
+
+const
+    __dirname   = fileURLToPath(new URL('../', import.meta.url)),
+    cwd         = process.cwd(),
+    requireJson = path => JSON.parse(fs.readFileSync((path))),
+    packageJson = requireJson(path.join(__dirname, 'package.json')),
+    program     = new Command(),
+    programName = `${packageJson.name} create-class`,
+    questions   = [],
+    /**
+     * Maintain a list of dir-names recognized as source root directories.
+     * When not using dot notation with a class-name, the program assumes
+     * that we want to create the class inside the cwd. The proper namespace
+     * is then looked up by traversing the directory path up to the first
+     * folder that matches an entry in "sourceRootDirs". The owning
+     * folder (parent of cwd, child of sourceRootDirs[n]) will then be used as the
+     * namespace for this created class.
+     * Can be overwritten with the -s option.
+     * @type {String[]}
+     */
+    sourceRootDirs = ['apps'];
+
+program
+    .name(programName)
+    .version(packageJson.version)
+    .option('-i, --info', 'print environment debug info')
+    .option('-n, --singleton <value>', 'Create a singleton? Pick "yes" or "no"')
+    .option('-s, --source <value>', `name of the folder containing the project. Defaults to any of ${sourceRootDirs.join(',')}`)
+    .option('-b, --baseClass <value>')
+    .option('-c, --className <value>')
+    .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 ${cwd}`);
+
+    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));
+
+    let answers = {},
+        answer;
+
+    if (!programOpts.className) {
+        answer = await inquirer.prompt({
+            type   : 'input',
+            name   : 'className',
+            message: 'Please choose the namespace for your class:',
+            default: 'Covid.view.MyContainer'
+        });
+
+        Object.assign(answers, answer);
+    }
+
+    if (!programOpts.baseClass) {
+        questions.push({
+            type   : 'list',
+            name   : 'baseClass',
+            message: 'Please pick the base class, which you want to extend:',
+            default: guessBaseClass(programOpts.className || answers.className),
+
+            choices: [
+                'component.Base',
+                'container.Base',
+                'container.Viewport',
+                'controller.Component',
+                'core.Base',
+                'data.Model',
+                'data.Store',
+                'model.Component',
+                'tab.Container',
+                'table.Container'
+            ]
+        });
+    }
+
+
+    if (!programOpts.singleton) {
+        questions.push({
+            type   : 'list',
+            name   : 'singleton',
+            message: 'Singleton?',
+            default: 'no',
+            choices: ['yes', 'no']
+        });
+    }
+
+    answer = await inquirer.prompt(questions);
+
+    Object.assign(answers, answer);
+
+    let baseClass = programOpts.baseClass || answers.baseClass,
+        className = programOpts.className || answers.className,
+        singleton = programOpts.singleton || answers.singleton || 'no';
+
+    let ns = className.split('.');
+    ns.pop();
+    let root          = ns.shift();
+    let rootLowerCase = root.toLowerCase();
+
+
+    if (!baseClass && !className) {
+        console.error(chalk.red('className and baseClass must be defined'));
+        process.exit(1);
+    }
+
+    const scssClassName = getScssClassName(className, rootLowerCase);
+
+    let childProcess = spawnSync('node', [
+        './buildScripts/createClass.mjs',
+        '-c',
+        className,
+        '-b',
+        baseClass,
+        '-n',
+        singleton,
+        '-r',
+        scssClassName
+    ], {env: process.env, cwd: process.cwd(), stdio: 'inherit'});
+    childProcess.status && process.exit(childProcess.status);
+
+
+    //create scss stubs only if it is a NEO component or a view component
+    const resultView = ns.filter(f => f === 'view');
+    if (rootLowerCase === 'neo' || resultView.length > 0) {
+        let childProcess = spawnSync('node', [
+            './buildScripts/tools/createScss.mjs',
+            '-c',
+            className,
+            '-b',
+            baseClass
+        ], {env: process.env, cwd: process.cwd(), stdio: 'inherit'});
+        childProcess.status && process.exit(childProcess.status);
+    }
+
+    // create only example stub when it is a NEO component
+    if (rootLowerCase === 'neo') {
+        let childProcess = spawnSync('node', [
+            './buildScripts/tools/createExample.mjs',
+            //        '--',
+            '-c',
+            className
+        ], {env: process.env, cwd: process.cwd(), stdio: 'inherit'});
+        childProcess.status && process.exit(childProcess.status);
+    }
+
+    //re-build the themes
+    let buildThemes = spawnSync('node', [
+        './buildScripts/buildThemes.mjs',
+        //        '--',
+        '-f',
+        '-e',
+        'all',
+        '-n'
+    ], {env: process.env, cwd: process.cwd(), stdio: 'inherit'});
+    buildThemes.status && process.exit(buildThemes.status);
+
+
+    // start the dev server
+    if (rootLowerCase === 'neo') {
+        let temp = className.split('.');
+        temp.splice(0, 1); //remove Neo namespace
+        let componentPath = `/examples/${temp.join('/')}`;
+        componentPath     = componentPath.toLowerCase();
+
+        let startServer = spawnSync('webpack', [
+            'serve',
+            '-c',
+            './buildScripts/webpack/webpack.server.config.mjs',
+            '--open',
+            componentPath
+        ], {env: process.env, cwd: process.cwd(), stdio: 'inherit'});
+        startServer.status && process.exit(startServer.status);
+    }
+}
+
+function guessBaseClass(className) {
+    className = className.toLowerCase();
+
+    if (className.includes('.model.')) {
+        return 'data.Model';
+    }
+
+    if (className.includes('.store.')) {
+        return 'data.Store';
+    }
+
+    if (className.endsWith('component')) {
+        return 'component.Base';
+    }
+
+    if (className.endsWith('controller')) {
+        return 'controller.Component';
+    }
+
+    if (className.endsWith('model')) {
+        return 'model.Component';
+    }
+
+    if (className.includes('table')) {
+        return 'table.Container';
+    }
+
+    if (className.includes('tab')) {
+        return 'tab.Container';
+    }
+
+    return 'container.Base';
+}
+
+function getScssClassName(className) {
+    //template
+    let classItems = className.split('.');
+    let result     = [];
+
+    classItems.forEach(item => {
+        let temp = item.split(/(?=[A-Z])/);
+        result.push(temp.join('-').toLowerCase());
+    });
+
+    return result.join('-');
+}

package/buildScripts/tools/createExample.mjs

@@ -0,0 +1,159 @@
+#!/usr/bin/env node
+
+import {Command}       from 'commander/esm.mjs';
+import fs              from 'fs-extra';
+import os              from 'os';
+import path            from 'path';
+import {fileURLToPath} from 'url';
+
+const
+    __dirname   = fileURLToPath(new URL('../../', import.meta.url)),
+    cwd         = process.cwd(),
+    requireJson = path => JSON.parse(fs.readFileSync((path))),
+    packageJson = requireJson(path.join(__dirname, 'package.json')),
+    program     = new Command();
+
+program
+    .version(packageJson.version)
+    .option('-b, --baseClass <value>')
+    .option('-c, --className <value>')
+    .allowUnknownOption()
+    .parse(process.argv);
+
+const programOpts = program.opts();
+let className     = programOpts.className;
+
+let ns = className.split('.');
+ns.splice(0, 1); //remove Neo namespace
+let componentPath    = ns.join('/');
+componentPath        = componentPath.toLowerCase();
+const componentChunk = ns.join('.')
+const name           = ns.pop();
+let classFolder      = path.join(cwd, 'examples', `/${componentPath}`);
+
+if (!fs.existsSync(classFolder)) {
+    fs.mkdirpSync(classFolder, {recursive: true});
+}
+
+createAppMjs(classFolder, componentChunk);
+createIndexHtml(classFolder, name);
+createNeoConfig(classFolder, componentPath);
+createMainContainer(classFolder, componentPath, componentChunk, name);
+
+
+function createAppMjs(classFolder, componentChunk) {
+    let template = [];
+
+    template.push(
+        "import MainContainer from './MainContainer.mjs';",
+        "",
+        "export const onStart = () => Neo.app({",
+        "   mainView: MainContainer,",
+        `   name    : 'Neo.examples.${componentChunk}'`,
+        "});");
+
+    const file = `${classFolder}/app.mjs`;
+    fs.writeFileSync(file, `${template.join(os.EOL)}${os.EOL}`);
+}
+
+function createIndexHtml(classFolder, title) {
+    const template = [];
+
+    template.push(
+        '<!DOCTYPE HTML>',
+        '<html>',
+        '<head>',
+        '    <meta name="viewport" content="width=device-width, initial-scale=1">',
+        '    <meta charset="UTF-8">',
+        `    <title>Neo ${title}</title>`,
+        '</head>',
+        '<body>',
+        '    <script src="../../../src/MicroLoader.mjs" type="module"></script>',
+        '</body>',
+        '</html>`');
+
+    const file = `${classFolder}/index.html`;
+    fs.writeFileSync(file, `${template.join(os.EOL)}${os.EOL}`);
+}
+
+function createNeoConfig(classFolder, componentPath) {
+    const template = [];
+
+    template.push(
+        '{',
+        `   "appPath"    : "examples/${componentPath}/app.mjs",`,
+        '   "basePath"   : "../../../",',
+        '   "environment": "development",',
+        '   "mainPath"   : "./Main.mjs"',
+        '}'
+    );
+    const file = `${classFolder}/neo-config.json`;
+    fs.writeFileSync(file, `${template.join(os.EOL)}${os.EOL}`);
+
+}
+
+
+function createMainContainer(classFolder, componentPath, componentChunk, name) {
+    const template = [];
+
+    template.push(
+        "import ConfigurationViewport   from '../../ConfigurationViewport.mjs';",
+        "import NumberField             from '../../../src/form/field/Number.mjs';",
+        `import ${name}                 from '../../../src/${componentPath}.mjs';`,
+        "",
+        "/**",
+        ` * @class Neo.examples.${componentChunk.toLowerCase()}.MainContainer`,
+        " * @extends Neo.examples.ConfigurationViewport",
+        " */",
+        "class MainContainer extends ConfigurationViewport {",
+        "    static config = {",
+        `        className: 'Neo.examples.${componentChunk.toLowerCase()}.MainContainer',`,
+        "        autoMount: true,",
+        "        configItemLabelWidth: 110,",
+        "        configItemWidth: 230,",
+        "        layout: { ntype: 'hbox', align: 'stretch' }",
+        "    }",
+        "",
+        "   createConfigurationComponents() {",
+        "       let me = this;",
+        "",
+        "       return [{",
+        "           module: NumberField,",
+        "           clearable: true,",
+        "           labelText: 'height',",
+        "           listeners: { change: me.onConfigChange.bind(me, 'height') },",
+        "           maxValue: 100,",
+        "           minValue: 20,",
+        "           stepSize: 2,",
+        "           style: { marginTop: '10px' },",
+        "           value: me.exampleComponent.height",
+        "       }, {",
+        "           module: NumberField,",
+        "           clearable: true,",
+        "           labelText: 'width',",
+        "           listeners: { change: me.onConfigChange.bind(me, 'width') },",
+        "           maxValue: 300,",
+        "           minValue: 100,",
+        "           stepSize: 5,",
+        "           style: { marginTop: '10px' },",
+        "           value: me.exampleComponent.width",
+        "       }]",
+        "   }",
+        "",
+        "   createExampleComponent() {",
+        "       return Neo.create({",
+        `           module: ${name},`,
+        "           height: 30,",
+        "           width:  100",
+        "           // property_xy: <value>",
+        "       })",
+        "   }",
+        "}",
+        "",
+        "Neo.applyClassConfig(MainContainer);",
+        "",
+        "export default MainContainer;"
+    );
+    const file = `${classFolder}/MainContainer.mjs`;
+    fs.writeFileSync(file, `${template.join(os.EOL)}${os.EOL}`);
+}

package/buildScripts/tools/createScss.mjs

@@ -0,0 +1,98 @@
+#!/usr/bin/env node
+
+import {Command}       from 'commander/esm.mjs';
+import fs              from 'fs-extra';
+import os              from 'os';
+import path            from 'path';
+import {fileURLToPath} from 'url';
+
+const
+    __dirname   = fileURLToPath(new URL('../../', import.meta.url)),
+    cwd         = process.cwd(),
+    requireJson = path => JSON.parse(fs.readFileSync((path))),
+    packageJson = requireJson(path.join(__dirname, 'package.json')),
+    program     = new Command();
+
+program
+    .version(packageJson.version)
+    .option('-b, --baseClass <value>')
+    .option('-c, --className <value>')
+    .allowUnknownOption()
+    .parse(process.argv);
+
+const programOpts = program.opts();
+
+let className = programOpts.className;
+
+let ns            = className.split('.');
+let file          = ns.pop();
+let root          = ns.shift();
+let rootLowerCase = root.toLowerCase();
+
+// let classFolder = path.join(cwd,  '/src/', ns.join('/'));
+const forNonNeoPathArray = ns.filter(f => f !== 'view');
+let nonNeoPath           = `apps/${rootLowerCase}`;
+if (forNonNeoPathArray.length > 0) {
+    nonNeoPath = nonNeoPath.concat('/', forNonNeoPathArray.join('/'));
+}
+
+let classFolder = path.join(cwd, 'resources/scss/src/', rootLowerCase === 'neo' ? `/${ns.join('/')}` : nonNeoPath);
+
+if (!fs.existsSync(classFolder)) {
+    fs.mkdirpSync(classFolder, {recursive: true});
+}
+
+const scssClassName = getScssClassName(className);
+const template      = `.${scssClassName} {
+    // add css information here
+    background-color: var(--${scssClassName.toLowerCase()}-background-color); // this is an example
+}`;
+createScssStub(classFolder, file, template);
+
+// iterate over themes
+let themeFoldersPath = path.join(cwd, 'resources/scss/');
+
+const themeFolders = listDirectories(themeFoldersPath);
+
+themeFolders.forEach(theme => {
+    const forNonNeoPathArray = ns.filter(f => f !== 'view');
+    let nonNeoPath           = `apps/${rootLowerCase}`;
+    if (forNonNeoPathArray.length > 0) {
+        nonNeoPath = nonNeoPath.concat('/', forNonNeoPathArray.join('/'));
+    }
+    classFolder = path.join(cwd, 'resources/scss/', theme, rootLowerCase === 'neo' ? `/${ns.join('/')}` : nonNeoPath);
+    if (!fs.existsSync(classFolder)) {
+        fs.mkdirpSync(classFolder, {recursive: true});
+    }
+    const exampleColor  = theme.includes('dark') ? 'darkgreen' : 'green';
+    const themeTemplate = `:root .${rootLowerCase}-${theme} { // .${scssClassName}
+        // add css theme information here
+        --${scssClassName.toLowerCase()}-background-color: ${exampleColor}; //example
+}`;
+    createScssStub(classFolder, file, themeTemplate);
+})
+
+function listDirectories(path) {
+    return fs.readdirSync(path, {withFileTypes: true})
+        .filter(dirent => dirent.isDirectory() && dirent.name.startsWith('theme'))
+        .map(dirent => dirent.name);
+}
+
+function createScssStub(classFolder, file, template) {
+    const scssFile = `${classFolder}/${file}.scss`;
+
+    fs.writeFileSync(scssFile, `${template}${os.EOL}`);
+}
+
+function getScssClassName(className) {
+    let classItems = className.split('.');
+    let result     = [];
+
+    classItems.forEach(item => {
+        let temp = item.split(/(?=[A-Z])/);
+        result.push(temp.join('-').toLowerCase());
+    });
+
+    return result.join('-');
+}
+

package/examples/ServiceWorker.mjs

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

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "neo.mjs",
-    "version": "6.1.5",
+    "version": "6.2.1",
     "description": "The webworkers driven UI framework",
     "type": "module",
     "repository": {
@@ -19,6 +19,7 @@
         "build-threads": "node ./buildScripts/webpack/buildThreads.mjs -f",
         "create-app": "node ./buildScripts/createApp.mjs",
         "create-class": "node ./buildScripts/createClass.mjs",
+        "create-component": "node ./buildScripts/createComponent.mjs",
         "generate-docs-json": "node ./buildScripts/docs/jsdocx.mjs",
         "inject-package-version": "node ./buildScripts/injectPackageVersion.mjs",
         "server-start": "webpack serve -c ./buildScripts/webpack/webpack.server.config.mjs --open",

package/src/DefaultConfig.mjs

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

package/src/menu/List.mjs

@@ -357,9 +357,12 @@ class List extends BaseList {
 
             record.handler?.call(me, record);
 
-            if (me.hideOnLeafItemClick && !record.items) {
-                me.unmount()
-            }
+            record.route && Neo.Main.setRoute({
+                appName: me.appName,
+                value  : record.route
+            });
+
+            me.hideOnLeafItemClick && !record.items && me.unmount();
 
             if (record.items) {
                 submenu = me.subMenuMap?.[me.getMenuMapId(recordId)];

package/src/menu/Model.mjs

@@ -33,6 +33,9 @@ class Model extends BaseModel {
         }, {
             name: 'items', // optional
             type: 'Array'
+        }, {
+            name: 'route',
+            type: 'String'
         }, {
             name: 'text',
             type: 'String'