From 6c1cb089b581d51d47a09d5ba7be971d1b5b938b Mon Sep 17 00:00:00 2001 From: Victor Berchet Date: Fri, 22 May 2015 14:39:00 +0200 Subject: [PATCH] =?UTF-8?q?refactor(examples):=20ts=E2=80=99ify?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit relates to #2008 --- .../e2e_test/sourcemap/sourcemap_spec.es6 | 4 +- modules/examples/src/gestures/index.js | 39 --------- modules/examples/src/gestures/index.ts | 22 +++++ .../src/hello_world/{index.js => index.ts} | 0 .../{index_common.js => index_common.ts} | 50 ++++------- .../{index_dynamic.js => index_dynamic.ts} | 0 .../src/key_events/{index.js => index.ts} | 32 ++----- modules/examples/src/sourcemap/index.js | 24 ------ modules/examples/src/sourcemap/index.ts | 17 ++++ modules/examples/src/todo/index.js | 83 ------------------- modules/examples/src/todo/index.ts | 49 +++++++++++ .../examples/src/todo/services/TodoStore.js | 75 ----------------- .../examples/src/todo/services/TodoStore.ts | 47 +++++++++++ modules/examples/src/todo/todo.html | 2 +- 14 files changed, 163 insertions(+), 281 deletions(-) delete mode 100644 modules/examples/src/gestures/index.js create mode 100644 modules/examples/src/gestures/index.ts rename modules/examples/src/hello_world/{index.js => index.ts} (100%) rename modules/examples/src/hello_world/{index_common.js => index_common.ts} (69%) rename modules/examples/src/hello_world/{index_dynamic.js => index_dynamic.ts} (100%) rename modules/examples/src/key_events/{index.js => index.ts} (59%) delete mode 100644 modules/examples/src/sourcemap/index.js create mode 100644 modules/examples/src/sourcemap/index.ts delete mode 100644 modules/examples/src/todo/index.js create mode 100644 modules/examples/src/todo/index.ts delete mode 100644 modules/examples/src/todo/services/TodoStore.js create mode 100644 modules/examples/src/todo/services/TodoStore.ts diff --git a/modules/examples/e2e_test/sourcemap/sourcemap_spec.es6 b/modules/examples/e2e_test/sourcemap/sourcemap_spec.es6 index 88c89aca89..291973cd5c 100644 --- a/modules/examples/e2e_test/sourcemap/sourcemap_spec.es6 +++ b/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\'\)/); diff --git a/modules/examples/src/gestures/index.js b/modules/examples/src/gestures/index.js deleted file mode 100644 index dc7ae3689e..0000000000 --- a/modules/examples/src/gestures/index.js +++ /dev/null @@ -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); -} diff --git a/modules/examples/src/gestures/index.ts b/modules/examples/src/gestures/index.ts new file mode 100644 index 0000000000..f63307b332 --- /dev/null +++ b/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); +} diff --git a/modules/examples/src/hello_world/index.js b/modules/examples/src/hello_world/index.ts similarity index 100% rename from modules/examples/src/hello_world/index.js rename to modules/examples/src/hello_world/index.ts diff --git a/modules/examples/src/hello_world/index_common.js b/modules/examples/src/hello_world/index_common.ts similarity index 69% rename from modules/examples/src/hello_world/index_common.js rename to modules/examples/src/hello_world/index_common.ts index 2f018d7a51..b159a4c01c 100644 --- a/modules/examples/src/hello_world/index_common.js +++ b/modules/examples/src/hello_world/index_common.ts @@ -1,11 +1,19 @@ -import {ElementRef} from 'angular2/angular2'; -import {Injectable} from 'angular2/src/di/annotations_impl'; +import {ElementRef, Component, Directive, View, Injectable} from 'angular2/angular2'; -// 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'; +// A service available to the Injector, used by the HelloCmp component. +@Injectable() +class GreetingService { + 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: `
{{greeting}} world!
- `, + `, // 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 -// 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'; - } -} + constructor(service: GreetingService) { this.greeting = service.greeting; } -// A service available to the Injector, used by the HelloCmp component. -@Injectable() -class GreetingService { - greeting:string; - constructor() { - this.greeting = 'hello'; - } + changeGreeting(): void { this.greeting = 'howdy'; } } diff --git a/modules/examples/src/hello_world/index_dynamic.js b/modules/examples/src/hello_world/index_dynamic.ts similarity index 100% rename from modules/examples/src/hello_world/index_dynamic.js rename to modules/examples/src/hello_world/index_dynamic.ts diff --git a/modules/examples/src/key_events/index.js b/modules/examples/src/key_events/index.ts similarity index 59% rename from modules/examples/src/key_events/index.js rename to modules/examples/src/key_events/index.ts index f71250ee03..f30229e4bd 100644 --- a/modules/examples/src/key_events/index.js +++ b/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({ - selector: 'key-events-app' -}) +@Component({selector: 'key-events-app'}) @View({ template: `Click in the following area and press a key to display its name:
{{lastKey}}

