Improve the py<->js notebook example

Author: coolreader18

wasm/notebook/snippets/python-js-css/javascript.txt

@@ -3,23 +3,41 @@
 injectPython({
     // injectPython functions take the positional arguments as
     // normal function args, and kwargs as the `this` variable
-    add_text_input(buttonText, callback) {
+    add_text_input() {
         const input = document.createElement('input');
         pushNotebook(input);
+        return () => input.value;
+    },
+    add_button(buttonText, cb) {
+        const do_button = (callback) => {
+            const btn = document.createElement('button');
+            btn.innerHTML = buttonText;
+            btn.addEventListener('click', () => {
+                try {
+                    // python functions passed to js have a signature
+                    // of ([args...], {kwargs...}) => any
+                    callback([], {});
+                } catch (err) {
+                    // puts the traceback in the error box
+                    handlePyError(err);
+                }
+            });
+            pushNotebook(btn);
+        };
 
-        const btn = document.createElement('button');
-        btn.innerHTML = buttonText;
-        btn.addEventListener('click', () => {
-            resultDiv.innerHTML = '';
-            // python functions passed to js have a signature
-            // of ([args...], {kwargs...}) => any
-            const output = callback([input.value], {});
-            resultDiv.innerHTML += output;
-        });
-        pushNotebook(btn);
-
+        if (cb == null) {
+            // to allow using as a decorator
+            return do_button;
+        } else {
+            do_button(cb);
+        }
+    },
+    add_output() {
         const resultDiv = document.createElement('div');
         resultDiv.classList.add('result');
         pushNotebook(resultDiv);
+        return (value) => {
+            resultDiv.innerHTML = value;
+        };
     },
 });

wasm/notebook/snippets/python-js-css/main.txt

@@ -32,12 +32,12 @@ In this demo example, the RustPython Notebook:
 h2("Calculator")
 h3("Enter your lucky number")
 
-def runModel(input):
-    output = f"""\
-<br>
-A little javascript birdie told the python snake your lucky number 🙊
-Now everyone knows that it is: {input}
-"""
-    return output
-
-add_text_input("click me", runModel)
+inp1 = add_text_input()
+inp2 = add_text_input()
+
+@add_button("click me to add")
+def run_model():
+	a, b = int(inp1()), int(inp2())
+	set_output(f"<pre>{a} + {b} = <b>{a + b}</b></pre>")
+
+set_output = add_output()

wasm/notebook/snippets/python-js.txt

@@ -45,41 +45,59 @@ Here is a run down of what is happening with this demo. The notebook:
 injectPython({
     // injectPython functions take the positional arguments as
     // normal function args, and kwargs as the `this` variable
-    add_text_input(buttonText, callback) {
+    add_text_input() {
         const input = document.createElement('input');
         pushNotebook(input);
-
-        const btn = document.createElement('button');
-        btn.innerHTML = buttonText;
-        btn.addEventListener('click', () => {
-            resultDiv.innerHTML = '';
-            // python functions passed to js have a signature
-            // of ([args...], {kwargs...}) => any
-            const output = callback([input.value], {});
-            resultDiv.innerHTML += output;
-        });
-        pushNotebook(btn);
-
+        return () => input.value;
+    },
+    add_button(buttonText, cb) {
+        const do_button = (callback) => {
+            const btn = document.createElement('button');
+            btn.innerHTML = buttonText;
+            btn.addEventListener('click', () => {
+                try {
+                    // python functions passed to js have a signature
+                    // of ([args...], {kwargs...}) => any
+                    callback([], {});
+                } catch (err) {
+                    // puts the traceback in the error box
+                    handlePyError(err);
+                }
+            });
+            pushNotebook(btn);
+        };
+
+        if (cb == null) {
+            // to allow using as a decorator
+            return do_button;
+        } else {
+            do_button(cb);
+        }
+    },
+    add_output() {
         const resultDiv = document.createElement('div');
         resultDiv.classList.add('result');
         pushNotebook(resultDiv);
+        return (value) => {
+            resultDiv.innerHTML = value;
+        };
     },
 });
 
 %%py 
 
-# Python code goes here
+# Python code
 
 # you have access to helpers for emitting p & h1-h6
 h2("Calculator")
 h3("Enter your lucky number")
 
-def runModel(input):
-    output = f"""\
-<br>
-A little javascript birdie told the python snake your lucky number 🙊
-Now everyone knows that it is: {input}
-"""
-    return output
+inp1 = add_text_input()
+inp2 = add_text_input()
+
+@add_button("click me to add")
+def run_model():
+	a, b = int(inp1()), int(inp2())
+	set_output(f"<pre>{a} + {b} = <b>{a + b}</b></pre>")
 
-add_text_input("click me", runModel)
+set_output = add_output()

wasm/notebook/src/index.js

@@ -27,6 +27,7 @@ import {
     checkCssStatus,
     renderMarkdown,
     renderMath,
+    handlePythonError,
 } from './process';
 
 let rp;
@@ -182,6 +183,9 @@ async function executeNotebook() {
     window.pushNotebook = (elem) => {
         notebook.appendChild(elem);
     };
+    window.handlePyError = (err) => {
+        handlePythonError(error, err);
+    };
     pyvm.setStdout((text) => {
         const para = document.createElement('p');
         para.appendChild(document.createTextNode(text));

wasm/notebook/src/process.js

@@ -29,13 +29,17 @@ function runPython(pyvm, code, error) {
     try {
         pyvm.exec(code);
     } catch (err) {
-        if (err instanceof WebAssembly.RuntimeError) {
-            err = window.__RUSTPYTHON_ERROR || err;
-        }
-        error.textContent = err;
+        handlePythonError(error, err);
     }
 }
 
+function handlePythonError(errorElem, err) {
+    if (err instanceof WebAssembly.RuntimeError) {
+        err = window.__RUSTPYTHON_ERROR || err;
+    }
+    errorElem.textContent = err;
+}
+
 function addCSS(code) {
     let style = document.createElement('style');
     style.type = 'text/css';
@@ -74,4 +78,12 @@ async function runJS(code) {
     }
 }
 
-export { runPython, runJS, renderMarkdown, renderMath, addCSS, checkCssStatus };
+export {
+    runPython,
+    handlePythonError,
+    runJS,
+    renderMarkdown,
+    renderMath,
+    addCSS,
+    checkCssStatus,
+};