Improve parser recovery for unclosed/mismatched JSX elements

src/compiler/parser.ts

@@ -4882,18 +4882,45 @@ namespace ts {
             return finishNode(factory.createPropertyAccessExpression(expression, parseRightSideOfDot(/*allowIdentifierNames*/ true, /*allowPrivateIdentifiers*/ true)), pos);
         }
 
-        function parseJsxElementOrSelfClosingElementOrFragment(inExpressionContext: boolean, topInvalidNodePosition?: number): JsxElement | JsxSelfClosingElement | JsxFragment {
+        function parseJsxElementOrSelfClosingElementOrFragment(inExpressionContext: boolean, topInvalidNodePosition?: number, openingTag?: JsxOpeningElement | JsxOpeningFragment): JsxElement | JsxSelfClosingElement | JsxFragment {
             const pos = getNodePos();
             const opening = parseJsxOpeningOrSelfClosingElementOrOpeningFragment(inExpressionContext);
             let result: JsxElement | JsxSelfClosingElement | JsxFragment;
             if (opening.kind === SyntaxKind.JsxOpeningElement) {
-                const children = parseJsxChildren(opening);
-                const closingElement = parseJsxClosingElement(inExpressionContext);
-
-                if (!tagNamesAreEquivalent(opening.tagName, closingElement.tagName)) {
-                    parseErrorAtRange(closingElement, Diagnostics.Expected_corresponding_JSX_closing_tag_for_0, getTextOfNodeFromSourceText(sourceText, opening.tagName));
+                let children = parseJsxChildren(opening);
+                let closingElement: JsxClosingElement;
+
+                const lastChild: JsxChild | undefined = children[children.length - 1];
+                if (lastChild?.kind === SyntaxKind.JsxElement
+                    && !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>)
+                    // (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 newLast = finishNode(factory.createJsxElement(
+                        lastChild.openingElement,
+                        createNodeArray([], end, end),
+                        finishNode(factory.createJsxClosingElement(finishNode(factory.createIdentifier(""), end, end)), end, end)),
+                    lastChild.openingElement.pos,
+                    end);
+
+                    children = createNodeArray([...children.slice(0, children.length - 1), newLast], children.pos, end);
+                    closingElement = lastChild.closingElement;
+                }
+                else {
+                    closingElement = parseJsxClosingElement(opening, inExpressionContext);
+                    if (!tagNamesAreEquivalent(opening.tagName, closingElement.tagName)) {
+                        if (openingTag && isJsxOpeningElement(openingTag) && tagNamesAreEquivalent(closingElement.tagName, openingTag.tagName)) {
+                            // opening incorrectly matched with its parent's closing -- put error on opening
+                            parseErrorAtRange(opening.tagName, Diagnostics.JSX_element_0_has_no_corresponding_closing_tag, getTextOfNodeFromSourceText(sourceText, opening.tagName));
+                        }
+                        else {
+                            // other opening/closing mismatches -- put error on closing
+                            parseErrorAtRange(closingElement.tagName, Diagnostics.Expected_corresponding_JSX_closing_tag_for_0, getTextOfNodeFromSourceText(sourceText, opening.tagName));
+                        }
+                    }
                 }
-
                 result = finishNode(factory.createJsxElement(opening, children, closingElement), pos);
             }
             else if (opening.kind === SyntaxKind.JsxOpeningFragment) {
@@ -4958,7 +4985,7 @@ namespace ts {
                 case SyntaxKind.OpenBraceToken:
                     return parseJsxExpression(/*inExpressionContext*/ false);
                 case SyntaxKind.LessThanToken:
-                    return parseJsxElementOrSelfClosingElementOrFragment(/*inExpressionContext*/ false);
+                    return parseJsxElementOrSelfClosingElementOrFragment(/*inExpressionContext*/ false, /*topInvalidNodePosition*/ undefined, openingTag);
                 default:
                     return Debug.assertNever(token);
             }
@@ -4974,6 +5001,13 @@ namespace ts {
                 const child = parseJsxChild(openingTag, currentToken = scanner.reScanJsxToken());
                 if (!child) break;
                 list.push(child);
+                if (isJsxOpeningElement(openingTag)
+                    && child?.kind === SyntaxKind.JsxElement
+                    && !tagNamesAreEquivalent(child.openingElement.tagName, child.closingElement.tagName)
+                    && tagNamesAreEquivalent(openingTag.tagName, child.closingElement.tagName)) {
+                    // stop after parsing a mismatched child like <div>...(<span></div>) in order to reattach the </div> higher
+                    break;
+                }
             }
 
             parsingContext = saveParsingContext;
@@ -4995,7 +5029,6 @@ namespace ts {
                 scanJsxText();
                 return finishNode(factory.createJsxOpeningFragment(), pos);
             }
-
             const tagName = parseJsxElementName();
             const typeArguments = (contextFlags & NodeFlags.JavaScriptFile) === 0 ? tryParseTypeArguments() : undefined;
             const attributes = parseJsxAttributes();
@@ -5011,12 +5044,14 @@ namespace ts {
             }
             else {
                 parseExpected(SyntaxKind.SlashToken);
-                if (inExpressionContext) {
-                    parseExpected(SyntaxKind.GreaterThanToken);
-                }
-                else {
-                    parseExpected(SyntaxKind.GreaterThanToken, /*diagnostic*/ undefined, /*shouldAdvance*/ false);
-                    scanJsxText();
+                if (parseExpected(SyntaxKind.GreaterThanToken, /*diagnostic*/ undefined, /*shouldAdvance*/ false)) {
+                    // manually advance the scanner in order to look for jsx text inside jsx
+                    if (inExpressionContext) {
+                        nextToken();
+                    }
+                    else {
+                        scanJsxText();
+                    }
                 }
                 node = factory.createJsxSelfClosingElement(tagName, typeArguments, attributes);
             }
@@ -5094,16 +5129,18 @@ namespace ts {
             return finishNode(factory.createJsxSpreadAttribute(expression), pos);
         }
 
-        function parseJsxClosingElement(inExpressionContext: boolean): JsxClosingElement {
+        function parseJsxClosingElement(open: JsxOpeningElement, inExpressionContext: boolean): JsxClosingElement {
             const pos = getNodePos();
             parseExpected(SyntaxKind.LessThanSlashToken);
             const tagName = parseJsxElementName();
-            if (inExpressionContext) {
-                parseExpected(SyntaxKind.GreaterThanToken);
-            }
-            else {
-                parseExpected(SyntaxKind.GreaterThanToken, /*diagnostic*/ undefined, /*shouldAdvance*/ false);
-                scanJsxText();
+            if (parseExpected(SyntaxKind.GreaterThanToken, /*diagnostic*/ undefined, /*shouldAdvance*/ false)) {
+                // manually advance the scanner in order to look for jsx text inside jsx
+                if (inExpressionContext || !tagNamesAreEquivalent(open.tagName, tagName)) {
+                    nextToken();
+                }
+                else {
+                    scanJsxText();
+                }
             }
             return finishNode(factory.createJsxClosingElement(tagName), pos);
         }
@@ -5114,12 +5151,14 @@ namespace ts {
             if (tokenIsIdentifierOrKeyword(token())) {
                 parseErrorAtRange(parseJsxElementName(), Diagnostics.Expected_corresponding_closing_tag_for_JSX_fragment);
             }
-            if (inExpressionContext) {
-                parseExpected(SyntaxKind.GreaterThanToken);
-            }
-            else {
-                parseExpected(SyntaxKind.GreaterThanToken, /*diagnostic*/ undefined, /*shouldAdvance*/ false);
-                scanJsxText();
+            if (parseExpected(SyntaxKind.GreaterThanToken, /*diagnostic*/ undefined, /*shouldAdvance*/ false)) {
+                // manually advance the scanner in order to look for jsx text inside jsx
+                if (inExpressionContext) {
+                    nextToken();
+                }
+                else {
+                    scanJsxText();
+                }
             }
             return finishNode(factory.createJsxJsxClosingFragment(), pos);
         }

src/harness/fourslashImpl.ts

@@ -3171,7 +3171,7 @@ namespace FourSlash {
             for (const markerName in map) {
                 this.goToMarker(markerName);
                 const actual = this.languageService.getJsxClosingTagAtPosition(this.activeFile.fileName, this.currentCaretPosition);
-                assert.deepEqual(actual, map[markerName]);
+                assert.deepEqual(actual, map[markerName], markerName);
             }
         }
 

tests/baselines/reference/jsFileCompilationTypeArgumentSyntaxOfCall.errors.txt

@@ -2,7 +2,7 @@ tests/cases/compiler/a.jsx(1,13): error TS1109: Expression expected.
 tests/cases/compiler/a.jsx(4,1): error TS2657: JSX expressions must have one parent element.
 tests/cases/compiler/a.jsx(4,5): error TS1003: Identifier expected.
 tests/cases/compiler/a.jsx(4,13): error TS1382: Unexpected token. Did you mean `{'>'}` or `>`?
-tests/cases/compiler/a.jsx(4,14): error TS17002: Expected corresponding JSX closing tag for 'number'.
+tests/cases/compiler/a.jsx(4,16): error TS17002: Expected corresponding JSX closing tag for 'number'.
 tests/cases/compiler/a.jsx(5,1): error TS2657: JSX expressions must have one parent element.
 tests/cases/compiler/a.jsx(5,5): error TS1003: Identifier expected.
 tests/cases/compiler/a.jsx(5,6): error TS17008: JSX element 'number' has no corresponding closing tag.
@@ -23,7 +23,7 @@ tests/cases/compiler/a.jsx(6,1): error TS1005: '</' expected.
 !!! error TS1003: Identifier expected.
                 ~
 !!! error TS1382: Unexpected token. Did you mean `{'>'}` or `&gt;`?
-                 ~~~~~~
+                   ~~~
 !!! error TS17002: Expected corresponding JSX closing tag for 'number'.
     <Foo<number>/>;
     ~~~~~~~~~~~~~~~

tests/baselines/reference/jsxAndTypeAssertion.js

@@ -34,7 +34,7 @@ x = <any><any></any>;
 
 x = <foo>hello {<foo>} </foo>};
 
-x = <foo test={<foo>}>hello</foo>}/>
+x = <foo test={<foo>}>hello</foo>}/>;
 
 x = <foo test={<foo>}>hello{<foo>}</foo>};
 

tests/baselines/reference/jsxAndTypeAssertion.types

@@ -33,7 +33,7 @@ x = <foo>hello {<foo>{}} </foo>;
 >foo : typeof foo
 
 x = <foo test={<foo>{}}>hello</foo>;
-><foo test={<foo>{}}>hello</foo>; : any
+><foo test={<foo>{}}>hello</foo> : any
 >foo : typeof foo
 >test : any
 ><foo>{}}>hello</foo> : any

