From 6af4ba193713d435100366706b97f41db47a936a Mon Sep 17 00:00:00 2001 From: Simon Lydell Date: Wed, 23 Mar 2016 17:13:07 +0100 Subject: [PATCH 1/5] babel-code-frame: Update type annotation The code allows omitting the column number, but the type annotation for that parameter didn't. --- packages/babel-code-frame/src/index.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/babel-code-frame/src/index.js b/packages/babel-code-frame/src/index.js index 4d260b65eb..f5581344e2 100644 --- a/packages/babel-code-frame/src/index.js +++ b/packages/babel-code-frame/src/index.js @@ -84,7 +84,7 @@ function highlight(text: string) { export default function ( rawLines: string, lineNumber: number, - colNumber: number, + colNumber: ?number, opts: Object = {}, ): string { colNumber = Math.max(colNumber, 0); From d6b8e4c608b505290ff57c2350663244b2b79b11 Mon Sep 17 00:00:00 2001 From: Simon Lydell Date: Wed, 23 Mar 2016 18:38:07 +0100 Subject: [PATCH 2/5] babel-code-frame: Add tests --- packages/babel-code-frame/package.json | 1 + packages/babel-code-frame/src/index.js | 6 +- packages/babel-code-frame/test/index.js | 103 +++++++++++++++++++++++- 3 files changed, 104 insertions(+), 6 deletions(-) diff --git a/packages/babel-code-frame/package.json b/packages/babel-code-frame/package.json index 037a3e1c18..e2aedc8c9f 100644 --- a/packages/babel-code-frame/package.json +++ b/packages/babel-code-frame/package.json @@ -12,6 +12,7 @@ "chalk": "^1.1.0", "esutils": "^2.0.2", "js-tokens": "^1.0.1", + "line-numbers": "^0.2.0", "repeating": "^1.1.3" } } diff --git a/packages/babel-code-frame/src/index.js b/packages/babel-code-frame/src/index.js index f5581344e2..1711930255 100644 --- a/packages/babel-code-frame/src/index.js +++ b/packages/babel-code-frame/src/index.js @@ -1,16 +1,12 @@ /* eslint indent: 0 */ /* eslint max-len: 0 */ -//import lineNumbers from "line-numbers"; +import lineNumbers from "line-numbers"; import repeating from "repeating"; import jsTokens from "js-tokens"; import esutils from "esutils"; import chalk from "chalk"; -function lineNumbers(lines) { - return lines; -} - /** * Chalk styles for token types. */ diff --git a/packages/babel-code-frame/test/index.js b/packages/babel-code-frame/test/index.js index 02a36f9f8e..6027130307 100644 --- a/packages/babel-code-frame/test/index.js +++ b/packages/babel-code-frame/test/index.js @@ -1,5 +1,106 @@ -var buildCodeFrame = require(".."); +var assert = require("assert"); +var chalk = require("chalk"); +var codeFrame = require(".."); suite("babel-code-frame", function () { + test("basic usage", function () { + const rawLines = [ + "class Foo {", + " constructor()", + "};", + ].join('\n'); + assert.equal(codeFrame(rawLines, 2, 16), [ + " 1 | class Foo {", + "> 2 | constructor()", + " | ^", + " 3 | };", + ].join('\n')); + }); + test("optional column number", function () { + const rawLines = [ + "class Foo {", + " constructor()", + "};", + ].join('\n'); + assert.equal(codeFrame(rawLines, 2, null), [ + " 1 | class Foo {", + "> 2 | constructor()", + " 3 | };", + ].join("\n")); + }); + + test("optional column number", function () { + const rawLines = [ + "class Foo {", + " constructor()", + "};", + ].join("\n"); + assert.equal(codeFrame(rawLines, 2, null), [ + " 1 | class Foo {", + "> 2 | constructor()", + " 3 | };", + ].join("\n")); + }); + + test("maximum context lines and padding", function () { + const rawLines = [ + "/**", + " * Sums two numbers.", + " *", + " * @param a Number", + " * @param b Number", + " * @returns Number", + " */", + "", + "function sum(a, b) {", + " return a + b", + "}" + ].join("\n"); + assert.equal(codeFrame(rawLines, 7, 2), [ + " 5 | * @param b Number", + " 6 | * @returns Number", + "> 7 | */", + " | ^", + " 8 | ", + " 9 | function sum(a, b) {", + " 10 | return a + b", + ].join("\n")); + }); + + test("no unnecessary padding due to one-off errors", function () { + const rawLines = [ + "/**", + " * Sums two numbers.", + " *", + " * @param a Number", + " * @param b Number", + " * @returns Number", + " */", + "", + "function sum(a, b) {", + " return a + b", + "}" + ].join("\n"); + assert.equal(codeFrame(rawLines, 6, 2), [ + " 4 | * @param a Number", + " 5 | * @param b Number", + "> 6 | * @returns Number", + " | ^", + " 7 | */", + " 8 | ", + " 9 | function sum(a, b) {", + ].join("\n")); + }); + + test("opts.highlightCode", function () { + const rawLines = "console.log('babel')"; + const result = codeFrame(rawLines, 1, 9, {highlightCode: true}) + const stripped = chalk.stripColor(result); + assert.ok(result.length > stripped.length); + assert.equal(stripped, [ + "> 1 | console.log('babel')", + " | ^", + ].join("\n")) + }); }); From aaaffd32e77cd09d596c29b47f77a82d6195e9f3 Mon Sep 17 00:00:00 2001 From: Simon Lydell Date: Wed, 23 Mar 2016 18:59:39 +0100 Subject: [PATCH 3/5] babel-code-frame: Get rid of the line-numbers dependency. --- packages/babel-code-frame/package.json | 1 - packages/babel-code-frame/src/index.js | 27 ++++++++++++-------------- 2 files changed, 12 insertions(+), 16 deletions(-) diff --git a/packages/babel-code-frame/package.json b/packages/babel-code-frame/package.json index e2aedc8c9f..037a3e1c18 100644 --- a/packages/babel-code-frame/package.json +++ b/packages/babel-code-frame/package.json @@ -12,7 +12,6 @@ "chalk": "^1.1.0", "esutils": "^2.0.2", "js-tokens": "^1.0.1", - "line-numbers": "^0.2.0", "repeating": "^1.1.3" } } diff --git a/packages/babel-code-frame/src/index.js b/packages/babel-code-frame/src/index.js index 1711930255..90e515d814 100644 --- a/packages/babel-code-frame/src/index.js +++ b/packages/babel-code-frame/src/index.js @@ -1,7 +1,5 @@ /* eslint indent: 0 */ -/* eslint max-len: 0 */ -import lineNumbers from "line-numbers"; import repeating from "repeating"; import jsTokens from "js-tokens"; import esutils from "esutils"; @@ -97,20 +95,19 @@ export default function ( end = lines.length; } - let frame = lineNumbers(lines.slice(start, end), { - start: start + 1, - before: " ", - after: " | ", - transform(params) { - if (params.number !== lineNumber) { - return; - } + let numberMaxWidth = String(end).length; - if (colNumber) { - params.line += `\n${params.before}${repeating(" ", params.width)}${params.after}${repeating(" ", colNumber - 1)}^`; - } - - params.before = params.before.replace(/^./, ">"); + let frame = lines.slice(start, end).map((line, index) => { + let number = start + 1 + index; + let paddedNumber = ` ${number}`.slice(-numberMaxWidth); + let gutter = ` ${paddedNumber} | `; + if (number === lineNumber) { + let markerLine = colNumber + ? `\n ${gutter.replace(/\d/g, " ")}${repeating(" ", colNumber - 1)}^` + : ""; + return `>${gutter}${line}${markerLine}`; + } else { + return ` ${gutter}${line}`; } }).join("\n"); From dceb988bbbb6a2be30b20247ffcf7b3356bdbc73 Mon Sep 17 00:00:00 2001 From: Simon Lydell Date: Wed, 23 Mar 2016 19:00:53 +0100 Subject: [PATCH 4/5] babel-code-frame: Fix indentation --- packages/babel-code-frame/src/index.js | 20 +++++++++----------- 1 file changed, 9 insertions(+), 11 deletions(-) diff --git a/packages/babel-code-frame/src/index.js b/packages/babel-code-frame/src/index.js index 90e515d814..928874b611 100644 --- a/packages/babel-code-frame/src/index.js +++ b/packages/babel-code-frame/src/index.js @@ -1,5 +1,3 @@ -/* eslint indent: 0 */ - import repeating from "repeating"; import jsTokens from "js-tokens"; import esutils from "esutils"; @@ -40,15 +38,15 @@ function getTokenType(match) { if (token.type === "punctuator") { switch (token.value) { - case "{": - case "}": - return "curly"; - case "(": - case ")": - return "parens"; - case "[": - case "]": - return "square"; + case "{": + case "}": + return "curly"; + case "(": + case ")": + return "parens"; + case "[": + case "]": + return "square"; } } From b733c6766ab4f584ea1c38ddf8e79bb4b769bf88 Mon Sep 17 00:00:00 2001 From: Simon Lydell Date: Wed, 23 Mar 2016 19:06:45 +0100 Subject: [PATCH 5/5] babel-code-frame: Add missing documentation. I used the README for babel-generator as inspiration. --- packages/babel-code-frame/README.md | 8 ++++++++ 1 file changed, 8 insertions(+) diff --git a/packages/babel-code-frame/README.md b/packages/babel-code-frame/README.md index b9a5c6ca34..ca6f5c1664 100644 --- a/packages/babel-code-frame/README.md +++ b/packages/babel-code-frame/README.md @@ -30,3 +30,11 @@ console.log(result); | ^ 3 | } ``` + +If the column number is not known, you may pass `null` instead. + +## Options + +name | type | default | description +-----------------------|----------|-----------------|------------------------------------------------------ +highlightCode | boolean | `false` | Syntax highlight the code as JavaScript for terminals