Add support for custom outlining regions

src/services/outliningElementsCollector.ts

@@ -2,13 +2,22 @@
 namespace ts.OutliningElementsCollector {
     const collapseText = "...";
     const maxDepth = 20;
+    const defaultLabel = "#region";
+    const regionStart = new RegExp("^//\\s*#region(\\s+.*)?$");
+    const regionEnd = new RegExp("^//\\s*#endregion(\\s|$)");
+
+    interface RegionRange extends TextRange {
+        name?: string;
+    }
 
     export function collectElements(sourceFile: SourceFile, cancellationToken: CancellationToken): OutliningSpan[] {
         const elements: OutliningSpan[] = [];
         let depth = 0;
+        const regions: RegionRange[] = [];
 
         walk(sourceFile);
-        return elements;
+        gatherRegions();
+        return elements.sort((span1, span2) => span1.textSpan.start - span2.textSpan.start);
 
         /** If useFullStart is true, then the collapsing span includes leading whitespace, including linebreaks. */
         function addOutliningSpan(hintSpanNode: Node, startElement: Node, endElement: Node, autoCollapse: boolean, useFullStart: boolean) {
@@ -35,6 +44,19 @@ namespace ts.OutliningElementsCollector {
             }
         }
 
+        function addOutliningSpanRegions(regionSpan: RegionRange) {
+            if (regionSpan) {
+                const textSpan = createTextSpanFromRange(regionSpan);
+                const span: OutliningSpan = {
+                    textSpan,
+                    hintSpan: textSpan,
+                    bannerText: regionSpan.name,
+                    autoCollapse: false,
+                };
+                elements.push(span);
+            }
+        }
+
         function addOutliningForLeadingCommentsForNode(n: Node) {
             const comments = ts.getLeadingCommentRangesOfNode(n, sourceFile);
 
@@ -89,6 +111,60 @@ namespace ts.OutliningElementsCollector {
             return isFunctionBlock(node) && node.parent.kind !== SyntaxKind.ArrowFunction;
         }
 
+        function getRegionName(start: number, end: number) {
+            if (!isInComment(sourceFile, start)) {
+                const comment = sourceFile.text.substring(start, end).trim();
+                const result = comment.match(regionStart);
+
+                if (result && result.length > 0) {
+                    const label = result.pop();
+                    if (label) {
+                        return label.trim();
+                    }
+                    else {
+                        return defaultLabel;
+                    }
+                }
+            }
+            return "";
+        }
+
+        function isRegionEnd(start: number, end: number) {
+            if (!isInComment(sourceFile, start)) {
+                const comment = sourceFile.text.substring(start, end).trim();
+                return !!comment.match(regionEnd);
+            }
+            return false;
+        }
+
+        function gatherRegions(): void {
+            const lineStarts = sourceFile.getLineStarts();
+
+            for (let i = 0; i < lineStarts.length; i++) {
+                const currentLineStart = lineStarts[i];
+                const lineEnd = lineStarts[i + 1] - 1 || sourceFile.getEnd();
+
+                const name = getRegionName(currentLineStart, lineEnd);
+                if (name) {
+                    const start = sourceFile.getFullText().indexOf("//", currentLineStart);
+                    const region: RegionRange = {
+                        pos: start,
+                        end: lineEnd,
+                        name,
+                    };
+                    regions.push(region);
+                }
+                else if (isRegionEnd(currentLineStart, lineEnd)) {
+                    const region = regions.pop();
+
+                    if (region) {
+                        region.end = lineEnd;
+                        addOutliningSpanRegions(region);
+                    }
+                }
+            }
+        }
+
         function walk(n: Node): void {
             cancellationToken.throwIfCancellationRequested();
             if (depth > maxDepth) {

tests/cases/fourslash/getOutliningSpansForRegions.ts

@@ -0,0 +1,46 @@
+/// <reference path="fourslash.ts"/>
+
+////// region without label
+////[|// #region
+////
+////// #endregion|]
+////
+////// region with label
+////[|// #region label1
+////
+////// #endregion|]
+////
+////// region with extra whitespace in all valid locations
+////             [|//              #region          label2    label3
+////
+////        //        #endregion|]
+////
+////// No space before directive
+////[|//#region label4
+////
+//////#endregion|]
+////
+////// Nested regions
+////[|// #region outer
+////
+////[|// #region inner
+////
+////// #endregion inner|]
+////
+////// #endregion outer|]
+////
+////// region delimiters not valid when there is preceding text on line
+//// test // #region invalid1
+////
+////test // #endregion
+////
+////// region delimiters not valid when in multiline comment
+/////*
+////// #region invalid2
+////*/
+////
+/////*
+////// #endregion
+////*/
+
+verify.outliningSpansInCurrentFile(test.ranges());

tests/cases/fourslash/getOutliningSpansForUnbalancedEndRegion.ts

@@ -0,0 +1,10 @@
+/// <reference path="fourslash.ts"/>
+
+////// bottom-heavy region balance
+////[|// #region matched
+////
+////// #endregion matched|]
+////
+////// #endregion unmatched
+
+verify.outliningSpansInCurrentFile(test.ranges());

tests/cases/fourslash/getOutliningSpansForUnbalancedRegion.ts

@@ -0,0 +1,11 @@
+/// <reference path="fourslash.ts"/>
+
+////// top-heavy region balance
+////// #region unmatched
+////
+////[|// #region matched
+////
+////// #endregion matched|]
+
+debugger;
+verify.outliningSpansInCurrentFile(test.ranges());