feat(ivy): support inputs & outputs with aliases in component decorators (#27350)

PR Close #27350

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

@@ -30,7 +30,7 @@ import {typeWithParameters} from '../util';
 import {R3ComponentDef, R3ComponentMetadata, R3DirectiveDef, R3DirectiveMetadata, R3QueryMetadata} from './api';
 import {StylingBuilder, StylingInstruction} from './styling';
 import {BindingScope, TemplateDefinitionBuilder, ValueConverter, renderFlagCheckIfStmt} from './template';
-import {CONTEXT_NAME, DefinitionMap, RENDER_FLAGS, TEMPORARY_NAME, asLiteral, conditionallyCreateMapObjectLiteral, getQueryPredicate, mapToExpression, temporaryAllocator} from './util';
+import {CONTEXT_NAME, DefinitionMap, RENDER_FLAGS, TEMPORARY_NAME, asLiteral, conditionallyCreateMapObjectLiteral, getQueryPredicate, temporaryAllocator} from './util';
 
 const EMPTY_ARRAY: any[] = [];
 

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

@@ -8,8 +8,8 @@
 
 import {ConstantPool} from '../../constant_pool';
 import * as o from '../../output/output_ast';
+import {splitAtColon} from '../../util';
 import * as t from '../r3_ast';
-
 import {R3QueryMetadata} from './api';
 import {isI18nAttribute} from './i18n/util';
 
@@ -75,9 +75,13 @@ export function conditionallyCreateMapObjectLiteral(keys: {[key: string]: string
   return null;
 }
 
-export function mapToExpression(map: {[key: string]: any}, quoted = false): o.Expression {
-  return o.literalMap(
-      Object.getOwnPropertyNames(map).map(key => ({key, quoted, value: asLiteral(map[key])})));
+function mapToExpression(map: {[key: string]: any}): o.Expression {
+  return o.literalMap(Object.getOwnPropertyNames(map).map(key => {
+    // canonical syntax: `dirProp: elProp`
+    // if there is no `:`, use dirProp = elProp
+    const parts = splitAtColon(key, [key, map[key]]);
+    return {key: parts[0], quoted: false, value: asLiteral(parts[1])};
+  }));
 }
 
 /**

packages/core/src/render3/instructions.ts

@@ -958,7 +958,7 @@ export function elementProperty<T>(
     if (isComponent(tNode)) markDirtyIfOnPush(lView, index + HEADER_OFFSET);
     if (ngDevMode) {
       if (tNode.type === TNodeType.Element || tNode.type === TNodeType.Container) {
-        setNgReflectProperties(lView, element, tNode.type, propName, value);
+        setNgReflectProperties(lView, element, tNode.type, dataValue, value);
       }
     }
   } else if (tNode.type === TNodeType.Element) {
@@ -1033,9 +1033,11 @@ function setInputsForProperty(lView: LView, inputs: PropertyAliasValue, value: a
 }
 
 function setNgReflectProperties(
-    lView: LView, element: RElement | RComment, type: TNodeType, propName: string, value: any) {
+    lView: LView, element: RElement | RComment, type: TNodeType, inputs: PropertyAliasValue,
+    value: any) {
+  for (let i = 0; i < inputs.length; i += 2) {
     const renderer = lView[RENDERER];
-  const attrName = normalizeDebugBindingName(propName);
+    const attrName = normalizeDebugBindingName(inputs[i + 1] as string);
     const debugValue = normalizeDebugBindingValue(value);
     if (type === TNodeType.Element) {
       isProceduralRenderer(renderer) ?
@@ -1049,13 +1051,14 @@ function setNgReflectProperties(
         (element as RComment).textContent = value;
       }
     }
+  }
 }
 
 /**
  * Consolidates all inputs or outputs of all directives on this logical node.
  *
- * @param number tNodeFlags node flags
- * @param Direction direction whether to consider inputs or outputs
+ * @param tNodeFlags node flags
+ * @param direction whether to consider inputs or outputs
  * @returns PropertyAliases|null aggregate of all properties if any, `null` otherwise
  */
 function generatePropertyAliases(tNode: TNode, direction: BindingDirection): PropertyAliases|null {

packages/core/test/linker/integration_spec.ts

@@ -238,8 +238,7 @@ function declareTests(config?: {useJit: boolean}) {
         expect(getDOM().getProperty(nativeEl, 'htmlFor')).toBe('foo');
       });
 
-      fixmeIvy('FW-587: Inputs with aliases in component decorators don\'t work')
-          .it('should consume directive watch expression change.', () => {
+      it('should consume directive watch expression change.', () => {
         TestBed.configureTestingModule({declarations: [MyComp, MyDir]});
         const template = '<span>' +
             '<div my-dir [elprop]="ctxProp"></div>' +
@@ -263,8 +262,7 @@ function declareTests(config?: {useJit: boolean}) {
       });
 
       describe('pipes', () => {
-        fixmeIvy('FW-587: Inputs with aliases in component decorators don\'t work')
-            .it('should support pipes in bindings', () => {
+        it('should support pipes in bindings', () => {
           TestBed.configureTestingModule({declarations: [MyComp, MyDir, DoublePipe]});
           const template = '<div my-dir #dir="mydir" [elprop]="ctxProp | double"></div>';
           TestBed.overrideComponent(MyComp, {set: {template}});
@@ -290,8 +288,7 @@ function declareTests(config?: {useJit: boolean}) {
       });
 
       // GH issue 328 - https://github.com/angular/angular/issues/328
-      fixmeIvy('FW-587: Inputs with aliases in component decorators don\'t work')
-          .it('should support different directive types on a single node', () => {
+      it('should support different directive types on a single node', () => {
         TestBed.configureTestingModule({declarations: [MyComp, ChildComp, MyDir]});
         const template = '<child-cmp my-dir [elprop]="ctxProp"></child-cmp>';
         TestBed.overrideComponent(MyComp, {set: {template}});
@@ -1688,8 +1685,7 @@ function declareTests(config?: {useJit: boolean}) {
     });
 
     describe('logging property updates', () => {
-      fixmeIvy('FW-587: Inputs with aliases in component decorators don\'t work')
-          .it('should reflect property values as attributes', () => {
+      it('should reflect property values as attributes', () => {
         TestBed.configureTestingModule({declarations: [MyComp, MyDir]});
         const template = '<div>' +
             '<div my-dir [elprop]="ctxProp"></div>' +
@@ -1726,9 +1722,7 @@ function declareTests(config?: {useJit: boolean}) {
             .toContain('"ng\-reflect\-ng\-if"\: "true"');
       });
 
-      // also affected by FW-587: Inputs with aliases in component decorators don't work
-      fixmeIvy('FW-664: ng-reflect-* is not supported')
-          .it('should indicate when toString() throws', () => {
+      it('should indicate when toString() throws', () => {
         TestBed.configureTestingModule({declarations: [MyComp, MyDir]});
         const template = '<div my-dir [elprop]="toStringThrow"></div>';
         TestBed.overrideComponent(MyComp, {set: {template}});