error overlay; improvements

Author: phfaist

flm/__init__.py

@@ -4,6 +4,6 @@
 # magic, no pkg_resources, no other stuff like that), especially for possible
 # future use with transcrypt.
 
-__version__ = "0.3.0alpha000028"
+__version__ = "0.3.0alpha000029"
 
 # ALSO BUMP VERSION NUMBER IN pyproject.toml !!

flm/main/dist/watch_hotreload_inject.js

@@ -10,5 +10,8 @@
     "@parcel/core": "^2.16.4",
     "morphdom": "^2.7.8",
     "parcel": "^2.16.4"
+  },
+  "devDependencies": {
+    "@parcel/transformer-inline-string": "2.16.4"
   }
 }

flm/main/package.json

@@ -81,7 +81,18 @@ def do_compile(hotreloader=None):
             #
             # Compile - main run NOW!
             #
-            info = main.main(**run_kwargs)
+            try:
+                info = main.main(**run_kwargs)
+            except LatexWalkerLocatedError as e:
+                error_info = {'message': str(e), 'exc': e}
+                if hotreloader is not None and hotreloader.is_enabled():
+                    hotreloader.new_run_send_error(error_info)
+                raise
+            except Exception as e:
+                error_info = {'message': str(e), 'exc': e}
+                if hotreloader is not None and hotreloader.is_enabled():
+                    hotreloader.new_run_send_error(error_info)
+                raise
 
             if hotreloader is not None and hotreloader.is_enabled():
                 # Inform our hotreloader of a new run.

flm/main/watch.py

@@ -6,14 +6,12 @@
 import json
 import threading
 
+from html import escape as html_escape
 
 import asyncio
 import websockets.asyncio.server as websockets_server
 # import websockets.exceptions as websockets_exceptions
 
-
-from lxml import html
-
 from .watch_util import find_available_port
 
 
@@ -150,6 +148,8 @@ def inject_hotreload_js(self):
     def new_run_send_update(self, info, content):
         pass
 
+    def new_run_send_error(self, error_info):
+        pass
 
 
 class HotReloaderHtml:
@@ -159,10 +159,6 @@ def __init__(self, hotreload_server, computed_format, output):
         self.computed_format = computed_format
         self.output = output
 
-        self.previous_content = None
-        with open(self.output, 'r', encoding='utf-8') as f:
-            self.previous_content = f.read()
-
 
     def is_enabled(self):
         return True
@@ -214,7 +210,14 @@ def new_run_send_update(self, info, content):
 
         self.hotreload_server.send_update_info(update_info)
 
-        # save this as the current content
-        self.previous_content = content
+
+    def new_run_send_error(self, error_info):
+
+        update_info = {
+            "action": 'error-display',
+            "content_html": '<pre>' + html_escape(error_info['message']) + '</pre>',
+        }
+        
+        self.hotreload_server.send_update_info(update_info)
 
 

flm/main/watch_hotreload.py

@@ -4,9 +4,12 @@
 //
 //     window, wsHost, wsPort
 //
+const document = window.document;
 
 import morphdom from 'morphdom';
 
+import cssText from 'bundle-text:./watch_hotreload_style.css';
+
 declare var wsHost: string;
 declare var wsPort: number;
 
@@ -154,7 +157,7 @@ function updateInstructionsReceived(mainContainer: HTMLElement, info : UpdateInf
 }*/
 
 type UpdateInfo = {
-    action: 'update-main-content',
+    action: 'update-main-content'|'error-display',
     content_html: string,
 };
 
@@ -360,9 +363,46 @@ function stampMathContentSources(mainContainer: HTMLElement, elements: HTMLEleme
     }
 }
 
+function clearErrorOverlay()
+{
+    const overlayDiv = document.getElementById('ErrorOverlay');
+    if (overlayDiv != null) {
+        overlayDiv.classList.remove('error-overlay-shown');
+    }
+}
+function displayErrorOverlay(mainContainer : HTMLElement, info : UpdateInfo)
+{
+    const makeErrorOverlayDiv = () => {
+        const el = document.getElementById('ErrorOverlay');
+        if (el != null) {
+            return el;
+        }
+        const newEl = document.createElement('div');
+        newEl.setAttribute('id', 'ErrorOverlay');
+        document.body.appendChild(newEl);
+        return newEl;
+    };
+    let overlay = makeErrorOverlayDiv();
+
+    overlay.classList.add('error-overlay-shown');
+
+    overlay.innerHTML = info.content_html;
+}
+
 window.addEventListener("DOMContentLoaded", () => {
 
+    //
+    // inject our style tag, mainly for the error overlay display
+    //
+    let style = document.createElement('style');
+    style.textContent = cssText;
+    document.head.appendChild(style);
+
+    //
+    // Our main container div
+    //
     const mainContainer = document.getElementById('Main')!;
+
     //
     // First of all, stamp all our equations with the source math data to help
     // us process updates.
@@ -376,11 +416,18 @@ window.addEventListener("DOMContentLoaded", () => {
     websocket.addEventListener("message", function (m) {
         console.log("Message!", m);
         const info = JSON.parse(m.data) as UpdateInfo;
-        try {
-            updateMainContent(mainContainer, info);
-        } catch (err) {
-            // failure in the incremental update, so reload everything ... :/
-            window.location.reload();
+        clearErrorOverlay();
+        if (info.action === 'update-main-content') {
+            try {
+                updateMainContent(mainContainer, info);
+            } catch (err) {
+                // failure in the incremental update, so reload everything ... :/
+                window.location.reload();
+            }
+        } else if (info.action === 'error-display') {
+            displayErrorOverlay(mainContainer, info);
+        } else {
+            console.error("Invalid update info action!", info);
         }
     });
     websocket.addEventListener("open", function () { console.log("websocket open"); });