analogger 1.20.3 → 1.20.4

package/CHANGELOG.md

@@ -1,5 +1,7 @@
-## [1.20.3](https://github.com/thimpat/analogger/compare/v1.20.2...v1.20.3) (2022-09-07)
+## [1.20.4](https://github.com/thimpat/analogger/compare/v1.20.3...v1.20.4) (2022-09-07)
 
+## [1.20.3](https://github.com/thimpat/analogger/compare/v1.20.2...v1.20.3) (2022-09-07)
+
 ## [1.20.2](https://github.com/thimpat/analogger/compare/v1.20.1...v1.20.2) (2022-09-07)
 
 ## [1.20.1](https://github.com/thimpat/analogger/compare/v1.20.0...v1.20.1) (2022-09-06)

package/browser/src/ana-logger.mjs

@@ -52,6 +52,22 @@ export const DEFAULT_LOG_LEVELS  = {
     INHERIT: -1,
 };
 
+/**
+ * @typedef PLUGIN_TYPE
+ * @type {{LOCAL: string, GLOBAL: string}}
+ */
+const PLUGIN_TYPE = {
+    LOCAL : "local",
+    GLOBAL: "global"
+};
+
+/**
+ * @typedef PLUGIN_PROPERTIES_TYPE
+ * @property {string} methodName AnaLogger's real method name that is set to the AnaLogger instance *
+ * @property {function} callback AnaLogger method that will be called when invoking the plugin
+ * @property {PLUGIN_TYPE} type Whether the plugin is accessible to the AnaLogger class or an instance
+ */
+
 export const DEFAULT_LOG_CONTEXTS  = {
     // The default context
     DEFAULT : {contextName: "DEFAULT", logLevel: DEFAULT_LOG_LEVELS.LOG, symbol: "check"},
@@ -185,7 +201,8 @@ function isNode()
 }
 
 /**
- *
+ * @module ____AnaLogger
+ * @class ____AnaLogger
  */
 class ____AnaLogger
 {
@@ -236,7 +253,7 @@ class ____AnaLogger
 
     static instanceCount = 0;
 
-    static pluginList = [];
+    static pluginTable = {};
 
     originalFormatFunction;
 
@@ -1142,6 +1159,12 @@ class ____AnaLogger
     // ------------------------------------------------
     // Logging methods
     // ------------------------------------------------
+    /**
+     * Add many sections (columns) to a given DOM line
+     * @param $line
+     * @param context
+     * @param text
+     */
     setColumns($line, context, text)
     {
         let index = 0;
@@ -1160,10 +1183,18 @@ class ____AnaLogger
             $line.append($col);
         }
 
-        const $col = document.createElement("span");
+        let $col = document.createElement("span");
         $col.classList.add("analogger-col", "analogger-col-text", `analogger-col-${index}`);
         $col.textContent = text;
         $line.append($col);
+
+        // Add 3 more columns
+        for (let i = 1; i <= 3; ++i)
+        {
+            $col = document.createElement("span");
+            $col.classList.add("analogger-col", "analogger-col-extra", `analogger-extra-${i}`);
+            $line.append($col);
+        }
     }
 
     /**
@@ -1203,6 +1234,23 @@ class ____AnaLogger
         $view.scrollTop = $view.scrollHeight;
     };
 
+    checkOnLoggingToDom(context, param2)
+    {
+        try
+        {
+            let callback = context.onLoggingToDom;
+            if (typeof callback !== "function")
+            {
+                return;
+            }
+
+            return callback.call(this, context, param2);
+        }
+        catch (e)
+        {
+        }
+    }
+
     /**
      * Add a line to the Analogger div.
      * Remove older lines if exceeding limit.
@@ -1210,9 +1258,28 @@ class ____AnaLogger
      * @param $line
      * @param context
      * @param addType
+     * @param message
+     * @param text
+     * @param args
      */
