feat(web-workers) Add WebWorker Renderer

Allows angular apps to be rendered from the webworker!
Closes #3052, #3053, and #3097

modules/examples/src/message_broker/background_index.dart

@@ -10,16 +10,16 @@ import "dart:isolate";
 main(List<String> args, SendPort replyTo) {
   ReceivePort rPort = new ReceivePort();
   WorkerMessageBus bus = new WorkerMessageBus.fromPorts(replyTo, rPort);
-  bus.source.listen((message) {
+  bus.source.addListener((message) {
     if (identical(message['data']['type'], "echo")) {
       bus.sink
           .send({"type": "echo_response", "value": message['data']['value']});
     }
   });
 
-  MessageBroker broker = new MessageBroker(bus);
+  MessageBroker broker = new MessageBroker(bus, null);
   var args = new UiArguments("test", "tester");
-  broker.runOnUiThread(args).then((data) {
-    bus.sink.send({"type": "result", "value": data.value});
+  broker.runOnUiThread(args, String).then((data) {
+    bus.sink.send({"type": "result", "value": data});
   });
 }

modules/examples/src/message_broker/background_index.ts

@@ -4,17 +4,18 @@ import {
   WorkerMessageBusSink
 } from "angular2/src/web-workers/worker/application";
 import {MessageBroker, UiArguments} from "angular2/src/web-workers/worker/broker";
+import {Serializer} from "angular2/src/web-workers/shared/serializer";
 
 export function main() {
   var bus = new WorkerMessageBus(new WorkerMessageBusSink(), new WorkerMessageBusSource());
-  bus.source.listen((message) => {
+  bus.source.addListener((message) => {
     if (message.data.type === "echo") {
       bus.sink.send({type: "echo_response", 'value': message.data.value});
     }
   });
 
-  var broker = new MessageBroker(bus);
+  var broker = new MessageBroker(bus, new Serializer(null));
   var args = new UiArguments("test", "tester");
-  broker.runOnUiThread(args)
-      .then((data) => { bus.sink.send({type: "result", value: data.value}); });
+  broker.runOnUiThread(args, String)
+      .then((data: string) => { bus.sink.send({type: "result", value: data}); });
 }

modules/examples/src/message_broker/index.dart

@@ -12,7 +12,7 @@ main() {
       var val = (querySelector("#echo_input") as InputElement).value;
       bus.sink.send({'type': 'echo', 'value': val});
     });
-    bus.source.listen((message) {
+    bus.source.addListener((message) {
       var data = message['data'];
       if (identical(data['type'], "echo_response")) {
         querySelector("#echo_result")

modules/examples/src/message_broker/index.ts

@@ -13,7 +13,8 @@ document.getElementById("send_echo")
       var val = (<HTMLInputElement>document.getElementById("echo_input")).value;
       bus.sink.send({type: "echo", value: val});
     });
-bus.source.listen((message) => {
+
+bus.source.addListener((message) => {
   if (message.data.type === "echo_response") {
     document.getElementById("echo_result").innerHTML =
         `<span class='response'>${message.data.value}</span>`;

modules/examples/src/web_workers/background_index.dart

@@ -0,0 +1,12 @@
+library examples.src.web_workers.index;
+
+import "index_common.dart" show HelloCmp;
+import "dart:isolate";
+import "package:angular2/src/web-workers/worker/application.dart" show bootstrapWebworker;
+import "package:angular2/src/reflection/reflection_capabilities.dart";
+import "package:angular2/src/reflection/reflection.dart";
+
+main(List<String> args, SendPort replyTo){
+  reflector.reflectionCapabilities = new ReflectionCapabilities();
+  bootstrapWebworker(replyTo, HelloCmp);
+}

modules/examples/src/web_workers/background_index.ts

@@ -0,0 +1,6 @@
+import {HelloCmp} from "./index_common";
+import {bootstrapWebworker} from "angular2/src/web-workers/worker/application";
+
+export function main() {
+  bootstrapWebworker(HelloCmp);
+}

modules/examples/src/web_workers/example.dart

@@ -0,0 +1,10 @@
+library angular2.examples.web_workers;
+
+import "package:angular2/src/web-workers/ui/application.dart" show bootstrap;
+import "package:angular2/src/reflection/reflection_capabilities.dart";
+import "package:angular2/src/reflection/reflection.dart";
+
+main(){
+  reflector.reflectionCapabilities = new ReflectionCapabilities();
+  bootstrap("background_index.dart");
+}

modules/examples/src/web_workers/example.html

@@ -0,0 +1,11 @@
+<!doctype html>
+<html>
+  <title>Hello Angular 2.0</title>
+<body>
+  <hello-app>
+    Loading...
+  </hello-app>
+
+  $SCRIPTS$
+</body>
+</html>

modules/examples/src/web_workers/example.ts

@@ -0,0 +1,2 @@
+import {bootstrap} from "angular2/src/web-workers/ui/application";
+bootstrap("loader.js");

modules/examples/src/web_workers/index_common.ts

@@ -0,0 +1,53 @@
+import {ElementRef, Component, Directive, View, Injectable, Renderer} from 'angular2/angular2';
+
+// 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, renderer: Renderer) { renderer.setElementStyle(el, 'color', 'red'); }
+  // constructor(renderer: Renderer) {}
+}
+
+// Angular 2.0 supports 2 basic types of directives:
+// - Component - the basic building blocks of Angular 2.0 apps. Backed by
+//   ShadowDom.(http://www.html5rocks.com/en/tutorials/webcomponents/shadowdom/)
+// - Directive - add behavior to existing elements.
+
+// @Component is AtScript syntax to annotate the HelloCmp class as an Angular
+// 2.0 component.
+@Component({
+  // The Selector prop tells Angular on which elements to instantiate this
+  // class. The syntax supported is a basic subset of CSS selectors, for example
+  // 'element', '[attr]', [attr=foo]', etc.
+  selector: 'hello-app',
+  // These are services that would be created if a class in the component's
+  // template tries to inject them.
+  viewInjector: [GreetingService]
+})
+// The template for the component.
+@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">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
+  // misspelled).
+  directives: [RedDec]
+})
+export class HelloCmp {
+  greeting: string;
+
+  constructor(service: GreetingService) { this.greeting = service.greeting; }
+
+  changeGreeting(): void { this.greeting = 'howdy'; }
+}

modules/examples/src/web_workers/loader.js

@@ -0,0 +1,27 @@
+$SCRIPTS$
+
+    // TODO (jteplitz) Monkey patch this from within angular (#3207)
+    window = {
+      setTimeout: setTimeout,
+      Map: Map,
+      Set: Set,
+      Array: Array,
+      Reflect: Reflect,
+      RegExp: RegExp,
+      Promise: Promise,
+      Date: Date
+    };
+assert = function() {}
+
+
+         System.import("examples/src/web_workers/background_index")
+             .then(
+                 function(m) {
+                   console.log("running main");
+                   try {
+                     m.main();
+                   } catch (e) {
+                     console.error(e);
+                   }
+                 },
+                 function(error) { console.error("error loading background", error); });