search

huan / brolog

Logger for AngularJS in Browser like Npmlog
https://huan.github.io/brolog
Apache License 2.0
10 stars 1 forks source link

readme

BROLOG

npm version NPM TypeScript

Brolog

Brolog is Logger for Angular in Browser like Npmlog.

FEATURE

  1. Out-of-Box Browser Support.(with <script src='//unpkg.com/brolog'></script>)
  2. Out-of-Box Angular & SystemJS Support.(See: brolog-angular-demo project)
  3. Npmlog compatible interface.(i.e. log.verbose('Brolog', 'Hello, %s', 'world!''))
  4. Native TypeScript Support.(With typings)
  5. Node.js Support.(Node.js example)
  6. 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.

Loggable Interface

Brolog implementes Loggable:

interface Loggable {
  error   (moduleName: string, message: string, ...args: any[]): void
  warn    (moduleName: string, message: string, ...args: any[]): void
  info    (moduleName: string, message: string, ...args: any[]): void
  verbose (moduleName: string, message: string, ...args: any[]): void
  silly   (moduleName: string, message: string, ...args: any[]): void
}

You can import and use it by:

import { Loggable } from 'brolog'

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 integrate 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.

<script src="https://github.com/huan/brolog/raw/main//unpkg.com/brolog"></script>
<html>
  <head>
    <script src="https://github.com/huan/brolog/raw/main//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(should not appear)')

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

Link: Brolog Live demo

2. Quick Setup to use in Angular

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

  1. install brolog

    $ npm install brolog --save
...

  2. setup SystemJS

    System.config({
map: {
  brolog: 'node_modules/brolog/bundles/brolog.js'
}
})

  3. import

    import { Brolog } from 'brolog'

  4. inject to @NgModule

    providers: [
Brolog,
]

  5. inject to constructor

    class LogApp {
constructor(
  private log: Brolog
) {}
}

  6. log

    class LogApp {
testLog() {
  this.log.verbose('Brolog', 'test log:%s', 123)
  // this will log to browser console
}
}

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

Link: Brolog ♥ Angular Live demo

BASIC USAGE

Get a out-of-the-box log instance to use it directly.

import { log } from 'brolog'

If fhe environment variable BROLOG_LEVEL is set, that will be used to set log.level() for the global Brolog instance log.

log.{error,warn,info,verbose,silly}

import { Brolog } from 'brolog'

const log = new Brolog()

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

log.level(newLevel)

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, ...)

Emit a log message at the specified level.

For example,

Environment Variable: BROLOG_PREFIX

Example:

  1. Shell

    BROLOG_PREFIX="(Contact|Puppet)" node wechaty.js

  2. This will equals to set by code API:

    log.prefix(/^(Contact|Puppet)$/)

TEST

Brolog comes with well test suit to ensure the behavior 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. running E2E test is based on brolog demo project: git repository

CHANGELOG

main v1.13 (Oct 27, 2021)

  1. ES Module support
  2. export Loggable interface

v1.12 (Jun 18, 2020)

  1. Update to use Chatie DevOps toolsets.
  2. Upgrade TypeScript, ESLint, RollUp, etc.
  3. Enable GitHub Actions.

v1.6 (May 28th, 2018)

  1. Fix browser broken problem caused by the rollup behavior change. (#69)
  2. Node.js: Add environment variable BROLOG_PREFIX to set the prefix filter of global log instance.
  3. Browser: Add URL parameter variable BROLOG_PREFIX to set the prefix filter of global log instance.

v1.4 (May 2018)

  1. Continuous Deployment to brolog@next when the minor version in SemVer is odd(development release).
  2. Node.js: Add environment variable BROLOG_LEVEL to set the loglevel of global log instance.
  3. Browser: Add URL parameter variable BROLOG_LEVEL to set the loglevel of global log instance.

v1.2 (Sep 2017)

  1. Add Brolog.enableLogging() method for:
    1. false for disable logging
    2. true for enable logging
    3. printTextFunc: (text: string) for enable logging to a function.
  2. Support for creating individual instances.(We only have one singleton instance before)

v1.0 (Apr 2017)

Compatible with AOT & WebPack with Angular v4

  1. Rewrite from JavaScript to TypeScript
  2. Add UMD/AMD/System Module support
  3. Add a new method: enableLogging() to get/set logger

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 Dependency 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
  5. ES6 vs ES2015 - What to call a JavaScript version?

AUTHOR

Huan LI (李卓桓) zixia@zixia.net

Profile of Huan LI (李卓桓) on StackOverflow

COPYRIGHT & LICENSE