-    addLineToDom($view, $line, {context, addType})
-    {
+    addLineToDom($view, $line, {context, addType, message, text, args})
+    {
+        let proceedFurther = this.checkOnLoggingToDom(context, {
+            message,
+            text,
+            args,
+            logCounter: this.logCounter,
+            $view,
+            $line,
+            addType
+        });
+
+        // If one of the plugins returns false, no further operation will follow
+        if (proceedFurther === false)
+        {
+            return;
+        }
+
         if (addType === ADD_TYPE.BOTTOM)
         {
             $view.append($line);
@@ -1230,18 +1297,7 @@ class ____AnaLogger
                 return;
             }
 
-            context.contextName = ANALOGGER_NAME;
-            context.symbol = "🗑";
-            context.color = "orange";
-            context.className = CLASS_REMOVED_NOTIF;
-
-            clearTimeout(this.timerAddLineToDomID);
-            this.timerAddLineToDomID = setTimeout(() =>
-            {
-                this.timerAddLineToDomID = null;
-                /* istanbul ignore next */
-                this.writeLogToDom(context, "", {addType: ADD_TYPE.TOP, message: `Oldest entries removed`});
-            }, 500);
+            this.showRemovedNotification(context);
             return;
         }
 
@@ -1249,7 +1305,23 @@ class ____AnaLogger
 
     }
 
-    writeLogToDom(context, fullText, {addType = ADD_TYPE.BOTTOM, message = ""} = {})
+    showRemovedNotification(context)
+    {
+        context.contextName = ANALOGGER_NAME;
+        context.symbol = "🗑";
+        context.color = "orange";
+        context.className = CLASS_REMOVED_NOTIF;
+
+        clearTimeout(this.timerAddLineToDomID);
+        this.timerAddLineToDomID = setTimeout(() =>
+        {
+            this.timerAddLineToDomID = null;
+            /* istanbul ignore next */
+            this.writeLogToDom(context, "", {addType: ADD_TYPE.TOP, message: `Oldest entries removed`});
+        }, 500);
+    }
+
+    writeLogToDom(context, fullText, {addType = ADD_TYPE.BOTTOM, message = "", args = null} = {})
     {
         this.$containers = this.$containers || document.querySelectorAll(this.options.logToDom);
         fullText = message || fullText;
@@ -1300,15 +1372,15 @@ class ____AnaLogger
             }
             $line.style.color = context.color;
 
-            this.setColumns($line, context, fullText);
+            this.setColumns($line, context, fullText, args);
 
             // Prevent the application to be stuck when many logs are entered at once
             /* istanbul ignore next */
-            setTimeout(/* istanbul ignore next */function ($view, $line, {addType, context})
+            setTimeout(/* istanbul ignore next */function ($view, $line, {addType, context, message, text, args})
             {
                 /* istanbul ignore next */
-                this.addLineToDom($view, $line, {addType, context});
-            }.bind(this, $view, $line, {addType, context}), 0);
+                this.addLineToDom($view, $line, {addType, context, message, text, args});
+            }.bind(this, $view, $line, {addType, context, message, text: fullText, args}), 0);
 
         }
     }
@@ -1356,10 +1428,10 @@ class ____AnaLogger
     /**
      * Send data to the registered remote server
      * @param raw
-     * @param info
-     * @param lid
+     * @param context
+     * @param done
      */
-    uploadDataToRemote(raw, info = null, lid = null)
+    uploadDataToRemote(raw, context = null, done = null)
     {
         try
         {
@@ -1375,16 +1447,17 @@ class ____AnaLogger
             }
 
             let data = raw;
-            if (info || lid)
+            if (context)
             {
-                data = JSON.stringify({raw, info, lid});
+                data = JSON.stringify({raw, context});
             }
 
             fetch(urlDest, {
                 method: "post",
                 body  : data,
             })
-                .then(() => true)
+                .then((response) => response.json())
+                .then((data) => done && done(data))
                 .catch(e => e);
         }
         catch (e)
@@ -1441,29 +1514,140 @@ class ____AnaLogger
         }
 
         const contextLevel = context.contextLevel || DEFAULT_LOG_LEVELS.LOG;
