fix(compiler-cli): Support resolve animation name from the DTS (#45107)

ivanwonder · atscott · commit c0778b4dfc1c · 2022-02-22T10:21:39.000-08:00
Before this, the compiler resolves the value in the DTS as dynamic. If the `trigger` is imported from `@angular/animations`, this PR will use FFR to simulate the actual implementation in JS and extracts the animation name. PR Close #45107
diff --git a/packages/compiler-cli/src/ngtsc/annotations/component/src/handler.ts b/packages/compiler-cli/src/ngtsc/annotations/component/src/handler.ts
@@ -35,7 +35,7 @@ import {ComponentAnalysisData, ComponentResolutionData} from './metadata';
 import {_extractTemplateStyleUrls, extractComponentStyleUrls, extractStyleResources, extractTemplate, makeResourceNotFoundError, ParsedTemplateWithSource, parseTemplateDeclaration, preloadAndParseTemplate, ResourceTypeForDiagnostics, StyleUrlMeta, transformDecoratorToInlineResources} from './resources';
 import {scopeTemplate} from './scope';
 import {ComponentSymbol} from './symbol';
-import {collectAnimationNames, validateAndFlattenComponentImports} from './util';
+import {animationTriggerResolver, collectAnimationNames, validateAndFlattenComponentImports} from './util';
 
 const EMPTY_MAP = new Map<string, Expression>();
 const EMPTY_ARRAY: any[] = [];
@@ -210,8 +210,10 @@ export class ComponentDecoratorHandler implements
     let animations: Expression|null = null;
     let animationTriggerNames: AnimationTriggerNames|null = null;
     if (component.has('animations')) {
-      animations = new WrappedNodeExpr(component.get('animations')!);
-      const animationsValue = this.evaluator.evaluate(component.get('animations')!);
+      const animationExpression = component.get('animations')!;
+      animations = new WrappedNodeExpr(animationExpression);
+      const animationsValue =
+          this.evaluator.evaluate(animationExpression, animationTriggerResolver);
       animationTriggerNames = {includesDynamicAnimations: false, staticTriggerNames: []};
       collectAnimationNames(animationsValue, animationTriggerNames);
     }
diff --git a/packages/compiler-cli/src/ngtsc/annotations/component/src/util.ts b/packages/compiler-cli/src/ngtsc/annotations/component/src/util.ts
@@ -10,7 +10,7 @@ import {AnimationTriggerNames} from '@angular/compiler';
 import ts from 'typescript';
 
 import {Reference} from '../../../imports';
-import {ResolvedValue} from '../../../partial_evaluator';
+import {ForeignFunctionResolver, ResolvedValue} from '../../../partial_evaluator';
 import {ClassDeclaration, isNamedClassDeclaration} from '../../../reflection';
 import {createValueHasWrongTypeError} from '../../common';
 
@@ -38,6 +38,28 @@ export function collectAnimationNames(
   }
 }
 
+export function isAngularAnimationsReference(reference: Reference, symbolName: string): boolean {
+  return reference.ownedByModuleGuess === '@angular/animations' &&
+      reference.debugName === symbolName;
+}
+
+export const animationTriggerResolver: ForeignFunctionResolver = (ref, args) => {
+  const animationTriggerMethodName = 'trigger';
+  if (!isAngularAnimationsReference(ref, animationTriggerMethodName)) {
+    return null;
+  }
+  const triggerNameExpression = args[0];
+  if (!triggerNameExpression) {
+    return null;
+  }
+  const factory = ts.factory;
+  return factory.createObjectLiteralExpression(
+      [
+        factory.createPropertyAssignment(factory.createIdentifier('name'), triggerNameExpression),
+      ],
+      true);
+};
+
 export function validateAndFlattenComponentImports(imports: ResolvedValue, expr: ts.Expression): {
   imports: Reference<ClassDeclaration>[],
   diagnostics: ts.Diagnostic[],
diff --git a/packages/compiler-cli/src/ngtsc/annotations/component/test/component_spec.ts b/packages/compiler-cli/src/ngtsc/annotations/component/test/component_spec.ts
@@ -408,13 +408,16 @@ runInEachFileSystem(() => {
           name: _('/node_modules/@angular/core/index.d.ts'),
           contents: 'export const Component: any;',
         },
+        {
+          name: _('/node_modules/@angular/animations/index.d.ts'),
+          contents: 'export declare function trigger(name: any): any',
+        },
         {
           name: _('/entry.ts'),
           contents: `
           import {Component} from '@angular/core';
-          function trigger(name) {
-            return {name};
-          }
+          import {trigger} from '@angular/animations';
+
           @Component({
             template: '',
             animations: [
@@ -447,13 +450,16 @@ runInEachFileSystem(() => {
           name: _('/node_modules/@angular/core/index.d.ts'),
           contents: 'export const Component: any;',
         },
+        {
+          name: _('/node_modules/@angular/animations/index.d.ts'),
+          contents: 'export declare function trigger(name: any): any',
+        },
         {
           name: _('/entry.ts'),
           contents: `
           import {Component} from '@angular/core';
-          function trigger(name) {
-            return {name};
-          }
+          import {trigger} from '@angular/animations';
+
           function buildComplexAnimations() {
             const name = 'complex';
             return [trigger(name)];
@@ -488,13 +494,16 @@ runInEachFileSystem(() => {
           name: _('/node_modules/@angular/core/index.d.ts'),
           contents: 'export const Component: any;',
         },
+        {
+          name: _('/node_modules/@angular/animations/index.d.ts'),
+          contents: 'export declare function trigger(name: any): any',
+        },
         {
           name: _('/entry.ts'),
           contents: `
           import {Component} from '@angular/core';
-          function trigger(name) {
-            return {name};
-          }
+          import {trigger} from '@angular/animations';
+
           function buildComplexAnimations() {
             const name = 'complex';
             return [trigger(name)];
