From 5ef043987a9848e4b494281b3533d99bafce56ec Mon Sep 17 00:00:00 2001
From: Hiroshi Ogawa <hi.ogawa.zz@gmail.com>
Date: Mon, 20 Sep 2021 23:19:55 +0900
Subject: [PATCH] fix(45802): keep children of mismatched jsx element (#45839)

* fix(45802): keep children of mismatched jsx element

* Apply suggestions from code review

Co-authored-by: Nathan Shively-Sanders <293473+sandersn@users.noreply.github.com>

Co-authored-by: Nathan Shively-Sanders <293473+sandersn@users.noreply.github.com>
---
 src/compiler/parser.ts                        |  6 ++---
 .../reference/jsxUnclosedParserRecovery.js    | 22 ++++++++++++++-----
 .../reference/jsxUnclosedParserRecovery.types | 22 ++++++++++---------
 tests/cases/fourslash/autoCloseFragment.ts    |  8 +++++++
 tests/cases/fourslash/autoCloseTag.ts         |  8 +++++++
 5 files changed, 47 insertions(+), 19 deletions(-)

diff --git a/src/compiler/parser.ts b/src/compiler/parser.ts
index dbe5394908d..0cff555db87 100644
--- a/src/compiler/parser.ts
+++ b/src/compiler/parser.ts
@@ -5042,12 +5042,12 @@ namespace ts {
                     && !tagNamesAreEquivalent(lastChild.openingElement.tagName, lastChild.closingElement.tagName)
                     && tagNamesAreEquivalent(opening.tagName, lastChild.closingElement.tagName)) {
                     // when an unclosed JsxOpeningElement incorrectly parses its parent's JsxClosingElement,
-                    // restructure (<div>(...<span></div>)) --> (<div>(...<span></span>)</div>)
+                    // restructure (<div>(...<span>...</div>)) --> (<div>(...<span>...</>)</div>)
                     // (no need to error; the parent will error)
-                    const end = lastChild.openingElement.end; // newly-created children and closing are both zero-width end/end
+                    const end = lastChild.children.end;
                     const newLast = finishNode(factory.createJsxElement(
                         lastChild.openingElement,
-                        createNodeArray([], end, end),
+                        lastChild.children,
                         finishNode(factory.createJsxClosingElement(finishNode(factory.createIdentifier(""), end, end)), end, end)),
                     lastChild.openingElement.pos,
                     end);
diff --git a/tests/baselines/reference/jsxUnclosedParserRecovery.js b/tests/baselines/reference/jsxUnclosedParserRecovery.js
index 17cadbad9c2..801f25abe74 100644
--- a/tests/baselines/reference/jsxUnclosedParserRecovery.js
+++ b/tests/baselines/reference/jsxUnclosedParserRecovery.js
@@ -195,10 +195,12 @@ var donkey = <div>
 </div>;
 function noCloseBracketTypeArgAttrs() { }
 var donkey = <div>
-    <diddy></></div>;
+    <diddy>
+</></div>;
 function noSelfclose() { }
 var donkey = <div>
-    <diddy bananas="please"></></div>;
+    <diddy bananas="please">
+</></div>;
 function noSelfcloseTypeArgAttrs() { }
 var donkey = <div>
     < />
@@ -234,10 +236,14 @@ var donkey = <div>
 </div>;
 function noCloseBracketTypeArgAttrsTrailingTag() { }
 var donkey = <div>
-    <diddy></></div>;
+    <diddy>
+    <diddy />
+</></div>;
 function noSelfcloseTrailingTag() { }
 var donkey = <div>
-    <diddy bananas="please"></></div>;
+    <diddy bananas="please">
+    <diddy />
+</></div>;
 function noSelfcloseTypeArgAttrsTrailingTag() { }
 var donkey = <div>
     <Cranky Wrinkly Funky/>
@@ -270,8 +276,12 @@ var donkey = <div>
 </div>;
 function noCloseBracketTypeArgAttrsTrailingText() { }
 var donkey = <div>
-    <diddy></></div>;
+    <diddy>
+    Cranky Wrinkly Funky
+</></div>;
 function noSelfcloseTrailingText() { }
 var donkey = <div>
-    <diddy bananas="please"></></div>;
+    <diddy bananas="please">
+    Cranky Wrinkly Funky
+</></div>;
 function noSelfcloseTypeArgAttrsTrailingText() { }
diff --git a/tests/baselines/reference/jsxUnclosedParserRecovery.types b/tests/baselines/reference/jsxUnclosedParserRecovery.types
index 0c836329c7c..c3e968da6f5 100644
--- a/tests/baselines/reference/jsxUnclosedParserRecovery.types
+++ b/tests/baselines/reference/jsxUnclosedParserRecovery.types
@@ -337,13 +337,15 @@ var donkey = <div>
 >div : any
 
     <diddy>
-><diddy> : any
+><diddy>    <diddy/> : any
 >diddy : () => any
 
     <diddy/>
-> : any
+><diddy/> : any
+>diddy : () => any
 
 </div>;
+> : any
 >div : any
 
 function noSelfcloseTrailingTag() { }
@@ -355,14 +357,16 @@ var donkey = <div>
 >div : any
 
     <diddy<boolean> bananas="please">
-><diddy<boolean> bananas="please"> : any
+><diddy<boolean> bananas="please">    <diddy/> : any
 >diddy : () => any
 >bananas : string
 
     <diddy/>
-> : any
+><diddy/> : any
+>diddy : () => any
 
 </div>;
+> : any
 >div : any
 
 function noSelfcloseTypeArgAttrsTrailingTag() { }
@@ -508,13 +512,12 @@ var donkey = <div>
 >div : any
 
     <diddy>
-><diddy> : any
+><diddy>    Cranky Wrinkly Funky : any
 >diddy : () => any
 
     Cranky Wrinkly Funky
-> : any
-
 </div>;
+> : any
 >div : any
 
 function noSelfcloseTrailingText() { }
@@ -526,14 +529,13 @@ var donkey = <div>
 >div : any
 
     <diddy<boolean> bananas="please">
-><diddy<boolean> bananas="please"> : any
+><diddy<boolean> bananas="please">    Cranky Wrinkly Funky : any
 >diddy : () => any
 >bananas : string
 
     Cranky Wrinkly Funky
-> : any
-
 </div>;
+> : any
 >div : any
 
 function noSelfcloseTypeArgAttrsTrailingText() { }
diff --git a/tests/cases/fourslash/autoCloseFragment.ts b/tests/cases/fourslash/autoCloseFragment.ts
index baa80a8aa62..27554f053d3 100644
--- a/tests/cases/fourslash/autoCloseFragment.ts
+++ b/tests/cases/fourslash/autoCloseFragment.ts
@@ -38,6 +38,13 @@
 ////    <>/*8*/</>
 ////</div>;
 
+// @Filename: /9.tsx
+////const x = <p>
+////    <>
+////        <>/*9*/
+////    </>
+////</p>
+
 verify.jsxClosingTag({
     0: { newText: "</>" },
     1: undefined,
@@ -48,4 +55,5 @@ verify.jsxClosingTag({
     6: { newText: "</>" },
     7: { newText: "</>" },
     8: undefined,
+    9: { newText: "</>" },
 });
diff --git a/tests/cases/fourslash/autoCloseTag.ts b/tests/cases/fourslash/autoCloseTag.ts
index 6ba0b0f209f..b48be66ab58 100644
--- a/tests/cases/fourslash/autoCloseTag.ts
+++ b/tests/cases/fourslash/autoCloseTag.ts
@@ -38,6 +38,13 @@
 ////    <div>/*8*/</div>
 ////</div>;
 
+// @Filename: /9.tsx
+////const x = <p>
+////    <div>
+////        <div>/*9*/
+////    </div>
+////</p>
+
 verify.jsxClosingTag({
     0: { newText: "</div>" },
     1: undefined,
@@ -48,4 +55,5 @@ verify.jsxClosingTag({
     6: { newText: "</div>" },
     7: { newText: "</p>" },
     8: undefined,
+    9: { newText: "</div>" },
 });