Add column range to babel-code-frame (#5646)

packages/babel-code-frame/src/index.js

@@ -2,6 +2,18 @@ import jsTokens, { matchToToken } from "js-tokens";
 import esutils from "esutils";
 import Chalk from "chalk";
 
+let deprecationWarningShown = false;
+
+type Location = {
+  column: number,
+  line: number,
+};
+
+type NodeLocation = {
+  end: Location,
+  start: Location,
+};
+
 /**
  * Chalk styles for token types.
  */
@@ -90,17 +102,74 @@ function highlight(defs: Object, text: string) {
 }
 
 /**
- * Create a code frame, adding line numbers, code highlighting, and pointing to a given position.
+ * Extract what lines should be marked and highlighted.
  */
 
-export default function (
+function getMarkerLines(
+  loc: NodeLocation, source: Array<string>, opts: Object
+): { start: number, end: number, markerLines: Object } {
+  const startLoc: Location = Object.assign({}, { column: 0, line: -1 }, loc.start);
+  const endLoc: Location = Object.assign({}, startLoc, loc.end);
+  const linesAbove = opts.linesAbove || 2;
+  const linesBelow = opts.linesBelow || 3;
+
+  const startLine = startLoc.line;
+  const startColumn = startLoc.column;
+  const endLine = endLoc.line;
+  const endColumn = endLoc.column;
+
+  let start = Math.max(startLine - (linesAbove + 1), 0);
+  let end = Math.min(source.length, endLine + linesBelow);
+
+  if (startLine === -1) {
+    start = 0;
+  }
+
+  if (endLine === -1) {
+    end = source.length;
+  }
+
+  const lineDiff = endLine - startLine;
+  const markerLines = {};
+
+  if (lineDiff) {
+    for (let i = 0; i <= lineDiff; i++) {
+      const lineNumber = i + startLine;
+
+      if (!startColumn) {
+        markerLines[lineNumber] = true;
+      } else if (i === 0) {
+        const sourceLength = source[lineNumber - 1].length;
+
+        markerLines[lineNumber] = [startColumn, sourceLength - startColumn];
+      } else if (i === lineDiff) {
+        markerLines[lineNumber] = [0, endColumn];
+      } else {
+        const sourceLength = source[lineNumber - i].length;
+
+        markerLines[lineNumber] = [0, sourceLength];
+      }
+    }
+  } else {
+    if (startColumn === endColumn) {
+      if (startColumn) {
+        markerLines[startLine] = [startColumn, 0];
+      } else {
+        markerLines[startLine] = true;
+      }
+    } else {
+      markerLines[startLine] = [startColumn, endColumn - startColumn];
+    }
+  }
+
+  return { start, end, markerLines };
+}
+
+export function codeFrameColumns (
   rawLines: string,
-  lineNumber: number,
-  colNumber: ?number,
+  loc: NodeLocation,
   opts: Object = {},
 ): string {
-  colNumber = Math.max(colNumber, 0);
-
   const highlighted = (opts.highlightCode && Chalk.supportsColor) || opts.forceColor;
   let chalk = Chalk;
   if (opts.forceColor) {
@@ -112,17 +181,8 @@ export default function (
   const defs = getDefs(chalk);
   if (highlighted) rawLines = highlight(defs, rawLines);
 
-  const linesAbove = opts.linesAbove || 2;
-  const linesBelow = opts.linesBelow || 3;
-
   const lines = rawLines.split(NEWLINE);
-  let start = Math.max(lineNumber - (linesAbove + 1), 0);
-  let end = Math.min(lines.length, lineNumber + linesBelow);
-
-  if (!lineNumber && !colNumber) {
-    start = 0;
-    end = lines.length;
-  }
+  const { start, end, markerLines } = getMarkerLines(loc, lines, opts);
 
   const numberMaxWidth = String(end).length;
 
@@ -130,15 +190,18 @@ export default function (
     const number = start + 1 + index;
     const paddedNumber = ` ${number}`.slice(-numberMaxWidth);
     const gutter = ` ${paddedNumber} | `;
-    if (number === lineNumber) {
+    const hasMarker = markerLines[number];
+    if (hasMarker) {
       let markerLine = "";
-      if (colNumber) {
-        const markerSpacing = line.slice(0, colNumber - 1).replace(/[^\t]/g, " ");
+      if (Array.isArray(hasMarker)) {
+        const markerSpacing = line.slice(0, Math.max(hasMarker[0] - 1, 0)).replace(/[^\t]/g, " ");
+        const numberOfMarkers = hasMarker[1] || 1;
+
         markerLine = [
           "\n ",
           maybeHighlight(defs.gutter, gutter.replace(/\d/g, " ")),
           markerSpacing,
-          maybeHighlight(defs.marker, "^"),
+          maybeHighlight(defs.marker, "^").repeat(numberOfMarkers),
         ].join("");
       }
       return [
@@ -158,3 +221,35 @@ export default function (
     return frame;
   }
 }
+
+/**
+ * Create a code frame, adding line numbers, code highlighting, and pointing to a given position.
+ */
+
+export default function (
+  rawLines: string,
+  lineNumber: number,
+  colNumber: ?number,
+  opts: Object = {},
+): string {
+  if (!deprecationWarningShown) {
+    deprecationWarningShown = true;
+
+    const deprecationError = new Error(
+      "Passing lineNumber and colNumber is deprecated to babel-code-frame. Please use `codeFrameColumns`."
+    );
+    deprecationError.name = "DeprecationWarning";
+
+    if (process.emitWarning) {
+      process.emitWarning(deprecationError);
+    } else {
+      console.warn(deprecationError);
+    }
+  }
+
+  colNumber = Math.max(colNumber, 0);
+
+  const location: NodeLocation = { start: { column: colNumber, line: lineNumber } };
+
+  return codeFrameColumns(rawLines, location, opts);
+}