refactor(examples): ts’ify

relates to #2008

modules/examples/e2e_test/sourcemap/sourcemap_spec.es6

@@ -37,12 +37,12 @@ describe('sourcemaps', function () {
       });
 
       var finalMapData = fs.readFileSync(
-          'dist/js/prod/es6/examples/src/sourcemap/index.map');
+          'dist/js/prod/es6/examples/src/sourcemap/index.es6.map');
       var finalDecoder = new sourceMap.SourceMapConsumer(JSON.parse(finalMapData));
 
       var finalPosition = finalDecoder.originalPositionFor(originalPosition);
 
-      var sourceCodeLines = fs.readFileSync('modules/examples/src/sourcemap/index.js',
+      var sourceCodeLines = fs.readFileSync('modules/examples/src/sourcemap/index.ts',
           {encoding: 'UTF-8'}).split('\n');
       expect(sourceCodeLines[finalPosition.line - 1])
           .toMatch(/throw new BaseException\(\'Sourcemap test\'\)/);

modules/examples/src/gestures/index.js

@@ -1,39 +0,0 @@
-import {bootstrap} from 'angular2/angular2';
-import {reflector} from 'angular2/src/reflection/reflection';
-import {ReflectionCapabilities} from 'angular2/src/reflection/reflection_capabilities';
-
-// TODO(radokirov): Once the application is transpiled by TS instead of Traceur,
-// add those imports back into 'angular2/angular2';
-import {Component} from 'angular2/src/core/annotations_impl/annotations';
-import {View} from 'angular2/src/core/annotations_impl/view';
-
-@Component({selector: 'gestures-app'})
-@View({templateUrl: 'template.html'})
-class GesturesCmp {
-  swipeDirection: string;
-  pinchScale: number;
-  rotateAngle: number;
-
-  constructor() {
-    this.swipeDirection = '-';
-    this.pinchScale = 1;
-    this.rotateAngle = 0;
-  }
-
-  onSwipe(event) {
-    this.swipeDirection = event.deltaX > 0 ? 'right' : 'left';
-  }
-
-  onPinch(event) {
-    this.pinchScale = event.scale;
-  }
-
-  onRotate(event) {
-    this.rotateAngle = event.rotation;
-  }
-}
-
-export function main() {
-  reflector.reflectionCapabilities = new ReflectionCapabilities();
-  bootstrap(GesturesCmp);
-}

modules/examples/src/gestures/index.ts

@@ -0,0 +1,22 @@
+import {bootstrap, Component, View} from 'angular2/angular2';
+import {reflector} from 'angular2/src/reflection/reflection';
+import {ReflectionCapabilities} from 'angular2/src/reflection/reflection_capabilities';
+
+@Component({selector: 'gestures-app'})
+@View({templateUrl: 'template.html'})
+class GesturesCmp {
+  swipeDirection: string = '-';
+  pinchScale: number = 1;
+  rotateAngle: number = 0;
+
+  onSwipe(event): void { this.swipeDirection = event.deltaX > 0 ? 'right' : 'left'; }
+
+  onPinch(event): void { this.pinchScale = event.scale; }
+
+  onRotate(event): void { this.rotateAngle = event.rotation; }
+}
+
+export function main() {
+  reflector.reflectionCapabilities = new ReflectionCapabilities();
+  bootstrap(GesturesCmp);
+}

modules/examples/src/hello_world/index_common.ts

@@ -1,11 +1,19 @@
-import {ElementRef} from 'angular2/angular2';
+import {ElementRef, Component, Directive, View, Injectable} from 'angular2/angular2';
-import {Injectable} from 'angular2/src/di/annotations_impl';
 
-// TODO(radokirov): Once the application is transpiled by TS instead of Traceur,
+// A service available to the Injector, used by the HelloCmp component.
-// add those imports back into 'angular2/angular2';
+@Injectable()
-import {Component, Directive} from 'angular2/src/core/annotations_impl/annotations';
+class GreetingService {
-import {View} from 'angular2/src/core/annotations_impl/view';
+  greeting: string = 'hello';
+}
 
+// Directives are light-weight. They don't allow new
+// expression contexts (use @Component for those needs).
+@Directive({selector: '[red]'})
+class RedDec {
+  // ElementRef is always injectable and it wraps the element on which the
+  // directive was found by the compiler.
+  constructor(el: ElementRef) { el.domElement.style.color = 'red'; }
+}
 
 // Angular 2.0 supports 2 basic types of directives:
 // - Component - the basic building blocks of Angular 2.0 apps. Backed by
@@ -28,7 +36,7 @@ import {View} from 'angular2/src/core/annotations_impl/view';
   // Expressions in the template (like {{greeting}}) are evaluated in the
   // context of the HelloCmp class below.
   template: `<div class="greeting">{{greeting}} <span red>world</span>!</div>
-           <button class="changeButton" (click)="changeGreeting()">change greeting</button><content></content>`,
+           <button class="changeButton" (click)="changeGreeting()">change greeting</button>`,
   // All directives used in the template need to be specified. This allows for
   // modularity (RedDec can only be used in this template)
   // and better tooling (the template can be invalidated if the attribute is
@@ -37,32 +45,8 @@ import {View} from 'angular2/src/core/annotations_impl/view';
 })
 export class HelloCmp {
   greeting: string;
-  constructor(service: GreetingService) {
-    this.greeting = service.greeting;
-  }
-  changeGreeting() {
-    this.greeting = 'howdy';
-  }
-}
 
-// Directives are light-weight. They don't allow new
+  constructor(service: GreetingService) { this.greeting = service.greeting; }
-// expression contexts (use @Component for those needs).
-@Directive({
-  selector: '[red]'
-})
-class RedDec {
-  // ElementRef is always injectable and it wraps the element on which the
-  // directive was found by the compiler.
-  constructor(el: ElementRef) {
-    el.domElement.style.color = 'red';
-  }
-}
 
-// A service available to the Injector, used by the HelloCmp component.
+  changeGreeting(): void { this.greeting = 'howdy'; }
-@Injectable()
-class GreetingService {
-  greeting:string;
-  constructor() {
-    this.greeting = 'hello';
-  }
 }

modules/examples/src/key_events/index.ts

@@ -1,18 +1,10 @@
-import {bootstrap} from 'angular2/angular2';
+import {bootstrap, Component, View} from 'angular2/angular2';
 import {KeyEventsPlugin} from 'angular2/src/render/dom/events/key_events';
 
-// TODO(radokirov): Once the application is transpiled by TS instead of Traceur,
-// add those imports back into 'angular2/angular2';
-import {Component} from 'angular2/src/core/annotations_impl/annotations';
-import {View} from 'angular2/src/core/annotations_impl/view';
-
-// 2 imports for the Dart version:
 import {reflector} from 'angular2/src/reflection/reflection';
 import {ReflectionCapabilities} from 'angular2/src/reflection/reflection_capabilities';
 
-@Component({
+@Component({selector: 'key-events-app'})
-  selector: 'key-events-app'
-})
 @View({
   template: `Click in the following area and press a key to display its name:<br>
   <div (keydown)="onKeyDown($event)" class="sample-area" tabindex="0">{{lastKey}}</div><br>
@@ -25,31 +17,23 @@ import {ReflectionCapabilities} from 'angular2/src/reflection/reflection_capabil
   >{{shiftEnter ? 'You pressed shift.enter!' : ''}}</div>`
 })
 class KeyEventsApp {
-  lastKey: string;
+  lastKey: string = '(none)';
-  shiftEnter: boolean;
+  shiftEnter: boolean = false;
 
-  constructor() {
+  onKeyDown(event): void {
-    this.lastKey = '(none)';
-    this.shiftEnter = false;
-  }
-
-  onKeyDown(event) {
     this.lastKey = KeyEventsPlugin.getEventFullKey(event);
     event.preventDefault();
   }
 
-  onShiftEnter(event) {
+  onShiftEnter(event): void {
     this.shiftEnter = true;
     event.preventDefault();
   }
 
-  resetShiftEnter() {
+  resetShiftEnter(): void { this.shiftEnter = false; }
-    this.shiftEnter = false;
-  }
-
 }
 
 export function main() {
-  reflector.reflectionCapabilities = new ReflectionCapabilities(); // for the Dart version
+  reflector.reflectionCapabilities = new ReflectionCapabilities();  // for the Dart version
   bootstrap(KeyEventsApp);
 }

modules/examples/src/sourcemap/index.js

@@ -1,24 +0,0 @@
-import { BaseException, print, CONST } from 'angular2/src/facade/lang';
-import { bootstrap } from 'angular2/angular2';
-// TODO(radokirov): Once the application is transpiled by TS instead of Traceur,
-// add those imports back into 'angular2/angular2';
-import {Component} from 'angular2/src/core/annotations_impl/annotations';
-import {View} from 'angular2/src/core/annotations_impl/view';
-
-@Component({
-  selector: 'error-app',
-})
-@View({
-  template: `
-           <button class="errorButton" (click)="createError()">create error</button>`,
-  directives: []
-})
-export class ErrorComponent {
-  createError() {
-    throw new BaseException('Sourcemap test');
-  }
-}
-
-export function main() {
-  bootstrap(ErrorComponent);
-}

modules/examples/src/sourcemap/index.ts

@@ -0,0 +1,17 @@
+import {BaseException} from 'angular2/src/facade/lang';
+import {bootstrap, Component, View} from 'angular2/angular2';
+
+@Component({
+  selector: 'error-app',
+})
+@View({
+  template: `
+           <button class="errorButton" (click)="createError()">create error</button>`
+})
+export class ErrorComponent {
+  createError(): void { throw new BaseException('Sourcemap test'); }
+}
+
+export function main() {
+  bootstrap(ErrorComponent);
+}

modules/examples/src/todo/index.js

@@ -1,83 +0,0 @@
-import {bootstrap, NgFor} from 'angular2/angular2';
-import {Store, Todo, TodoFactory} from './services/TodoStore';
-import {reflector} from 'angular2/src/reflection/reflection';
-import {ReflectionCapabilities} from 'angular2/src/reflection/reflection_capabilities';
-
-// TODO(radokirov): Once the application is transpiled by TS instead of Traceur,
-// add those imports back into 'angular2/angular2';
-import {Component, Directive} from 'angular2/src/core/annotations_impl/annotations';
-import {View} from 'angular2/src/core/annotations_impl/view';
-
-@Component({
-  selector: 'todo-app',
-  appInjector: [
-    Store,
-    TodoFactory
-  ]
-})
-@View({
-  templateUrl: 'todo.html',
-  directives: [NgFor]
-})
-class TodoApp {
-  todoStore: Store;
-  todoEdit: Todo;
-  factory: TodoFactory;
-
-  constructor(store: Store, factory: TodoFactory) {
-    this.todoStore = store;
-    this.todoEdit = null;
-    this.factory = factory;
-  }
-
-  enterTodo($event, inputElement) {
-    if($event.which === 13) { // ENTER_KEY
-      this.addTodo(inputElement.value);
-      inputElement.value = '';
-    }
-  }
-
-  editTodo(todo: Todo) {
-    this.todoEdit = todo;
-  }
-
-  doneEditing($event, todo: Todo) {
-    var which = $event.which;
-    var target = $event.target;
-    if(which === 13) {
-      todo.title = target.value;
-      this.todoEdit = null;
-    } else if (which === 27) {
-      this.todoEdit = null;
-      target.value = todo.title;
-    }
-  }
-
-  addTodo(newTitle: string) {
-    this.todoStore.add(this.factory.create(newTitle, false));
-  }
-
-  completeMe(todo: Todo) {
-    todo.completed = !todo.completed;
-  }
-
-  deleteMe(todo: Todo) {
-    this.todoStore.remove(todo);
-  }
-
-  toggleAll($event) {
-    var isComplete = $event.target.checked;
-    this.todoStore.list.forEach((todo) => {
-      todo.completed = isComplete;
-    });
-  }
-
-  clearCompleted() {
-    this.todoStore.removeBy((todo) => todo.completed);
-  }
-}
-
-export function main() {
-  reflector.reflectionCapabilities = new ReflectionCapabilities(); // for the Dart version
-  bootstrap(TodoApp);
-}

modules/examples/src/todo/index.ts

@@ -0,0 +1,49 @@
+import {bootstrap, NgFor, Component, View} from 'angular2/angular2';
+import {Store, Todo, TodoFactory} from './services/TodoStore';
+import {reflector} from 'angular2/src/reflection/reflection';
+import {ReflectionCapabilities} from 'angular2/src/reflection/reflection_capabilities';
+
+@Component({selector: 'todo-app', appInjector: [Store, TodoFactory]})
+@View({templateUrl: 'todo.html', directives: [NgFor]})
+class TodoApp {
+  todoEdit: Todo = null;
+
+  constructor(public todoStore: Store, public factory: TodoFactory) {}
+
+  enterTodo($event, inputElement): void {
+    this.addTodo(inputElement.value);
+    inputElement.value = '';
+  }
+
+  editTodo(todo: Todo): void { this.todoEdit = todo; }
+
+  doneEditing($event, todo: Todo): void {
+    var which = $event.which;
+    var target = $event.target;
+    if (which === 13) {
+      todo.title = target.value;
+      this.todoEdit = null;
+    } else if (which === 27) {
+      this.todoEdit = null;
+      target.value = todo.title;
+    }
+  }
+
+  addTodo(newTitle: string): void { this.todoStore.add(this.factory.create(newTitle, false)); }
+
+  completeMe(todo: Todo): void { todo.completed = !todo.completed; }
+
+  deleteMe(todo: Todo): void { this.todoStore.remove(todo); }
+
+  toggleAll($event): void {
+    var isComplete = $event.target.checked;
+    this.todoStore.list.forEach((todo: Todo) => { todo.completed = isComplete; });
+  }
+
+  clearCompleted(): void { this.todoStore.removeBy((todo) => todo.completed); }
+}
+
+export function main() {
+  reflector.reflectionCapabilities = new ReflectionCapabilities();  // for the Dart version
+  bootstrap(TodoApp);
+}

modules/examples/src/todo/services/TodoStore.js

@@ -1,75 +0,0 @@
-import {Injectable} from 'angular2/src/di/annotations_impl';
-import {ListWrapper} from 'angular2/src/facade/collection';
-
-// base model for RecordStore
-export class KeyModel {
-  key:number;
-  constructor(k:number) {
-    this.key = k;
-  }
-}
-
-export class Todo extends KeyModel {
-  title: string;
-  completed: boolean;
-
-  constructor(key: number, theTitle: string, isCompleted: boolean) {
-    super(key);
-    this.title = theTitle;
-    this.completed = isCompleted;
-  }
-}
-
-@Injectable()
-export class TodoFactory {
-  _uid: number;
-
-  constructor() {
-    this._uid = 0;
-  }
-
-  nextUid() {
-    this._uid = this._uid + 1;
-    return this._uid;
-  }
-
-  create(title: string, isCompleted: boolean) {
-    return new Todo(this.nextUid(), title, isCompleted);
-  }
-}
-
-// Store manages any generic item that inherits from KeyModel
-@Injectable()
-export class Store {
-  list: List<KeyModel>;
-
-  constructor() {
-    this.list = [];
-  }
-
-  add(record: KeyModel) {
-    ListWrapper.push(this.list, record);
-  }
-
-  remove(record: KeyModel) {
-    this.spliceOut(record);
-  }
-
-  removeBy(callback: Function) {
-    var records = ListWrapper.filter(this.list, callback);
-    ListWrapper.removeAll(this.list, records);
-  }
-
-  spliceOut(record: KeyModel) {
-    var i = this.indexFor(record);
-    if( i > -1 ) {
-      return ListWrapper.splice(this.list, i, 1)[0];
-    }
-    return null;
-  }
-
-  indexFor(record: KeyModel) {
-    return this.list.indexOf(record);
-  }
-
-}

modules/examples/src/todo/services/TodoStore.ts

@@ -0,0 +1,47 @@
+import {Injectable} from 'angular2/angular2';
+import {ListWrapper} from 'angular2/src/facade/collection';
+
+// base model for RecordStore
+export class KeyModel {
+  constructor(public key: number) {}
+}
+
+export class Todo extends KeyModel {
+  constructor(key: number, public title: string, public completed: boolean) { super(key); }
+}
+
+@Injectable()
+export class TodoFactory {
+  _uid: number = 0;
+
+  nextUid(): number { return ++this._uid; }
+
+  create(title: string, isCompleted: boolean): Todo {
+    return new Todo(this.nextUid(), title, isCompleted);
+  }
+}
+
+// Store manages any generic item that inherits from KeyModel
+@Injectable()
+export class Store {
+  list: List<KeyModel> = [];
+
+  add(record: KeyModel): void { ListWrapper.push(this.list, record); }
+
+  remove(record: KeyModel): void { this._spliceOut(record); }
+
+  removeBy(callback: Function): void {
+    var records = ListWrapper.filter(this.list, callback);
+    ListWrapper.removeAll(this.list, records);
+  }
+
+  private _spliceOut(record: KeyModel) {
+    var i = this._indexFor(record);
+    if (i > -1) {
+      return ListWrapper.splice(this.list, i, 1)[0];
+    }
+    return null;
+  }
+
+  private _indexFor(record: KeyModel) { return this.list.indexOf(record); }
+}

modules/examples/src/todo/todo.html

@@ -9,7 +9,7 @@
       placeholder="What needs to be done?"
       autofocus
       #newtodo
-      (keyup)="enterTodo($event, newtodo)">
+      (keyup.enter)="enterTodo($event, newtodo)">
   </header>
 
   <section id="main">