fix(42368): Spread syntax is always converted to Object.assign for ES2018 and up

src/compiler/transformers/jsx.ts

@@ -292,26 +292,38 @@ namespace ts {
                 // When there are no attributes, React wants "null"
             }
             else {
-                // Map spans of JsxAttribute nodes into object literals and spans
-                // of JsxSpreadAttribute nodes into expressions.
-                const segments = flatten<Expression | ObjectLiteralExpression>(
-                    spanMap(attrs, isJsxSpreadAttribute, (attrs, isSpread) => isSpread
-                        ? map(attrs, transformJsxSpreadAttributeToExpression)
-                        : factory.createObjectLiteralExpression(map(attrs, transformJsxAttributeToObjectLiteralElement))
-                    )
-                );
-
-                if (isJsxSpreadAttribute(attrs[0])) {
-                    // We must always emit at least one object literal before a spread
-                    // argument.factory.createObjectLiteral
-                    segments.unshift(factory.createObjectLiteralExpression());
+                const target = compilerOptions.target;
+                if (target && target >= ScriptTarget.ES2018) {
+                    objectProperties = factory.createObjectLiteralExpression(
+                        flatten<SpreadAssignment | PropertyAssignment>(
+                            spanMap(attrs, isJsxSpreadAttribute, (attrs, isSpread) =>
+                                isSpread ? map(attrs, transformJsxSpreadAttributeToSpreadAssignment) : map(attrs, transformJsxAttributeToObjectLiteralElement)
+                            )
+                        )
+                    );
                 }
+                else {
+                    // Map spans of JsxAttribute nodes into object literals and spans
+                    // of JsxSpreadAttribute nodes into expressions.
+                    const segments = flatten<Expression | ObjectLiteralExpression>(
+                        spanMap(attrs, isJsxSpreadAttribute, (attrs, isSpread) => isSpread
+                            ? map(attrs, transformJsxSpreadAttributeToExpression)
+                            : factory.createObjectLiteralExpression(map(attrs, transformJsxAttributeToObjectLiteralElement))
+                        )
+                    );
+
+                    if (isJsxSpreadAttribute(attrs[0])) {
+                        // We must always emit at least one object literal before a spread
+                        // argument.factory.createObjectLiteral
+                        segments.unshift(factory.createObjectLiteralExpression());
+                    }
 
-                // Either emit one big object literal (no spread attribs), or
-                // a call to the __assign helper.
-                objectProperties = singleOrUndefined(segments);
-                if (!objectProperties) {
-                    objectProperties = emitHelpers().createAssignHelper(segments);
+                    // Either emit one big object literal (no spread attribs), or
+                    // a call to the __assign helper.
+                    objectProperties = singleOrUndefined(segments);
+                    if (!objectProperties) {
+                        objectProperties = emitHelpers().createAssignHelper(segments);
+                    }
                 }
             }
 
@@ -376,6 +388,10 @@ namespace ts {
             return element;
         }
 
+        function transformJsxSpreadAttributeToSpreadAssignment(node: JsxSpreadAttribute) {
+            return factory.createSpreadAssignment(visitNode(node.expression, visitor, isExpression));
+        }
+
         function transformJsxSpreadAttributeToExpression(node: JsxSpreadAttribute) {
             return visitNode(node.expression, visitor, isExpression);
         }

tests/baselines/reference/tsxEmitSpreadAttribute(target=es2015).js

@@ -0,0 +1,47 @@
+//// [test.tsx]
+declare const React: any;
+
+export function T1(a: any) {
+    return <div className={"T1"} { ...a }>T1</div>;
+}
+
+export function T2(a: any, b: any) {
+    return <div className={"T2"} { ...a } { ...b }>T2</div>;
+}
+
+export function T3(a: any, b: any) {
+    return <div { ...a } className={"T3"} { ...b }>T3</div>;
+}
+
+export function T4(a: any, b: any) {
+    return <div className={"T4"} { ...{ ...a, ...b } }>T4</div>;
+}
+
+export function T5(a: any, b: any, c: any, d: any) {
+    return <div className={"T5"} { ...{ ...a, ...b, ...{ c, d } } }>T5</div>;
+}
+
+export function T6(a: any, b: any, c: any, d: any) {
+    return <div className={"T6"} { ...{ ...a, ...b, ...{ ...c, ...d } } }>T6</div>;
+}
+
+
+//// [test.js]
+export function T1(a) {
+    return React.createElement("div", Object.assign({ className: "T1" }, a), "T1");
+}
+export function T2(a, b) {
+    return React.createElement("div", Object.assign({ className: "T2" }, a, b), "T2");
+}
+export function T3(a, b) {
+    return React.createElement("div", Object.assign({}, a, { className: "T3" }, b), "T3");
+}
+export function T4(a, b) {
+    return React.createElement("div", Object.assign({ className: "T4" }, Object.assign(Object.assign({}, a), b)), "T4");
+}
+export function T5(a, b, c, d) {
+    return React.createElement("div", Object.assign({ className: "T5" }, Object.assign(Object.assign(Object.assign({}, a), b), { c, d })), "T5");
+}
+export function T6(a, b, c, d) {
+    return React.createElement("div", Object.assign({ className: "T6" }, Object.assign(Object.assign(Object.assign({}, a), b), Object.assign(Object.assign({}, c), d))), "T6");
+}

tests/baselines/reference/tsxEmitSpreadAttribute(target=es2015).symbols

@@ -0,0 +1,76 @@
+=== tests/cases/conformance/jsx/test.tsx ===
+declare const React: any;
+>React : Symbol(React, Decl(test.tsx, 0, 13))
+
+export function T1(a: any) {
+>T1 : Symbol(T1, Decl(test.tsx, 0, 25))
+>a : Symbol(a, Decl(test.tsx, 2, 19))
+
+    return <div className={"T1"} { ...a }>T1</div>;
+>className : Symbol(className, Decl(test.tsx, 3, 15))
+>a : Symbol(a, Decl(test.tsx, 2, 19))
+}
+
+export function T2(a: any, b: any) {
+>T2 : Symbol(T2, Decl(test.tsx, 4, 1))
+>a : Symbol(a, Decl(test.tsx, 6, 19))
+>b : Symbol(b, Decl(test.tsx, 6, 26))
+
+    return <div className={"T2"} { ...a } { ...b }>T2</div>;
+>className : Symbol(className, Decl(test.tsx, 7, 15))
+>a : Symbol(a, Decl(test.tsx, 6, 19))
+>b : Symbol(b, Decl(test.tsx, 6, 26))
+}
+
+export function T3(a: any, b: any) {
+>T3 : Symbol(T3, Decl(test.tsx, 8, 1))
+>a : Symbol(a, Decl(test.tsx, 10, 19))
+>b : Symbol(b, Decl(test.tsx, 10, 26))
+
+    return <div { ...a } className={"T3"} { ...b }>T3</div>;
+>a : Symbol(a, Decl(test.tsx, 10, 19))
+>className : Symbol(className, Decl(test.tsx, 11, 24))
+>b : Symbol(b, Decl(test.tsx, 10, 26))
+}
+
+export function T4(a: any, b: any) {
+>T4 : Symbol(T4, Decl(test.tsx, 12, 1))
+>a : Symbol(a, Decl(test.tsx, 14, 19))
+>b : Symbol(b, Decl(test.tsx, 14, 26))
+
+    return <div className={"T4"} { ...{ ...a, ...b } }>T4</div>;
+>className : Symbol(className, Decl(test.tsx, 15, 15))
+>a : Symbol(a, Decl(test.tsx, 14, 19))
+>b : Symbol(b, Decl(test.tsx, 14, 26))
+}
+
+export function T5(a: any, b: any, c: any, d: any) {
+>T5 : Symbol(T5, Decl(test.tsx, 16, 1))
+>a : Symbol(a, Decl(test.tsx, 18, 19))
+>b : Symbol(b, Decl(test.tsx, 18, 26))
+>c : Symbol(c, Decl(test.tsx, 18, 34))
+>d : Symbol(d, Decl(test.tsx, 18, 42))
+
+    return <div className={"T5"} { ...{ ...a, ...b, ...{ c, d } } }>T5</div>;
+>className : Symbol(className, Decl(test.tsx, 19, 15))
+>a : Symbol(a, Decl(test.tsx, 18, 19))
+>b : Symbol(b, Decl(test.tsx, 18, 26))
+>c : Symbol(c, Decl(test.tsx, 19, 56))
+>d : Symbol(d, Decl(test.tsx, 19, 59))
+}
+
+export function T6(a: any, b: any, c: any, d: any) {
+>T6 : Symbol(T6, Decl(test.tsx, 20, 1))
+>a : Symbol(a, Decl(test.tsx, 22, 19))
+>b : Symbol(b, Decl(test.tsx, 22, 26))
+>c : Symbol(c, Decl(test.tsx, 22, 34))
+>d : Symbol(d, Decl(test.tsx, 22, 42))
+
+    return <div className={"T6"} { ...{ ...a, ...b, ...{ ...c, ...d } } }>T6</div>;
+>className : Symbol(className, Decl(test.tsx, 23, 15))
+>a : Symbol(a, Decl(test.tsx, 22, 19))
+>b : Symbol(b, Decl(test.tsx, 22, 26))
+>c : Symbol(c, Decl(test.tsx, 22, 34))
+>d : Symbol(d, Decl(test.tsx, 22, 42))
+}
+

tests/baselines/reference/tsxEmitSpreadAttribute(target=es2015).types

@@ -0,0 +1,105 @@
+=== tests/cases/conformance/jsx/test.tsx ===
+declare const React: any;
+>React : any
+
+export function T1(a: any) {
+>T1 : (a: any) => any
+>a : any
+
+    return <div className={"T1"} { ...a }>T1</div>;
+><div className={"T1"} { ...a }>T1</div> : error
+>div : any
+>className : string
+>"T1" : "T1"
+>a : any
+>div : any
+}
+
+export function T2(a: any, b: any) {
+>T2 : (a: any, b: any) => any
+>a : any
+>b : any
+
+    return <div className={"T2"} { ...a } { ...b }>T2</div>;
+><div className={"T2"} { ...a } { ...b }>T2</div> : error
+>div : any
+>className : string
+>"T2" : "T2"
+>a : any
+>b : any
+>div : any
+}
+
+export function T3(a: any, b: any) {
+>T3 : (a: any, b: any) => any
+>a : any
+>b : any
+
+    return <div { ...a } className={"T3"} { ...b }>T3</div>;
+><div { ...a } className={"T3"} { ...b }>T3</div> : error
+>div : any
+>a : any
+>className : string
+>"T3" : "T3"
+>b : any
+>div : any
+}
+
+export function T4(a: any, b: any) {
+>T4 : (a: any, b: any) => any
+>a : any
+>b : any
+
+    return <div className={"T4"} { ...{ ...a, ...b } }>T4</div>;
+><div className={"T4"} { ...{ ...a, ...b } }>T4</div> : error
+>div : any
+>className : string
+>"T4" : "T4"
+>{ ...a, ...b } : any
+>a : any
+>b : any
+>div : any
+}
+
+export function T5(a: any, b: any, c: any, d: any) {
+>T5 : (a: any, b: any, c: any, d: any) => any
+>a : any
+>b : any
+>c : any
+>d : any
+
+    return <div className={"T5"} { ...{ ...a, ...b, ...{ c, d } } }>T5</div>;
+><div className={"T5"} { ...{ ...a, ...b, ...{ c, d } } }>T5</div> : error
+>div : any
+>className : string
+>"T5" : "T5"
+>{ ...a, ...b, ...{ c, d } } : any
+>a : any
+>b : any
+>{ c, d } : { c: any; d: any; }
+>c : any
+>d : any
+>div : any
+}
+
+export function T6(a: any, b: any, c: any, d: any) {
+>T6 : (a: any, b: any, c: any, d: any) => any
+>a : any
+>b : any
+>c : any
+>d : any
+
+    return <div className={"T6"} { ...{ ...a, ...b, ...{ ...c, ...d } } }>T6</div>;
+><div className={"T6"} { ...{ ...a, ...b, ...{ ...c, ...d } } }>T6</div> : error
+>div : any
+>className : string
+>"T6" : "T6"
+>{ ...a, ...b, ...{ ...c, ...d } } : any
+>a : any
+>b : any
+>{ ...c, ...d } : any
+>c : any
+>d : any
+>div : any
+}
+

tests/baselines/reference/tsxEmitSpreadAttribute(target=es2018).js

@@ -0,0 +1,47 @@
+//// [test.tsx]
+declare const React: any;
+
+export function T1(a: any) {
+    return <div className={"T1"} { ...a }>T1</div>;
+}
+
+export function T2(a: any, b: any) {
+    return <div className={"T2"} { ...a } { ...b }>T2</div>;
+}
+
+export function T3(a: any, b: any) {
+    return <div { ...a } className={"T3"} { ...b }>T3</div>;
+}
+
+export function T4(a: any, b: any) {
+    return <div className={"T4"} { ...{ ...a, ...b } }>T4</div>;
+}
+
+export function T5(a: any, b: any, c: any, d: any) {
+    return <div className={"T5"} { ...{ ...a, ...b, ...{ c, d } } }>T5</div>;
+}
+
+export function T6(a: any, b: any, c: any, d: any) {
+    return <div className={"T6"} { ...{ ...a, ...b, ...{ ...c, ...d } } }>T6</div>;
+}
+
+
+//// [test.js]
+export function T1(a) {
+    return React.createElement("div", { className: "T1", ...a }, "T1");
+}
+export function T2(a, b) {
+    return React.createElement("div", { className: "T2", ...a, ...b }, "T2");
+}
+export function T3(a, b) {
+    return React.createElement("div", { ...a, className: "T3", ...b }, "T3");
+}
+export function T4(a, b) {
+    return React.createElement("div", { className: "T4", ...{ ...a, ...b } }, "T4");
+}
+export function T5(a, b, c, d) {
+    return React.createElement("div", { className: "T5", ...{ ...a, ...b, ...{ c, d } } }, "T5");
+}
+export function T6(a, b, c, d) {
+    return React.createElement("div", { className: "T6", ...{ ...a, ...b, ...{ ...c, ...d } } }, "T6");
+}