added error messages in the gutter of the editor

diff --git a/static/css/index.css b/static/css/index.css
index e123f8ec4df4772a78b14ea07f7bc87e2a1da5e1..dc3f536333576779c03e54c9fdfb1c782d2bc540 100644 (file)
--- a/static/css/index.css
+++ b/static/css/index.css
@@ -76,7 +76,7 @@ button:hover {
 #code-result {
     height: 100%;
     max-height: calc(100% - 24px);  /* subtract the padding */
-    background: #000;
+    background: #070707;
     color: #fff;
     font-size: 16px;
     font-family: Monaco, Menlo, "Ubuntu Mono", Consolas, source-code-pro, monospace;
@@ -87,3 +87,7 @@ button:hover {
     padding: 12px;
 }
 
+#code-result.errored {
+    color: #f55;
+}
+

diff --git a/static/src/index.js b/static/src/index.js
index b4b786d113f1b24690d8b719778add278d1522f7..c5a8625fdbe1f6cb4deb7e2399ff0cb2707c10c7 100644 (file)
--- a/static/src/index.js
+++ b/static/src/index.js
@@ -4,11 +4,13 @@ let editor_theme = "chrome";
 
 async function clear_output() {
     let elem = document.getElementById('code-result');
+    elem.className = "";   // NOTE: This clears all the classes, not just the "errored" one!
     elem.innerHTML = "";
 }
 
-async function write_output(msg) {
+async function write_output(msg, has_error) {
     let elem = document.getElementById('code-result');
+    if (has_error != null && has_error) elem.className = "errored";
     elem.innerHTML += msg;
 }
 
@@ -27,6 +29,11 @@ async function run_wasm(wasm_bytes) {
                 write_output(e.data.data);
                 break;
             }
+            
+            case 'errored': {
+                write_output(e.data.data, true);
+                break;
+            }
 
             case 'terminated': {
                 wasm_worker = null;
@@ -42,7 +49,8 @@ async function run_wasm(wasm_bytes) {
 
 async function submit_code() {
     clear_output();
-    let code = ace.edit('code-editor').getValue();
+    let editor = ace.edit('code-editor');
+    let code = editor.getValue();
 
     let response = await fetch(window.ROOT_ENDPOINT + "/compile", {
         method: 'POST',
@@ -55,12 +63,34 @@ async function submit_code() {
 
     if (response.status == 200) {
         // Successful compile
+        // Clear errors in the gutter first
+        editor.getSession().setAnnotations([]);
+
         run_wasm(await response.arrayBuffer());
 
     } else {
         // Compile error
-        write_output("Failed to compile code\n");
-        write_output(await response.text());
+        let response_text = await response.text();
+        
+        write_output("Failed to compile code\n", true);
+        write_output(response_text, true);
+
+        // Add the errors as gutter items in ACE
+        let annotations = [];
+        let lines = response_text.split("\n");
+        for (let line of lines) {
+            let e = /\(\/tmp\/[^:]+:(\d+),(\d+)\) (.*)/.exec(line);
+            if (e != null) {
+                annotations.push({
+                    row: parseInt(e[1]) - 1,
+                    column: parseInt(e[2]),
+                    text: e[3],
+                    type: "error",
+                });
+            }
+        }
+
+        editor.getSession().setAnnotations(annotations);
     }
 }
 

diff --git a/static/src/worker.js b/static/src/worker.js
index 8c343401ee8ad18adc3a13a755f648cb317577a2..e0cb557b90d5c78f12fef2b24dffa44ad9bbfccc 100644 (file)
--- a/static/src/worker.js
+++ b/static/src/worker.js
@@ -22,7 +22,11 @@ onmessage = function(m) {
             .then(response => {
                 wasm_memory = response.instance.exports.memory;
 
-                response.instance.exports._start();
+                try {
+                    response.instance.exports._start();
+                } catch (e) {
+                    self.postMessage({ type: 'errored', data: e.toString() });
+                }
 
                 self.postMessage({ type: 'terminated' });
                 self.close();