From 456f23f76af34c878aa8eb5cd952d89eee834827 Mon Sep 17 00:00:00 2001 From: Alex Rickabaugh Date: Tue, 9 Oct 2018 10:45:27 -0700 Subject: [PATCH] fix(ivy): reflect animations field directly into the output definition (#26322) The 'animations' field of @Component metadata should be copied directly into the ngComponentDef for that component and should not pass through static resolution. Previously the animations array was statically resolved and then the values were translated back when generating ngComponentDef. PR Close #26322 --- .../src/ngtsc/annotations/src/component.ts | 16 ++++------------ .../compliance/r3_view_compiler_styling_spec.ts | 2 +- packages/compiler/src/render3/view/api.ts | 2 +- packages/compiler/src/render3/view/compiler.ts | 8 +++----- packages/core/src/render3/jit/directive.ts | 6 ++++-- 5 files changed, 13 insertions(+), 21 deletions(-) diff --git a/packages/compiler-cli/src/ngtsc/annotations/src/component.ts b/packages/compiler-cli/src/ngtsc/annotations/src/component.ts index 2ea9bb325c..293b72fba4 100644 --- a/packages/compiler-cli/src/ngtsc/annotations/src/component.ts +++ b/packages/compiler-cli/src/ngtsc/annotations/src/component.ts @@ -182,12 +182,9 @@ export class ComponentDecoratorHandler implements component.get('encapsulation') !, this.reflector, this.checker) as string); } - let animations: any[]|null = null; + let animations: Expression|null = null; if (component.has('animations')) { - animations = - (staticallyResolve(component.get('animations') !, this.reflector, this.checker) as any | - null[]); - animations = animations ? animations.map(entry => convertMapToStringMap(entry)) : null; + animations = new WrappedNodeExpr(component.get('animations') !); } return { @@ -203,7 +200,8 @@ export class ComponentDecoratorHandler implements // analyzed and the full compilation scope for the component can be realized. pipes: EMPTY_MAP, directives: EMPTY_MAP, - wrapDirectivesInClosure: false, animations, + wrapDirectivesInClosure: false, // + animations, }, parsedTemplate: template.nodes, }, @@ -267,9 +265,3 @@ export class ComponentDecoratorHandler implements return meta; } } - -function convertMapToStringMap(map: Map): {[key: string]: T} { - const stringMap: {[key: string]: T} = {}; - map.forEach((value: T, key: string) => { stringMap[key] = value; }); - return stringMap; -} diff --git a/packages/compiler-cli/test/compliance/r3_view_compiler_styling_spec.ts b/packages/compiler-cli/test/compliance/r3_view_compiler_styling_spec.ts index 491488e059..7557727261 100644 --- a/packages/compiler-cli/test/compliance/r3_view_compiler_styling_spec.ts +++ b/packages/compiler-cli/test/compliance/r3_view_compiler_styling_spec.ts @@ -133,7 +133,7 @@ describe('compiler compliance: styling', () => { vars: 0, template: function MyComponent_Template(rf, $ctx$) { }, - animations: [{name: "foo123"}, {name: "trigger123"}] + animations: [{name: 'foo123'}, {name: 'trigger123'}] }); `; diff --git a/packages/compiler/src/render3/view/api.ts b/packages/compiler/src/render3/view/api.ts index c0f554efc6..44265e2b2d 100644 --- a/packages/compiler/src/render3/view/api.ts +++ b/packages/compiler/src/render3/view/api.ts @@ -179,7 +179,7 @@ export interface R3ComponentMetadata extends R3DirectiveMetadata { /** * A collection of animation triggers that will be used in the component template. */ - animations: {[key: string]: any}[]|null; + animations: o.Expression|null; } /** diff --git a/packages/compiler/src/render3/view/compiler.ts b/packages/compiler/src/render3/view/compiler.ts index cba03fbc32..e96d632aa9 100644 --- a/packages/compiler/src/render3/view/compiler.ts +++ b/packages/compiler/src/render3/view/compiler.ts @@ -244,9 +244,8 @@ export function compileComponentFromMetadata( } // e.g. `animations: [trigger('123', [])]` - if (meta.animations) { - const animationValues = meta.animations.map(entry => mapToExpression(entry)); - definitionMap.set('animations', o.literalArr(animationValues)); + if (meta.animations !== null) { + definitionMap.set('animations', meta.animations); } // On the type side, remove newlines from the selector as it will need to fit into a TypeScript @@ -301,7 +300,6 @@ export function compileComponentFromRender2( const definitionField = outputCtx.constantPool.propertyNameOf(DefinitionKind.Component); const summary = component.toSummary(); - const animations = summary.template && summary.template.animations || null; // Compute the R3ComponentMetadata from the CompileDirectiveMetadata const meta: R3ComponentMetadata = { @@ -320,7 +318,7 @@ export function compileComponentFromRender2( styles: (summary.template && summary.template.styles) || EMPTY_ARRAY, encapsulation: (summary.template && summary.template.encapsulation) || core.ViewEncapsulation.Emulated, - animations + animations: null, }; const res = compileComponentFromMetadata(meta, outputCtx.constantPool, bindingParser); diff --git a/packages/core/src/render3/jit/directive.ts b/packages/core/src/render3/jit/directive.ts index 74d482b503..e2db667052 100644 --- a/packages/core/src/render3/jit/directive.ts +++ b/packages/core/src/render3/jit/directive.ts @@ -65,6 +65,9 @@ export function compileComponent(type: Type, metadata: Component): void { `Errors during JIT compilation of template for ${stringify(type)}: ${errors}`); } + const animations = + metadata.animations !== null ? new WrappedNodeExpr(metadata.animations) : null; + // Compile the component metadata, including template, into an expression. // TODO(alxhub): implement inputs, outputs, queries, etc. const res = compileR3Component( @@ -76,8 +79,7 @@ export function compileComponent(type: Type, metadata: Component): void { viewQueries: [], wrapDirectivesInClosure: false, styles: metadata.styles || [], - encapsulation: metadata.encapsulation || ViewEncapsulation.Emulated, - animations: metadata.animations || null + encapsulation: metadata.encapsulation || ViewEncapsulation.Emulated, animations, }, constantPool, makeBindingParser()); const preStatements = [...constantPool.statements, ...res.statements];