Skip to content

Commit 12eb19f

Browse files
filipesilvawardbell
authored andcommitted
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
1 parent 64a8754 commit 12eb19f

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

48 files changed

+1470
-446
lines changed

gulpfile.js

Lines changed: 6 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -247,15 +247,16 @@ function findAndRunE2eTests(filter, outputFile) {
247247
e2eSpecPaths.forEach(function(specPath) {
248248
// get all of the examples under each dir where a pcFilename is found
249249
localExamplePaths = getExamplePaths(specPath, true);
250-
// Filter by language
251-
localExamplePaths = localExamplePaths.filter(function (fn) {
252-
return fn.match('/'+lang+'$') != null;
253-
});
250+
// Filter by example name
254251
if (filter) {
255252
localExamplePaths = localExamplePaths.filter(function (fn) {
256253
return fn.match(filter) != null;
257254
})
258255
}
256+
// Filter by language, also supports variations like js-es6
257+
localExamplePaths = localExamplePaths.filter(function (fn) {
258+
return fn.match('/'+lang+'(?:-[^/]*)?$') != null;
259+
});
259260
localExamplePaths.forEach(function(examplePath) {
260261
examplePaths.push(examplePath);
261262
})
@@ -1270,7 +1271,7 @@ function apiExamplesWatch(postShredAction) {
12701271
}
12711272

12721273
function devGuideExamplesWatch(shredOptions, postShredAction, focus) {
1273-
var watchPattern = focus ? '**/{' + focus + ',cb-' + focus+ '}/**/*.*' : '**/*.*';
1274+
var watchPattern = focus ? '{' + focus + ',cb-' + focus+ '}/**/*.*' : '**/*.*';
12741275
var includePattern = path.join(shredOptions.examplesDir, watchPattern);
12751276
// removed this version because gulp.watch has the same glob issue that dgeni has.
12761277
// var excludePattern = '!' + path.join(shredOptions.examplesDir, '**/node_modules/**/*.*');

public/docs/_examples/.gitignore

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,7 @@ wallaby.js
1111

1212
_test-output
1313
**/ts/**/*.js
14+
**/js-es6*/**/*.js
1415
**/ts-snippets/**/*.js
1516
*.d.ts
1617

public/docs/_examples/_boilerplate/package.json

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -18,6 +18,7 @@
1818
"build:webpack": "rimraf dist && webpack --config config/webpack.prod.js --bail",
1919
"build:cli": "ng build",
2020
"build:aot": "ngc -p tsconfig-aot.json && rollup -c rollup-config.js",
21+
"build:babel": "babel app -d app --extensions \".es6\" --source-maps",
2122
"copy-dist-files": "node ./copy-dist-files.js",
2223
"i18n": "ng-xi18n"
2324
},
Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
{
2+
"presets": [
3+
"es2015",
4+
"angular2"
5+
]
6+
}
Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
import { Injectable } from '@angular/core';
2+
3+
@Injectable()
4+
export class DataService {
5+
constructor() {
6+
}
7+
getHeroName() {
8+
return 'Windstorm';
9+
}
10+
}
Lines changed: 50 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,50 @@
1+
import {
2+
Attribute,
3+
Component,
4+
Inject,
5+
Optional,
6+
NgModule
7+
} from '@angular/core';
8+
import { BrowserModule } from '@angular/platform-browser';
9+
10+
// #docregion
11+
@Component({
12+
selector: 'hero-title',
13+
template: `
14+
<h1>{{titlePrefix}} {{title}}</h1>
15+
<button (click)="ok()">OK</button>
16+
<p>{{ msg }}</p>
17+
`
18+
})
19+
class TitleComponent {
20+
msg = '';
21+
constructor(
22+
@Inject('titlePrefix') @Optional() titlePrefix,
23+
@Attribute('title') title
24+
) {
25+
this.titlePrefix = titlePrefix;
26+
this.title = title;
27+
}
28+
29+
ok() {
30+
this.msg = 'OK!';
31+
}
32+
}
33+
// #enddocregion
34+
35+
@Component({
36+
selector: 'hero-di-inject-additional',
37+
template: `<hero-title title="Tour of Heroes">
38+
</hero-title>`
39+
})
40+
class AppComponent { }
41+
42+
@NgModule({
43+
imports: [ BrowserModule ],
44+
declarations: [
45+
AppComponent,
46+
TitleComponent
47+
],
48+
bootstrap: [ AppComponent ]
49+
})
50+
export class HeroesDIInjectAdditionalModule { }
Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
import { Component, Inject, NgModule } from '@angular/core';
2+
import { BrowserModule } from '@angular/platform-browser';
3+
4+
// #docregion
5+
@Component({
6+
selector: 'hero-di-inject',
7+
template: `<h1>Hero: {{name}}</h1>`
8+
})
9+
class HeroComponent {
10+
constructor(@Inject('heroName') name) {
11+
this.name = name;
12+
}
13+
}
14+
// #enddocregion
15+
16+
@NgModule({
17+
imports: [ BrowserModule ],
18+
providers: [ { provide: 'heroName', useValue: 'Windstorm' } ],
19+
declarations: [ HeroComponent ],
20+
bootstrap: [ HeroComponent ]
21+
})
22+
export class HeroesDIInjectModule { }
Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
import { Component, NgModule } from '@angular/core';
2+
import { BrowserModule } from '@angular/platform-browser';
3+
4+
import { DataService } from './data.service';
5+
6+
// #docregion
7+
@Component({
8+
selector: 'hero-di',
9+
template: `<h1>Hero: {{name}}</h1>`
10+
})
11+
12+
class HeroComponent {
13+
name;
14+
constructor(dataService: DataService) {
15+
this.name = dataService.getHeroName();
16+
}
17+
}
18+
// #enddocregion
19+
20+
@NgModule({
21+
imports: [ BrowserModule ],
22+
providers: [ DataService ],
23+
declarations: [ HeroComponent ],
24+
bootstrap: [ HeroComponent ]
25+
})
26+
export class HeroesDIModule { }
Lines changed: 73 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,73 @@
1+
import {
2+
Component,
3+
EventEmitter,
4+
Input,
5+
Output,
6+
NgModule
7+
} from '@angular/core';
8+
import { BrowserModule } from '@angular/platform-browser';
9+
10+
// #docregion
11+
@Component({
12+
selector: 'my-confirm',
13+
template: `
14+
<button (click)="onOkClick()">
15+
{{okMsg}}
16+
</button>
17+
<button (click)="onNotOkClick()">
18+
{{notOkMsg}}
19+
</button>
20+
`
21+
})
22+
class ConfirmComponent {
23+
@Input() okMsg;
24+
@Input('cancelMsg') notOkMsg;
25+
@Output() ok =
26+
new EventEmitter();
27+
@Output('cancel') notOk =
28+
new EventEmitter();
29+
30+
onOkClick() {
31+
this.ok.next(true);
32+
}
33+
onNotOkClick() {
34+
this.notOk.next(true);
35+
}
36+
}
37+
// #enddocregion
38+
39+
40+
@Component({
41+
selector: 'hero-io',
42+
template: `
43+
<my-confirm [okMsg]="'OK'"
44+
[cancelMsg]="'Cancel'"
45+
(ok)="onOk()"
46+
(cancel)="onCancel()">
47+
</my-confirm>
48+
<span *ngIf="okClicked">OK clicked</span>
49+
<span *ngIf="cancelClicked">Cancel clicked</span>
50+
`
51+
})
52+
class AppComponent {
53+
okClicked;
54+
cancelClicked;
55+
56+
onOk() {
57+
this.okClicked = true;
58+
}
59+
onCancel() {
60+
this.cancelClicked = true;
61+
}
62+
}
63+
64+
65+
@NgModule({
66+
imports: [ BrowserModule ],
67+
declarations: [
68+
AppComponent,
69+
ConfirmComponent
70+
],
71+
bootstrap: [ AppComponent ]
72+
})
73+
export class HeroesIOModule { }
Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
// #docplaster
2+
// #docregion
3+
import { Component, OnInit } from '@angular/core';
4+
// #enddocregion
5+
import { NgModule } from '@angular/core';
6+
import { BrowserModule } from '@angular/platform-browser';
7+
8+
@Component({
9+
selector: 'hero-lifecycle',
10+
template: `<h1>Hero: {{name}}</h1>`
11+
})
12+
// #docregion
13+
class HeroComponent{
14+
name;
15+
ngOnInit() {
16+
this.name = 'Windstorm';
17+
}
18+
}
19+
// #enddocregion
20+
21+
@NgModule({
22+
imports: [ BrowserModule ],
23+
declarations: [ HeroComponent ],
24+
bootstrap: [ HeroComponent ]
25+
})
26+
export class HeroesLifecycleModule { }
27+
Lines changed: 30 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,30 @@
1+
// #docplaster
2+
// #docregion metadata
3+
import { Component } from '@angular/core';
4+
5+
@Component({
6+
selector: 'hero-view',
7+
template:
8+
'<h1>Hero: {{getName()}}</h1>'
9+
})
10+
// #docregion appexport
11+
// #docregion class
12+
export class HeroComponent {
13+
title = 'Hero Detail';
14+
getName() {return 'Windstorm'; }
15+
}
16+
// #enddocregion class
17+
// #enddocregion appexport
18+
// #enddocregion metadata
19+
20+
import { NgModule } from '@angular/core';
21+
import { BrowserModule } from '@angular/platform-browser';
22+
23+
@NgModule({
24+
imports: [ BrowserModule ],
25+
declarations: [ HeroComponent ],
26+
bootstrap: [ HeroComponent ]
27+
})
28+
export class HeroesModule { }
29+
30+
Lines changed: 42 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,42 @@
1+
import {
2+
Component,
3+
HostBinding,
4+
HostListener,
5+
NgModule
6+
} from '@angular/core';
7+
import { BrowserModule } from '@angular/platform-browser';
8+
9+
// #docregion
10+
@Component({
11+
selector: 'heroes-bindings',
12+
template: `
13+
<h1 [class.active]="active">
14+
Tour of Heroes
15+
</h1>
16+
`
17+
})
18+
class HeroesComponent {
19+
@HostBinding() title = 'Tooltip content';
20+
@HostBinding('class.heading') hClass = true;
21+
active;
22+
23+
constructor() {}
24+
25+
@HostListener('click')
26+
clicked() {
27+
this.active = !this.active;
28+
}
29+
30+
@HostListener('dblclick', ['$event'])
31+
doubleClicked(evt) {
32+
this.active = true;
33+
}
34+
}
35+
// #enddocregion
36+
37+
@NgModule({
38+
imports: [ BrowserModule ],
39+
declarations: [ HeroesComponent ],
40+
bootstrap: [ HeroesComponent ]
41+
})
42+
export class HeroesHostBindingsModule { }

0 commit comments

Comments
 (0)