refactor(ivy): add ɵɵupdateSyntheticHostBinding command (#30670)

- Refactors `ɵɵcomponentHostSyntheticProperty` into `ɵɵupdateSyntheticHostBinding`, to better align it with other new instructions.

PR Close #30670

packages/compiler-cli/test/compliance/r3_compiler_compliance_spec.ts

@@ -444,19 +444,17 @@ describe('compiler compliance', () => {
             $r3$.ɵɵallocHostVars(14);
           }
           if (rf & 2) {
-            $r3$.ɵɵcomponentHostSyntheticProperty(elIndex, "@expansionHeight",
+            $r3$.ɵɵupdateSyntheticHostBinding("@expansionHeight",
-              $r3$.ɵɵbind(
                 $r3$.ɵɵpureFunction2(5, $_c1$, ctx.getExpandedState(),
                   $r3$.ɵɵpureFunction2(2, $_c0$, ctx.collapsedHeight, ctx.expandedHeight)
                 )
-              ), null, true
+              , null, true
             );
-            $r3$.ɵɵcomponentHostSyntheticProperty(elIndex, "@expansionWidth",
+            $r3$.ɵɵupdateSyntheticHostBinding("@expansionWidth",
-              $r3$.ɵɵbind(
                 $r3$.ɵɵpureFunction2(11, $_c1$, ctx.getExpandedState(),
                   $r3$.ɵɵpureFunction2(8, $_c2$, ctx.collapsedWidth, ctx.expandedWidth)
                 )
-              ), null, true
+              , null, true
             );
           }
         },

packages/compiler-cli/test/compliance/r3_view_compiler_styling_spec.ts

@@ -350,7 +350,7 @@ describe('compiler compliance: styling', () => {
               $r3$.ɵɵcomponentHostSyntheticListener("@myAnim.start", function MyAnimDir_animation_myAnim_start_HostBindingHandler($event) { return ctx.onStart(); });
               $r3$.ɵɵcomponentHostSyntheticListener("@myAnim.done", function MyAnimDir_animation_myAnim_done_HostBindingHandler($event) { return ctx.onDone(); });
             } if (rf & 2) {
-              $r3$.ɵɵcomponentHostSyntheticProperty(elIndex, "@myAnim", $r3$.ɵɵbind(ctx.myAnimState), null, true);
+              $r3$.ɵɵupdateSyntheticHostBinding("@myAnim", ctx.myAnimState, null, true);
             }
           }
           …

packages/compiler/src/render3/r3_identifiers.ts

@@ -33,8 +33,8 @@ export class Identifiers {
 
   static select: o.ExternalReference = {name: 'ɵɵselect', moduleName: CORE};
 
-  static componentHostSyntheticProperty:
+  static updateSyntheticHostBinding:
-      o.ExternalReference = {name: 'ɵɵcomponentHostSyntheticProperty', moduleName: CORE};
+      o.ExternalReference = {name: 'ɵɵupdateSyntheticHostBinding', moduleName: CORE};
 
   static componentHostSyntheticListener:
       o.ExternalReference = {name: 'ɵɵcomponentHostSyntheticListener', moduleName: CORE};

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

@@ -667,18 +667,7 @@ function createHostBindingsFunction(
           sanitizerFn = resolveSanitizationFn(securityContexts[0], isAttribute);
         }
       }
-      const isInstructionWithoutElementIndex =
+      const instructionParams = [o.literal(bindingName), bindingExpr.currValExpr];
-          instruction === R3.property || instruction === R3.attribute;
-      const instructionParams: o.Expression[] = isInstructionWithoutElementIndex ?
-          [
-            o.literal(bindingName),
-            bindingExpr.currValExpr,
-          ] :
-          [
-            elVarExp,
-            o.literal(bindingName),
-            o.importExpr(R3.bind).callFn([bindingExpr.currValExpr]),
-          ];
       if (sanitizerFn) {
         instructionParams.push(sanitizerFn);
       }
@@ -783,7 +772,7 @@ function getBindingNameAndInstruction(binding: ParsedProperty):
       // host bindings that have a synthetic property (e.g. @foo) should always be rendered
       // in the context of the component and not the parent. Therefore there is a special
       // compatibility instruction available for this purpose.
-      instruction = R3.componentHostSyntheticProperty;
+      instruction = R3.updateSyntheticHostBinding;
     } else {
       instruction = R3.property;
     }

packages/core/src/core_render3_private_export.ts

@@ -120,7 +120,7 @@ export {
   ɵɵpropertyInterpolate7,
   ɵɵpropertyInterpolate8,
   ɵɵpropertyInterpolateV,
-  ɵɵcomponentHostSyntheticProperty,
+  ɵɵupdateSyntheticHostBinding,
   ɵɵcomponentHostSyntheticListener,
   ɵɵprojectionDef,
   ɵɵreference,

packages/core/src/render3/index.ts

@@ -39,7 +39,6 @@ export {
   ɵɵclassMap,
   ɵɵclassProp,
   ɵɵcomponentHostSyntheticListener,
-  ɵɵcomponentHostSyntheticProperty,
 
   ɵɵcontainer,
   ɵɵcontainerRefreshEnd,
@@ -119,6 +118,8 @@ export {
   ɵɵtextInterpolate7,
   ɵɵtextInterpolate8,
   ɵɵtextInterpolateV,
+
+  ɵɵupdateSyntheticHostBinding,
 } from './instructions/all';
 export {RenderFlags} from './interfaces/definition';
 export {CssSelectorList, ProjectionSlots} from './interfaces/projection';

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

@@ -110,10 +110,12 @@ export function ɵɵelementProperty<T>(
  *
  * @codeGenApi
  */
-export function ɵɵcomponentHostSyntheticProperty<T>(
+export function ɵɵupdateSyntheticHostBinding<T>(
-    index: number, propName: string, value: T | NO_CHANGE, sanitizer?: SanitizerFn | null,
+    propName: string, value: T | NO_CHANGE, sanitizer?: SanitizerFn | null, nativeOnly?: boolean) {
-    nativeOnly?: boolean) {
+  const index = getSelectedIndex();
-  if (value !== NO_CHANGE) {
+  // TODO(benlesh): remove bind call here.
-    elementPropertyInternal(index, propName, value, sanitizer, nativeOnly, loadComponentRenderer);
+  const bound = ɵɵbind(value);
+  if (bound !== NO_CHANGE) {
+    elementPropertyInternal(index, propName, bound, sanitizer, nativeOnly, loadComponentRenderer);
   }
 }

packages/core/src/render3/jit/environment.ts

@@ -88,7 +88,7 @@ export const angularCoreEnv: {[name: string]: Function} =
        'ɵɵload': r3.ɵɵload,
        'ɵɵprojection': r3.ɵɵprojection,
        'ɵɵelementProperty': r3.ɵɵelementProperty,
-       'ɵɵcomponentHostSyntheticProperty': r3.ɵɵcomponentHostSyntheticProperty,
+       'ɵɵupdateSyntheticHostBinding': r3.ɵɵupdateSyntheticHostBinding,
        'ɵɵcomponentHostSyntheticListener': r3.ɵɵcomponentHostSyntheticListener,
        'ɵɵpipeBind1': r3.ɵɵpipeBind1,
        'ɵɵpipeBind2': r3.ɵɵpipeBind2,

tools/public_api_guard/core/core.d.ts

@@ -712,8 +712,6 @@ export declare type ɵɵComponentDefWithMeta<T, Selector extends String, ExportA
 
 export declare function ɵɵcomponentHostSyntheticListener<T>(eventName: string, listenerFn: (e?: any) => any, useCapture?: boolean, eventTargetResolver?: GlobalTargetResolver): void;
 
-export declare function ɵɵcomponentHostSyntheticProperty<T>(index: number, propName: string, value: T | NO_CHANGE, sanitizer?: SanitizerFn | null, nativeOnly?: boolean): void;
-
 export declare function ɵɵcontainer(index: number): void;
 
 export declare function ɵɵcontainerRefreshEnd(): void;
@@ -1077,6 +1075,8 @@ export declare function ɵɵtextInterpolate8(prefix: string, v0: any, i0: string
 
 export declare function ɵɵtextInterpolateV(values: any[]): TsickleIssue1009;
 
+export declare function ɵɵupdateSyntheticHostBinding<T>(propName: string, value: T | NO_CHANGE, sanitizer?: SanitizerFn | null, nativeOnly?: boolean): void;
+
 export declare function ɵɵviewQuery<T>(predicate: Type<any> | string[], descend: boolean, read: any): QueryList<T>;
 
 export declare const PACKAGE_ROOT_URL: InjectionToken<string>;