Improve dev server output

FredKSchott · Aug 12, 2020 · cbbbcc8 · cbbbcc8
1 parent 51b1976
commit cbbbcc8
Show file tree

Hide file tree

Showing 8 changed files with 184 additions and 352 deletions.
diff --git a/packages/@snowpack/app-template-react-typescript/src/App.tsx b/packages/@snowpack/app-template-react-typescript/src/App.tsx
@@ -1,7 +1,10 @@
 import React from 'react';
+import fake from 'fake';
 import logo from './logo.svg';
 import './App.css';
 
+fake();
+
 interface AppProps {}
 
 function App({}: AppProps) {

diff --git a/packages/@snowpack/plugin-run-script/plugin.js b/packages/@snowpack/plugin-run-script/plugin.js
@@ -3,11 +3,11 @@ const npmRunPath = require('npm-run-path');
 const cwd = process.cwd();
 
 function runScriptPlugin(_, {cmd, watch}) {
-  const cmdProgram = cmd.split(' ')[0];
+  const [cmdProgram] = cmd.split(' ');
   const watchCmd = watch && watch.replace('$1', cmd);
 
   return {
-    name: `run:${cmdProgram}`,
+    name: cmdProgram,
     async run({isDev, log}) {
       const workerPromise = execa.command(isDev ? watchCmd || cmd : cmd, {
         env: npmRunPath.env(),

diff --git a/packages/@snowpack/plugin-vue/plugin.js b/packages/@snowpack/plugin-vue/plugin.js
@@ -3,6 +3,34 @@ const path = require('path');
 const hashsum = require('hash-sum');
 const compiler = require('@vue/compiler-sfc');
 
+/** Friendly error display */
+function displayError({contents, filePath, error}) {
+  const pad = (number, pad) => `${Array.from(new Array(pad + 1)).join(' ')}${number}`;
+
+  let output = [`${error.toString()}`, `[${filePath}]`];
+  if (error.loc) {
+    output[1] += ` Line ${error.loc.start.line}, Column ${error.loc.start.column}`;
+    const lineNo = (number) =>
+      ' ' +
+      pad(number, (error.loc.end.line + 1).toString().length - number.toString().length) +
+      ' | ';
+    output.push('');
+    const allLines = ['', ...contents.split('\n')];
+    let currentLine = error.loc.start.line;
+    output.push(lineNo(currentLine - 1) + allLines[currentLine - 1]);
+    while (currentLine <= error.loc.end.line) {
+      output.push(lineNo(currentLine) + allLines[currentLine]);
+      currentLine++;
+    }
+    output.push(
+      Array.from(new Array(error.loc.start.column + lineNo(currentLine - 1).length)).join(' ') +
+        '^',
+    );
+    output.push(lineNo(currentLine) + allLines[currentLine]);
+  }
+  return output.join('\n');
+}
+
 module.exports = function plugin(snowpackConfig) {
   return {
     name: '@snowpack/plugin-vue',
@@ -17,8 +45,9 @@ module.exports = function plugin(snowpackConfig) {
       const contents = fs.readFileSync(filePath, 'utf-8');
       const {descriptor, errors} = compiler.parse(contents, {filename: filePath});
 
+      // display errors
       if (errors && errors.length > 0) {
-        console.error(JSON.stringify(errors));
+        throw new Error(displayError({error: errors[0], contents, filePath}));
       }
 
       const output = {

diff --git a/packages/snowpack/src/build/build-pipeline.ts b/packages/snowpack/src/build/build-pipeline.ts
@@ -1,3 +1,4 @@
+import {EventEmitter} from 'events';
 import {promises as fs} from 'fs';
 import path from 'path';
 import pino from 'pino';
@@ -10,11 +11,12 @@ const logger = createLogger({name: 'snowpack'});
 const pluginLoggers: Record<string, pino.Logger> = {}; // save created loggers
 
 export interface BuildFileOptions {
-  plugins: SnowpackPlugin[];
+  devMessageBus?: EventEmitter;
   isDev: boolean;
   isHmrEnabled: boolean;
-  sourceMaps: boolean;
   logLevel?: pino.Level;
+  plugins: SnowpackPlugin[];
+  sourceMaps: boolean;
 }
 
 export function getInputsFromOutput(fileLoc: string, plugins: SnowpackPlugin[]) {
@@ -43,7 +45,7 @@ export function getInputsFromOutput(fileLoc: string, plugins: SnowpackPlugin[])
  */
 async function runPipelineLoadStep(
   srcPath: string,
-  {plugins, isDev, isHmrEnabled, logLevel = 'info', sourceMaps}: BuildFileOptions,
+  {devMessageBus, isDev, isHmrEnabled, logLevel = 'info', plugins, sourceMaps}: BuildFileOptions,
 ): Promise<SnowpackBuildMap> {
   const srcExt = getExt(srcPath).baseExt;
   for (const step of plugins) {
@@ -67,7 +69,9 @@ async function runPipelineLoadStep(
         isHmrEnabled,
         // @ts-ignore: internal API only
         log: (msg, data: any = {}) => {
-          if (data && data.msg) pluginLogger.info(`${data.msg} [${debugPath}]`);
+          if (data && data.msg) {
+            pluginLogger.info(`${data.msg} [${debugPath}]`);
+          }
         },
       });
       pluginLogger.debug(`load() successful [${debugPath}]`);
@@ -76,6 +80,9 @@ async function runPipelineLoadStep(
 
       if (typeof result === 'string') {
         const mainOutputExt = step.resolve.output[0];
+        if (devMessageBus && isDev) {
+          devMessageBus.emit('SUCCESS', {id: step.name});
+        }
         return {
           [mainOutputExt]: {
             code: result,
@@ -95,12 +102,22 @@ async function runPipelineLoadStep(
           // if source maps disabled, don’t return any
           if (!sourceMaps) result[ext].map = undefined;
         });
+        if (devMessageBus && isDev) {
+          devMessageBus.emit('SUCCESS', {id: step.name});
+        }
         return result;
       } else {
+        if (devMessageBus && isDev) {
+          devMessageBus.emit('SUCCESS', {id: step.name});
+        }
         continue;
       }
     } catch (err) {
-      pluginLogger.error(err);
+      if (devMessageBus && isDev) {
+        devMessageBus.emit('ERROR', {id: step.name, msg: err.toString() || err});
+      } else {
+        pluginLogger.error(err);
+      }
     }
   }
 
@@ -121,7 +138,7 @@ async function runPipelineLoadStep(
 async function runPipelineTransformStep(
   output: SnowpackBuildMap,
   srcPath: string,
-  {plugins, isDev, logLevel = 'info', sourceMaps}: BuildFileOptions,
+  {devMessageBus, isDev, logLevel = 'info', plugins, sourceMaps}: BuildFileOptions,
 ): Promise<SnowpackBuildMap> {
   const srcExt = getExt(srcPath).baseExt;
   const rootFileName = path.basename(srcPath).replace(srcExt, '');
@@ -148,8 +165,9 @@ async function runPipelineTransformStep(
           isDev,
           // @ts-ignore: internal API only
           log: (msg, data: any = {}) => {
-            if (data && data.msg)
+            if (data && data.msg) {
               pluginLogger.info(`${data.msg} [${path.relative(process.cwd(), filePath)}]`);
+            }
           },
           // @ts-ignore: Deprecated
           urlPath: `./${path.basename(rootFileName + destExt)}`,
@@ -165,9 +183,17 @@ async function runPipelineTransformStep(
 
         // if source maps disabled, don’t return any
         if (!sourceMaps) output[destExt].map = undefined;
+
+        if (devMessageBus && isDev) {
+          devMessageBus.emit('SUCCESS', {id: step.name});
+        }
       }
     } catch (err) {
-      pluginLogger.error(err);
+      if (devMessageBus && isDev) {
+        devMessageBus.emit('ERROR', {id: step.name, msg: err.toString() || err});
+      } else {
+        pluginLogger.error(err);
+      }
     }
   }