docs(style-guide): add style-guide - v.4 w/ Jesus examples & lint stuff

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'])
+    .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,12 +1,10 @@
-// #docplaster
-
 // #docregion
-/* recommended */
-
-// app.component.ts
+/**
+ * The root AppComponent
+ */
 import { Component, OnInit } from 'angular2/core';
 
-import { Hero } from './hero';
+import { Hero }        from './hero.model';
 import { HeroService } from './hero.service';
 
 @Component({
@@ -17,7 +15,7 @@ import { HeroService } from './hero.service';
   styleUrls: ['app/app.component.css'],
   providers: [HeroService]
 })
-export class AppComponent implements OnInit{
+export class AppComponent implements OnInit {
   heroes: Hero[] = [];
 
   constructor(private heroService: HeroService) {}

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

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

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

@@ -1,10 +1,9 @@
-// #docplaster
-
 // #docregion
-/* recommended */
-
+/**
+ * The Data Access Service for heroes
+ */
 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/kitchen-sink.ts

@@ -0,0 +1,42 @@
+// #docregion
+/**
+ * Everything in one file ... it's all here!
+ * AVOID THIS PATTERN
+ */
+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/main.ts

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

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

@@ -0,0 +1,11 @@
+// #docregion
+/**
+ * Mock heroes until we can get real data
+ */
+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/placeholder.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/hero.component.ts

@@ -0,0 +1,20 @@
+// #docregion
+/**
+ * AVOID THIS PATTERN
+ */
+
+/*
+* HeroComponent is in the Tour of Heroes feature
+*/
+@Component({
+  selector: 'hero'
+})
+export class HeroComponent {}
+
+/*
+* UsersComponent is in an Admin feature
+*/
+@Component({
+  selector: 'users'
+})
+export class UsersComponent {}

public/docs/_examples/style-guide/ts/02-07/app/kitchen-sink.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.component.ts

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

public/docs/_examples/style-guide/ts/02-08/app/kitchen-sink.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/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,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/hero-button.component.ts

@@ -0,0 +1,9 @@
+// #docregion
+/**
+ * AVOID THIS PATTERN
+ */
+
+@Component({
+  selector: 'tohHeroButton'
+})
+export class HeroButtonComponent {}

public/docs/_examples/style-guide/ts/05-02/app/kitchen-sink.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,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-03/app/hero-button.component.ts

@@ -0,0 +1,3 @@
+<!-- #docregion -->
+<!-- AVOID THIS PATTERN -->
+<div tohHeroButton></div>