From b8dfa28ca8df1a1a1fef35533c4ba996bdd86868 Mon Sep 17 00:00:00 2001
From: Wesley Wigham <wwigham@gmail.com>
Date: Mon, 19 Oct 2020 13:34:16 -0700
Subject: [PATCH 1/2] Do not consider empty jsx expressions semantically
 important children

---
 src/compiler/checker.ts                       |  7 ++--
 src/compiler/transformers/jsx.ts              |  6 +--
 src/compiler/utilities.ts                     | 13 ++++++
 ...yExpressionNotCountedAsChild(jsx=react).js | 29 +++++++++++++
 ...essionNotCountedAsChild(jsx=react).symbols | 42 +++++++++++++++++++
 ...pressionNotCountedAsChild(jsx=react).types | 42 +++++++++++++++++++
 ...ressionNotCountedAsChild(jsx=react-jsx).js | 29 +++++++++++++
 ...onNotCountedAsChild(jsx=react-jsx).symbols | 42 +++++++++++++++++++
 ...sionNotCountedAsChild(jsx=react-jsx).types | 42 +++++++++++++++++++
 ...sionNotCountedAsChild(jsx=react-jsxdev).js | 30 +++++++++++++
 ...otCountedAsChild(jsx=react-jsxdev).symbols | 42 +++++++++++++++++++
 ...nNotCountedAsChild(jsx=react-jsxdev).types | 42 +++++++++++++++++++
 .../jsxEmptyExpressionNotCountedAsChild.tsx   | 19 +++++++++
 13 files changed, 378 insertions(+), 7 deletions(-)
 create mode 100644 tests/baselines/reference/jsxEmptyExpressionNotCountedAsChild(jsx=react).js
 create mode 100644 tests/baselines/reference/jsxEmptyExpressionNotCountedAsChild(jsx=react).symbols
 create mode 100644 tests/baselines/reference/jsxEmptyExpressionNotCountedAsChild(jsx=react).types
 create mode 100644 tests/baselines/reference/jsxEmptyExpressionNotCountedAsChild(jsx=react-jsx).js
 create mode 100644 tests/baselines/reference/jsxEmptyExpressionNotCountedAsChild(jsx=react-jsx).symbols
 create mode 100644 tests/baselines/reference/jsxEmptyExpressionNotCountedAsChild(jsx=react-jsx).types
 create mode 100644 tests/baselines/reference/jsxEmptyExpressionNotCountedAsChild(jsx=react-jsxdev).js
 create mode 100644 tests/baselines/reference/jsxEmptyExpressionNotCountedAsChild(jsx=react-jsxdev).symbols
 create mode 100644 tests/baselines/reference/jsxEmptyExpressionNotCountedAsChild(jsx=react-jsxdev).types
 create mode 100644 tests/cases/compiler/jsxEmptyExpressionNotCountedAsChild.tsx

diff --git a/src/compiler/checker.ts b/src/compiler/checker.ts
index 6690fa352cfe5..782077aae53c3 100644
--- a/src/compiler/checker.ts
+++ b/src/compiler/checker.ts
@@ -15827,10 +15827,6 @@ namespace ts {
             }
         }
 
-        function getSemanticJsxChildren(children: NodeArray<JsxChild>) {
-            return filter(children, i => !isJsxText(i) || !i.containsOnlyTriviaWhiteSpaces);
-        }
-
         function elaborateJsxComponents(
             node: JsxAttributes,
             source: Type,
@@ -24987,6 +24983,9 @@ namespace ts {
                         childrenTypes.push(stringType);
                     }
                 }
+                else if (child.kind === SyntaxKind.JsxExpression && !child.expression) {
+                    continue; // empty jsx expressions don't *really* count as present children
+                }
                 else {
                     childrenTypes.push(checkExpressionForMutableLocation(child, checkMode));
                 }
