Added a bundled system lib.

Added a bundled system lib.
Added a dev env setup.
Added a couple of demos.

Author: langley-agm

.gitignore

@@ -11,7 +11,15 @@ typings
 # Optional REPL history
 .node_repl_history
 
-**/*.js
-**/*.js.map
+dist
+bundles
+
+*.js
+*.js.map
+*.d.ts
+
+app/**/*.js
+app/**/*.js.map
+app/**/*.d.ts
 
 .idea/workspace.xml

.npmignore

@@ -15,6 +15,10 @@ typings
 .idea
 *.iml
 
+demos
+
 tsconfig.json
 
+typings.json
+
 .travis.yml

README.md

@@ -26,22 +26,10 @@ Setup the Provider.
 
     bootstrap( App, [ Logger ]); 
 
-Add `angular2-logger` to your `Systemjs` configuration.*
+Add the `angular2-logger` library to your app.
 If you are following the [Angular 2's Quickstart Guide](https://angular.io/docs/ts/latest/quickstart.html) it should be something like this:
 
-    System.config({
-        map: { 'angular2-logger': 'node_modules/angular2-logger' },
-        packages: {
-            app: {
-                format: 'register',
-                defaultExtension: 'js'
-            },
-            'angular2-logger': {
-                format: 'register',
-                defaultExtension: 'js'
-            }
-        }
-    });
+    <script src="node_modules/angular2-logger/bundles/angular2-logger.js"></script>
 
 Inject the logger into your objects and use it.
 
@@ -155,17 +143,33 @@ Class names like `Options` and `Level` might be too common, if you get a conflic
 ## How you can help
 Filing issues is helpful but **pull requests** that improve the docs are even better!
 
+## Instructions for dev environment
+They are long so try to keep up, here we go:
+
+    git clone https://github.com/code-chunks/angular2-logger.git
+
+    cd angular2-logger
+
+    npm i
+
+Done.
 
 ## TODOs
-- <del>Add an off level that turns off the logger</del>
-- Support different loaders and modes.
+- <del>Add a `Level.OFF` that turns off the logger</del>.
+- <del>Support different loaders and modes</del>.
+- <del>Add a basic demo.</del>
+- Minify dist files.
 - Ability to add logging time to the messages.
 - Lazy Logging.
 - Appenders.
+- Add polyfill for Object.assign.
 - Unit Testing.
 - Support named loggers.
+- Message Layout Feature.
 - No coding required Dashboard UI to handle loggers.
 
+[comment]: <> ( TODO: Fix tsconfig.json when #5980 https://github.com/Microsoft/TypeScript/pull/5980 gets implemented. )
+
 *This step is only temporary until future, hopefully soon, improvements.
 
 ## LICENSE

app/core/level.ts

@@ -0,0 +1,9 @@
+/**
+ * Created by Langley on 3/13/2016.
+ */
+
+/**
+ * The available options to set the Level of the Logger.
+ * See {@link Logger}.
+ */
+export enum Level { OFF = 0, ERROR = 1, WARN = 2, INFO = 3, DEBUG = 4, LOG = 5 }

app/core/logger.ts

@@ -0,0 +1,114 @@
+import {Injectable, Optional} from "angular2/core";
+import {Level} from "./level.ts";
+
+/**
+ * Logger options.
+ * See {@link Logger}.
+ *
+ * level - How much detail you want to see in the logs, 1 being the less detailed, 5 being the most. Defaults to WARN.
+ * global - Whether you want the created logger object to be exposed in the global scope. Defaults to true.
+ * globalAs - The window's property name that will hold the logger object created. Defaults to 'logger'.
+ * store - Whether you want the level config to be saved in the local storage so it doesn't get lost when you refresh. Defaults to false.
+ * storeAs - The local storage key that will be used to save the level config if the store setting is true. Defaults to 'angular2.logger.level'.
+ *
+ * Created by Langley on 3/23/2016.
+ *
+ */
+export class Options {
+    level: Level;
+    global: boolean;
+    globalAs: string;
+    store: boolean;
+    storeAs: string;
+}
+
+// Temporal until https://github.com/angular/angular/issues/7344 gets fixed.
+const DEFAULT_OPTIONS: Options = {
+    level: Level.WARN,
+    global: true,
+    globalAs: "logger",
+    store: false,
+    storeAs: "angular2.logger.level"
+};
+
+@Injectable()
+export class Logger {
+
+    private _level: Level;
+    private _globalAs: string;
+    private _store: boolean;
+    private _storeAs: string;
+
+    Level = Level;
+
+    constructor( @Optional() options?: Options ) {
+
+        // Move this to the constructor definition when optional parameters are working with @Injectable: https://github.com/angular/angular/issues/7344
+        let { level, global, globalAs, store, storeAs } = Object.assign( {}, DEFAULT_OPTIONS, options );
+
+        this._level = level;
+        this._globalAs = globalAs;
+        this._storeAs = storeAs;
+
+        global && this.global();
+
+        if ( store || this._loadLevel() ) this.store();
+
+    }
+
+    private _loadLevel = (): Level => localStorage.getItem( this._storeAs );
+    private _storeLevel(level: Level) { localStorage[ this._storeAs ] = level; }
+
+    error(message?: any, ...optionalParams: any[]) {
+        this.isErrorEnabled() && console.error( message, ...optionalParams );
+    }
+
+    warn(message?: any, ...optionalParams: any[]) {
+        this.isWarnEnabled() && console.warn( message, ...optionalParams );
+    }
+
+    info(message?: any, ...optionalParams: any[]) {
+        this.isInfoEnabled() && console.info( message, ...optionalParams );
+    }
+
+    debug(message?: any, ...optionalParams: any[]) {
+        this.isDebugEnabled() && console.debug( message, ...optionalParams );
+    }
+
+    log(message?: any, ...optionalParams: any[]) {
+        this.isLogEnabled() && console.log( message, ...optionalParams );
+    }
+
+    global = () => window[this._globalAs] = this;
+
+    store(): Logger {
+
+        this._store = true;
+        let storedLevel = this._loadLevel();
+        if ( storedLevel ) { this._level = storedLevel; }
+        else { this._storeLevel( this.level ); }
+
+        return this;
+
+    }
+
+    unstore(): Logger {
+        this._store = false;
+        localStorage.removeItem( this._storeAs );
+        return this;
+    }
+
+    isErrorEnabled = (): boolean => this.level >= Level.ERROR;
+    isWarnEnabled = (): boolean => this.level >= Level.WARN;
+    isInfoEnabled = (): boolean => this.level >= Level.INFO;
+    isDebugEnabled = (): boolean => this.level >= Level.DEBUG;
+    isLogEnabled = (): boolean => this.level >= Level.LOG;
+
+    get level(): Level { return this._level; }
+
+    set level(level: Level) {
+        this._store && this._storeLevel(level);
+        this._level = level;
+    }
+
+}

core.ts

@@ -0,0 +1,22 @@
+import {provide} from "angular2/core";
+import {Options, Logger} from "./app/core/logger";
+import {Level} from "./app/core/level";
+
+/**
+ * @module
+ * @description
+ * Public API.
+ */
+export * from "./app/core/level.ts";
+export * from "./app/core/logger";
+
+/**
+ * Custom Providers if the user wants to avoid some configuration for common scenarios.
+ * @type {Provider|Logger[]}
+ */
+export const OFF_LOGGER_PROVIDERS: any[] = [ provide( Options, { useValue: { level: Level.OFF } } ), Logger ];
+export const ERROR_LOGGER_PROVIDERS: any[] = [ provide( Options, { useValue: { level: Level.ERROR } } ), Logger ];
+export const WARN_LOGGER_PROVIDERS: any[] = [ provide( Options, { useValue: { level: Level.WARN } } ), Logger ];
+export const INFO_LOGGER_PROVIDERS: any[] = [ provide( Options, { useValue: { level: Level.INFO } } ), Logger ];
+export const DEBUG_LOGGER_PROVIDERS: any[] = [ provide( Options, { useValue: { level: Level.DEBUG } } ), Logger ];
+export const LOG_LOGGER_PROVIDERS: any[] = [ provide( Options, { useValue: { level: Level.LOG } } ), Logger ];

demos/features/app/logger-app.component.ts

@@ -0,0 +1,58 @@
+import {Component} from 'angular2/core';
+import {Logger} from "angular2-logger/core";
+
+@Component({
+    selector: "logger-app",
+    template: `
+
+        <h1>Logger's current priority level: {{logger.level}} </h1> 
+
+        <h3>Change the Logger's priority level</h3>
+        
+        <button (click)="setLevel(0)"> Off </button>
+        <button (click)="setLevel(1)"> Error </button>
+        <button (click)="setLevel(2)"> Warning </button>
+        <button (click)="setLevel(3)"> Info </button>
+        <button (click)="setLevel(4)"> Debug </button>
+        <button (click)="setLevel(5)"> Log </button>
+        
+        <h3>Watch their effects in the console</h3>
+
+        <button (click)="logMsgs()">Log Messages</button>
+        <button (click)="clear()"> Clear console </button>
+              
+        <h3>Store the logger's current level in the browser's local storage so it doesn't get reset after refreshing the page. </h3>
+        <button (click)="store()"> store </button>
+        <button (click)="unstore()"> unstore </button>
+        
+    `
+})
+export class LoggerAppComponent{
+
+    constructor(public logger:Logger){}
+
+    logMsgs(){
+        this.logger.error('This is a priority level 1 error message...');
+        this.logger.warn('This is a priority level 2 warning message...');
+        this.logger.info('This is a priority level 3 info message...');
+        this.logger.debug('This is a priority level 4 debug message...');
+        this.logger.log('This is a priority level 5 log message...');
+    }
+
+    setLevel(level){
+        this.logger.level = level;
+    }
+
+    clear(){
+        console.clear();
+    }
+
+    store(){
+        this.logger.store();
+    }
+
+    unstore(){
+        this.logger.unstore();
+    }
+
+}

demos/features/app/main.ts

@@ -0,0 +1,5 @@
+import {bootstrap} from 'angular2/platform/browser';
+import {LoggerAppComponent} from "./logger-app.component";
+import {Logger} from "angular2-logger/core";
+
+bootstrap( LoggerAppComponent,[ Logger ]);

demos/features/index.html

@@ -0,0 +1,42 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+
+    <meta charset="UTF-8">
+    <title>Angular 2 Logger - Features </title>
+
+    <!-- 1. Load libraries -->
+    <!-- IE required polyfills (from CDN), in this exact order -->
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/es6-shim/0.35.0/es6-shim.min.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.16/system-polyfills.js"></script>
+    <script src="https://npmcdn.com/angular2/es6/dev/src/testing/shims_for_IE.js"></script>
+    <script src="https://code.angularjs.org/tools/system.js"></script>
+    <script src="https://code.angularjs.org/tools/typescript.js"></script>
+    <script src="https://code.angularjs.org/2.0.0-beta.12/angular2-polyfills.js"></script>
+    <script src="https://code.angularjs.org/2.0.0-beta.12/Rx.js"></script>
+    <script src="https://code.angularjs.org/2.0.0-beta.12/angular2.dev.js"></script>
+
+    <!-- 1.1 Add the angular2-logger library -->
+    <script src="../../bundles/angular2-logger.js"></script>
+    <!--In a real app use it like this:-->
+    <!--<script src="node_modules/angular2-logger/bundles/angular2-logger.js"></script>-->
+
+    <!-- 2. Configure SystemJS -->
+    <script>
+        System.config({
+            transpiler: 'typescript',
+            typescriptOptions: { emitDecoratorMetadata: true },
+            packages: {'app': {defaultExtension: 'ts'}}
+        });
+        System.import('app/main')
+                .then(null, console.error.bind(console));
+    </script>
+
+</head>
+
+<!-- 3. Display the application -->
+<body>
+    <logger-app>Loading...</logger-app>
+</body>
+
+</html>

demos/hello-world/app/hello-world.component.ts

@@ -0,0 +1,24 @@
+import {Component} from 'angular2/core';
+import {Logger} from "angular2-logger/core";
+
+@Component({
+    selector: "hello-world",
+    template: `
+        <h1>Make sure your console is open.</h1>
+        <h3>By default you should only see messages with a warning priority or higher.</h3>
+        <button (click)="logMsgs()">Log Messages</button>
+    `
+})
+export class HelloWorldComponent{
+
+    constructor(private _logger:Logger){}
+
+    logMsgs(){
+        this._logger.error('This is a priority level 1 error message...');
+        this._logger.warn('This is a priority level 2 warning message...');
+        this._logger.info('This is a priority level 3 info message...');
+        this._logger.debug('This is a priority level 4 debug message...');
+        this._logger.log('This is a priority level 5 log message...');
+    }
+
+}

demos/hello-world/app/main.ts

@@ -0,0 +1,7 @@
+import {bootstrap} from 'angular2/platform/browser';
+import {HelloWorldComponent}   from './hello-world.component';
+import {Logger} from "angular2-logger/core";
+
+bootstrap(HelloWorldComponent,[
+    Logger
+]);