@@ -25,31 +17,23 @@ import {ReflectionCapabilities} from 'angular2/src/reflection/reflection_capabil >{{shiftEnter ? 'You pressed shift.enter!' : ''}}` }) class KeyEventsApp { - lastKey: string; - shiftEnter: boolean; + lastKey: string = '(none)'; + shiftEnter: boolean = false; - constructor() { - this.lastKey = '(none)'; - this.shiftEnter = false; - } - - onKeyDown(event) { + onKeyDown(event): void { this.lastKey = KeyEventsPlugin.getEventFullKey(event); event.preventDefault(); } - onShiftEnter(event) { + onShiftEnter(event): void { this.shiftEnter = true; event.preventDefault(); } - resetShiftEnter() { - this.shiftEnter = false; - } - + resetShiftEnter(): void { this.shiftEnter = false; } } export function main() { - reflector.reflectionCapabilities = new ReflectionCapabilities(); // for the Dart version + reflector.reflectionCapabilities = new ReflectionCapabilities(); // for the Dart version bootstrap(KeyEventsApp); } diff --git a/modules/examples/src/sourcemap/index.js b/modules/examples/src/sourcemap/index.js deleted file mode 100644 index 5634b9697f..0000000000 --- a/modules/examples/src/sourcemap/index.js +++ /dev/null @@ -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: ` - `, - directives: [] -}) -export class ErrorComponent { - createError() { - throw new BaseException('Sourcemap test'); - } -} - -export function main() { - bootstrap(ErrorComponent); -} diff --git a/modules/examples/src/sourcemap/index.ts b/modules/examples/src/sourcemap/index.ts new file mode 100644 index 0000000000..c4585c8ae4 --- /dev/null +++ b/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: ` + ` +}) +export class ErrorComponent { + createError(): void { throw new BaseException('Sourcemap test'); } +} + +export function main() { + bootstrap(ErrorComponent); +} diff --git a/modules/examples/src/todo/index.js b/modules/examples/src/todo/index.js deleted file mode 100644 index 3f62c5c577..0000000000 --- a/modules/examples/src/todo/index.js +++ /dev/null @@ -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); -} diff --git a/modules/examples/src/todo/index.ts b/modules/examples/src/todo/index.ts new file mode 100644 index 0000000000..5d7a3874f8 --- /dev/null +++ b/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); +} diff --git a/modules/examples/src/todo/services/TodoStore.js b/modules/examples/src/todo/services/TodoStore.js deleted file mode 100644 index 98237e342f..0000000000 --- a/modules/examples/src/todo/services/TodoStore.js +++ /dev/null @@ -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; - - 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); - } - -} diff --git a/modules/examples/src/todo/services/TodoStore.ts b/modules/examples/src/todo/services/TodoStore.ts new file mode 100644 index 0000000000..8f3f60d9e8 --- /dev/null +++ b/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 = []; + + 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); } +} diff --git a/modules/examples/src/todo/todo.html b/modules/examples/src/todo/todo.html index 65fe995f72..2637145850 100644 --- a/modules/examples/src/todo/todo.html +++ b/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)">