Merge pull request RustPython#2354 from RustPython/coolreader18/notebook-ergonomics

Add injectPython function for notebook

Author: coolreader18

wasm/.prettierrc

@@ -1,4 +1,5 @@
 {
     "singleQuote": true,
-    "tabWidth": 4
+    "tabWidth": 4,
+    "arrowParens": "always"
 }

wasm/README.md

@@ -11,22 +11,6 @@ To get started, install
 ([wasm-bindgen](https://rustwasm.github.io/wasm-bindgen/whirlwind-tour/basic-usage.html)
 should be installed by `wasm-pack`. if not, install it yourself)
 
-<!-- Using `rustup` add the compile target `wasm32-unknown-emscripten`. To do so you will need to have [rustup](https://rustup.rs/) installed.
-
-```bash
-rustup target add wasm32-unknown-emscripten
-```
-
-Next, install `emsdk`:
-
-```bash
-curl https://s3.amazonaws.com/mozilla-games/emscripten/releases/emsdk-portable.tar.gz | tar -zxv
-cd emsdk-portable/
-./emsdk update
-./emsdk install sdk-incoming-64bit
-./emsdk activate sdk-incoming-64bit
-``` -->
-
 ## Build
 
 Move into the `wasm` directory. This directory contains a library crate for

wasm/demo/webpack.config.js

@@ -6,8 +6,6 @@ const { CleanWebpackPlugin } = require('clean-webpack-plugin');
 const path = require('path');
 const fs = require('fs');
 
-const interval = setInterval(() => console.log('keepalive'), 1000 * 60 * 5);
-
 module.exports = (env = {}) => {
     const config = {
         entry: './src/index.js',
@@ -52,13 +50,6 @@ module.exports = (env = {}) => {
             new MiniCssExtractPlugin({
                 filename: 'styles.css'
             }),
-            {
-                apply(compiler) {
-                    compiler.hooks.done.tap('clearInterval', () => {
-                        clearInterval(interval);
-                    });
-                }
-            }
         ]
     };
     if (!env.noWasmPack) {

wasm/notebook/README.md

@@ -2,17 +2,18 @@
 
 The RustPython Notebook is a **toy** notebook inspired by the now inactive Iodide project ([https://alpha.iodide.io/](https://alpha.iodide.io/)).
 
-Here is how it looks like:  
+Here is how it looks like:
 
 ![notebook](./screenshot.png)
 
-You can use the notebook to experiment with using Python and Javascript in the browser together.   
+You can use the notebook to experiment with using Python and Javascript in the browser together.
 
 The main use case is for scientific communication where you can have:
-- text or thesis in markdown,
-- math with Tex, 
-- a model or analysis written in python, 
-- a user interface and interactive visualization with JS.
+
+-   text or thesis in markdown,
+-   math with Tex,
+-   a model or analysis written in python,
+-   a user interface and interactive visualization with JS.
 
 The Notebook loads python in your browser (so you don't have to install it) then let yous play with those languages.
 
@@ -24,18 +25,77 @@ To read more about the reasoning behind certain features, check the blog on [htt
 
 Sample notebooks are under `snippets`
 
--  `snippets/python-markdown-math.txt`: python, markdown and math
--  `snippets/python-js.txt`, adds javascript
--  `snippets/python-js-css-md/` adds styling with css in separate, more organized files.
+-   `snippets/python-markdown-math.txt`: python, markdown and math
+-   `snippets/python-js.txt`, adds javascript
+-   `snippets/python-js-css-md/` adds styling with css in separate, more organized files.
 
 ## How to use
 
-- Run locally with `npm run dev`
-- Build with `npm run dist`
+-   Run locally with `npm run dev`
+-   Build with `npm run dist`
+
+## JS API
+
+```typescript
+// adds `values[name]` to the python scope under `name`
+function injectPython(values: { [name: string]: PythonValue });
+type PythonValue =
+    // null -> None
+    | null
+    | undefined
+    // n -> int(n) if Number.isInteger(n) else float(n)
+    | number
+    // s -> str(s)
+    | string
+    // typedArray -> bytes(typedArray)
+    | Uint8Array
+    // arr -> list(arr)
+    | Array<PythonValue>
+    // obj -> dict(Object.entries(obj))
+    | { [k: string]: PythonValue }
+    // js callback in python: positional args are passed as
+    // arguments, kwargs is the `this` variable
+    // f -> lambda *args, **kwargs: f.apply(kwargs, args)
+    //
+    // python callback in js: pass the positional args an array and
+    // kwargs as an object
+    // f -> (args, kwargs) => f(*args, **kwargs)
+    | Function;
+
+// appends an element to the notebook
+function pushNotebook(el: HTMLElement);
+
+// find and displays the traceback of a python error from a callback
+function handlePyError(err: any);
+// e.g.
+try {
+    pyCb([], {});
+} catch (err) {
+    handlePyError(err);
+}
+```
+
+`injectPython` demo:
+
+```js
+injectPython({
+    foo(a, b) {
+        console.log(a);
+        if (this.x != null) {
+            console.log(`got kwarg! x=${this.x}`);
+        }
+        return (y) => y + 1 + b;
+    },
+});
+```
+
+```py
+adder = foo("hy from python", 3, x=[1, 2, 3])
+assert adder(5) == 9
+```
 
 ## Wish list / TO DO
 
-- Better javascript support
-- Collaborative peer-to-peer editing with WebRTC. Think Google Doc or Etherpad editing but for code in the browser
-- `%%load` command for dynamically adding javascript libraries or css framework
-- Clean up and organize the code. Seriously rethink if we want to make it more than a toy.
+-   Collaborative peer-to-peer editing with WebRTC. Think Google Doc or Etherpad editing but for code in the browser
+-   `%%load` command for dynamically adding javascript libraries or css framework
+-   Clean up and organize the code. Seriously rethink if we want to make it more than a toy.

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

@@ -0,0 +1,45 @@
+/* CSS */
+
+@import url('https://fonts.googleapis.com/css2?family=Turret+Road:wght@700&display=swap');
+
+h1 {
+    font-family: 'Sen', 'sans-serif';
+}
+
+h2, h3, h4, button {
+    font-family: 'Turret Road', cursive;
+}
+
+h1 {
+    font-size: 1.5rem;
+}
+h2, h3, h4 {
+    padding-top: 1.25rem;
+}
+
+input[type='text'] {
+    border: 1px solid black;
+    width: 300px;
+    height: 25px;
+    padding: 5px;
+    font-size: 1.2rem;
+    font-family: 'Turret Road', cursive;
+}
+
+hr {
+    border: 0px;
+    border-bottom: 1px solid black;
+    width: 50%;
+    margin-top: 1.5rem;
+    margin-bottom: 1.5rem;
+}
+
+button {
+    background-color: black;
+    color: white;
+    border: 0px;
+    font-size: 1.2rem;
+    height: 30px;
+    display: block;
+    margin-top: 10px;
+}

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

@@ -0,0 +1,43 @@
+// Javascript code goes here
+
+injectPython({
+    // injectPython functions take the positional arguments as
+    // normal function args, and kwargs as the `this` variable
+    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);
+        };
+
+        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/javascript.js

@@ -3,7 +3,9 @@
 #  RustPython Notebook: python, javascript, css, markdown and math 
 
 
-Python in the browser is fun. Python and Javascript working together is double the fun 😜. Markdown and math are good for communicating ideas 🤔 (especially scientific ones). Adding css to the mix, makes everything look pretty ✨. 
+Python in the browser is fun. Python and Javascript working together is double
+the fun 😜. Markdown and math are good for communicating ideas 🤔 (especially
+scientific ones). Adding css to the mix, makes everything look pretty ✨. 
 
 --- 
 
@@ -22,21 +24,20 @@ In this demo example, the RustPython Notebook:
 
 --- 
 
-##  Calculator  
-### Enter your lucky number
+%%py 
 
-%%js
+# Python code
 
-create_ui();
+# you have access to helpers for emitting p & h1-h6
+h2("Calculator")
+h3("Enter your lucky number")
 
+inp1 = add_text_input()
+inp2 = add_text_input()
 
-%%py 
-# Python code
+@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>")
 
-def runModel():
-  input = js_vars['data']
-  print ("<br>")
-  print("A little javascript birdie told the python snake your lucky number 🙊")
-  print ("Now the everyone knows that it is: " + str(input)) 
-  
-  
+set_output = add_output()