fix(47296): add outlining spans for parenthesized expressions (#47307)

Author: a-tarasyuk

src/services/outliningElementsCollector.ts

@@ -240,6 +240,8 @@ namespace ts.OutliningElementsCollector {
                 return spanForArrowFunction(n as ArrowFunction);
             case SyntaxKind.CallExpression:
                 return spanForCallExpression(n as CallExpression);
+            case SyntaxKind.ParenthesizedExpression:
+                return spanForParenthesizedExpression(n as ParenthesizedExpression);
         }
 
         function spanForCallExpression(node: CallExpression): OutliningSpan | undefined {
@@ -256,7 +258,7 @@ namespace ts.OutliningElementsCollector {
         }
 
         function spanForArrowFunction(node: ArrowFunction): OutliningSpan | undefined {
-            if (isBlock(node.body) || positionsAreOnSameLine(node.body.getFullStart(), node.body.getEnd(), sourceFile)) {
+            if (isBlock(node.body) || isParenthesizedExpression(node.body) || positionsAreOnSameLine(node.body.getFullStart(), node.body.getEnd(), sourceFile)) {
                 return undefined;
             }
             const textSpan = createTextSpanFromBounds(node.body.getFullStart(), node.body.getEnd());
@@ -307,6 +309,12 @@ namespace ts.OutliningElementsCollector {
         function spanForNodeArray(nodeArray: NodeArray<Node>): OutliningSpan | undefined {
             return nodeArray.length ? createOutliningSpan(createTextSpanFromRange(nodeArray), OutliningSpanKind.Code) : undefined;
         }
+
+        function spanForParenthesizedExpression(node: ParenthesizedExpression): OutliningSpan | undefined {
+            if (positionsAreOnSameLine(node.getStart(), node.getEnd(), sourceFile)) return undefined;
+            const textSpan = createTextSpanFromBounds(node.getStart(), node.getEnd());
+            return createOutliningSpan(textSpan, OutliningSpanKind.Code, createTextSpanFromNode(node));
+        }
     }
 
     function functionSpan(node: SignatureDeclaration, body: Block, sourceFile: SourceFile): OutliningSpan | undefined {

tests/cases/fourslash/getJSXOutliningSpans.tsx

@@ -2,7 +2,7 @@
 ////
 ////export class Home extends Component[| {
 ////  render()[| {
-////    return (
+////    return [|(
 ////    [|<div>
 ////      [|<h1>Hello, world!</h1>|]
 ////      [|<ul>
@@ -29,7 +29,7 @@
 ////          text 
 ////      </>|]
 ////    </div>|]
-////    );
+////    )|];
 ////  }|]
 ////}|]
 

tests/cases/fourslash/getOutliningSpans.ts

@@ -26,11 +26,11 @@
 ////    }|]
 ////}|]
 ////// class expressions
-//// (new class[| {
+//// [|(new class[| {
 ////     bla()[| {
 ////
 ////     }|]
-//// }|])
+//// }|])|]
 ////switch(1)[| {
 //// case 1:[| break;|]
 ////}|]
@@ -64,9 +64,9 @@
 ////}|]
 ////
 ////// function expressions
-////(function f()[| {
+////[|(function f()[| {
 ////
-////}|])
+////}|])|]
 ////
 ////// trivia handeling
 ////class ClassFooWithTrivia[| /*  some comments */

tests/cases/fourslash/outliningSpansForArrowFunctionBody.ts

@@ -5,7 +5,7 @@
 //// () =>[| {
 ////     42
 //// }|];
-//// () =>[| (
+//// () => [|(
 ////     42
 //// )|];
 //// () =>[| "foo" +

tests/cases/fourslash/outliningSpansForParenthesizedExpression.ts

@@ -0,0 +1,33 @@
+/// <reference path="fourslash.ts"/>
+
+////const a = [|(
+////    true
+////        ? true
+////        : false
+////            ? true
+////            : false
+////)|];
+////
+////const b = ( 1 );
+////
+////const c = [|(
+////    1
+////)|];
+////
+////( 1 );
+////
+////[|(
+////    [|(
+////        [|(
+////            1
+////        )|]
+////    )|]
+////)|];
+////
+////[|(
+////    [|(
+////        ( 1 )
+////    )|]
+////)|];
+
+verify.outliningSpansInCurrentFile(test.ranges());

tests/cases/fourslash/shims-pp/getOutliningSpans.ts

@@ -58,9 +58,9 @@
 ////}|]
 ////
 ////// function expressions
-////(function f()[| {
+////[|(function f()[| {
 ////
-////}|])
+////}|])|]
 ////
 ////// trivia handeling
 ////class ClassFooWithTrivia[| /*  some comments */

tests/cases/fourslash/shims/getOutliningSpans.ts

@@ -58,9 +58,9 @@
 ////}|]
 ////
 ////// function expressions
-////(function f()[| {
+////[|(function f()[| {
 ////
-////}|])
+////}|])|]
 ////
 ////// trivia handeling
 ////class ClassFooWithTrivia[| /*  some comments */