Add outlining spans for JSX elements

src/services/outliningElementsCollector.ts

@@ -183,6 +183,26 @@ namespace ts.OutliningElementsCollector {
                 return spanForObjectOrArrayLiteral(n);
             case SyntaxKind.ArrayLiteralExpression:
                 return spanForObjectOrArrayLiteral(n, SyntaxKind.OpenBracketToken);
+            case SyntaxKind.JsxElement:
+                return spanForJSXElement(<JsxElement>n);
+            case SyntaxKind.JsxSelfClosingElement:
+            case SyntaxKind.JsxOpeningElement:
+                return spanForJSXAttributes((<JsxOpeningLikeElement>n).attributes);
+        }
+
+        function spanForJSXElement(node: JsxElement): OutliningSpan | undefined {
+            const textSpan = createTextSpanFromBounds(node.openingElement.getStart(sourceFile), node.closingElement.getEnd());
+            const tagName = node.openingElement.tagName.getText(sourceFile);
+            const bannerText = "<" + tagName + ">...</" + tagName + ">";
+            return createOutliningSpan(textSpan, OutliningSpanKind.Code, textSpan, /*autoCollapse*/ false, bannerText);
+        }
+
+        function spanForJSXAttributes(node: JsxAttributes): OutliningSpan | undefined {
+            if (node.properties.length === 0) {
+                return undefined;
+            }
+
+            return createOutliningSpanFromBounds(node.getStart(sourceFile), node.getEnd(), OutliningSpanKind.Code);
         }
 
         function spanForObjectOrArrayLiteral(node: Node, open: SyntaxKind.OpenBraceToken | SyntaxKind.OpenBracketToken = SyntaxKind.OpenBraceToken): OutliningSpan | undefined {

tests/cases/fourslash/getJSXOutliningSpans.tsx

@@ -0,0 +1,33 @@
+////import React, { Component } from 'react';
+////
+////export class Home extends Component[| {
+////  render()[| {
+////    return (
+////    [|<div>
+////      [|<h1>Hello, world!</h1>|]
+////      [|<ul>
+////        [|<li>
+////          [|<a [|href='https://get.asp.net/'|]>
+////            ASP.NET Core
+////          </a>|]
+////        </li>|]
+////        [|<li>[|<a [|href='https://facebook.github.io/react/'|]>React</a>|] for client-side code</li>|]
+////        [|<li>[|<a [|href='http://getbootstrap.com/'|]>Bootstrap</a>|] for layout and styling</li>|]
+////      </ul>|]
+////      <div
+////        [|accesskey="test"
+////        class="active"
+////        dir="auto"|] />
+////      <PageHeader [|title="Log in"
+////        {...[|{
+////          item: true,
+////          xs: 9,
+////          md: 5
+////        }|]}|]
+////      />
+////    </div>|]
+////    );
+////  }|]
+////}|]
+
+verify.outliningSpansInCurrentFile(test.ranges(), "code");