neo.mjs 5.13.8 → 5.13.9

package/apps/ServiceWorker.mjs

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

package/examples/ServiceWorker.mjs

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

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "neo.mjs",
-    "version": "5.13.8",
+    "version": "5.13.9",
     "description": "The webworkers driven UI framework",
     "type": "module",
     "repository": {

package/resources/scss/src/form/field/Text.scss

@@ -82,6 +82,12 @@
                 }
             }
         }
+
+        &:not(.label-inline, .neo-input-wrapper) {
+            .neo-textfield-input {
+                border-color: v(textfield-border-color-invalid);
+            }
+        }
     }
 
     &.neo-invalid:not(.neo-disabled, .neo-has-content) {

package/src/DefaultConfig.mjs

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

package/src/util/Logger.mjs

@@ -6,6 +6,38 @@ import Base from '../core/Base.mjs';
  * @singleton
  */
 class Logger extends Base {
+    /**
+     * Colors
+     * @property {Object} colors
+     */
+    logColors = {
+        error: 'indianred',
+        info : '#acacac',
+        log  : '#448888',
+        warn : '#6d6d00'
+    }
+    /**
+     * Character
+     * @property {Object} logChar
+     */
+    logChars = {
+        error: 'E',
+        info : 'I',
+        log  : 'L',
+        warn : 'W'
+    }
+    /**
+     * LogLevels
+     * @property {String[]} logLevels
+     */
+    logLevels = ['info', 'log', 'warn', 'error']
+
+    /**
+     * Timeout
+     * @property {Number} timeToStart in ms
+     */
+    timeToStartComponentLogger = 1500
+
     static config = {
         /**
          * @member {String} className='Neo.util.Logger'
@@ -13,15 +45,33 @@ class Logger extends Base {
          */
         className: 'Neo.util.Logger',
         /**
-         * Set this config to false to disable the logging
-         * @member {boolean} enableLogs=true
+         * Set this config to false to disable the logging in production
+         * To change this on the fly use:
+         *
+         *     Neo.util.Logger.enableLogsInProduction = true;
+         *
+         * @member {boolean} enableLogsInProduction=true
          */
-        enableLogs: true,
+        enableLogsInProduction: false,
         /**
-         * @member {String} level='log'
+         * Set this config to false to disable the component logging using Ctrl-Right Click
+         * To turn it on, add:
+         *
+         *      Neo.util.Logger.enableComponentLogger = true;
+         *
+         * @member {boolean} enableComponentLogger_=true
+         */
+        enableComponentLogger_: true,
+        /**
+         * Set the minimum level, which you want to output.
+         * Change this at any time using a value of logLevels: ['info', 'log', 'warn', 'error']
+         *
+         *     Neo.util.Logger.level = 'error'
+         *
+         * @member {String} level='info'
          * @protected
          */
-        level: 'log',
+        level_: 'info',
         /**
          * @member {boolean} enableLogs=true
          * @protected
@@ -35,14 +85,75 @@ class Logger extends Base {
     construct(config) {
         super.construct(config);
 
+        const me = this;
+
         // aliases
-        Neo.applyFromNs(Neo, this, {
+        Neo.applyFromNs(Neo, me, {
             error   : 'error',
             info    : 'info',
             log     : 'log',
             logError: 'logError',
             warn    : 'warn'
         }, true);
+
+        setTimeout(() => {
+            if (!me.enableLogsInProduction && Neo.config.environment === 'dist/production') {
+                me.write = Neo.emptyFn;
+            }
+        }, 50);
+    }
+
+    /**
+     * Ctrl-Right Click will show the current component
+     * @param {Boolean} value
+     * @param {Boolean} oldValue
+     */
+    afterSetEnableComponentLogger(value, oldValue) {
+        setTimeout(() => {
+            if (value) {
+                if (Neo.workerId !== 'app' || Neo.config.environment === 'dist/production') return;
+
+                const viewport = Neo.getComponent('neo-viewport-1') || Neo.getComponent('neo-configuration-viewport-1');
+                if (!viewport) {
+                    console.warn('[LOGGER] could not find viewport.');
+                    return;
+                }
+
+                viewport.addDomListeners({
+                    contextmenu: (data) => {
+                        if (data.ctrlKey) {
+                            let isGroupSet = false;
+
+                            data.path.forEach((item) => {
+                                const component = Neo.getComponent(item.id);
+
+                                if (component) {
+                                    if (!isGroupSet) {
+                                        isGroupSet = true;
+                                        console.group(item.id);
+                                    }
+                                    console.log(component);
+                                }
+                            });
+
+                            if (isGroupSet) {
+                                console.groupEnd();
+                            }
+                        }
+                    }
+                });
+            }
+        }, this.timeToStartComponentLogger);
+    }
+
+    /**
+     * Set level to number based on position in logLevels
+     * @param {String} value
+     * @param {String|Number} oldValue
+     * @returns {number}
+     */
+    beforeSetLevel(value, oldValue) {
+        return this.logLevels.indexOf(value);
     }
 
     /**
@@ -56,42 +167,118 @@ class Logger extends Base {
      * @param args
      */
     info(...args) {
-        this.level = 'info';
-        this.write(...args);
+        args = this.resolveArgs(...args);
+        this.write(args, 'info');
     }
 
     /**
      * @param args
      */
     log(...args) {
-        this.level = 'log';
-        this.write(...args);
+        args = this.resolveArgs(...args);
+        this.write(args, 'log');
     }
 
     /**
      * @param args
      */
     logError(...args) {
-        this.level = 'error';
-        this.write(...args);
+        args = this.resolveArgs(...args);
+        this.write(args, 'error');
     }
 
     /**
      * @param args
      */
     warn(...args) {
-        this.level = 'warn';
-        this.write(...args);
+        args = this.resolveArgs(...args);
+        this.write(args, 'warn');
     }
 
     /**
+     * Output method
      * @param args
+     * @param {String} level
      * @protected
      */
-    write(...args) {
-        if (this.enableLogs === true) {
-            console[this.level](...args);
+    write(args, level) {
+        const me = this;
+        if (me.beforeSetLevel(level) < me.level) return;
+
+        const logColor = me.logColors[level],
+              logChar  = me.logChars[level],
+              bg       = `background-color:${logColor}; color: white; font-weight: 900;`,
+              color    = `color:${logColor};`,
+              msg      = `[${me.getCaller()}] ${args.msg}`;
+
+        if (args.data) {
+            console.groupCollapsed(`%c ${logChar} %c ${msg}`, bg, color)
+            console.log(args.data);
+            console.groupEnd();
+        } else {
+            console.log(`%c ${logChar} %c ${msg}`, bg, color)
+        }
+    }
+
+    /**
+     * HELPER TO CATCH CALLER
+     * no known native way in modern JS to know what file that triggered the current method
+     * therefore we use Error, we can get the caller file from the stack trace string.
+     */
+    getCaller() {
+        let caller_path = undefined;
+
+        try {
+            throw Error();
+
+        } catch (err) {
+            const stack_lines = err.stack.split('\n');
+            let found_this = false;
+
+            for (let i in stack_lines) {
+                let line = stack_lines[i];
+
+                if (!found_this && /Logger\.mjs/.test(line)) {
+                    found_this = true
+
+                } else if (found_this) {
+                    if (!/Logger\.mjs/.test(line)) {
+                        // remove the closing )
+                        line = line.replace(')', '');
+                        // get the part after the last /
+                        caller_path = line.match(/([^\/]+)$/)[1].match(/([^ ]+)$/)[1];
+
+                        break;
+                    }
+                }
+
+            }
+
+            return caller_path
+        }
+    }
+
+    /**
+     * HELPER FOR ARGS
+     * @param {Array} args
+     * @return {Object}
+     */
+    resolveArgs(...args) {
+        const identifier = args[0];
+        let argsObject = {};
+
+        if (args.length === 1) {
+            if (Neo.isString(identifier)) {
+                argsObject.msg = args[0];
+            } else if (Neo.isObject(identifier)) {
+                argsObject = identifier;
+            }
+        } else if (args.length === 2) {
+            argsObject.msg = args[0];
+            argsObject.data = args[1];
         }
+
+        return argsObject
     }
 }