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

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 {
-  if (value !== NO_CHANGE) {
-    const lView = getLView();
-    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, renderStringify(value)) :
-                                     element.textContent = renderStringify(value);
+export function ɵɵtextBinding<T>(value: T | NO_CHANGE): void {
+  const lView = getLView();
+  const index = getSelectedIndex();
+  const bound = ɵɵbind(value);
+  if (bound !== NO_CHANGE) {
+    textBindingInternal(lView, index, renderStringify(bound));
   }
 }

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 {ɵɵtextBinding} from './text';
-
+import {TsickleIssue1009, textBindingInternal} from './shared';
 
 
 /**
@@ -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(
-      index, ɵɵinterpolation6(prefix, v0, i0, v1, i1, v2, i2, v3, i3, v4, i4, v5, suffix));
+  const lView = getLView();
+  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(
-      index, ɵɵinterpolation7(prefix, v0, i0, v1, i1, v2, i2, v3, i3, v4, i4, v5, i5, v6, suffix));
+  const lView = getLView();
+  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(
-      index,
-      ɵɵinterpolation8(prefix, v0, i0, v1, i1, v2, i2, v3, i3, v4, i4, v5, i5, v6, i6, v7, suffix));
+  const lView = getLView();
+  const interpolated =
+      ɵɵ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();
-
-  ɵɵtextBinding(index, ɵɵinterpolationV(values));
+  const lView = getLView();
+  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.