fix(compiler-cli): support JIT transforms before other transforms modifying classes (#57262)

devversion · thePunderWoman · commit afb05ff1cb00 · 2024-08-05T14:45:19.000Z
Similar to a previous fix that intended to make the JIT transforms compatible with pre-transforms like e.g. Tsickle, we need to solve an additional issue where the class properties are synthetic and result in an `getSourceFile() => undefined` invocation that breaks the import insertion, causing errors like: ``` TypeError: Cannot read properties of undefined (reading 'fileName') ``` PR Close #57262
diff --git a/packages/compiler-cli/src/transformers/jit_transforms/initializer_api_transforms/input_function.ts b/packages/compiler-cli/src/transformers/jit_transforms/initializer_api_transforms/input_function.ts
@@ -30,6 +30,7 @@ import {
  */
 export const signalInputsTransform: PropertyTransform = (
   member,
+  sourceFile,
   host,
   factory,
   importTracker,
@@ -61,7 +62,6 @@ export const signalInputsTransform: PropertyTransform = (
     'transform': factory.createIdentifier('undefined'),
   };
 
-  const sourceFile = member.node.getSourceFile();
   const newDecorator = factory.createDecorator(
     factory.createCallExpression(
       createSyntheticAngularCoreDecoratorAccess(
diff --git a/packages/compiler-cli/src/transformers/jit_transforms/initializer_api_transforms/model_function.ts b/packages/compiler-cli/src/transformers/jit_transforms/initializer_api_transforms/model_function.ts
@@ -20,6 +20,7 @@ import {createSyntheticAngularCoreDecoratorAccess, PropertyTransform} from './tr
  */
 export const signalModelTransform: PropertyTransform = (
   member,
+  sourceFile,
   host,
   factory,
   importTracker,
@@ -56,7 +57,6 @@ export const signalModelTransform: PropertyTransform = (
     ),
   ]);
 
-  const sourceFile = member.node.getSourceFile();
   const inputDecorator = createDecorator(
     'Input',
     // Config is cast to `any` because `isSignal` will be private, and in case this
diff --git a/packages/compiler-cli/src/transformers/jit_transforms/initializer_api_transforms/output_function.ts b/packages/compiler-cli/src/transformers/jit_transforms/initializer_api_transforms/output_function.ts
@@ -22,6 +22,7 @@ import {createSyntheticAngularCoreDecoratorAccess, PropertyTransform} from './tr
  */
 export const initializerApiOutputTransform: PropertyTransform = (
   member,
+  sourceFile,
   host,
   factory,
   importTracker,
@@ -43,7 +44,6 @@ export const initializerApiOutputTransform: PropertyTransform = (
     return member.node;
   }
 
-  const sourceFile = member.node.getSourceFile();
   const newDecorator = factory.createDecorator(
     factory.createCallExpression(
       createSyntheticAngularCoreDecoratorAccess(
diff --git a/packages/compiler-cli/src/transformers/jit_transforms/initializer_api_transforms/query_functions.ts b/packages/compiler-cli/src/transformers/jit_transforms/initializer_api_transforms/query_functions.ts
@@ -40,6 +40,7 @@ const queryFunctionToDecorator: Record<QueryFunctionName, string> = {
  */
 export const queryFunctionsTransforms: PropertyTransform = (
   member,
+  sourceFile,
   host,
   factory,
   importTracker,
@@ -61,7 +62,6 @@ export const queryFunctionsTransforms: PropertyTransform = (
     return member.node;
   }
 
-  const sourceFile = member.node.getSourceFile();
   const callArgs = queryDefinition.call.arguments;
   const newDecorator = factory.createDecorator(
     factory.createCallExpression(
diff --git a/packages/compiler-cli/src/transformers/jit_transforms/initializer_api_transforms/transform.ts b/packages/compiler-cli/src/transformers/jit_transforms/initializer_api_transforms/transform.ts
@@ -81,6 +81,7 @@ function createTransformVisitor(
       if (angularDecorator !== undefined) {
         let hasChanged = false;
 
+        const sourceFile = originalNode.getSourceFile();
         const members = node.members.map((memberNode) => {
           if (!ts.isPropertyDeclaration(memberNode)) {
             return memberNode;
@@ -94,6 +95,7 @@ function createTransformVisitor(
           for (const transform of propertyTransforms) {
             const newNode = transform(
               {...member, node: memberNode},
+              sourceFile,
               host,
               ctx.factory,
               importTracker,
diff --git a/packages/compiler-cli/src/transformers/jit_transforms/initializer_api_transforms/transform_api.ts b/packages/compiler-cli/src/transformers/jit_transforms/initializer_api_transforms/transform_api.ts
@@ -15,6 +15,7 @@ import {ImportManager} from '../../../ngtsc/translator';
 /** Function that can be used to transform class properties. */
 export type PropertyTransform = (
   member: Pick<ClassMember, 'name' | 'accessLevel' | 'value'> & {node: ts.PropertyDeclaration},
+  sourceFile: ts.SourceFile,
   host: ReflectionHost,
   factory: ts.NodeFactory,
   importTracker: ImportedSymbolsTracker,
diff --git a/packages/compiler-cli/test/initializer_api_transforms_spec.ts b/packages/compiler-cli/test/initializer_api_transforms_spec.ts
@@ -318,6 +318,52 @@ describe('initializer API metadata transform', () => {
       `),
       );
     });
+
+    // Tsickle may transform the class via the downlevel decorator transform in advance in G3.
+    // In addition, the property declaration may be transformed too, to add `@type` JSDocs in G3.
+    it('should migrate if the class member and class is transformed in advance', () => {
+      const fakeDownlevelPreTransform = (ctx: ts.TransformationContext) => {
+        return (sf: ts.SourceFile) => {
+          const visitor = (node: ts.Node) => {
+            // Updating the `{transform: () => {}} arrow function triggers both transforms.
+            if (ts.isArrowFunction(node)) {
+              return ctx.factory.updateArrowFunction(
+                node,
+                node.modifiers,
+                node.typeParameters,
+                node.parameters,
+                node.type,
+                node.equalsGreaterThanToken,
+                ctx.factory.createBlock([]),
+              );
+            }
+            return ts.visitEachChild(node, visitor, ctx);
+          };
+          return ts.visitEachChild(sf, visitor, ctx);
+        };
+      };
+
+      const result = transform(
+        `
+        import {input, Directive} from '@angular/core';
+
+        @Directive({})
+        class MyDir {
+          someInput = input({transform: () => {}});
+        }
+      `,
+        false,
+        fakeDownlevelPreTransform,
+      );
+
+      expect(result).toContain(
+        omitLeadingWhitespace(`
+        __decorate([
+          i0.Input({ isSignal: true, alias: "someInput", required: false, transform: undefined })
+          ], MyDir.prototype, "someInput", void 0);
+      `),
+      );
+    });
   });
 
   describe('model()', () => {