-        if (contextLevel > DEFAULT_LOG_LEVELS.ERROR)
+        if (contextLevel >= DEFAULT_LOG_LEVELS.ERROR)
         {
             this.#realConsoleError(...res);
         }
-        else if (contextLevel > DEFAULT_LOG_LEVELS.WARN)
+        else if (contextLevel >= DEFAULT_LOG_LEVELS.WARN)
         {
             this.#realConsoleWarn(...res);
         }
-        else if (contextLevel > DEFAULT_LOG_LEVELS.INFO)
+        else if (contextLevel >= DEFAULT_LOG_LEVELS.INFO)
         {
             this.#realConsoleInfo(...res);
         }
-        else if (contextLevel > DEFAULT_LOG_LEVELS.LOG)
+        else if (contextLevel >= DEFAULT_LOG_LEVELS.LOG)
         {
             this.#realConsoleLog(...res);
         }
-        else if (contextLevel > DEFAULT_LOG_LEVELS.DEBUG)
+        else if (contextLevel >= DEFAULT_LOG_LEVELS.DEBUG)
         {
             this.#realConsoleDebug(...res);
         }
 
     }
 
+    /**
+     * Parse the context. If one of its keys has the same name as a registered plugin,
+     * the system will invoke the plugin (the value of the key must be anything truthy).
+     * @param context
+     * @param extras
+     * @returns {undefined|boolean}
+     */
+    checkPlugins(context, {message, text, args, logCounter})
+    {
+        try
+        {
+            if (!Object.keys(____AnaLogger.pluginTable).length)
+            {
+                return;
+            }
+
+            let proceedFurther = true;
+            for (let keyName in context)
+            {
+                const pluginArgs = context[keyName];
+
+                /**
+                 * The key has been passed in the context, but has a falsy value,
+                 * so let's ignore it
+                 */
+                if (!pluginArgs)
+                {
+                    continue;
+                }
+
+                /**
+                 * Extract plugin properties
+                 * @type PLUGIN_TYPE
+                 */
+                const pluginProperties = ____AnaLogger.pluginTable[keyName];
+
+                /**
+                 * Check plugin properties exists
+                 * @see addPlugin
+                 * @see addGlobalPlugin
+                 */
+                if (!pluginProperties)
+                {
+                    continue;
+                }
+
+                // Should be an object
+                if (typeof pluginProperties !== "object")
+                {
+                    continue;
+                }
+
+                /**
+                 * Extract plugin properties
+                 */
+                const {callback, methodName, type} = pluginProperties;
+                if (typeof callback !== "function")
+                {
+                    continue;
+                }
+
+                /**
+                 * If the key given in the context was a function, invoke that function
+                 */
+                if (typeof pluginArgs === "function")
+                {
+                    context = pluginArgs;
+                }
+
+                /**
+                 * Invoke the plugin
+                 */
+                let res = callback.call(this, context, {message, text, args, logCounter, methodName, type, pluginArgs});
+
+                // If the plugin returns exactly false, the log entry will be ignored by anaLogger
+                if (res === false)
+                {
+                    proceedFurther = false;
+                }
+            }
+            return proceedFurther;
+        }
+        catch (e)
+        {
+        }
+    }
+
+    /**
+     * If the context contain a key onLogging that is a function,
+     * execute
+     * @param context
+     * @param extras
+     * @returns {*}
+     */
+    checkOnLogging(context, extras)
+    {
+        try
+        {
+            let callback = context.onLogging;
+            if (typeof callback !== "function")
+            {
+                return;
+            }
+
+            return callback.call(this, context, extras);
+        }
+        catch (e)
+        {
+        }
+    }
+
     /**
      * Display log following template
      * @param context
@@ -1501,6 +1685,28 @@ class ____AnaLogger
 
             ++this.logCounter;
 
+            let proceedFurther;
+
+            proceedFurther = this.checkOnLogging(context, {message, text, args, logCounter: this.logCounter});
+            // If one of the plugins returns false, no further operation will follow
+            if (proceedFurther === false)
+            {
+                return;
+            }
+
+            proceedFurther = this.checkPlugins(context, {message, text, args, logCounter: this.logCounter});
+
+            // If one of the plugins returns false, no further operation will follow
+            if (proceedFurther === false)
+            {
+                return;
+            }
+
+            if (this.options.logToRemote)
+            {
+                this.writeLogToRemote(context, ...args);
+            }
+
             /* istanbul ignore next */
             if (this.isBrowser())
             {
@@ -1509,7 +1715,7 @@ class ____AnaLogger
                 if (this.options.logToDom)
                 {
                     /* istanbul ignore next */
-                    this.writeLogToDom(context, text, {message});
+                    this.writeLogToDom(context, text, {message, args,});
                 }
 
                 output = `%c${text}`;
@@ -1650,11 +1856,6 @@ class ____AnaLogger
      */
     log(options, ...args)
     {
-        if (this.options.logToRemote)
-        {
-            this.writeLogToRemote(options, ...args);
-        }
-
         options = this.extractContextFromInput(options);
         // If the first parameter is not of context format,
         // We use the default context and display
@@ -1673,11 +1874,6 @@ class ____AnaLogger
 
     error(options, ...args)
     {
-        if (this.options.logToRemote)
-        {
-            this.writeLogToRemote(options, ...args);
-        }
-
         if (this.options.hideError)
         {
             return;
@@ -1962,14 +2158,16 @@ class ____AnaLogger
      * @param callback
      * @param pluginName
      */
-    addPlugin(methodName, callback, pluginName)
+    addPlugin(methodName, callback, pluginName = "")
     {
+        pluginName = pluginName || methodName;
         this[methodName] = callback;
-        ____AnaLogger.pluginList.push({
-            pluginName,
-            type: "local"
-        });
 
+        ____AnaLogger.pluginTable[pluginName] = {
+            type: PLUGIN_TYPE.LOCAL,
+            methodName,
+            callback
+        };
     }
 
     /**
@@ -1982,16 +2180,17 @@ class ____AnaLogger
     {
         ____AnaLogger[methodName] = callback;
 
-        ____AnaLogger.pluginList.push({
-            pluginName,
-            type: "global"
-        });
+        ____AnaLogger.pluginTable[pluginName] = {
+            type: PLUGIN_TYPE.GLOBAL,
+            methodName,
+            callback
+        };
 
     }
 
     getPluginList()
     {
-        return Object.freeze(____AnaLogger.pluginList);
+        return Object.keys(____AnaLogger.pluginTable);
     }
 
     /**
@@ -2001,18 +2200,15 @@ class ____AnaLogger
      */
     validatePlugin(name)
     {
-        for (let i = 0; i < ____AnaLogger.pluginList.length; ++i)
+        if (____AnaLogger.pluginTable[name])
         {
-            const pluginProperties = ____AnaLogger.pluginList[i];
-            if (pluginProperties.pluginName === name)
-            {
-                return true;
-            }
+            return true;
         }
 
         console.warn(`The plugin ${name} is not registered`);
         return false;
     }
+
 }
 
 export const AnaLogger  = ____AnaLogger;

package/browser/src/html-to-image-plugin.mjs

@@ -12,44 +12,92 @@ import {anaLogger}  from "./ana-logger.mjs";
 
 
 
-export const PLUGIN_NAME  = "HTML_TO_IMAGE";
+export const PLUGIN_NAME  = "takeScreenshot";
 
 /**
  * Take a screenshot then send to a remote
- * @param element
- * @param container
+ * @see ____AnaLogger.checkPlugins
+ * @param context
+ * @param {HTMLElement} element Dom element we want to take a screenshot from
+ * @param args
+ * @param logCounter
+ * @param message
+ * @param text
+ * @param methodName
+ * @param type
  * @returns {boolean}
  */
-const takeScreenshot = ({element = document.body, callback = null, info = null, lid = null} = {}) =>
+const takeScreenshot = (context,
+                        {
+                            pluginArgs = {},
+                            divSource = document.body,
+                            args = null,
+                            logCounter = -1,
+                            message = null,
+                            text = null,
+                            methodName = "",
+                            type = ""
+                        }) =>
 {
     try
     {
         htmlToImage
-            .toPng(element)
-            .then(function (data)
+            .toPng(divSource)
+            .then(function (imageData)
             {
-                anaLogger.uploadDataToRemote(data, info, lid);
-                callback && callback(data);
+                // ------------------------------------
+                // Phase 1: We have the screenshot
+                // ------------------------------------
+                const onScreenshot = pluginArgs ? pluginArgs.onScreenshot : null;
+                onScreenshot && onScreenshot({
+                    imageData,
+                    context,
+                    methodName,
+                    type,
+                    message,
+                    text,
+                    args,
+                    logCounter,
+                });
+
+                anaLogger.uploadDataToRemote(imageData, context, (serverResponse) =>
+                {
+                    // ------------------------------------
+                    // Phase 1: We have the screenshot url from the server
+                    // ------------------------------------
+                    const onResponse = pluginArgs ? pluginArgs.onResponse : null;
+                    // We transfer as much information as we can to the plugin
+                    onResponse && onResponse({
+                        imageData,
+                        pluginCallResult: response,
+                        serverResponse,                                           // We need the response to know where
+                                                                                  // to find the generated image on the
+                                                                                  // server
+                        context,
+                        methodName,
+                        type,
+                        message,
+                        text,
+                        args,
+                        logCounter,
+                    });
+                });
             })
             .catch(function (error)
             {
                 console.error("Something went wrong:", error);
             });
-
-        return true;
     }
     catch (e)
     {
         console.error({lid: 4321}, e.message);
     }
 
-    return false;
+    response = false;
+    return response;
 };
 
-/**
- * {@link takeScreenshot}
- */
-anaLogger.addPlugin("takeScreenshot", takeScreenshot, PLUGIN_NAME);
+anaLogger.addPlugin(PLUGIN_NAME, takeScreenshot);
 
 
 

package/dist/ana-light.min.css

@@ -1 +1 @@
-html,body{height:100%}body{margin:0;overflow:hidden}.analogger{background-color:#ababab;box-shadow:1px 1px 4px 0 rgba(0,0,0,.3);box-sizing:border-box;display:flex;flex-direction:column;height:calc(100% - 12px);overflow:hidden;padding:0;position:relative;width:calc(100% - 8px)}.analogger .analogger-header{box-sizing:border-box;display:flex;flex:auto;height:38px;margin:0;padding:0;top:0;width:100%}.analogger .analogger-header span:nth-child(1){flex:auto;font-family:sans-serif;font-size:14px;width:80%}.analogger .analogger-header span:nth-child(2){flex:auto;font-family:sans-serif;font-size:14px}.analogger .analogger-header span:nth-child(3){flex:auto;font-family:sans-serif;font-size:22px;margin:0;padding:0 6px;text-align:right;width:20px}.analogger .analogger-footer{background:#7ba3cd59;bottom:3px;display:inline-block;height:33px;margin:0 0 0 3px;position:absolute;width:calc(100% - 6px)}.analogger .analogger-footer span:nth-child(1){font-family:sans-serif;font-size:14px}.analogger .analogger-view{background-color:#dddbdb;box-sizing:border-box;color:#faebd7;display:block;flex:auto;font-family:sans-serif;font-size:11px;line-height:30px;height:100%;margin:0 0 3px 3px;padding:0;overflow:auto;position:relative;width:calc(100% - 6px)}.analogger .analogger-view .to-esm-line{align-items:stretch;border-bottom:1px dashed #56499324;display:flex;justify-content:flex-start;height:26px;line-height:26px;overflow:hidden;vertical-align:middle;white-space:nowrap}.analogger .analogger-view .to-esm-line.analogger-removed-notif{background-color:rgba(223,73,73,.51);color:#abb9b7;font-size:9px}.analogger .analogger-view .to-esm-line.analogger-removed-notif .analogger-col-symbol{font-size:18px}.analogger .analogger-view .to-esm-line .analogger-col{overflow:hidden;padding:0 4px;text-overflow:ellipsis;white-space:nowrap}.analogger .analogger-view .to-esm-line .analogger-col-contextName{flex-grow:1;max-width:60px;text-align:right}.analogger .analogger-view .to-esm-line .analogger-col-target{flex-grow:1;max-width:60px;text-align:right}.analogger .analogger-view .to-esm-line .analogger-col-symbol{flex-grow:1;max-width:40px;text-align:center}.analogger .analogger-view .to-esm-line .analogger-col-text{flex-grow:1}.analogger .analogger-view::-webkit-scrollbar-thumb{border:5px solid transparent;border-radius:100px;background-color:#514b6e;background-clip:content-box}.analogger .analogger-view::-webkit-scrollbar{width:14px}.analogger .analogger-view::-webkit-scrollbar-track{background-color:#382525;border-radius:100px}.analogger .analogger-view::-webkit-scrollbar-thumb{border-radius:100px;border:4px solid transparent;background-clip:content-box;background-color:#9f6c53}
+html,body{height:100%}body{margin:0;overflow:hidden}.analogger{background-color:#ababab;box-shadow:1px 1px 4px 0 rgba(0,0,0,.3);box-sizing:border-box;display:flex;flex-direction:column;height:calc(100% - 12px);overflow:hidden;padding:0;position:relative;width:calc(100% - 8px)}.analogger .analogger-header{box-sizing:border-box;display:flex;flex:auto;height:38px;margin:0;padding:0;top:0;width:100%}.analogger .analogger-header span:nth-child(1){flex:auto;font-family:sans-serif;font-size:14px;width:80%}.analogger .analogger-header span:nth-child(2){flex:auto;font-family:sans-serif;font-size:14px}.analogger .analogger-header span:nth-child(3){flex:auto;font-family:sans-serif;font-size:22px;margin:0;padding:0 6px;text-align:right;width:20px}.analogger .analogger-footer{background:#7ba3cd59;bottom:3px;display:inline-block;height:33px;margin:0 0 0 3px;position:absolute;width:calc(100% - 6px)}.analogger .analogger-footer span:nth-child(1){font-family:sans-serif;font-size:14px}.analogger .analogger-view{background-color:#dddbdb;box-sizing:border-box;color:#faebd7;display:block;flex:auto;font-family:sans-serif;font-size:11px;line-height:30px;height:100%;margin:0 0 3px 3px;padding:0;overflow:auto;position:relative;width:calc(100% - 6px)}.analogger .analogger-view .to-esm-line{align-items:stretch;border-bottom:1px dashed #56499324;display:flex;justify-content:flex-start;height:26px;line-height:26px;overflow:hidden;vertical-align:middle;white-space:nowrap}.analogger .analogger-view .to-esm-line.analogger-removed-notif{background-color:rgba(223,73,73,.51);color:#abb9b7;font-size:9px}.analogger .analogger-view .to-esm-line.analogger-removed-notif .analogger-col-symbol{font-size:18px}.analogger .analogger-view .to-esm-line .analogger-col{overflow:hidden;padding:0 4px;text-overflow:ellipsis;white-space:nowrap}.analogger .analogger-view .to-esm-line .analogger-col-contextName{flex-grow:1;max-width:60px;text-align:right}.analogger .analogger-view .to-esm-line .analogger-col-target{flex-grow:1;max-width:60px;text-align:right}.analogger .analogger-view .to-esm-line .analogger-col-symbol{flex-grow:1;max-width:40px;text-align:center}.analogger .analogger-view .to-esm-line .analogger-col-text{flex-grow:1}.analogger .analogger-view .to-esm-line .analogger-col-extra{display:none}.analogger .analogger-view::-webkit-scrollbar-thumb{border:5px solid transparent;border-radius:100px;background-color:#514b6e;background-clip:content-box}.analogger .analogger-view::-webkit-scrollbar{width:14px}.analogger .analogger-view::-webkit-scrollbar-track{background-color:#382525;border-radius:100px}.analogger .analogger-view::-webkit-scrollbar-thumb{border-radius:100px;border:4px solid transparent;background-clip:content-box;background-color:#9f6c53}