Feature/config log levels

package.json

@@ -6,7 +6,9 @@
   "author": "Aymeric Assier (https://github.com/myeti)",
   "contributors": [
     "Aymeric Assier (https://github.com/myeti)",
-    "Julien Martins Da Costa (https://github.com/jdacosta)"
+    "Julien Martins Da Costa (https://github.com/jdacosta)",
+    "Sébastien Robillard (https://github.com/robiseb)",
+    "Kévin Poccard Soudard (https://github.com/kevpoccs)"
   ],
   "repository": {
     "type": "git",

readme.md

@@ -193,11 +193,54 @@ modulus.component('foo-bar', class extends Component {
 Every event listeners created using `this.on()` are automatically `off()`ed on component destruction.
 
 
+## Config
+
+### Log level
+
+To keep only `warn` and `error` logs (for production usage), set `production` to `true`:
+```js
+import modulus from '@wide/modulus'
+
+modulus.config({ production: true })
+```
+
+Or manually assign a log level:
+```js
+import modulus, { LOG_LEVELS } from '@wide/modulus'
+
+modulus.config({
+  log: {
+    level: LOG_LEVELS.INFO // DEBUG (default), INFO, WARN, ERROR, NONE
+  }
+})
+```
+
+> ⚠️ Note: assign a log level will override the `production` setting.
+
+To disable logs, set `enabled` to `false`:
+```js
+import modulus from '@wide/modulus'
+
+modulus.config({
+  log: {
+    enabled: false
+  }
+})
+```
+
+The default config is setted to show all kind of logs.
+
+
 ## Authors
 
 - **Aymeric Assier** - [github.com/myeti](https://github.com/myeti)
 - **Julien Martins Da Costa** - [github.com/jdacosta](https://github.com/jdacosta)
 
+### Contributors
+
+- **Sébastien Robillard** - [github.com/robiseb](https://github.com/robiseb)
+- **Kévin Poccard Soudard** - [github.com/kevpoccs](https://github.com/kevpoccs)
+
 
 ## License
 

src/directives.js

@@ -1,6 +1,6 @@
 import observe from '@wide/dom-observer'
+import { logger } from './logger'
 import { seek } from './index'
-import { parseDataCallParams } from './utils'
 
 const DEFAULT_TOGGLE_CLASS = '-active'
 
@@ -26,14 +26,14 @@ observe('[data-call]', {
             try {
               data = JSON.parse(params)?.[0]
             } catch(e) {
-              console.error('Invalid JSON format in `data-call.params`.', e)
+              logger.error('Invalid JSON format in `data-call.params`.', e)
             }
           }
 
           component[method]({ el, e, data })
-        } else console.error(`Unknown component "${str}"`)
+        } else logger.error(`Unknown component "${str}"`)
       }
-      else console.error(`Invalid call string "${str}"`)
+      else logger.error(`Invalid call string "${str}"`)
     })
   }
 })

src/index.js

@@ -1,7 +1,23 @@
 import observe, { seek as _seek } from '@wide/dom-observer'
+import { LOG_LEVELS, Logger, logger } from './logger'
 import { bind, unbind } from './hooks'
 import './directives'
 
+export { LOG_LEVELS } from './logger'
+
+
+/**
+ * Default internal config values
+ * @type {Object}
+ */
+const DEFAULT_CONFIG = {
+  production: false,
+  log: {
+    enabled: true,
+    level: null
+  }
+}
+
 
 /**
  * Register many regular and custom elements
@@ -39,7 +55,7 @@ export function registerMany(many) {
  * @param {Function} Klass 
  */
 export function registerComponent(name, Klass) {
-  console.debug(`# register component [is=${name}]`)
+  logger(`# register component [is=${name}]`)
   observe(`[is="${name}"]`, {
     bind: el => bind(el, name, Klass),
     unbind: el => unbind(el)
@@ -64,7 +80,7 @@ export function registerComponents(collection) {
  * @param {Function} Klass 
  */
 export function registerWebComponent(name, Klass) {
-  console.debug(`# register web component <${name}>`)
+  logger(`# register web component <${name}>`)
   try {
     window.customElements.define(name, class extends HTMLElement {
       connectedCallback() {
@@ -76,7 +92,7 @@ export function registerWebComponent(name, Klass) {
     })
   }
   catch(err) {
-    console.error(err)
+    logger.error(err)
   }
 }
 
@@ -131,6 +147,27 @@ export function seekAll(name, selector) {
 }
 
 
+/**
+ * Set internal config
+ * - assign log level
+ * @param {Object} values 
+ */
+export function setConfig(values = {}) {
+  const config = Object.assign({}, DEFAULT_CONFIG, values)
+  const { enabled, level } = config.log
+
+  if (enabled) {
+    if (level) {
+      Logger.LEVEL = Object.values(LOG_LEVELS).includes(level) ? level : LOG_LEVELS.DEBUG
+    } else {
+      Logger.LEVEL = config.production ? LOG_LEVELS.WARN : LOG_LEVELS.DEBUG
+    }
+  } else {
+    Logger.LEVEL = LOG_LEVELS.NONE
+  }
+}
+
+
 /**
  * Extend modulus instance
  */
@@ -143,6 +180,7 @@ modulus.webComponents = registerWebComponents
 modulus.imports = registerImports
 modulus.seek = seek
 modulus.seekAll = seekAll
+modulus.config = setConfig
 
 
 /**

src/logger.js

@@ -1,16 +1,62 @@
+/**
+ * All available log levels
+ * @type {Object<String, Number>}
+ */
+export const LOG_LEVELS = {
+  DEBUG: 0,
+  INFO: 1,
+  WARN: 2,
+  ERROR: 3,
+  NONE: Infinity
+}
+
+
+/**
+ * Map levels to real console functions
+ * @type {Object<String, Function>}
+ */
+const LOG_METHODS = {
+  [LOG_LEVELS.DEBUG]: console.debug,
+  [LOG_LEVELS.INFO]: console.log,
+  [LOG_LEVELS.WARN]: console.warn,
+  [LOG_LEVELS.ERROR]: console.error
+}
+
+
+/**
+ * Write log depending on the level requested
+ * @param {Number} level 
+ * @param {String} prefix 
+ * @param {Array} args 
+ */
+function writeLog(level, prefix, args) {
+  const method = LOG_METHODS[level]
+  if(method && Logger.LEVEL <= level) method(prefix, ...args)
+}
+
+
 /**
  * Logger factory
  * @param {String} prefix 
  */
 export default function Logger(prefix = '') {
+  const logger = (...args) => writeLog(LOG_LEVELS.DEBUG, prefix, args)
+  logger.info = (...args) => writeLog(LOG_LEVELS.INFO, prefix, args)
+  logger.warn = (...args) => writeLog(LOG_LEVELS.WARN, prefix, args)
+  logger.error = (...args) => writeLog(LOG_LEVELS.ERROR, prefix, args)
+  return logger
+}
+
 
-  const logger = function(...args) {
-    console.debug(prefix, ...args)
-  }
+/**
+ * Logger global level
+ * @type {Number} 
+ */
+Logger.LEVEL = LOG_LEVELS.DEBUG
 
-  logger.info = (...args) => console.log(prefix, ...args)
-  logger.warn = (...args) => console.warn(prefix, ...args)
-  logger.error = (...args) => console.error(prefix, ...args)
 
-  return logger
-}
+/**
+ * Built-in instance
+ * @type {Logger}
+ */
+export const logger = new Logger()