tests/baselines/reference/jsxInvalidEsprimaTestSuite.errors.txt

@@ -8,7 +8,7 @@ tests/cases/conformance/jsx/10.tsx(1,13): error TS1005: '>' expected.
 tests/cases/conformance/jsx/10.tsx(1,14): error TS2304: Cannot find name 'c'.
 tests/cases/conformance/jsx/10.tsx(1,16): error TS1109: Expression expected.
 tests/cases/conformance/jsx/11.tsx(1,2): error TS2304: Cannot find name 'a'.
-tests/cases/conformance/jsx/11.tsx(1,8): error TS17002: Expected corresponding JSX closing tag for 'a.b.c'.
+tests/cases/conformance/jsx/11.tsx(1,10): error TS17002: Expected corresponding JSX closing tag for 'a.b.c'.
 tests/cases/conformance/jsx/12.tsx(1,1): error TS1109: Expression expected.
 tests/cases/conformance/jsx/12.tsx(1,2): error TS1109: Expression expected.
 tests/cases/conformance/jsx/12.tsx(1,5): error TS1109: Expression expected.
@@ -73,9 +73,9 @@ tests/cases/conformance/jsx/31.tsx(1,4): error TS1003: Identifier expected.
 tests/cases/conformance/jsx/4.tsx(1,6): error TS1005: '{' expected.
 tests/cases/conformance/jsx/5.tsx(1,2): error TS17008: JSX element 'a' has no corresponding closing tag.
 tests/cases/conformance/jsx/5.tsx(1,5): error TS1005: '</' expected.
