Changed build script to update version numbers in tutorial and vs

Work in progress on vs loglevel
Removed console.info statement

README.md

@@ -1,4 +1,4 @@
-# ulog <sub><sup>v2.0.0-beta.16</sup></sub>
+# ulog <sub><sup>v2.0.0-beta.17</sup></sub>
 ### The Universal Logger
 
 [![npm](https://img.shields.io/npm/v/ulog.svg)](https://npmjs.com/package/ulog)
@@ -8,14 +8,14 @@
 
 <sup><sub><sup><sub>.</sub></sup></sub></sup>
 
-![logo](https://unpkg.com/[email protected].16/ulog.png)
+![logo](https://unpkg.com/[email protected].17/ulog.png)
 
 
 ## The logger for javascript applications
 
 `ulog` is *the* logger for Javascript applications. It's universal, meaning it runs everywhere. You can use `ulog` in your Express server application running on Node JS just as well as in your React single page application running in the browser. It just works.
 
-![screenshot](https://unpkg.com/[email protected].16/screenshot.jpg)
+![screenshot](https://unpkg.com/[email protected].17/screenshot.jpg)
 
 
 ## Features
@@ -130,7 +130,7 @@ log('Logging is easy')
 If you want, you can import `ulog` with a script tag:
 
 ```html
-<script src="https://unpkg.com/[email protected].16/ulog.min.js"></script>
+<script src="https://unpkg.com/[email protected].17/ulog.min.js"></script>
 <!-- publishes to `self.anylogger` and `self.ulog`. -->
 <!-- lazy loads ulog.lazy.min.js on demand. -->
 <script src="myscript.js"></script>
@@ -146,12 +146,12 @@ log('Logging is easy!')
 If you want the file for the browser to include in your project yourself, you
 can download it from here.
 
-* [ulog.min.js](https://unpkg.com/[email protected].16/ulog.min.js) (~2.7kB minified and gzipped)
-* [ulog.lazy.min.js](https://unpkg.com/[email protected].16/ulog.lazy.min.js) (~4.3kB minified and gzipped)
+* [ulog.min.js](https://unpkg.com/[email protected].17/ulog.min.js) (~2.7kB minified and gzipped)
+* [ulog.lazy.min.js](https://unpkg.com/[email protected].17/ulog.lazy.min.js) (~4.3kB minified and gzipped)
 
 > `ulog.min.js` lazy loads `ulog.lazy.min.js` on demand, so make sure to include both files in your download
 
-* [full.min.js](https://unpkg.com/[email protected].16/full.min.js) (~5.7kB minified and gzipped)
+* [full.min.js](https://unpkg.com/[email protected].17/full.min.js) (~5.7kB minified and gzipped)
 
 > Full bundle, no lazy loading
 
@@ -613,12 +613,12 @@ messages at these higher levels are indented a bit more than the other
 messages, making the logging harder to read. This can be clearly seen in the
 screenshot from `ulog` v2.0.0-beta-11, which did not yet have alignment:
 
-![screenshot](https://unpkg.com/[email protected].16/screenshot-beta.11.jpg)
+![screenshot](https://unpkg.com/[email protected].17/screenshot-beta.11.jpg)
 
 `ulog` now automatically adds some formatting that negates the extra indentation
 the messages at these higher levels get, so all messages are nicely aligned:
 
-![screenshot](https://unpkg.com/[email protected].16/screenshot.jpg)
+![screenshot](https://unpkg.com/[email protected].17/screenshot.jpg)
 
 You can control alignment with [config option `log_align`](#config-option-log_align).
 

build.js

@@ -44,6 +44,22 @@ var v = pkg.version
   fs.writeFileSync(file, data, 'utf8')
   log.info(`README.md (~${(data.length / 1024).toFixed(1)} kB)`)
 
+  file = path.resolve(__dirname, 'tutorial', 'index.html')
+  log(`Reading ${file}`)
+  data = fs.readFileSync(file, 'utf-8')
+  data = data.replace(/ulog@\d(\d)?\.\d(\d)?\.\d(\d)?(-[a-z]+\.\d(\d)?)?/g, `ulog@${v}`)
+  log(`Writing ${file}`)
+  fs.writeFileSync(file, data, 'utf8')
+  log.info(`tutorial/index.html (~${(data.length / 1024).toFixed(1)} kB)`)
+
+  file = path.resolve(__dirname, 'vs', 'debug.html')
+  log(`Reading ${file}`)
+  data = fs.readFileSync(file, 'utf-8')
+  data = data.replace(/ulog@\d(\d)?\.\d(\d)?\.\d(\d)?(-[a-z]+\.\d(\d)?)?/g, `ulog@${v}`)
+  log(`Writing ${file}`)
+  fs.writeFileSync(file, data, 'utf8')
+  log.info(`vs/debug.html (~${(data.length / 1024).toFixed(1)} kB)`)
+
   ulog('a:one').debug('A debug message')
   ulog('a:two').debug('A debug message')
   ulog('a:three').debug('A debug message')

mods/config/watch.js

@@ -7,10 +7,8 @@ var notify = require('./notify')
 
 module.exports = function(ulog) {
   var filename = path.resolve(ulog.get('log_config') || 'log.config')
-  console.info('watching ' + filename)
   try {
     fs.watch(filename, { persistent: false }, function() {
-      console.info(filename + ' changed. reading it again')
       read(ulog, function(cfg){
         var changed = update(ulog.config, cfg)
         if (changed.length) notify(ulog, changed)

package.json

@@ -1,6 +1,6 @@
 {
   "name": "ulog",
-  "version": "2.0.0-beta.16",
+  "version": "2.0.0-beta.17",
   "description": "The universal logger",
   "main": "./ulog.js",
   "unpkg": "ulog.min.js",

tutorial/index.html

@@ -4,7 +4,7 @@
     <title>ulog tutorial</title>
     <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500">
     <link rel="stylesheet" href="../style.css">
-    <script src="https://unpkg.com/[email protected].16/ulog.min.js"></script>
+    <script src="https://unpkg.com/[email protected].17/ulog.min.js"></script>
     <script src="test.js"></script>
     <script src="my-lib.js"></script>
     <script src="my-other-lib.js"></script>

vs/debug.html

@@ -2,11 +2,11 @@
 <html class="solid">
   <head>
     <meta charset=utf8 />
-    <title>debug vs ulog</title>
+    <title>ulog vs debug</title>
     <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500">
     <link rel="stylesheet" href="../style.css">
     <script src="debug-3.4.2.min.js"></script>
-    <script src="../ulog.min.js"></script>
+    <script src="https://unpkg.com/[email protected]/ulog.min.js"></script>
     <!-- load some small script files with logging in them -->
     <!-- to better illustrate if the callstack gets mangled -->
     <script src="debug.js"></script>
@@ -42,15 +42,19 @@ <h1><img src="../ulog.png"> vs <b>debug</b></h1>
       <h2>Open devtools</h2>
       <p>Open the browser developer tools (F12).</p>
       <h2>Enable logging</h2>
-      <p>No output will be visible until you enable logging, by adding a
-        configuration key to <code>localStorage</code>. To enable logging
-        in both <code>debug</code> and <code>ulog</code>, add this to <code>localStorage</code>:</p>
-      <p><pre><code>debug=*
-  </code></pre></p>
-      <p>To add this to localStorage, you can use the developer tools (for Chrome, tab Application)
-        or in the Console tab, run this command:</p>
-      <p><pre><code>localStorage.setItem('debug', '*')
-  </code></pre></p>
+      <p>No output will be visible until you enable logging. To enable
+        logging in both <code>debug</code> and <code>ulog</code>, set
+        <code>debug=*</code>.</p>
+      <img src="enable-debug.jpg">
+      <p>You can do this using the developer tools GUI (tab Application in
+        Chrome), or in the Console tab run this command:
+        <code>localStorage.setItem('debug', '*')</code>,
+        or you can press the button below:</p>
+      <p><button onclick="localStorage.setItem('debug', '*')">
+        <i>⚙</i>
+        <b>debug=*</b>
+      </button></p>
+      <br>
       <h2>Log some messages</h2>
       Press the buttons to log messages with both loggers:</p>
       <button onclick="logWithDebug()">
@@ -61,19 +65,42 @@ <h2>Log some messages</h2>
         <i>⚙</i>
         <b>With ulog</b>
       </button>
-      <p>Paragraph text</p>
-      Body text
-      <h6>Heading 6</h6>
-      <p>Paragraph text</p>
-      <h5>Heading 5</h5>
-      <p>Paragraph text</p>
-      <h4>Heading 4</h4>
-      <p>Paragraph text</p>
-      <h3>Heading 3</h3>
-      <p>Paragraph text</p>
-      <h2>Heading 2</h2>
-      <p>Paragraph text</p>
-      <h1>Heading 1</h1>
+      <p>You should get output like this:</p>
+      <img src="ulog-only.jpg">
+      <h2><code>ulog</code> monitors the config</h2>
+      <p>You may notice that <code>debug</code> is not producing any output,
+        whereas <code>ulog</code> is. That's because <code>ulog</code> monitors
+        the configuration at runtime but <code>debug</code> doesn't. So to get
+        <code>debug</code> to pick up our configuration change, reload the
+        page (F5). Then, press both buttons again. This time, we can see
+        <code>debug</code> and <code>ulog</code> output side by side:</p>
+      <img src="callstack.jpg">
+      <p>The output of <code>ulog</code> and <code>debug</code> is very similar.
+        Both loggers add the name of the logger to the message and both loggers
+        show some timing information. Also, both loggers use colors to produce
+        more clear output. But, there are actually more differences here than
+        initially meet the eye.
+      <h2><code>ulog</code> preserves the callstack</h2>
+      <p>One big difference between <code>debug</code> and <code>ulog</code>
+        is marked with arrows in the screenshot. <code>ulog</code> preserves
+        the callstack, meaning file names and line numbers shown in the
+        console point to the client code. This is in big contrast to
+        <code>debug</code>, which injects it's own formatting function in
+        the callstack, meaning all file names and line numbers point to that
+        function in the <code>debug</code> minified source file. Not very
+        convenient!</p>
+      <h2><code>ulog</code> has configurable formatting</h2>
+      <p><code>debug</code> only allows some tweaks to it's formatting.
+        <code>ulog</code> allows you to take full control of formatting.
+        You can change the format for all or some loggers using config
+        option log_format. For example, let's try adding the time to the
+        message. Set <code>log_format=time lvl name perf</code> in the
+        devtools or press the button below:</p>
+      <button onclick="localStorage.setItem('log_format', 'time lvl name perf')">
+        <i>⚙</i>
+        <b>log_format=time lvl name perf</b>
+      </button>
+
     </main>
   </body>
 </html>

vs/debug.js

@@ -2,9 +2,9 @@ self.mydebug = {
   log: function(){
     // code below is tightly coupled to debug
     var log = debug('debug')
-    log('-----------')
-    log('|  debug  |')
-    log('-----------')
+    log('------------')
+    log('|  debug   |')
+    log('------------')
   }
 }
 

vs/loglevel.html

@@ -0,0 +1,46 @@
+<!DOCTYPE html>
+<html class="solid">
+  <head>
+    <meta charset=utf8 />
+    <title>ulog vs loglevel</title>
+    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500">
+    <link rel="stylesheet" href="../style.css">
+    <script src="https://unpkg.com/[email protected]/ulog.min.js"></script>
+    <!-- load some small script files with logging in them -->
+    <!-- to better illustrate if the callstack gets mangled -->
+    <script src="loglevel.js"></script>
+    <script src="ulog.js"></script>
+    <script src="my-app.js"></script>
+    <script src="timings.js"></script>
+    <script src="colors.js"></script>
+    <script src="levels.js"></script>
+    <script src="formats.js"></script>
+    <script>ulog.ext()</script>
+    <script>
+      function logWithLogLevel(){
+        myloglevel.log()
+        myapp.logWithLogLevel()
+        colors.logWithLogLevel()
+        timings.logWithLogLevel()
+      }
+
+      function logWithUlog(){
+        myulog.log()
+        myapp.logWithUlog()
+        colors.logWithUlog()
+        levels.logWithUlog()
+        formats.logWithUlog()
+        timings.logWithUlog()
+      }
+    </script>
+  </head>
+  <body>
+    <main>
+      <h1><img src="../ulog.png"> vs <b>loglevel</b></h1>
+      <p>This page compares <code>ulog</code> to <a href="https://npmjs.com/package/loglevel"><code>loglevel</code></a>.</p>
+      <h2>Open devtools</h2>
+      <p>Open the browser developer tools (F12).</p>
+      <h2>TO DO</h2>
+    </main>
+  </body>
+</html>

vs/loglevel.js

@@ -0,0 +1,10 @@
+self.myloglevel = {
+  log: function(){
+    // code below is tightly coupled to debug
+    var logger = log.createLogger('loglevel')
+    logger.info('------------')
+    logger.info('| loglevel |')
+    logger.info('------------')
+  }
+}
+

vs/ulog.js

@@ -3,8 +3,8 @@ self.myulog = {
     // we use anylogger to create the logger
     // so we stay loosely coupled to ulog
     var log = anylogger('ulog').debug
-    log('-----------')
-    log('|  ulog   |')
-    log('-----------')
+    log('------------')
+    log('|   ulog   |')
+    log('------------')
   }
 }