refactor(ivy): update ɵɵtextBinding to not take index (#30792)

- Splits core functionality off into a shared internal function
- ɵɵtextBinding will no longer require an index
- Alters the compiler to stop generating an index argument for the instruction
- Updates tests
- Updates some usage of ɵɵtextBinding in i18n to use the helper function instead

PR Close #30792

modules/benchmarks/src/tree/render3_function/index.ts

@@ -6,7 +6,7 @@
  * found in the LICENSE file at https://angular.io/license
  */
 
-import {ɵRenderFlags, ɵrenderComponent as renderComponent, ɵɵcontainer, ɵɵcontainerRefreshEnd, ɵɵcontainerRefreshStart, ɵɵdefineComponent, ɵɵelementEnd, ɵɵelementStart, ɵɵembeddedViewEnd, ɵɵembeddedViewStart, ɵɵinterpolation1, ɵɵselect, ɵɵstyleProp, ɵɵstyling, ɵɵtext, ɵɵtextBinding} from '@angular/core';
+import {ɵRenderFlags, ɵrenderComponent as renderComponent, ɵɵcontainer, ɵɵcontainerRefreshEnd, ɵɵcontainerRefreshStart, ɵɵdefineComponent, ɵɵelementEnd, ɵɵelementStart, ɵɵembeddedViewEnd, ɵɵembeddedViewStart, ɵɵselect, ɵɵstyleProp, ɵɵstyling, ɵɵtext, ɵɵtextInterpolate1} from '@angular/core';
 
 import {bindAction, profile} from '../../util';
 import {createDom, destroyDom, detectChanges} from '../render3/tree';
@@ -51,7 +51,7 @@ export function TreeTpl(rf: ɵRenderFlags, ctx: TreeNode) {
     ɵɵstyleProp(0, ctx.depth % 2 ? '' : 'grey');
     ɵɵstyling();
     ɵɵselect(2);
-    ɵɵtextBinding(2, ɵɵinterpolation1(' ', ctx.value, ' '));
+    ɵɵtextInterpolate1(' ', ctx.value, ' ');
     ɵɵcontainerRefreshStart(3);
     {
       if (ctx.left != null) {

packages/compiler/design/architecture.md

@@ -92,7 +92,8 @@ GreetComponent.ngComponentDef = i0.ɵɵdefineComponent({
             i0.ɵɵelementEnd();
         }
         if (rf & RenderFlags.Update) {
-            i0.ɵɵtextBinding(1, i0.ɵɵinterpolation1('Hello ', ctx.name, '!'));
+            i0.ɵɵselect(1);
+            i0.ɵɵtextInterpolate1('Hello ', ctx.name, '!');
         }
     }
 });

packages/compiler/src/render3/view/template.ts

@@ -955,8 +955,7 @@ export class TemplateDefinitionBuilder implements t.Visitor<void>, LocalResolver
           () => this.getUpdateInstructionArguments(value));
     } else {
       this.updateInstruction(
-          nodeIndex, text.sourceSpan, R3.textBinding,
+          nodeIndex, text.sourceSpan, R3.textBinding, () => [this.convertPropertyBinding(value)]);
-          () => [o.literal(nodeIndex), this.convertPropertyBinding(value)]);
     }
   }
 

packages/core/src/render3/features/providers_feature.ts

@@ -14,6 +14,7 @@ import {DirectiveDef} from '../interfaces/definition';
  * and publish them into the DI system, making it visible to others for injection.
  *
  * For example:
+ * ```ts
  * class ComponentWithProviders {
  *   constructor(private greeter: GreeterDE) {}
  *
@@ -25,15 +26,17 @@ import {DirectiveDef} from '../interfaces/definition';
  *    vars: 1,
  *    template: function(fs: RenderFlags, ctx: ComponentWithProviders) {
  *      if (fs & RenderFlags.Create) {
- *        text(0);
+ *        ɵɵtext(0);
  *      }
  *      if (fs & RenderFlags.Update) {
- *        textBinding(0, bind(ctx.greeter.greet()));
+ *        ɵɵselect(0);
+ *        ɵɵtextBinding(ctx.greeter.greet());
  *      }
  *    },
  *    features: [ProvidersFeature([GreeterDE])]
  *  });
  * }
+ * ```
  *
  * @param definition
  *

packages/core/src/render3/i18n.ts

@@ -16,9 +16,9 @@ import {addAllToArray} from '../util/array_utils';
 import {assertDataInRange, assertDefined, assertEqual, assertGreaterThan} from '../util/assert';
 
 import {attachPatchData} from './context_discovery';
-import {setDelayProjection, ɵɵload, ɵɵtextBinding} from './instructions/all';
+import {setDelayProjection, ɵɵload} from './instructions/all';
 import {attachI18nOpCodesDebug} from './instructions/lview_debug';
-import {allocExpando, elementAttributeInternal, elementPropertyInternal, getOrCreateTNode, setInputsForProperty} from './instructions/shared';
+import {allocExpando, elementAttributeInternal, elementPropertyInternal, getOrCreateTNode, setInputsForProperty, textBindingInternal} from './instructions/shared';
 import {LContainer, NATIVE} from './interfaces/container';
 import {COMMENT_MARKER, ELEMENT_MARKER, I18nMutateOpCode, I18nMutateOpCodes, I18nUpdateOpCode, I18nUpdateOpCodes, IcuType, TI18n, TIcu} from './interfaces/i18n';
 import {TElementNode, TIcuContainerNode, TNode, TNodeFlags, TNodeType, TProjectionNode} from './interfaces/node';
