feat(change_detection): add support for pipes

modules/angular2/test/change_detection/array_changes_spec.js

@@ -1,5 +1,5 @@
 import {describe, it, iit, xit, expect, beforeEach, afterEach} from 'angular2/test_lib';
-import {ArrayChanges} from 'angular2/src/change_detection/array_changes';
+import {ArrayChanges} from 'angular2/src/change_detection/pipes/array_changes';
 
 import {NumberWrapper} from 'angular2/src/facade/lang';
 import {ListWrapper, MapWrapper} from 'angular2/src/facade/collection';
@@ -23,10 +23,10 @@ export function main() {
       });
 
       it('should support list and iterables', () => {
-        expect(ArrayChanges.supports([])).toBeTruthy();
-        expect(ArrayChanges.supports(new TestIterable())).toBeTruthy();
-        expect(ArrayChanges.supports(MapWrapper.create())).toBeFalsy();
-        expect(ArrayChanges.supports(null)).toBeFalsy();
+        expect(ArrayChanges.supportsObj([])).toBeTruthy();
+        expect(ArrayChanges.supportsObj(new TestIterable())).toBeTruthy();
+        expect(ArrayChanges.supportsObj(MapWrapper.create())).toBeFalsy();
+        expect(ArrayChanges.supportsObj(null)).toBeFalsy();
       });
 
       it('should support iterables', () => {

modules/angular2/test/change_detection/change_detection_spec.js

@@ -8,6 +8,7 @@ import {Lexer} from 'angular2/src/change_detection/parser/lexer';
 import {arrayChangesAsString, kvChangesAsString} from './util';
 
 import {ChangeDispatcher, DynamicChangeDetector, ChangeDetectionError, ContextWithVariableBindings,
+  PipeRegistry, NO_CHANGE,
   CHECK_ALWAYS, CHECK_ONCE, CHECKED, DETACHED} from 'angular2/change_detection';
 
 
@@ -17,8 +18,8 @@ import {JitProtoChangeDetector, DynamicProtoChangeDetector} from 'angular2/src/c
 export function main() {
   describe("change detection", () => {
     StringMapWrapper.forEach(
-      { "dynamic": () => new DynamicProtoChangeDetector(),
-        "JIT": () => new JitProtoChangeDetector()
+      { "dynamic": (registry = null) => new DynamicProtoChangeDetector(registry),
+        "JIT": (registry = null) => new JitProtoChangeDetector(registry)
       }, (createProtoChangeDetector, name) => {
 
         if (name == "JIT" && IS_DARTIUM) return;
@@ -29,8 +30,8 @@ export function main() {
         }
 
         function createChangeDetector(memo:string, exp:string, context = null, formatters = null,
-                                             structural = false) {
-          var pcd = createProtoChangeDetector();
+                                      registry = null, structural = false) {
+          var pcd = createProtoChangeDetector(registry);
           pcd.addAst(ast(exp), memo, memo, structural);
 
           var dispatcher = new TestDispatcher();
@@ -41,8 +42,8 @@ export function main() {
         }
 
         function executeWatch(memo:string, exp:string, context = null, formatters = null,
-                              content = false) {
-          var res = createChangeDetector(memo, exp, context, formatters, content);
+                              registry = null, content = false) {
+          var res = createChangeDetector(memo, exp, context, formatters, registry, content);
           res["changeDetector"].detectChanges();
           return res["dispatcher"].log;
         }
@@ -281,124 +282,6 @@ export function main() {
             });
           });
 
-          describe("collections", () => {
-            it("should not register a change when going from null to null", () => {
-              var context = new TestData(null);
-
-              var c = createChangeDetector('a', 'a', context, null, true);
-              var cd = c["changeDetector"];
-              var dispatcher = c["dispatcher"];
-
-              cd.detectChanges();
-              expect(dispatcher.log).toEqual([]);
-            });
-
-            it("should register changes when switching from null to collection and back", () => {
-              var context = new TestData(null);
-
-              var c = createChangeDetector('a', 'a', context, null, true);
-              var cd = c["changeDetector"];
-              var dispatcher = c["dispatcher"];
-
-              context.a = [0];
-              cd.detectChanges();
-
-              expect(dispatcher.log).toEqual(["a=" +
-              arrayChangesAsString({
-                collection: ['0[null->0]'],
-                additions: ['0[null->0]']
-              })
-              ]);
-              dispatcher.clear();
-
-              context.a = null;
-              cd.detectChanges();
-              expect(dispatcher.log).toEqual(['a=null']);
-            });
-
-            describe("list", () => {
-              it("should support list changes", () => {
-                var context = new TestData([1, 2]);
-
-                expect(executeWatch("a", "a", context, null, true))
-                  .toEqual(["a=" +
-                  arrayChangesAsString({
-                    collection: ['1[null->0]', '2[null->1]'],
-                    additions: ['1[null->0]', '2[null->1]']
-                  })]);
-              });
-
-              it("should handle reference changes", () => {
-                var context = new TestData([1, 2]);
-                var objs = createChangeDetector("a", "a", context, null, true);
-                var cd = objs["changeDetector"];
-                var dispatcher = objs["dispatcher"];
-                cd.detectChanges();
-                dispatcher.clear();
-
-                context.a = [2, 1];
-                cd.detectChanges();
-                expect(dispatcher.log).toEqual(["a=" +
-                arrayChangesAsString({
-                  collection: ['2[1->0]', '1[0->1]'],
-                  previous: ['1[0->1]', '2[1->0]'],
-                  moves: ['2[1->0]', '1[0->1]']
-                })]);
-              });
-            });
-
-            describe("map", () => {
-              it("should support map changes", () => {
-                var map = MapWrapper.create();
-                MapWrapper.set(map, "foo", "bar");
-                var context = new TestData(map);
-                expect(executeWatch("a", "a", context, null, true))
-                  .toEqual(["a=" +
-                  kvChangesAsString({
-                    map: ['foo[null->bar]'],
-                    additions: ['foo[null->bar]']
-                  })]);
-              });
-
-              it("should handle reference changes", () => {
-                var map = MapWrapper.create();
-                MapWrapper.set(map, "foo", "bar");
-                var context = new TestData(map);
-                var objs = createChangeDetector("a", "a", context, null, true);
-                var cd = objs["changeDetector"];
-                var dispatcher = objs["dispatcher"];
-                cd.detectChanges();
-                dispatcher.clear();
-
-                context.a = MapWrapper.create();
-                MapWrapper.set(context.a, "bar", "foo");
-                cd.detectChanges();
-                expect(dispatcher.log).toEqual(["a=" +
-                kvChangesAsString({
-                  map: ['bar[null->foo]'],
-                  previous: ['foo[bar->null]'],
-                  additions: ['bar[null->foo]'],
-                  removals: ['foo[bar->null]']
-                })]);
-              });
-            });
-
-            if (!IS_DARTIUM) {
-              describe("js objects", () => {
-                it("should support object changes", () => {
-                  var map = {"foo": "bar"};
-                  var context = new TestData(map);
-                  expect(executeWatch("a", "a", context, null, true))
-                    .toEqual(["a=" +
-                    kvChangesAsString({
-                      map: ['foo[null->bar]'],
-                      additions: ['foo[null->bar]']
-                    })]);
-                });
-              });
-            }
-          });
-
           describe("ContextWithVariableBindings", () => {
             it('should read a field from ContextWithVariableBindings', () => {
               var locals = new ContextWithVariableBindings(null,
@@ -543,10 +426,132 @@ export function main() {
             expect(checkedChild.mode).toEqual(CHECK_ONCE);
           });
         });
+
+        describe("pipes", () => {
+          it("should support pipes", () => {
+            var registry = new FakePipeRegistry(() => new CountingPipe());
+            var ctx = new Person("Megatron");
+
+            var c  = createChangeDetector("memo", "name", ctx, null, registry, true);
+            var cd = c["changeDetector"];
+            var dispatcher = c["dispatcher"];
+
+            cd.detectChanges();
+
+            expect(dispatcher.log).toEqual(['memo=Megatron state:0']);
+
+            dispatcher.clear();
+            cd.detectChanges();
+
+            expect(dispatcher.log).toEqual(['memo=Megatron state:1']);
+          });
+
+          it("should lookup pipes in the registry when the context is not supported", () => {
+            var registry = new FakePipeRegistry(() => new OncePipe());
+            var ctx = new Person("Megatron");
+
+            var c  = createChangeDetector("memo", "name", ctx, null, registry, true);
+            var cd = c["changeDetector"];
+
+            cd.detectChanges();
+
+            expect(registry.numberOfLookups).toEqual(1);
+
+            ctx.name = "Optimus Prime";
+            cd.detectChanges();
+
+            expect(registry.numberOfLookups).toEqual(2);
+          });
+        });
+
+        it("should do nothing when returns NO_CHANGE", () => {
+          var registry = new FakePipeRegistry(() => new IdentityPipe())
+          var ctx = new Person("Megatron");
+
+          var c  = createChangeDetector("memo", "name", ctx, null, registry, true);
+          var cd = c["changeDetector"];
+          var dispatcher = c["dispatcher"];
+
+          cd.detectChanges();
+          cd.detectChanges();
+
+          expect(dispatcher.log).toEqual(['memo=Megatron']);
+
+          ctx.name = "Optimus Prime";
+          dispatcher.clear();
+          cd.detectChanges();
+
+          expect(dispatcher.log).toEqual(['memo=Optimus Prime']);
+        });
       });
   });
 }
 
+class CountingPipe {
+  state:number;
+
+  constructor() {
+    this.state = 0;
+  }
+
+  supports(newValue) {
+    return true;
+  }
+
+  transform(value) {
+    return `${value} state:${this.state ++}`;
+  }
+}
+
+class OncePipe {
+  called:boolean;
+  constructor() {
+    this.called = false;;
+  }
+
+  supports(newValue) {
+    return !this.called;
+  }
+
+  transform(value) {
+    this.called = true;
+    return value;
+  }
+}
+
+class IdentityPipe {
+  state:any;
+
+  supports(newValue) {
+    return true;
+  }
+
+  transform(value) {
+    if (this.state === value) {
+      return NO_CHANGE;
+    } else {
+      this.state = value;
+      return value;
+    }
+  }
+}
+
+class FakePipeRegistry extends PipeRegistry {
+  numberOfLookups:number;
+  factory:Function;
+
+  constructor(factory) {
+    super({});
+    this.factory = factory;
+    this.numberOfLookups = 0;
+  }
+
+  get(type:string, obj) {
+    this.numberOfLookups ++;
+    return this.factory();
+  }
+}
+
 class TestRecord {
   a;
   b;

modules/angular2/test/change_detection/keyvalue_changes_spec.js

@@ -1,5 +1,5 @@
 import {describe, it, iit, xit, expect, beforeEach, afterEach} from 'angular2/test_lib';
-import {KeyValueChanges} from 'angular2/src/change_detection/keyvalue_changes';
+import {KeyValueChanges} from 'angular2/src/change_detection/pipes/keyvalue_changes';
 import {NumberWrapper, isJsObject} from 'angular2/src/facade/lang';
 import {MapWrapper} from 'angular2/src/facade/collection';
 import {kvChangesAsString} from './util';

modules/angular2/test/change_detection/transformer_registry_spec.js

@@ -0,0 +1,39 @@
+import {ddescribe, describe, it, iit, xit, expect, beforeEach, afterEach} from 'angular2/test_lib';
+
+import {PipeRegistry} from 'angular2/src/change_detection/pipes/pipe_registry';
+import {Pipe} from 'angular2/src/change_detection/pipes/pipe';
+
+export function main() {
+  describe("pipe registry", () => {
+    var firstPipe = new Pipe();
+    var secondPipe = new Pipe();
+
+    it("should return the first pipe supporting the data type", () => {
+      var r = new PipeRegistry({
+        "type": [
+          {"supports": (obj) => false, "pipe": () => firstPipe},
+          {"supports": (obj) => true, "pipe": () => secondPipe}
+        ]
+      });
+
+      expect(r.get("type", "some object")).toBe(secondPipe);
+    });
+
+    it("should throw when no matching type", () => {
+      var r = new PipeRegistry({});
+      expect(() => r.get("unknown", "some object")).toThrowError(
+        `Cannot find a pipe for type 'unknown' object 'some object'`
+      );
+    });
+
+    it("should throw when no matching pipe", () => {
+      var r = new PipeRegistry({
+        "type" : []
+      });
+
+      expect(() => r.get("type", "some object")).toThrowError(
+        `Cannot find a pipe for type 'type' object 'some object'`
+      );
+    });
+  });
+}

modules/angular2/test/core/compiler/pipeline/element_binder_builder_spec.js

@@ -71,7 +71,7 @@ export function main() {
             if (isPresent(current.element.getAttribute('viewroot'))) {
               current.isViewRoot = true;
               current.inheritedProtoView = new ProtoView(current.element,
-                new DynamicProtoChangeDetector(), new NativeShadowDomStrategy());
+                new DynamicProtoChangeDetector(null), new NativeShadowDomStrategy());
             } else if (isPresent(parent)) {
               current.inheritedProtoView = parent.inheritedProtoView;
             }
@@ -379,7 +379,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(), new NativeShadowDomStrategy());
+          el('<div></div>'), new DynamicProtoChangeDetector(null), new NativeShadowDomStrategy());
 
       instantiateView(pv);
       evalContext.prop1 = 'a';

modules/angular2/test/core/compiler/pipeline/shadow_dom_transformer_spec.js

@@ -15,9 +15,9 @@ export function main() {
     function createPipeline(selector, strategy:ShadowDomStrategy, styleHost) {
       var component = new Component({selector: selector});
       var meta = new DirectiveMetadata(null, component);
-      var transformer = new ShadowDomTransformer(meta, strategy, styleHost);
-      transformer.clearCache();
-      return new CompilePipeline([transformer]);
+      var pipe = new ShadowDomTransformer(meta, strategy, styleHost);
+      pipe.clearCache();
+      return new CompilePipeline([pipe]);
     }
 
     it('it should set ignoreBindings to true for style elements', () => {

modules/angular2/test/core/compiler/view_container_spec.js

@@ -10,7 +10,7 @@ import {NativeShadowDomStrategy} from 'angular2/src/core/compiler/shadow_dom_str
 import {DynamicProtoChangeDetector, ChangeDetector, Lexer, Parser} from 'angular2/change_detection';
 
 function createView(nodes) {
-  var view = new View(null, nodes, new DynamicProtoChangeDetector(), MapWrapper.create());
+  var view = new View(null, nodes, new DynamicProtoChangeDetector(null), MapWrapper.create());
   view.init([], [], [], [], [], [], []);
   return view;
 }
@@ -69,7 +69,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(), new NativeShadowDomStrategy());
+      protoView = new ProtoView(el('<div>hi</div>'), new DynamicProtoChangeDetector(null), new NativeShadowDomStrategy());
       elementInjector = new ElementInjector(null, null, null, null);
       viewContainer = new ViewContainer(parentView, insertionElement, protoView, elementInjector, null);
       customViewWithOneNode = createView([el('<div>single</div>')]);
@@ -213,7 +213,7 @@ export function main() {
         viewContainer.hydrate(new Injector([]), null);
 
         var pv = new ProtoView(el('<div class="ng-binding">{{}}</div>'),
-          new DynamicProtoChangeDetector(), new NativeShadowDomStrategy());
+          new DynamicProtoChangeDetector(null), new NativeShadowDomStrategy());
         pv.bindElement(new ProtoElementInjector(null, 1, [SomeDirective]));
         pv.bindTextNode(0, parser.parseBinding('foo', null));
         fancyView = pv.instantiate(null, null);

modules/angular2/test/core/compiler/view_spec.js

@@ -59,7 +59,7 @@ export function main() {
     describe('instantiated from protoView', () => {
       var view;
       beforeEach(() => {
-        var pv = new ProtoView(el('<div id="1"></div>'), new DynamicProtoChangeDetector(), null);
+        var pv = new ProtoView(el('<div id="1"></div>'), new DynamicProtoChangeDetector(null), null);
         view = pv.instantiate(null, null);
       });
 
@@ -77,7 +77,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);
+        var pv = new ProtoView(el('<div id="1"></div>'), new DynamicProtoChangeDetector(null), null);
         var fakeView = new FakeView();
         pv.returnToPool(fakeView);
 
@@ -88,7 +88,7 @@ export function main() {
     describe('with locals', function() {
       var view;
       beforeEach(() => {
-        var pv = new ProtoView(el('<div id="1"></div>'), new DynamicProtoChangeDetector(), null);
+        var pv = new ProtoView(el('<div id="1"></div>'), new DynamicProtoChangeDetector(null), null);
         pv.bindVariable('context-foo', 'template-foo');
         view = createView(pv);
       });
@@ -125,7 +125,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);
+            new DynamicProtoChangeDetector(null), null);
           var view = pv.instantiate(null, null);
           view.hydrate(null, null, null);
           expect(view.nodes.length).toBe(1);
@@ -136,7 +136,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);
+              new DynamicProtoChangeDetector(null), null);
             pv.bindElement(null);
             pv.bindElementProperty(parser.parseBinding('a', null), 'prop', reflector.setter('prop'));
 
@@ -148,7 +148,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);
+              new DynamicProtoChangeDetector(null), null);
             pv.bindElement(null);
             pv.bindElementProperty(parser.parseBinding('b', null), 'a', reflector.setter('a'));
 
@@ -164,7 +164,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);
+              new DynamicProtoChangeDetector(null), null);
             pv.bindElement(null);
             pv.bindTextNode(0, parser.parseBinding('a', null));
             pv.bindTextNode(2, parser.parseBinding('b', null));
@@ -178,7 +178,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);
+              new DynamicProtoChangeDetector(null), null);
             pv.bindElement(null);
             pv.bindTextNode(0, parser.parseBinding('b', null));
 
