perf(view): inline and refactor view instantiation and hydration
- Don’t convert DOM array into JS array via `Array.slice` - Inline static methods for instantiation and hydration - Misc cleanup Closes #291
This commit is contained in:
parent
8acf9fb609
commit
3ec3d5e084
|
@ -54,7 +54,7 @@ export function documentDependentBindings(appComponentType) {
|
|||
// The light Dom of the app element is not considered part of
|
||||
// the angular application. Thus the context and lightDomInjector are
|
||||
// empty.
|
||||
var view = appProtoView.instantiate(null, true);
|
||||
var view = appProtoView.instantiate(null);
|
||||
view.hydrate(injector, null, new Object());
|
||||
return view;
|
||||
});
|
||||
|
|
|
@ -1,5 +1,5 @@
|
|||
import {int, isPresent, isBlank, Type, BaseException, stringify} from 'facade/lang';
|
||||
import {Element} from 'facade/dom';
|
||||
import {Element, DOM} from 'facade/dom';
|
||||
import {ListWrapper, List, MapWrapper, StringMapWrapper} from 'facade/collection';
|
||||
|
||||
import {reflector} from 'reflection/reflection';
|
||||
|
@ -74,7 +74,9 @@ export class ElementBinderBuilder extends CompileStep {
|
|||
|
||||
_bindElementProperties(protoView, compileElement) {
|
||||
MapWrapper.forEach(compileElement.propertyBindings, (expression, property) => {
|
||||
protoView.bindElementProperty(property, expression);
|
||||
if (DOM.hasProperty(compileElement.element, property)) {
|
||||
protoView.bindElementProperty(expression.ast, property, reflector.setter(property));
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
|
|
|
@ -16,6 +16,9 @@ import {OnChange} from './interfaces';
|
|||
import {ContextWithVariableBindings} from 'change_detection/parser/context_with_variable_bindings';
|
||||
|
||||
const NG_BINDING_CLASS = 'ng-binding';
|
||||
const NG_BINDING_CLASS_SELECTOR = '.ng-binding';
|
||||
// TODO(tbosch): Cannot use `const` because of Dart.
|
||||
var NO_FORMATTERS = MapWrapper.create();
|
||||
|
||||
/**
|
||||
* Const of making objects: http://jsperf.com/instantiate-size-of-object
|
||||
|
@ -36,34 +39,36 @@ export class View {
|
|||
preBuiltObjects: List<PreBuiltObjects>;
|
||||
proto: ProtoView;
|
||||
context: Object;
|
||||
_localBindings: Map;
|
||||
constructor(proto:ProtoView, nodes:List<Node>, elementInjectors:List,
|
||||
rootElementInjectors:List, textNodes:List, bindElements:List,
|
||||
protoRecordRange:ProtoRecordRange) {
|
||||
contextWithLocals:ContextWithVariableBindings;
|
||||
constructor(proto:ProtoView, nodes:List<Node>, protoRecordRange:ProtoRecordRange, protoContextLocals:Map) {
|
||||
this.proto = proto;
|
||||
this.nodes = nodes;
|
||||
this.elementInjectors = elementInjectors;
|
||||
this.rootElementInjectors = rootElementInjectors;
|
||||
this.textNodes = textNodes;
|
||||
this.bindElements = bindElements;
|
||||
this.recordRange = protoRecordRange.instantiate(this, MapWrapper.create());
|
||||
this.recordRange = protoRecordRange.instantiate(this, NO_FORMATTERS);
|
||||
this.elementInjectors = null;
|
||||
this.rootElementInjectors = null;
|
||||
this.textNodes = null;
|
||||
this.bindElements = null;
|
||||
this.componentChildViews = null;
|
||||
this.viewPorts = null;
|
||||
this.preBuiltObjects = null;
|
||||
this.context = null;
|
||||
|
||||
// used to persist the locals part of context inbetween hydrations.
|
||||
this._localBindings = null;
|
||||
if (isPresent(this.proto) && MapWrapper.size(this.proto.variableBindings) > 0) {
|
||||
this._createLocalContext();
|
||||
// contextWithLocals
|
||||
if (MapWrapper.size(protoContextLocals) > 0) {
|
||||
this.contextWithLocals = new ContextWithVariableBindings(null, MapWrapper.clone(protoContextLocals));
|
||||
} else {
|
||||
this.contextWithLocals = null;
|
||||
}
|
||||
}
|
||||
|
||||
_createLocalContext() {
|
||||
this._localBindings = MapWrapper.create();
|
||||
for (var [ctxName, tmplName] of MapWrapper.iterable(this.proto.variableBindings)) {
|
||||
MapWrapper.set(this._localBindings, tmplName, null);
|
||||
}
|
||||
init(elementInjectors:List, rootElementInjectors:List, textNodes: List, bindElements:List, viewPorts:List, preBuiltObjects:List, componentChildViews:List) {
|
||||
this.elementInjectors = elementInjectors;
|
||||
this.rootElementInjectors = rootElementInjectors;
|
||||
this.textNodes = textNodes;
|
||||
this.bindElements = bindElements;
|
||||
this.viewPorts = viewPorts;
|
||||
this.preBuiltObjects = preBuiltObjects;
|
||||
this.componentChildViews = componentChildViews;
|
||||
}
|
||||
|
||||
setLocal(contextName: string, value) {
|
||||
|
@ -81,16 +86,21 @@ export class View {
|
|||
}
|
||||
|
||||
_hydrateContext(newContext) {
|
||||
if (isPresent(this._localBindings)) {
|
||||
newContext = new ContextWithVariableBindings(newContext, this._localBindings);
|
||||
}
|
||||
this.recordRange.setContext(newContext);
|
||||
if (isPresent(this.contextWithLocals)) {
|
||||
this.contextWithLocals.parent = newContext;
|
||||
this.context = this.contextWithLocals;
|
||||
} else {
|
||||
this.context = newContext;
|
||||
}
|
||||
// TODO(tbosch): if we have a contextWithLocals we actually only need to
|
||||
// set the contextWithLocals once. Would it be faster to always use a contextWithLocals
|
||||
// even if we don't have locals and not update the recordRange here?
|
||||
this.recordRange.setContext(this.context);
|
||||
}
|
||||
|
||||
_dehydrateContext() {
|
||||
if (isPresent(this._localBindings)) {
|
||||
this.context.clearValues();
|
||||
if (isPresent(this.contextWithLocals)) {
|
||||
this.contextWithLocals.clearValues();
|
||||
}
|
||||
this.context = null;
|
||||
}
|
||||
|
@ -113,54 +123,67 @@ export class View {
|
|||
*/
|
||||
hydrate(appInjector: Injector, hostElementInjector: ElementInjector,
|
||||
context: Object) {
|
||||
if (isBlank(this.preBuiltObjects)) {
|
||||
throw new BaseException('Cannot hydrate a view without pre-built objects.');
|
||||
}
|
||||
if (this.hydrated()) throw new BaseException('The view is already hydrated.');
|
||||
this._hydrateContext(context);
|
||||
|
||||
var shadowDomAppInjectors = View._createShadowDomInjectors(
|
||||
this.proto, appInjector);
|
||||
// viewPorts
|
||||
for (var i = 0; i < this.viewPorts.length; i++) {
|
||||
this.viewPorts[i].hydrate(appInjector, hostElementInjector);
|
||||
}
|
||||
|
||||
this._hydrateViewPorts(appInjector, hostElementInjector);
|
||||
this._instantiateDirectives(appInjector, shadowDomAppInjectors);
|
||||
this._hydrateChildComponentViews(appInjector, shadowDomAppInjectors);
|
||||
var binders = this.proto.elementBinders;
|
||||
var componentChildViewIndex = 0;
|
||||
for (var i = 0; i < binders.length; ++i) {
|
||||
var componentDirective = binders[i].componentDirective;
|
||||
var shadowDomAppInjector = null;
|
||||
|
||||
// shadowDomAppInjector
|
||||
if (isPresent(componentDirective)) {
|
||||
var services = componentDirective.annotation.componentServices;
|
||||
if (isPresent(services))
|
||||
shadowDomAppInjector = appInjector.createChild(services);
|
||||
else {
|
||||
shadowDomAppInjector = appInjector;
|
||||
}
|
||||
} else {
|
||||
shadowDomAppInjector = null;
|
||||
}
|
||||
|
||||
// elementInjectors
|
||||
var elementInjector = this.elementInjectors[i];
|
||||
if (isPresent(elementInjector)) {
|
||||
elementInjector.instantiateDirectives(appInjector, shadowDomAppInjector, this.preBuiltObjects[i]);
|
||||
}
|
||||
|
||||
// componentChildViews
|
||||
if (isPresent(shadowDomAppInjector)) {
|
||||
this.componentChildViews[componentChildViewIndex++].hydrate(shadowDomAppInjector,
|
||||
elementInjector, elementInjector.getComponent());
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
dehydrate() {
|
||||
// preserve the opposite order of the hydration process.
|
||||
if (isPresent(this.componentChildViews)) {
|
||||
// Note: preserve the opposite order of the hydration process.
|
||||
|
||||
// componentChildViews
|
||||
for (var i = 0; i < this.componentChildViews.length; i++) {
|
||||
this.componentChildViews[i].dehydrate();
|
||||
}
|
||||
}
|
||||
|
||||
// elementInjectors
|
||||
for (var i = 0; i < this.elementInjectors.length; i++) {
|
||||
this.elementInjectors[i].clearDirectives();
|
||||
}
|
||||
|
||||
// viewPorts
|
||||
if (isPresent(this.viewPorts)) {
|
||||
for (var i = 0; i < this.viewPorts.length; i++) {
|
||||
this.viewPorts[i].dehydrate();
|
||||
}
|
||||
}
|
||||
this._dehydrateContext();
|
||||
}
|
||||
|
||||
static _createShadowDomInjectors(protoView, defaultInjector) {
|
||||
var binders = protoView.elementBinders;
|
||||
var shadowDomAppInjectors = ListWrapper.createFixedSize(binders.length);
|
||||
for (var i = 0; i < binders.length; ++i) {
|
||||
var componentDirective = binders[i].componentDirective;
|
||||
if (isPresent(componentDirective)) {
|
||||
var services = componentDirective.annotation.componentServices;
|
||||
if (isPresent(services))
|
||||
shadowDomAppInjectors[i] = defaultInjector.createChild(services);
|
||||
else {
|
||||
shadowDomAppInjectors[i] = defaultInjector;
|
||||
}
|
||||
} else {
|
||||
shadowDomAppInjectors[i] = null;
|
||||
}
|
||||
}
|
||||
return shadowDomAppInjectors;
|
||||
this._dehydrateContext();
|
||||
}
|
||||
|
||||
onRecordChange(groupMemento, records:List<Record>) {
|
||||
|
@ -211,48 +234,6 @@ export class View {
|
|||
}
|
||||
return changes;
|
||||
}
|
||||
|
||||
addViewPort(viewPort: ViewPort) {
|
||||
if (isBlank(this.viewPorts)) this.viewPorts = [];
|
||||
ListWrapper.push(this.viewPorts, viewPort);
|
||||
}
|
||||
|
||||
addComponentChildView(childView: View) {
|
||||
if (isBlank(this.componentChildViews)) this.componentChildViews = [];
|
||||
ListWrapper.push(this.componentChildViews, childView);
|
||||
this.recordRange.addRange(childView.recordRange);
|
||||
}
|
||||
|
||||
_instantiateDirectives(
|
||||
lightDomAppInjector: Injector, shadowDomAppInjectors) {
|
||||
for (var i = 0; i < this.elementInjectors.length; ++i) {
|
||||
var injector = this.elementInjectors[i];
|
||||
if (injector != null) {
|
||||
injector.instantiateDirectives(
|
||||
lightDomAppInjector, shadowDomAppInjectors[i], this.preBuiltObjects[i]);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
_hydrateViewPorts(appInjector, hostElementInjector) {
|
||||
if (isBlank(this.viewPorts)) return;
|
||||
for (var i = 0; i < this.viewPorts.length; i++) {
|
||||
this.viewPorts[i].hydrate(appInjector, hostElementInjector);
|
||||
}
|
||||
}
|
||||
|
||||
_hydrateChildComponentViews(appInjector, shadowDomAppInjectors) {
|
||||
var count = 0;
|
||||
for (var i = 0; i < shadowDomAppInjectors.length; i++) {
|
||||
var shadowDomInjector = shadowDomAppInjectors[i];
|
||||
var injector = this.elementInjectors[i];
|
||||
// replace with protoView.binder.
|
||||
if (isPresent(shadowDomAppInjectors[i])) {
|
||||
this.componentChildViews[count++].hydrate(shadowDomInjector,
|
||||
injector, injector.getComponent());
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
export class ProtoView {
|
||||
|
@ -260,64 +241,129 @@ export class ProtoView {
|
|||
elementBinders:List<ElementBinder>;
|
||||
protoRecordRange:ProtoRecordRange;
|
||||
variableBindings: Map;
|
||||
protoContextLocals:Map;
|
||||
textNodesWithBindingCount:int;
|
||||
elementsWithBindingCount:int;
|
||||
instantiateInPlace:boolean;
|
||||
rootBindingOffset:int;
|
||||
isTemplateElement:boolean;
|
||||
constructor(
|
||||
template:Element,
|
||||
protoRecordRange:ProtoRecordRange) {
|
||||
this.element = template;
|
||||
this.elementBinders = [];
|
||||
this.variableBindings = MapWrapper.create();
|
||||
this.protoContextLocals = MapWrapper.create();
|
||||
this.protoRecordRange = protoRecordRange;
|
||||
this.textNodesWithBindingCount = 0;
|
||||
this.elementsWithBindingCount = 0;
|
||||
this.instantiateInPlace = false;
|
||||
if (isPresent(this.element) && DOM.hasClass(this.element, NG_BINDING_CLASS)) {
|
||||
this.rootBindingOffset = 1;
|
||||
} else {
|
||||
this.rootBindingOffset = 0;
|
||||
}
|
||||
this.isTemplateElement = this.element instanceof TemplateElement;
|
||||
}
|
||||
|
||||
// TODO(rado): hostElementInjector should be moved to hydrate phase.
|
||||
// TODO(rado): inPlace is only used for bootstrapping, invastigate whether we can bootstrap without
|
||||
// rootProtoView.
|
||||
instantiate(hostElementInjector: ElementInjector, inPlace:boolean = false):View {
|
||||
var clone = inPlace ? this.element : DOM.clone(this.element);
|
||||
var elements;
|
||||
if (clone instanceof TemplateElement) {
|
||||
elements = ListWrapper.clone(DOM.querySelectorAll(clone.content, `.${NG_BINDING_CLASS}`));
|
||||
instantiate(hostElementInjector: ElementInjector):View {
|
||||
var rootElementClone = this.instantiateInPlace ? this.element : DOM.clone(this.element);
|
||||
var elementsWithBindings;
|
||||
if (this.isTemplateElement) {
|
||||
elementsWithBindings = DOM.querySelectorAll(rootElementClone.content, NG_BINDING_CLASS_SELECTOR);
|
||||
} else {
|
||||
elements = ListWrapper.clone(DOM.getElementsByClassName(clone, NG_BINDING_CLASS));
|
||||
elementsWithBindings = DOM.getElementsByClassName(rootElementClone, NG_BINDING_CLASS);
|
||||
}
|
||||
if (DOM.hasClass(clone, NG_BINDING_CLASS)) {
|
||||
ListWrapper.insert(elements, 0, clone);
|
||||
}
|
||||
var binders = this.elementBinders;
|
||||
|
||||
/**
|
||||
* TODO: vsavkin: benchmark
|
||||
* If this performs poorly, the seven loops can be collapsed into one.
|
||||
*/
|
||||
var elementInjectors = ProtoView._createElementInjectors(elements, binders, hostElementInjector);
|
||||
var rootElementInjectors = ProtoView._rootElementInjectors(elementInjectors);
|
||||
var textNodes = ProtoView._textNodes(elements, binders);
|
||||
var bindElements = ProtoView._bindElements(elements, binders);
|
||||
|
||||
var viewNodes;
|
||||
|
||||
if (clone instanceof TemplateElement) {
|
||||
viewNodes = ListWrapper.clone(clone.content.childNodes);
|
||||
} else {
|
||||
viewNodes = [clone];
|
||||
if (this.isTemplateElement) {
|
||||
var childNodes = rootElementClone.content.childNodes;
|
||||
// Note: An explicit loop is the fastes way to convert a DOM array into a JS array!
|
||||
viewNodes = ListWrapper.createFixedSize(childNodes.length);
|
||||
for (var i=0; i<childNodes.length; i++) {
|
||||
viewNodes[i] = childNodes[i];
|
||||
}
|
||||
var view = new View(this, viewNodes, elementInjectors, rootElementInjectors, textNodes,
|
||||
bindElements, this.protoRecordRange);
|
||||
} else {
|
||||
viewNodes = [rootElementClone];
|
||||
}
|
||||
var view = new View(this, viewNodes, this.protoRecordRange, this.protoContextLocals);
|
||||
|
||||
view.preBuiltObjects = ProtoView._createPreBuiltObjects(view, elementInjectors, elements, binders);
|
||||
var binders = this.elementBinders;
|
||||
var elementInjectors = ListWrapper.createFixedSize(binders.length);
|
||||
var rootElementInjectors = [];
|
||||
var textNodes = [];
|
||||
var elementsWithPropertyBindings = [];
|
||||
var preBuiltObjects = ListWrapper.createFixedSize(binders.length);
|
||||
var viewPorts = [];
|
||||
var componentChildViews = [];
|
||||
|
||||
ProtoView._instantiateChildComponentViews(view, elements, binders,
|
||||
elementInjectors);
|
||||
for (var i = 0; i < binders.length; i++) {
|
||||
var binder = binders[i];
|
||||
var element;
|
||||
if (i === 0 && this.rootBindingOffset === 1) {
|
||||
element = rootElementClone;
|
||||
} else {
|
||||
element = elementsWithBindings[i - this.rootBindingOffset];
|
||||
}
|
||||
var elementInjector = null;
|
||||
|
||||
// elementInjectors and rootElementInjectors
|
||||
var protoElementInjector = binder.protoElementInjector;
|
||||
if (isPresent(protoElementInjector)) {
|
||||
var parentElementInjector = isPresent(protoElementInjector.parent) ? elementInjectors[protoElementInjector.parent.index] : null;
|
||||
elementInjector = protoElementInjector.instantiate(parentElementInjector, hostElementInjector);
|
||||
if (isBlank(parentElementInjector)) {
|
||||
ListWrapper.push(rootElementInjectors, elementInjector);
|
||||
}
|
||||
}
|
||||
elementInjectors[i] = elementInjector;
|
||||
|
||||
// viewPorts
|
||||
var viewPort = null;
|
||||
if (isPresent(binder.templateDirective)) {
|
||||
viewPort = new ViewPort(view, element, binder.nestedProtoView, elementInjector);
|
||||
ListWrapper.push(viewPorts, viewPort);
|
||||
}
|
||||
|
||||
// preBuiltObjects
|
||||
var preBuiltObject = null;
|
||||
if (isPresent(elementInjector)) {
|
||||
preBuiltObject = new PreBuiltObjects(view, new NgElement(element), viewPort);
|
||||
}
|
||||
preBuiltObjects[i] = preBuiltObject;
|
||||
|
||||
// elementsWithPropertyBindings
|
||||
if (binder.hasElementPropertyBindings) {
|
||||
ListWrapper.push(elementsWithPropertyBindings, element);
|
||||
}
|
||||
|
||||
// textNodes
|
||||
var textNodeIndices = binder.textNodeIndices;
|
||||
if (isPresent(textNodeIndices)) {
|
||||
var childNodes = DOM.templateAwareRoot(element).childNodes;
|
||||
for (var j = 0; j < textNodeIndices.length; j++) {
|
||||
ListWrapper.push(textNodes, childNodes[textNodeIndices[j]]);
|
||||
}
|
||||
}
|
||||
|
||||
// componentChildViews
|
||||
if (isPresent(binder.componentDirective)) {
|
||||
var childView = binder.nestedProtoView.instantiate(elementInjector);
|
||||
view.recordRange.addRange(childView.recordRange);
|
||||
ViewPort.moveViewNodesIntoParent(element.createShadowRoot(), childView);
|
||||
ListWrapper.push(componentChildViews, childView);
|
||||
}
|
||||
}
|
||||
|
||||
view.init(elementInjectors, rootElementInjectors, textNodes, elementsWithPropertyBindings,
|
||||
viewPorts, preBuiltObjects, componentChildViews);
|
||||
|
||||
return view;
|
||||
}
|
||||
|
||||
bindVariable(contextName:string, templateName:string) {
|
||||
MapWrapper.set(this.variableBindings, contextName, templateName);
|
||||
MapWrapper.set(this.protoContextLocals, templateName, null);
|
||||
}
|
||||
|
||||
bindElement(protoElementInjector:ProtoElementInjector,
|
||||
|
@ -343,13 +389,13 @@ export class ProtoView {
|
|||
/**
|
||||
* Adds an element property binding for the last created ElementBinder via bindElement
|
||||
*/
|
||||
bindElementProperty(propertyName:string, expression:AST) {
|
||||
bindElementProperty(expression:AST, setterName:string, setter:SetterFn) {
|
||||
var elBinder = this.elementBinders[this.elementBinders.length-1];
|
||||
if (!elBinder.hasElementPropertyBindings) {
|
||||
elBinder.hasElementPropertyBindings = true;
|
||||
this.elementsWithBindingCount++;
|
||||
}
|
||||
var memento = new ElementPropertyMemento(this.elementsWithBindingCount-1, propertyName);
|
||||
var memento = new ElementPropertyMemento(this.elementsWithBindingCount-1, setterName, setter);
|
||||
this.protoRecordRange.addRecordsFromAST(expression, memento, memento);
|
||||
}
|
||||
|
||||
|
@ -383,113 +429,35 @@ export class ProtoView {
|
|||
this.protoRecordRange.addRecordsFromAST(expression, expMemento, groupMemento, false);
|
||||
}
|
||||
|
||||
static _createElementInjectors(elements, binders, hostElementInjector) {
|
||||
var injectors = ListWrapper.createFixedSize(binders.length);
|
||||
for (var i = 0; i < binders.length; ++i) {
|
||||
var proto = binders[i].protoElementInjector;
|
||||
if (isPresent(proto)) {
|
||||
var parentElementInjector = isPresent(proto.parent) ? injectors[proto.parent.index] : null;
|
||||
injectors[i] = proto.instantiate(parentElementInjector, hostElementInjector);
|
||||
} else {
|
||||
injectors[i] = null;
|
||||
}
|
||||
}
|
||||
return injectors;
|
||||
}
|
||||
|
||||
static _createPreBuiltObjects(view, injectors, elements, binders) {
|
||||
var preBuiltObjects = ListWrapper.createFixedSize(binders.length);
|
||||
for (var i = 0; i < injectors.length; ++i) {
|
||||
var injector = injectors[i];
|
||||
if (injector != null) {
|
||||
var binder = binders[i];
|
||||
var element = elements[i];
|
||||
var ngElement = new NgElement(element);
|
||||
var viewPort = null;
|
||||
if (isPresent(binder.templateDirective)) {
|
||||
viewPort = new ViewPort(view, element, binder.nestedProtoView, injector);
|
||||
view.addViewPort(viewPort);
|
||||
}
|
||||
preBuiltObjects[i] = new PreBuiltObjects(view, ngElement, viewPort);
|
||||
} else {
|
||||
preBuiltObjects[i] = null;
|
||||
}
|
||||
}
|
||||
return preBuiltObjects;
|
||||
}
|
||||
|
||||
|
||||
static _rootElementInjectors(injectors) {
|
||||
return ListWrapper.filter(injectors, inj => isPresent(inj) && isBlank(inj.parent));
|
||||
}
|
||||
|
||||
static _textNodes(elements, binders) {
|
||||
var textNodes = [];
|
||||
for (var i = 0; i < binders.length; ++i) {
|
||||
ProtoView._collectTextNodes(textNodes, elements[i],
|
||||
binders[i].textNodeIndices);
|
||||
}
|
||||
return textNodes;
|
||||
}
|
||||
|
||||
static _bindElements(elements, binders):List<Element> {
|
||||
var bindElements = [];
|
||||
for (var i = 0; i < binders.length; ++i) {
|
||||
if (binders[i].hasElementPropertyBindings) ListWrapper.push(
|
||||
bindElements, elements[i]);
|
||||
}
|
||||
return bindElements;
|
||||
}
|
||||
|
||||
static _collectTextNodes(allTextNodes, element, indices) {
|
||||
if (isPresent(indices)) {
|
||||
var childNodes = DOM.templateAwareRoot(element).childNodes;
|
||||
for (var i = 0; i < indices.length; ++i) {
|
||||
ListWrapper.push(allTextNodes, childNodes[indices[i]]);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
static _instantiateChildComponentViews(view: View, elements, binders,
|
||||
injectors) {
|
||||
for (var i = 0; i < binders.length; ++i) {
|
||||
var binder = binders[i];
|
||||
if (isPresent(binder.componentDirective)) {
|
||||
var injector = injectors[i];
|
||||
var childView = binder.nestedProtoView.instantiate(injectors[i]);
|
||||
view.addComponentChildView(childView);
|
||||
var shadowRoot = elements[i].createShadowRoot();
|
||||
ViewPort.moveViewNodesIntoParent(shadowRoot, childView);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Create a rootView as if the compiler encountered <rootcmp></rootcmp>,
|
||||
// and the component template is already compiled into protoView.
|
||||
// Used for bootstrapping.
|
||||
static createRootProtoView(protoView: ProtoView,
|
||||
insertionElement, rootComponentAnnotatedType: AnnotatedType): ProtoView {
|
||||
DOM.addClass(insertionElement, 'ng-binding');
|
||||
var rootProtoView = new ProtoView(insertionElement, new ProtoRecordRange());
|
||||
rootProtoView.instantiateInPlace = true;
|
||||
var binder = rootProtoView.bindElement(
|
||||
new ProtoElementInjector(null, 0, [rootComponentAnnotatedType.type], true));
|
||||
binder.componentDirective = rootComponentAnnotatedType;
|
||||
binder.nestedProtoView = protoView;
|
||||
DOM.addClass(insertionElement, 'ng-binding');
|
||||
return rootProtoView;
|
||||
}
|
||||
}
|
||||
|
||||
export class ElementPropertyMemento {
|
||||
_elementIndex:int;
|
||||
_propertyName:string;
|
||||
constructor(elementIndex:int, propertyName:string) {
|
||||
_setterName:string;
|
||||
_setter:SetterFn;
|
||||
constructor(elementIndex:int, setterName:string, setter:SetterFn) {
|
||||
this._elementIndex = elementIndex;
|
||||
this._propertyName = propertyName;
|
||||
this._setterName = setterName;
|
||||
this._setter = setter;
|
||||
}
|
||||
|
||||
invoke(record:Record, bindElements:List<Element>) {
|
||||
var element:Element = bindElements[this._elementIndex];
|
||||
DOM.setProperty(element, this._propertyName, record.currentValue);
|
||||
this._setter(element, record.currentValue);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
@ -12,7 +12,7 @@ import {NgElement} from 'core/dom/element';
|
|||
//TODO: vsavkin: use a spy object
|
||||
class DummyView extends View {
|
||||
constructor() {
|
||||
super(null, null, null, null, null, null, new ProtoRecordRange());
|
||||
super(null, null, new ProtoRecordRange(), MapWrapper.create());
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
@ -32,12 +32,6 @@ export function main() {
|
|||
var parser = new Parser(new Lexer());
|
||||
return new CompilePipeline([
|
||||
new MockStep((parent, current, control) => {
|
||||
if (isPresent(current.element.getAttribute('viewroot'))) {
|
||||
current.isViewRoot = true;
|
||||
current.inheritedProtoView = new ProtoView(current.element, new ProtoRecordRange());
|
||||
} else if (isPresent(parent)) {
|
||||
current.inheritedProtoView = parent.inheritedProtoView;
|
||||
}
|
||||
var hasBinding = false;
|
||||
if (isPresent(current.element.getAttribute('text-binding'))) {
|
||||
MapWrapper.forEach(textNodeBindings, (v,k) => {
|
||||
|
@ -72,6 +66,12 @@ export function main() {
|
|||
current.hasBindings = true;
|
||||
DOM.addClass(current.element, 'ng-binding');
|
||||
}
|
||||
if (isPresent(current.element.getAttribute('viewroot'))) {
|
||||
current.isViewRoot = true;
|
||||
current.inheritedProtoView = new ProtoView(current.element, new ProtoRecordRange());
|
||||
} else if (isPresent(parent)) {
|
||||
current.inheritedProtoView = parent.inheritedProtoView;
|
||||
}
|
||||
}), new ElementBinderBuilder()
|
||||
]);
|
||||
}
|
||||
|
@ -159,22 +159,22 @@ export function main() {
|
|||
|
||||
it('should bind element properties', () => {
|
||||
var propertyBindings = MapWrapper.createFromStringMap({
|
||||
'elprop1': 'prop1',
|
||||
'elprop2': 'prop2'
|
||||
'value': 'prop1',
|
||||
'hidden': 'prop2'
|
||||
});
|
||||
var pipeline = createPipeline({propertyBindings: propertyBindings});
|
||||
var results = pipeline.process(createElement('<div viewroot prop-binding></div>'));
|
||||
var results = pipeline.process(createElement('<input viewroot prop-binding>'));
|
||||
var pv = results[0].inheritedProtoView;
|
||||
|
||||
expect(pv.elementBinders[0].hasElementPropertyBindings).toBe(true);
|
||||
|
||||
instantiateView(pv);
|
||||
evalContext.prop1 = 'a';
|
||||
evalContext.prop2 = 'b';
|
||||
evalContext.prop2 = false;
|
||||
changeDetector.detectChanges();
|
||||
|
||||
expect(DOM.getProperty(view.nodes[0], 'elprop1')).toEqual('a');
|
||||
expect(DOM.getProperty(view.nodes[0], 'elprop2')).toEqual('b');
|
||||
expect(view.nodes[0].value).toEqual('a');
|
||||
expect(view.nodes[0].hidden).toEqual(false);
|
||||
});
|
||||
|
||||
it('should bind events', () => {
|
||||
|
|
|
@ -105,7 +105,7 @@ export function main() {
|
|||
it('should collect property bindings on the root element if it has the ng-binding class', () => {
|
||||
var pv = new ProtoView(templateAwareCreateElement('<div [prop]="a" class="ng-binding"></div>'), new ProtoRecordRange());
|
||||
pv.bindElement(null);
|
||||
pv.bindElementProperty('prop', parser.parseBinding('a'));
|
||||
pv.bindElementProperty(parser.parseBinding('a').ast, 'prop', reflector.setter('prop'));
|
||||
|
||||
var view = pv.instantiate(null);
|
||||
view.hydrate(null, null, null);
|
||||
|
@ -117,7 +117,7 @@ export function main() {
|
|||
var pv = new ProtoView(templateAwareCreateElement('<div><span></span><span class="ng-binding"></span></div>'),
|
||||
new ProtoRecordRange());
|
||||
pv.bindElement(null);
|
||||
pv.bindElementProperty('a', parser.parseBinding('b'));
|
||||
pv.bindElementProperty(parser.parseBinding('b').ast, 'a', reflector.setter('a'));
|
||||
|
||||
var view = pv.instantiate(null);
|
||||
view.hydrate(null, null, null);
|
||||
|
@ -159,9 +159,10 @@ export function main() {
|
|||
|
||||
describe('inplace instantiation', () => {
|
||||
it('should be supported.', () => {
|
||||
var template = createElement('<div></div>')
|
||||
var view = new ProtoView(template, new ProtoRecordRange())
|
||||
.instantiate(null, true);
|
||||
var template = createElement('<div></div>');
|
||||
var pv = new ProtoView(template, new ProtoRecordRange());
|
||||
pv.instantiateInPlace = true;
|
||||
var view = pv.instantiate(null);
|
||||
view.hydrate(null, null, null);
|
||||
expect(view.nodes[0]).toBe(template);
|
||||
});
|
||||
|
@ -369,7 +370,7 @@ export function main() {
|
|||
var pv = new ProtoView(createElement('<div class="ng-binding"></div>'),
|
||||
new ProtoRecordRange());
|
||||
pv.bindElement(null);
|
||||
pv.bindElementProperty('id', parser.parseBinding('foo'));
|
||||
pv.bindElementProperty(parser.parseBinding('foo').ast, 'id', reflector.setter('id'));
|
||||
createViewAndChangeDetector(pv);
|
||||
|
||||
ctx.foo = 'buz';
|
||||
|
@ -437,14 +438,14 @@ export function main() {
|
|||
|
||||
it('should create the root component when instantiated', () => {
|
||||
var rootProtoView = ProtoView.createRootProtoView(pv, el, someComponentDirective);
|
||||
var view = rootProtoView.instantiate(null, true);
|
||||
var view = rootProtoView.instantiate(null);
|
||||
view.hydrate(new Injector([]), null, null);
|
||||
expect(view.rootElementInjectors[0].get(SomeComponent)).not.toBe(null);
|
||||
});
|
||||
|
||||
it('should inject the protoView into the shadowDom', () => {
|
||||
var rootProtoView = ProtoView.createRootProtoView(pv, el, someComponentDirective);
|
||||
var view = rootProtoView.instantiate(null, true);
|
||||
var view = rootProtoView.instantiate(null);
|
||||
view.hydrate(new Injector([]), null, null);
|
||||
expect(el.shadowRoot.childNodes[0].childNodes[0].nodeValue).toEqual('hi');
|
||||
});
|
||||
|
|
|
@ -14,7 +14,9 @@ function createElement(html) {
|
|||
}
|
||||
|
||||
function createView(nodes) {
|
||||
return new View(null, nodes, [], [], [], [], new ProtoRecordRange());
|
||||
var view = new View(null, nodes, new ProtoRecordRange(), MapWrapper.create());
|
||||
view.init([], [], [], [], [], [], []);
|
||||
return view;
|
||||
}
|
||||
|
||||
export function main() {
|
||||
|
|
|
@ -32,6 +32,7 @@ class IterableMap extends IterableBase<List> {
|
|||
|
||||
class MapWrapper {
|
||||
static HashMap create() => new HashMap();
|
||||
static HashMap clone(Map m) => new HashMap.from(m);
|
||||
static HashMap createFromStringMap(m) => m;
|
||||
static HashMap createFromPairs(List pairs) {
|
||||
return pairs.fold({}, (m, p){
|
||||
|
|
|
@ -6,6 +6,7 @@ export var Set = window.Set;
|
|||
|
||||
export class MapWrapper {
|
||||
static create():Map { return new Map(); }
|
||||
static clone(m:Map):Map { return new Map(m); }
|
||||
static createFromStringMap(stringMap):Map {
|
||||
var result = MapWrapper.create();
|
||||
for (var prop in stringMap) {
|
||||
|
@ -63,8 +64,8 @@ export class ListWrapper {
|
|||
static createFixedSize(size):List { return new List(size); }
|
||||
static get(m, k) { return m[k]; }
|
||||
static set(m, k, v) { m[k] = v; }
|
||||
static clone(array) {
|
||||
return Array.prototype.slice.call(array, 0);
|
||||
static clone(array:List) {
|
||||
return array.slice(0);
|
||||
}
|
||||
static map(array, fn) {
|
||||
return array.map(fn);
|
||||
|
|
|
@ -68,11 +68,8 @@ class DOM {
|
|||
static clone(Node node) {
|
||||
return node.clone(true);
|
||||
}
|
||||
static setProperty(Element element, String name, value) {
|
||||
new JsObject.fromBrowserObject(element)[name] = value;
|
||||
}
|
||||
static getProperty(Element element, String name) {
|
||||
return new JsObject.fromBrowserObject(element)[name];
|
||||
static hasProperty(Element element, String name) {
|
||||
return new JsObject.fromBrowserObject(element).hasProperty(name);
|
||||
}
|
||||
static getElementsByClassName(Element element, String name) {
|
||||
return element.getElementsByClassName(name);
|
||||
|
|
|
@ -63,11 +63,8 @@ export class DOM {
|
|||
static clone(node:Node) {
|
||||
return node.cloneNode(true);
|
||||
}
|
||||
static setProperty(element:Element, name:string, value) {
|
||||
element[name] = value;
|
||||
}
|
||||
static getProperty(element:Element, name:string) {
|
||||
return element[name];
|
||||
static hasProperty(element:Element, name:string) {
|
||||
return name in element;
|
||||
}
|
||||
static getElementsByClassName(element:Element, name:string) {
|
||||
return element.getElementsByClassName(name);
|
||||
|
|
Loading…
Reference in New Issue