diff --git a/Tools/wasm/emscripten/web_example/python.html b/Tools/wasm/emscripten/web_example/python.html index fae1e9ad4e8acb..078f86eb764419 100644 --- a/Tools/wasm/emscripten/web_example/python.html +++ b/Tools/wasm/emscripten/web_example/python.html @@ -1,373 +1,433 @@ - + - - - - - - - wasm-python terminal - - - - - - -

Simple REPL for Python WASM

+
+            const runButton = document.getElementById("run");
+            const replButton = document.getElementById("repl");
+            const stopButton = document.getElementById("stop");
+            const clearButton = document.getElementById("clear");
+
+            const codeBox = document.getElementById("codebox");
+
+            window.onload = () => {
+                const terminal = new WasmTerminal();
+                terminal.open(document.getElementById("terminal"));
+
+                const stdio = {
+                    stdout: (charCode) => {
+                        terminal.print(charCode);
+                    },
+                    stderr: (charCode) => {
+                        terminal.print(charCode);
+                    },
+                    stdin: async () => {
+                        return await terminal.prompt();
+                    },
+                    message: (text) => {
+                        terminal.writeLine(`\r\n${text}\r\n`);
+                    },
+                };
+
+                const programRunning = (isRunning) => {
+                    if (isRunning) {
+                        replButton.setAttribute("disabled", true);
+                        runButton.setAttribute("disabled", true);
+                        stopButton.removeAttribute("disabled");
+                    } else {
+                        replButton.removeAttribute("disabled");
+                        runButton.removeAttribute("disabled");
+                        stopButton.setAttribute("disabled", true);
+                    }
+                };
+
+                runButton.addEventListener("click", (e) => {
+                    terminal.clear();
+                    programRunning(true);
+                    const code = codeBox.value;
+                    pythonWorkerManager.run({
+                        args: ["main.py"],
+                        files: { "main.py": code },
+                    });
+                });
+
+                replButton.addEventListener("click", (e) => {
+                    terminal.clear();
+                    programRunning(true);
+                    // Need to use "-i -" to force interactive mode.
+                    // Looks like isatty always returns false in emscripten
+                    pythonWorkerManager.run({ args: ["-i", "-"], files: {} });
+                });
+
+                stopButton.addEventListener("click", (e) => {
+                    programRunning(false);
+                    pythonWorkerManager.reset();
+                });
+
+                clearButton.addEventListener("click", (e) => {
+                    terminal.clear();
+                });
+
+                const readyCallback = () => {
+                    replButton.removeAttribute("disabled");
+                    runButton.removeAttribute("disabled");
+                    clearButton.removeAttribute("disabled");
+                };
+
+                const finishedCallback = () => {
+                    programRunning(false);
+                };
+
+                const pythonWorkerManager = new WorkerManager(
+                    "./python.worker.mjs",
+                    stdio,
+                    readyCallback,
+                    finishedCallback,
+                );
+            };
+        </script>
+    </head>
+    <body>
+        <h1>Simple REPL for Python WASM</h1>
+        <textarea id="codebox" cols="108" rows="16">
 print('Welcome to WASM!')
-

- - - - -

- The simple REPL provides a limited Python experience in the browser. - - Tools/wasm/README.md contains a list of known limitations and - issues. Networking, subprocesses, and threading are not available. -

- + +

+ + + + +

+ The simple REPL provides a limited Python experience in the browser. + + Tools/wasm/README.md + + contains a list of known limitations and issues. Networking, + subprocesses, and threading are not available. +

