refactor(WebWorker): Abstract message passing and serialization to UIMessageBroker

closes angular#3703

Closes angular#3815

Author: jteplitz

modules/angular2/src/web_workers/worker/broker.ts renamed to modules/angular2/src/web_workers/shared/client_message_broker.ts

@@ -14,15 +14,15 @@ import {Injectable} from "angular2/di";
 import {Type} from "angular2/src/facade/lang";
 
 @Injectable()
-export class MessageBrokerFactory {
+export class ClientMessageBrokerFactory {
   constructor(private _messageBus: MessageBus, protected _serializer: Serializer) {}
 
-  createMessageBroker(channel: string): MessageBroker {
-    return new MessageBroker(this._messageBus, this._serializer, channel);
+  createMessageBroker(channel: string): ClientMessageBroker {
+    return new ClientMessageBroker(this._messageBus, this._serializer, channel);
   }
 }
 
-export class MessageBroker {
+export class ClientMessageBroker {
   private _pending: Map<string, PromiseCompleter<any>> = new Map<string, PromiseCompleter<any>>();
   private _sink: EventEmitter;
 

modules/angular2/src/web_workers/shared/serializer.ts

@@ -40,6 +40,10 @@ import {
   RenderViewWithFragmentsStore
 } from 'angular2/src/web_workers/shared/render_view_with_fragments_store';
 
+// PRIMITIVE is any type that does not need to be serialized (string, number, boolean)
+// We set it to String so that it is considered a Type.
+export const PRIMITIVE: Type = String;
+
 @Injectable()
 export class Serializer {
   private _enumRegistry: Map<any, Map<number, any>>;
@@ -76,7 +80,7 @@ export class Serializer {
       ListWrapper.forEach(obj, (val) => { serializedObj.push(this.serialize(val, type)); });
       return serializedObj;
     }
-    if (type == String) {
+    if (type == PRIMITIVE) {
       return obj;
     }
     if (type == ViewDefinition) {
@@ -119,7 +123,7 @@ export class Serializer {
       ListWrapper.forEach(map, (val) => { obj.push(this.deserialize(val, type, data)); });
       return obj;
     }
-    if (type == String) {
+    if (type == PRIMITIVE) {
       return map;
     }
 

modules/angular2/src/web_workers/shared/service_message_broker.ts

@@ -0,0 +1,78 @@
+import {Injectable} from 'angular2/di';
+import {ListWrapper, Map, MapWrapper} from 'angular2/src/facade/collection';
+import {Serializer} from "angular2/src/web_workers/shared/serializer";
+import {isPresent, Type, FunctionWrapper} from "angular2/src/facade/lang";
+import {MessageBus} from "angular2/src/web_workers/shared/message_bus";
+import {EventEmitter, Promise, PromiseWrapper, ObservableWrapper} from 'angular2/src/facade/async';
+
+@Injectable()
+export class ServiceMessageBrokerFactory {
+  constructor(private _messageBus: MessageBus, protected _serializer: Serializer) {}
+
+  createMessageBroker(channel: string): ServiceMessageBroker {
+    return new ServiceMessageBroker(this._messageBus, this._serializer, channel);
+  }
+}
+
+/**
+ * Helper class for UIComponents that allows components to register methods.
+ * If a registered method message is received from the broker on the worker,
+ * the UIMessageBroker desererializes its arguments and calls the registered method.
+ * If that method returns a promise, the UIMessageBroker returns the result to the worker.
+ */
+export class ServiceMessageBroker {
+  private _sink: EventEmitter;
+  private _methods: Map<string, Function> = new Map<string, Function>();
+
+  constructor(messageBus: MessageBus, private _serializer: Serializer, public channel) {
+    this._sink = messageBus.to(channel);
+    var source = messageBus.from(channel);
+    ObservableWrapper.subscribe(source, (message) => this._handleMessage(message));
+  }
+
+  registerMethod(methodName: string, signature: List<Type>, method: Function, returnType?: Type):
+      void {
+    this._methods.set(methodName, (message: ReceivedMessage) => {
+      var serializedArgs = message.args;
+      var deserializedArgs: List<any> = ListWrapper.createFixedSize(signature.length);
+      for (var i = 0; i < signature.length; i++) {
+        var serializedArg = serializedArgs[i];
+        deserializedArgs[i] = this._serializer.deserialize(serializedArg, signature[i]);
+      }
+
+      var promise = FunctionWrapper.apply(method, deserializedArgs);
+      if (isPresent(returnType) && isPresent(promise)) {
+        this._wrapWebWorkerPromise(message.id, promise, returnType);
+      }
+    });
+  }
+
+  private _handleMessage(map: StringMap<string, any>): void {
+    var message = new ReceivedMessage(map);
+    if (this._methods.has(message.method)) {
+      this._methods.get(message.method)(message);
+    }
+  }
+
+  private _wrapWebWorkerPromise(id: string, promise: Promise<any>, type: Type): void {
+    PromiseWrapper.then(promise, (result: any) => {
+      ObservableWrapper.callNext(
+          this._sink,
+          {'type': 'result', 'value': this._serializer.serialize(result, type), 'id': id});
+    });
+  }
+}
+
+export class ReceivedMessage {
+  method: string;
+  args: List<any>;
+  id: string;
+  type: string;
+
+  constructor(data: StringMap<string, any>) {
+    this.method = data['method'];
+    this.args = data['args'];
+    this.id = data['id'];
+    this.type = data['type'];
+  }
+}

modules/angular2/src/web_workers/ui/bind.dart

@@ -0,0 +1,11 @@
+library angular2.src.web_workers.ui.bind;
+
+/**
+ * Binding is not necessary in dart.
+ * This method just returns the passed function regardless of scope.
+ * It's only here to match the TypeScript implementation.
+ * TODO(jteplitz602) Have ts2dart remove calls to bind(#3820)
+ */
+Function bind(Function fn, dynamic scope) {
+  return fn;
+}

modules/angular2/src/web_workers/ui/bind.ts

@@ -0,0 +1,3 @@
+export function bind(fn: Function, scope: any): Function {
+  return fn.bind(scope);
+}

modules/angular2/src/web_workers/ui/di_bindings.ts

@@ -65,6 +65,7 @@ import {MessageBasedRenderCompiler} from 'angular2/src/web_workers/ui/render_com
 import {MessageBasedRenderer} from 'angular2/src/web_workers/ui/renderer';
 import {MessageBasedXHRImpl} from 'angular2/src/web_workers/ui/xhr_impl';
 import {WebWorkerSetup} from 'angular2/src/web_workers/ui/setup';
+import {ServiceMessageBrokerFactory} from 'angular2/src/web_workers/shared/service_message_broker';
 
 var _rootInjector: Injector;
 
@@ -135,7 +136,8 @@ function _injectorBindings(): List<any> {
     WebWorkerSetup,
     MessageBasedRenderCompiler,
     MessageBasedXHRImpl,
-    MessageBasedRenderer
+    MessageBasedRenderer,
+    ServiceMessageBrokerFactory
   ];
 }
 

modules/angular2/src/web_workers/ui/impl.ts

@@ -37,17 +37,3 @@ export class WebWorkerMain {
               public renderer: MessageBasedRenderer, public xhr: MessageBasedXHRImpl,
               public setup: WebWorkerSetup) {}
 }
-
-export class ReceivedMessage {
-  method: string;
-  args: List<any>;
-  id: string;
-  type: string;
-
-  constructor(data: StringMap<string, any>) {
-    this.method = data['method'];
-    this.args = data['args'];
-    this.id = data['id'];
-    this.type = data['type'];
-  }
-}

modules/angular2/src/web_workers/ui/render_compiler.ts

@@ -1,6 +1,4 @@
 import {Injectable} from 'angular2/di';
-import {MessageBus} from 'angular2/src/web_workers/shared/message_bus';
-import {Serializer} from 'angular2/src/web_workers/shared/serializer';
 import {
   RenderDirectiveMetadata,
   ProtoViewDto,
@@ -9,55 +7,22 @@ import {
   RenderProtoViewMergeMapping,
   RenderCompiler
 } from 'angular2/src/render/api';
-import {EventEmitter, ObservableWrapper, PromiseWrapper, Promise} from 'angular2/src/facade/async';
 import {RENDER_COMPILER_CHANNEL} from 'angular2/src/web_workers/shared/messaging_api';
-import {ReceivedMessage} from 'angular2/src/web_workers/ui/impl';
-import {BaseException, Type} from 'angular2/src/facade/lang';
+import {bind} from './bind';
+import {ServiceMessageBrokerFactory} from 'angular2/src/web_workers/shared/service_message_broker';
 
-// TODO(jteplitz602): Create parent UIComponent class #3703
 @Injectable()
 export class MessageBasedRenderCompiler {
-  private _sink: EventEmitter;
-  private _source: EventEmitter;
-
-  constructor(bus: MessageBus, private _serializer: Serializer,
-              private _renderCompiler: RenderCompiler) {
-    this._sink = bus.to(RENDER_COMPILER_CHANNEL);
-    this._source = bus.from(RENDER_COMPILER_CHANNEL);
-    ObservableWrapper.subscribe(this._source,
-                                (message: StringMap<string, any>) => this._handleMessage(message));
-  }
-
-  private _handleMessage(map: StringMap<string, any>): void {
-    var message = new ReceivedMessage(map);
-    var args = message.args;
-    var promise: Promise<any>;
-    switch (message.method) {
-      case "compileHost":
-        var directiveMetadata = this._serializer.deserialize(args[0], RenderDirectiveMetadata);
-        promise = this._renderCompiler.compileHost(directiveMetadata);
-        this._wrapWebWorkerPromise(message.id, promise, ProtoViewDto);
-        break;
-      case "compile":
-        var view = this._serializer.deserialize(args[0], ViewDefinition);
-        promise = this._renderCompiler.compile(view);
-        this._wrapWebWorkerPromise(message.id, promise, ProtoViewDto);
-        break;
-      case "mergeProtoViewsRecursively":
-        var views = this._serializer.deserialize(args[0], RenderProtoViewRef);
-        promise = this._renderCompiler.mergeProtoViewsRecursively(views);
-        this._wrapWebWorkerPromise(message.id, promise, RenderProtoViewMergeMapping);
-        break;
-      default:
-        throw new BaseException("not implemented");
-    }
-  }
-
-  private _wrapWebWorkerPromise(id: string, promise: Promise<any>, type: Type): void {
-    PromiseWrapper.then(promise, (result: any) => {
-      ObservableWrapper.callNext(
-          this._sink,
-          {'type': 'result', 'value': this._serializer.serialize(result, type), 'id': id});
-    });
+  constructor(brokerFactory: ServiceMessageBrokerFactory, private _renderCompiler: RenderCompiler) {
+    var broker = brokerFactory.createMessageBroker(RENDER_COMPILER_CHANNEL);
+    broker.registerMethod("compileHost", [RenderDirectiveMetadata],
+                          bind(this._renderCompiler.compileHost, this._renderCompiler),
+                          ProtoViewDto);
+    broker.registerMethod("compile", [ViewDefinition],
+                          bind(this._renderCompiler.compile, this._renderCompiler), ProtoViewDto);
+    broker.registerMethod(
+        "mergeProtoViewsRecursively", [RenderProtoViewRef],
+        bind(this._renderCompiler.mergeProtoViewsRecursively, this._renderCompiler),
+        RenderProtoViewMergeMapping);
   }
 }