feat(cb-ts-to-js): add es6 examples

update docshredder to shred .es6
optimized focus gulp task
convert imports and metadate sections
add DI section
add host and query metadata section
add intro
fix capitalization and grammar

Author: filipesilva

gulpfile.js

@@ -247,15 +247,16 @@ function findAndRunE2eTests(filter, outputFile) {
    e2eSpecPaths.forEach(function(specPath) {
     // get all of the examples under each dir where a pcFilename is found
     localExamplePaths = getExamplePaths(specPath, true);
-    // Filter by language
-    localExamplePaths = localExamplePaths.filter(function (fn) {
-      return fn.match('/'+lang+'$') != null;
-    });
+    // Filter by example name
     if (filter) {
       localExamplePaths = localExamplePaths.filter(function (fn) {
         return fn.match(filter) != null;
       })
     }
+    // Filter by language, also supports variations like js-es6
+    localExamplePaths = localExamplePaths.filter(function (fn) {
+      return fn.match('/'+lang+'(?:-[^/]*)?$') != null;
+    });
     localExamplePaths.forEach(function(examplePath) {
       examplePaths.push(examplePath);
     })
@@ -1270,7 +1271,7 @@ function apiExamplesWatch(postShredAction) {
 }
 
 function devGuideExamplesWatch(shredOptions, postShredAction, focus) {
-  var watchPattern = focus ? '**/{' + focus + ',cb-' + focus+ '}/**/*.*' : '**/*.*';
+  var watchPattern = focus ? '{' + focus + ',cb-' + focus+ '}/**/*.*' : '**/*.*';
   var includePattern = path.join(shredOptions.examplesDir, watchPattern);
   // removed this version because gulp.watch has the same glob issue that dgeni has.
   // var excludePattern = '!' + path.join(shredOptions.examplesDir, '**/node_modules/**/*.*');

public/docs/_examples/.gitignore

@@ -11,6 +11,7 @@ wallaby.js
 
 _test-output
 **/ts/**/*.js
+**/js-es6*/**/*.js
 **/ts-snippets/**/*.js
 *.d.ts
 

public/docs/_examples/_boilerplate/package.json

@@ -18,6 +18,7 @@
     "build:webpack": "rimraf dist && webpack --config config/webpack.prod.js --bail",
     "build:cli": "ng build",
     "build:aot": "ngc -p tsconfig-aot.json && rollup -c rollup-config.js",
+    "build:babel": "babel app -d app --extensions \".es6\" --source-maps",
     "copy-dist-files": "node ./copy-dist-files.js",
     "i18n": "ng-xi18n"
   },

public/docs/_examples/cb-ts-to-js/js-es6-decorators/.babelrc

@@ -0,0 +1,6 @@
+{
+  "presets": [
+    "es2015",
+    "angular2"
+  ]
+}

public/docs/_examples/cb-ts-to-js/js-es6-decorators/app/data.service.es6

@@ -0,0 +1,10 @@
+import { Injectable } from '@angular/core';
+
+@Injectable()
+export class DataService {
+  constructor() {
+  }
+  getHeroName() {
+    return 'Windstorm';
+  }
+}

public/docs/_examples/cb-ts-to-js/js-es6-decorators/app/hero-di-inject-additional.component.es6

@@ -0,0 +1,50 @@
+import {
+  Attribute,
+  Component,
+  Inject,
+  Optional,
+  NgModule
+} from '@angular/core';
+import { BrowserModule } from '@angular/platform-browser';
+
+// #docregion
+@Component({
+  selector: 'hero-title',
+  template: `
+    <h1>{{titlePrefix}} {{title}}</h1>
+    <button (click)="ok()">OK</button>
+    <p>{{ msg }}</p>
+  `
+})
+class TitleComponent {
+  msg = '';
+  constructor(
+    @Inject('titlePrefix') @Optional() titlePrefix,
+    @Attribute('title') title
+  ) {
+    this.titlePrefix = titlePrefix;
+    this.title = title;
+  }
+
+  ok() {
+    this.msg = 'OK!';
+  }
+}
+// #enddocregion
+
+@Component({
+  selector: 'hero-di-inject-additional',
+  template: `<hero-title title="Tour of Heroes">
+  </hero-title>`
+})
+class AppComponent { }
+
+@NgModule({
+  imports: [ BrowserModule ],
+  declarations: [
+    AppComponent,
+    TitleComponent
+  ],
+  bootstrap: [ AppComponent ]
+})
+export class HeroesDIInjectAdditionalModule { }

public/docs/_examples/cb-ts-to-js/js-es6-decorators/app/hero-di-inject.component.es6

@@ -0,0 +1,22 @@
+import { Component, Inject, NgModule } from '@angular/core';
+import { BrowserModule } from '@angular/platform-browser';
+
+// #docregion
+@Component({
+  selector: 'hero-di-inject',
+  template: `<h1>Hero: {{name}}</h1>`
+})
+class HeroComponent {
+  constructor(@Inject('heroName') name) {
+    this.name = name;
+  }
+}
+// #enddocregion
+
+@NgModule({
+  imports: [ BrowserModule ],
+  providers: [ { provide: 'heroName', useValue: 'Windstorm' } ],
+  declarations: [ HeroComponent ],
+  bootstrap: [ HeroComponent ]
+})
+export class HeroesDIInjectModule { }

public/docs/_examples/cb-ts-to-js/js-es6-decorators/app/hero-di.component.es6

@@ -0,0 +1,26 @@
+import { Component, NgModule } from '@angular/core';
+import { BrowserModule } from '@angular/platform-browser';
+
+import { DataService } from './data.service';
+
+// #docregion
+@Component({
+  selector: 'hero-di',
+  template: `<h1>Hero: {{name}}</h1>`
+})
+
+class HeroComponent {
+  name;
+  constructor(dataService: DataService) {
+    this.name = dataService.getHeroName();
+  }
+}
+// #enddocregion
+
+@NgModule({
+  imports: [ BrowserModule ],
+  providers: [ DataService ],
+  declarations: [ HeroComponent ],
+  bootstrap: [ HeroComponent ]
+})
+export class HeroesDIModule { }

public/docs/_examples/cb-ts-to-js/js-es6-decorators/app/hero-io.component.es6

@@ -0,0 +1,73 @@
+import {
+  Component,
+  EventEmitter,
+  Input,
+  Output,
+  NgModule
+} from '@angular/core';
+import { BrowserModule } from '@angular/platform-browser';
+
+// #docregion
+@Component({
+  selector: 'my-confirm',
+  template: `
+    <button (click)="onOkClick()">
+      {{okMsg}}
+    </button>
+    <button (click)="onNotOkClick()">
+      {{notOkMsg}}
+    </button>
+  `
+})
+class ConfirmComponent {
+  @Input() okMsg;
+  @Input('cancelMsg') notOkMsg;
+  @Output() ok =
+    new EventEmitter();
+  @Output('cancel') notOk =
+    new EventEmitter();
+
+  onOkClick() {
+    this.ok.next(true);
+  }
+  onNotOkClick() {
+    this.notOk.next(true);
+  }
+}
+// #enddocregion
+
+
+@Component({
+  selector: 'hero-io',
+  template: `
+    <my-confirm [okMsg]="'OK'"
+                [cancelMsg]="'Cancel'"
+                (ok)="onOk()"
+                (cancel)="onCancel()">
+    </my-confirm>
+    <span *ngIf="okClicked">OK clicked</span>
+    <span *ngIf="cancelClicked">Cancel clicked</span>
+  `
+})
+class AppComponent {
+  okClicked;
+  cancelClicked;
+
+  onOk() {
+    this.okClicked = true;
+  }
+  onCancel() {
+    this.cancelClicked = true;
+  }
+}
+
+
+@NgModule({
+  imports: [ BrowserModule ],
+  declarations: [
+    AppComponent,
+    ConfirmComponent
+  ],
+  bootstrap: [ AppComponent ]
+})
+export class HeroesIOModule { }

public/docs/_examples/cb-ts-to-js/js-es6-decorators/app/hero-lifecycle.component.es6

@@ -0,0 +1,27 @@
+// #docplaster
+// #docregion
+import { Component, OnInit } from '@angular/core';
+// #enddocregion
+import { NgModule } from '@angular/core';
+import { BrowserModule } from '@angular/platform-browser';
+
+@Component({
+  selector: 'hero-lifecycle',
+  template: `<h1>Hero: {{name}}</h1>`
+})
+// #docregion
+class HeroComponent{
+  name;
+  ngOnInit() {
+    this.name = 'Windstorm';
+  }
+}
+// #enddocregion
+
+@NgModule({
+  imports: [ BrowserModule ],
+  declarations: [ HeroComponent ],
+  bootstrap: [ HeroComponent ]
+})
+export class HeroesLifecycleModule { }
+

public/docs/_examples/cb-ts-to-js/js-es6-decorators/app/hero.component.es6

@@ -0,0 +1,30 @@
+// #docplaster
+// #docregion metadata
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'hero-view',
+  template:
+    '<h1>Hero: {{getName()}}</h1>'
+})
+// #docregion appexport
+// #docregion class
+export class HeroComponent {
+  title = 'Hero Detail';
+  getName() {return 'Windstorm'; }
+}
+// #enddocregion class
+// #enddocregion appexport
+// #enddocregion metadata
+
+import { NgModule } from '@angular/core';
+import { BrowserModule } from '@angular/platform-browser';
+
+@NgModule({
+  imports: [ BrowserModule ],
+  declarations: [ HeroComponent ],
+  bootstrap: [ HeroComponent ]
+})
+export class HeroesModule { }
+
+

public/docs/_examples/cb-ts-to-js/js-es6-decorators/app/heroes-bindings.component.es6

@@ -0,0 +1,42 @@
+import {
+  Component,
+  HostBinding,
+  HostListener,
+  NgModule
+} from '@angular/core';
+import { BrowserModule } from '@angular/platform-browser';
+
+// #docregion
+@Component({
+  selector: 'heroes-bindings',
+  template: `
+    <h1 [class.active]="active">
+      Tour of Heroes
+    </h1>
+  `
+})
+class HeroesComponent {
+  @HostBinding() title = 'Tooltip content';
+  @HostBinding('class.heading') hClass = true;
+  active;
+
+  constructor() {}
+
+  @HostListener('click')
+  clicked() {
+    this.active = !this.active;
+  }
+
+  @HostListener('dblclick', ['$event'])
+  doubleClicked(evt) {
+    this.active = true;
+  }
+}
+// #enddocregion
+
+@NgModule({
+  imports: [ BrowserModule ],
+  declarations: [ HeroesComponent ],
+  bootstrap: [ HeroesComponent ]
+})
+export class HeroesHostBindingsModule { }