+ diff --git a/Tools/wasm/emscripten/web_example/python.worker.mjs b/Tools/wasm/emscripten/web_example/python.worker.mjs index 42c2e1e08af24b..8043e419966743 100644 --- a/Tools/wasm/emscripten/web_example/python.worker.mjs +++ b/Tools/wasm/emscripten/web_example/python.worker.mjs @@ -1,104 +1,109 @@ import createEmscriptenModule from "./python.mjs"; class StdinBuffer { - constructor() { - this.sab = new SharedArrayBuffer(128 * Int32Array.BYTES_PER_ELEMENT) - this.buffer = new Int32Array(this.sab) - this.readIndex = 1; - this.numberOfCharacters = 0; - this.sentNull = true - } + constructor() { + this.sab = new SharedArrayBuffer(128 * Int32Array.BYTES_PER_ELEMENT); + this.buffer = new Int32Array(this.sab); + this.readIndex = 1; + this.numberOfCharacters = 0; + this.sentNull = true; + } - prompt() { - this.readIndex = 1 - Atomics.store(this.buffer, 0, -1) - postMessage({ - type: 'stdin', - buffer: this.sab - }) - Atomics.wait(this.buffer, 0, -1) - this.numberOfCharacters = this.buffer[0] - } + prompt() { + this.readIndex = 1; + Atomics.store(this.buffer, 0, -1); + postMessage({ + type: "stdin", + buffer: this.sab, + }); + Atomics.wait(this.buffer, 0, -1); + this.numberOfCharacters = this.buffer[0]; + } - stdin = () => { - while (this.numberOfCharacters + 1 === this.readIndex) { - if (!this.sentNull) { - // Must return null once to indicate we're done for now. - this.sentNull = true - return null - } - this.sentNull = false - // Prompt will reset this.readIndex to 1 - this.prompt() - } - const char = this.buffer[this.readIndex] - this.readIndex += 1 - return char + stdin = () => { + while (this.numberOfCharacters + 1 === this.readIndex) { + if (!this.sentNull) { + // Must return null once to indicate we're done for now. + this.sentNull = true; + return null; + } + this.sentNull = false; + // Prompt will reset this.readIndex to 1 + this.prompt(); } + const char = this.buffer[this.readIndex]; + this.readIndex += 1; + return char; + }; } const stdout = (charCode) => { - if (charCode) { - postMessage({ - type: 'stdout', - stdout: charCode, - }) - } else { - console.log(typeof charCode, charCode) - } -} + if (charCode) { + postMessage({ + type: "stdout", + stdout: charCode, + }); + } else { + console.log(typeof charCode, charCode); + } +}; const stderr = (charCode) => { - if (charCode) { - postMessage({ - type: 'stderr', - stderr: charCode, - }) - } else { - console.log(typeof charCode, charCode) - } -} + if (charCode) { + postMessage({ + type: "stderr", + stderr: charCode, + }); + } else { + console.log(typeof charCode, charCode); + } +}; -const stdinBuffer = new StdinBuffer() +const stdinBuffer = new StdinBuffer(); const emscriptenSettings = { - noInitialRun: true, - stdin: stdinBuffer.stdin, - stdout: stdout, - stderr: stderr, - onRuntimeInitialized: () => { - postMessage({type: 'ready', stdinBuffer: stdinBuffer.sab}) - }, - async preRun(Module) { - const versionHex = Module.HEAPU32[Module._Py_Version/4].toString(16); - const versionTuple = versionHex.padStart(8, "0").match(/.{1,2}/g).map((x) => parseInt(x, 16)); - const [major, minor, ..._] = versionTuple; - // Prevent complaints about not finding exec-prefix by making a lib-dynload directory - Module.FS.mkdirTree(`/lib/python${major}.${minor}/lib-dynload/`); - Module.addRunDependency("install-stdlib"); - const resp = await fetch(`python${major}.${minor}.zip`); - const stdlibBuffer = await resp.arrayBuffer(); - Module.FS.writeFile(`/lib/python${major}${minor}.zip`, new Uint8Array(stdlibBuffer), { canOwn: true }); - Module.removeRunDependency("install-stdlib"); - } -} + noInitialRun: true, + stdin: stdinBuffer.stdin, + stdout: stdout, + stderr: stderr, + onRuntimeInitialized: () => { + postMessage({ type: "ready", stdinBuffer: stdinBuffer.sab }); + }, + async preRun(Module) { + const versionHex = Module.HEAPU32[Module._Py_Version / 4].toString(16); + const versionTuple = versionHex + .padStart(8, "0") + .match(/.{1,2}/g) + .map((x) => parseInt(x, 16)); + const [major, minor, ..._] = versionTuple; + // Prevent complaints about not finding exec-prefix by making a lib-dynload directory + Module.FS.mkdirTree(`/lib/python${major}.${minor}/lib-dynload/`); + Module.addRunDependency("install-stdlib"); + const resp = await fetch(`python${major}.${minor}.zip`); + const stdlibBuffer = await resp.arrayBuffer(); + Module.FS.writeFile( + `/lib/python${major}${minor}.zip`, + new Uint8Array(stdlibBuffer), + { canOwn: true }, + ); + Module.removeRunDependency("install-stdlib"); + }, +}; const modulePromise = createEmscriptenModule(emscriptenSettings); - onmessage = async (event) => { - if (event.data.type === 'run') { - const Module = await modulePromise; - if (event.data.files) { - for (const [filename, contents] of Object.entries(event.data.files)) { - Module.FS.writeFile(filename, contents) - } - } - const ret = Module.callMain(event.data.args); - postMessage({ - type: 'finished', - returnCode: ret - }) + if (event.data.type === "run") { + const Module = await modulePromise; + if (event.data.files) { + for (const [filename, contents] of Object.entries(event.data.files)) { + Module.FS.writeFile(filename, contents); + } } -} - + const ret = Module.callMain(event.data.args); + postMessage({ + type: "finished", + returnCode: ret, + }); + } +};