BROLOG
Brolog is Logger for Angular in Browser like Npmlog.
FEATURE
-
Out-of-Box Browser Support.(with <script src='//unpkg.com/brolog'></script>
)
-
Out-of-Box Angular & SystemJS Support.(See: brolog-angular-demo project)
-
Npmlog compatible interface.(i.e. log.verbose('Brolog', 'Hello, %s', 'world!'')
)
-
Native TypeScript Support.(With typings)
-
Node.js Support.(Node.js example)
-
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.
EXAMPLE
Here's two example:
- First example to demo easy to use in browser, and how it looks like npmlog.
- 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.
<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(should not appear)')
</script>
</body>
</html>
Link: Brolog Live demo
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.
- install brolog
$ npm install brolog --save
- setup SystemJS
System.config({
map: {
brolog: 'node_modules/brolog/bundles/brolog.js'
}
})
- import
import { Brolog } from 'brolog'
- inject to @NgModule
providers: [
Brolog,
]
- inject to constructor
class LogApp {
constructor(
private log: Brolog
) {}
}
- 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()
log.info('fyi', 'I have a kitty cat: %j', myKittyCat)
log.level(newLevel)
- {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 atprefix
{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
Master
v1.4 (May 2018)
- Continus Deployment to
brolog@next
when the minor version in SemVer is odd(development release).
v1.3 (Apr 2018)
- Node.js: Add environment variable
BROLOG_LEVEL
to set the loglevel of global log
instance. - Browser: Add URL parameter variable
BROLOG_LEVEL
to set the loglevel of global log
instance.
v1.2 (Sep 2017)
- Add
Brolog.enableLogging()
method for:
false
for disable loggingtrue
for enable loggingprintTextFunc: (text: string)
for enable logging to a function.
v1.1 (May 2017)
- Support for creating individual instances.(We only have one singleton instance before)
v1.0 (Apr 2017)
Compatible with AOT & WebPack with Angular v4
- Rewrite from JavaScript to TypeScript
- Add UMD/AMD/System Module support
- Add a new method:
enableLogging()
to get/set logger
v0.4 (Mar 2017)
- added timestamp to log output
- fix CI back to work
- added CD to auto deploy source code to NPM after passed CI
v0.3.7 (Aug 2016)
- added End to End test with Angular
- supported include by
script
tag - full support unpkg.com
v0.2.0 (Jul 16 2016)
- added Unit Test
- supported Angular Dependience Injection
v0.1.0 (Jul 14 2016)
- supported show real line number by set blackbox
- added TypeScript definition file
- supported work with SystemJS & Angular
REFERENCE
- JavaScript Modules & Build Tools - YouTube
- Writing Declaration Files
- Angular Dependency injection tokens
- Angular 2 Errors
- ES6 vs ES2015 - What to call a JavaScript version?
AUTHOR
Huan LI <zixia@zixia.net> (http://linkedin.com/in/zixia)
COPYRIGHT & LICENSE
- Code & Docs © 2017-2018 Huan LI <zixia@zixia.net>
- Code released under the Apache-2.0 License
- Docs released under Creative Commons