Add flag to send HTML or plain Text to banner (#947)

pyscriptjs/src/exceptions.ts

@@ -13,7 +13,11 @@ export class FetchError extends Error {
   }
 }
 
-export function _createAlertBanner(message: string, level: "error" | "warning" = "error", logMessage = true) {
+export function _createAlertBanner(
+  message: string,
+  level: "error" | "warning" = "error",
+  messageType: "text" | "html" = "text",
+  logMessage = true) {
   // eslint-disable-next-line @typescript-eslint/restrict-template-expressions
   switch (`log-${level}-${logMessage}`) {
     case "log-error-true":
@@ -26,21 +30,27 @@ export function _createAlertBanner(message: string, level: "error" | "warning" =
 
   const banner = document.createElement("div")
   banner.className = `alert-banner py-${level}`
-  banner.innerHTML = message
+
+  if (messageType === "html") {
+    banner.innerHTML = message;
+  }
+  else {
+    banner.textContent = message;
+  }
 
   if (level === "warning") {
-    const closeButton = document.createElement("button")
+    const closeButton = document.createElement("button");
 
     closeButton.id = "alert-close-button"
     closeButton.addEventListener("click", () => {
-      banner.remove()
+      banner.remove();
     })
-    closeButton.innerHTML = CLOSEBUTTON
+    closeButton.innerHTML = CLOSEBUTTON;
 
-    banner.appendChild(closeButton)
+    banner.appendChild(closeButton);
   }
 
-  document.body.prepend(banner)
+  document.body.prepend(banner);
 }
 
 /*
@@ -59,10 +69,10 @@ export function withUserErrorHandler(fn) {
       *  PyScript or Pyodide during loading. Probably not be used for issues that occur within
       *  Python scripts, since stderr can be routed to somewhere in the DOM
       */
-      _createAlertBanner(error.message)
+      _createAlertBanner(error.message);
     }
     else {
-      throw error
+      throw error;
     }
   }
 }

pyscriptjs/src/main.ts

@@ -102,7 +102,7 @@ export class PyScriptApp {
             // is too messy to implement it reliably. We might want to revisit
             // this once it's in a better shape.
             showWarning(
-                'Multiple <py-config> tags detected. Only the first is ' +
+                'Multiple <py-config> tags detected. Only the first is ' +
                 'going to be parsed, all the others will be ignored',
             );
         }
@@ -127,7 +127,7 @@ export class PyScriptApp {
         }
 
         if (this.config.runtimes.length > 1) {
-            showWarning('Multiple runtimes are not supported yet.<br />Only the first will be used');
+            showWarning('Multiple runtimes are not supported yet.<br />Only the first will be used', "html");
         }
         const runtime_cfg = this.config.runtimes[0];
         this.runtime = new PyodideRuntime(this.config,

pyscriptjs/src/utils.ts

@@ -41,8 +41,8 @@ export function ensureUniqueId(el: HTMLElement) {
     if (el.id === '') el.id = `py-internal-${_uniqueIdCounter++}`;
 }
 
-export function showWarning(msg: string): void {
-    _createAlertBanner(msg, "warning")
+export function showWarning(msg: string, messageType: "text" | "html" = "text"): void {
+    _createAlertBanner(msg, "warning", messageType);
 }
 
 export function handleFetchError(e: Error, singleFile: string) {
@@ -69,8 +69,8 @@ export function handleFetchError(e: Error, singleFile: string) {
     // We need to create the banner because `handleFetchError` is called before we
     // use withUserErrorHandler in main.js we are also disabling the log message
     // because it will be logged by the uncaught exception in promise.
-    _createAlertBanner(errorContent, "error", false)
-    throw new UserError(errorContent)
+    _createAlertBanner(errorContent, "error", "html", false);
+    throw new UserError(errorContent);
 }
 
 export function readTextFromPath(path: string) {