Skip to content

Latest commit

 

History

History
210 lines (148 loc) · 5.21 KB

README.md

File metadata and controls

210 lines (148 loc) · 5.21 KB
Raw

brolog Build Status

Brolog is Logger for Angular in Browser like Npmlog.

npm version TypeScript definitions on DefinitelyTyped

Feature

  1. Support TypeScript.

  2. Support Angular 4 & SystemJS. (brolog-angular-demo project git repository)

  3. Support show real line number in browser console.

    What I really get frustrated by is that I cannot wrap console.* and preserve line numbers

    We enabled this in Chrome DevTools via blackboxing a bit ago.

  4. Can be used by nodejs if you like. (nodejs example here)

Example

Here's two example:

  1. First example to demo easy to use in browser, and how it looks like npmlog.
  2. Second example to demo intergrate with angular DI & SystemJS.

1. Super Easy to use in Browser

You can enable Brolog in your page by simple add the following script tag.

FIXME: might broken on v1.0

<script src="//unpkg.com/brolog"></script>

<html>
  <head>
    <script src="//unpkg.com/brolog"></script>
  </head>
  <body>
    <h1>Brolog in Browser Demo</h1>
    <script>

      var log = Brolog.instance('verbose')

      log.info('Test', '123 info message')
      log.verbose('Test', '123 verbose message')
      log.silly('Test', '123 silly message')

    </script>
  </body>
</html>

Link: Brolog Live demo on Plunker

2. Quick Setup to use in Angular

Brolog is writen mainly for act as a logger with Angular. Here's how to Inject Brolog in Angular.

  1. install brolog
$ npm install brolog --save
  1. setup SystemJS
System.config({
  map: {
    brolog: 'node_modules/brolog/dist/brolog.js'
  }
})
  1. import
import { Brolog } from 'brolog'
  1. inject to @NgModule
providers: [
  {
    provide: Brolog,
    useFactory: function brologFactory() { return Brolog.instance('silly') },
  },
]
  1. inject to constructor
class LogApp {
  constructor(
    private log: Brolog
  ) {}
}
  1. log
class LogApp {
  testLog() {
    this.log.verbose('Brolog', 'test log %d', 123)
    // this will log to browser console
  }
}

More details, please see the brolog-angular-demo git repository here.

Link: Brolog ♥ Angular Live demo on Plunker

Basic Usage

var log = require('brolog')

// additional stuff ---------------------------+
// message ----------+                         |
// prefix ----+      |                         |
// level -+   |      |                         |
//        v   v      v                         v
    log.info('fyi', 'I have a kitty cat: %j', myKittyCat)

log.level()

  • {String} 'silent' | 'error' | 'warn' | 'info' | 'verbose' | 'silly'

The level to display logs at. Any logs at or above this level will be displayed. The special level silent will prevent anything from being displayed ever.

log[level](prefix, message, ...)

  • level {String} The level to emit the message at
  • prefix {String} A string prefix. Set to "" to skip.
  • message... Arguments to util.format

Emit a log message at the specified level.

For example,

  • log.silly(prefix, message, ...)
  • log.verbose(prefix, message, ...)
  • log.info(prefix, message, ...)
  • log.warn(prefix, message, ...)
  • log.error(prefix, message, ...)

Test

Brolog comes with well test suit to ensure the behaviour is expected.

Unit Test

$ npm run unit

Unite Test Suite: link

End to End Test

$ npm run e2e

End to End Test Suite: link

P.S. runing E2E test is based on brolog demo project: git repository

Changelog

v1.0 (May 2017)

Compatible with AOT & WebPack with Angular v4.0

  1. Rewrite from JavaScript to TypeScript
  2. Add UMD/AMD/System Module support

v0.4 (Mar 2017)

  1. added timestamp to log output
  2. fix CI back to work
  3. added CD to auto deploy source code to NPM after passed CI

v0.3.7 (Aug 2016)

  1. added End to End test with Angular
  2. supported include by script tag
  3. full support unpkg.com

v0.2.0 (Jul 16 2016)

  1. added Unit Test
  2. supported Angular Dependience Injection

v0.1.0 (Jul 14 2016)

  1. supported show real line number by set blackbox
  2. added TypeScript definition file
  3. supported work with SystemJS & Angular

Reference

  1. JavaScript Modules & Build Tools - YouTube
  2. Writing Declaration Files
  3. Angular Dependency injection tokens
  4. Angular 2 Errors