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 <[email protected]>

Co-authored-by: Nathan Shively-Sanders <[email protected]>

Author: hi-ogawa

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);

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() { }

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() { }

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: "</>" },
 });

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>" },
 });