diff --git a/src/compiler/transformers/jsx.ts b/src/compiler/transformers/jsx.ts
index 905bfad32e001..57411a8877135 100644
--- a/src/compiler/transformers/jsx.ts
+++ b/src/compiler/transformers/jsx.ts
@@ -191,7 +191,7 @@ namespace ts {
         }
 
         function convertJsxChildrenToChildrenPropObject(children: readonly JsxChild[]) {
-            const nonWhitespaceChildren = filter(children, c => !isJsxText(c) || !c.containsOnlyTriviaWhiteSpaces);
+            const nonWhitespaceChildren = getSemanticJsxChildren(children);
             if (length(nonWhitespaceChildren) === 1) {
                 const result = transformJsxChildToExpression(nonWhitespaceChildren[0]);
                 return result && factory.createObjectLiteralExpression([
@@ -244,7 +244,7 @@ namespace ts {
                 objectProperties = singleOrUndefined(segments) || emitHelpers().createAssignHelper(segments);
             }
 
-            return visitJsxOpeningLikeElementOrFragmentJSX(tagName, objectProperties, keyAttr, length(filter(children, c => !isJsxText(c) || !c.containsOnlyTriviaWhiteSpaces)), isChild, location);
+            return visitJsxOpeningLikeElementOrFragmentJSX(tagName, objectProperties, keyAttr, length(getSemanticJsxChildren(children || emptyArray)), isChild, location);
         }
 
         function visitJsxOpeningLikeElementOrFragmentJSX(tagName: Expression, objectProperties: Expression, keyAttr: JsxAttribute | undefined, childrenLength: number, isChild: boolean, location: TextRange) {
@@ -336,7 +336,7 @@ namespace ts {
                 getImplicitJsxFragmentReference(),
                 childrenProps || factory.createObjectLiteralExpression([]),
                 /*keyAttr*/ undefined,
-                length(filter(children, c => !isJsxText(c) || !c.containsOnlyTriviaWhiteSpaces)),
+                length(getSemanticJsxChildren(children)),
                 isChild,
                 location
             );
diff --git a/src/compiler/utilities.ts b/src/compiler/utilities.ts
index ca8f2d8722573..623f068899272 100644
--- a/src/compiler/utilities.ts
+++ b/src/compiler/utilities.ts
@@ -3621,6 +3621,19 @@ namespace ts {
         return -1;
     }
 
+    export function getSemanticJsxChildren(children: readonly JsxChild[]) {
+        return filter(children, i => {
+            switch (i.kind) {
+                case SyntaxKind.JsxExpression:
+                    return !!i.expression;
+                case SyntaxKind.JsxText:
+                    return !i.containsOnlyTriviaWhiteSpaces;
+                default:
+                    return true;
+            }
+        });
+    }
+
     export function createDiagnosticCollection(): DiagnosticCollection {
         let nonFileDiagnostics = [] as Diagnostic[] as SortedArray<Diagnostic>; // See GH#19873
         const filesWithDiagnostics = [] as string[] as SortedArray<string>;
diff --git a/tests/baselines/reference/jsxEmptyExpressionNotCountedAsChild(jsx=react).js b/tests/baselines/reference/jsxEmptyExpressionNotCountedAsChild(jsx=react).js
new file mode 100644
index 0000000000000..88593e08d5cb9
--- /dev/null
+++ b/tests/baselines/reference/jsxEmptyExpressionNotCountedAsChild(jsx=react).js
@@ -0,0 +1,29 @@
+//// [jsxEmptyExpressionNotCountedAsChild.tsx]
+/// <reference path="/.lib/react16.d.ts" />
+import * as React from 'react'
+
+interface Props {
+    children: React.ReactElement<any>
+}
+
+function Wrapper(props: Props) {
+    return <div>{props.children}</div>
+}
+
+const element = (
+    <Wrapper>
+    {/* comment */}
+     <div>Hello</div>
+    </Wrapper>
+)
+
+//// [jsxEmptyExpressionNotCountedAsChild.js]
+"use strict";
+exports.__esModule = true;
+/// <reference path="react16.d.ts" />
+var React = require("react");
+function Wrapper(props) {
+    return React.createElement("div", null, props.children);
+}
+var element = (React.createElement(Wrapper, null,
+    React.createElement("div", null, "Hello")));
diff --git a/tests/baselines/reference/jsxEmptyExpressionNotCountedAsChild(jsx=react).symbols b/tests/baselines/reference/jsxEmptyExpressionNotCountedAsChild(jsx=react).symbols
new file mode 100644
index 0000000000000..f8c95e444e28b
--- /dev/null
+++ b/tests/baselines/reference/jsxEmptyExpressionNotCountedAsChild(jsx=react).symbols
@@ -0,0 +1,42 @@
+=== tests/cases/compiler/jsxEmptyExpressionNotCountedAsChild.tsx ===
+/// <reference path="react16.d.ts" />
+import * as React from 'react'
+>React : Symbol(React, Decl(jsxEmptyExpressionNotCountedAsChild.tsx, 1, 6))
+
+interface Props {
+>Props : Symbol(Props, Decl(jsxEmptyExpressionNotCountedAsChild.tsx, 1, 30))
+
+    children: React.ReactElement<any>
+>children : Symbol(Props.children, Decl(jsxEmptyExpressionNotCountedAsChild.tsx, 3, 17))
+>React : Symbol(React, Decl(jsxEmptyExpressionNotCountedAsChild.tsx, 1, 6))
+>ReactElement : Symbol(React.ReactElement, Decl(react16.d.ts, 135, 9))
+}
+
+function Wrapper(props: Props) {
+>Wrapper : Symbol(Wrapper, Decl(jsxEmptyExpressionNotCountedAsChild.tsx, 5, 1))
+>props : Symbol(props, Decl(jsxEmptyExpressionNotCountedAsChild.tsx, 7, 17))
+>Props : Symbol(Props, Decl(jsxEmptyExpressionNotCountedAsChild.tsx, 1, 30))
+
+    return <div>{props.children}</div>
+>div : Symbol(JSX.IntrinsicElements.div, Decl(react16.d.ts, 2420, 114))
+>props.children : Symbol(Props.children, Decl(jsxEmptyExpressionNotCountedAsChild.tsx, 3, 17))
+>props : Symbol(props, Decl(jsxEmptyExpressionNotCountedAsChild.tsx, 7, 17))
+>children : Symbol(Props.children, Decl(jsxEmptyExpressionNotCountedAsChild.tsx, 3, 17))
+>div : Symbol(JSX.IntrinsicElements.div, Decl(react16.d.ts, 2420, 114))
+}
+
+const element = (
+>element : Symbol(element, Decl(jsxEmptyExpressionNotCountedAsChild.tsx, 11, 5))
+
+    <Wrapper>
+>Wrapper : Symbol(Wrapper, Decl(jsxEmptyExpressionNotCountedAsChild.tsx, 5, 1))
+
+    {/* comment */}
+     <div>Hello</div>
+>div : Symbol(JSX.IntrinsicElements.div, Decl(react16.d.ts, 2420, 114))
+>div : Symbol(JSX.IntrinsicElements.div, Decl(react16.d.ts, 2420, 114))
+
+    </Wrapper>
+>Wrapper : Symbol(Wrapper, Decl(jsxEmptyExpressionNotCountedAsChild.tsx, 5, 1))
+
+)
diff --git a/tests/baselines/reference/jsxEmptyExpressionNotCountedAsChild(jsx=react).types b/tests/baselines/reference/jsxEmptyExpressionNotCountedAsChild(jsx=react).types
new file mode 100644
index 0000000000000..c53d5e821ea2f
--- /dev/null
+++ b/tests/baselines/reference/jsxEmptyExpressionNotCountedAsChild(jsx=react).types
@@ -0,0 +1,42 @@
+=== tests/cases/compiler/jsxEmptyExpressionNotCountedAsChild.tsx ===
+/// <reference path="react16.d.ts" />
+import * as React from 'react'
+>React : typeof React
+
+interface Props {
+    children: React.ReactElement<any>
+>children : React.ReactElement<any>
+>React : any
+}
+
+function Wrapper(props: Props) {
+>Wrapper : (props: Props) => JSX.Element
+>props : Props
+
+    return <div>{props.children}</div>
+><div>{props.children}</div> : JSX.Element
+>div : any
+>props.children : React.ReactElement<any>
+>props : Props
+>children : React.ReactElement<any>
+>div : any
+}
+
+const element = (
+>element : JSX.Element
+>(    <Wrapper>    {/* comment */}     <div>Hello</div>    </Wrapper>) : JSX.Element
+
+    <Wrapper>
+><Wrapper>    {/* comment */}     <div>Hello</div>    </Wrapper> : JSX.Element
+>Wrapper : (props: Props) => JSX.Element
+
+    {/* comment */}
+     <div>Hello</div>
+><div>Hello</div> : JSX.Element
+>div : any
+>div : any
+
+    </Wrapper>
+>Wrapper : (props: Props) => JSX.Element
+
+)
diff --git a/tests/baselines/reference/jsxEmptyExpressionNotCountedAsChild(jsx=react-jsx).js b/tests/baselines/reference/jsxEmptyExpressionNotCountedAsChild(jsx=react-jsx).js
new file mode 100644
index 0000000000000..8e16889ba3b46
--- /dev/null
+++ b/tests/baselines/reference/jsxEmptyExpressionNotCountedAsChild(jsx=react-jsx).js
@@ -0,0 +1,29 @@
+//// [jsxEmptyExpressionNotCountedAsChild.tsx]
+/// <reference path="/.lib/react16.d.ts" />
+import * as React from 'react'
+
+interface Props {
+    children: React.ReactElement<any>
+}
+
+function Wrapper(props: Props) {
+    return <div>{props.children}</div>
+}
+
+const element = (
+    <Wrapper>
+    {/* comment */}
+     <div>Hello</div>
+    </Wrapper>
+)
+
+//// [jsxEmptyExpressionNotCountedAsChild.js]
+"use strict";
+exports.__esModule = true;
+var jsx_runtime_js_1 = require("react/jsx-runtime.js");
+/// <reference path="react16.d.ts" />
+var React = require("react");
+function Wrapper(props) {
+    return jsx_runtime_js_1.jsx("div", { children: props.children }, void 0);
+}
+var element = (jsx_runtime_js_1.jsx(Wrapper, { children: jsx_runtime_js_1.jsx("div", { children: "Hello" }, void 0) }, void 0));
diff --git a/tests/baselines/reference/jsxEmptyExpressionNotCountedAsChild(jsx=react-jsx).symbols b/tests/baselines/reference/jsxEmptyExpressionNotCountedAsChild(jsx=react-jsx).symbols
new file mode 100644
index 0000000000000..f8c95e444e28b
--- /dev/null
+++ b/tests/baselines/reference/jsxEmptyExpressionNotCountedAsChild(jsx=react-jsx).symbols
@@ -0,0 +1,42 @@
+=== tests/cases/compiler/jsxEmptyExpressionNotCountedAsChild.tsx ===
+/// <reference path="react16.d.ts" />
+import * as React from 'react'
+>React : Symbol(React, Decl(jsxEmptyExpressionNotCountedAsChild.tsx, 1, 6))
+
+interface Props {
+>Props : Symbol(Props, Decl(jsxEmptyExpressionNotCountedAsChild.tsx, 1, 30))
+
+    children: React.ReactElement<any>
+>children : Symbol(Props.children, Decl(jsxEmptyExpressionNotCountedAsChild.tsx, 3, 17))
+>React : Symbol(React, Decl(jsxEmptyExpressionNotCountedAsChild.tsx, 1, 6))
+>ReactElement : Symbol(React.ReactElement, Decl(react16.d.ts, 135, 9))
+}
+
+function Wrapper(props: Props) {
+>Wrapper : Symbol(Wrapper, Decl(jsxEmptyExpressionNotCountedAsChild.tsx, 5, 1))
+>props : Symbol(props, Decl(jsxEmptyExpressionNotCountedAsChild.tsx, 7, 17))
+>Props : Symbol(Props, Decl(jsxEmptyExpressionNotCountedAsChild.tsx, 1, 30))
+
+    return <div>{props.children}</div>
+>div : Symbol(JSX.IntrinsicElements.div, Decl(react16.d.ts, 2420, 114))
+>props.children : Symbol(Props.children, Decl(jsxEmptyExpressionNotCountedAsChild.tsx, 3, 17))
+>props : Symbol(props, Decl(jsxEmptyExpressionNotCountedAsChild.tsx, 7, 17))
+>children : Symbol(Props.children, Decl(jsxEmptyExpressionNotCountedAsChild.tsx, 3, 17))
+>div : Symbol(JSX.IntrinsicElements.div, Decl(react16.d.ts, 2420, 114))
+}
+
+const element = (
+>element : Symbol(element, Decl(jsxEmptyExpressionNotCountedAsChild.tsx, 11, 5))
+
+    <Wrapper>
+>Wrapper : Symbol(Wrapper, Decl(jsxEmptyExpressionNotCountedAsChild.tsx, 5, 1))
+
+    {/* comment */}
+     <div>Hello</div>
+>div : Symbol(JSX.IntrinsicElements.div, Decl(react16.d.ts, 2420, 114))
+>div : Symbol(JSX.IntrinsicElements.div, Decl(react16.d.ts, 2420, 114))
+
+    </Wrapper>
+>Wrapper : Symbol(Wrapper, Decl(jsxEmptyExpressionNotCountedAsChild.tsx, 5, 1))
+
+)
diff --git a/tests/baselines/reference/jsxEmptyExpressionNotCountedAsChild(jsx=react-jsx).types b/tests/baselines/reference/jsxEmptyExpressionNotCountedAsChild(jsx=react-jsx).types
new file mode 100644
index 0000000000000..c53d5e821ea2f
--- /dev/null
+++ b/tests/baselines/reference/jsxEmptyExpressionNotCountedAsChild(jsx=react-jsx).types
@@ -0,0 +1,42 @@
+=== tests/cases/compiler/jsxEmptyExpressionNotCountedAsChild.tsx ===
+/// <reference path="react16.d.ts" />
+import * as React from 'react'
+>React : typeof React
+
+interface Props {
+    children: React.ReactElement<any>
+>children : React.ReactElement<any>
+>React : any
+}
+
+function Wrapper(props: Props) {
+>Wrapper : (props: Props) => JSX.Element
+>props : Props
+
+    return <div>{props.children}</div>
+><div>{props.children}</div> : JSX.Element
+>div : any
+>props.children : React.ReactElement<any>
+>props : Props
+>children : React.ReactElement<any>
+>div : any
+}
+
+const element = (
+>element : JSX.Element
+>(    <Wrapper>    {/* comment */}     <div>Hello</div>    </Wrapper>) : JSX.Element
+
+    <Wrapper>
+><Wrapper>    {/* comment */}     <div>Hello</div>    </Wrapper> : JSX.Element
+>Wrapper : (props: Props) => JSX.Element
+
+    {/* comment */}
+     <div>Hello</div>
+><div>Hello</div> : JSX.Element
+>div : any
+>div : any
+
+    </Wrapper>
+>Wrapper : (props: Props) => JSX.Element
+
+)
diff --git a/tests/baselines/reference/jsxEmptyExpressionNotCountedAsChild(jsx=react-jsxdev).js b/tests/baselines/reference/jsxEmptyExpressionNotCountedAsChild(jsx=react-jsxdev).js
new file mode 100644
index 0000000000000..2495a5621285b
--- /dev/null
+++ b/tests/baselines/reference/jsxEmptyExpressionNotCountedAsChild(jsx=react-jsxdev).js
@@ -0,0 +1,30 @@
+//// [jsxEmptyExpressionNotCountedAsChild.tsx]
+/// <reference path="/.lib/react16.d.ts" />
+import * as React from 'react'
+
+interface Props {
+    children: React.ReactElement<any>
+}
+
+function Wrapper(props: Props) {
+    return <div>{props.children}</div>
+}
+
+const element = (
+    <Wrapper>
+    {/* comment */}
+     <div>Hello</div>
+    </Wrapper>
+)
+
+//// [jsxEmptyExpressionNotCountedAsChild.js]
+"use strict";
+exports.__esModule = true;
+var jsx_dev_runtime_js_1 = require("react/jsx-dev-runtime.js");
+var _jsxFileName = "tests/cases/compiler/jsxEmptyExpressionNotCountedAsChild.tsx";
+/// <reference path="react16.d.ts" />
+var React = require("react");
+function Wrapper(props) {
+    return jsx_dev_runtime_js_1.jsxDEV("div", { children: props.children }, void 0, false, { fileName: _jsxFileName, lineNumber: 9, columnNumber: 11 }, this);
+}
+var element = (jsx_dev_runtime_js_1.jsxDEV(Wrapper, { children: jsx_dev_runtime_js_1.jsxDEV("div", { children: "Hello" }, void 0, false, { fileName: _jsxFileName, lineNumber: 15, columnNumber: 6 }, this) }, void 0, false, { fileName: _jsxFileName, lineNumber: 12, columnNumber: 18 }, this));
diff --git a/tests/baselines/reference/jsxEmptyExpressionNotCountedAsChild(jsx=react-jsxdev).symbols b/tests/baselines/reference/jsxEmptyExpressionNotCountedAsChild(jsx=react-jsxdev).symbols
new file mode 100644
index 0000000000000..f8c95e444e28b
--- /dev/null
+++ b/tests/baselines/reference/jsxEmptyExpressionNotCountedAsChild(jsx=react-jsxdev).symbols
@@ -0,0 +1,42 @@
+=== tests/cases/compiler/jsxEmptyExpressionNotCountedAsChild.tsx ===
+/// <reference path="react16.d.ts" />
+import * as React from 'react'
+>React : Symbol(React, Decl(jsxEmptyExpressionNotCountedAsChild.tsx, 1, 6))
+
+interface Props {
+>Props : Symbol(Props, Decl(jsxEmptyExpressionNotCountedAsChild.tsx, 1, 30))
+
+    children: React.ReactElement<any>
+>children : Symbol(Props.children, Decl(jsxEmptyExpressionNotCountedAsChild.tsx, 3, 17))
+>React : Symbol(React, Decl(jsxEmptyExpressionNotCountedAsChild.tsx, 1, 6))
+>ReactElement : Symbol(React.ReactElement, Decl(react16.d.ts, 135, 9))
+}
+
+function Wrapper(props: Props) {
+>Wrapper : Symbol(Wrapper, Decl(jsxEmptyExpressionNotCountedAsChild.tsx, 5, 1))
+>props : Symbol(props, Decl(jsxEmptyExpressionNotCountedAsChild.tsx, 7, 17))
+>Props : Symbol(Props, Decl(jsxEmptyExpressionNotCountedAsChild.tsx, 1, 30))
+
+    return <div>{props.children}</div>
+>div : Symbol(JSX.IntrinsicElements.div, Decl(react16.d.ts, 2420, 114))
+>props.children : Symbol(Props.children, Decl(jsxEmptyExpressionNotCountedAsChild.tsx, 3, 17))
+>props : Symbol(props, Decl(jsxEmptyExpressionNotCountedAsChild.tsx, 7, 17))
+>children : Symbol(Props.children, Decl(jsxEmptyExpressionNotCountedAsChild.tsx, 3, 17))
+>div : Symbol(JSX.IntrinsicElements.div, Decl(react16.d.ts, 2420, 114))
+}
+
+const element = (
+>element : Symbol(element, Decl(jsxEmptyExpressionNotCountedAsChild.tsx, 11, 5))
+
+    <Wrapper>
+>Wrapper : Symbol(Wrapper, Decl(jsxEmptyExpressionNotCountedAsChild.tsx, 5, 1))
+
+    {/* comment */}
+     <div>Hello</div>
+>div : Symbol(JSX.IntrinsicElements.div, Decl(react16.d.ts, 2420, 114))
+>div : Symbol(JSX.IntrinsicElements.div, Decl(react16.d.ts, 2420, 114))
+
+    </Wrapper>
+>Wrapper : Symbol(Wrapper, Decl(jsxEmptyExpressionNotCountedAsChild.tsx, 5, 1))
+
+)
diff --git a/tests/baselines/reference/jsxEmptyExpressionNotCountedAsChild(jsx=react-jsxdev).types b/tests/baselines/reference/jsxEmptyExpressionNotCountedAsChild(jsx=react-jsxdev).types
new file mode 100644
index 0000000000000..c53d5e821ea2f
--- /dev/null
+++ b/tests/baselines/reference/jsxEmptyExpressionNotCountedAsChild(jsx=react-jsxdev).types
@@ -0,0 +1,42 @@
+=== tests/cases/compiler/jsxEmptyExpressionNotCountedAsChild.tsx ===
+/// <reference path="react16.d.ts" />
+import * as React from 'react'
+>React : typeof React
+
+interface Props {
+    children: React.ReactElement<any>
+>children : React.ReactElement<any>
+>React : any
+}
+
+function Wrapper(props: Props) {
+>Wrapper : (props: Props) => JSX.Element
+>props : Props
+
+    return <div>{props.children}</div>
+><div>{props.children}</div> : JSX.Element
+>div : any
+>props.children : React.ReactElement<any>
+>props : Props
+>children : React.ReactElement<any>
+>div : any
+}
+
+const element = (
+>element : JSX.Element
+>(    <Wrapper>    {/* comment */}     <div>Hello</div>    </Wrapper>) : JSX.Element
+
+    <Wrapper>
+><Wrapper>    {/* comment */}     <div>Hello</div>    </Wrapper> : JSX.Element
+>Wrapper : (props: Props) => JSX.Element
+
+    {/* comment */}
+     <div>Hello</div>
+><div>Hello</div> : JSX.Element
+>div : any
+>div : any
+
+    </Wrapper>
+>Wrapper : (props: Props) => JSX.Element
+
+)
diff --git a/tests/cases/compiler/jsxEmptyExpressionNotCountedAsChild.tsx b/tests/cases/compiler/jsxEmptyExpressionNotCountedAsChild.tsx
new file mode 100644
index 0000000000000..91faab1116657
--- /dev/null
+++ b/tests/cases/compiler/jsxEmptyExpressionNotCountedAsChild.tsx
@@ -0,0 +1,19 @@
+// @jsx: react,react-jsx,react-jsxdev
+// @strict: true
+/// <reference path="/.lib/react16.d.ts" />
+import * as React from 'react'
+
+interface Props {
+    children: React.ReactElement<any>
+}
+
+function Wrapper(props: Props) {
+    return <div>{props.children}</div>
+}
+
+const element = (
+    <Wrapper>
+    {/* comment */}
+     <div>Hello</div>
+    </Wrapper>
+)
\ No newline at end of file

From c29d3f8f6fcfbf45a745608d117936906a9d4802 Mon Sep 17 00:00:00 2001
From: Wesley Wigham <wwigham@gmail.com>
Date: Mon, 19 Oct 2020 14:57:51 -0700
Subject: [PATCH 2/2] Accept updated baselines

---
 .../jsxEmptyExpressionNotCountedAsChild(jsx=react-jsx).js   | 6 +++---
 ...jsxEmptyExpressionNotCountedAsChild(jsx=react-jsxdev).js | 6 +++---
 2 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/tests/baselines/reference/jsxEmptyExpressionNotCountedAsChild(jsx=react-jsx).js b/tests/baselines/reference/jsxEmptyExpressionNotCountedAsChild(jsx=react-jsx).js
index 8e16889ba3b46..3d2aeb4218c7f 100644
--- a/tests/baselines/reference/jsxEmptyExpressionNotCountedAsChild(jsx=react-jsx).js
+++ b/tests/baselines/reference/jsxEmptyExpressionNotCountedAsChild(jsx=react-jsx).js
@@ -20,10 +20,10 @@ const element = (
 //// [jsxEmptyExpressionNotCountedAsChild.js]
 "use strict";
 exports.__esModule = true;
-var jsx_runtime_js_1 = require("react/jsx-runtime.js");
+var jsx_runtime_1 = require("react/jsx-runtime");
 /// <reference path="react16.d.ts" />
 var React = require("react");
 function Wrapper(props) {
-    return jsx_runtime_js_1.jsx("div", { children: props.children }, void 0);
+    return jsx_runtime_1.jsx("div", { children: props.children }, void 0);
 }
-var element = (jsx_runtime_js_1.jsx(Wrapper, { children: jsx_runtime_js_1.jsx("div", { children: "Hello" }, void 0) }, void 0));
+var element = (jsx_runtime_1.jsx(Wrapper, { children: jsx_runtime_1.jsx("div", { children: "Hello" }, void 0) }, void 0));
diff --git a/tests/baselines/reference/jsxEmptyExpressionNotCountedAsChild(jsx=react-jsxdev).js b/tests/baselines/reference/jsxEmptyExpressionNotCountedAsChild(jsx=react-jsxdev).js
index 2495a5621285b..5561b73e45425 100644
--- a/tests/baselines/reference/jsxEmptyExpressionNotCountedAsChild(jsx=react-jsxdev).js
+++ b/tests/baselines/reference/jsxEmptyExpressionNotCountedAsChild(jsx=react-jsxdev).js
@@ -20,11 +20,11 @@ const element = (
 //// [jsxEmptyExpressionNotCountedAsChild.js]
 "use strict";
 exports.__esModule = true;
-var jsx_dev_runtime_js_1 = require("react/jsx-dev-runtime.js");
+var jsx_dev_runtime_1 = require("react/jsx-dev-runtime");
 var _jsxFileName = "tests/cases/compiler/jsxEmptyExpressionNotCountedAsChild.tsx";
 /// <reference path="react16.d.ts" />
 var React = require("react");
 function Wrapper(props) {
-    return jsx_dev_runtime_js_1.jsxDEV("div", { children: props.children }, void 0, false, { fileName: _jsxFileName, lineNumber: 9, columnNumber: 11 }, this);
+    return jsx_dev_runtime_1.jsxDEV("div", { children: props.children }, void 0, false, { fileName: _jsxFileName, lineNumber: 9, columnNumber: 11 }, this);
 }
-var element = (jsx_dev_runtime_js_1.jsxDEV(Wrapper, { children: jsx_dev_runtime_js_1.jsxDEV("div", { children: "Hello" }, void 0, false, { fileName: _jsxFileName, lineNumber: 15, columnNumber: 6 }, this) }, void 0, false, { fileName: _jsxFileName, lineNumber: 12, columnNumber: 18 }, this));
+var element = (jsx_dev_runtime_1.jsxDEV(Wrapper, { children: jsx_dev_runtime_1.jsxDEV("div", { children: "Hello" }, void 0, false, { fileName: _jsxFileName, lineNumber: 15, columnNumber: 6 }, this) }, void 0, false, { fileName: _jsxFileName, lineNumber: 12, columnNumber: 18 }, this));