refactor(playground): make playground great again

modules/playground/e2e_test/hello_world/hello_world_spec.ts

@@ -13,7 +13,7 @@ describe('hello world', function() {
   afterEach(verifyNoBrowserErrors);
 
   describe('hello world app', function() {
-    var URL = 'all/playground/src/hello_world/index.html';
+    const URL = 'all/playground/src/hello_world/index.html';
 
     it('should greet', function() {
       browser.get(URL);
@@ -31,15 +31,12 @@ describe('hello world', function() {
 
 });
 
-function getComponentText(selector: any /** TODO #9100 */, innerSelector: any /** TODO #9100 */) {
+function getComponentText(selector: string, innerSelector: string) {
   return browser.executeScript(
-      'return document.querySelector("' + selector + '").querySelector("' + innerSelector +
-      '").textContent');
+      `return document.querySelector("${selector}").querySelector("${innerSelector}").textContent`);
 }
 
-function clickComponentButton(
-    selector: any /** TODO #9100 */, innerSelector: any /** TODO #9100 */) {
+function clickComponentButton(selector: string, innerSelector: string) {
   return browser.executeScript(
-      'return document.querySelector("' + selector + '").querySelector("' + innerSelector +
-      '").click()');
+      `return document.querySelector("${selector}").querySelector("${innerSelector}").click()`);
 }

modules/playground/e2e_test/http/http_spec.ts

@@ -13,7 +13,7 @@ describe('http', function() {
   afterEach(verifyNoBrowserErrors);
 
   describe('fetching', function() {
-    var URL = 'all/playground/src/http/index.html';
+    const URL = 'all/playground/src/http/index.html';
 
     it('should fetch and display people', function() {
       browser.get(URL);
@@ -22,8 +22,7 @@ describe('http', function() {
   });
 });
 
-function getComponentText(selector: any /** TODO #9100 */, innerSelector: any /** TODO #9100 */) {
+function getComponentText(selector: string, innerSelector: string) {
   return browser.executeScript(
-      'return document.querySelector("' + selector + '").querySelector("' + innerSelector +
-      '").textContent.trim()');
+      `return document.querySelector("${selector}").querySelector("${innerSelector}").textContent.trim()`);
 }

modules/playground/e2e_test/jsonp/jsonp_spec.ts

@@ -13,7 +13,7 @@ describe('jsonp', function() {
   afterEach(verifyNoBrowserErrors);
 
   describe('fetching', function() {
-    var URL = 'all/playground/src/jsonp/index.html';
+    const URL = 'all/playground/src/jsonp/index.html';
 
     it('should fetch and display people', function() {
       browser.get(URL);
@@ -22,8 +22,7 @@ describe('jsonp', function() {
   });
 });
 
-function getComponentText(selector: any /** TODO #9100 */, innerSelector: any /** TODO #9100 */) {
+function getComponentText(selector: string, innerSelector: string) {
   return browser.executeScript(
-      'return document.querySelector("' + selector + '").querySelector("' + innerSelector +
-      '").textContent.trim()');
+      `return document.querySelector("${selector}").querySelector("${innerSelector}").textContent.trim()`);
 }

modules/playground/e2e_test/relative_assets/assets_spec.ts

@@ -8,8 +8,8 @@
 
 import {verifyNoBrowserErrors} from 'e2e_util/e2e_util';
 
-function waitForElement(selector: any /** TODO #9100 */) {
-  var EC = (<any>protractor).ExpectedConditions;
+function waitForElement(selector: string) {
+  const EC = protractor.ExpectedConditions;
   // Waits for the element with id 'abc' to be present on the dom.
   browser.wait(EC.presenceOf($(selector)), 20000);
 }
@@ -18,7 +18,7 @@ describe('relative assets relative-app', () => {
 
   afterEach(verifyNoBrowserErrors);
 
-  var URL = 'all/playground/src/relative_assets/';
+  const URL = 'all/playground/src/relative_assets/';
 
   it('should load in the templateUrl relative to the my-cmp component', () => {
     browser.get(URL);
@@ -31,10 +31,9 @@ describe('relative assets relative-app', () => {
     browser.get(URL);
 
     waitForElement('my-cmp .inner-container');
-    var elem = element(by.css('my-cmp .inner-container'));
-    var width = browser.executeScript(function(e: any /** TODO #9100 */) {
-      return parseInt(window.getComputedStyle(e).width);
-    }, elem.getWebElement());
+    const elem = element(by.css('my-cmp .inner-container'));
+    const width = browser.executeScript(
+        (e: Element) => parseInt(window.getComputedStyle(e).width), elem.getWebElement());
 
     expect(width).toBe(432);
   });

modules/playground/e2e_test/routing/routing_spec.ts

@@ -8,8 +8,8 @@
 
 import {verifyNoBrowserErrors} from 'e2e_util/e2e_util';
 
-function waitForElement(selector: any /** TODO #9100 */) {
-  var EC = (<any>protractor).ExpectedConditions;
+function waitForElement(selector: string) {
+  const EC = protractor.ExpectedConditions;
   // Waits for the element with id 'abc' to be present on the dom.
   browser.wait(EC.presenceOf($(selector)), 20000);
 }
@@ -19,7 +19,7 @@ describe('routing inbox-app', () => {
   afterEach(verifyNoBrowserErrors);
 
   describe('index view', () => {
-    var URL = 'all/playground/src/routing/';
+    const URL = 'all/playground/src/routing/';
 
     it('should list out the current collection of items', () => {
       browser.get(URL);

modules/playground/e2e_test/web_workers/router/router_spec.ts

@@ -22,13 +22,13 @@ describe('WebWorker Router', () => {
 
   let contentSelector = 'app main h1';
   let navSelector = 'app nav ul';
-  var baseUrl = 'all/playground/src/web_workers/router/index.html';
+  const baseUrl = 'all/playground/src/web_workers/router/index.html';
 
   it('should route on click', () => {
     browser.get(baseUrl);
 
     waitForElement(contentSelector);
-    var content = element(by.css(contentSelector));
+    let content = element(by.css(contentSelector));
     expect(content.getText()).toEqual('Start');
 
     let aboutBtn = element(by.css(navSelector + ' .about'));
@@ -66,13 +66,13 @@ describe('WebWorker Router', () => {
   function waitForElementText(contentSelector: string, expected: string): void {
     browser.wait(() => {
       let deferred = protractor.promise.defer();
-      var elem = element(by.css(contentSelector));
+      const elem = element(by.css(contentSelector));
       elem.getText().then((text) => deferred.fulfill(text === expected));
       return deferred.promise;
     }, 5000);
   }
 
-  function waitForUrl(regex: any /** TODO #9100 */): void {
+  function waitForUrl(regex: RegExp): void {
     browser.wait(() => {
       let deferred = protractor.promise.defer();
       browser.getCurrentUrl().then((url) => deferred.fulfill(url.match(regex) !== null));

modules/playground/src/animate/app/animate-app.ts

@@ -63,26 +63,26 @@ import {Component, animate, keyframes, state, style, transition, trigger} from '
   ]
 })
 export class AnimateApp {
-  public items: any[] /** TODO #9100 */ = [];
-  private _state: any /** TODO #9100 */;
+  public items: number[] = [];
+  private _state: ('start'|'active'|'void'|'default');
 
   public bgStatus = 'focus';
 
-  remove(item: any) {
-    var index = this.items.indexOf(item);
+  remove(item: number) {
+    const index = this.items.indexOf(item);
     if (index >= 0) {
       this.items.splice(index, 1);
     }
   }
 
   reorderAndRemove() {
-    this.items = this.items.sort((a: any, b: any) => Math.random() - 0.5);
+    this.items = this.items.sort((a, b) => Math.random() - 0.5);
     this.items.splice(Math.floor(Math.random() * this.items.length), 1);
     this.items.splice(Math.floor(Math.random() * this.items.length), 1);
     this.items[Math.floor(Math.random() * this.items.length)] = 99;
   }
 
-  bgStatusChanged(data: {[key: string]: any}, phase: string) {
+  bgStatusChanged(data: {[key: string]: string}, phase: string) {
     alert(`backgroundAnimation has ${phase} from ${data['fromState']} to ${data['toState']}`);
   }
 

modules/playground/src/async/index.ts

@@ -39,9 +39,9 @@ class AsyncApplication {
   val2: number = 0;
   val3: number = 0;
   val4: number = 0;
-  timeoutId: any /** TODO #9100 */ = null;
-  multiTimeoutId: any /** TODO #9100 */ = null;
-  intervalId: any /** TODO #9100 */ = null;
+  timeoutId: any = null;
+  multiTimeoutId: any = null;
+  intervalId: any = null;
 
   increment(): void { this.val1++; };
 
@@ -56,8 +56,8 @@ class AsyncApplication {
   multiDelayedIncrements(i: number): void {
     this.cancelMultiDelayedIncrements();
 
-    var self = this;
-    function helper(_i: any /** TODO #9100 */) {
+    const self = this;
+    function helper(_i: number) {
       if (_i <= 0) {
         self.multiTimeoutId = null;
         return;

modules/playground/src/bootstrap.ts

@@ -41,15 +41,10 @@
           '@angular/upgrade': '/packages-dist/upgrade/bundles/upgrade.umd.js',
           '@angular/upgrade/static': '/packages-dist/upgrade/bundles/upgrade-static.umd.js',
           'rxjs': '/all/playground/vendor/rxjs',
-
-          // TODO(i): remove once playground apps no longer use facades directly
-          '@angular/core/src/facade': '/all/@angular/core/src/facade'
         },
         packages: {
           'app': {defaultExtension: 'js'},
           'rxjs': {defaultExtension: 'js'},
-          // TODO(i): remove once playground apps no longer use facades directly
-          '@angular/core/src/facade': {defaultExtension: 'js'}
         }
       });
     } else {

modules/playground/src/key_events/index.ts

@@ -9,8 +9,6 @@
 import {Component, NgModule} from '@angular/core';
 import {BrowserModule} from '@angular/platform-browser';
 import {platformBrowserDynamic} from '@angular/platform-browser-dynamic';
-// TODO: remove deep import by reimplementing the event name serialization
-import {KeyEventsPlugin} from '@angular/platform-browser/src/dom/events/key_events';
 
 @Component({
   selector: 'key-events-app',
@@ -28,17 +26,48 @@ class KeyEventsApp {
   lastKey: string = '(none)';
   shiftEnter: boolean = false;
 
-  onKeyDown(event: any /** TODO #9100 */): void {
-    this.lastKey = KeyEventsPlugin.getEventFullKey(event);
+  onKeyDown(event: KeyboardEvent): void {
+    this.lastKey = KeyEventsApp._getEventFullKey(event);
     event.preventDefault();
   }
 
-  onShiftEnter(event: any /** TODO #9100 */): void {
+  onShiftEnter(event: KeyboardEvent): void {
     this.shiftEnter = true;
     event.preventDefault();
   }
 
   resetShiftEnter(): void { this.shiftEnter = false; }
+
+  /**
+   * Get a more readable version of current pressed keys.
+   * @see KeyEventsPlugin.getEventFullKey
+   */
+  private static _getEventFullKey(event: KeyboardEvent): string {
+    const modifierKeys = ['alt', 'control', 'meta', 'shift'];
+    const modifierKeyGetters: {[key: string]: (event: KeyboardEvent) => boolean} = {
+      'alt': (event: KeyboardEvent) => event.altKey,
+      'control': (event: KeyboardEvent) => event.ctrlKey,
+      'meta': (event: KeyboardEvent) => event.metaKey,
+      'shift': (event: KeyboardEvent) => event.shiftKey
+    };
+
+    let fullKey = '';
+    let key = event.key.toLowerCase();
+    if (key === ' ') {
+      key = 'space';  // for readability
+    } else if (key === '.') {
+      key = 'dot';  // because '.' is used as a separator in event names
+    }
+    modifierKeys.forEach(modifierName => {
+      if (modifierName != key) {
+        const modifierGetter = modifierKeyGetters[modifierName];
+        if (modifierGetter(event)) {
+          fullKey += modifierName + '.';
+        }
+      }
+    });
+    return fullKey + key;
+  }
 }
 
 @NgModule({declarations: [KeyEventsApp], bootstrap: [KeyEventsApp], imports: [BrowserModule]})

modules/playground/src/model_driven_forms/index.ts

@@ -7,7 +7,6 @@
  */
 
 import {Component, Host, NgModule} from '@angular/core';
-import {isPresent, print} from '@angular/core/src/facade/lang';
 import {AbstractControl, FormBuilder, FormGroup, FormGroupDirective, ReactiveFormsModule, Validators} from '@angular/forms';
 import {BrowserModule} from '@angular/platform-browser';
 import {platformBrowserDynamic} from '@angular/platform-browser-dynamic';
@@ -18,7 +17,7 @@ import {platformBrowserDynamic} from '@angular/platform-browser-dynamic';
  * Custom validator.
  */
 function creditCardValidator(c: AbstractControl): {[key: string]: boolean} {
-  if (isPresent(c.value) && /^\d{16}$/.test(c.value)) {
+  if (c.value && /^\d{16}$/.test(c.value)) {
     return null;
   } else {
     return {'invalidCreditCard': true};
@@ -48,17 +47,17 @@ function creditCardValidator(c: AbstractControl): {[key: string]: boolean} {
   `
 })
 class ShowError {
-  formDir: any /** TODO #9100 */;
+  formDir: FormGroupDirective;
   controlPath: string;
   errorTypes: string[];
 
   constructor(@Host() formDir: FormGroupDirective) { this.formDir = formDir; }
 
   get errorMessage(): string {
-    var form: FormGroup = this.formDir.form;
-    var control = form.get(this.controlPath);
-    if (isPresent(control) && control.touched) {
-      for (var i = 0; i < this.errorTypes.length; ++i) {
+    const form: FormGroup = this.formDir.form;
+    const control = form.get(this.controlPath);
+    if (control && control.touched) {
+      for (let i = 0; i < this.errorTypes.length; ++i) {
         if (control.hasError(this.errorTypes[i])) {
           return this._errorMessage(this.errorTypes[i]);
         }
@@ -68,8 +67,11 @@ class ShowError {
   }
 
   private _errorMessage(code: string): string {
-    var config = {'required': 'is required', 'invalidCreditCard': 'is invalid credit card number'};
-    return (config as any /** TODO #9100 */)[code];
+    const config: {[key: string]: string} = {
+      'required': 'is required',
+      'invalidCreditCard': 'is invalid credit card number',
+    };
+    return config[code];
   }
 }
 
@@ -134,7 +136,7 @@ class ShowError {
   `
 })
 class ReactiveForms {
-  form: any /** TODO #9100 */;
+  form: FormGroup;
   countries = ['US', 'Canada'];
 
   constructor(fb: FormBuilder) {
@@ -151,8 +153,8 @@ class ReactiveForms {
   }
 
   onSubmit(): void {
-    print('Submitting:');
-    print(this.form.value);
+    console.log('Submitting:');
+    console.log(this.form.value);
   }
 }
 

modules/playground/src/order_management/index.ts

@@ -7,7 +7,6 @@
  */
 
 import {Component, EventEmitter, Injectable, Input, NgModule, Output} from '@angular/core';
-import {ListWrapper} from '@angular/core/src/facade/collection';
 import {FormsModule} from '@angular/forms';
 import {BrowserModule} from '@angular/platform-browser';
 import {platformBrowserDynamic} from '@angular/platform-browser-dynamic';
@@ -40,7 +39,7 @@ class Order {
 
 // ---- services
 
-var _nextId = 1000;
+let _nextId = 1000;
 @Injectable()
 class DataService {
   orderItems: OrderItem[];
@@ -70,7 +69,7 @@ class DataService {
     this.orderItems.push(new OrderItem(_nextId++, order.orderId, '', 0, 0));
   }
 
-  deleteItem(item: OrderItem): void { ListWrapper.remove(this.orderItems, item); }
+  deleteItem(item: OrderItem): void { this.orderItems.splice(this.orderItems.indexOf(item), 1); }
 }