@@ -194,7 +194,7 @@ export function main() {
       describe('inplace instantiation', () => {
         it('should be supported.', () => {
           var template = el('<div></div>');
-          var pv = new ProtoView(template, new DynamicProtoChangeDetector(),
+          var pv = new ProtoView(template, new DynamicProtoChangeDetector(null),
             new NativeShadowDomStrategy());
           pv.instantiateInPlace = true;
           var view = pv.instantiate(null, null);
@@ -204,7 +204,7 @@ export function main() {
 
         it('should be off by default.', () => {
           var template = el('<div></div>')
-          var view = new ProtoView(template, new DynamicProtoChangeDetector(),
+          var view = new ProtoView(template, new DynamicProtoChangeDetector(null),
             new NativeShadowDomStrategy())
             .instantiate(null, null);
           view.hydrate(null, null, null);
@@ -223,7 +223,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);
+            new DynamicProtoChangeDetector(null), null);
           pv.bindElement(new ProtoElementInjector(null, 1, [SomeDirective]));
 
           var view = pv.instantiate(null, null);
@@ -234,7 +234,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);
+            new DynamicProtoChangeDetector(null), null);
           var protoParent = new ProtoElementInjector(null, 0, [SomeDirective]);
           pv.bindElement(protoParent);
           pv.bindElement(new ProtoElementInjector(protoParent, 1, [AnotherDirective]));
@@ -248,7 +248,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);
+            new DynamicProtoChangeDetector(null), null);
           var protoParent = new ProtoElementInjector(null, 0, [SomeDirective]);
           pv.bindElement(protoParent);
           var testProtoElementInjector = new TestProtoElementInjector(protoParent, 1, [AnotherDirective]);
@@ -264,7 +264,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);
+            new DynamicProtoChangeDetector(null), null);
           pv.bindElement(new ProtoElementInjector(null, 0, [SomeDirective]));
           var testProtoElementInjector = new TestProtoElementInjector(null, 1, [AnotherDirective]);
           pv.bindElement(testProtoElementInjector);
@@ -281,7 +281,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);
+            new DynamicProtoChangeDetector(null), null);
           var protoParent = new ProtoElementInjector(null, 0, [SomeDirective]);
           pv.bindElement(protoParent);
           pv.bindElement(new ProtoElementInjector(protoParent, 1, [AnotherDirective]));
