Display build errors in overlay.

generator/src/add-files-plugin.js

@@ -65,6 +65,10 @@ module.exports = class AddFilesPlugin {
           };
         });
 
+        callback()
+      }).catch(errorPayload => {
+
+        compilation.errors.push(new Error(errorPayload))
         callback()
       })
     });

generator/src/compile-elm.js

@@ -2,33 +2,35 @@ const { compileToString } = require("../node-elm-compiler/index.js");
 XMLHttpRequest = require("xhr2");
 
 module.exports = runElm;
-function runElm(/** @type string */ mode, /** @type any */ callback) {
-  const elmBaseDirectory = "./elm-stuff/elm-pages";
-  const mainElmFile = "../../src/Main.elm";
-  const startingDir = process.cwd();
-  process.chdir(elmBaseDirectory);
-  compileToString([mainElmFile], {}).then(function (data) {
-    (function () {
-      const warnOriginal = console.warn;
-      console.warn = function () { };
-      eval(data.toString());
-      const app = Elm.Main.init({
-        flags: { secrets: process.env, mode, staticHttpCache: global.staticHttpCache }
-      });
+function runElm(/** @type string */ mode) {
+  return new Promise((resolve, reject) => {
+    const elmBaseDirectory = "./elm-stuff/elm-pages";
+    const mainElmFile = "../../src/Main.elm";
+    const startingDir = process.cwd();
+    process.chdir(elmBaseDirectory);
+    compileToString([mainElmFile], {}).then(function (data) {
+      (function () {
+        const warnOriginal = console.warn;
+        console.warn = function () { };
+        eval(data.toString());
+        const app = Elm.Main.init({
+          flags: { secrets: process.env, mode, staticHttpCache: global.staticHttpCache }
+        });
 
-      app.ports.toJsPort.subscribe(payload => {
-        process.chdir(startingDir);
+        app.ports.toJsPort.subscribe(payload => {
+          process.chdir(startingDir);
 
-        if (payload.tag === "Success") {
-          global.staticHttpCache = payload.args[0].staticHttpCache;
-          callback(payload.args[0]);
-        } else {
-          console.log(payload.args[0]);
-          // process.exit(1);
-        }
-        delete Elm;
-        console.warn = warnOriginal;
-      });
-    })();
+          if (payload.tag === "Success") {
+            global.staticHttpCache = payload.args[0].staticHttpCache;
+            resolve(payload.args[0])
+          } else {
+            reject(payload.args[0])
+          }
+          delete Elm;
+          console.warn = warnOriginal;
+        });
+      })();
+
+    })
   });
 }

generator/src/develop.js

@@ -389,9 +389,38 @@ function hmrClientPath() {
   // return require.resolve("webpack-hot-middleware/client");
   var ansiColors = {
     // red: 'FF0000' // note the lack of "#"
+    // reset: ['ffffff', '0000000'], // [FOREGROUD_COLOR, BACKGROUND_COLOR]
+    reset: ['ffffff', 'transparent'], // [FOREGROUD_COLOR, BACKGROUND_COLOR]
+    black: '000',
+    red: 'ff0000',
+    green: '209805',
+    yellow: 'e8bf03',
+    blue: '0000ff',
+    magenta: 'ff00ff',
+    cyan: '00ffee',
+    lightgrey: 'f0f0f0',
+    darkgrey: '888'
   };
   var overlayStyles = {
+    // options from https://github.com/webpack-contrib/webpack-hot-middleware/blob/master/client-overlay.js
+
     // color: '#FF0000' // note the inclusion of "#" (these options would be the equivalent of div.style[option] = value)
+    background: 'rgba(0,0,0,0.90)',
+    color: '#e8e8e8',
+    lineHeight: '1.6',
+    whiteSpace: 'pre-wrap',
+    fontFamily: 'Menlo, Consolas, monospace',
+    fontSize: '16px',
+    // position: 'fixed',
+    // zIndex: 9999,
+    // padding: '10px',
+    // left: 0,
+    // right: 0,
+    // top: 0,
+    // bottom: 0,
+    // overflow: 'auto',
+    // dir: 'ltr',
+    // textAlign: 'left',
   };
   return `${require.resolve("webpack-hot-middleware/client")}?ansiColors=${encodeURIComponent(JSON.stringify(ansiColors))}&overlayStyles=${encodeURIComponent(JSON.stringify(overlayStyles))}`;
 }

generator/src/elm-pages.js

@@ -70,15 +70,18 @@ function run() {
   app.ports.writeFile.subscribe(contents => {
     const routes = toRoutes(markdownContent);
     let resolvePageRequests;
+    let rejectPageRequests;
     global.pagesWithRequests = new Promise(function (resolve, reject) {
       resolvePageRequests = resolve;
+      rejectPageRequests = reject;
     });
 
 
     doCliStuff(
       contents.watch ? "dev" : "prod",
       staticRoutes,
-      markdownContent,
+      markdownContent
+    ).then(
       function (payload) {
         if (contents.watch) {
           startWatchIfNeeded();
@@ -124,7 +127,9 @@ function run() {
         console.log("elm-pages DONE");
 
       }
-    );
+    ).catch(function (errorPayload) {
+      rejectPageRequests(errorPayload);
+    });
   });
 }
 

generator/src/generate-elm-stuff.js

@@ -30,5 +30,5 @@ module.exports = function run(
   copyModifiedElmJson();
 
   // run Main.elm from elm-stuff/elm-pages with `runElm`
-  runElm(mode, callback);
+  return runElm(mode, callback);
 };

src/TerminalText.elm

@@ -68,10 +68,10 @@ colorToString color =
                 "[34m"
 
             Green ->
-                "[32;1m"
+                "[32m"
 
             Yellow ->
-                "[33;1m"
+                "[33m"
 
             Cyan ->
                 "[36m"