-tests/cases/conformance/jsx/6.tsx(1,4): error TS17002: Expected corresponding JSX closing tag for 'a'.
+tests/cases/conformance/jsx/6.tsx(1,6): error TS17002: Expected corresponding JSX closing tag for 'a'.
 tests/cases/conformance/jsx/7.tsx(1,13): error TS1002: Unterminated string literal.
-tests/cases/conformance/jsx/8.tsx(1,6): error TS17002: Expected corresponding JSX closing tag for 'a:b'.
+tests/cases/conformance/jsx/8.tsx(1,8): error TS17002: Expected corresponding JSX closing tag for 'a:b'.
 tests/cases/conformance/jsx/9.tsx(1,2): error TS2304: Cannot find name 'a:b'.
 tests/cases/conformance/jsx/9.tsx(1,2): error TS2633: JSX property access expressions cannot include JSX namespace names
 tests/cases/conformance/jsx/9.tsx(1,10): error TS2304: Cannot find name 'a:b'.
@@ -119,15 +119,15 @@ tests/cases/conformance/jsx/9.tsx(1,10): error TS2304: Cannot find name 'a:b'.
 !!! error TS1005: '</' expected.
 ==== tests/cases/conformance/jsx/6.tsx (1 errors) ====
     <a></b>;
-       ~~~~
+         ~
 !!! error TS17002: Expected corresponding JSX closing tag for 'a'.
 ==== tests/cases/conformance/jsx/7.tsx (1 errors) ====
     <a foo="bar;
 
 !!! error TS1002: Unterminated string literal.
 ==== tests/cases/conformance/jsx/8.tsx (1 errors) ====
     <a:b></b>;
-         ~~~~
+           ~
 !!! error TS17002: Expected corresponding JSX closing tag for 'a:b'.
 ==== tests/cases/conformance/jsx/9.tsx (3 errors) ====
     <a:b.c></a:b.c>;
