feat(change_detection): added changeDetection to Component

This commit is contained in:
vsavkin 2015-03-30 16:54:10 -07:00
parent a11f683e7b
commit 514ba54282
20 changed files with 210 additions and 194 deletions

View File

@ -5,9 +5,9 @@ export {Locals}
from './src/change_detection/parser/locals';
export {ExpressionChangedAfterItHasBeenChecked, ChangeDetectionError}
from './src/change_detection/exceptions';
export {ChangeRecord, ChangeDispatcher, ChangeDetector,
CHECK_ONCE, CHECK_ALWAYS, DETACHED, CHECKED} from './src/change_detection/interfaces';
export {ProtoChangeDetector, DynamicProtoChangeDetector, JitProtoChangeDetector, BindingRecord}
export {ProtoChangeDetector, ChangeRecord, ChangeDispatcher, ChangeDetector, ChangeDetection} from './src/change_detection/interfaces';
export {CHECK_ONCE, CHECK_ALWAYS, DETACHED, CHECKED, ON_PUSH, DEFAULT} from './src/change_detection/constants';
export {DynamicProtoChangeDetector, JitProtoChangeDetector, BindingRecord}
from './src/change_detection/proto_change_detector';
export {DynamicChangeDetector}
from './src/change_detection/dynamic_change_detector';
@ -17,19 +17,14 @@ export * from './src/change_detection/pipes/pipe_registry';
export {uninitialized} from './src/change_detection/change_detection_util';
export * from './src/change_detection/pipes/pipe';
import {ProtoChangeDetector, DynamicProtoChangeDetector, JitProtoChangeDetector}
import {DynamicProtoChangeDetector, JitProtoChangeDetector}
from './src/change_detection/proto_change_detector';
import {PipeRegistry} from './src/change_detection/pipes/pipe_registry';
import {IterableChangesFactory} from './src/change_detection/pipes/iterable_changes';
import {KeyValueChangesFactory} from './src/change_detection/pipes/keyvalue_changes';
import {NullPipeFactory} from './src/change_detection/pipes/null_pipe';
export class ChangeDetection {
createProtoChangeDetector(name:string):ProtoChangeDetector{
// TODO: this should be abstract, once supported in AtScript
return null;
}
}
import {DEFAULT} from './src/change_detection/constants';
import {ChangeDetection, ProtoChangeDetector} from './src/change_detection/interfaces';
export var defaultPipes = {
"iterableDiff" : [
@ -50,8 +45,8 @@ export class DynamicChangeDetection extends ChangeDetection {
this.registry = registry;
}
createProtoChangeDetector(name:string):ProtoChangeDetector{
return new DynamicProtoChangeDetector(this.registry);
createProtoChangeDetector(name:string, changeControlStrategy:string = DEFAULT):ProtoChangeDetector{
return new DynamicProtoChangeDetector(this.registry, changeControlStrategy);
}
}
@ -63,8 +58,8 @@ export class JitChangeDetection extends ChangeDetection {
this.registry = registry;
}
createProtoChangeDetector(name:string):ProtoChangeDetector{
return new JitProtoChangeDetector(this.registry);
createProtoChangeDetector(name:string, changeControlStrategy:string = DEFAULT):ProtoChangeDetector{
return new JitProtoChangeDetector(this.registry, changeControlStrategy);
}
}

View File

@ -1,7 +1,8 @@
import {isPresent} from 'angular2/src/facade/lang';
import {List, ListWrapper} from 'angular2/src/facade/collection';
import {BindingPropagationConfig} from './binding_propagation_config';
import {ChangeDetector, CHECK_ALWAYS, CHECK_ONCE, CHECKED, DETACHED} from './interfaces';
import {ChangeDetector} from './interfaces';
import {CHECK_ALWAYS, CHECK_ONCE, CHECKED, DETACHED, ON_PUSH} from './constants';
export class AbstractChangeDetector extends ChangeDetector {
lightDomChildren:List;
@ -15,7 +16,7 @@ export class AbstractChangeDetector extends ChangeDetector {
this.lightDomChildren = [];
this.shadowDomChildren = [];
this.bindingPropagationConfig = new BindingPropagationConfig(this);
this.mode = CHECK_ALWAYS;
this.mode = null;
}
addChild(cd:ChangeDetector) {

View File

@ -1,4 +1,5 @@
import {ChangeDetector, CHECK_ONCE, DETACHED, CHECK_ALWAYS} from './interfaces';
import {ChangeDetector} from './interfaces';
import {CHECK_ONCE, DETACHED, CHECK_ALWAYS} from './constants';
/**
* @publicModule angular2/angular2

View File

@ -1,7 +1,7 @@
library change_detectoin.change_detection_jit_generator;
class ChangeDetectorJITGenerator {
ChangeDetectorJITGenerator(typeName, records, directiveMementos) {
ChangeDetectorJITGenerator(typeName, strategy, records, directiveMementos) {
}
generate() {

View File

@ -24,74 +24,10 @@ import {
* that "emulates" what the developer would write by hand to implement the same
* kind of behaviour.
*
* For example: An expression `address.city` will result in the following class:
*
* var ChangeDetector0 = function ChangeDetector0(dispatcher, protos) {
* AbstractChangeDetector.call(this);
* this.dispatcher = dispatcher;
* this.protos = protos;
*
* this.context = ChangeDetectionUtil.unitialized();
* this.address0 = ChangeDetectionUtil.unitialized();
* this.city1 = ChangeDetectionUtil.unitialized();
* }
* ChangeDetector0.prototype = Object.create(AbstractChangeDetector.prototype);
*
* ChangeDetector0.prototype.detectChangesInRecords = function(throwOnChange) {
* var address0;
* var city1;
* var change;
* var changes = null;
* var temp;
* var context = this.context;
*
* address0 = context.address;
* if (address0 !== this.address0) {
* this.address0 = address0;
* }
*
* city1 = address0.city;
* if (city1 !== this.city1) {
* changes = ChangeDetectionUtil.addRecord(changes,
* ChangeDetectionUtil.simpleChangeRecord(this.protos[1].bindingMemento, this.city1, city1));
* this.city1 = city1;
* }
*
* if (changes.length > 0) {
* if(throwOnChange) ChangeDetectionUtil.throwOnChange(this.protos[1], changes[0]);
* this.dispatcher.onRecordChange('address.city', changes);
* changes = null;
* }
* }
*
* ChangeDetector0.prototype.callOnAllChangesDone = function() {}
*
* ChangeDetector0.prototype.hydrate = function(context, locals) {
* this.context = context;
* this.locals = locals;
* }
*
* ChangeDetector0.prototype.dehydrate = function(context) {
* this.context = ChangeDetectionUtil.unitialized();
* this.address0 = ChangeDetectionUtil.unitialized();
* this.city1 = ChangeDetectionUtil.unitialized();
* this.locals = null;
* }
*
* ChangeDetector0.prototype.hydrated = function() {
* return this.context !== ChangeDetectionUtil.unitialized();
* }
*
* return ChangeDetector0;
*
*
* The only thing the generated class depends on is the super class AbstractChangeDetector.
*
* The implementation comprises two parts:
* * ChangeDetectorJITGenerator has the logic of how everything fits together.
* * template functions (e.g., constructorTemplate) define what code is generated.
*/
var ABSTRACT_CHANGE_DETECTOR = "AbstractChangeDetector";
var UTIL = "ChangeDetectionUtil";
var DISPATCHER_ACCESSOR = "this.dispatcher";
@ -102,6 +38,7 @@ var CONTEXT_ACCESSOR = "this.context";
var CHANGE_LOCAL = "change";
var CHANGES_LOCAL = "changes";
var LOCALS_ACCESSOR = "this.locals";
var MODE_ACCESSOR = "this.mode";
var TEMP_LOCAL = "temp";
function typeTemplate(type:string, cons:string, detectChanges:string,
@ -137,9 +74,10 @@ function pipeOnDestroyTemplate(pipeNames:List) {
return pipeNames.map((p) => `${p}.onDestroy()`).join("\n");
}
function hydrateTemplate(type:string, fieldsDefinitions:string, pipeOnDestroy:string):string {
function hydrateTemplate(type:string, mode:string, fieldsDefinitions:string, pipeOnDestroy:string):string {
return `
${type}.prototype.hydrate = function(context, locals) {
${MODE_ACCESSOR} = "${mode}";
${CONTEXT_ACCESSOR} = context;
${LOCALS_ACCESSOR} = locals;
}
@ -265,13 +203,15 @@ export class ChangeDetectorJITGenerator {
typeName:string;
records:List<ProtoRecord>;
directiveMementos:List;
localNames:List<String>;
changeNames:List<String>;
fieldNames:List<String>;
pipeNames:List<String>;
localNames:List<string>;
changeNames:List<string>;
fieldNames:List<string>;
pipeNames:List<string>;
changeDetectionStrategy:stirng;
constructor(typeName:string, records:List<ProtoRecord>, directiveMementos:List) {
constructor(typeName:string, changeDetectionStrategy:string, records:List<ProtoRecord>, directiveMementos:List) {
this.typeName = typeName;
this.changeDetectionStrategy = changeDetectionStrategy;
this.records = records;
this.directiveMementos = directiveMementos;
@ -281,7 +221,7 @@ export class ChangeDetectorJITGenerator {
this.pipeNames = this.getPipeNames(this.localNames);
}
getLocalNames(records:List<ProtoRecord>):List<String> {
getLocalNames(records:List<ProtoRecord>):List<string> {
var index = 0;
var names = records.map((r) => {
var sanitizedName = r.name.replace(new RegExp("\\W", "g"), '');
@ -290,15 +230,15 @@ export class ChangeDetectorJITGenerator {
return ["context"].concat(names);
}
getChangeNames(localNames:List<String>):List<String> {
getChangeNames(localNames:List<string>):List<string> {
return localNames.map((n) => `change_${n}`);
}
getFieldNames(localNames:List<String>):List<String> {
getFieldNames(localNames:List<string>):List<string> {
return localNames.map((n) => `this.${n}`);
}
getPipeNames(localNames:List<String>):List<String> {
getPipeNames(localNames:List<string>):List<string> {
return localNames.map((n) => `this.${n}_pipe`);
}
@ -314,7 +254,8 @@ export class ChangeDetectorJITGenerator {
}
genHydrate():string {
return hydrateTemplate(this.typeName, this.genFieldDefinitions(),
var mode = ChangeDetectionUtil.changeDetectionMode(this.changeDetectionStrategy);
return hydrateTemplate(this.typeName, mode, this.genFieldDefinitions(),
pipeOnDestroyTemplate(this.getNonNullPipeNames()));
}
@ -325,7 +266,7 @@ export class ChangeDetectorJITGenerator {
return fieldDefinitionsTemplate(fields);
}
getNonNullPipeNames():List<String> {
getNonNullPipeNames():List<string> {
var pipes = [];
this.records.forEach((r) => {
if (r.mode === RECORD_TYPE_PIPE || r.mode === RECORD_TYPE_BINDING_PIPE) {

View File

@ -3,7 +3,8 @@ import {List, ListWrapper, MapWrapper, StringMapWrapper} from 'angular2/src/faca
import {ProtoRecord} from './proto_record';
import {ExpressionChangedAfterItHasBeenChecked} from './exceptions';
import {NO_CHANGE} from './pipes/pipe';
import {ChangeRecord, ChangeDetector, CHECK_ALWAYS, CHECK_ONCE, CHECKED, DETACHED} from './interfaces';
import {ChangeRecord, ChangeDetector} from './interfaces';
import {CHECK_ALWAYS, CHECK_ONCE, CHECKED, DETACHED, ON_PUSH} from './constants';
export var uninitialized = new Object();
@ -163,6 +164,10 @@ export class ChangeDetectionUtil {
return _changeRecord(memento, _simpleChange(previousValue, currentValue));
}
static changeDetectionMode(strategy:string) {
return strategy == ON_PUSH ? CHECK_ONCE : CHECK_ALWAYS;
}
static addRecord(updatedRecords:List, changeRecord:ChangeRecord):List {
if (isBlank(updatedRecords)) {
updatedRecords = _singleElementList;

View File

@ -0,0 +1,35 @@
//TODO:vsavkin Use enums after switching to TypeScript
/**
* CHECK_ONCE means that after calling detectChanges the mode of the change detector
* will become CHECKED.
*/
export const CHECK_ONCE="CHECK_ONCE";
/**
* CHECKED means that the change detector should be skipped until its mode changes to
* CHECK_ONCE or CHECK_ALWAYS.
*/
export const CHECKED="CHECKED";
/**
* CHECK_ALWAYS means that after calling detectChanges the mode of the change detector
* will remain CHECK_ALWAYS.
*/
export const CHECK_ALWAYS="ALWAYS_CHECK";
/**
* DETACHED means that the change detector sub tree is not a part of the main tree and
* should be skipped.
*/
export const DETACHED="DETACHED";
/**
* ON_PUSH means that the change detector's mode will be set to CHECK_ONCE during hydration.
*/
export const ON_PUSH = "ON_PUSH";
/**
* DEFAULT means that the change detector's mode will be set to CHECK_ALWAYS during hydration.
*/
export const DEFAULT = "DEFAULT";

View File

@ -35,8 +35,10 @@ export class DynamicChangeDetector extends AbstractChangeDetector {
protos:List<ProtoRecord>;
directiveMementos:List;
changeControlStrategy:string;
constructor(dispatcher:any, pipeRegistry:PipeRegistry, protoRecords:List<ProtoRecord>, directiveMementos:List) {
constructor(changeControlStrategy:string, dispatcher:any, pipeRegistry:PipeRegistry,
protoRecords:List<ProtoRecord>, directiveMementos:List) {
super();
this.dispatcher = dispatcher;
this.pipeRegistry = pipeRegistry;
@ -54,9 +56,11 @@ export class DynamicChangeDetector extends AbstractChangeDetector {
this.protos = protoRecords;
this.directiveMementos = directiveMementos;
this.changeControlStrategy = changeControlStrategy;
}
hydrate(context:any, locals:any) {
this.mode = ChangeDetectionUtil.changeDetectionMode(this.changeControlStrategy);
this.values[0] = context;
this.locals = locals;
}

View File

@ -1,5 +1,19 @@
import {List} from 'angular2/src/facade/collection';
import {Locals} from './parser/locals';
import {AST} from './parser/ast';
export class ProtoChangeDetector {
addAst(ast:AST, bindingMemento:any, directiveMemento:any = null){}
instantiate(dispatcher:any, bindingRecords:List, variableBindings:List, directiveMemento:List):ChangeDetector{
return null;
}
}
export class ChangeDetection {
createProtoChangeDetector(name:string, changeControlStrategy:string):ProtoChangeDetector{
return null;
}
}
export class ChangeRecord {
bindingMemento:any;
@ -20,31 +34,6 @@ export class ChangeRecord {
}
}
/**
* CHECK_ONCE means that after calling detectChanges the mode of the change detector
* will become CHECKED.
*/
export const CHECK_ONCE="CHECK_ONCE";
/**
* CHECKED means that the change detector should be skipped until its mode changes to
* CHECK_ONCE or CHECK_ALWAYS.
*/
export const CHECKED="CHECKED";
/**
* CHECK_ALWAYS means that after calling detectChanges the mode of the change detector
* will remain CHECK_ALWAYS.
*/
export const CHECK_ALWAYS="ALWAYS_CHECK";
/**
* DETACHED means that the change detector sub tree is not a part of the main tree and
* should be skipped.
*/
export const DETACHED="DETACHED";
export class ChangeDispatcher {
onRecordChange(directiveMemento, records:List<ChangeRecord>) {}
}

View File

@ -22,7 +22,7 @@ import {
PrefixNot
} from './parser/ast';
import {ChangeRecord, ChangeDispatcher, ChangeDetector} from './interfaces';
import {ChangeRecord, ChangeDispatcher, ChangeDetector, ProtoChangeDetector} from './interfaces';
import {ChangeDetectionUtil} from './change_detection_util';
import {DynamicChangeDetector} from './dynamic_change_detector';
import {ChangeDetectorJITGenerator} from './change_detection_jit_generator';
@ -45,13 +45,6 @@ import {
RECORD_TYPE_INTERPOLATE
} from './proto_record';
export class ProtoChangeDetector {
addAst(ast:AST, bindingMemento:any, directiveMemento:any = null){}
instantiate(dispatcher:any, bindingRecords:List, variableBindings:List, directiveMemento:List):ChangeDetector{
return null;
}
}
export class BindingRecord {
ast:AST;
bindingMemento:any;
@ -67,15 +60,18 @@ export class BindingRecord {
export class DynamicProtoChangeDetector extends ProtoChangeDetector {
_pipeRegistry:PipeRegistry;
_records:List<ProtoRecord>;
_changeControlStrategy:string;
constructor(pipeRegistry:PipeRegistry) {
constructor(pipeRegistry:PipeRegistry, changeControlStrategy:string) {
super();
this._pipeRegistry = pipeRegistry;
this._changeControlStrategy = changeControlStrategy;
}
instantiate(dispatcher:any, bindingRecords:List, variableBindings:List, directiveMementos:List) {
this._createRecordsIfNecessary(bindingRecords, variableBindings);
return new DynamicChangeDetector(dispatcher, this._pipeRegistry, this._records, directiveMementos);
return new DynamicChangeDetector(this._changeControlStrategy, dispatcher,
this._pipeRegistry, this._records, directiveMementos);
}
_createRecordsIfNecessary(bindingRecords:List, variableBindings:List) {
@ -93,11 +89,13 @@ var _jitProtoChangeDetectorClassCounter:number = 0;
export class JitProtoChangeDetector extends ProtoChangeDetector {
_factory:Function;
_pipeRegistry;
_changeControlStrategy:string;
constructor(pipeRegistry) {
constructor(pipeRegistry, changeControlStrategy:string) {
super();
this._pipeRegistry = pipeRegistry;
this._factory = null;
this._changeControlStrategy = changeControlStrategy;
}
instantiate(dispatcher:any, bindingRecords:List, variableBindings:List, directiveMementos:List) {
@ -114,7 +112,8 @@ export class JitProtoChangeDetector extends ProtoChangeDetector {
var c = _jitProtoChangeDetectorClassCounter++;
var records = coalesce(recordBuilder.records);
var typeName = `ChangeDetector${c}`;
this._factory = new ChangeDetectorJITGenerator(typeName, records, directiveMementos).generate();
this._factory = new ChangeDetectorJITGenerator(typeName, this._changeControlStrategy, records,
directiveMementos).generate();
}
}
}

View File

@ -480,6 +480,17 @@ export class Directive extends Injectable {
* @publicModule angular2/annotations
*/
export class Component extends Directive {
/**
* Defines the used change detection strategy.
*
* When a component is instantiated, Angular creates a change detector, which is responsible for propagating
* the component's bindings.
*
* The changeDetection property defines if the change detection will be checked every time or only when the component
* tell it too.
*/
changeDetection:string;
/**
* Defines the set of injectable objects that are visible to a Component and its children.
*
@ -534,13 +545,15 @@ export class Component extends Directive {
bind,
events,
services,
lifecycle
lifecycle,
changeDetection
}:{
selector:String,
selector:string,
bind:Object,
events:Object,
services:List,
lifecycle:List
lifecycle:List,
changeDetection:string
}={})
{
super({
@ -550,6 +563,7 @@ export class Component extends Directive {
lifecycle: lifecycle
});
this.changeDetection = changeDetection;
this.services = services;
}
}

View File

@ -36,9 +36,9 @@ export function createDefaultSteps(
new DirectiveParser(directives),
new TextInterpolationParser(parser),
new ElementBindingMarker(),
new ProtoViewBuilder(changeDetection, shadowDomStrategy),
new ProtoViewBuilder(compiledComponent, changeDetection, shadowDomStrategy),
new ProtoElementInjectorBuilder(),
new ElementBinderBuilder(parser),
new ElementBinderBuilder(parser)
];
return steps;

View File

@ -8,6 +8,8 @@ import {CompileStep} from './compile_step';
import {CompileElement} from './compile_element';
import {CompileControl} from './compile_control';
import {ShadowDomStrategy} from '../shadow_dom_strategy';
import {DirectiveMetadata} from '../directive_metadata';
import {Component} from 'angular2/src/core/annotations/annotations';
/**
* Creates ProtoViews and forwards variable bindings from parent to children.
@ -24,8 +26,12 @@ import {ShadowDomStrategy} from '../shadow_dom_strategy';
export class ProtoViewBuilder extends CompileStep {
changeDetection:ChangeDetection;
_shadowDomStrategy:ShadowDomStrategy;
constructor(changeDetection:ChangeDetection, shadowDomStrategy:ShadowDomStrategy) {
_compiledComponent:DirectiveMetadata;
constructor(compiledComponent:DirectiveMetadata,
changeDetection:ChangeDetection, shadowDomStrategy:ShadowDomStrategy) {
super();
this._compiledComponent = compiledComponent;
this._shadowDomStrategy = shadowDomStrategy;
this.changeDetection = changeDetection;
}
@ -33,7 +39,10 @@ export class ProtoViewBuilder extends CompileStep {
process(parent:CompileElement, current:CompileElement, control:CompileControl) {
var inheritedProtoView = null;
if (current.isViewRoot) {
var protoChangeDetector = this.changeDetection.createProtoChangeDetector('dummy');
var componentAnnotation:Component = this._compiledComponent.annotation;
var protoChangeDetector = this.changeDetection.createProtoChangeDetector('dummy',
componentAnnotation.changeDetection);
inheritedProtoView = new ProtoView(current.element, protoChangeDetector,
this._shadowDomStrategy, this._getParentProtoView(parent));

View File

@ -8,7 +8,7 @@ import {Lexer} from 'angular2/src/change_detection/parser/lexer';
import {Locals} from 'angular2/src/change_detection/parser/locals';
import {ChangeDispatcher, DynamicChangeDetector, ChangeDetectionError, BindingRecord,
PipeRegistry, Pipe, NO_CHANGE, CHECK_ALWAYS, CHECK_ONCE, CHECKED, DETACHED} from 'angular2/change_detection';
PipeRegistry, Pipe, NO_CHANGE, CHECK_ALWAYS, CHECK_ONCE, CHECKED, DETACHED, ON_PUSH, DEFAULT} from 'angular2/change_detection';
import {ChangeDetectionUtil} from 'angular2/src/change_detection/change_detection_util';
@ -18,8 +18,8 @@ import {JitProtoChangeDetector, DynamicProtoChangeDetector} from 'angular2/src/c
export function main() {
describe("change detection", () => {
StringMapWrapper.forEach(
{ "dynamic": (registry = null) => new DynamicProtoChangeDetector(registry),
"JIT": (registry = null) => new JitProtoChangeDetector(registry)
{ "dynamic": (registry = null, strategy = null) => new DynamicProtoChangeDetector(registry, strategy),
"JIT": (registry = null, strategy = null) => new JitProtoChangeDetector(registry, strategy)
}, (createProtoChangeDetector, name) => {
if (name == "JIT" && IS_DARTIUM) return;
@ -464,6 +464,25 @@ export function main() {
});
describe("mode", () => {
it("should set the mode to CHECK_ALWAYS when the default change detection is used", () => {
var proto = createProtoChangeDetector(null, DEFAULT);
var cd = proto.instantiate(null, [], [], []);
expect(cd.mode).toEqual(null);
cd.hydrate(null, null);
expect(cd.mode).toEqual(CHECK_ALWAYS);
});
it("should set the mode to CHECK_ONCE when the push change detection is used", () => {
var proto = createProtoChangeDetector(null, ON_PUSH);
var cd = proto.instantiate(null, [], [], []);
cd.hydrate(null, null);
expect(cd.mode).toEqual(CHECK_ONCE);
});
it("should not check a detached change detector", () => {
var c = createChangeDetector('name', 'a', new TestData("value"));
var cd = c["changeDetector"];

View File

@ -18,7 +18,7 @@ import {PromiseWrapper} from 'angular2/src/facade/async';
import {Injector, bind} from 'angular2/di';
import {Lexer, Parser, dynamicChangeDetection,
DynamicChangeDetection, Pipe, PipeRegistry, BindingPropagationConfig} from 'angular2/change_detection';
DynamicChangeDetection, Pipe, PipeRegistry, BindingPropagationConfig, ON_PUSH} from 'angular2/change_detection';
import {Compiler, CompilerCache} from 'angular2/src/core/compiler/compiler';
import {DirectiveMetadataReader} from 'angular2/src/core/compiler/directive_metadata_reader';
@ -723,7 +723,8 @@ class MyDir {
selector: 'push-cmp',
bind: {
'prop': 'prop'
}
},
changeDetection:ON_PUSH
})
@Template({inline: '{{field}}'})
class PushBasedComp {
@ -734,7 +735,6 @@ class PushBasedComp {
constructor(bpc:BindingPropagationConfig) {
this.numberOfChecks = 0;
this.bpc = bpc;
bpc.shouldBePropagated();
}
get field(){

View File

@ -71,7 +71,7 @@ export function main() {
current.isViewRoot = true;
current.inheritedProtoView = new ProtoView(
current.element,
new DynamicProtoChangeDetector(normalizeBlank(registry)),
new DynamicProtoChangeDetector(normalizeBlank(registry), null),
new NativeShadowDomStrategy(null));
} else if (isPresent(parent)) {
current.inheritedProtoView = parent.inheritedProtoView;
@ -467,7 +467,7 @@ export function main() {
var results = pipeline.process(el('<div viewroot prop-binding directives></div>'));
var pv = results[0].inheritedProtoView;
results[0].inheritedElementBinder.nestedProtoView = new ProtoView(
el('<div></div>'), new DynamicProtoChangeDetector(null), new NativeShadowDomStrategy(null));
el('<div></div>'), new DynamicProtoChangeDetector(null, null), new NativeShadowDomStrategy(null));
instantiateView(pv);
evalContext.prop1 = 'a';
@ -503,7 +503,7 @@ export function main() {
var results = pipeline.process(el('<div viewroot prop-binding directives></div>'));
var pv = results[0].inheritedProtoView;
results[0].inheritedElementBinder.nestedProtoView = new ProtoView(
el('<div></div>'), new DynamicProtoChangeDetector(registry), new NativeShadowDomStrategy(null));
el('<div></div>'), new DynamicProtoChangeDetector(registry, null), new NativeShadowDomStrategy(null));
instantiateView(pv);
evalContext.prop1 = 'a';

View File

@ -4,16 +4,20 @@ import {DOM} from 'angular2/src/dom/dom_adapter';
import {dynamicChangeDetection} from 'angular2/change_detection';
import {ElementBinder} from 'angular2/src/core/compiler/element_binder';
import {ProtoViewBuilder} from 'angular2/src/core/compiler/pipeline/proto_view_builder';
import {Component} from 'angular2/annotations';
import {CompilePipeline} from 'angular2/src/core/compiler/pipeline/compile_pipeline';
import {CompileElement} from 'angular2/src/core/compiler/pipeline/compile_element';
import {CompileStep} from 'angular2/src/core/compiler/pipeline/compile_step'
import {CompileControl} from 'angular2/src/core/compiler/pipeline/compile_control';
import {DirectiveMetadata} from 'angular2/src/core/compiler/directive_metadata';
import {NativeShadowDomStrategy} from 'angular2/src/core/compiler/shadow_dom_strategy';
import {MapWrapper} from 'angular2/src/facade/collection';
export function main() {
describe('ProtoViewBuilder', () => {
function createPipeline(variableBindings = null) {
var component = new DirectiveMetadata(null, new Component());
return new CompilePipeline([new MockStep((parent, current, control) => {
if (isPresent(DOM.getAttribute(current.element, 'viewroot'))) {
current.isViewRoot = true;
@ -22,7 +26,7 @@ export function main() {
current.variableBindings = MapWrapper.createFromStringMap(variableBindings);
}
current.inheritedElementBinder = new ElementBinder(0, null, 0, null, null, null);
}), new ProtoViewBuilder(dynamicChangeDetection, new NativeShadowDomStrategy(null))]);
}), new ProtoViewBuilder(component, dynamicChangeDetection, new NativeShadowDomStrategy(null))]);
}
it('should not create a ProtoView when the isViewRoot flag is not set', () => {

View File

@ -47,7 +47,7 @@ export function main() {
it('should attach the view nodes to the shadow root', () => {
var host = el('<div></div>');
var nodes = el('<div>view</div>');
var pv = new ProtoView(nodes, new DynamicProtoChangeDetector(null), null);
var pv = new ProtoView(nodes, new DynamicProtoChangeDetector(null, null), null);
var view = pv.instantiate(null, null);
strategy.attachTemplate(host, view);
@ -89,7 +89,7 @@ export function main() {
it('should attach the view nodes as child of the host element', () => {
var host = el('<div><span>original content</span></div>');
var nodes = el('<div>view</div>');
var pv = new ProtoView(nodes, new DynamicProtoChangeDetector(null), null);
var pv = new ProtoView(nodes, new DynamicProtoChangeDetector(null, null), null);
var view = pv.instantiate(null, null);
strategy.attachTemplate(host, view);
@ -224,7 +224,7 @@ export function main() {
it('should attach the view nodes as child of the host element', () => {
var host = el('<div><span>original content</span></div>');
var nodes = el('<div>view</div>');
var pv = new ProtoView(nodes, new DynamicProtoChangeDetector(null), null);
var pv = new ProtoView(nodes, new DynamicProtoChangeDetector(null, null), null);
var view = pv.instantiate(null, null);
strategy.attachTemplate(host, view);

View File

@ -11,7 +11,7 @@ import {DynamicProtoChangeDetector, ChangeDetector, Lexer, Parser} from 'angular
function createView(nodes) {
var view = new View(null, nodes, MapWrapper.create());
var cd = new DynamicProtoChangeDetector(null).instantiate(view, [], null, []);
var cd = new DynamicProtoChangeDetector(null, null).instantiate(view, [], null, []);
view.init(cd, [], [], [], [], [], [], [], [], []);
return view;
}
@ -71,7 +71,7 @@ export function main() {
dom = el(`<div><stuff></stuff><div insert-after-me></div><stuff></stuff></div>`);
var insertionElement = dom.childNodes[1];
parentView = createView([dom.childNodes[0]]);
protoView = new ProtoView(el('<div>hi</div>'), new DynamicProtoChangeDetector(null),
protoView = new ProtoView(el('<div>hi</div>'), new DynamicProtoChangeDetector(null, null),
new NativeShadowDomStrategy(null));
elementInjector = new ElementInjector(null, null, null);
viewContainer = new ViewContainer(parentView, insertionElement, protoView, elementInjector,
@ -217,7 +217,7 @@ export function main() {
viewContainer.hydrate(new Injector([]), null, null);
var pv = new ProtoView(el('<div class="ng-binding">{{}}</div>'),
new DynamicProtoChangeDetector(null), new NativeShadowDomStrategy(null));
new DynamicProtoChangeDetector(null, null), new NativeShadowDomStrategy(null));
pv.bindElement(null, 0, new ProtoElementInjector(null, 1, [SomeDirective]));
pv.bindTextNode(0, parser.parseBinding('foo', null));
fancyView = pv.instantiate(null, null);

View File

@ -63,7 +63,7 @@ export function main() {
describe('instantiated from protoView', () => {
var view;
beforeEach(() => {
var pv = new ProtoView(el('<div id="1"></div>'), new DynamicProtoChangeDetector(null), null);
var pv = new ProtoView(el('<div id="1"></div>'), new DynamicProtoChangeDetector(null, null), null);
view = pv.instantiate(null, null);
});
@ -90,7 +90,7 @@ export function main() {
});
it('should use the view pool to reuse views', () => {
var pv = new ProtoView(el('<div id="1"></div>'), new DynamicProtoChangeDetector(null), null);
var pv = new ProtoView(el('<div id="1"></div>'), new DynamicProtoChangeDetector(null, null), null);
var fakeView = new FakeView();
pv.returnToPool(fakeView);
@ -101,7 +101,7 @@ export function main() {
describe('with locals', function() {
var view;
beforeEach(() => {
var pv = new ProtoView(el('<div id="1"></div>'), new DynamicProtoChangeDetector(null), null);
var pv = new ProtoView(el('<div id="1"></div>'), new DynamicProtoChangeDetector(null, null), null);
pv.bindVariable('context-foo', 'template-foo');
view = createView(pv);
});
@ -138,7 +138,7 @@ export function main() {
it('should collect the root node in the ProtoView element', () => {
var pv = new ProtoView(templateAwareCreateElement('<div id="1"></div>'),
new DynamicProtoChangeDetector(null), null);
new DynamicProtoChangeDetector(null, null), null);
var view = pv.instantiate(null, null);
view.hydrate(null, null, null, null, null);
expect(view.nodes.length).toBe(1);
@ -149,7 +149,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 DynamicProtoChangeDetector(null), null);
new DynamicProtoChangeDetector(null, null), null);
pv.bindElement(null, 0, null);
pv.bindElementProperty(parser.parseBinding('a', null), 'prop', reflector.setter('prop'));
@ -161,7 +161,7 @@ export function main() {
it('should collect property bindings on child elements with ng-binding class', () => {
var pv = new ProtoView(templateAwareCreateElement('<div><span></span><span class="ng-binding"></span></div>'),
new DynamicProtoChangeDetector(null), null);
new DynamicProtoChangeDetector(null, null), null);
pv.bindElement(null, 0, null);
pv.bindElementProperty(parser.parseBinding('b', null), 'a', reflector.setter('a'));
@ -177,7 +177,7 @@ export function main() {
it('should collect text nodes under the root element', () => {
var pv = new ProtoView(templateAwareCreateElement('<div class="ng-binding">{{}}<span></span>{{}}</div>'),
new DynamicProtoChangeDetector(null), null);
new DynamicProtoChangeDetector(null, null), null);
pv.bindElement(null, 0, null);
pv.bindTextNode(0, parser.parseBinding('a', null));
pv.bindTextNode(2, parser.parseBinding('b', null));
@ -191,7 +191,7 @@ export function main() {
it('should collect text nodes with bindings on child elements with ng-binding class', () => {
var pv = new ProtoView(templateAwareCreateElement('<div><span> </span><span class="ng-binding">{{}}</span></div>'),
new DynamicProtoChangeDetector(null), null);
new DynamicProtoChangeDetector(null, null), null);
pv.bindElement(null, 0, null);
pv.bindTextNode(0, parser.parseBinding('b', null));
@ -207,7 +207,7 @@ export function main() {
describe('inplace instantiation', () => {
it('should be supported.', () => {
var template = el('<div></div>');
var pv = new ProtoView(template, new DynamicProtoChangeDetector(null),
var pv = new ProtoView(template, new DynamicProtoChangeDetector(null, null),
new NativeShadowDomStrategy(null));
pv.instantiateInPlace = true;
var view = pv.instantiate(null, null);
@ -217,7 +217,7 @@ export function main() {
it('should be off by default.', () => {
var template = el('<div></div>')
var pv = new ProtoView(template, new DynamicProtoChangeDetector(null),
var pv = new ProtoView(template, new DynamicProtoChangeDetector(null, null),
new NativeShadowDomStrategy(null))
var view = pv.instantiate(null, null);
view.hydrate(null, null, null, null, null);
@ -236,7 +236,7 @@ export function main() {
describe('create ElementInjectors', () => {
it('should use the directives of the ProtoElementInjector', () => {
var pv = new ProtoView(el('<div class="ng-binding"></div>'),
new DynamicProtoChangeDetector(null), null);
new DynamicProtoChangeDetector(null, null), null);
pv.bindElement(null, 0, new ProtoElementInjector(null, 1, [SomeDirective]));
var view = pv.instantiate(null, null);
@ -247,7 +247,7 @@ export function main() {
it('should use the correct parent', () => {
var pv = new ProtoView(el('<div class="ng-binding"><span class="ng-binding"></span></div>'),
new DynamicProtoChangeDetector(null), null);
new DynamicProtoChangeDetector(null, null), null);
var protoParent = new ProtoElementInjector(null, 0, [SomeDirective]);
pv.bindElement(null, 0, protoParent);
pv.bindElement(null, 0, new ProtoElementInjector(protoParent, 1, [AnotherDirective]));
@ -261,7 +261,7 @@ export function main() {
it('should not pass the host injector when a parent injector exists', () => {
var pv = new ProtoView(el('<div class="ng-binding"><span class="ng-binding"></span></div>'),
new DynamicProtoChangeDetector(null), null);
new DynamicProtoChangeDetector(null, null), null);
var protoParent = new ProtoElementInjector(null, 0, [SomeDirective]);
pv.bindElement(null, 0, protoParent);
var testProtoElementInjector = new TestProtoElementInjector(protoParent, 1, [AnotherDirective]);
@ -277,7 +277,7 @@ export function main() {
it('should pass the host injector when there is no parent injector', () => {
var pv = new ProtoView(el('<div class="ng-binding"><span class="ng-binding"></span></div>'),
new DynamicProtoChangeDetector(null), null);
new DynamicProtoChangeDetector(null, null), null);
pv.bindElement(null, 0, new ProtoElementInjector(null, 0, [SomeDirective]));
var testProtoElementInjector = new TestProtoElementInjector(null, 1, [AnotherDirective]);
pv.bindElement(null, 0, testProtoElementInjector);
@ -294,7 +294,7 @@ export function main() {
it('should collect a single root element injector', () => {
var pv = new ProtoView(el('<div class="ng-binding"><span class="ng-binding"></span></div>'),
new DynamicProtoChangeDetector(null), null);
new DynamicProtoChangeDetector(null, null), null);
var protoParent = new ProtoElementInjector(null, 0, [SomeDirective]);
pv.bindElement(null, 0, protoParent);
pv.bindElement(null, 0, new ProtoElementInjector(protoParent, 1, [AnotherDirective]));
@ -307,7 +307,7 @@ export function main() {
it('should collect multiple root element injectors', () => {
var pv = new ProtoView(el('<div><span class="ng-binding"></span><span class="ng-binding"></span></div>'),
new DynamicProtoChangeDetector(null), null);
new DynamicProtoChangeDetector(null, null), null);
pv.bindElement(null, 0, new ProtoElementInjector(null, 1, [SomeDirective]));
pv.bindElement(null, 0, new ProtoElementInjector(null, 2, [AnotherDirective]));
@ -325,7 +325,7 @@ export function main() {
function createComponentWithSubPV(subProtoView) {
var pv = new ProtoView(el('<cmp class="ng-binding"></cmp>'),
new DynamicProtoChangeDetector(null), new NativeShadowDomStrategy(null));
new DynamicProtoChangeDetector(null, null), new NativeShadowDomStrategy(null));
var binder = pv.bindElement(null, 0, new ProtoElementInjector(null, 0, [SomeComponent], true));
binder.componentDirective = someComponentDirective;
binder.nestedProtoView = subProtoView;
@ -340,7 +340,7 @@ export function main() {
}
it('should expose component services to the component', () => {
var subpv = new ProtoView(el('<span></span>'), new DynamicProtoChangeDetector(null), null);
var subpv = new ProtoView(el('<span></span>'), new DynamicProtoChangeDetector(null, null), null);
var pv = createComponentWithSubPV(subpv);
var view = createNestedView(pv);
@ -353,7 +353,7 @@ export function main() {
() => {
var subpv = new ProtoView(
el('<div dec class="ng-binding">hello shadow dom</div>'),
new DynamicProtoChangeDetector(null),
new DynamicProtoChangeDetector(null, null),
null);
subpv.bindElement(null, 0,
new ProtoElementInjector(null, 0, [ServiceDependentDecorator]));
@ -378,7 +378,7 @@ export function main() {
it('dehydration should dehydrate child component views too', () => {
var subpv = new ProtoView(
el('<div dec class="ng-binding">hello shadow dom</div>'),
new DynamicProtoChangeDetector(null),
new DynamicProtoChangeDetector(null, null),
null);
subpv.bindElement(null, 0,
new ProtoElementInjector(null, 0, [ServiceDependentDecorator]));
@ -395,7 +395,7 @@ export function main() {
it('should create shadow dom (Native Strategy)', () => {
var subpv = new ProtoView(el('<span>hello shadow dom</span>'),
new DynamicProtoChangeDetector(null),
new DynamicProtoChangeDetector(null, null),
null);
var pv = createComponentWithSubPV(subpv);
@ -406,10 +406,10 @@ export function main() {
it('should emulate shadow dom (Emulated Strategy)', () => {
var subpv = new ProtoView(el('<span>hello shadow dom</span>'),
new DynamicProtoChangeDetector(null), null);
new DynamicProtoChangeDetector(null, null), null);
var pv = new ProtoView(el('<cmp class="ng-binding"></cmp>'),
new DynamicProtoChangeDetector(null), new EmulatedScopedShadowDomStrategy(null, null, null));
new DynamicProtoChangeDetector(null, null), new EmulatedScopedShadowDomStrategy(null, null, null));
var binder = pv.bindElement(null, 0, new ProtoElementInjector(null, 0, [SomeComponent], true));
binder.componentDirective = new DirectiveMetadataReader().read(SomeComponent);
binder.nestedProtoView = subpv;
@ -423,9 +423,9 @@ export function main() {
describe('with template views', () => {
function createViewWithViewport() {
var templateProtoView = new ProtoView(
el('<div id="1"></div>'), new DynamicProtoChangeDetector(null), null);
el('<div id="1"></div>'), new DynamicProtoChangeDetector(null, null), null);
var pv = new ProtoView(el('<someTmpl class="ng-binding"></someTmpl>'),
new DynamicProtoChangeDetector(null), new NativeShadowDomStrategy(null));
new DynamicProtoChangeDetector(null, null), new NativeShadowDomStrategy(null));
var binder = pv.bindElement(null, 0, new ProtoElementInjector(null, 0, [SomeViewport]));
binder.viewportDirective = someViewportDirective;
binder.nestedProtoView = templateProtoView;
@ -471,7 +471,7 @@ export function main() {
function createProtoView() {
var pv = new ProtoView(el('<div class="ng-binding"><div></div></div>'),
new DynamicProtoChangeDetector(null), null);
new DynamicProtoChangeDetector(null, null), null);
pv.bindElement(null, 0, new TestProtoElementInjector(null, 0, []));
pv.bindEvent('click', parser.parseBinding('callMe($event)', null));
return pv;
@ -506,7 +506,7 @@ export function main() {
it('should support custom event emitters', () => {
var pv = new ProtoView(el('<div class="ng-binding"><div></div></div>'),
new DynamicProtoChangeDetector(null), null);
new DynamicProtoChangeDetector(null, null), null);
pv.bindElement(null, 0, new TestProtoElementInjector(null, 0, [EventEmitterDirective]));
pv.bindEvent('click', parser.parseBinding('callMe($event)', null));
@ -527,7 +527,7 @@ export function main() {
it('should bind to directive events', () => {
var pv = new ProtoView(el('<div class="ng-binding"></div>'),
new DynamicProtoChangeDetector(null), null);
new DynamicProtoChangeDetector(null, null), null);
pv.bindElement(null, 0, new ProtoElementInjector(null, 0, [SomeDirectiveWithEventHandler]));
pv.bindEvent('click', parser.parseAction('onEvent($event)', null), 0);
view = createView(pv, new EventManager([new DomEventsPlugin()], new FakeVmTurnZone()));
@ -552,7 +552,7 @@ export function main() {
it('should consume text node changes', () => {
var pv = new ProtoView(el('<div class="ng-binding">{{}}</div>'),
new DynamicProtoChangeDetector(null), null);
new DynamicProtoChangeDetector(null, null), null);
pv.bindElement(null, 0, null);
pv.bindTextNode(0, parser.parseBinding('foo', null));
createViewAndChangeDetector(pv);
@ -564,7 +564,7 @@ export function main() {
it('should consume element binding changes', () => {
var pv = new ProtoView(el('<div class="ng-binding"></div>'),
new DynamicProtoChangeDetector(null), null);
new DynamicProtoChangeDetector(null, null), null);
pv.bindElement(null, 0, null);
pv.bindElementProperty(parser.parseBinding('foo', null), 'id', reflector.setter('id'));
createViewAndChangeDetector(pv);
@ -576,7 +576,7 @@ export function main() {
it('should consume directive watch expression change', () => {
var pv = new ProtoView(el('<div class="ng-binding"></div>'),
new DynamicProtoChangeDetector(null), null);
new DynamicProtoChangeDetector(null, null), null);
pv.bindElement(null, 0, new ProtoElementInjector(null, 0, [SomeDirective]));
pv.bindDirectiveProperty(0, parser.parseBinding('foo', null), 'prop', reflector.setter('prop'));
createViewAndChangeDetector(pv);
@ -588,7 +588,7 @@ export function main() {
it('should notify a directive about changes after all its properties have been set', () => {
var pv = new ProtoView(el('<div class="ng-binding"></div>'),
new DynamicProtoChangeDetector(null), null);
new DynamicProtoChangeDetector(null, null), null);
pv.bindElement(null, 0, new ProtoElementInjector(null, 0, [
DirectiveBinding.createFromType(DirectiveImplementingOnChange,
@ -608,7 +608,7 @@ export function main() {
it('should provide a map of updated properties using onChange callback', () => {
var pv = new ProtoView(el('<div class="ng-binding"></div>'),
new DynamicProtoChangeDetector(null), null);
new DynamicProtoChangeDetector(null, null), null);
pv.bindElement(null, 0, new ProtoElementInjector(null, 0, [
DirectiveBinding.createFromType(DirectiveImplementingOnChange,
@ -636,7 +636,7 @@ export function main() {
it('should invoke the onAllChangesDone callback', () => {
var pv = new ProtoView(el('<div class="ng-binding"></div>'),
new DynamicProtoChangeDetector(null), null);
new DynamicProtoChangeDetector(null, null), null);
pv.bindElement(null, 0, new ProtoElementInjector(null, 0, [
DirectiveBinding.createFromType(DirectiveImplementingOnAllChangesDone,
@ -656,13 +656,13 @@ export function main() {
var element, pv;
beforeEach(() => {
element = DOM.createElement('div');
pv = new ProtoView(el('<div>hi</div>'), new DynamicProtoChangeDetector(null),
pv = new ProtoView(el('<div>hi</div>'), new DynamicProtoChangeDetector(null, null),
new NativeShadowDomStrategy(null));
});
it('should create the root component when instantiated', () => {
var rootProtoView = ProtoView.createRootProtoView(pv, element,
someComponentDirective, new DynamicProtoChangeDetector(null),
someComponentDirective, new DynamicProtoChangeDetector(null, null),
new NativeShadowDomStrategy(null));
var view = rootProtoView.instantiate(null, null);
view.hydrate(new Injector([]), null, null, null, null);
@ -671,7 +671,7 @@ export function main() {
it('should inject the protoView into the shadowDom', () => {
var rootProtoView = ProtoView.createRootProtoView(pv, element,
someComponentDirective, new DynamicProtoChangeDetector(null),
someComponentDirective, new DynamicProtoChangeDetector(null, null),
new NativeShadowDomStrategy(null));
var view = rootProtoView.instantiate(null, null);
view.hydrate(new Injector([]), null, null, null, null);