feat(core): speed up view creation via code gen for view factories.
BREAKING CHANGE: - Platform pipes can only contain types and arrays of types, but no bindings any more. - When using transformers, platform pipes need to be specified explicitly in the pubspec.yaml via the new config option `platform_pipes`. - `Compiler.compileInHost` now returns a `HostViewFactoryRef` - Component view is not yet created when component constructor is called. -> use `onInit` lifecycle callback to access the view of a component - `ViewRef#setLocal` has been moved to new type `EmbeddedViewRef` - `internalView` is gone, use `EmbeddedViewRef.rootNodes` to access the root nodes of an embedded view - `renderer.setElementProperty`, `..setElementStyle`, `..setElementAttribute` now take a native element instead of an ElementRef - `Renderer` interface now operates on plain native nodes, instead of `RenderElementRef`s or `RenderViewRef`s Closes #5993
This commit is contained in:
Tobias Bosch
@ -1,99 +1,172 @@
|
||||
import {Injectable} from 'angular2/src/core/di';
|
||||
import {MessageBus} from 'angular2/src/web_workers/shared/message_bus';
|
||||
import {Serializer, PRIMITIVE} from 'angular2/src/web_workers/shared/serializer';
|
||||
import {
|
||||
RenderViewRef,
|
||||
RenderFragmentRef,
|
||||
RenderProtoViewRef,
|
||||
Renderer,
|
||||
RenderTemplateCmd,
|
||||
RenderComponentTemplate
|
||||
} from 'angular2/src/core/render/api';
|
||||
import {WebWorkerElementRef, WebWorkerTemplateCmd} from 'angular2/src/web_workers/shared/api';
|
||||
import {Serializer, PRIMITIVE, RenderStoreObject} from 'angular2/src/web_workers/shared/serializer';
|
||||
import {RootRenderer, Renderer, RenderComponentType} from 'angular2/src/core/render/api';
|
||||
import {EVENT_CHANNEL, RENDERER_CHANNEL} from 'angular2/src/web_workers/shared/messaging_api';
|
||||
import {Type} from 'angular2/src/facade/lang';
|
||||
import {bind} from './bind';
|
||||
import {EventDispatcher} from 'angular2/src/web_workers/ui/event_dispatcher';
|
||||
import {RenderProtoViewRefStore} from 'angular2/src/web_workers/shared/render_proto_view_ref_store';
|
||||
import {
|
||||
RenderViewWithFragmentsStore
|
||||
} from 'angular2/src/web_workers/shared/render_view_with_fragments_store';
|
||||
import {RenderStore} from 'angular2/src/web_workers/shared/render_store';
|
||||
import {ServiceMessageBrokerFactory} from 'angular2/src/web_workers/shared/service_message_broker';
|
||||
|
||||
@Injectable()
|
||||
export class MessageBasedRenderer {
|
||||
private _eventDispatcher: EventDispatcher;
|
||||
|
||||
constructor(private _brokerFactory: ServiceMessageBrokerFactory, private _bus: MessageBus,
|
||||
private _serializer: Serializer,
|
||||
private _renderProtoViewRefStore: RenderProtoViewRefStore,
|
||||
private _renderViewWithFragmentsStore: RenderViewWithFragmentsStore,
|
||||
private _renderer: Renderer) {}
|
||||
private _serializer: Serializer, private _renderStore: RenderStore,
|
||||
private _rootRenderer: RootRenderer) {}
|
||||
|
||||
start(): void {
|
||||
var broker = this._brokerFactory.createMessageBroker(RENDERER_CHANNEL);
|
||||
this._bus.initChannel(EVENT_CHANNEL);
|
||||
this._eventDispatcher = new EventDispatcher(this._bus.to(EVENT_CHANNEL), this._serializer);
|
||||
|
||||
broker.registerMethod("registerComponentTemplate", [RenderComponentTemplate],
|
||||
bind(this._renderer.registerComponentTemplate, this._renderer));
|
||||
broker.registerMethod("createProtoView", [PRIMITIVE, WebWorkerTemplateCmd, PRIMITIVE],
|
||||
bind(this._createProtoView, this));
|
||||
broker.registerMethod("createRootHostView",
|
||||
[RenderProtoViewRef, PRIMITIVE, PRIMITIVE, PRIMITIVE],
|
||||
bind(this._createRootHostView, this));
|
||||
broker.registerMethod("createView", [RenderProtoViewRef, PRIMITIVE, PRIMITIVE],
|
||||
bind(this._createView, this));
|
||||
broker.registerMethod("destroyView", [RenderViewRef], bind(this._destroyView, this));
|
||||
broker.registerMethod("attachFragmentAfterFragment", [RenderFragmentRef, RenderFragmentRef],
|
||||
bind(this._renderer.attachFragmentAfterFragment, this._renderer));
|
||||
broker.registerMethod("attachFragmentAfterElement", [WebWorkerElementRef, RenderFragmentRef],
|
||||
bind(this._renderer.attachFragmentAfterElement, this._renderer));
|
||||
broker.registerMethod("detachFragment", [RenderFragmentRef],
|
||||
bind(this._renderer.detachFragment, this._renderer));
|
||||
broker.registerMethod("hydrateView", [RenderViewRef],
|
||||
bind(this._renderer.hydrateView, this._renderer));
|
||||
broker.registerMethod("dehydrateView", [RenderViewRef],
|
||||
bind(this._renderer.dehydrateView, this._renderer));
|
||||
broker.registerMethod("setText", [RenderViewRef, PRIMITIVE, PRIMITIVE],
|
||||
bind(this._renderer.setText, this._renderer));
|
||||
broker.registerMethod("setElementProperty", [WebWorkerElementRef, PRIMITIVE, PRIMITIVE],
|
||||
bind(this._renderer.setElementProperty, this._renderer));
|
||||
broker.registerMethod("setElementAttribute", [WebWorkerElementRef, PRIMITIVE, PRIMITIVE],
|
||||
bind(this._renderer.setElementAttribute, this._renderer));
|
||||
broker.registerMethod("setBindingDebugInfo", [WebWorkerElementRef, PRIMITIVE, PRIMITIVE],
|
||||
bind(this._renderer.setBindingDebugInfo, this._renderer));
|
||||
broker.registerMethod("setElementClass", [WebWorkerElementRef, PRIMITIVE, PRIMITIVE],
|
||||
bind(this._renderer.setElementClass, this._renderer));
|
||||
broker.registerMethod("setElementStyle", [WebWorkerElementRef, PRIMITIVE, PRIMITIVE],
|
||||
bind(this._renderer.setElementStyle, this._renderer));
|
||||
broker.registerMethod("invokeElementMethod", [WebWorkerElementRef, PRIMITIVE, PRIMITIVE],
|
||||
bind(this._renderer.invokeElementMethod, this._renderer));
|
||||
broker.registerMethod("setEventDispatcher", [RenderViewRef],
|
||||
bind(this._setEventDispatcher, this));
|
||||
broker.registerMethod("renderComponent", [RenderComponentType, PRIMITIVE],
|
||||
bind(this._renderComponent, this));
|
||||
|
||||
broker.registerMethod("selectRootElement", [RenderStoreObject, PRIMITIVE, PRIMITIVE],
|
||||
bind(this._selectRootElement, this));
|
||||
broker.registerMethod("createElement",
|
||||
[RenderStoreObject, RenderStoreObject, PRIMITIVE, PRIMITIVE],
|
||||
bind(this._createElement, this));
|
||||
broker.registerMethod("createViewRoot", [RenderStoreObject, RenderStoreObject, PRIMITIVE],
|
||||
bind(this._createViewRoot, this));
|
||||
broker.registerMethod("createTemplateAnchor", [RenderStoreObject, RenderStoreObject, PRIMITIVE],
|
||||
bind(this._createTemplateAnchor, this));
|
||||
broker.registerMethod("createText",
|
||||
[RenderStoreObject, RenderStoreObject, PRIMITIVE, PRIMITIVE],
|
||||
bind(this._createText, this));
|
||||
broker.registerMethod("projectNodes", [RenderStoreObject, RenderStoreObject, RenderStoreObject],
|
||||
bind(this._projectNodes, this));
|
||||
broker.registerMethod("attachViewAfter",
|
||||
[RenderStoreObject, RenderStoreObject, RenderStoreObject],
|
||||
bind(this._attachViewAfter, this));
|
||||
broker.registerMethod("detachView", [RenderStoreObject, RenderStoreObject],
|
||||
bind(this._detachView, this));
|
||||
broker.registerMethod("destroyView", [RenderStoreObject, RenderStoreObject, RenderStoreObject],
|
||||
bind(this._destroyView, this));
|
||||
broker.registerMethod("setElementProperty",
|
||||
[RenderStoreObject, RenderStoreObject, PRIMITIVE, PRIMITIVE],
|
||||
bind(this._setElementProperty, this));
|
||||
broker.registerMethod("setElementAttribute",
|
||||
[RenderStoreObject, RenderStoreObject, PRIMITIVE, PRIMITIVE],
|
||||
bind(this._setElementAttribute, this));
|
||||
broker.registerMethod("setBindingDebugInfo",
|
||||
[RenderStoreObject, RenderStoreObject, PRIMITIVE, PRIMITIVE],
|
||||
bind(this._setBindingDebugInfo, this));
|
||||
broker.registerMethod("setElementClass",
|
||||
[RenderStoreObject, RenderStoreObject, PRIMITIVE, PRIMITIVE],
|
||||
bind(this._setElementClass, this));
|
||||
broker.registerMethod("setElementStyle",
|
||||
[RenderStoreObject, RenderStoreObject, PRIMITIVE, PRIMITIVE],
|
||||
bind(this._setElementStyle, this));
|
||||
broker.registerMethod("invokeElementMethod",
|
||||
[RenderStoreObject, RenderStoreObject, PRIMITIVE, PRIMITIVE],
|
||||
bind(this._invokeElementMethod, this));
|
||||
broker.registerMethod("setText", [RenderStoreObject, RenderStoreObject, PRIMITIVE],
|
||||
bind(this._setText, this));
|
||||
broker.registerMethod("listen", [RenderStoreObject, RenderStoreObject, PRIMITIVE],
|
||||
bind(this._listen, this));
|
||||
broker.registerMethod("listenGlobal", [RenderStoreObject, PRIMITIVE, PRIMITIVE, PRIMITIVE],
|
||||
bind(this._listenGlobal, this));
|
||||
broker.registerMethod("listenGlobalDone", [RenderStoreObject, RenderStoreObject],
|
||||
bind(this._listenGlobalDone, this));
|
||||
}
|
||||
|
||||
private _destroyView(viewRef: RenderViewRef): void {
|
||||
this._renderer.destroyView(viewRef);
|
||||
this._renderViewWithFragmentsStore.remove(viewRef);
|
||||
private _renderComponent(renderComponentType: RenderComponentType, rendererId: number) {
|
||||
var renderer = this._rootRenderer.renderComponent(renderComponentType);
|
||||
this._renderStore.store(renderer, rendererId);
|
||||
}
|
||||
|
||||
private _createProtoView(componentTemplateId: string, cmds: RenderTemplateCmd[],
|
||||
refIndex: number) {
|
||||
var protoViewRef = this._renderer.createProtoView(componentTemplateId, cmds);
|
||||
this._renderProtoViewRefStore.store(protoViewRef, refIndex);
|
||||
private _selectRootElement(renderer: Renderer, selector: string, elId: number) {
|
||||
this._renderStore.store(renderer.selectRootElement(selector), elId);
|
||||
}
|
||||
|
||||
private _createRootHostView(ref: RenderProtoViewRef, fragmentCount: number, selector: string,
|
||||
startIndex: number) {
|
||||
var renderViewWithFragments = this._renderer.createRootHostView(ref, fragmentCount, selector);
|
||||
this._renderViewWithFragmentsStore.store(renderViewWithFragments, startIndex);
|
||||
private _createElement(renderer: Renderer, parentElement: any, name: string, elId: number) {
|
||||
this._renderStore.store(renderer.createElement(parentElement, name), elId);
|
||||
}
|
||||
|
||||
private _createView(ref: RenderProtoViewRef, fragmentCount: number, startIndex: number) {
|
||||
var renderViewWithFragments = this._renderer.createView(ref, fragmentCount);
|
||||
this._renderViewWithFragmentsStore.store(renderViewWithFragments, startIndex);
|
||||
private _createViewRoot(renderer: Renderer, hostElement: any, elId: number) {
|
||||
var viewRoot = renderer.createViewRoot(hostElement);
|
||||
if (this._renderStore.serialize(hostElement) !== elId) {
|
||||
this._renderStore.store(viewRoot, elId);
|
||||
}
|
||||
}
|
||||
|
||||
private _setEventDispatcher(viewRef: RenderViewRef) {
|
||||
var dispatcher = new EventDispatcher(viewRef, this._bus.to(EVENT_CHANNEL), this._serializer);
|
||||
this._renderer.setEventDispatcher(viewRef, dispatcher);
|
||||
private _createTemplateAnchor(renderer: Renderer, parentElement: any, elId: number) {
|
||||
this._renderStore.store(renderer.createTemplateAnchor(parentElement), elId);
|
||||
}
|
||||
|
||||
private _createText(renderer: Renderer, parentElement: any, value: string, elId: number) {
|
||||
this._renderStore.store(renderer.createText(parentElement, value), elId);
|
||||
}
|
||||
|
||||
private _projectNodes(renderer: Renderer, parentElement: any, nodes: any[]) {
|
||||
renderer.projectNodes(parentElement, nodes);
|
||||
}
|
||||
|
||||
private _attachViewAfter(renderer: Renderer, node: any, viewRootNodes: any[]) {
|
||||
renderer.attachViewAfter(node, viewRootNodes);
|
||||
}
|
||||
|
||||
private _detachView(renderer: Renderer, viewRootNodes: any[]) {
|
||||
renderer.detachView(viewRootNodes);
|
||||
}
|
||||
|
||||
private _destroyView(renderer: Renderer, hostElement: any, viewAllNodes: any[]) {
|
||||
renderer.destroyView(hostElement, viewAllNodes);
|
||||
for (var i = 0; i < viewAllNodes.length; i++) {
|
||||
this._renderStore.remove(viewAllNodes[i]);
|
||||
}
|
||||
}
|
||||
|
||||
private _setElementProperty(renderer: Renderer, renderElement: any, propertyName: string,
|
||||
propertyValue: any) {
|
||||
renderer.setElementProperty(renderElement, propertyName, propertyValue);
|
||||
}
|
||||
|
||||
private _setElementAttribute(renderer: Renderer, renderElement: any, attributeName: string,
|
||||
attributeValue: string) {
|
||||
renderer.setElementAttribute(renderElement, attributeName, attributeValue);
|
||||
}
|
||||
|
||||
private _setBindingDebugInfo(renderer: Renderer, renderElement: any, propertyName: string,
|
||||
propertyValue: string) {
|
||||
renderer.setBindingDebugInfo(renderElement, propertyName, propertyValue);
|
||||
}
|
||||
|
||||
private _setElementClass(renderer: Renderer, renderElement: any, className: string,
|
||||
isAdd: boolean) {
|
||||
renderer.setElementClass(renderElement, className, isAdd);
|
||||
}
|
||||
|
||||
private _setElementStyle(renderer: Renderer, renderElement: any, styleName: string,
|
||||
styleValue: string) {
|
||||
renderer.setElementStyle(renderElement, styleName, styleValue);
|
||||
}
|
||||
|
||||
private _invokeElementMethod(renderer: Renderer, renderElement: any, methodName: string,
|
||||
args: any[]) {
|
||||
renderer.invokeElementMethod(renderElement, methodName, args);
|
||||
}
|
||||
|
||||
private _setText(renderer: Renderer, renderNode: any, text: string) {
|
||||
renderer.setText(renderNode, text);
|
||||
}
|
||||
|
||||
private _listen(renderer: Renderer, renderElement: any, eventName: string) {
|
||||
renderer.listen(renderElement, eventName, (event) => this._eventDispatcher.dispatchRenderEvent(
|
||||
renderElement, null, eventName, event));
|
||||
}
|
||||
|
||||
private _listenGlobal(renderer: Renderer, eventTarget: string, eventName: string,
|
||||
unlistenId: number) {
|
||||
var unregisterCallback = renderer.listenGlobal(
|
||||
eventTarget, eventName,
|
||||
(event) => this._eventDispatcher.dispatchRenderEvent(null, eventTarget, eventName, event));
|
||||
this._renderStore.store(unregisterCallback, unlistenId);
|
||||
}
|
||||
|
||||
private _listenGlobalDone(renderer: Renderer, unlistenCallback: Function) { unlistenCallback(); }
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user