neo.mjs 4.1.0 → 4.2.0

package/buildScripts/addConfig.mjs

@@ -0,0 +1,398 @@
+#!/usr/bin/env node
+
+import chalk       from 'chalk';
+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')),
+    program     = new Command(),
+    programName = `${packageJson.name} add-config`;
+
+/**
+ * Adds a comma to the last element of the contentArray
+ * @param {String[]} contentArray
+ * @param {Number} index=contentArray.length - 1
+ * @returns {String[]}
+ */
+function addComma(contentArray, index=contentArray.length - 1) {
+    contentArray[index] += ',';
+    return contentArray;
+}
+
+/**
+ * Adds a config to the given index of the contentArray
+ * @param {Object} opts
+ * @param {String} opts.configName
+ * @param {String} opts.defaultValue
+ * @param {String[]} opts.contentArray
+ * @param {Boolean} opts.isLastConfig
+ * @param {Number} opts.index
+ * @param {String} opts.type
+ * @returns {String[]}
+ */
+function addConfig(opts) {
+    if (opts.type === 'String' && opts.defaultValue !== 'null') {
+        opts.defaultValue = `'${opts.defaultValue}'`;
+    }
+
+    const config = [
+        '        /**',
+        `         * @member {${opts.type}} ${opts.configName}_=${opts.defaultValue}`,
+        '         */',
+        `        ${opts.configName}_: ${opts.defaultValue}`
+    ];
+
+    !opts.isLastConfig && addComma(config);
+
+    opts.contentArray.splice(opts.index, 0, config.join(os.EOL));
+    return opts.contentArray;
+}
+
+/**
+ * Adds a config hook at the matching index
+ * @param {Object} opts
+ * @param {String} opts.comment
+ * @param {String[]} opts.contentArray
+ * @param {String} opts.name
+ * @param {Boolean} opts.oldValueParam
+ * @param {Boolean} opts.returnValue
+ * @param {String} opts.type
+ * @returns {String[]}
+ */
+function addHook(opts) {
+    let contentArray = opts.contentArray,
+        i            = 0,
+        inserted     = false,
+        len          = contentArray.length,
+        j, methodName, nextLine,
+
+    method = [
+        '',
+        '    /**',
+        `     * ${opts.comment}`,
+        `     * @param {${opts.type}} value`
+    ];
+
+    if (opts.oldValueParam) {
+        method.push(
+        `     * @param {${opts.type}} oldValue`
+        );
+    }
+
+    if (opts.returnValue) {
+        method.push(
+        `     * @returns {${opts.type}}`
+        );
+    }
+
+    method.push(
+    '     * @protected',
+    '     */'
+    );
+
+    if (opts.oldValueParam) {
+        method.push(
+        `    ${opts.name}(value, oldValue) {`
+        );
+    } else {
+        method.push(
+        `    ${opts.name}(value) {`
+        );
+    }
+
+    if (opts.returnValue) {
+        method.push(
+        '        return value;'
+        );
+    } else {
+        method.push(
+        '        '
+        );
+    }
+
+    method.push(
+        '    }'
+    );
+
+    for (; i < len; i++) {
+        if (contentArray[i].includes('}}')) {
+            break;
+        }
+    }
+
+    for (; i < len; i++) {
+        if (contentArray[i].includes('*/')) {
+            nextLine   = contentArray[i + 1]
+            methodName = nextLine.substring(0, nextLine.indexOf('(')).trim();
+
+            if (methodName === 'construct') {
+                continue;
+            }
+
+            if (methodName > opts.name) {
+                for (j=i; j > 0; j--) {
+                    if (contentArray[j].includes('/**')) {
+                        contentArray.splice(j - 1, 0, method.join(os.EOL));
+                        inserted = true;
+                        break;
+                    }
+                }
+                break;
+            }
+        }
+    }
+
+    if (!inserted) {
+        for (i=contentArray.length - 1; i > 0; i--) {
+            if (contentArray[i].includes('}')) {
+                contentArray.splice(i, 0, method.join(os.EOL));
+                break;
+            }
+        }
+    }
+
+    return contentArray;
+}
+
+
+/**
+ * Makes the first character of a string uppercase
+ * @param {String} value
+ * @returns {Boolean|String} Returns false for non string inputs
+ */
+function capitalize(value) {
+    return value[0].toUpperCase() + value.slice(1);
+}
+
+program
+    .name(programName)
+    .version(packageJson.version)
+    .option('-i, --info', 'print environment debug info')
+    .option('-c, --className <value>')
+    .option('-d, --defaultValue <value>')
+    .option('-h, --hooks <value>')
+    .option('-n, --configName <value>')
+    .option('-t, --type <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 of your class:',
+            default: 'Covid.view.MainContainer'
+        });
+
+        Object.assign(answers, answer);
+    }
+
+    let className = programOpts.className || answers.className,
+        ns        = className.split('.'),
+        root      = ns.shift().toLowerCase(),
+        classPath = path.resolve(cwd, root === 'neo' ? 'src' : `apps/${root}`, `${ns.join('/')}.mjs`);
+
+    if (!fs.existsSync(path.resolve(classPath))) {
+        console.log(chalk.red(`File not found for ${className} => ${classPath}`));
+        process.exit(1);
+    }
+
+    if (!programOpts.configName) {
+        answer = await inquirer.prompt({
+            type   : 'input',
+            name   : 'configName',
+            message: 'Please enter a name for your class config:'
+        });
+
+        Object.assign(answers, answer);
+    }
+
+    let configName = programOpts.configName || answers.configName;
+
+    if (configName.endsWith('_')) {
+        configName = configName.slice(0, -1);
+    }
+
+    let uConfigName = capitalize(configName);
+
+    if (!programOpts.type) {
+        answer = await inquirer.prompt({
+            type   : 'list',
+            name   : 'type',
+            message: 'Please choose a type for your class config:',
+            default: 'Custom',
+            choices: [
+                'Custom',
+                'Object',
+                'Object[]',
+                'Number',
+                'Number[]',
+                'String',
+                'String[]'
+            ]
+        });
+
+        Object.assign(answers, answer);
+    }
+
+    if (answers.type === 'Custom') {
+        answer = await inquirer.prompt({
+            type   : 'input',
+            name   : 'type',
+            message: 'Please enter the type for your class config:'
+        });
+
+        Object.assign(answers, answer);
+    }
+
+    if (!programOpts.defaultValue) {
+        answer = await inquirer.prompt({
+            type   : 'input',
+            name   : 'defaultValue',
+            message: 'Please enter a defaultValue:',
+            default: 'null'
+        });
+
+        Object.assign(answers, answer);
+    }
+
+    if (!programOpts.hooks) {
+        answer = await inquirer.prompt({
+            type   : 'checkbox',
+            name   : 'hooks',
+            message: 'Please choose the hooks for your class config:',
+            choices: [`afterSet${uConfigName}()`, `beforeGet${uConfigName}()`, `beforeSet${uConfigName}()`],
+            default: [`afterSet${uConfigName}()`]
+        });
+
+        Object.assign(answers, answer);
+    }
+
+    let defaultValue = programOpts.defaultValue || answers.defaultValue,
+        hooks        = programOpts.hooks        || answers.hooks,
+        type         = programOpts.type         || answers.type,
+        contentArray = fs.readFileSync(classPath).toString().split(os.EOL),
+        i            = 0,
+        len          = contentArray.length,
+        codeLine, existingConfigName, j, nextLine;
+
+    for (; i < len; i++) {
+        if (contentArray[i].includes('static getConfig')) {
+            break;
+        }
+    }
+
+    for (; i < len; i++) {
+        codeLine = contentArray[i];
+
+        if (codeLine.includes('}}')) {
+            addComma(contentArray, i - 1);
+            addConfig({
+                configName,
+                defaultValue,
+                contentArray,
+                index       : i,
+                isLastConfig: true,
+                type
+            });
+            break;
+        }
+
+        if (codeLine.includes('*/')) {
+            nextLine           = contentArray[i + 1]
+            existingConfigName = nextLine.substring(0, nextLine.indexOf(':')).trim();
+
+            if (existingConfigName === 'className' || existingConfigName === 'ntype') {
+                continue;
+            }
+
+            if (existingConfigName > configName) {
+                for (j=i; j > 0; j--) {
+                    if (contentArray[j].includes('/**')) {
+                        addConfig({
+                            configName,
+                            contentArray,
+                            defaultValue,
+                            index       : j,
+                            isLastConfig: false,
+                            type
+                        });
+                        break;
+                    }
+                }
+                break;
+            }
+        }
+    }
+
+    if (hooks.includes(`afterSet${uConfigName}()`)) {
+        addHook({
+            comment      : `Triggered after the ${configName} config got changed`,
+            contentArray,
+            name         : `afterSet${uConfigName}`,
+            oldValueParam: true,
+            returnValue  : false,
+            type
+        });
+    }
+
+    if (hooks.includes(`beforeGet${uConfigName}()`)) {
+        addHook({
+            comment      : `Gets triggered when accessing the value of the ${configName} config`,
+            contentArray,
+            name         : `beforeGet${uConfigName}`,
+            oldValueParam: false,
+            returnValue  : true,
+            type
+        });
+    }
+
+    if (hooks.includes(`beforeSet${uConfigName}()`)) {
+        addHook({
+            comment      : `Triggered before the ${configName} config gets changed`,
+            contentArray,
+            name         : `beforeSet${uConfigName}`,
+            oldValueParam: true,
+            returnValue  : true,
+            type
+        });
+    }
+
+    fs.writeFileSync(classPath, contentArray.join(os.EOL));
+}

