From 3ca4c23e4c049c01788947030a360bab5a3ea1ab Mon Sep 17 00:00:00 2001
From: Benjamin Lichtman <belichtm@microsoft.com>
Date: Fri, 29 Jun 2018 16:41:45 -0700
Subject: [PATCH 1/4] Add outlining regions for jsxelements and jsxattributes

---
 src/services/outliningElementsCollector.ts | 16 ++++++++++++++++
 1 file changed, 16 insertions(+)

diff --git a/src/services/outliningElementsCollector.ts b/src/services/outliningElementsCollector.ts
index bae6bc7222c17..d9d6fb6640a0a 100644
--- a/src/services/outliningElementsCollector.ts
+++ b/src/services/outliningElementsCollector.ts
@@ -183,6 +183,22 @@ 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(), node.closingElement.getEnd());
+            const tagName = node.openingElement.tagName.getText();
+            const bannerText = "<" + tagName + ">...</" + tagName + ">";
+            return createOutliningSpan(textSpan, OutliningSpanKind.Code, textSpan, /*autoCollapse*/ false, bannerText);
+        }
+
+        function spanForJSXAttributes(node: JsxAttributes): OutliningSpan | undefined {
+            return createOutliningSpanFromBounds(node.getStart(), node.getEnd(), OutliningSpanKind.Code);
         }
 
         function spanForObjectOrArrayLiteral(node: Node, open: SyntaxKind.OpenBraceToken | SyntaxKind.OpenBracketToken = SyntaxKind.OpenBraceToken): OutliningSpan | undefined {

From 6f68652f2a72283339fd596e179fd625dfc13fac Mon Sep 17 00:00:00 2001
From: Benjamin Lichtman <belichtm@microsoft.com>
Date: Fri, 29 Jun 2018 17:10:35 -0700
Subject: [PATCH 2/4] Only include attribute span if one or more

---
 src/services/outliningElementsCollector.ts | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/src/services/outliningElementsCollector.ts b/src/services/outliningElementsCollector.ts
index d9d6fb6640a0a..3048d1a5e339d 100644
--- a/src/services/outliningElementsCollector.ts
+++ b/src/services/outliningElementsCollector.ts
@@ -198,6 +198,10 @@ namespace ts.OutliningElementsCollector {
         }
 
         function spanForJSXAttributes(node: JsxAttributes): OutliningSpan | undefined {
+            if (node.properties.length === 0) {
+                return undefined;
+            }
+
             return createOutliningSpanFromBounds(node.getStart(), node.getEnd(), OutliningSpanKind.Code);
         }
 

From 2c14bf1d59d89fd067c66faaa606f12fb1e85ba5 Mon Sep 17 00:00:00 2001
From: Benjamin Lichtman <belichtm@microsoft.com>
Date: Fri, 29 Jun 2018 17:10:46 -0700
Subject: [PATCH 3/4] Add test

---
 .../cases/fourslash/getJSXOutliningSpans.tsx  | 33 +++++++++++++++++++
 1 file changed, 33 insertions(+)
 create mode 100644 tests/cases/fourslash/getJSXOutliningSpans.tsx

diff --git a/tests/cases/fourslash/getJSXOutliningSpans.tsx b/tests/cases/fourslash/getJSXOutliningSpans.tsx
new file mode 100644
index 0000000000000..fa4f541b1939b
--- /dev/null
+++ b/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");

From 5c7b47e6e37b2cf9e7b85069bcf5a98e7e6c7ff5 Mon Sep 17 00:00:00 2001
From: Benjamin Lichtman <belichtm@microsoft.com>
Date: Mon, 9 Jul 2018 08:54:57 -0700
Subject: [PATCH 4/4] Pass sourceFile as appropriate

---
 src/services/outliningElementsCollector.ts | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/services/outliningElementsCollector.ts b/src/services/outliningElementsCollector.ts
index 3048d1a5e339d..9d2c61a1a7d2c 100644
--- a/src/services/outliningElementsCollector.ts
+++ b/src/services/outliningElementsCollector.ts
@@ -191,8 +191,8 @@ namespace ts.OutliningElementsCollector {
         }
 
         function spanForJSXElement(node: JsxElement): OutliningSpan | undefined {
-            const textSpan = createTextSpanFromBounds(node.openingElement.getStart(), node.closingElement.getEnd());
-            const tagName = node.openingElement.tagName.getText();
+            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);
         }
@@ -202,7 +202,7 @@ namespace ts.OutliningElementsCollector {
                 return undefined;
             }
 
-            return createOutliningSpanFromBounds(node.getStart(), node.getEnd(), OutliningSpanKind.Code);
+            return createOutliningSpanFromBounds(node.getStart(sourceFile), node.getEnd(), OutliningSpanKind.Code);
         }
 
         function spanForObjectOrArrayLiteral(node: Node, open: SyntaxKind.OpenBraceToken | SyntaxKind.OpenBracketToken = SyntaxKind.OpenBraceToken): OutliningSpan | undefined {