Fix react-jsx spread children invalid emit (#46565)

* Fix react-jsx spread children invalid emit

* Update Baselines and/or Applied Lint Fixes

* Change childrenLength parameter -> isStaticChildren

Co-authored-by: TypeScript Bot <[email protected]>

Author: jablko

src/compiler/transformers/jsx.ts

@@ -26,12 +26,12 @@ namespace ts {
             return currentFileState.filenameDeclaration.name;
         }
 
-        function getJsxFactoryCalleePrimitive(childrenLength: number): "jsx" | "jsxs" | "jsxDEV" {
-            return compilerOptions.jsx === JsxEmit.ReactJSXDev ? "jsxDEV" : childrenLength > 1 ? "jsxs" : "jsx";
+        function getJsxFactoryCalleePrimitive(isStaticChildren: boolean): "jsx" | "jsxs" | "jsxDEV" {
+            return compilerOptions.jsx === JsxEmit.ReactJSXDev ? "jsxDEV" : isStaticChildren ? "jsxs" : "jsx";
         }
 
-        function getJsxFactoryCallee(childrenLength: number) {
-            const type = getJsxFactoryCalleePrimitive(childrenLength);
+        function getJsxFactoryCallee(isStaticChildren: boolean) {
+            const type = getJsxFactoryCalleePrimitive(isStaticChildren);
             return getImplicitImportForName(type);
         }
 
@@ -206,7 +206,7 @@ namespace ts {
 
         function convertJsxChildrenToChildrenPropAssignment(children: readonly JsxChild[]) {
             const nonWhitespaceChildren = getSemanticJsxChildren(children);
-            if (length(nonWhitespaceChildren) === 1) {
+            if (length(nonWhitespaceChildren) === 1 && !(nonWhitespaceChildren[0] as JsxExpression).dotDotDotToken) {
                 const result = transformJsxChildToExpression(nonWhitespaceChildren[0]);
                 return result && factory.createPropertyAssignment("children", result);
             }
@@ -221,16 +221,33 @@ namespace ts {
             const attrs = keyAttr ? filter(node.attributes.properties, p => p !== keyAttr) : node.attributes.properties;
             const objectProperties = length(attrs) ? transformJsxAttributesToObjectProps(attrs, childrenProp) :
                 factory.createObjectLiteralExpression(childrenProp ? [childrenProp] : emptyArray); // When there are no attributes, React wants {}
-            return visitJsxOpeningLikeElementOrFragmentJSX(tagName, objectProperties, keyAttr, length(getSemanticJsxChildren(children || emptyArray)), isChild, location);
+            return visitJsxOpeningLikeElementOrFragmentJSX(
+                tagName,
+                objectProperties,
+                keyAttr,
+                children || emptyArray,
+                isChild,
+                location
+            );
         }
 
-        function visitJsxOpeningLikeElementOrFragmentJSX(tagName: Expression, objectProperties: Expression, keyAttr: JsxAttribute | undefined, childrenLength: number, isChild: boolean, location: TextRange) {
+        function visitJsxOpeningLikeElementOrFragmentJSX(
+            tagName: Expression,
+            objectProperties: Expression,
+            keyAttr: JsxAttribute | undefined,
+            children: readonly JsxChild[],
+            isChild: boolean,
+            location: TextRange
+        ) {
+            const nonWhitespaceChildren = getSemanticJsxChildren(children);
+            const isStaticChildren =
+                length(nonWhitespaceChildren) > 1 || !!(nonWhitespaceChildren[0] as JsxExpression)?.dotDotDotToken;
             const args: Expression[] = [tagName, objectProperties, !keyAttr ? factory.createVoidZero() : transformJsxAttributeInitializer(keyAttr.initializer)];
             if (compilerOptions.jsx === JsxEmit.ReactJSXDev) {
                 const originalFile = getOriginalNode(currentSourceFile);
                 if (originalFile && isSourceFile(originalFile)) {
                     // isStaticChildren development flag
-                    args.push(childrenLength > 1 ? factory.createTrue() : factory.createFalse());
+                    args.push(isStaticChildren ? factory.createTrue() : factory.createFalse());
                     // __source development flag
                     const lineCol = getLineAndCharacterOfPosition(originalFile, location.pos);
                     args.push(factory.createObjectLiteralExpression([
@@ -242,7 +259,10 @@ namespace ts {
                     args.push(factory.createThis());
                 }
             }
-            const element = setTextRange(factory.createCallExpression(getJsxFactoryCallee(childrenLength), /*typeArguments*/ undefined, args), location);
+            const element = setTextRange(
+                factory.createCallExpression(getJsxFactoryCallee(isStaticChildren), /*typeArguments*/ undefined, args),
+                location
+            );
 
             if (isChild) {
                 startOnNewLine(element);
@@ -294,7 +314,7 @@ namespace ts {
                 getImplicitJsxFragmentReference(),
                 childrenProps || factory.createObjectLiteralExpression([]),
                 /*keyAttr*/ undefined,
-                length(getSemanticJsxChildren(children)),
+                children,
                 isChild,
                 location
             );

tests/baselines/reference/tsxSpreadChildrenInvalidType(target=es2015).errors.txt renamed to tests/baselines/reference/tsxSpreadChildrenInvalidType(jsx=react,target=es2015).errors.txt

@@ -0,0 +1,41 @@
+tests/cases/conformance/jsx/tsxSpreadChildrenInvalidType.tsx(17,12): error TS2792: Cannot find module 'react/jsx-runtime'. Did you mean to set the 'moduleResolution' option to 'node', or to add aliases to the 'paths' option?
+tests/cases/conformance/jsx/tsxSpreadChildrenInvalidType.tsx(21,9): error TS2609: JSX spread child must be an array type.
+
+
+==== tests/cases/conformance/jsx/tsxSpreadChildrenInvalidType.tsx (2 errors) ====
+    declare module JSX {
+    	interface Element { }
+    	interface IntrinsicElements {
+    		[s: string]: any;
+    	}
+    }
+    declare var React: any;
+    
+    interface TodoProp {
+        id: number;
+        todo: string;
+    }
+    interface TodoListProps {
+        todos: TodoProp[];
+    }
+    function Todo(prop: { key: number, todo: string }) {
+        return <div>{prop.key.toString() + prop.todo}</div>;
+               ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
+!!! error TS2792: Cannot find module 'react/jsx-runtime'. Did you mean to set the 'moduleResolution' option to 'node', or to add aliases to the 'paths' option?
+    }
+    function TodoList({ todos }: TodoListProps) {
+        return <div>
+            {...<Todo key={todos[0].id} todo={todos[0].todo} />}
+            ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
+!!! error TS2609: JSX spread child must be an array type.
+        </div>;
+    }
+    function TodoListNoError({ todos }: TodoListProps) {
+        // any is not checked
+        return <div>
+            {...(<Todo key={todos[0].id} todo={todos[0].todo} /> as any)}
+        </div>;
+    }
+    let x: TodoListProps;
+        <TodoList {...x}/>
+