SFX build: phase 1 (antonybudianto#74)

* init new build

* update dependencies

* Integrate with Codelyzer

* chore(tslint.json): update semicolon value

* change tslint order and separate

Author: antonybudianto

README.md

@@ -23,12 +23,13 @@
 ## Introduction
 Welcome to Angular 2 Starter!
 This starter contains almost everything you need to start developing [Angular 2](https://angular.io/):
+* [NPM](https://www.npmjs.com/) for package manager
 * [TypeScript](http://www.typescriptlang.org/) for the base language
   * with [Typings](https://github.com/typings/typings) for TypeScript definition manager
 * [Gulp](http://gulpjs.com/) for workflow (from *serve*, *watch*, *compile*, *test* to *build*)
-* [NPM](https://www.npmjs.com/) for package manager
 * [Browsersync](https://www.browsersync.io/) for development server & reload capability
 * [SystemJS](https://github.com/systemjs/systemjs) for module loader
+* [Codelyzer](https://github.com/mgechev/codelyzer) for static code analyzer
 * [Karma](http://karma-runner.github.io/) for test-runner
 * [Jasmine](http://jasmine.github.io/) for test framework
 * [Istanbul](https://github.com/gotwarlost/istanbul) for test coverage

app/app.component.spec.ts

@@ -22,8 +22,8 @@ import { AppComponent } from './app.component';
 import { LoggerService } from './blocks/logger.service';
 
 @Component({
-    selector: 'test',
-    template: '<div><main-app></main-app></div>',
+    selector: 'as-test',
+    template: '<div><as-main-app></as-main-app></div>',
     directives: [AppComponent]
 })
 class TestComponent {

app/app.component.ts

@@ -5,7 +5,7 @@ import {NavbarComponent} from './navbar/navbar.component';
 import {LoggerService} from './blocks/logger.service';
 
 @Component({
-    selector: 'main-app',
+    selector: 'as-main-app',
     templateUrl: 'app/app.html',
     directives: [RouterOutlet, NavbarComponent]
 })

app/app.html

@@ -1,4 +1,4 @@
-<navbar [routes]="appRoutes" brand="Angular 2 Starter"></navbar>
+<as-navbar [routes]="appRoutes" brand="Angular 2 Starter"></as-navbar>
 <div class="container" style="margin-top: 100px;">
 	<router-outlet></router-outlet>
 </div>

app/home/home.component.ts

@@ -1,7 +1,7 @@
 import {Component} from '@angular/core';
 
 @Component({
-    selector: 'home',
+    selector: 'as-home',
     templateUrl: 'app/home/home.html',
     styleUrls: [
         'app/home/home.css'

app/navbar/navbar.component.ts

@@ -3,7 +3,7 @@ import {CORE_DIRECTIVES} from '@angular/common';
 import {RouterLink, RouteDefinition} from '@angular/router-deprecated';
 
 @Component({
-    selector: 'navbar',
+    selector: 'as-navbar',
     templateUrl: 'app/navbar/navbar.html',
     changeDetection: ChangeDetectionStrategy.OnPush,
     directives: [RouterLink, CORE_DIRECTIVES]

app/simplebind/child.component.spec.ts

@@ -13,9 +13,9 @@ import { Component } from '@angular/core';
 import { ChildComponent } from './child.component';
 
 @Component({
-    selector: 'test',
+    selector: 'as-test',
     template: `
-    <child text="Hello test" [(fromParent)]="testName"></child>
+    <as-child text="Hello test" [(fromParent)]="testName"></as-child>
     `,
     directives: [ChildComponent]
 })

app/simplebind/child.component.ts

@@ -1,7 +1,7 @@
 import {Component, Input, Output, EventEmitter} from '@angular/core';
 
 @Component({
-    selector: 'child',
+    selector: 'as-child',
     template: `
         <h5>{{text}}</h5>
         <h6>{{fromParent}}</h6>

app/simplebind/simplebind.component.spec.ts

@@ -12,8 +12,8 @@ import { Component } from '@angular/core';
 import { SimplebindComponent } from './simplebind.component';
 
 @Component({
-    selector: 'test',
-    template: '<div><simplebind></simplebind></div>',
+    selector: 'as-test',
+    template: '<div><as-simplebind></as-simplebind></div>',
     directives: [SimplebindComponent]
 })
 class TestComponent {

app/simplebind/simplebind.component.ts

@@ -2,7 +2,7 @@ import {Component} from '@angular/core';
 import {ChildComponent} from './child.component';
 
 @Component({
-    selector: 'simplebind',
+    selector: 'as-simplebind',
     templateUrl: 'app/simplebind/simplebind.html',
     directives: [ChildComponent]
 })

app/simplebind/simplebind.html

@@ -20,8 +20,8 @@ <h5>Parent component</h5>
                 <div class="form-group">
                     <div class="well">
                         <h5>Child component:</h5>
-                        <child text="Custom 1-way Binding" [fromParent]="myname"></child>
-                        <child text="Custom 2-way Binding" [(fromParent)]="myname"></child>
+                        <as-child text="Custom 1-way Binding" [fromParent]="myname"></as-child>
+                        <as-child text="Custom 2-way Binding" [(fromParent)]="myname"></as-child>
                     </div>
                 </div>
             </div>

app/todolist/completed-filter.pipe.ts

@@ -3,7 +3,7 @@ import {Todo} from './todo.model';
 import {filter} from 'lodash';
 
 @Pipe({
-    name: 'completedFilter'
+    name: 'asCompletedFilter'
 })
 export class CompletedFilterPipe implements PipeTransform {
     transform(todos: Todo[], done): Todo[] {

app/todolist/todolist.component.spec.ts

@@ -14,8 +14,8 @@ import { Todo } from './todo.model';
 import { TodolistComponent } from './todolist.component';
 
 @Component({
-    selector: 'test',
-    template: '<todolist></todolist>',
+    selector: 'as-test',
+    template: '<as-todolist></as-todolist>',
     directives: [TodolistComponent]
 })
 class TestComponent {

app/todolist/todolist.component.ts

@@ -1,20 +1,25 @@
-import {Component} from '@angular/core';
+import {
+    Component,
+    ChangeDetectorRef,
+    ChangeDetectionStrategy
+} from '@angular/core';
 import {CORE_DIRECTIVES} from '@angular/common';
 import {Todo} from './todo.model';
 import {CompletedFilterPipe} from './completed-filter.pipe';
 
 @Component({
-    selector: 'todolist',
+    selector: 'as-todolist',
     templateUrl: 'app/todolist/todolist.html',
     directives: [CORE_DIRECTIVES],
-    pipes: [CompletedFilterPipe]
+    pipes: [CompletedFilterPipe],
+    changeDetection: ChangeDetectionStrategy.OnPush
 })
 export class TodolistComponent {
     public todo: Todo;
     private list: Todo[];
     private showCompleted: Boolean;
 
-    constructor() {
+    constructor(private _ref: ChangeDetectorRef) {
         this.showCompleted = true;
         this.todo = new Todo('Add me to list!', false);
         this.list = [
@@ -24,11 +29,16 @@ export class TodolistComponent {
     }
 
     addTodo() {
-        this.list.push(Todo.clone(this.todo));
+        this.list = this.list.concat(Todo.clone(this.todo));
         this.todo.clear();
+        this._ref.markForCheck();
     }
 
     delTodo(index: number) {
-        this.list.splice(index, 1);
+        this.list = [].concat(
+            this.list.slice(0, index),
+            this.list.slice(index + 1, this.list.length)
+        );
+        this._ref.markForCheck();
     }
 }

app/todolist/todolist.html

@@ -39,7 +39,7 @@ <h3 class="panel-title"><i class="fa fa-list"></i> To Do List &nbsp;<span class=
     <div class="row">
         <div class="col-md-5">
             <ul class="list-group">
-                <li *ngFor="let todo of (list | completedFilter:showCompleted); let i=index" class="list-group-item">
+                <li *ngFor="let todo of (list | asCompletedFilter:showCompleted); let i=index" class="list-group-item">
                 <span title="Remove todo" class="badge" (click)="delTodo(i) ">x</span>
                 <label><input type="checkbox" [(ngModel)]="todo.done"> {{todo.name}}</label>
                 </li>

gulp.config.js

@@ -45,6 +45,7 @@ module.exports = function () {
             },
             files: [
                 "index.html",
+                "systemjs.conf.js",
                 "assets/styles/main.css",
                 "app/**/*.js",
                 "app/**/*.html"

index.html

@@ -12,9 +12,9 @@
     <!-- endbuild -->
   </head>
   <body>
-    <main-app>
+    <as-main-app>
       <i class="center-fix main-spinner fa fa-spin fa-spinner"></i>
-    </main-app>
+    </as-main-app>
 
     <!-- build:js assets/bundle.js -->
     <script src="node_modules/jquery/dist/jquery.js"></script>

package.json

@@ -51,14 +51,14 @@
   },
   "devDependencies": {
     "browser-sync": "^2.12.5",
+    "codelyzer": "0.0.19",
     "connect-history-api-fallback": "^1.2.0",
     "coveralls": "^2.11.9",
     "del": "~2.2.0",
     "glob": "^7.0.3",
     "gulp": "^3.9.1",
     "gulp-cssnano": "^2.1.2",
     "gulp-if": "~2.0.0",
-    "gulp-inject": "^4.0.0",
     "gulp-protractor": "^2.3.0",
     "gulp-replace": "^0.5.4",
     "gulp-rev": "^7.0.0",
@@ -71,9 +71,9 @@
     "gulp-useref": "~3.1.0",
     "jasmine-core": "~2.4.1",
     "karma": "~0.13.22",
-    "karma-coverage": "~0.5.5",
+    "karma-coverage": "~1.0.0",
     "karma-ie-launcher": "^1.0.0",
-    "karma-jasmine": "~0.3.8",
+    "karma-jasmine": "~1.0.2",
     "karma-phantomjs-launcher": "~1.0.0",
     "karma-sourcemap-loader": "^0.3.7",
     "path": "^0.12.7",

systemjs.conf.js

@@ -22,12 +22,10 @@
     // packages tells the System loader how to load when no filename and/or no extension
     var packages = {
         'app': {
-            defaultExtension: 'js',
-            format: 'register'
+            defaultExtension: 'js'
         },
         'test': {
-            defaultExtension: 'js',
-            format: 'register'
+            defaultExtension: 'js'
         },
         'rxjs': {
             defaultExtension: 'js'

tasks/build.js

@@ -1,7 +1,6 @@
 var gulp = require('gulp');
 var runSequence = require('run-sequence');
 var config = require('../gulp.config')();
-var inject = require('gulp-inject');
 var useref = require('gulp-useref');
 var gulpif = require('gulp-if');
 var rev = require('gulp-rev');

tsconfig.json

@@ -1,7 +1,7 @@
 {
   "compilerOptions": {
-    "target": "ES5",
-    "module": "system",
+    "target": "es5",
+    "module": "commonjs",
     "moduleResolution": "node",
     "sourceMap": true,
     "emitDecoratorMetadata": true,

tslint.json

@@ -1,4 +1,7 @@
 {
+  "rulesDirectory": [
+    "node_modules/codelyzer"
+  ],
   "rules": {
     "class-name": true,
     "comment-format": [true, "check-space"],
@@ -50,7 +53,7 @@
     ],
     "quotemark": [true, "single"],
     "radix": true,
-    "semicolon": true,
+    "semicolon": [true, "always"],
     "triple-equals": [true, "allow-null-check"],
     "typedef-whitespace": [true, {
       "call-signature": "nospace",
@@ -66,6 +69,25 @@
       "check-operator",
       "check-separator",
       "check-type"
-    ]
+    ],
+
+    "directive-selector-name": [true, "camelCase"],
+    "component-selector-name": [true, "kebab-case"],
+    "directive-selector-type": [true, "attribute"],
+    "component-selector-type": [true, "element"],
+    "directive-selector-prefix": [true, "as"],
+    "component-selector-prefix": [true, "as"],
+    "pipe-naming": [true, "camelCase", "as"],
+    "use-input-property-decorator": true,
+    "use-output-property-decorator": true,
+    "use-host-property-decorator": true,
+    "no-attribute-parameter-decorator": true,
+    "no-input-rename": true,
+    "no-output-rename": true,
+    "no-forward-ref" :true,
+    "use-life-cycle-interface": true,
+    "use-pipe-transform-interface": true,
+    "component-class-suffix": true,
+    "directive-class-suffix": true
   }
 }