feat(core): support spread expressions in object literals

Adds support for spread expressions inside of object literals. This can be handy when constructing maps for `class` bindings.

Author: crisbeto

packages/compiler-cli/test/compliance/test_cases/r3_compiler_compliance/components_and_directives/value_composition/GOLDEN_PARTIAL.js

@@ -588,6 +588,53 @@ export declare class MyModule {
     static ɵinj: i0.ɵɵInjectorDeclaration<MyModule>;
 }
 
+/****************************************************************************************************
+ * PARTIAL FILE: object_literal_spread.js
+ ****************************************************************************************************/
+import { Component } from '@angular/core';
+import * as i0 from "@angular/core";
+export class ObjectComp {
+    foo = {};
+    bar = {};
+    baz = {};
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "0.0.0-PLACEHOLDER", ngImport: i0, type: ObjectComp, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "0.0.0-PLACEHOLDER", type: ObjectComp, isStandalone: true, selector: "ng-component", ngImport: i0, template: `
+    @let simple = {...foo};
+    @let otherProps = {a: 1, ...foo, b: 2};
+    @let multipleSpreads = {...foo, a: 1, ...bar, ...baz, b: 2};
+    @let objectLiteral = {a: 1, ...{b: {...{c: 3}}}};
+
+    <!-- Use the objects so they don't get flagged as unused. -->
+    {{simple}} {{otherProps}} {{multipleSpreads}} {{objectLiteral}}
+  `, isInline: true });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "0.0.0-PLACEHOLDER", ngImport: i0, type: ObjectComp, decorators: [{
+            type: Component,
+            args: [{
+                    template: `
+    @let simple = {...foo};
+    @let otherProps = {a: 1, ...foo, b: 2};
+    @let multipleSpreads = {...foo, a: 1, ...bar, ...baz, b: 2};
+    @let objectLiteral = {a: 1, ...{b: {...{c: 3}}}};
+
+    <!-- Use the objects so they don't get flagged as unused. -->
+    {{simple}} {{otherProps}} {{multipleSpreads}} {{objectLiteral}}
+  `,
+                }]
+        }] });
+
+/****************************************************************************************************
+ * PARTIAL FILE: object_literal_spread.d.ts
+ ****************************************************************************************************/
+import * as i0 from "@angular/core";
+export declare class ObjectComp {
+    foo: {};
+    bar: {};
+    baz: {};
+    static ɵfac: i0.ɵɵFactoryDeclaration<ObjectComp, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<ObjectComp, "ng-component", never, {}, {}, never, never, true, never>;
+}
+
 /****************************************************************************************************
  * PARTIAL FILE: literal_nested_expression.js
  ****************************************************************************************************/

packages/compiler-cli/test/compliance/test_cases/r3_compiler_compliance/components_and_directives/value_composition/TEST_CASES.json

@@ -238,6 +238,19 @@
         }
       ]
     },