@@ -839,7 +839,7 @@ function readUpdateOpCodes(
                 elementPropertyInternal(nodeIndex, propName, value, sanitizeFn);
                 break;
               case I18nUpdateOpCode.Text:
-                ɵɵtextBinding(nodeIndex, value);
+                textBindingInternal(viewData, nodeIndex, value);
                 break;
               case I18nUpdateOpCode.IcuSwitch:
                 tIcuIndex = updateOpCodes[++j] as number;

packages/core/src/render3/instructions/shared.ts

@@ -1836,3 +1836,16 @@ export function setInputsForProperty(lView: LView, inputs: PropertyAliasValue, v
     }
   }
 }
+
+/**
+ * Updates a text binding at a given index in a given LView.
+ */
+export function textBindingInternal(lView: LView, index: number, value: string): void {
+  ngDevMode && assertNotSame(value, NO_CHANGE as any, 'value should not be NO_CHANGE');
+  ngDevMode && assertDataInRange(lView, index + HEADER_OFFSET);
+  const element = getNativeByIndex(index, lView) as any as RText;
+  ngDevMode && assertDefined(element, 'native element should exist');
+  ngDevMode && ngDevMode.rendererSetText++;
+  const renderer = lView[RENDERER];
+  isProceduralRenderer(renderer) ? renderer.setValue(element, value) : element.textContent = value;
+}

packages/core/src/render3/instructions/text.ts

@@ -8,13 +8,17 @@
 import {assertDataInRange, assertDefined, assertEqual} from '../../util/assert';
 import {TNodeType} from '../interfaces/node';
 import {RText, isProceduralRenderer} from '../interfaces/renderer';
-import {BINDING_INDEX, HEADER_OFFSET, RENDERER, TVIEW, T_HOST} from '../interfaces/view';
+import {BINDING_INDEX, HEADER_OFFSET, LView, RENDERER, TVIEW, T_HOST} from '../interfaces/view';
 import {appendChild, createTextNode} from '../node_manipulation';
-import {getLView, setIsNotParent} from '../state';
+import {getLView, getSelectedIndex, setIsNotParent} from '../state';
 import {NO_CHANGE} from '../tokens';
 import {renderStringify} from '../util/misc_utils';
 import {getNativeByIndex} from '../util/view_utils';
-import {getOrCreateTNode} from './shared';
+
+import {ɵɵbind} from './property';
+import {getOrCreateTNode, textBindingInternal} from './shared';
+
+
 
 /**
  * Create static text node
@@ -32,6 +36,7 @@ export function ɵɵtext(index: number, value?: any): void {
   ngDevMode && ngDevMode.rendererCreateTextNode++;
   ngDevMode && assertDataInRange(lView, index + HEADER_OFFSET);
   const textNative = lView[index + HEADER_OFFSET] = createTextNode(value, lView[RENDERER]);
+  ngDevMode && ngDevMode.rendererSetText++;
   const tNode = getOrCreateTNode(lView[TVIEW], lView[T_HOST], index, TNodeType.Element, null, null);
 
   // Text nodes are self closing.
@@ -43,20 +48,15 @@ export function ɵɵtext(index: number, value?: any): void {
  * Create text node with binding
  * Bindings should be handled externally with the proper interpolation(1-8) method
  *
- * @param index Index of the node in the data array.
  * @param value Stringified value to write.
  *
  * @codeGenApi
  */
