From 580b09abb160f86e6cce9a81e4e5b63d1aecadea Mon Sep 17 00:00:00 2001 From: Simon Lydell Date: Mon, 11 Apr 2016 15:29:39 +0200 Subject: [PATCH 1/2] babel-code-frame: Add test for code with tabs --- packages/babel-code-frame/test/index.js | 14 ++++++++++++++ 1 file changed, 14 insertions(+) diff --git a/packages/babel-code-frame/test/index.js b/packages/babel-code-frame/test/index.js index 6027130307..910c1aad5a 100644 --- a/packages/babel-code-frame/test/index.js +++ b/packages/babel-code-frame/test/index.js @@ -93,6 +93,20 @@ suite("babel-code-frame", function () { ].join("\n")); }); + test("tabs", function () { + const rawLines = [ + "\tclass Foo {", + "\t \t\t constructor\t(\t)", + "\t};", + ].join('\n'); + assert.equal(codeFrame(rawLines, 2, 25), [ + " 1 | \tclass Foo {", + "> 2 | \t \t\t constructor\t(\t)", + " | \t \t\t \t \t ^", + " 3 | \t};", + ].join('\n')); + }); + test("opts.highlightCode", function () { const rawLines = "console.log('babel')"; const result = codeFrame(rawLines, 1, 9, {highlightCode: true}) From f80463120b398cd62bf128322e968e46b24f6f85 Mon Sep 17 00:00:00 2001 From: Simon Lydell Date: Mon, 11 Apr 2016 15:46:32 +0200 Subject: [PATCH 2/2] babel-code-frame: Handle code with tabs Previously, the `^` marker was misaligned if the line above contained tabs. Fixes T7282. Note: This commit handles a very subtle edge-case differently: When the passed in column number is larger than the length of the line. Previously, the `^` marker would be faithfully placed at that exact column number. Now, it is placed at the end of the line instead (after the last character of the line to be precise). Ideally, we should define what should happen in edge cases, but that's out of scope for this PR. --- packages/babel-code-frame/package.json | 3 +-- packages/babel-code-frame/src/index.js | 9 +++++---- 2 files changed, 6 insertions(+), 6 deletions(-) diff --git a/packages/babel-code-frame/package.json b/packages/babel-code-frame/package.json index 81b21d79d1..989712d1c0 100644 --- a/packages/babel-code-frame/package.json +++ b/packages/babel-code-frame/package.json @@ -11,7 +11,6 @@ "babel-runtime": "^5.0.0", "chalk": "^1.1.0", "esutils": "^2.0.2", - "js-tokens": "^1.0.1", - "repeating": "^1.1.3" + "js-tokens": "^1.0.2" } } diff --git a/packages/babel-code-frame/src/index.js b/packages/babel-code-frame/src/index.js index 928874b611..31559450dd 100644 --- a/packages/babel-code-frame/src/index.js +++ b/packages/babel-code-frame/src/index.js @@ -1,4 +1,3 @@ -import repeating from "repeating"; import jsTokens from "js-tokens"; import esutils from "esutils"; import chalk from "chalk"; @@ -100,9 +99,11 @@ export default function ( let paddedNumber = ` ${number}`.slice(-numberMaxWidth); let gutter = ` ${paddedNumber} | `; if (number === lineNumber) { - let markerLine = colNumber - ? `\n ${gutter.replace(/\d/g, " ")}${repeating(" ", colNumber - 1)}^` - : ""; + let markerLine = ""; + if (colNumber) { + let markerSpacing = line.slice(0, colNumber - 1).replace(/[^\t]/g, " "); + markerLine =`\n ${gutter.replace(/\d/g, " ")}${markerSpacing}^`; + } return `>${gutter}${line}${markerLine}`; } else { return ` ${gutter}${line}`;