Add messages for Pyodide ready and loading

Author: vishnupsatish

Diff for: CNAME

@@ -1 +1 @@
-wcs.vishnus.me
+woodlands.codes

Diff for: _includes/pyodide-ready-toast.html

@@ -0,0 +1,23 @@
+<div class="position-fixed bottom-0 end-0 p-3" style="z-index: 11">
+    <div id="pyodide-ready" class="toast" role="alert" aria-live="assertive" aria-atomic="true">
+        <div class="toast-header">
+            <strong class="me-auto">Woodlands Computer Science</strong>
+            <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
+        </div>
+        <div class="toast-body">
+            Python interpreter ready!
+        </div>
+    </div>
+</div>
+
+<div class="position-fixed bottom-0 end-0 p-3" style="z-index: 11">
+    <div id="pyodide-loading" class="toast" role="alert" aria-live="assertive" aria-atomic="true">
+        <div class="toast-header">
+            <strong class="me-auto">Woodlands Computer Science</strong>
+            <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
+        </div>
+        <div class="toast-body">
+            Python interpreter loading...
+        </div>
+    </div>
+</div>

Diff for: _layouts/default.html

@@ -8,3 +8,9 @@
     </div>
 
 </div>
+
+{% if page.code_editor %}
+
+    {% include pyodide-ready-toast.html %}
+
+{% endif %}

Diff for: assets/js/code-editor.js

@@ -20,7 +20,7 @@ class CodeEditor extends HTMLDivElement {
 
         this.innerHTML = `
         <button id="run-button-${id}" class="btn btn-primary my-3">Run</button>
-        <button id="terminate-button-${id}" data-bs-toggle="tooltip" data-bs-placement="right" data-bs-original-title="Clicking this will restart the Python interpreter, so be careful!" class="btn btn-danger my-3 ms-2">Terminate Pyodide</button>
+        <button id="terminate-button-${id}" data-bs-toggle="tooltip" data-bs-placement="right" data-bs-original-title="Clicking this will restart the Python interpreter, so be careful! Only do this if your program is taking too long to run." class="btn btn-danger my-3 ms-2">Restart Python</button>
         <div class="editor" id="ace-editor-${id}">${code}</div>
         <div class="mt-3 input-output-container">
             <div data-bs-toggle="tooltip" data-bs-placement="bottom" data-bs-original-title="Input" class="d-block position-relative input-container">
@@ -57,11 +57,24 @@ const tooltipList = tooltipTriggerList.map(function (tooltipTriggerEl) {
 })
 
 
+let loadingToast = new bootstrap.Toast(document.getElementById('pyodide-loading'));
+let readyToast = new bootstrap.Toast(document.getElementById('pyodide-ready'));
 
-import { asyncRun, asyncTerminate } from "/assets/js/py-worker.js";
 
+import { asyncRun, asyncTerminate, asyncCheckReady } from "/assets/js/py-worker.js";
 
+async function checkReady() {
+    const { ready } = await asyncCheckReady();
+    readyToast.show()    
+}
+
+async function main() {
+    loadingToast.show();
+    await checkReady();
+    loadingToast.hide();
+}
 
+main();
 
 
 async function runPython(script, input_id, output_id) {
@@ -81,10 +94,14 @@ async function runPython(script, input_id, output_id) {
 
 async function terminatePyodide() {
     asyncTerminate();
+    loadingToast.show()    
+    await checkReady();
+    loadingToast.hide();
 }
 
 
 
+
 // Uncomment the below lines to use Skulpt
 
 // function outf(text) {

Diff for: assets/js/py-worker.js

@@ -1,31 +1,35 @@
 var pyodideWorker = new Worker("/assets/js/webworker.js");
 
-var terminated = false;
-
 export function run(script, stdin, onSuccess, onError) {
     pyodideWorker.onerror = onError;
     pyodideWorker.onmessage = (e) => onSuccess(e.data);
     pyodideWorker.postMessage({
-        stdin,
         python: script,
+        stdin: stdin,
     });
 }
 
 export function asyncRun(script, stdin) {
-
-    if (terminated) {
-        terminated = false;
-        pyodideWorker = new Worker("/assets/js/webworker.js");
-    }
-
     return new Promise(function (onSuccess, onError) {
         run(script, stdin, onSuccess, onError);
     });
 }
 
 export function asyncTerminate() {
-    if (!terminated) {
-        pyodideWorker.terminate()
-        terminated = true;
-    }
+    pyodideWorker.terminate()
+    pyodideWorker = new Worker("/assets/js/webworker.js");
+}
+
+
+export function asyncCheckReady() {
+    return new Promise(function(onSuccess) {
+        checkReady(onSuccess);
+    })
+}
+
+export function checkReady(onSuccess) {
+    pyodideWorker.onmessage = (e) => onSuccess(e.data);
+    pyodideWorker.postMessage({
+        onlyChecking: true,
+    });
 }

Diff for: assets/js/webworker.js

@@ -14,6 +14,9 @@ let pyodideReadyPromise = loadPyodideAndPackages();
 
 async function setup_function() {
     await pyodideReadyPromise;
+    
+
+
     let code = `
 import sys, io, traceback
 namespace = {}  # use separate namespace to hide run_code, modules, etc.
@@ -42,10 +45,18 @@ let setup = setup_function()
 
 self.onmessage = async (event) => {
   // make sure loading is done
+
+  const { python, stdin, onlyChecking} = event.data;
   await pyodideReadyPromise;
+
+  if (onlyChecking) {
+    self.postMessage({ ready: true })
+    return;
+  }
+
   await setup;
   // Don't bother yet with this line, suppose our API is built in such a way:
-  const { python, stdin } = event.data;
+  
   // The worker copies the context in its own "memory" (an object mapping name to values)
   // Now is the easy part, the one that is similar to working in the main thread:
 
@@ -56,7 +67,7 @@ self.onmessage = async (event) => {
     self.pyodide.globals.code_to_run = python
     self.pyodide.globals.inp = stdin
     let results = await self.pyodide.runPythonAsync('run_code(code_to_run)')
-    self.postMessage({ results });
+    self.postMessage({ results: results });
   } catch (error) {
     self.postMessage({ error: error.message });
   }