Ensure all JSX spread properties get visited (#55008)

src/compiler/transformers/jsx.ts

@@ -472,10 +472,10 @@ export function transformJsx(context: TransformationContext): (x: SourceFile | B
                     for (const prop of attr.expression.properties) {
                         if (isSpreadAssignment(prop)) {
                             finishObjectLiteralIfNeeded();
-                            expressions.push(prop.expression);
+                            expressions.push(Debug.checkDefined(visitNode(prop.expression, visitor, isExpression)));
                             continue;
                         }
-                        properties.push(prop);
+                        properties.push(Debug.checkDefined(visitNode(prop, visitor)) as ObjectLiteralElementLike);
                     }
                     continue;
                 }

tests/baselines/reference/jsxSpreadTag.errors.txt

@@ -0,0 +1,36 @@
+/a.tsx(5,13): error TS2304: Cannot find name 'Comp'.
+/a.tsx(9,13): error TS2304: Cannot find name 'Comp'.
+/a.tsx(13,13): error TS2304: Cannot find name 'Comp'.
+/a.tsx(17,13): error TS2304: Cannot find name 'Comp'.
+
+
+==== /a.tsx (4 errors) ====
+    declare const React: any;
+    
+    const t1 = <div {...<span />} />;
+    const t2 = <div {...<span className="foo" />} />;
+    const t3 = <Comp
+                ~~~~
+!!! error TS2304: Cannot find name 'Comp'.
+        right={<div>x</div>}
+        {...{ wrong: <div>x</div>}}
+    />;
+    const t4 = <Comp
+                ~~~~
+!!! error TS2304: Cannot find name 'Comp'.
+        right={<div>x</div>}
+        {...{ wrong() { return <div>x</div>; }}}
+    />;
+    const t5 = <Comp
+                ~~~~
+!!! error TS2304: Cannot find name 'Comp'.
+        right={<div>x</div>}
+        {...{ get wrong() { return <div>x</div>; }}}
+    />;
+    const t6 = <Comp
+                ~~~~
+!!! error TS2304: Cannot find name 'Comp'.
+        right={<div>x</div>}
+        {...{ set wrong(s) { let a = <div>x</div>; }}}
+    />;
+    

tests/baselines/reference/jsxSpreadTag.js

@@ -5,8 +5,28 @@ declare const React: any;
 
 const t1 = <div {...<span />} />;
 const t2 = <div {...<span className="foo" />} />;
+const t3 = <Comp
+    right={<div>x</div>}
+    {...{ wrong: <div>x</div>}}
+/>;
+const t4 = <Comp
+    right={<div>x</div>}
+    {...{ wrong() { return <div>x</div>; }}}
+/>;
+const t5 = <Comp
+    right={<div>x</div>}
+    {...{ get wrong() { return <div>x</div>; }}}
+/>;
+const t6 = <Comp
+    right={<div>x</div>}
+    {...{ set wrong(s) { let a = <div>x</div>; }}}
+/>;
 
 
 //// [a.js]
 const t1 = React.createElement("div", Object.assign({}, React.createElement("span", null)));
 const t2 = React.createElement("div", Object.assign({}, React.createElement("span", { className: "foo" })));
+const t3 = React.createElement(Comp, { right: React.createElement("div", null, "x"), wrong: React.createElement("div", null, "x") });
+const t4 = React.createElement(Comp, { right: React.createElement("div", null, "x"), wrong() { return React.createElement("div", null, "x"); } });
+const t5 = React.createElement(Comp, { right: React.createElement("div", null, "x"), get wrong() { return React.createElement("div", null, "x"); } });
+const t6 = React.createElement(Comp, { right: React.createElement("div", null, "x"), set wrong(s) { let a = React.createElement("div", null, "x"); } });

tests/baselines/reference/jsxSpreadTag.symbols

@@ -11,3 +11,46 @@ const t2 = <div {...<span className="foo" />} />;
 >t2 : Symbol(t2, Decl(a.tsx, 3, 5))
 >className : Symbol(className, Decl(a.tsx, 3, 25))
 
+const t3 = <Comp
+>t3 : Symbol(t3, Decl(a.tsx, 4, 5))
+
+    right={<div>x</div>}
+>right : Symbol(right, Decl(a.tsx, 4, 16))
+
+    {...{ wrong: <div>x</div>}}
+>wrong : Symbol(wrong, Decl(a.tsx, 6, 9))
+
+/>;
+const t4 = <Comp
+>t4 : Symbol(t4, Decl(a.tsx, 8, 5))
+
+    right={<div>x</div>}
+>right : Symbol(right, Decl(a.tsx, 8, 16))
+
+    {...{ wrong() { return <div>x</div>; }}}
+>wrong : Symbol(wrong, Decl(a.tsx, 10, 9))
+
+/>;
+const t5 = <Comp
+>t5 : Symbol(t5, Decl(a.tsx, 12, 5))
+
+    right={<div>x</div>}
+>right : Symbol(right, Decl(a.tsx, 12, 16))
+
+    {...{ get wrong() { return <div>x</div>; }}}
+>wrong : Symbol(wrong, Decl(a.tsx, 14, 9))
+
+/>;
+const t6 = <Comp
+>t6 : Symbol(t6, Decl(a.tsx, 16, 5))
+
+    right={<div>x</div>}
+>right : Symbol(right, Decl(a.tsx, 16, 16))
+
+    {...{ set wrong(s) { let a = <div>x</div>; }}}
+>wrong : Symbol(wrong, Decl(a.tsx, 18, 9))
+>s : Symbol(s, Decl(a.tsx, 18, 20))
+>a : Symbol(a, Decl(a.tsx, 18, 28))
+
+/>;
+

tests/baselines/reference/jsxSpreadTag.types

@@ -5,17 +5,96 @@ declare const React: any;
 >React : any
 
 const t1 = <div {...<span />} />;
->t1 : error
-><div {...<span />} /> : error
+>t1 : any
+><div {...<span />} /> : any
 >div : any
-><span /> : error
+><span /> : any
 >span : any
 
 const t2 = <div {...<span className="foo" />} />;
->t2 : error
-><div {...<span className="foo" />} /> : error
+>t2 : any
+><div {...<span className="foo" />} /> : any
 >div : any
-><span className="foo" /> : error
+><span className="foo" /> : any
 >span : any
 >className : string
 
+const t3 = <Comp
+>t3 : any
+><Comp    right={<div>x</div>}    {...{ wrong: <div>x</div>}}/> : any
+>Comp : any
+
+    right={<div>x</div>}
+>right : any
+><div>x</div> : any
+>div : any
+>div : any
+
+    {...{ wrong: <div>x</div>}}
+>{ wrong: <div>x</div>} : { wrong: any; }
+>wrong : any
+><div>x</div> : any
+>div : any
+>div : any
+
+/>;
+const t4 = <Comp
+>t4 : any
+><Comp    right={<div>x</div>}    {...{ wrong() { return <div>x</div>; }}}/> : any
+>Comp : any
+
+    right={<div>x</div>}
+>right : any
+><div>x</div> : any
+>div : any
+>div : any
+
+    {...{ wrong() { return <div>x</div>; }}}
+>{ wrong() { return <div>x</div>; }} : { wrong(): any; }
+>wrong : () => any
+><div>x</div> : any
+>div : any
+>div : any
+
+/>;
+const t5 = <Comp
+>t5 : any
+><Comp    right={<div>x</div>}    {...{ get wrong() { return <div>x</div>; }}}/> : any
+>Comp : any
+
+    right={<div>x</div>}
+>right : any
+><div>x</div> : any
+>div : any
+>div : any
+
+    {...{ get wrong() { return <div>x</div>; }}}
+>{ get wrong() { return <div>x</div>; }} : { readonly wrong: any; }
+>wrong : any
+><div>x</div> : any
+>div : any
+>div : any
+
+/>;
+const t6 = <Comp
+>t6 : any
+><Comp    right={<div>x</div>}    {...{ set wrong(s) { let a = <div>x</div>; }}}/> : any
+>Comp : any
+
+    right={<div>x</div>}
+>right : any
+><div>x</div> : any
+>div : any
+>div : any
+
+    {...{ set wrong(s) { let a = <div>x</div>; }}}
+>{ set wrong(s) { let a = <div>x</div>; }} : { wrong: any; }
+>wrong : any
+>s : any
+>a : any
+><div>x</div> : any
+>div : any
+>div : any
+
+/>;
+

tests/cases/compiler/jsxSpreadTag.ts

@@ -6,3 +6,19 @@ declare const React: any;
 
 const t1 = <div {...<span />} />;
 const t2 = <div {...<span className="foo" />} />;
+const t3 = <Comp
+    right={<div>x</div>}
+    {...{ wrong: <div>x</div>}}
+/>;
+const t4 = <Comp
+    right={<div>x</div>}
+    {...{ wrong() { return <div>x</div>; }}}
+/>;
+const t5 = <Comp
+    right={<div>x</div>}
+    {...{ get wrong() { return <div>x</div>; }}}
+/>;
+const t6 = <Comp
+    right={<div>x</div>}
+    {...{ set wrong(s) { let a = <div>x</div>; }}}
+/>;