feat: use babel code frame

Author: ForsakenHarmony

packages/cli/lib/lib/babel-config.js

@@ -25,7 +25,10 @@ module.exports = function(env, options = {}) {
 			require.resolve('@babel/plugin-syntax-dynamic-import'),
 			require.resolve('@babel/plugin-transform-object-assign'),
 			[require.resolve('@babel/plugin-proposal-decorators'), { legacy: true }],
-			[require.resolve('@babel/plugin-proposal-class-properties'), { loose: true }],
+			[
+				require.resolve('@babel/plugin-proposal-class-properties'),
+				{ loose: true },
+			],
 			require.resolve('@babel/plugin-proposal-object-rest-spread'),
 			isProd &&
 				require.resolve('babel-plugin-transform-react-remove-prop-types'),

packages/cli/lib/lib/webpack/prerender.js

@@ -1,10 +1,11 @@
-const { red, gray } = require('kleur');
+const { red } = require('kleur');
 const { resolve } = require('path');
 const { readFileSync } = require('fs');
 const stackTrace = require('stack-trace');
 const { SourceMapConsumer } = require('source-map');
 const { error, info } = require('../../util');
 const outdent = require('outdent');
+const { codeFrameColumns } = require('@babel/code-frame');
 
 module.exports = function prerender(env, params) {
 	params = params || {};
@@ -95,15 +96,14 @@ async function handlePrerenderError(err, env, stack, entry) {
 	}
 
 	if (position) {
-		info(position.source);
+		info(JSON.stringify(position));
 		position.source = position.source
 			.replace('webpack://', '.')
 			.replace(/^.*~\/((?:@[^/]+\/)?[^/]+)/, (s, name) =>
 				require
 					.resolve(name)
 					.replace(/^(.*?\/node_modules\/(@[^/]+\/)?[^/]+)(\/.*)$/, '$1')
 			);
-		info(position.source);
 	} else {
 		position = {
 			source: stack.getFileName(),
@@ -114,24 +114,13 @@ async function handlePrerenderError(err, env, stack, entry) {
 
 	const sourceLines = getLines(env, position);
 
-	let sourceCodeHighlight = '';
-	if (sourceLines) {
-		const lnrl = position.line.toString().length + 2;
-		const line = position.line;
-		const un = undefined;
-
-		const pad = l =>
-			(l === undefined ? '' : (line + l || '') + '').padStart(lnrl);
-
-		sourceCodeHighlight = gray(outdent`
-			${pad(-2)} | ${sourceLines[line - 3] || ''}
-			${pad(-1)} | ${sourceLines[line - 2] || ''}
-			${pad(-0)} | ${sourceLines[line - 1] || ''}
-			${pad(un)} | ${red('^'.padStart(position.column + 1))}
-			${pad(+1)} | ${sourceLines[line + 0] || ''}
-			${pad(+2)} | ${sourceLines[line + 1] || ''}
-		`);
-	}
+	let sourceCodeHighlight = sourceLines
+		? codeFrameColumns(
+				sourceLines.join('\n'),
+				{ start: { line: position.line, column: position.column } },
+				{ highlightCode: true }
+		  )
+		: '';
 
 	const stderr = process.stderr.write.bind(process.stderr);
 

packages/cli/package.json

@@ -64,6 +64,7 @@
     "preact-render-to-string": "*"
   },
   "dependencies": {
+    "@babel/code-frame": "^7.5.5",
     "@babel/core": "^7.4.5",
     "@babel/plugin-proposal-class-properties": "^7.4.4",
     "@babel/plugin-proposal-decorators": "^7.4.4",

yarn.lock

@@ -44,6 +44,13 @@
   dependencies:
     "@babel/highlight" "^7.0.0"
 
+"@babel/code-frame@^7.5.5":
+  version "7.5.5"
+  resolved "https://registry.yarnpkg.com/@babel/code-frame/-/code-frame-7.5.5.tgz#bc0782f6d69f7b7d49531219699b988f669a8f9d"
+  integrity sha512-27d4lZoomVyo51VegxI20xZPuSHusqbQag/ztrBC7wegWoQ1nLREPVSKSW8byhTlzTKyNE4ifaTA6lCp7JjpFw==
+  dependencies:
+    "@babel/highlight" "^7.0.0"
+
 "@babel/core@^7.1.0", "@babel/core@^7.4.0", "@babel/core@^7.4.5":
   version "7.5.4"
   resolved "https://registry.yarnpkg.com/@babel/core/-/core-7.5.4.tgz#4c32df7ad5a58e9ea27ad025c11276324e0b4ddd"
@@ -10216,7 +10223,7 @@ postcss-discard-overridden@^4.0.1:
   dependencies:
     postcss "^7.0.0"
 
-postcss-load-config@^2.0.0:
+postcss-load-config@^2.0.0, postcss-load-config@^2.1.0:
   version "2.1.0"
   resolved "https://registry.yarnpkg.com/postcss-load-config/-/postcss-load-config-2.1.0.tgz#c84d692b7bb7b41ddced94ee62e8ab31b417b003"
   integrity sha512-4pV3JJVPLd5+RueiVVB+gFOAa7GWc25XQcMp86Zexzke69mKf6Nx9LRcQywdz7yZI9n1udOxmLuAwTBypypF8Q==