neo.mjs 5.13.8 → 5.13.10

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.10'
          */
-        version: '5.13.8'
+        version: '5.13.10'
     }
 
     /**

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.10'
          */
-        version: '5.13.8'
+        version: '5.13.10'
     }
 
     /**

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "neo.mjs",
-    "version": "5.13.8",
+    "version": "5.13.10",
     "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) {
@@ -267,6 +273,7 @@
             border-color    : transparent;
             margin          : 0; // important for Safari => #1125
             padding-left    : 16px;
+            position        : relative; // overwriting the browser default static, to ensure the z-index gets applied
             z-index         : 1;
         }
 

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.10'
      * @memberOf! module:Neo
      * @name config.version
      * @type String
      */
-    version: '5.13.8'
+    version: '5.13.10'
 };
 
 Object.assign(DefaultConfig, {

package/src/component/Base.mjs

@@ -1596,7 +1596,7 @@ class Base extends CoreBase {
         }
 
         return new Promise((resolve, reject) => {
-            if (me.mounted) {
+            if (me.mounted && me.vnode) {
                 me.updateVdom(vdom, vnode, resolve, reject);
             } else {
                 me.update();
@@ -1837,22 +1837,24 @@ class Base extends CoreBase {
 
         // keep the vnode parent tree in sync
         ComponentManager.getParents(me).forEach((component, index) => {
-            if (!me.vnode) {
-                if (index === 0 && !VNodeUtil.removeChildVnode(component.vnode, me.id)) {
-                    // This can fail, in case the vnode is already removed (not an issue, better safe than sorry)
-                    // console.warn('syncVnodeTree: Could not remove the parent vnode for', me.id, component);
+            if (component.vnode) {
+                if (!me.vnode) {
+                    if (index === 0 && !VNodeUtil.removeChildVnode(component.vnode, me.id)) {
+                        // This can fail, in case the vnode is already removed (not an issue, better safe than sorry)
+                        // console.warn('syncVnodeTree: Could not remove the parent vnode for', me.id, component);
+                    }
                 }
-            }
 
-            // check for dynamically rendered components which get inserted into the component tree
-            else if (index === 0 && me.vnode.outerHTML) {
-                // console.log('dyn item', me.vnode, me.parentIndex);
-                component.vnode.childNodes.splice(me.parentIndex || 0, 0, me.vnode);
-            }
+                // check for dynamically rendered components which get inserted into the component tree
+                else if (index === 0 && me.vnode.outerHTML) {
+                    // console.log('dyn item', me.vnode, me.parentIndex);
+                    component.vnode.childNodes.splice(me.parentIndex || 0, 0, me.vnode);
+                }
 
-            else if (!VNodeUtil.replaceChildVnode(component.vnode, me.vnode.id, me.vnode)) {
-                // todo: can happen for dynamically inserted container items
-                // console.warn('syncVnodeTree: Could not replace the parent vnode for', me.vnode.id, component);
+                else if (!VNodeUtil.replaceChildVnode(component.vnode, me.vnode.id, me.vnode)) {
+                    // todo: can happen for dynamically inserted container items
+                    // console.warn('syncVnodeTree: Could not replace the parent vnode for', me.vnode.id, component);
+                }
             }
         });
 
@@ -2024,18 +2026,21 @@ class Base extends CoreBase {
 
                 reject?.()
             }).then(data => {
-                // console.log('Component vnode updated', data);
-                me.vnode          = data.vnode;
-                me.isVdomUpdating = false;
-
-                deltas = data.deltas;
-
-                if (!Neo.config.useVdomWorker && deltas.length > 0) {
-                    Neo.applyDeltas(me.appName, deltas).then(() => {
+                // checking if the component got destroyed before the update cycle is done
+                if (me.id) {
+                    // console.log('Component vnode updated', data);
+                    me.vnode          = data.vnode;
+                    me.isVdomUpdating = false;
+
+                    deltas = data.deltas;
+
+                    if (!Neo.config.useVdomWorker && deltas.length > 0) {
+                        Neo.applyDeltas(me.appName, deltas).then(() => {
+                            me.resolveVdomUpdate(resolve)
+                        });
+                    } else {
                         me.resolveVdomUpdate(resolve)
-                    });
-                } else {
-                    me.resolveVdomUpdate(resolve)
+                    }
                 }
             })
         }

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
     }
 }