+    {
+      "description": "should support object literals with spread assignments",
+      "inputFiles": ["object_literal_spread.ts"],
+      "compilerOptions": {
+        "target": "es2022"
+      },
+      "expectations": [
+        {
+          "failureMessage": "Invalid object literal binding",
+          "files": ["object_literal_spread.js"]
+        }
+      ]
+    },
     {
       "description": "should support expressions nested deeply in object/array literals",
       "inputFiles": ["literal_nested_expression.ts"],

packages/compiler-cli/test/compliance/test_cases/r3_compiler_compliance/components_and_directives/value_composition/object_literal_spread.js

@@ -0,0 +1,25 @@
+const $c0$ = a0 => ({ ...a0 });
+const $c1$ = a0 => ({ a: 1, ...a0, b: 2 });
+const $c2$ = (a0, a1, a2) => ({ ...a0, a: 1, ...a1, ...a2, b: 2 });
+const $c3$ = () => ({ c: 3 });
+const $c4$ = a0 => ({ b: a0 });
+const $c5$ = a0 => ({ a: 1, ...a0 });
+
+…
+
+$r3$.ɵɵdefineComponent({
+  …
+  decls: 1,
+  vars: 19,
+  template: function ObjectComp_Template(rf, ctx) {
+    …
+    if (rf & 2) {
+      const simple_r1 = $r3$.ɵɵpureFunction1(4, $c0$, ctx.foo);
+      const otherProps_r2 = $r3$.ɵɵpureFunction1(6, $c1$, ctx.foo);
+      const multipleSpreads_r3 = $r3$.ɵɵpureFunction3(8, $c2$, ctx.foo, ctx.bar, ctx.baz);
+      const objectLiteral_r4 = $r3$.ɵɵpureFunction1(17, $c5$, $r3$.ɵɵpureFunction1(15, $c4$, $r3$.ɵɵpureFunction1(13, $c0$, $r3$.ɵɵpureFunction0(12, $c3$))));
+      …
+    }
+  },
+  …
+});

packages/compiler-cli/test/compliance/test_cases/r3_compiler_compliance/components_and_directives/value_composition/object_literal_spread.ts

@@ -0,0 +1,18 @@
+import {Component} from '@angular/core';
+
+@Component({
+  template: `
+    @let simple = {...foo};
+    @let otherProps = {a: 1, ...foo, b: 2};
+    @let multipleSpreads = {...foo, a: 1, ...bar, ...baz, b: 2};
+    @let objectLiteral = {a: 1, ...{b: {...{c: 3}}}};
+
+    <!-- Use the objects so they don't get flagged as unused. -->
+    {{simple}} {{otherProps}} {{multipleSpreads}} {{objectLiteral}}
+  `,
+})
+export class ObjectComp {
+  foo = {};
+  bar = {};
+  baz = {};
+}

packages/compiler-cli/test/ngtsc/template_typecheck_spec.ts

@@ -3340,6 +3340,31 @@ runInEachFileSystem(() => {
       expect(diags.length).toBe(0);
     });
 
+    it('should type check object spread assignments in templates', () => {
+      env.write(
+        'test.ts',
+        `
+        import {Component} from '@angular/core';
+
+        @Component({
+          selector: 'test',
+          template: '@let obj = {a: 1, ...foo}; {{checkObj(obj)}}',
+        })
+        export class TestCmp {
+          foo = {b: 'two'};
+
+          checkObj(obj: {a: number, b: number}) {}
+        }
+      `,
+      );
+
+      const diags = env.driveDiagnostics();
+      expect(diags.length).toEqual(1);
+      expect((diags[0].messageText as ts.DiagnosticMessageChain).messageText).toContain(
+        `Argument of type '{ b: string; a: number; }' is not assignable to parameter of type '{ a: number; b: number; }'.`,
+      );
+    });
+
     describe('template literals', () => {
       it('should treat template literals as strings', () => {
         env.write(

packages/compiler/src/expression_parser/parser.ts

@@ -32,6 +32,8 @@ import {
   LiteralArray,
   LiteralMap,
   LiteralMapKey,
+  LiteralMapPropertyKey,
+  LiteralMapSpreadKey,
   LiteralPrimitive,
   NonNullAssert,
   ParenthesizedExpression,
@@ -1195,11 +1197,23 @@ class _ParseAST {
       this.rbracesExpected++;
       do {
         const keyStart = this.inputIndex;
+
+        if (this.next.isOperator('...')) {
+          this.advance();
+          keys.push({
+            kind: 'spread',
+            span: this.span(keyStart),
+            sourceSpan: this.sourceSpan(keyStart),
+          } satisfies LiteralMapSpreadKey);
+          values.push(this.parsePipe());
+          continue;
+        }
+
         const quoted = this.next.isString();
         const key = this.expectIdentifierOrKeywordOrString();
         const keySpan = this.span(keyStart);
         const keySourceSpan = this.sourceSpan(keyStart);
-        const literalMapKey: LiteralMapKey = {
+        const literalMapKey: LiteralMapPropertyKey = {
           kind: 'property',
           key,
           quoted,

packages/compiler/test/expression_parser/parser_spec.ts

@@ -202,6 +202,13 @@ describe('parser', () => {
         expectActionError('{a["b"]}', 'expected } at column 3');
         expectActionError('{1234}', ' expected identifier, keyword, or string at column 2');
       });
+
+      it('should parse spread assignments in object literals', () => {
+        checkAction('{...foo}');
+        checkAction('{one: 1, ...foo, two: 2}');
+        checkAction('{...foo, middle: true, ...bar}');
+        checkAction('{...{...{...{foo: 1}}}}');
+      });
     });
 
     describe('member access', () => {
@@ -737,14 +744,15 @@ describe('parser', () => {
     });
 
     it('should record span for literal map keys', () => {
-      const ast = parseBinding('{one: 1, two: "the number two", three, "four": 4}');
+      const ast = parseBinding('{one: 1, two: "the number two", three, "four": 4, ...five}');
       const literal = ast.ast as LiteralMap;
       const getSource = (span: ParseSpan) => ast.source?.substring(span.start, span.end);
 
       expect(getSource(literal.keys[0].span)).toBe('one');
       expect(getSource(literal.keys[1].span)).toBe('two');
       expect(getSource(literal.keys[2].span)).toBe('three');
       expect(getSource(literal.keys[3].span)).toBe('"four"');
+      expect(getSource(literal.keys[4].span)).toBe('...');
     });
   });
 

packages/core/test/acceptance/integration_spec.ts

@@ -2741,6 +2741,23 @@ describe('acceptance integration tests', () => {
     expect(fixture.componentInstance.e!.defaultPrevented).toBe(false);
   });
 
+  it('should support object spread assigments in templates', () => {
+    @Component({
+      template: '@let obj = {a: {...foo}}; Hello, {{obj.a.b}}',
+    })
+    class TestComponent {
+      foo = {b: 'Frodo'};
+    }
+
+    const fixture = TestBed.createComponent(TestComponent);
+    fixture.detectChanges();
+    expect(fixture.nativeElement.textContent).toContain('Hello, Frodo');
+
+    fixture.componentInstance.foo = {b: 'Bilbo'};
+    fixture.detectChanges();
+    expect(fixture.nativeElement.textContent).toContain('Hello, Bilbo');
+  });
+
   it('should have correct operator precedence', () => {
     @Component({
       template: '{{1 + 10 ** -2 * 3}}',