docs(style-guide): add style-guide - v.4

Author: johnpapa

gulpfile.js

@@ -25,6 +25,8 @@ var globby = require("globby");
 var treeKill = require("tree-kill");
 var blc = require("broken-link-checker");
 
+var tslint = require('gulp-tslint');
+
 // TODO:
 //  1. Think about using runSequence
 //  2. Think about using spawn instead of exec in case of long error messages.
@@ -45,6 +47,7 @@ var exampleZipper = require(path.resolve(TOOLS_PATH, '_example-zipper/exampleZip
 var plunkerBuilder = require(path.resolve(TOOLS_PATH, 'plunker-builder/plunkerBuilder'));
 var fsUtils = require(path.resolve(TOOLS_PATH, 'fs-utils/fsUtils'));
 
+
 var _devguideShredOptions =  {
   examplesDir: path.join(DOCS_PATH, '_examples'),
   fragmentsDir: path.join(DOCS_PATH, '_fragments'),
@@ -498,6 +501,20 @@ gulp.task('_zip-examples', function() {
 });
 
 
+// Linting
+
+gulp.task('lint', function() {
+  return gulp.src(['./public/docs/_examples/style-guide/ts/**/*.ts', '!./public/docs/_examples/style-guide/ts/**/*.avoid.ts'])
+    .pipe(tslint({
+      rulesDirectory: ['node_modules/codelyzer'],
+      configuration: require('./tslint.json')
+    }))
+    .pipe(tslint.report('prose', {
+      summarizeFailureOutput: true
+    }));
+});
+
+
 // Helper functions
 
 function harpCompile() {

package.json

@@ -9,7 +9,6 @@
     "harp": "harp",
     "live-server": "live-server",
     "test-api-builder": "jasmine-node tools/api-builder",
-
     "protractor": "protractor"
   },
   "repository": {
@@ -28,10 +27,11 @@
   "devDependencies": {
     "archiver": "^0.16.0",
     "assert-plus": "^0.1.5",
-    "broken-link-checker":"0.7.0",
+    "broken-link-checker": "0.7.0",
     "browser-sync": "^2.9.3",
     "canonical-path": "0.0.2",
     "cross-spawn": "^2.1.0",
+    "codelyzer": "0.0.18",
     "del": "^1.2.0",
     "dgeni": "^0.4.0",
     "dgeni-packages": "^0.11.1",
@@ -42,6 +42,7 @@
     "gulp": "^3.5.6",
     "gulp-env": "0.4.0",
     "gulp-task-listing": "^1.0.1",
+    "gulp-tslint": "^4.3.5",
     "gulp-util": "^3.0.6",
     "gulp-watch": "^4.3.4",
     "harp": "^0.20.3",
@@ -66,6 +67,7 @@
     "protractor": "^3.0.0",
     "q": "^1.4.1",
     "tree-kill": "^1.0.0",
+    "tslint": "^3.2.2",
     "typescript": "1.7.3",
     "yargs": "^3.23.0"
   },

public/docs/_examples/style-guide/ts/01-01/app/app.component.ts

@@ -1,29 +1,16 @@
-// #docplaster
-
 // #docregion
-/* recommended */
-
-// app.component.ts
-import { Component, OnInit } from 'angular2/core';
+import { Component } from 'angular2/core';
 
-import { Hero } from './hero';
-import { HeroService } from './hero.service';
+import { HeroesComponent } from './heroes/heroes.component';
+import { HeroService } from './heroes/hero.service';
 
 @Component({
   selector: 'toh-app',
   template: `
-      <pre>{{heroes | json}}</pre>
+      <toh-heroes></toh-heroes>
     `,
   styleUrls: ['app/app.component.css'],
+  directives: [HeroesComponent],
   providers: [HeroService]
 })
-export class AppComponent implements OnInit{
-  heroes: Hero[] = [];
-
-  constructor(private heroService: HeroService) {}
-
-  ngOnInit() {
-    this.heroService.getHeroes()
-      .then(heroes => this.heroes = heroes);
-  }
-}
+export class AppComponent { }

public/docs/_examples/style-guide/ts/01-01/app/heroes/hero.component.avoid.ts

@@ -0,0 +1,40 @@
+// #docregion
+/* avoid */
+
+import { bootstrap } from 'angular2/platform/browser';
+import { Component, OnInit } from 'angular2/core';
+
+class Hero {
+  id: number;
+  name: string;
+}
+
+@Component({
+  selector: 'my-app',
+  template: `
+      <h1>{{title}}</h1>
+      <pre>{{heroes | json}}</pre>
+    `,
+  styleUrls: ['app/app.component.css']
+})
+class AppComponent implements OnInit {
+  title = 'Tour of Heroes';
+
+  heroes: Hero[] = [];
+
+  ngOnInit() {
+    getHeroes().then(heroes => this.heroes = heroes);
+  }
+}
+
+bootstrap(AppComponent, []);
+
+const HEROES: Hero[] = [
+  {id: 1, name: 'Bombasto'},
+  {id: 2, name: 'Tornado'},
+  {id: 3, name: 'Magneta'},
+];
+
+function getHeroes(): Promise<Hero[]> {
+  return Promise.resolve(HEROES); // TODO: get hero data from the server;
+}

public/docs/_examples/style-guide/ts/01-01/app/hero.model.ts renamed to public/docs/_examples/style-guide/ts/01-01/app/heroes/hero.model.ts

@@ -1,8 +1,4 @@
-// #docplaster
-
 // #docregion
-/* recommended */
-
 export class Hero {
   id: number;
   name: string;

public/docs/_examples/style-guide/ts/01-01/app/hero.service.ts renamed to public/docs/_examples/style-guide/ts/01-01/app/heroes/hero.service.ts

@@ -1,10 +1,7 @@
-// #docplaster
-
 // #docregion
-/* recommended */
-
 import { Injectable } from 'angular2/core';
-import { HEROES } from './mock-heroes';
+
+import { HEROES }     from './mock-heroes';
 
 @Injectable()
 export class HeroService {

public/docs/_examples/style-guide/ts/01-01/app/heroes/heroes.component.ts

@@ -0,0 +1,22 @@
+// #docregion
+import { Component, OnInit } from 'angular2/core';
+
+import { Hero }        from './hero.model';
+import { HeroService } from './hero.service';
+
+@Component({
+  selector: 'toh-heroes',
+  template: `
+      <pre>{{heroes | json}}</pre>
+    `
+})
+export class HeroesComponent implements OnInit {
+  heroes: Hero[] = [];
+
+  constructor(private heroService: HeroService) {}
+
+  ngOnInit() {
+    this.heroService.getHeroes()
+      .then(heroes => this.heroes = heroes);
+  }
+}

public/docs/_examples/style-guide/ts/01-01/app/heroes/mock-heroes.ts

@@ -0,0 +1,8 @@
+// #docregion
+import { Hero } from './hero.model';
+
+export const HEROES: Hero[] = [
+  {id: 1, name: 'Bombasto'},
+  {id: 2, name: 'Tornado'},
+  {id: 3, name: 'Magneta'},
+];

public/docs/_examples/style-guide/ts/01-01/app/main.ts

@@ -1,9 +1,6 @@
-// #docplaster
-
 // #docregion
-/* recommended */
+import { bootstrap }    from 'angular2/platform/browser';
 
-import { bootstrap } from 'angular2/platform/browser';
 import { AppComponent } from './app.component';
 
 bootstrap(AppComponent, []);

public/docs/_examples/style-guide/ts/01-01/app/placeholder.ts

@@ -0,0 +1,8 @@
+// #docregion
+/* avoid */
+
+// HeroComponent is in the Tour of Heroes feature
+@Component({
+  selector: 'hero'
+})
+export class HeroComponent {}

public/docs/_examples/style-guide/ts/02-07/app/heroes/hero.component.avoid.ts

@@ -0,0 +1,9 @@
+// #docregion
+import { Component } from 'angular2/core';
+
+// #docregion example
+@Component({
+  selector: 'toh-hero'
+})
+export class HeroComponent {}
+// #enddocregion example

public/docs/_examples/style-guide/ts/02-07/app/heroes/hero.component.ts

@@ -0,0 +1,8 @@
+// #docregion
+/* avoid */
+
+// UsersComponent is in an Admin feature
+@Component({
+  selector: 'users'
+})
+export class UsersComponent {}

public/docs/_examples/style-guide/ts/02-07/app/users/users.component.avoid.ts

@@ -0,0 +1,9 @@
+// #docregion
+import { Component } from 'angular2/core';
+
+// #docregion example
+@Component({
+  selector: 'admin-users'
+})
+export class UsersComponent {}
+// #enddocregion example

public/docs/_examples/style-guide/ts/02-07/app/users/users.component.ts

@@ -0,0 +1,7 @@
+// #docregion
+/* avoid */
+
+@Directive({
+  selector: '[validate]'
+})
+export class ValidateDirective {}

public/docs/_examples/style-guide/ts/02-08/app/shared/validate.directive.avoid.ts

@@ -0,0 +1,9 @@
+// #docregion
+import { Directive } from 'angular2/core';
+
+// #docregion example
+@Directive({
+  selector: '[tohValidate]'
+})
+export class ValidateDirective {}
+// #enddocregion example

public/docs/_examples/style-guide/ts/02-08/app/shared/validate.directive.ts

@@ -0,0 +1,2 @@
+<!-- #docregion -->
+<toh-hero-button></toh-hero-button>

public/docs/_examples/style-guide/ts/05-02/app/app.component.html

@@ -0,0 +1,7 @@
+// #docregion
+/* avoid */
+
+@Component({
+  selector: 'tohHeroButton'
+})
+export class HeroButtonComponent {}

public/docs/_examples/style-guide/ts/05-02/app/heroes/hero-button.component.avoid.ts

@@ -0,0 +1,9 @@
+// #docregion
+import { Component } from 'angular2/core';
+
+// #docregion example
+@Component({
+  selector: 'toh-hero-button'
+})
+export class HeroButtonComponent {}
+// #enddocregion example

public/docs/_examples/style-guide/ts/05-02/app/heroes/hero-button.component.ts

@@ -0,0 +1,2 @@
+<!-- #docregion -->
+<toh-hero-button></toh-hero-button>

public/docs/_examples/style-guide/ts/05-03/app/app.component.html

@@ -0,0 +1,3 @@
+<!-- #docregion -->
+<!-- avoid -->
+<div tohHeroButton></div>