@@ -294,7 +294,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);
+            new DynamicProtoChangeDetector(null), null);
           pv.bindElement(new ProtoElementInjector(null, 1, [SomeDirective]));
           pv.bindElement(new ProtoElementInjector(null, 2, [AnotherDirective]));
 
@@ -312,7 +312,7 @@ export function main() {
 
         function createComponentWithSubPV(subProtoView) {
           var pv = new ProtoView(el('<cmp class="ng-binding"></cmp>'),
-            new DynamicProtoChangeDetector(), new NativeShadowDomStrategy());
+            new DynamicProtoChangeDetector(null), new NativeShadowDomStrategy());
           var binder = pv.bindElement(new ProtoElementInjector(null, 0, [SomeComponent], true));
           binder.componentDirective = someComponentDirective;
           binder.nestedProtoView = subProtoView;
@@ -327,7 +327,7 @@ export function main() {
         }
 
         it('should expose component services to the component', () => {
-          var subpv = new ProtoView(el('<span></span>'), new DynamicProtoChangeDetector(), null);
+          var subpv = new ProtoView(el('<span></span>'), new DynamicProtoChangeDetector(null), null);
           var pv = createComponentWithSubPV(subpv);
 
           var view = createNestedView(pv);
@@ -340,7 +340,7 @@ export function main() {
           () => {
             var subpv = new ProtoView(
               el('<div dec class="ng-binding">hello shadow dom</div>'),
-              new DynamicProtoChangeDetector(),
+              new DynamicProtoChangeDetector(null),
               null);
             subpv.bindElement(
               new ProtoElementInjector(null, 0, [ServiceDependentDecorator]));
@@ -365,7 +365,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(),
+            new DynamicProtoChangeDetector(null),
             null);
           subpv.bindElement(
             new ProtoElementInjector(null, 0, [ServiceDependentDecorator]));
@@ -382,7 +382,7 @@ export function main() {
 
         it('should create shadow dom (Native Strategy)', () => {
           var subpv = new ProtoView(el('<span>hello shadow dom</span>'),
-            new DynamicProtoChangeDetector(),
+            new DynamicProtoChangeDetector(null),
             null);
           var pv = createComponentWithSubPV(subpv);
 
@@ -393,10 +393,10 @@ export function main() {
 
         it('should emulate shadow dom (Emulated Strategy)', () => {
           var subpv = new ProtoView(el('<span>hello shadow dom</span>'),
-            new DynamicProtoChangeDetector(), null);
+            new DynamicProtoChangeDetector(null), null);
 
           var pv = new ProtoView(el('<cmp class="ng-binding"></cmp>'),
-            new DynamicProtoChangeDetector(), new EmulatedShadowDomStrategy());
+            new DynamicProtoChangeDetector(null), new EmulatedShadowDomStrategy());
           var binder = pv.bindElement(new ProtoElementInjector(null, 0, [SomeComponent], true));
           binder.componentDirective = new DirectiveMetadataReader().read(SomeComponent);
           binder.nestedProtoView = subpv;
@@ -410,9 +410,9 @@ export function main() {
       describe('with template views', () => {
         function createViewWithViewport() {
           var templateProtoView = new ProtoView(
-            el('<div id="1"></div>'), new DynamicProtoChangeDetector(), null);
+            el('<div id="1"></div>'), new DynamicProtoChangeDetector(null), null);
           var pv = new ProtoView(el('<someTmpl class="ng-binding"></someTmpl>'),
-            new DynamicProtoChangeDetector(), new NativeShadowDomStrategy());
+            new DynamicProtoChangeDetector(null), new NativeShadowDomStrategy());
           var binder = pv.bindElement(new ProtoElementInjector(null, 0, [SomeViewport]));
           binder.viewportDirective = someViewportDirective;
           binder.nestedProtoView = templateProtoView;
@@ -456,7 +456,7 @@ export function main() {
 
         function createProtoView() {
           var pv = new ProtoView(el('<div class="ng-binding"><div></div></div>'),
-            new DynamicProtoChangeDetector(), null);
+            new DynamicProtoChangeDetector(null), null);
           pv.bindElement(new TestProtoElementInjector(null, 0, []));
           pv.bindEvent('click', parser.parseBinding('callMe($event)', null));
           return pv;
@@ -491,7 +491,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);
+            new DynamicProtoChangeDetector(null), null);
           pv.bindElement(new TestProtoElementInjector(null, 0, [EventEmitterDirective]));
           pv.bindEvent('click', parser.parseBinding('callMe($event)', null));
 
@@ -522,7 +522,7 @@ export function main() {
 
         it('should consume text node changes', () => {
           var pv = new ProtoView(el('<div class="ng-binding">{{}}</div>'),
-            new DynamicProtoChangeDetector(), null);
+            new DynamicProtoChangeDetector(null), null);
           pv.bindElement(null);
           pv.bindTextNode(0, parser.parseBinding('foo', null));
           createViewAndChangeDetector(pv);
@@ -534,7 +534,7 @@ export function main() {
 
         it('should consume element binding changes', () => {
           var pv = new ProtoView(el('<div class="ng-binding"></div>'),
-            new DynamicProtoChangeDetector(), null);
+            new DynamicProtoChangeDetector(null), null);
           pv.bindElement(null);
           pv.bindElementProperty(parser.parseBinding('foo', null), 'id', reflector.setter('id'));
           createViewAndChangeDetector(pv);
@@ -546,7 +546,7 @@ export function main() {
 
         it('should consume directive watch expression change', () => {
           var pv = new ProtoView(el('<div class="ng-binding"></div>'),
-            new DynamicProtoChangeDetector(), null);
+            new DynamicProtoChangeDetector(null), null);
           pv.bindElement(new ProtoElementInjector(null, 0, [SomeDirective]));
           pv.bindDirectiveProperty(0, parser.parseBinding('foo', null), 'prop', reflector.setter('prop'), false);
           createViewAndChangeDetector(pv);
@@ -558,7 +558,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);
+            new DynamicProtoChangeDetector(null), null);
 
           pv.bindElement(new ProtoElementInjector(null, 0, [
             DirectiveBinding.createFromType(DirectiveImplementingOnChange, new Directive({lifecycle: [onChange]}))
@@ -577,7 +577,7 @@ export function main() {
 
         it('should provide a map of updated properties', () => {
           var pv = new ProtoView(el('<div class="ng-binding"></div>'),
-            new DynamicProtoChangeDetector(), null);
+            new DynamicProtoChangeDetector(null), null);
 
           pv.bindElement(new ProtoElementInjector(null, 0, [
             DirectiveBinding.createFromType(DirectiveImplementingOnChange, new Directive({lifecycle: [onChange]}))
@@ -604,13 +604,13 @@ export function main() {
       var element, pv;
       beforeEach(() => {
         element = DOM.createElement('div');
-        pv = new ProtoView(el('<div>hi</div>'), new DynamicProtoChangeDetector(),
+        pv = new ProtoView(el('<div>hi</div>'), new DynamicProtoChangeDetector(null),
           new NativeShadowDomStrategy());
       });
 
       it('should create the root component when instantiated', () => {
         var rootProtoView = ProtoView.createRootProtoView(pv, element,
-          someComponentDirective, new DynamicProtoChangeDetector(), new NativeShadowDomStrategy());
+          someComponentDirective, new DynamicProtoChangeDetector(null), new NativeShadowDomStrategy());
         var view = rootProtoView.instantiate(null, null);
         view.hydrate(new Injector([]), null, null);
         expect(view.rootElementInjectors[0].get(SomeComponent)).not.toBe(null);
@@ -618,7 +618,7 @@ export function main() {
 
       it('should inject the protoView into the shadowDom', () => {
         var rootProtoView = ProtoView.createRootProtoView(pv, element,
-          someComponentDirective, new DynamicProtoChangeDetector(), new NativeShadowDomStrategy());
+          someComponentDirective, new DynamicProtoChangeDetector(null), new NativeShadowDomStrategy());
         var view = rootProtoView.instantiate(null, null);
         view.hydrate(new Injector([]), null, null);
         expect(element.shadowRoot.childNodes[0].childNodes[0].nodeValue).toEqual('hi');