-export function ɵɵtextBinding<T>(index: number, value: T | NO_CHANGE): void {
+export function ɵɵtextBinding<T>(value: T | NO_CHANGE): void {
-  if (value !== NO_CHANGE) {
+  const lView = getLView();
-    const lView = getLView();
+  const index = getSelectedIndex();
-    ngDevMode && assertDataInRange(lView, index + HEADER_OFFSET);
+  const bound = ɵɵbind(value);
-    const element = getNativeByIndex(index, lView) as any as RText;
+  if (bound !== NO_CHANGE) {
-    ngDevMode && assertDefined(element, 'native element should exist');
+    textBindingInternal(lView, index, renderStringify(bound));
-    ngDevMode && ngDevMode.rendererSetText++;
-    const renderer = lView[RENDERER];
-    isProceduralRenderer(renderer) ? renderer.setValue(element, renderStringify(value)) :
-                                     element.textContent = renderStringify(value);
   }
 }

packages/core/src/render3/instructions/text_interpolation.ts

@@ -5,12 +5,11 @@
  * Use of this source code is governed by an MIT-style license that can be
  * found in the LICENSE file at https://angular.io/license
  */
-import {getSelectedIndex} from '../state';
+import {getLView, getSelectedIndex} from '../state';
+import {NO_CHANGE} from '../tokens';
 
 import {ɵɵinterpolation1, ɵɵinterpolation2, ɵɵinterpolation3, ɵɵinterpolation4, ɵɵinterpolation5, ɵɵinterpolation6, ɵɵinterpolation7, ɵɵinterpolation8, ɵɵinterpolationV} from './interpolation';
-import {TsickleIssue1009} from './shared';
+import {TsickleIssue1009, textBindingInternal} from './shared';
-import {ɵɵtextBinding} from './text';
-
 
 
 /**
@@ -60,7 +59,11 @@ export function ɵɵtextInterpolate(v0: any): TsickleIssue1009 {
  */
 export function ɵɵtextInterpolate1(prefix: string, v0: any, suffix: string): TsickleIssue1009 {
   const index = getSelectedIndex();
-  ɵɵtextBinding(index, ɵɵinterpolation1(prefix, v0, suffix));
+  const lView = getLView();
+  const interpolated = ɵɵinterpolation1(prefix, v0, suffix);
+  if (interpolated !== NO_CHANGE) {
+    textBindingInternal(lView, index, interpolated as string);
+  }
   return ɵɵtextInterpolate1;
 }
 
@@ -86,7 +89,11 @@ export function ɵɵtextInterpolate1(prefix: string, v0: any, suffix: string): T
 export function ɵɵtextInterpolate2(
     prefix: string, v0: any, i0: string, v1: any, suffix: string): TsickleIssue1009 {
   const index = getSelectedIndex();
-  ɵɵtextBinding(index, ɵɵinterpolation2(prefix, v0, i0, v1, suffix));
+  const lView = getLView();
+  const interpolated = ɵɵinterpolation2(prefix, v0, i0, v1, suffix);
+  if (interpolated !== NO_CHANGE) {
+    textBindingInternal(lView, index, interpolated as string);
+  }
   return ɵɵtextInterpolate2;
 }
 
@@ -114,7 +121,11 @@ export function ɵɵtextInterpolate3(
     prefix: string, v0: any, i0: string, v1: any, i1: string, v2: any,
     suffix: string): TsickleIssue1009 {
   const index = getSelectedIndex();
-  ɵɵtextBinding(index, ɵɵinterpolation3(prefix, v0, i0, v1, i1, v2, suffix));
+  const lView = getLView();
+  const interpolated = ɵɵinterpolation3(prefix, v0, i0, v1, i1, v2, suffix);
+  if (interpolated !== NO_CHANGE) {
+    textBindingInternal(lView, index, interpolated as string);
+  }
   return ɵɵtextInterpolate3;
 }
 
@@ -142,7 +153,11 @@ export function ɵɵtextInterpolate4(
     prefix: string, v0: any, i0: string, v1: any, i1: string, v2: any, i2: string, v3: any,
     suffix: string): TsickleIssue1009 {
   const index = getSelectedIndex();
-  ɵɵtextBinding(index, ɵɵinterpolation4(prefix, v0, i0, v1, i1, v2, i2, v3, suffix));
+  const lView = getLView();
+  const interpolated = ɵɵinterpolation4(prefix, v0, i0, v1, i1, v2, i2, v3, suffix);
+  if (interpolated !== NO_CHANGE) {
+    textBindingInternal(lView, index, interpolated as string);
+  }
   return ɵɵtextInterpolate4;
 }
 
@@ -170,7 +185,11 @@ export function ɵɵtextInterpolate5(
     prefix: string, v0: any, i0: string, v1: any, i1: string, v2: any, i2: string, v3: any,
     i3: string, v4: any, suffix: string): TsickleIssue1009 {
   const index = getSelectedIndex();
-  ɵɵtextBinding(index, ɵɵinterpolation5(prefix, v0, i0, v1, i1, v2, i2, v3, i3, v4, suffix));
+  const lView = getLView();
+  const interpolated = ɵɵinterpolation5(prefix, v0, i0, v1, i1, v2, i2, v3, i3, v4, suffix);
+  if (interpolated !== NO_CHANGE) {
+    textBindingInternal(lView, index, interpolated as string);
+  }
   return ɵɵtextInterpolate5;
 }
 
@@ -200,8 +219,11 @@ export function ɵɵtextInterpolate6(
     prefix: string, v0: any, i0: string, v1: any, i1: string, v2: any, i2: string, v3: any,
     i3: string, v4: any, i4: string, v5: any, suffix: string): TsickleIssue1009 {
   const index = getSelectedIndex();
-  ɵɵtextBinding(
+  const lView = getLView();
-      index, ɵɵinterpolation6(prefix, v0, i0, v1, i1, v2, i2, v3, i3, v4, i4, v5, suffix));
+  const interpolated = ɵɵinterpolation6(prefix, v0, i0, v1, i1, v2, i2, v3, i3, v4, i4, v5, suffix);
+  if (interpolated !== NO_CHANGE) {
+    textBindingInternal(lView, index, interpolated as string);
+  }
   return ɵɵtextInterpolate6;
 }
 
@@ -230,8 +252,12 @@ export function ɵɵtextInterpolate7(
     i3: string, v4: any, i4: string, v5: any, i5: string, v6: any,
     suffix: string): TsickleIssue1009 {
   const index = getSelectedIndex();
-  ɵɵtextBinding(
+  const lView = getLView();
-      index, ɵɵinterpolation7(prefix, v0, i0, v1, i1, v2, i2, v3, i3, v4, i4, v5, i5, v6, suffix));
+  const interpolated =
+      ɵɵinterpolation7(prefix, v0, i0, v1, i1, v2, i2, v3, i3, v4, i4, v5, i5, v6, suffix);
+  if (interpolated !== NO_CHANGE) {
+    textBindingInternal(lView, index, interpolated as string);
+  }
   return ɵɵtextInterpolate7;
 }
 
@@ -260,9 +286,12 @@ export function ɵɵtextInterpolate8(
     i3: string, v4: any, i4: string, v5: any, i5: string, v6: any, i6: string, v7: any,
     suffix: string): TsickleIssue1009 {
   const index = getSelectedIndex();
-  ɵɵtextBinding(
+  const lView = getLView();
-      index,
+  const interpolated =
-      ɵɵinterpolation8(prefix, v0, i0, v1, i1, v2, i2, v3, i3, v4, i4, v5, i5, v6, i6, v7, suffix));
+      ɵɵinterpolation8(prefix, v0, i0, v1, i1, v2, i2, v3, i3, v4, i4, v5, i5, v6, i6, v7, suffix);
+  if (interpolated !== NO_CHANGE) {
+    textBindingInternal(lView, index, interpolated as string);
+  }
   return ɵɵtextInterpolate8;
 }
 
@@ -292,7 +321,10 @@ export function ɵɵtextInterpolate8(
  */
 export function ɵɵtextInterpolateV(values: any[]): TsickleIssue1009 {
   const index = getSelectedIndex();
-
+  const lView = getLView();
-  ɵɵtextBinding(index, ɵɵinterpolationV(values));
+  const interpolated = ɵɵinterpolationV(values);
+  if (interpolated !== NO_CHANGE) {
+    textBindingInternal(lView, index, interpolated as string);
+  }
   return ɵɵtextInterpolateV;
 }

packages/core/src/render3/util/misc_utils.ts

@@ -8,6 +8,7 @@
 
 import {global} from '../../util/global';
 import {RElement} from '../interfaces/renderer';
+import {NO_CHANGE} from '../tokens';
 
 /**
  * Returns whether the values are different from a change detection stand point.

packages/core/test/bundling/todo/bundle.golden_symbols.json

@@ -1517,6 +1517,9 @@
   {
     "name": "syncViewWithBlueprint"
   },
+  {
+    "name": "textBindingInternal"
+  },
   {
     "name": "throwMultipleComponentError"
   },
@@ -1637,9 +1640,6 @@
   {
     "name": "ɵɵtext"
   },
-  {
-    "name": "ɵɵtextBinding"
-  },
   {
     "name": "ɵɵtextInterpolate"
   },

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, ɵɵproperty, ɵɵselect} from '../../src/render3/index';
+import {LifecycleHooksFeature, getRenderedText, ɵɵdefineComponent, ɵɵgetCurrentView, ɵɵproperty, ɵɵselect, ɵɵtextInterpolate1, ɵɵtextInterpolate2} from '../../src/render3/index';
-import {detectChanges, markDirty, tick, ɵɵbind, ɵɵelement, ɵɵelementEnd, ɵɵelementStart, ɵɵinterpolation1, ɵɵinterpolation2, ɵɵlistener, ɵɵtext, ɵɵtextBinding} from '../../src/render3/instructions/all';
+import {detectChanges, markDirty, tick, ɵɵelement, ɵɵelementEnd, ɵɵelementStart, ɵɵ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';
@@ -38,7 +38,8 @@ describe('change detection', () => {
             ɵɵelementEnd();
           }
           if (rf & RenderFlags.Update) {
-            ɵɵtextBinding(1, ɵɵbind(ctx.value));
+            ɵɵselect(1);
+            ɵɵtextBinding(ctx.value);
           }
         }
       });
@@ -120,7 +121,8 @@ describe('change detection', () => {
             ɵɵelementEnd();
           }
           if (rf & RenderFlags.Update) {
-            ɵɵtextBinding(0, ɵɵinterpolation2('', ctx.doCheckCount, ' - ', ctx.name, ''));
+            ɵɵselect(0);
+            ɵɵtextInterpolate2('', ctx.doCheckCount, ' - ', ctx.name, '');
           }
         },
         changeDetection: ChangeDetectionStrategy.OnPush,
@@ -163,7 +165,8 @@ describe('change detection', () => {
               ɵɵelementEnd();
             }
             if (rf & RenderFlags.Update) {
-              ɵɵtextBinding(0, ɵɵinterpolation2('', ctx.doCheckCount, ' - ', ctx.name, ''));
+              ɵɵselect(0);
+              ɵɵtextInterpolate2('', ctx.doCheckCount, ' - ', ctx.name, '');
             }
           },
           changeDetection: ChangeDetectionStrategy.OnPush,
@@ -243,7 +246,8 @@ describe('change detection', () => {
                    ɵɵelement(1, 'manual-comp');
                  }
                  if (rf & RenderFlags.Update) {
-                   ɵɵtextBinding(0, ɵɵinterpolation1('', ctx.doCheckCount, ' - '));
+                   ɵɵselect(0);
+                   ɵɵtextInterpolate1('', ctx.doCheckCount, ' - ');
                  }
                },
                directives: () => [ManualComponent],
@@ -318,7 +322,8 @@ describe('change detection', () => {
             ɵɵtext(0);
           }
           if (rf & RenderFlags.Update) {
-            ɵɵtextBinding(0, ɵɵbind(ctx.value));
+            ɵɵselect(0);
+            ɵɵtextBinding(ctx.value);
           }
         }
       });

packages/core/test/render3/component_spec.ts

@@ -32,7 +32,8 @@ describe('component', () => {
           ɵɵtext(0);
         }
         if (rf & RenderFlags.Update) {
-          ɵɵtextBinding(0, ɵɵbind(ctx.count));
+          ɵɵselect(0);
+          ɵɵtextBinding(ctx.count);
         }
       },
       factory: () => new CounterComponent,
@@ -83,7 +84,8 @@ describe('component', () => {
             ɵɵtext(0);
           }
           if (fs & RenderFlags.Update) {
-            ɵɵtextBinding(0, ɵɵbind(ctx.myService.value));
+            ɵɵselect(0);
+            ɵɵtextBinding(ctx.myService.value);
           }
         }
       });
@@ -126,7 +128,8 @@ describe('component', () => {
             ɵɵtext(0);
           }
           if (rf & RenderFlags.Update) {
-            ɵɵtextBinding(0, ɵɵbind(ctx.name));
+            ɵɵselect(0);
+            ɵɵtextBinding(ctx.name);
           }
         },
         inputs: {name: 'name'}
@@ -231,7 +234,8 @@ describe('component with a container', () => {
               ɵɵtext(0);
             }
             if (rf0 & RenderFlags.Update) {
-              ɵɵtextBinding(0, ɵɵbind(item));
+              ɵɵselect(0);
+              ɵɵtextBinding(item);
             }
           }
           ɵɵembeddedViewEnd();
@@ -336,7 +340,8 @@ describe('recursive components', () => {
           ɵɵcontainer(2);
         }
         if (rf & RenderFlags.Update) {
-          ɵɵtextBinding(0, ɵɵbind(ctx.data.value));
+          ɵɵselect(0);
+          ɵɵtextBinding(ctx.data.value);
           ɵɵcontainerRefreshStart(1);
           {
             if (ctx.data.left != null) {
@@ -407,7 +412,8 @@ describe('recursive components', () => {
               [AttributeMarker.Bindings, 'data', AttributeMarker.Template, 'ngIf']);
         }
         if (rf & RenderFlags.Update) {
-          ɵɵtextBinding(0, ɵɵbind(ctx.data.value));
+          ɵɵselect(0);
+          ɵɵtextBinding(ctx.data.value);
           ɵɵselect(1);
           ɵɵproperty('ngIf', ɵɵbind(ctx.data.left));
           ɵɵselect(2);

packages/core/test/render3/control_flow_spec.ts

@@ -7,7 +7,7 @@
  */
 
 import {ɵɵdefineComponent} from '../../src/render3/definition';
-import {ɵɵbind, ɵɵcontainer, ɵɵcontainerRefreshEnd, ɵɵcontainerRefreshStart, ɵɵelement, ɵɵelementEnd, ɵɵelementStart, ɵɵembeddedViewEnd, ɵɵembeddedViewStart, ɵɵtext, ɵɵtextBinding} from '../../src/render3/instructions/all';
+import {ɵɵbind, ɵɵcontainer, ɵɵcontainerRefreshEnd, ɵɵcontainerRefreshStart, ɵɵelement, ɵɵelementEnd, ɵɵelementStart, ɵɵembeddedViewEnd, ɵɵembeddedViewStart, ɵɵselect, ɵɵtext, ɵɵtextBinding} from '../../src/render3/instructions/all';
 import {RenderFlags} from '../../src/render3/interfaces/definition';
 
 import {ComponentFixture, TemplateFixture, createComponent} from './render_util';
@@ -32,7 +32,8 @@ describe('JS control flow', () => {
                 ɵɵelementEnd();
               }
               if (rf1 & RenderFlags.Update) {
-                ɵɵtextBinding(1, ɵɵbind(ctx.message));
+                ɵɵselect(1);
+                ɵɵtextBinding(ctx.message);
               }
             }
             ɵɵembeddedViewEnd();
@@ -344,7 +345,8 @@ describe('JS control flow', () => {
                 ɵɵelementEnd();
               }
               if (rf1 & RenderFlags.Update) {
-                ɵɵtextBinding(1, ɵɵbind(data[i]));
+                ɵɵselect(1);
+                ɵɵtextBinding(data[i]);
               }
             }
             ɵɵembeddedViewEnd();
@@ -408,7 +410,8 @@ describe('JS control flow', () => {
                       ɵɵtext(0);
                     }
                     if (rf2 & RenderFlags.Update) {
-                      ɵɵtextBinding(0, ɵɵbind(data[0][i] + value));
+                      ɵɵselect(0);
+                      ɵɵtextBinding(data[0][i] + value);
                     }
                     ɵɵembeddedViewEnd();
                   });
@@ -475,7 +478,8 @@ describe('JS control flow', () => {
                 ɵɵtext(3, '-');
               }
               if (rf1 & RenderFlags.Update) {
-                ɵɵtextBinding(1, ɵɵbind(cafes[i].name));
+                ɵɵselect(1);
+                ɵɵtextBinding(cafes[i].name);
                 ɵɵcontainerRefreshStart(2);
                 {
                   for (let j = 0; j < cafes[i].entrees.length; j++) {
@@ -484,7 +488,8 @@ describe('JS control flow', () => {
                       ɵɵtext(0);
                     }
                     if (rf2 & RenderFlags.Update) {
-                      ɵɵtextBinding(0, ɵɵbind(cafes[i].entrees[j]));
+                      ɵɵselect(0);
+                      ɵɵtextBinding(cafes[i].entrees[j]);
                     }
                     ɵɵembeddedViewEnd();
                   }
@@ -570,7 +575,8 @@ describe('JS control flow', () => {
                 ɵɵtext(3, '-');
               }
               if (rf1 & RenderFlags.Update) {
-                ɵɵtextBinding(1, ɵɵbind(cafes[i].name));
+                ɵɵselect(1);
+                ɵɵtextBinding(cafes[i].name);
                 ɵɵcontainerRefreshStart(2);
                 {
                   for (let j = 0; j < cafes[i].entrees.length; j++) {
@@ -583,7 +589,8 @@ describe('JS control flow', () => {
                         ɵɵcontainer(2);
                       }
                       if (rf1 & RenderFlags.Update) {
-                        ɵɵtextBinding(1, ɵɵbind(cafes[i].entrees[j].name));
+                        ɵɵselect(1);
+                        ɵɵtextBinding(cafes[i].entrees[j].name);
                         ɵɵcontainerRefreshStart(2);
                         {
                           for (let k = 0; k < cafes[i].entrees[j].foods.length; k++) {
@@ -592,7 +599,8 @@ describe('JS control flow', () => {
                               ɵɵtext(0);
                             }
                             if (rf2 & RenderFlags.Update) {
-                              ɵɵtextBinding(0, ɵɵbind(cafes[i].entrees[j].foods[k]));
+                              ɵɵselect(0);
+                              ɵɵtextBinding(cafes[i].entrees[j].foods[k]);
                             }
                             ɵɵembeddedViewEnd();
                           }
@@ -848,7 +856,8 @@ describe('JS for loop', () => {
               ɵɵtext(0);
             }
             if (rf2 & RenderFlags.Update) {
-              ɵɵtextBinding(0, ɵɵbind(config.data1[i]));
+              ɵɵselect(0);
+              ɵɵtextBinding(config.data1[i]);
             }
             ɵɵembeddedViewEnd();
           }
@@ -858,7 +867,8 @@ describe('JS for loop', () => {
               ɵɵtext(0);
             }
             if (rf2 & RenderFlags.Update) {
-              ɵɵtextBinding(0, ɵɵbind(config.data2[j]));
+              ɵɵselect(0);
+              ɵɵtextBinding(config.data2[j]);
             }
             ɵɵembeddedViewEnd();
           }
@@ -896,7 +906,8 @@ describe('function calls', () => {
         ɵɵelementEnd();
       }
       if (rf & RenderFlags.Update) {
-        ɵɵtextBinding(1, ɵɵbind(message));
+        ɵɵselect(1);
+        ɵɵtextBinding(message);
       }
     }
 

packages/core/test/render3/di_spec.ts

@@ -12,7 +12,7 @@ import {RenderFlags} from '@angular/core/src/render3/interfaces/definition';
 
 import {ɵɵdefineComponent} from '../../src/render3/definition';
 import {bloomAdd, bloomHasToken, bloomHashBitOrFactory as bloomHash, getOrCreateNodeInjectorForNode} from '../../src/render3/di';
-import {ɵɵbind, ɵɵcontainer, ɵɵcontainerRefreshEnd, ɵɵcontainerRefreshStart, ɵɵdefineDirective, ɵɵdirectiveInject, ɵɵelement, ɵɵelementEnd, ɵɵelementStart, ɵɵembeddedViewEnd, ɵɵembeddedViewStart, ɵɵinterpolation2, ɵɵprojection, ɵɵprojectionDef, ɵɵreference, ɵɵtext, ɵɵtextBinding} from '../../src/render3/index';
+import {ɵɵbind, ɵɵcontainer, ɵɵcontainerRefreshEnd, ɵɵcontainerRefreshStart, ɵɵdefineDirective, ɵɵdirectiveInject, ɵɵelement, ɵɵelementEnd, ɵɵelementStart, ɵɵembeddedViewEnd, ɵɵembeddedViewStart, ɵɵinterpolation2, ɵɵprojection, ɵɵprojectionDef, ɵɵreference, ɵɵselect, ɵɵtext, ɵɵtextBinding, ɵɵtextInterpolate2} from '../../src/render3/index';
 import {TNODE} from '../../src/render3/interfaces/injector';
 import {TNodeType} from '../../src/render3/interfaces/node';
 import {isProceduralRenderer} from '../../src/render3/interfaces/renderer';
@@ -143,7 +143,8 @@ describe('di', () => {
                           }
                           if (rf2 & RenderFlags.Update) {
                             const dir = ɵɵreference(1) as DirA;
-                            ɵɵtextBinding(2, ɵɵbind(dir.dirB.value));
+                            ɵɵselect(2);
+                            ɵɵtextBinding(dir.dirB.value);
                           }
                         }
                         ɵɵembeddedViewEnd();
@@ -397,7 +398,8 @@ describe('di', () => {
                     }
                     if (rf1 & RenderFlags.Update) {
                       const tmp = ɵɵreference(1) as any;
-                      ɵɵtextBinding(2, ɵɵbind(tmp.value));
+                      ɵɵselect(2);
+                      ɵɵtextBinding(tmp.value);
                     }
                   }
                   ɵɵembeddedViewEnd();
@@ -584,7 +586,8 @@ describe('di', () => {
             if (rf & RenderFlags.Update) {
               const tmp1 = ɵɵreference(1) as any;
               const tmp2 = ɵɵreference(2) as any;
-              ɵɵtextBinding(3, ɵɵinterpolation2('', tmp1.value, '-', tmp2.value, ''));
+              ɵɵselect(3);
+              ɵɵtextInterpolate2('', tmp1.value, '-', tmp2.value, '');
             }
             ɵɵembeddedViewEnd();
           }

packages/core/test/render3/exports_spec.ts

@@ -6,7 +6,7 @@
  * found in the LICENSE file at https://angular.io/license
  */
 
-import {ɵɵbind, ɵɵcontainer, ɵɵcontainerRefreshEnd, ɵɵcontainerRefreshStart, ɵɵelement, ɵɵelementEnd, ɵɵelementStart, ɵɵembeddedViewEnd, ɵɵembeddedViewStart, ɵɵreference, ɵɵtext, ɵɵtextBinding} from '../../src/render3/instructions/all';
+import {ɵɵbind, ɵɵcontainer, ɵɵcontainerRefreshEnd, ɵɵcontainerRefreshStart, ɵɵelement, ɵɵelementEnd, ɵɵelementStart, ɵɵembeddedViewEnd, ɵɵembeddedViewStart, ɵɵreference, ɵɵselect, ɵɵtext, ɵɵtextBinding} from '../../src/render3/instructions/all';
 import {RenderFlags} from '../../src/render3/interfaces/definition';
 
 import {ComponentFixture, createComponent} from './render_util';
@@ -39,7 +39,8 @@ describe('exports', () => {
                 }
                 if (rf1 & RenderFlags.Update) {
                   const tmp = ɵɵreference(2) as any;
-                  ɵɵtextBinding(0, ɵɵbind(tmp.value));
+                  ɵɵselect(0);
+                  ɵɵtextBinding(tmp.value);
                 }
               }
               ɵɵembeddedViewEnd();

packages/core/test/render3/instructions_spec.ts

@@ -7,9 +7,8 @@
  */
 
 import {NgForOfContext} from '@angular/common';
-
 import {ɵɵdefineComponent} from '../../src/render3/definition';
-import {RenderFlags, ɵɵattribute, ɵɵclassMap, ɵɵelement, ɵɵelementEnd, ɵɵelementStart, ɵɵinterpolation1, ɵɵproperty, ɵɵselect, ɵɵstyleMap, ɵɵstyleProp, ɵɵstyling, ɵɵstylingApply, ɵɵtemplate, ɵɵtext, ɵɵtextBinding} from '../../src/render3/index';
+import {RenderFlags, ɵɵattribute, ɵɵclassMap, ɵɵelement, ɵɵelementEnd, ɵɵelementStart, ɵɵproperty, ɵɵselect, ɵɵstyleMap, ɵɵstyleProp, ɵɵstyling, ɵɵstylingApply, ɵɵtemplate, ɵɵtext, ɵɵtextInterpolate1} 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';
@@ -297,7 +296,8 @@ describe('instructions', () => {
         }
         if (rf & RenderFlags.Update) {
           const col_r3 = ctx1.$implicit;
-          ɵɵtextBinding(1, ɵɵinterpolation1('', col_r3, ''));
+          ɵɵselect(1);
+          ɵɵtextInterpolate1('', col_r3, '');
         }
       }
 

packages/core/test/render3/integration_spec.ts

@@ -28,8 +28,7 @@ describe('render3 integration test', () => {
       it('should support creation-time values in text nodes', () => {
         function Template(rf: RenderFlags, value: string) {
           if (rf & RenderFlags.Create) {
-            ɵɵtext(0);
+            ɵɵtext(0, value);
-            ɵɵtextBinding(0, value);
           }
         }
         expect(renderToHtml(Template, 'once', 1, 1)).toEqual('once');
@@ -70,7 +69,8 @@ describe('render3 integration test', () => {
               ɵɵtext(0);
             }
             if (rf1 & RenderFlags.Update) {
-              ɵɵtextBinding(0, ɵɵbind(ctx.label));
+              ɵɵselect(0);
+              ɵɵtextBinding(ctx.label);
             }
             ɵɵembeddedViewEnd();
           }

packages/core/test/render3/listeners_spec.ts

@@ -8,7 +8,7 @@
 
 import {dispatchEvent} from '@angular/platform-browser/testing/src/browser_util';
 
-import {markDirty, ɵɵbind, ɵɵdefineComponent, ɵɵdefineDirective, ɵɵreference, ɵɵresolveBody, ɵɵresolveDocument, ɵɵtextBinding} from '../../src/render3/index';
+import {markDirty, ɵɵbind, ɵɵdefineComponent, ɵɵdefineDirective, ɵɵreference, ɵɵresolveBody, ɵɵresolveDocument, ɵɵselect, ɵɵtextBinding} from '../../src/render3/index';
 import {ɵɵcontainer, ɵɵcontainerRefreshEnd, ɵɵcontainerRefreshStart, ɵɵelement, ɵɵelementEnd, ɵɵelementStart, ɵɵembeddedViewEnd, ɵɵembeddedViewStart, ɵɵgetCurrentView, ɵɵlistener, ɵɵtext} from '../../src/render3/instructions/all';
 import {RenderFlags} from '../../src/render3/interfaces/definition';
 import {GlobalTargetResolver} from '../../src/render3/interfaces/renderer';
@@ -472,7 +472,8 @@ describe('event listeners', () => {
                   ɵɵelementEnd();
                 }
                 if (rf1 & RenderFlags.Update) {
-                  ɵɵtextBinding(3, ɵɵbind(ctx.counters[i]));
+                  ɵɵselect(3);
+                  ɵɵtextBinding(ctx.counters[i]);
                 }
                 ɵɵembeddedViewEnd();
               }

packages/core/test/render3/pipe_spec.ts

@@ -9,7 +9,7 @@
 import {Directive as _Directive, Pipe as _Pipe, PipeTransform, WrappedValue, ɵɵdefinePipe} from '@angular/core';
 import {expect} from '@angular/platform-browser/testing/src/matchers';
 
-import {ɵɵinterpolation1, ɵɵtext, ɵɵtextBinding} from '../../src/render3/instructions/all';
+import {ɵɵinterpolation1, ɵɵselect, ɵɵtext, ɵɵtextBinding, ɵɵtextInterpolate1} from '../../src/render3/instructions/all';
 import {ɵɵpipe, ɵɵpipeBind1} from '../../src/render3/pipe';
 
 import {TemplateFixture} from './render_util';
@@ -43,7 +43,8 @@ describe('pipe', () => {
     }
 
     function updateTemplate() {
-      ɵɵtextBinding(0, ɵɵinterpolation1('', ɵɵpipeBind1(1, 1, null), ''));
+      ɵɵselect(0);
+      ɵɵtextInterpolate1('', ɵɵpipeBind1(1, 1, null), '');
     }
 
     it('should unwrap', () => {

packages/core/test/render3/providers_spec.ts

@@ -9,7 +9,7 @@
 import {Component as _Component, ComponentFactoryResolver, ElementRef, InjectFlags, Injectable as _Injectable, InjectionToken, InjectorType, Provider, RendererFactory2, ViewContainerRef, ɵNgModuleDef as NgModuleDef, ɵɵdefineInjectable, ɵɵdefineInjector, ɵɵinject} from '../../src/core';
 import {forwardRef} from '../../src/di/forward_ref';
 import {createInjector} from '../../src/di/r3_injector';
-import {injectComponentFactoryResolver, ɵɵProvidersFeature, ɵɵdefineComponent, ɵɵdefineDirective, ɵɵdirectiveInject} from '../../src/render3/index';
+import {injectComponentFactoryResolver, ɵɵProvidersFeature, ɵɵdefineComponent, ɵɵdefineDirective, ɵɵdirectiveInject, ɵɵselect, ɵɵtextInterpolate1} from '../../src/render3/index';
 import {ɵɵbind, ɵɵcontainer, ɵɵcontainerRefreshEnd, ɵɵcontainerRefreshStart, ɵɵelement, ɵɵelementEnd, ɵɵelementStart, ɵɵembeddedViewEnd, ɵɵembeddedViewStart, ɵɵinterpolation1, ɵɵtext, ɵɵtextBinding} from '../../src/render3/instructions/all';
 import {RenderFlags} from '../../src/render3/interfaces/definition';
 import {NgModuleFactory} from '../../src/render3/ng_module_ref';
@@ -879,8 +879,10 @@ describe('providers', () => {
               ɵɵtext(1);
             }
             if (fs & RenderFlags.Update) {
-              ɵɵtextBinding(0, ɵɵbind(ctx.s));
+              ɵɵselect(0);
-              ɵɵtextBinding(1, ɵɵbind(ctx.n));
+              ɵɵtextBinding(ctx.s);
+              ɵɵselect(1);
+              ɵɵtextBinding(ctx.n);
             }
           }
         });
@@ -962,8 +964,10 @@ describe('providers', () => {
               ɵɵtext(1);
             }
             if (fs & RenderFlags.Update) {
-              ɵɵtextBinding(0, ɵɵbind(ctx.s));
+              ɵɵselect(0);
-              ɵɵtextBinding(1, ɵɵbind(ctx.n));
+              ɵɵtextBinding(ctx.s);
+              ɵɵselect(1);
+              ɵɵtextBinding(ctx.n);
             }
           },
           features: [
@@ -1043,7 +1047,8 @@ describe('providers', () => {
             ɵɵtext(0);
           }
           if (rf & RenderFlags.Update) {
-            ɵɵtextBinding(0, ɵɵinterpolation1('', cmp.s, ''));
+            ɵɵselect(0);
+            ɵɵtextInterpolate1('', cmp.s, '');
           }
         }
       });

tools/public_api_guard/core/core.d.ts

@@ -1051,7 +1051,7 @@ export declare function ɵɵtemplateRefExtractor(tNode: TNode, currentView: LVie
 
 export declare function ɵɵtext(index: number, value?: any): void;
 
-export declare function ɵɵtextBinding<T>(index: number, value: T | NO_CHANGE): void;
+export declare function ɵɵtextBinding<T>(value: T | NO_CHANGE): void;
 
 export declare function ɵɵtextInterpolate(v0: any): TsickleIssue1009;