fix(core): expose input transform function on ComponentFactory and ComponentMirror (#50713)

crisbeto · AndrewKushnir · commit 29340a067896 · 2023-06-22T09:47:15.000-07:00
Exposes the function used to transform an input on `ComponentFactory.inputs` and `ComponentMirror.inputs`. We'll need this to support input transforms in `elements`. PR Close #50713
diff --git a/goldens/public-api/core/index.md b/goldens/public-api/core/index.md
@@ -225,6 +225,7 @@ export abstract class ComponentFactory<C> {
     abstract get inputs(): {
         propName: string;
         templateName: string;
+        transform?: (value: any) => any;
     }[];
     abstract get ngContentSelectors(): string[];
     abstract get outputs(): {
@@ -246,6 +247,7 @@ export interface ComponentMirror<C> {
     get inputs(): ReadonlyArray<{
         readonly propName: string;
         readonly templateName: string;
+        readonly transform?: (value: any) => any;
     }>;
     get isStandalone(): boolean;
     get ngContentSelectors(): ReadonlyArray<string>;
diff --git a/packages/core/src/linker/component_factory.ts b/packages/core/src/linker/component_factory.ts
@@ -106,7 +106,11 @@ export abstract class ComponentFactory<C> {
   /**
    * The inputs of the component.
    */
-  abstract get inputs(): {propName: string, templateName: string}[];
+  abstract get inputs(): {
+    propName: string,
+    templateName: string,
+    transform?: (value: any) => any,
+  }[];
   /**
    * The outputs of the component.
    */
diff --git a/packages/core/src/render3/component.ts b/packages/core/src/render3/component.ts
@@ -106,7 +106,11 @@ export interface ComponentMirror<C> {
   /**
    * The inputs of the component.
    */
-  get inputs(): ReadonlyArray<{readonly propName: string, readonly templateName: string}>;
+  get inputs(): ReadonlyArray<{
+    readonly propName: string,
+    readonly templateName: string,
+    readonly transform?: (value: any) => any,
+  }>;
   /**
    * The outputs of the component.
    */
@@ -178,7 +182,11 @@ export function reflectComponentType<C>(component: Type<C>): ComponentMirror<C>|
     get type(): Type<C> {
       return factory.componentType;
     },
-    get inputs(): ReadonlyArray<{propName: string, templateName: string}> {
+    get inputs(): ReadonlyArray<{
+      propName: string,
+      templateName: string,
+      transform?: (value: any) => any,
+    }> {
       return factory.inputs;
     },
     get outputs(): ReadonlyArray<{propName: string, templateName: string}> {
diff --git a/packages/core/src/render3/component_ref.ts b/packages/core/src/render3/component_ref.ts
@@ -118,8 +118,28 @@ export class ComponentFactory<T> extends AbstractComponentFactory<T> {
   override ngContentSelectors: string[];
   isBoundToModule: boolean;
 
-  override get inputs(): {propName: string; templateName: string;}[] {
-    return toRefArray(this.componentDef.inputs);
+  override get inputs(): {
+    propName: string,
+    templateName: string,
+    transform?: (value: any) => any,
+  }[] {
+    const componentDef = this.componentDef;
+    const inputTransforms = componentDef.inputTransforms;
+    const refArray = toRefArray(componentDef.inputs) as {
+      propName: string,
+      templateName: string,
+      transform?: (value: any) => any,
+    }[];
+
+    if (inputTransforms !== null) {
+      for (const input of refArray) {
+        if (inputTransforms.hasOwnProperty(input.propName)) {
+          input.transform = inputTransforms[input.propName];
+        }
+      }
+    }
+
+    return refArray;
   }
 
   override get outputs(): {propName: string; templateName: string;}[] {
diff --git a/packages/core/test/acceptance/component_spec.ts b/packages/core/test/acceptance/component_spec.ts
@@ -924,6 +924,8 @@ describe('component', () => {
 
   describe('reflectComponentType', () => {
     it('should create an ComponentMirror for a standalone component', () => {
+      function transformFn() {}
+
       @Component({
         selector: 'standalone-component',
         standalone: true,
@@ -937,6 +939,7 @@ describe('component', () => {
         outputs: ['output-a', 'output-b:output-alias-b'],
       })
       class StandaloneComponent {
+        @Input({alias: 'input-alias-c', transform: transformFn}) inputC: unknown;
       }
 
       const mirror = reflectComponentType(StandaloneComponent)!;
@@ -946,7 +949,8 @@ describe('component', () => {
       expect(mirror.isStandalone).toEqual(true);
       expect(mirror.inputs).toEqual([
         {propName: 'input-a', templateName: 'input-a'},
-        {propName: 'input-b', templateName: 'input-alias-b'}
+        {propName: 'input-b', templateName: 'input-alias-b'},
+        {propName: 'inputC', templateName: 'input-alias-c', transform: transformFn},
       ]);
       expect(mirror.outputs).toEqual([
         {propName: 'output-a', templateName: 'output-a'},
@@ -958,6 +962,8 @@ describe('component', () => {
     });
 
     it('should create an ComponentMirror for a non-standalone component', () => {
+      function transformFn() {}
+
       @Component({
         selector: 'non-standalone-component',
         template: `
@@ -970,6 +976,7 @@ describe('component', () => {
         outputs: ['output-a', 'output-b:output-alias-b'],
       })
       class NonStandaloneComponent {
+        @Input({alias: 'input-alias-c', transform: transformFn}) inputC: unknown;
       }
 
       const mirror = reflectComponentType(NonStandaloneComponent)!;
@@ -979,7 +986,8 @@ describe('component', () => {
       expect(mirror.isStandalone).toEqual(false);
       expect(mirror.inputs).toEqual([
         {propName: 'input-a', templateName: 'input-a'},
-        {propName: 'input-b', templateName: 'input-alias-b'}
+        {propName: 'input-b', templateName: 'input-alias-b'},
+        {propName: 'inputC', templateName: 'input-alias-c', transform: transformFn},
       ]);
       expect(mirror.outputs).toEqual([
         {propName: 'output-a', templateName: 'output-a'},
diff --git a/packages/core/test/render3/component_ref_spec.ts b/packages/core/test/render3/component_ref_spec.ts
@@ -51,6 +51,8 @@ describe('ComponentFactory', () => {
     });
 
     it('should correctly populate defined properties', () => {
+      function transformFn() {}
+
       @Component({
         selector: 'test[foo], bar',
         standalone: true,
@@ -65,6 +67,8 @@ describe('ComponentFactory', () => {
 
         @Input('input-attr-2') in2: unknown;
 
+        @Input({alias: 'input-attr-3', transform: transformFn}) in3: unknown;
+
         @Output() out1: unknown;
 
         @Output('output-attr-2') out2: unknown;
@@ -79,6 +83,7 @@ describe('ComponentFactory', () => {
       expect(cf.inputs).toEqual([
         {propName: 'in1', templateName: 'in1'},
         {propName: 'in2', templateName: 'input-attr-2'},
+        {propName: 'in3', templateName: 'input-attr-3', transform: transformFn},
       ]);
       expect(cf.outputs).toEqual([
         {propName: 'out1', templateName: 'out1'},