package/buildScripts/createApp.mjs

@@ -221,16 +221,16 @@ if (programOpts.info) {
                 " */",
                 "class MainContainer extends Viewport {",
                 "    static getConfig() {return {",
-                "        /*",
+                "        /**",
                 "         * @member {String} className='" + appName + ".view.MainContainer'",
                 "         * @protected",
                 "         */",
                 "        className: '" + appName + ".view.MainContainer',",
-                "        /*",
+                "        /**",
                 "         * @member {Boolean} autoMount=true",
                 "         */",
                 "        autoMount: true,",
-                "        /*",
+                "        /**",
                 "         * @member {Object[]} items",
                 "         */",
                 "        items: [{",

package/buildScripts/createClass.mjs

@@ -576,7 +576,7 @@ if (programOpts.info) {
             " */",
             `class ${file} extends ${baseFileName} {`,
             "    static getConfig() {return {",
-            "        /*",
+            "        /**",
             `         * @member {String} className='${className}'`,
             "         * @protected",
             "         */",
@@ -584,7 +584,7 @@ if (programOpts.info) {
         );
 
         baseClass === 'table.Container' && addComma(classContent).push(
-            "        /*",
+            "        /**",
             "         * @member {Object[]} columns",
             "         */",
             "        columns: [{",
@@ -597,7 +597,7 @@ if (programOpts.info) {
         );
 
         baseClass === 'data.Model' && addComma(classContent).push(
-            "        /*",
+            "        /**",
             "         * @member {Object[]} fields",
             "         */",
             "        fields: [{",
@@ -607,14 +607,14 @@ if (programOpts.info) {
         );
 
         baseClass === 'container.Base' && addComma(classContent).push(
-            "        /*",
+            "        /**",
             "         * @member {Object[]} items",
             "         */",
             "        items: []"
         );
 
         baseClass === 'tab.Container' && addComma(classContent).push(
-            "        /*",
+            "        /**",
             "         * @member {Object[]} items",
             "         */",
             "        items: [{",
@@ -635,7 +635,7 @@ if (programOpts.info) {
         );
 
         isSingleton && addComma(classContent).push(
-            "        /*",
+            "        /**",
             "         * @member {Boolean} singleton=true",
             "         * @protected",
             "         */",
@@ -643,7 +643,7 @@ if (programOpts.info) {
         );
 
         baseClass === 'component.Base' && addComma(classContent).push(
-            "        /*",
+            "        /**",
             "         * @member {Object} _vdom",
             "         */",
             "        _vdom:",

package/examples/grid/covid/GridContainer.mjs

@@ -0,0 +1,113 @@
+import BaseGridContainer       from '../../../src/grid/Container.mjs';
+import GridContainerController from './GridContainerController.mjs';
+import Store                   from './Store.mjs';
+import Util                    from './Util.mjs';
+
+/**
+ * @class Neo.examples.grid.covid.GridContainer
+ * @extends Neo.grid.Container
+ */
+class GridContainer extends BaseGridContainer {
+    static getConfig() {return {
+        /**
+         * @member {String} className='Neo.examples.grid.covid.GridContainer'
+         * @protected
+         */
+        className: 'Neo.examples.grid.covid.GridContainer',
+        /**
+         * @member {String[]} cls=['covid-country-grid', 'neo-grid-container']
+         */
+        cls: ['covid-country-grid', 'neo-grid-container'],
+        /**
+         * Default configs for each column
+         * @member {Object} columnDefaults
+         */
+        columnDefaults: {
+            align               : 'right',
+            defaultSortDirection: 'DESC',
+            renderer            : Util.formatNumber,
+            width               : 100
+        },
+        /**
+         * @member {Object[]} columns
+         */
+        columns: [{
+            cls     : ['neo-index-column', 'neo-grid-header-button'],
+            dock    : 'left',
+            field   : 'index',
+            minWidth: 40,
+            text    : '#',
+            renderer: Util.indexRenderer,
+            width   : 40
+        }, {
+            align               : 'left',
+            defaultSortDirection: 'ASC',
+            dock                : 'left',
+            field               : 'country',
+            text                : 'Country',
+            width               : 200,
+
+            renderer: data => {
+                return {
+                    cls : ['neo-country-column', 'neo-grid-cell'],
+                    html: [
+                        '<div style="display: flex; align-items: center">',
+                            '<img style="height:20px; margin-right:10px; width:20px;" src="' + Util.getCountryFlagUrl(data.value) + '">' + data.value,
+                        '</div>'
+                    ].join('')
+                };
+            }
+        }, {
+            field: 'cases',
+            text : 'Cases'
+        }, {
+            field: 'casesPerOneMillion',
+            text : 'Cases / 1M'
+        }, {
+            field   : 'infected',
+            text    : 'Infected',
+            renderer: data => Util.formatInfected(data)
+        }, {
+            field   : 'active',
+            text    : 'Active',
+            renderer: data => Util.formatNumber(data, '#64B5F6')
+        }, {
+            field   : 'recovered',
+            text    : 'Recovered',
+            renderer: data => Util.formatNumber(data, '#28ca68')
+        }, {
+            field   : 'critical',
+            text    : 'Critical',
+            renderer: data => Util.formatNumber(data, 'orange')
+        }, {
+            field   : 'deaths',
+            text    : 'Deaths',
+            renderer: data => Util.formatNumber(data, '#fb6767')
+        }, {
+            field: 'todayCases',
+            text : 'Cases today'
+        }, {
+            field   : 'todayDeaths',
+            text    : 'Deaths today',
+            renderer: data => Util.formatNumber(data, '#fb6767')
+        }, {
+            field: 'tests',
+            text : 'Tests'
+        }, {
+            field: 'testsPerOneMillion',
+            text : 'Tests / 1M'
+        }],
+        /**
+         * @member {Neo.controller.Component} controller=GridContainerController
+         */
+        controller: GridContainerController,
+        /**
+         * @member {Object[]} store=Store
+         */
+        store: Store
+    }}
+}
+
+Neo.applyClassConfig(GridContainer);
+
+export default GridContainer;

package/examples/grid/covid/GridContainerController.mjs

@@ -0,0 +1,62 @@
+import Controller from '../../../src/controller/Component.mjs';
+
+/**
+ * @class Neo.examples.grid.covid.GridContainerController
+ * @extends Neo.controller.Component
+ */
+class GridContainerController extends Controller {
+    /**
+     * @member {String} apiUrl='https://disease.sh/v3/covid-19/countries'
+     */
+    apiUrl = 'https://disease.sh/v3/covid-19/countries'
+
+    static getConfig() {return {
+        /**
+         * @member {String} className='Neo.examples.grid.covid.GridContainerController'
+         * @protected
+         */
+        className: 'Neo.examples.grid.covid.GridContainerController'
+    }}
+
+    /**
+     * @param {Object} config
+     */
+    construct(config) {
+        super.construct(config);
+        this.loadData();
+    }
+
+    /**
+     * @param {Object[]} data
+     */
+    addStoreItems(data) {
+        let store = this.component.store;
+
+        data.forEach(item => {
+            if (item.country.includes('"')) {
+                item.country = item.country.replace('"', "\'");
+            }
+
+            item.casesPerOneMillion = item.casesPerOneMillion > item.cases ? 'N/A' : item.casesPerOneMillion || 0;
+            item.infected           = item.casesPerOneMillion;
+        });
+
+        store.data = data;
+    }
+
+    /**
+     *
+     */
+    loadData() {
+        let me = this;
+
+        fetch(me.apiUrl)
+            .then(response => response.json())
+            .catch(err => console.log('Can’t access ' + me.apiUrl, err))
+            .then(data => me.addStoreItems(data));
+    }
+}
+
+Neo.applyClassConfig(GridContainerController);
+
+export default GridContainerController;

package/examples/grid/covid/MainContainer.mjs

@@ -0,0 +1,36 @@
+import GridContainer from './GridContainer.mjs';
+import Viewport      from '../../../src/container/Viewport.mjs';
+
+/**
+ * @class Neo.examples.grid.covid.MainContainer
+ * @extends Neo.container.Viewport
+ */
+class MainContainer extends Viewport {
+    static getConfig() {return {
+        /**
+         * @member {String} className='Neo.examples.grid.covid.MainContainer'
+         * @protected
+         */
+        className: 'Neo.examples.grid.covid.MainContainer',
+        /**
+         * @member {Boolean} autoMount=true
+         */
+        autoMount: true,
+        /**
+         * @member {Object[]} items=[GridContainer]
+         */
+        items: [GridContainer],
+        /**
+         * @member {Object} layout={ntype:'fit'}
+         */
+        layout: {ntype: 'fit'},
+        /**
+         * @member {Object} style={padding:'20px'}
+         */
+        style: {padding: '20px'}
+    }}
+}
+
+Neo.applyClassConfig(MainContainer);
+
+export default MainContainer;