@@ -155,7 +155,7 @@ tests/cases/conformance/jsx/9.tsx(1,10): error TS2304: Cannot find name 'a:b'.
     <a.b.c></a>;
      ~
 !!! error TS2304: Cannot find name 'a'.
-           ~~~~
+             ~
 !!! error TS17002: Expected corresponding JSX closing tag for 'a.b.c'.
 ==== tests/cases/conformance/jsx/12.tsx (6 errors) ====
     <.a></.a>;

tests/baselines/reference/jsxParsingError2.errors.txt

@@ -1,11 +1,9 @@
-tests/cases/conformance/jsx/Error1.tsx(2,11): error TS17008: JSX element 'div' has no corresponding closing tag.
-tests/cases/conformance/jsx/Error1.tsx(2,21): error TS17002: Expected corresponding JSX closing tag for 'span'.
-tests/cases/conformance/jsx/Error1.tsx(3,1): error TS1005: '</' expected.
-tests/cases/conformance/jsx/Error2.tsx(1,15): error TS17002: Expected corresponding JSX closing tag for 'div'.
+tests/cases/conformance/jsx/Error1.tsx(2,16): error TS17008: JSX element 'span' has no corresponding closing tag.
+tests/cases/conformance/jsx/Error2.tsx(1,17): error TS17002: Expected corresponding JSX closing tag for 'div'.
 tests/cases/conformance/jsx/Error3.tsx(1,11): error TS17008: JSX element 'div' has no corresponding closing tag.
 tests/cases/conformance/jsx/Error3.tsx(3,1): error TS1005: '</' expected.
 tests/cases/conformance/jsx/Error4.tsx(1,11): error TS17008: JSX element 'div' has no corresponding closing tag.
-tests/cases/conformance/jsx/Error4.tsx(1,20): error TS17002: Expected corresponding JSX closing tag for 'div'.
+tests/cases/conformance/jsx/Error4.tsx(1,22): error TS17002: Expected corresponding JSX closing tag for 'div'.
 tests/cases/conformance/jsx/Error4.tsx(2,1): error TS1005: '</' expected.
 tests/cases/conformance/jsx/Error5.tsx(1,11): error TS17008: JSX element 'div' has no corresponding closing tag.
 tests/cases/conformance/jsx/Error5.tsx(1,16): error TS17008: JSX element 'span' has no corresponding closing tag.
@@ -20,19 +18,15 @@ tests/cases/conformance/jsx/Error5.tsx(3,1): error TS1005: '</' expected.
     	}
     }
 
-==== tests/cases/conformance/jsx/Error1.tsx (3 errors) ====
+==== tests/cases/conformance/jsx/Error1.tsx (1 errors) ====
     // Issue error about missing span closing tag, not missing div closing tag
     let x1 = <div><span></div>;
-              ~~~
-!!! error TS17008: JSX element 'div' has no corresponding closing tag.
-                        ~~~~~~
-!!! error TS17002: Expected corresponding JSX closing tag for 'span'.
-
+                   ~~~~
+!!! error TS17008: JSX element 'span' has no corresponding closing tag.
 
-!!! error TS1005: '</' expected.
 ==== tests/cases/conformance/jsx/Error2.tsx (1 errors) ====
     let x2 = <div></span>;
-                  ~~~~~~~
+                    ~~~~
 !!! error TS17002: Expected corresponding JSX closing tag for 'div'.
 
 
@@ -48,7 +42,7 @@ tests/cases/conformance/jsx/Error5.tsx(3,1): error TS1005: '</' expected.
     let x4 = <div><div></span>;
               ~~~
 !!! error TS17008: JSX element 'div' has no corresponding closing tag.
-                       ~~~~~~~
+                         ~~~~
 !!! error TS17002: Expected corresponding JSX closing tag for 'div'.
 
 

tests/baselines/reference/jsxParsingError2.js

@@ -31,8 +31,7 @@ let x5 = <div><span>
 //// [file.jsx]
 //// [Error1.jsx]
 // Issue error about missing span closing tag, not missing div closing tag
-var x1 = <div><span></div>;
-</>;
+var x1 = <div><span></></div>;
 //// [Error2.jsx]
 var x2 = <div></span>;
 //// [Error3.jsx]

tests/baselines/reference/jsxParsingError2.types

@@ -11,13 +11,12 @@ declare module JSX {
 // Issue error about missing span closing tag, not missing div closing tag
 let x1 = <div><span></div>;
 >x1 : JSX.Element
-><div><span></div>; : JSX.Element
+><div><span></div> : JSX.Element
 >div : any
-><span></div> : JSX.Element
+><span> : JSX.Element
 >span : any
->div : any
-
 > : any
+>div : any
 
 === tests/cases/conformance/jsx/Error2.tsx ===
 let x2 = <div></span>;