@parcel/codeframe 2.0.0-nightly.135 → 2.0.0-nightly.1351

package/package.json

@@ -1,11 +1,15 @@
 {
   "name": "@parcel/codeframe",
-  "version": "2.0.0-nightly.135+d665d06c",
+  "version": "2.0.0-nightly.1351+88e6db442",
   "description": "Blazing fast, zero configuration web application bundler",
   "license": "MIT",
   "publishConfig": {
     "access": "public"
   },
+  "funding": {
+    "type": "opencollective",
+    "url": "https://opencollective.com/parcel"
+  },
   "repository": {
     "type": "git",
     "url": "https://github.com/parcel-bundler/parcel.git"
@@ -13,11 +17,22 @@
   "main": "lib/codeframe.js",
   "source": "src/codeframe.js",
   "engines": {
-    "node": ">= 10.0.0"
+    "node": ">= 12.0.0"
+  },
+  "targets": {
+    "main": {
+      "includeNodeModules": {
+        "chalk": false
+      }
+    }
   },
   "dependencies": {
-    "chalk": "^2.4.2",
-    "emphasize": "^2.1.0"
+    "chalk": "^4.1.0"
+  },
+  "devDependencies": {
+    "emphasize": "^4.2.0",
+    "slice-ansi": "^4.0.0",
+    "string-width": "^4.2.0"
   },
-  "gitHead": "d665d06c104850a3f4528ceb6e01f82864f4ceae"
+  "gitHead": "88e6db442542f56c21899658dda69c652a85349a"
 }

package/src/codeframe.js

@@ -3,31 +3,29 @@ import type {DiagnosticCodeHighlight} from '@parcel/diagnostic';
 
 import chalk from 'chalk';
 import emphasize from 'emphasize';
+import stringWidth from 'string-width';
+import sliceAnsi from 'slice-ansi';
 
 type CodeFramePadding = {|
   before: number,
   after: number,
 |};
 
-type CodeFrameOptionsInput = {|
-  useColor?: boolean,
-  maxLines?: number,
-  padding?: CodeFramePadding,
-  syntaxHighlighting?: boolean,
-  language?: string,
-|};
+type CodeFrameOptionsInput = $Shape<CodeFrameOptions>;
 
 type CodeFrameOptions = {|
   useColor: boolean,
   syntaxHighlighting: boolean,
   maxLines: number,
   padding: CodeFramePadding,
+  terminalWidth: number,
   language?: string,
 |};
 
 const NEWLINE = /\r\n|[\n\r\u2028\u2029]/;
 const TAB_REPLACE_REGEX = /\t/g;
 const TAB_REPLACEMENT = '  ';
+const DEFAULT_TERMINAL_WIDTH = 80;
 
 const highlightSyntax = (txt: string, lang?: string): string => {
   if (lang) {
@@ -44,7 +42,6 @@ const highlightSyntax = (txt: string, lang?: string): string => {
 export default function codeFrame(
   code: string,
   highlights: Array<DiagnosticCodeHighlight>,
-  // $FlowFixMe
   inputOpts: CodeFrameOptionsInput = {},
 ): string {
   if (highlights.length < 1) return '';
@@ -53,13 +50,15 @@ export default function codeFrame(
     useColor: !!inputOpts.useColor,
     syntaxHighlighting: !!inputOpts.syntaxHighlighting,
     language: inputOpts.language,
-    maxLines: inputOpts.maxLines !== undefined ? inputOpts.maxLines : 12,
+    maxLines: inputOpts.maxLines ?? 12,
+    terminalWidth: inputOpts.terminalWidth || DEFAULT_TERMINAL_WIDTH,
     padding: inputOpts.padding || {
       before: 1,
       after: 2,
     },
   };
 
+  // Highlights messages and prefixes when colors are enabled
   const highlighter = (s: string, bold?: boolean) => {
     if (opts.useColor) {
       let redString = chalk.red(s);
@@ -69,21 +68,23 @@ export default function codeFrame(
     return s;
   };
 
+  // Prefix lines with the line number
   const lineNumberPrefixer = (params: {|
     lineNumber?: string,
-    endLine: string,
+    lineNumberLength: number,
     isHighlighted: boolean,
   |}) => {
-    let {lineNumber, endLine, isHighlighted} = params;
+    let {lineNumber, lineNumberLength, isHighlighted} = params;
 
     return `${isHighlighted ? highlighter('>') : ' '} ${
       lineNumber
-        ? lineNumber.padEnd(endLine.length, ' ')
-        : ' '.repeat(endLine.length)
+        ? lineNumber.padStart(lineNumberLength, ' ')
+        : ' '.repeat(lineNumberLength)
     } | `;
   };
 
   // Make columns/lines start at 1
+  let originalHighlights = highlights;
   highlights = highlights.map(h => {
     return {
       start: {
@@ -98,6 +99,7 @@ export default function codeFrame(
     };
   });
 
+  // Find first and last highlight
   let firstHighlight =
     highlights.length > 1
       ? highlights.sort((a, b) => a.start.line - b.start.line)[0]
@@ -107,113 +109,191 @@ export default function codeFrame(
       ? highlights.sort((a, b) => b.end.line - a.end.line)[0]
       : highlights[0];
 
+  // Calculate first and last line index of codeframe
   let startLine = firstHighlight.start.line - opts.padding.before;
   startLine = startLine < 0 ? 0 : startLine;
-  let endLine = lastHighlight.end.line + opts.padding.after;
-  endLine =
-    endLine - startLine > opts.maxLines
-      ? startLine + opts.maxLines - 1
-      : endLine;
-  let endLineString = endLine.toString(10);
+  let endLineIndex = lastHighlight.end.line + opts.padding.after;
+  let tail;
+  if (endLineIndex - startLine > opts.maxLines) {
+    let maxLine = startLine + opts.maxLines - 1;
+    highlights = highlights.filter(h => h.start.line < maxLine);
+    lastHighlight = highlights[0];
+    endLineIndex = Math.min(
+      maxLine,
+      lastHighlight.end.line + opts.padding.after,
+    );
+    tail = originalHighlights.filter(h => h.start.line > endLineIndex);
+  }
 
-  let resultLines = [];
+  let lineNumberLength = (endLineIndex + 1).toString(10).length;
+
+  // Split input into lines and highlight syntax
   let lines = code.split(NEWLINE);
-  let syntaxHighlightedLines = (opts.syntaxHighlighting
-    ? highlightSyntax(code, opts.language)
-    : code
+  let syntaxHighlightedLines = (
+    opts.syntaxHighlighting ? highlightSyntax(code, opts.language) : code
   )
     .replace(TAB_REPLACE_REGEX, TAB_REPLACEMENT)
     .split(NEWLINE);
-  for (let i = startLine; i < lines.length; i++) {
-    if (i > endLine) break;
 
-    let originalLine: string = lines[i];
-    let syntaxHighlightedLine = syntaxHighlightedLines[i];
+  // Loop over all lines and create codeframe
+  let resultLines = [];
+  for (
+    let currentLineIndex = startLine;
+    currentLineIndex < syntaxHighlightedLines.length;
+    currentLineIndex++
+  ) {
+    if (currentLineIndex > endLineIndex) break;
+    if (currentLineIndex > syntaxHighlightedLines.length - 1) break;
 
-    let foundHighlights = highlights.filter(
-      highlight => highlight.start.line <= i && highlight.end.line >= i,
-    );
+    // Find highlights that need to get rendered on the current line
+    let lineHighlights = highlights
+      .filter(
+        highlight =>
+          highlight.start.line <= currentLineIndex &&
+          highlight.end.line >= currentLineIndex,
+      )
+      .sort(
+        (a, b) =>
+          (a.start.line < currentLineIndex ? 0 : a.start.column) -
+          (b.start.line < currentLineIndex ? 0 : b.start.column),
+      );
+
+    // Check if this line has a full line highlight
+    let isWholeLine =
+      lineHighlights.length &&
+      !!lineHighlights.find(
+        h => h.start.line < currentLineIndex && h.end.line > currentLineIndex,
+      );
+
+    let lineLengthLimit =
+      opts.terminalWidth > lineNumberLength + 7
+        ? opts.terminalWidth - (lineNumberLength + 5)
+        : 10;
+
+    // Split the line into line parts that will fit the provided terminal width
+    let colOffset = 0;
+    let lineEndCol = lineLengthLimit;
+    let syntaxHighlightedLine = syntaxHighlightedLines[currentLineIndex];
+    if (stringWidth(syntaxHighlightedLine) > lineLengthLimit) {
+      if (lineHighlights.length > 0) {
+        if (lineHighlights[0].start.line === currentLineIndex) {
+          colOffset = lineHighlights[0].start.column - 5;
+        } else if (lineHighlights[0].end.line === currentLineIndex) {
+          colOffset = lineHighlights[0].end.column - 5;
+        }
+      }
+
+      colOffset = colOffset > 0 ? colOffset : 0;
+      lineEndCol = colOffset + lineLengthLimit;
+
+      syntaxHighlightedLine = sliceAnsi(
+        syntaxHighlightedLine,
+        colOffset,
+        lineEndCol,
+      );
+    }
 
+    // Write the syntax highlighted line part
     resultLines.push(
       lineNumberPrefixer({
-        lineNumber: (i + 1).toString(10),
-        endLine: endLineString,
-        isHighlighted: foundHighlights.length > 0,
+        lineNumber: (currentLineIndex + 1).toString(10),
+        lineNumberLength,
+        isHighlighted: lineHighlights.length > 0,
       }) + syntaxHighlightedLine,
     );
 
-    if (foundHighlights.length > 0) {
-      let highlightLine = lineNumberPrefixer({
-        endLine: endLineString,
-        isHighlighted: true,
-      });
+    let lineWidth = stringWidth(syntaxHighlightedLine);
+    let highlightLine = '';
+    if (isWholeLine) {
+      highlightLine = highlighter('^'.repeat(lineWidth));
+    } else if (lineHighlights.length > 0) {
+      let lastCol = 0;
+      let highlight = null;
+      let highlightHasEnded = false;
 
-      let isWholeLine = !!foundHighlights.find(
-        h => h.start.line < i && h.end.line > i,
-      );
+      for (
+        let highlightIndex = 0;
+        highlightIndex < lineHighlights.length;
+        highlightIndex++
+      ) {
+        // Set highlight to current highlight
+        highlight = lineHighlights[highlightIndex];
+        highlightHasEnded = false;
 
-      if (isWholeLine) {
-        // If there's a whole line highlight
-        // don't even bother creating seperate highlight
-        highlightLine += highlighter(
-          '^'.repeat(
-            originalLine.replace(TAB_REPLACE_REGEX, TAB_REPLACEMENT).length,
-          ),
-        );
-      } else {
-        let sortedColumns =
-          foundHighlights.length > 1
-            ? foundHighlights.sort(
-                (a, b) =>
-                  (a.start.line < i ? 0 : a.start.column) -
-                  (b.start.line < i ? 0 : b.start.column),
-              )
-            : foundHighlights;
-
-        let lastCol = 0;
-        for (let col of sortedColumns) {
-          let startCol = col.start.line === i ? col.start.column : 0;
-          let endCol =
-            (col.end.line === i
-              ? col.end.column
-              : originalLine.length - (lastCol || 1)) + 1;
-
-          if (startCol - lastCol > 0) {
-            let whitespace = originalLine
-              .substring(lastCol, startCol)
-              .replace(TAB_REPLACE_REGEX, TAB_REPLACEMENT)
-              .replace(/\S/g, ' ');
-
-            highlightLine += whitespace;
-          }
+        // Calculate the startColumn and get the real width by doing a substring of the original
+        // line and replacing tabs with our tab replacement to support tab handling
+        let startCol = 0;
+        if (
+          highlight.start.line === currentLineIndex &&
+          highlight.start.column > colOffset
+        ) {
+          startCol = lines[currentLineIndex]
+            .substring(colOffset, highlight.start.column)
+            .replace(TAB_REPLACE_REGEX, TAB_REPLACEMENT).length;
+        }
+
+        // Calculate the endColumn and get the real width by doing a substring of the original
+        // line and replacing tabs with our tab replacement to support tab handling
+        let endCol = lineWidth - 1;
+        if (highlight.end.line === currentLineIndex) {
+          endCol = lines[currentLineIndex]
+            .substring(colOffset, highlight.end.column)
+            .replace(TAB_REPLACE_REGEX, TAB_REPLACEMENT).length;
 
-          let highlightStartColumn = lastCol >= startCol ? lastCol : startCol;
-          if (endCol - highlightStartColumn > 0) {
-            let renderedHighlightLength = originalLine
-              .substring(highlightStartColumn, endCol)
-              .replace(TAB_REPLACE_REGEX, TAB_REPLACEMENT).length;
-            highlightLine += highlighter('^'.repeat(renderedHighlightLength));
-            lastCol = endCol;
+          // If the endCol is too big for this line part, trim it so we can handle it in the next one
+          if (endCol > lineWidth) {
+            endCol = lineWidth - 1;
           }
-        }
 
-        let endsWithFullLine = !!sortedColumns.find(h => h.end.line > i);
-        if (!endsWithFullLine) {
-          let sortedByEnd = sortedColumns.sort(
-            (a, b) => a.end.column - b.end.column,
-          );
+          highlightHasEnded = true;
+        }
 
-          let lastHighlightForColumn = sortedByEnd[sortedByEnd.length - 1];
-          if (lastHighlightForColumn.message) {
-            highlightLine +=
-              ' ' + highlighter(lastHighlightForColumn.message, true);
+        // If endcol is smaller than lastCol it overlaps with another highlight and is no longer visible, we can skip those
+        if (endCol >= lastCol) {
+          let characters = endCol - startCol + 1;
+          if (startCol > lastCol) {
+            // startCol is before lastCol, so add spaces as padding before the highlight indicators
+            highlightLine += ' '.repeat(startCol - lastCol);
+          } else if (lastCol > startCol) {
+            // If last column is larger than the start, there's overlap in highlights
+            // This line adjusts the characters count to ensure we don't add too many characters
+            characters += startCol - lastCol;
           }
+
+          // Append the highlight indicators
+          highlightLine += highlighter('^'.repeat(characters));
+
+          // Set the lastCol equal to character count between start of line part and highlight end-column
+          lastCol = endCol + 1;
+        }
+
+        // There's no point in processing more highlights if we reached the end of the line
+        if (endCol >= lineEndCol - 1) {
+          break;
         }
       }
 
-      resultLines.push(highlightLine);
+      // Append the highlight message if the current highlights ends on this line part
+      if (highlight && highlight.message && highlightHasEnded) {
+        highlightLine += ' ' + highlighter(highlight.message, true);
+      }
     }
+
+    if (highlightLine) {
+      resultLines.push(
+        lineNumberPrefixer({
+          lineNumberLength,
+          isHighlighted: true,
+        }) + highlightLine,
+      );
+    }
+  }
+
+  let result = resultLines.join('\n');
+
+  if (tail && tail.length > 0) {
+    result += '\n\n' + codeFrame(code, tail, inputOpts);
   }
 
-  return resultLines.join('\n');
+  return result;
 }