feat: add symbols to browser

unjs · Oct 11, 2018 · 30cd4f0 · 30cd4f0
1 parent 39584d2
commit 30cd4f0
Show file tree

Hide file tree

Showing 2 changed files with 36 additions and 4 deletions.
diff --git a/demo/index.html b/demo/index.html
@@ -7,6 +7,7 @@
     Open developer tools to see the magic!
     <script type="module">
       import consola from '../src/browser.js'
+      consola.level = 5
 
       for (let type of Object.keys(consola.types).sort()) {
           consola[type](`A message with consola.${type}()`)

diff --git a/src/reporters/browser.js b/src/reporters/browser.js
@@ -4,17 +4,43 @@ export default class BrowserReporter {
   }
 
   log (logObj) {
+    /*
+     * Symbol width is dependent on user's system font
+     *
+     * In Chrome:
+     * - console.error, warn and trace have collapsable output
+     * - trace is expanded by default
+     *
+     * In Firefox:
+     * - console.error has collapsable output
+     * - console.warn has not
+     * - console.trace is always expanded and has no style support
+     *
+     * In IE:
+     * - ?
+     */
     const replaceColors = {
       undefined: 'grey',
       yellow: 'goldenrod',
       white: 'grey'
     }
+
+    // 
+   const symbols = {
+      start: '\u25cf',
+      info: '\u2139',
+      success: '\u2713',
+      debug: '\u2026',
+      log: '\u276f',
+      ready: '\u2764'
+      // warn: '\u00a0' // non-breaking space to help alignment in FF
+    }
     const color = replaceColors[logObj.color] ? replaceColors[logObj.color] : logObj.color
 
-    const styleDefault = 'color: silver; background-color: inherit;'
+    const styleDefault = 'color: ' + color + '; background-color: inherit;'
+    const styleDiscrete = 'color: silver; background-color: inherit;'
     const styleAdditional = 'color: ' + (logObj.additionalColor ? logObj.additionalColor : 'black') + '; background-color: inherit;'
     const badgeStyle = 'color: white; background-color: ' + color + ';'
-    const style = 'color: ' + color + '; background-color: inherit;'
 
     let type = logObj.type
     if (!console[type]) { // eslint-disable-line no-console
@@ -45,7 +71,12 @@ export default class BrowserReporter {
       '%c' + (logObj.args.length ? '\n' + logObj.args.join() : '')
     ]
 
-    /* eslint-disable-next-line no-console */
-    console[type](args.join(' '), badgeStyle, styleDefault, style, styleAdditional)
+    if (symbols[logObj.type]) {
+      args.unshift('%c' + symbols[logObj.type])
+      console[type](args.join(' '), styleDefault, badgeStyle, styleDiscrete, styleDefault, styleAdditional)
+    } else {
+      /* eslint-disable-next-line no-console */
+      console[type](args.join(' '), badgeStyle, styleDiscrete, styleDefault, styleAdditional)
+    }
   }
 }