refactor(ivy): remove ɵɵelementProperty instruction (angular#30645)

benlesh · mhevery · commit d1df0a94d4b2 · 2019-06-05T09:04:43.000-07:00
- Removes ɵɵelementProperty instruction - Updates tests that were using it - NOTE: There is one test under `render3/integration_spec.ts` that is commented out, and needs to be reviewed. Basically, I could not find a good why to test what it was doing, because it was doing things that I am not sure we could generate in an acceptance test. PR Close angular#30645
diff --git a/packages/compiler-cli/test/compliance/r3_view_compiler_binding_spec.ts b/packages/compiler-cli/test/compliance/r3_view_compiler_binding_spec.ts
@@ -138,7 +138,7 @@ describe('compiler compliance: bindings', () => {
         }
       };
       const result = compile(files, angularFiles);
-      expect(result.source).not.toContain('i0.ɵɵelementProperty');
+      expect(result.source).not.toContain('i0.ɵɵproperty');
     });
 
     it('should not remap property names whose names do not correspond to their attribute names',
diff --git a/packages/compiler-cli/test/ngtsc/ngtsc_spec.ts b/packages/compiler-cli/test/ngtsc/ngtsc_spec.ts
@@ -2043,7 +2043,7 @@ describe('ngtsc behavioral tests', () => {
     `);
     env.driveMain();
     const jsContents = env.getContents('test.js');
-    expect(jsContents).not.toContain('i0.ɵɵelementProperty');
+    expect(jsContents).not.toContain('i0.ɵɵproperty');
   });
 
   it('should correctly recognize local symbols', () => {
diff --git a/packages/compiler/src/render3/r3_identifiers.ts b/packages/compiler/src/render3/r3_identifiers.ts
@@ -29,8 +29,6 @@ export class Identifiers {
 
   static elementEnd: o.ExternalReference = {name: 'ɵɵelementEnd', moduleName: CORE};
 
-  static elementProperty: o.ExternalReference = {name: 'ɵɵelementProperty', moduleName: CORE};
-
   static select: o.ExternalReference = {name: 'ɵɵselect', moduleName: CORE};
 
   static updateSyntheticHostBinding:
diff --git a/packages/core/src/core_render3_private_export.ts b/packages/core/src/core_render3_private_export.ts
@@ -108,7 +108,6 @@ export {
   ɵɵcontentQuery,
   ɵɵloadContentQuery,
   ɵɵelementEnd,
-  ɵɵelementProperty,
   ɵɵproperty,
   ɵɵpropertyInterpolate,
   ɵɵpropertyInterpolate1,
diff --git a/packages/core/src/render3/VIEW_DATA.md b/packages/core/src/render3/VIEW_DATA.md
@@ -98,8 +98,10 @@ class MyApp {
         ɵɵelementEnd();
       }
       if (rf & RenderFlags.Update) {
-        ɵɵelementProperty(0, 'title', ɵɵbind(ctx.name));
-        ɵɵtextBinding(1, ɵɵinterpolation1('Hello ', ctx.name, '!'));
+        ɵɵselect(0);
+        ɵɵproperty('title', ctx.name);
+        ɵɵselect(1);
+        ɵɵtextInterpolate1('Hello ', ctx.name, '!');
       }
       ...
     }
diff --git a/packages/core/src/render3/index.ts b/packages/core/src/render3/index.ts
@@ -54,7 +54,6 @@ export {
   ɵɵelementEnd,
 
   ɵɵelementHostAttrs,
-  ɵɵelementProperty,
   ɵɵelementStart,
   ɵɵembeddedViewEnd,
 
diff --git a/packages/core/src/render3/instructions/property.ts b/packages/core/src/render3/instructions/property.ts
@@ -61,32 +61,6 @@ export function ɵɵbind<T>(value: T): T|NO_CHANGE {
   return bindingUpdated(lView, bindingIndex, value) ? value : NO_CHANGE;
 }
 
-/**
-* **TODO: Remove this function after `property` is in use**
-* Update a property on an element.
-*
-* If the property name also exists as an input property on one of the element's directives,
-* the component property will be set instead of the element property. This check must
-* be conducted at runtime so child components that add new @Inputs don't have to be re-compiled.
-*
-* @param index The index of the element to update in the data array
-* @param propName Name of property. Because it is going to DOM, this is not subject to
-*        renaming as part of minification.
-* @param value New value to write.
-* @param sanitizer An optional function used to sanitize the value.
-* @param nativeOnly Whether or not we should only set native properties and skip input check
-* (this is necessary for host property bindings)
- *
- * @codeGenApi
-*/
-export function ɵɵelementProperty<T>(
-    index: number, propName: string, value: T | NO_CHANGE, sanitizer?: SanitizerFn | null,
-    nativeOnly?: boolean): void {
-  if (value !== NO_CHANGE) {
-    elementPropertyInternal(index, propName, value, sanitizer, nativeOnly);
-  }
-}
-
 /**
  * Updates a synthetic host binding (e.g. `[@foo]`) on a component.
  *
diff --git a/packages/core/src/render3/jit/environment.ts b/packages/core/src/render3/jit/environment.ts
@@ -87,7 +87,6 @@ export const angularCoreEnv: {[name: string]: Function} =
        'ɵɵlistener': r3.ɵɵlistener,
        'ɵɵload': r3.ɵɵload,
        'ɵɵprojection': r3.ɵɵprojection,
-       'ɵɵelementProperty': r3.ɵɵelementProperty,
        'ɵɵupdateSyntheticHostBinding': r3.ɵɵupdateSyntheticHostBinding,
        'ɵɵcomponentHostSyntheticListener': r3.ɵɵcomponentHostSyntheticListener,
        'ɵɵpipeBind1': r3.ɵɵpipeBind1,
diff --git a/packages/core/test/render3/change_detection_spec.ts b/packages/core/test/render3/change_detection_spec.ts
@@ -10,8 +10,8 @@ import {withBody} from '@angular/private/testing';
 
 import {ChangeDetectionStrategy, DoCheck} from '../../src/core';
 import {whenRendered} from '../../src/render3/component';
-import {LifecycleHooksFeature, getRenderedText, ɵɵdefineComponent, ɵɵgetCurrentView} from '../../src/render3/index';
-import {detectChanges, markDirty, tick, ɵɵbind, ɵɵelement, ɵɵelementEnd, ɵɵelementProperty, ɵɵelementStart, ɵɵinterpolation1, ɵɵinterpolation2, ɵɵlistener, ɵɵtext, ɵɵtextBinding} from '../../src/render3/instructions/all';
+import {LifecycleHooksFeature, getRenderedText, ɵɵdefineComponent, ɵɵgetCurrentView, ɵɵproperty, ɵɵselect} from '../../src/render3/index';
+import {detectChanges, markDirty, tick, ɵɵbind, ɵɵelement, ɵɵelementEnd, ɵɵelementStart, ɵɵinterpolation1, ɵɵinterpolation2, ɵɵlistener, ɵɵtext, ɵɵtextBinding} from '../../src/render3/instructions/all';
 import {RenderFlags} from '../../src/render3/interfaces/definition';
 import {Renderer3, RendererFactory3} from '../../src/render3/interfaces/renderer';
 import {FLAGS, LViewFlags} from '../../src/render3/interfaces/view';
@@ -186,7 +186,8 @@ describe('change detection', () => {
               ɵɵelement(0, 'manual-comp');
             }
             if (rf & RenderFlags.Update) {
-              ɵɵelementProperty(0, 'name', ɵɵbind(ctx.name));
+              ɵɵselect(0);
+              ɵɵproperty('name', ctx.name);
             }
 
           },
diff --git a/packages/core/test/render3/component_spec.ts b/packages/core/test/render3/component_spec.ts
@@ -8,8 +8,8 @@
 
 import {ViewEncapsulation, ɵɵdefineInjectable, ɵɵdefineInjector} from '../../src/core';
 import {createInjector} from '../../src/di/r3_injector';
-import {AttributeMarker, ComponentFactory, LifecycleHooksFeature, getRenderedText, markDirty, ɵɵdefineComponent, ɵɵdirectiveInject, ɵɵtemplate} from '../../src/render3/index';
-import {tick, ɵɵbind, ɵɵcontainer, ɵɵcontainerRefreshEnd, ɵɵcontainerRefreshStart, ɵɵelement, ɵɵelementEnd, ɵɵelementProperty, ɵɵelementStart, ɵɵembeddedViewEnd, ɵɵembeddedViewStart, ɵɵnextContext, ɵɵtext, ɵɵtextBinding} from '../../src/render3/instructions/all';
+import {AttributeMarker, ComponentFactory, LifecycleHooksFeature, getRenderedText, markDirty, ɵɵdefineComponent, ɵɵdirectiveInject, ɵɵproperty, ɵɵselect, ɵɵtemplate} from '../../src/render3/index';
+import {tick, ɵɵbind, ɵɵcontainer, ɵɵcontainerRefreshEnd, ɵɵcontainerRefreshStart, ɵɵelement, ɵɵelementEnd, ɵɵelementStart, ɵɵembeddedViewEnd, ɵɵembeddedViewStart, ɵɵnextContext, ɵɵtext, ɵɵtextBinding} from '../../src/render3/instructions/all';
 import {ComponentDef, RenderFlags} from '../../src/render3/interfaces/definition';
 
 import {NgIf} from './common_with_def';
@@ -137,7 +137,8 @@ describe('component', () => {
         ɵɵelement(4097, 'comp');
       }
       if (rf & RenderFlags.Update) {
-        ɵɵelementProperty(4097, 'name', ɵɵbind(ctx.name));
+        ɵɵselect(4097);
+        ɵɵproperty('name', ctx.name);
       }
     }, 4098, 1, [Comp]);
 
@@ -188,7 +189,8 @@ it('should not invoke renderer destroy method for embedded views', () => {
               2, MyComponent_div_Template_2, 2, 0, 'div', [AttributeMarker.Template, 'ngIf']);
         }
         if (rf & RenderFlags.Update) {
-          ɵɵelementProperty(2, 'ngIf', ɵɵbind(ctx.visible));
+          ɵɵselect(2);
+          ɵɵproperty('ngIf', ctx.visible);
         }
       }
     });
@@ -269,7 +271,8 @@ describe('component with a container', () => {
       ɵɵelement(0, 'wrapper');
     }
     if (rf & RenderFlags.Update) {
-      ɵɵelementProperty(0, 'items', ɵɵbind(ctx.items));
+      ɵɵselect(0);
+      ɵɵproperty('items', ctx.items);
     }
   }
 
@@ -339,7 +342,8 @@ describe('recursive components', () => {
                 ɵɵelement(0, 'tree-comp');
               }
               if (rf0 & RenderFlags.Update) {
-                ɵɵelementProperty(0, 'data', ɵɵbind(ctx.data.left));
+                ɵɵselect(0);
+                ɵɵproperty('data', ctx.data.left);
               }
               ɵɵembeddedViewEnd();
             }
@@ -353,7 +357,8 @@ describe('recursive components', () => {
                 ɵɵelement(0, 'tree-comp');
               }
               if (rf0 & RenderFlags.Update) {
-                ɵɵelementProperty(0, 'data', ɵɵbind(ctx.data.right));
+                ɵɵselect(0);
+                ɵɵproperty('data', ctx.data.right);
               }
               ɵɵembeddedViewEnd();
             }
@@ -400,8 +405,10 @@ describe('recursive components', () => {
         }
         if (rf & RenderFlags.Update) {
           ɵɵtextBinding(0, ɵɵbind(ctx.data.value));
-          ɵɵelementProperty(1, 'ngIf', ɵɵbind(ctx.data.left));
-          ɵɵelementProperty(2, 'ngIf', ɵɵbind(ctx.data.right));
+          ɵɵselect(1);
+          ɵɵproperty('ngIf', ɵɵbind(ctx.data.left));
+          ɵɵselect(2);
+          ɵɵproperty('ngIf', ctx.data.right);
         }
 
       },
@@ -416,7 +423,8 @@ describe('recursive components', () => {
     }
     if (rf & RenderFlags.Update) {
       const parent = ɵɵnextContext();
-      ɵɵelementProperty(0, 'data', ɵɵbind(parent.data.left));
+      ɵɵselect(0);
+      ɵɵproperty('data', parent.data.left);
     }
   }
 
@@ -427,7 +435,8 @@ describe('recursive components', () => {
     }
     if (rf & RenderFlags.Update) {
       const parent = ɵɵnextContext();
-      ɵɵelementProperty(0, 'data', ɵɵbind(parent.data.right));
+      ɵɵselect(0);
+      ɵɵproperty('data', parent.data.right);
     }
   }
 
diff --git a/packages/core/test/render3/instructions_spec.ts b/packages/core/test/render3/instructions_spec.ts
@@ -9,7 +9,7 @@
 import {NgForOfContext} from '@angular/common';
 
 import {ɵɵdefineComponent} from '../../src/render3/definition';
-import {RenderFlags, ɵɵbind, ɵɵclassMap, ɵɵelement, ɵɵelementAttribute, ɵɵelementEnd, ɵɵelementProperty, ɵɵelementStart, ɵɵinterpolation1, ɵɵproperty, ɵɵselect, ɵɵstyleMap, ɵɵstyleProp, ɵɵstyling, ɵɵstylingApply, ɵɵtemplate, ɵɵtext, ɵɵtextBinding} from '../../src/render3/index';
+import {RenderFlags, ɵɵbind, ɵɵclassMap, ɵɵelement, ɵɵelementAttribute, ɵɵelementEnd, ɵɵelementStart, ɵɵinterpolation1, ɵɵproperty, ɵɵselect, ɵɵstyleMap, ɵɵstyleProp, ɵɵstyling, ɵɵstylingApply, ɵɵtemplate, ɵɵtext, ɵɵtextBinding} from '../../src/render3/index';
 import {AttributeMarker} from '../../src/render3/interfaces/node';
 import {bypassSanitizationTrustHtml, bypassSanitizationTrustResourceUrl, bypassSanitizationTrustScript, bypassSanitizationTrustStyle, bypassSanitizationTrustUrl} from '../../src/sanitization/bypass';
 import {ɵɵdefaultStyleSanitizer, ɵɵsanitizeHtml, ɵɵsanitizeResourceUrl, ɵɵsanitizeScript, ɵɵsanitizeStyle, ɵɵsanitizeUrl} from '../../src/sanitization/sanitization';
@@ -58,10 +58,16 @@ describe('instructions', () => {
     it('should update bindings when value changes with the correct perf counters', () => {
       const t = new TemplateFixture(createAnchor, () => {}, 1, 1);
 
-      t.update(() => ɵɵelementProperty(0, 'title', ɵɵbind('Hello')));
+      t.update(() => {
+        ɵɵselect(0);
+        ɵɵproperty('title', 'Hello');
+      });
       expect(t.html).toEqual('<a title="Hello"></a>');
 
-      t.update(() => ɵɵelementProperty(0, 'title', ɵɵbind('World')));
+      t.update(() => {
+        ɵɵselect(0);
+        ɵɵproperty('title', 'World');
+      });
       expect(t.html).toEqual('<a title="World"></a>');
       expect(ngDevMode).toHaveProperties({
         firstTemplatePass: 1,
@@ -74,7 +80,10 @@ describe('instructions', () => {
 
     it('should not update bindings when value does not change, with the correct perf counters',
        () => {
-         const idempotentUpdate = () => ɵɵelementProperty(0, 'title', ɵɵbind('Hello'));
+         const idempotentUpdate = () => {
+           ɵɵselect(0);
+           ɵɵproperty('title', 'Hello');
+         };
          const t = new TemplateFixture(createAnchor, idempotentUpdate, 1, 1);
 
          t.update();
@@ -295,7 +304,8 @@ describe('instructions', () => {
         }
         if (rf & RenderFlags.Update) {
           const row_r2 = ctx0.$implicit;
-          ɵɵelementProperty(1, 'ngForOf', ɵɵbind(row_r2));
+          ɵɵselect(1);
+          ɵɵproperty('ngForOf', row_r2);
         }
       }
 
@@ -331,7 +341,8 @@ describe('instructions', () => {
               ɵɵtemplate(0, ToDoAppComponent_NgForOf_Template_0, 2, 1, 'ul', _c0);
             }
             if (rf & RenderFlags.Update) {
-              ɵɵelementProperty(0, 'ngForOf', ɵɵbind(ctx.rows));
+              ɵɵselect(0);
+              ɵɵproperty('ngForOf', ctx.rows);
             }
           },
           directives: [NgForOf]
@@ -448,66 +459,84 @@ describe('instructions', () => {
 
     it('should work for script sanitization', () => {
       const s = new LocalMockSanitizer(value => `${value} //sanitized`);
-      const t = new TemplateFixture(createScript, undefined, 1, 0, null, null, s);
+      const t = new TemplateFixture(createScript, undefined, 1, 1, null, null, s);
       const inputValue = 'fn();';
       const outputValue = 'fn(); //sanitized';
 
-      t.update(() => ɵɵelementProperty(0, 'innerHTML', inputValue, ɵɵsanitizeScript));
+      t.update(() => {
+        ɵɵselect(0);
+        ɵɵproperty('innerHTML', inputValue, ɵɵsanitizeScript);
+      });
       expect(t.html).toEqual(`<script>${outputValue}</script>`);
       expect(s.lastSanitizedValue).toEqual(outputValue);
     });
 
     it('should bypass script sanitization if marked by the service', () => {
       const s = new LocalMockSanitizer(value => '');
-      const t = new TemplateFixture(createScript, undefined, 1, 0, null, null, s);
+      const t = new TemplateFixture(createScript, undefined, 1, 1, null, null, s);
       const inputValue = s.bypassSecurityTrustScript('alert("bar")');
       const outputValue = 'alert("bar")';
 
-      t.update(() => ɵɵelementProperty(0, 'innerHTML', inputValue, ɵɵsanitizeScript));
+      t.update(() => {
+        ɵɵselect(0);
+        ɵɵproperty('innerHTML', inputValue, ɵɵsanitizeScript);
+      });
       expect(t.html).toEqual(`<script>${outputValue}</script>`);
       expect(s.lastSanitizedValue).toBeFalsy();
     });
 
     it('should bypass ivy-level script sanitization if a custom sanitizer is used', () => {
       const s = new LocalMockSanitizer(value => '');
-      const t = new TemplateFixture(createScript, undefined, 1, 0, null, null, s);
+      const t = new TemplateFixture(createScript, undefined, 1, 1, null, null, s);
       const inputValue = bypassSanitizationTrustScript('alert("bar")');
       const outputValue = 'alert("bar")-ivy';
 
-      t.update(() => ɵɵelementProperty(0, 'innerHTML', inputValue, ɵɵsanitizeScript));
+      t.update(() => {
+        ɵɵselect(0);
+        ɵɵproperty('innerHTML', inputValue, ɵɵsanitizeScript);
+      });
       expect(t.html).toEqual(`<script>${outputValue}</script>`);
       expect(s.lastSanitizedValue).toBeFalsy();
     });
 
     it('should work for html sanitization', () => {
       const s = new LocalMockSanitizer(value => `${value} <!--sanitized-->`);
-      const t = new TemplateFixture(createDiv, undefined, 1, 0, null, null, s);
+      const t = new TemplateFixture(createDiv, undefined, 1, 1, null, null, s);
       const inputValue = '<header></header>';
       const outputValue = '<header></header> <!--sanitized-->';
 
-      t.update(() => ɵɵelementProperty(0, 'innerHTML', inputValue, ɵɵsanitizeHtml));
+      t.update(() => {
+        ɵɵselect(0);
+        ɵɵproperty('innerHTML', inputValue, ɵɵsanitizeHtml);
+      });
       expect(t.html).toEqual(`<div>${outputValue}</div>`);
       expect(s.lastSanitizedValue).toEqual(outputValue);
     });
 
     it('should bypass html sanitization if marked by the service', () => {
       const s = new LocalMockSanitizer(value => '');
-      const t = new TemplateFixture(createDiv, undefined, 1, 0, null, null, s);
+      const t = new TemplateFixture(createDiv, undefined, 1, 1, null, null, s);
       const inputValue = s.bypassSecurityTrustHtml('<div onclick="alert(123)"></div>');
       const outputValue = '<div onclick="alert(123)"></div>';
 
-      t.update(() => ɵɵelementProperty(0, 'innerHTML', inputValue, ɵɵsanitizeHtml));
+      t.update(() => {
+        ɵɵselect(0);
+        ɵɵproperty('innerHTML', inputValue, ɵɵsanitizeHtml);
+      });
       expect(t.html).toEqual(`<div>${outputValue}</div>`);
       expect(s.lastSanitizedValue).toBeFalsy();
     });
 
     it('should bypass ivy-level script sanitization if a custom sanitizer is used', () => {
       const s = new LocalMockSanitizer(value => '');
-      const t = new TemplateFixture(createDiv, undefined, 1, 0, null, null, s);
+      const t = new TemplateFixture(createDiv, undefined, 1, 1, null, null, s);
       const inputValue = bypassSanitizationTrustHtml('<div onclick="alert(123)"></div>');
       const outputValue = '<div onclick="alert(123)"></div>-ivy';
 
-      t.update(() => ɵɵelementProperty(0, 'innerHTML', inputValue, ɵɵsanitizeHtml));
+      t.update(() => {
+        ɵɵselect(0);
+        ɵɵproperty('innerHTML', inputValue, ɵɵsanitizeHtml);
+      });
       expect(t.html).toEqual(`<div>${outputValue}</div>`);
       expect(s.lastSanitizedValue).toBeFalsy();
     });
diff --git a/packages/core/test/render3/integration_spec.ts b/packages/core/test/render3/integration_spec.ts
diff --git a/packages/core/test/render3/lifecycle_spec.ts b/packages/core/test/render3/lifecycle_spec.ts
diff --git a/packages/core/test/render3/pure_function_spec.ts b/packages/core/test/render3/pure_function_spec.ts
diff --git a/tools/public_api_guard/core/core.d.ts b/tools/public_api_guard/core/core.d.ts

Original file line number	Diff line number	Diff line change
`@@ -138,7 +138,7 @@ describe('compiler compliance: bindings', () => {`
`138`	`138`	`}`
`139`	`139`	`};`
`140`	`140`	`const result = compile(files, angularFiles);`
`141`		`- expect(result.source).not.toContain('i0.ɵɵelementProperty');`
	`141`	`+ expect(result.source).not.toContain('i0.ɵɵproperty');`
`142`	`142`	`});`
`143`	`143`
`144`	`144`	`it('should not remap property names whose names do not correspond to their attribute names',`
Original file line number	Diff line number	Diff line change
`@@ -98,8 +98,10 @@ class MyApp {`
`98`	`98`	`ɵɵelementEnd();`
`99`	`99`	`}`
`100`	`100`	`if (rf & RenderFlags.Update) {`
`101`		`- ɵɵelementProperty(0, 'title', ɵɵbind(ctx.name));`
`102`		`- ɵɵtextBinding(1, ɵɵinterpolation1('Hello ', ctx.name, '!'));`
	`101`	`+ ɵɵselect(0);`
	`102`	`+ ɵɵproperty('title', ctx.name);`
	`103`	`+ ɵɵselect(1);`
	`104`	`+ ɵɵtextInterpolate1('Hello ', ctx.name, '!');`
`103`	`105`	`}`
`104`	`106`	`...`
`105`	`107`	`}`
Original file line number	Diff line number	Diff line change
`@@ -8,8 +8,8 @@`
`8`	`8`
`9`	`9`	`import {ViewEncapsulation, ɵɵdefineInjectable, ɵɵdefineInjector} from '../../src/core';`
`10`	`10`	`import {createInjector} from '../../src/di/r3_injector';`
`11`		`-import {AttributeMarker, ComponentFactory, LifecycleHooksFeature, getRenderedText, markDirty, ɵɵdefineComponent, ɵɵdirectiveInject, ɵɵtemplate} from '../../src/render3/index';`
`12`		`-import {tick, ɵɵbind, ɵɵcontainer, ɵɵcontainerRefreshEnd, ɵɵcontainerRefreshStart, ɵɵelement, ɵɵelementEnd, ɵɵelementProperty, ɵɵelementStart, ɵɵembeddedViewEnd, ɵɵembeddedViewStart, ɵɵnextContext, ɵɵtext, ɵɵtextBinding} from '../../src/render3/instructions/all';`
	`11`	`+import {AttributeMarker, ComponentFactory, LifecycleHooksFeature, getRenderedText, markDirty, ɵɵdefineComponent, ɵɵdirectiveInject, ɵɵproperty, ɵɵselect, ɵɵtemplate} from '../../src/render3/index';`
	`12`	`+import {tick, ɵɵbind, ɵɵcontainer, ɵɵcontainerRefreshEnd, ɵɵcontainerRefreshStart, ɵɵelement, ɵɵelementEnd, ɵɵelementStart, ɵɵembeddedViewEnd, ɵɵembeddedViewStart, ɵɵnextContext, ɵɵtext, ɵɵtextBinding} from '../../src/render3/instructions/all';`
`13`	`13`	`import {ComponentDef, RenderFlags} from '../../src/render3/interfaces/definition';`
`14`	`14`
`15`	`15`	`import {NgIf} from './common_with_def';`
`@@ -137,7 +137,8 @@ describe('component', () => {`
`137`	`137`	`ɵɵelement(4097, 'comp');`
`138`	`138`	`}`
`139`	`139`	`if (rf & RenderFlags.Update) {`
`140`		`- ɵɵelementProperty(4097, 'name', ɵɵbind(ctx.name));`
	`140`	`+ ɵɵselect(4097);`
	`141`	`+ ɵɵproperty('name', ctx.name);`
`141`	`142`	`}`
`142`	`143`	`}, 4098, 1, [Comp]);`
`143`	`144`
`@@ -188,7 +189,8 @@ it('should not invoke renderer destroy method for embedded views', () => {`
`188`	`189`	`2, MyComponent_div_Template_2, 2, 0, 'div', [AttributeMarker.Template, 'ngIf']);`
`189`	`190`	`}`
`190`	`191`	`if (rf & RenderFlags.Update) {`
`191`		`- ɵɵelementProperty(2, 'ngIf', ɵɵbind(ctx.visible));`
	`192`	`+ ɵɵselect(2);`
	`193`	`+ ɵɵproperty('ngIf', ctx.visible);`
`192`	`194`	`}`
`193`	`195`	`}`
`194`	`196`	`});`
`@@ -269,7 +271,8 @@ describe('component with a container', () => {`
`269`	`271`	`ɵɵelement(0, 'wrapper');`
`270`	`272`	`}`
`271`	`273`	`if (rf & RenderFlags.Update) {`
`272`		`- ɵɵelementProperty(0, 'items', ɵɵbind(ctx.items));`
	`274`	`+ ɵɵselect(0);`
	`275`	`+ ɵɵproperty('items', ctx.items);`
`273`	`276`	`}`
`274`	`277`	`}`
`275`	`278`
`@@ -339,7 +342,8 @@ describe('recursive components', () => {`
`339`	`342`	`ɵɵelement(0, 'tree-comp');`
`340`	`343`	`}`
`341`	`344`	`if (rf0 & RenderFlags.Update) {`
`342`		`- ɵɵelementProperty(0, 'data', ɵɵbind(ctx.data.left));`
	`345`	`+ ɵɵselect(0);`
	`346`	`+ ɵɵproperty('data', ctx.data.left);`
`343`	`347`	`}`
`344`	`348`	`ɵɵembeddedViewEnd();`
`345`	`349`	`}`
`@@ -353,7 +357,8 @@ describe('recursive components', () => {`
`353`	`357`	`ɵɵelement(0, 'tree-comp');`
`354`	`358`	`}`
`355`	`359`	`if (rf0 & RenderFlags.Update) {`
`356`		`- ɵɵelementProperty(0, 'data', ɵɵbind(ctx.data.right));`
	`360`	`+ ɵɵselect(0);`
	`361`	`+ ɵɵproperty('data', ctx.data.right);`
`357`	`362`	`}`
`358`	`363`	`ɵɵembeddedViewEnd();`
`359`	`364`	`}`
`@@ -400,8 +405,10 @@ describe('recursive components', () => {`
`400`	`405`	`}`
`401`	`406`	`if (rf & RenderFlags.Update) {`
`402`	`407`	`ɵɵtextBinding(0, ɵɵbind(ctx.data.value));`
`403`		`- ɵɵelementProperty(1, 'ngIf', ɵɵbind(ctx.data.left));`
`404`		`- ɵɵelementProperty(2, 'ngIf', ɵɵbind(ctx.data.right));`
	`408`	`+ ɵɵselect(1);`
	`409`	`+ ɵɵproperty('ngIf', ɵɵbind(ctx.data.left));`
	`410`	`+ ɵɵselect(2);`
	`411`	`+ ɵɵproperty('ngIf', ctx.data.right);`
`405`	`412`	`}`
`406`	`413`
`407`	`414`	`},`
`@@ -416,7 +423,8 @@ describe('recursive components', () => {`
`416`	`423`	`}`
`417`	`424`	`if (rf & RenderFlags.Update) {`
`418`	`425`	`const parent = ɵɵnextContext();`
`419`		`- ɵɵelementProperty(0, 'data', ɵɵbind(parent.data.left));`
	`426`	`+ ɵɵselect(0);`
	`427`	`+ ɵɵproperty('data', parent.data.left);`
`420`	`428`	`}`
`421`	`429`	`}`
`422`	`430`
`@@ -427,7 +435,8 @@ describe('recursive components', () => {`
`427`	`435`	`}`
`428`	`436`	`if (rf & RenderFlags.Update) {`
`429`	`437`	`const parent = ɵɵnextContext();`
`430`		`- ɵɵelementProperty(0, 'data', ɵɵbind(parent.data.right));`
	`438`	`+ ɵɵselect(0);`
	`439`	`+ ɵɵproperty('data', parent.data.right);`
`431`	`440`	`}`
`432`	`441`	`}`
`433`	`442`