From 4f1f648c3bd36a875501778786bb8d718ab33869 Mon Sep 17 00:00:00 2001
From: "Miss Islington (bot)"
 <31488909+miss-islington@users.noreply.github.com>
Date: Tue, 22 Jul 2025 13:25:35 +0200
Subject: [3.14] gh-136251: Improvements to WASM demo REPL (GH-136252)
 (GH-136977)

(cherry picked from commit d1d526afe7ce62c787b150652a2ba136cb949d74)

Co-authored-by: adam j hartz <adam@smatz.net>
Co-authored-by: Hood Chatham <roberthoodchatham@gmail.com>
---
 Makefile.pre.in                                    |   4 +-
 .../2025-07-05-15-10-42.gh-issue-136251.GRM6o8.rst |   1 +
 Python/emscripten_syscalls.c                       |   2 +-
 Tools/wasm/README.md                               |  10 +-
 Tools/wasm/emscripten/web_example/index.html       | 703 +++++++++++++++++++++
 Tools/wasm/emscripten/web_example/python.html      | 433 -------------
 configure                                          |   2 +-
 configure.ac                                       |   2 +-
 8 files changed, 714 insertions(+), 443 deletions(-)
 create mode 100644 Misc/NEWS.d/next/Tools-Demos/2025-07-05-15-10-42.gh-issue-136251.GRM6o8.rst
 create mode 100644 Tools/wasm/emscripten/web_example/index.html
 delete mode 100644 Tools/wasm/emscripten/web_example/python.html

diff --git a/Makefile.pre.in b/Makefile.pre.in
index 66b34b7..fae5e38 100644
--- a/Makefile.pre.in
+++ b/Makefile.pre.in
@@ -1096,7 +1096,7 @@ $(DLLLIBRARY) libpython$(LDVERSION).dll.a: $(LIBRARY_OBJS)
 # wasm32-emscripten browser web example
 
 WEBEX_DIR=$(srcdir)/Tools/wasm/emscripten/web_example/
-web_example/python.html: $(WEBEX_DIR)/python.html
+web_example/index.html: $(WEBEX_DIR)/index.html
 	@mkdir -p web_example
 	@cp $< $@
 
@@ -1124,7 +1124,7 @@ web_example/python.mjs web_example/python.wasm: $(BUILDPYTHON)
 	cp python.wasm web_example/python.wasm
 
 .PHONY: web_example
-web_example: web_example/python.mjs web_example/python.worker.mjs web_example/python.html web_example/server.py $(WEB_STDLIB)
+web_example: web_example/python.mjs web_example/python.worker.mjs web_example/index.html web_example/server.py $(WEB_STDLIB)
 
 ############################################################################
 # Header files
diff --git a/Misc/NEWS.d/next/Tools-Demos/2025-07-05-15-10-42.gh-issue-136251.GRM6o8.rst b/Misc/NEWS.d/next/Tools-Demos/2025-07-05-15-10-42.gh-issue-136251.GRM6o8.rst
new file mode 100644
index 0000000..6a35afe
--- /dev/null
+++ b/Misc/NEWS.d/next/Tools-Demos/2025-07-05-15-10-42.gh-issue-136251.GRM6o8.rst
@@ -0,0 +1 @@
+Fixes and usability improvements for ``Tools/wasm/emscripten/web_example``
diff --git a/Python/emscripten_syscalls.c b/Python/emscripten_syscalls.c
index 886262a..d3eedad 100644
--- a/Python/emscripten_syscalls.c
+++ b/Python/emscripten_syscalls.c
@@ -100,7 +100,7 @@ EM_JS_MACROS(void, _emscripten_promising_main_js, (void), {
         return;
     }
     const origResolveGlobalSymbol = resolveGlobalSymbol;
-    if (!Module.onExit && process?.exit) {
+    if (!Module.onExit && globalThis?.process?.exit) {
         Module.onExit = (code) => process.exit(code);
     }
     // * wrap the main symbol with WebAssembly.promising,
diff --git a/Tools/wasm/README.md b/Tools/wasm/README.md
index 232321c..9288598 100644
--- a/Tools/wasm/README.md
+++ b/Tools/wasm/README.md
@@ -22,7 +22,7 @@ https://github.com/psf/webassembly for more information.
 ### Build
 
 To cross compile to the ``wasm32-emscripten`` platform you need
-[the Emscripten compiler toolchain](https://emscripten.org/), 
+[the Emscripten compiler toolchain](https://emscripten.org/),
 a Python interpreter, and an installation of Node version 18 or newer.
 Emscripten version 4.0.2 is recommended; newer versions may also work, but all
 official testing is performed with that version. All commands below are relative
@@ -86,11 +86,11 @@ CLI you will need to write your own alternative to `node_entry.mjs`.
 
 ### The Web Example
 
-When building for Emscripten, the web example will be built automatically. It is
-in the ``web_example`` directory. To run the web example, ``cd`` into the
+When building for Emscripten, the web example will be built automatically. It
+is in the ``web_example`` directory. To run the web example, ``cd`` into the
 ``web_example`` directory, then run ``python server.py``. This will start a web
-server; you can then visit ``http://localhost:8000/python.html`` in a browser to
-see a simple REPL example.
+server; you can then visit ``http://localhost:8000/`` in a browser to see a
+simple REPL example.
 
 The web example relies on a bug fix in Emscripten version 3.1.73 so if you build
 with earlier versions of Emscripten it may not work. The web example uses
diff --git a/Tools/wasm/emscripten/web_example/index.html b/Tools/wasm/emscripten/web_example/index.html
new file mode 100644
index 0000000..9c89c9c
--- /dev/null
+++ b/Tools/wasm/emscripten/web_example/index.html
@@ -0,0 +1,703 @@
+<!doctype html>
+<html lang="en">
+    <head>
+        <meta charset="UTF-8">
+        <meta http-equiv="X-UA-Compatible" content="IE=edge">
+        <meta name="viewport" content="width=device-width, initial-scale=1.0">
+        <meta name="author" content="Katie Bell, Adam Hartz">
+        <meta name="description" content="Simple REPL for Python WASM">
+        <title>wasm-python terminal</title>
+        <link
+            rel="stylesheet"
+            href="https://unpkg.com/xterm@4.18.0/css/xterm.css"
+            crossorigin
+            integrity="sha384-4eEEn/eZgVHkElpKAzzPx/Kow/dTSgFk1BNe+uHdjHa+NkZJDh5Vqkq31+y7Eycd"
+        >
+        <style>
+            body {
+                font-family: arial;
+                max-width: 800px;
+                margin: 0 auto;
+            }
+            #editor {
+                padding: 5px;
+                border: 1px solid black;
+                width: 100%;
+                height: 300px;
+            }
+            #info {
+                padding-top: 20px;
+            }
+            .error {
+              border: 1px solid red;
+              background-color: #ffd9d9;
+              padding: 5px;
+              margin-top: 20px;
+            }
+            .button-container {
+                display: flex;
+                justify-content: end;
+                height: 50px;
+                align-items: center;
+                gap: 10px;
+            }
+            button {
+                padding: 6px 18px;
+            }
+        </style>
+        <script
+            src="https://unpkg.com/xterm@4.18.0/lib/xterm.js"
+            crossorigin
+            integrity="sha384-yYdNmem1ioP5Onm7RpXutin5A8TimLheLNQ6tnMi01/ZpxXdAwIm2t4fJMx1Djs+"
+        ></script>
+        <script
+            src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.43.1/ace.js"
+            crossorigin
+            integrity="sha512-kmA5vhcxOkZI0ReiKJMGNb8/KKbgbExIlnt6aXuPtl86AgHBEi6OHHOz2wsTazBDGZKxe7fmiE+pIuZJQks4+A=="
+        ></script>
+        <script type="module">
+            const _magic_ctrlc_string = "__WASM_REPL_CTRLC_" + (Date.now()) + "__";
+            class WorkerManager {
+                constructor(
+                    workerURL,
+                    standardIO,
+                    readyCallBack,
+                    finishedCallback,
+                ) {
+                    this.workerURL = workerURL;
+                    this.worker = null;
+                    this.standardIO = standardIO;
+                    this.readyCallBack = readyCallBack;
+                    this.finishedCallback = finishedCallback;
+
+                    this.initialiseWorker();
+                }
+
+                async initialiseWorker() {
+                    if (!this.worker) {
+                        this.worker = new Worker(this.workerURL, {
+                            type: "module",
+                        });
+                        this.worker.addEventListener(
+                            "message",
+                            this.handleMessageFromWorker,
+                        );
+                    }
+                }
+
+                async run(options) {
+                    this.worker.postMessage({
+                        type: "run",
+                        args: options.args || [],
+                        files: options.files || {},
+                    });
+                }
+
+                reset() {
+                    if (this.worker) {
+                        this.worker.terminate();
+                        this.worker = null;
+                    }
+                    this.standardIO.message("Worker process terminated.");
+                    this.initialiseWorker();
+                }
+
+                handleStdinData(inputValue) {
+                    if (this.stdinbuffer && this.stdinbufferInt) {
+                        let startingIndex = 1;
+                        if (this.stdinbufferInt[0] > 0) {
+                            startingIndex = this.stdinbufferInt[0];
+                        }
+                        const data = new TextEncoder().encode(inputValue);
+                        data.forEach((value, index) => {
+                            this.stdinbufferInt[startingIndex + index] = value;
+                        });
+
+                        this.stdinbufferInt[0] =
+                            startingIndex + data.length - 1;
+                        Atomics.notify(this.stdinbufferInt, 0, 1);
+                    }
+                }
+
+                handleMessageFromWorker = (event) => {
+                    const type = event.data.type;
+                    if (type === "ready") {
+                        this.readyCallBack();
+                    } else if (type === "stdout") {
+                        this.standardIO.stdout(event.data.stdout);
+                    } else if (type === "stderr") {
+                        this.standardIO.stderr(event.data.stderr);
+                    } else if (type === "stdin") {
+                        // Leave it to the terminal to decide whether to chunk it into lines
+                        // or send characters depending on the use case.
+                        this.stdinbuffer = event.data.buffer;
+                        this.stdinbufferInt = new Int32Array(this.stdinbuffer);
+                        this.standardIO.stdin().then((inputValue) => {
+                            this.handleStdinData(inputValue);
+                        });
+                    } else if (type === "finished") {
+                        this.standardIO.message(
+                            `Exited with status: ${event.data.returnCode}`,
+                        );
+                        this.finishedCallback();
+                    }
+                };
+            }
+
+            class WasmTerminal {
+                constructor() {
+                    try {
+                        this.history = JSON.parse(sessionStorage.getItem('__python_wasm_repl.history'));
+                        this.historyBuffer = this.history.slice();
+                    } catch(e) {
+                        this.history = [];
+                        this.historyBuffer = [];
+                    }
+                    this.reset();
+
+                    this.xterm = new Terminal({
+                        scrollback: 10000,
+                        fontSize: 14,
+                        theme: { background: "#1a1c1f" },
+                        cols: 100,
+                    });
+
+                    this.xterm.onKey((keyEvent) => {
+                        // Fix for iOS Keyboard Jumping on space
+                        if (keyEvent.key === " ") {
+                            keyEvent.domEvent.preventDefault();
+                        }
+                    });
+
+                    this.xterm.onData(this.handleTermData);
+                }
+
+                reset() {
+                    this.inputBuffer = new BufferQueue();
+                    this.input = "";
+                    this.resolveInput = null;
+                    this.activeInput = false;
+                    this.inputStartCursor = null;
+
+                    this.cursorPosition = 0;
+                    this.historyIndex = -1;
+                    this.beforeHistoryNav = "";
+                }
+
+                open(container) {
+                    this.xterm.open(container);
+                }
+
+                handleTermData = (data) => {
+                    const ord = data.charCodeAt(0);
+                    data = data.replace(/\r(?!\n)/g, "\n"); // Convert lone CRs to LF
+
+                    // Handle pasted data
+                    if (data.length > 1 && data.includes("\n")) {
+                        let alreadyWrittenChars = 0;
+                        // If line already had data on it, merge pasted data with it
+                        if (this.input != "") {
+                            this.inputBuffer.addData(this.input);
+                            alreadyWrittenChars = this.input.length;
+                            this.input = "";
+                        }
+                        this.inputBuffer.addData(data);
+                        // If input is active, write the first line
+                        if (this.activeInput) {
+                            let line = this.inputBuffer.nextLine();
+                            this.writeLine(line.slice(alreadyWrittenChars));
+                            this.resolveInput(line);
+                            this.activeInput = false;
+                        }
+                        // When input isn't active, add to line buffer
+                    } else if (!this.activeInput) {
+                        // Skip non-printable characters
+                        if (!(ord === 0x1b || ord == 0x7f || ord < 32)) {
+                            this.inputBuffer.addData(data);
+                        }
+                        // TODO: Handle more escape sequences?
+                    } else if (ord === 0x1b) {
+                        // Handle special characters
+                        switch (data.slice(1)) {
+                            case "[A": // up
+                                this.historyBack();
+                                break;
+                            case "[B": // down
+                                this.historyForward();
+                                break;
+                            case "[C": // right
+                                this.cursorRight();
+                                break;
+                            case "[D": // left
+                                this.cursorLeft();
+                                break;
+                            case "[H": // home key
+                                this.cursorHome(true);
+                                break;
+                            case "[F": // end key
+                                this.cursorEnd(true);
+                                break;
+                            case "[3~": // delete key
+                                this.deleteAtCursor();
+                                break;
+                            default:
+                                break;
+                        }
+                    } else if (ord < 32 || ord === 0x7f) {
+                        switch (data) {
+                            case "\x0c": // CTRL+L
+                                this.clear();
+                                break;
+                            case "\n": // ENTER
+                            case "\x0a": // CTRL+J
+                            case "\x0d": // CTRL+M
+                                this.resolveInput(
+                                    this.input + this.writeLine("\n"),
+                                );
+                                this.input = "";
+                                this.cursorPosition = 0;
+                                this.activeInput = false;
+                                break;
+                            case "\x03": // CTRL+C
+                                this.input = "";
+                                this.cursorPosition = 0;
+                                this.historyIndex = -1;
+                                this.resolveInput(_magic_ctrlc_string + "\n");
+                                break;
+                            case "\x09": // TAB
+                                this.handleTab();
+                                break;
+                            case "\x7F": // BACKSPACE
+                            case "\x08": // CTRL+H
+                                this.handleCursorErase(true);
+                                break;
+                            case "\x04": // CTRL+D
+                                // Send empty input
+                                if (this.input === "") {
+                                    this.resolveInput("");
+                                    this.cursorPosition = 0;
+                                    this.activeInput = false;
+                                }
+                        }
+                    } else {
+                        this.handleCursorInsert(data);
+                        this.updateHistory();
+                    }
+                };
+
+                clearLine() {
+                    this.xterm.write("\x1b[K");
+                }
+
+                writeLine(line) {
+                    this.xterm.write(line.slice(0, -1));
+                    this.xterm.write("\r\n");
+                    return line;
+                }
+
+                handleCursorInsert(data) {
+                    const trailing = this.input.slice(this.cursorPosition);
+                    this.input =
+                        this.input.slice(0, this.cursorPosition) +
+                        data +
+                        trailing;
+                    this.cursorPosition += data.length;
+                    this.xterm.write(data);
+                    if (trailing.length !== 0) {
+                        this.xterm.write(trailing);
+                        this.xterm.write("\x1b[" + trailing.length + "D");
+                    }
+                    this.updateHistory();
+                }
+
+                handleTab() {
+                    // handle tabs: from the current position, add spaces until
+                    // this.cursorPosition is a multiple of 4.
+                    const prefix = this.input.slice(0, this.cursorPosition);
+                    const suffix = this.input.slice(this.cursorPosition);
+                    const count = 4 - (this.cursorPosition % 4);
+                    const toAdd = " ".repeat(count);
+                    this.input = prefix + toAdd + suffix;
+                    this.cursorHome(false);
+                    this.clearLine();
+                    this.xterm.write(this.input);
+                    if (suffix) {
+                        this.xterm.write("\x1b[" + suffix.length + "D");
+                    }
+                    this.cursorPosition += count;
+                    this.updateHistory();
+                }
+
+                handleCursorErase() {
+                    // Don't delete past the start of input
+                    if (
+                        this.xterm.buffer.active.cursorX <=
+                        this.inputStartCursor
+                    ) {
+                        return;
+                    }
+                    const trailing = this.input.slice(this.cursorPosition);
+                    this.input =
+                        this.input.slice(0, this.cursorPosition - 1) + trailing;
+                    this.cursorLeft();
+                    this.clearLine();
+                    if (trailing.length !== 0) {
+                        this.xterm.write(trailing);
+                        this.xterm.write("\x1b[" + trailing.length + "D");
+                    }
+                    this.updateHistory();
+                }
+
+                deleteAtCursor() {
+                    if (this.cursorPosition < this.input.length) {
+                        const trailing = this.input.slice(
+                            this.cursorPosition + 1,
+                        );
+                        this.input =
+                            this.input.slice(0, this.cursorPosition) + trailing;
+                        this.clearLine();
+                        if (trailing.length !== 0) {
+                            this.xterm.write(trailing);
+                            this.xterm.write("\x1b[" + trailing.length + "D");
+                        }
+                        this.updateHistory();
+                    }
+                }
+
+                cursorRight() {
+                    if (this.cursorPosition < this.input.length) {
+                        this.cursorPosition += 1;
+                        this.xterm.write("\x1b[C");
+                    }
+                }
+
+                cursorLeft() {
+                    if (this.cursorPosition > 0) {
+                        this.cursorPosition -= 1;
+                        this.xterm.write("\x1b[D");
+                    }
+                }
+
+                cursorHome(updatePosition) {
+                    if (this.cursorPosition > 0) {
+                        this.xterm.write("\x1b[" + this.cursorPosition + "D");
+                        if (updatePosition) {
+                            this.cursorPosition = 0;
+                        }
+                    }
+                }
+
+                cursorEnd() {
+                    if (this.cursorPosition < this.input.length) {
+                        this.xterm.write(
+                            "\x1b[" +
+                                (this.input.length - this.cursorPosition) +
+                                "C",
+                        );
+                        this.cursorPosition = this.input.length;
+                    }
+                }
+
+                updateHistory() {
+                    if (this.historyIndex !== -1) {
+                        this.historyBuffer[this.historyIndex] = this.input;
+                    } else {
+                        this.beforeHistoryNav = this.input;
+                    }
+                }
+
+                historyBack() {
+                    if (this.history.length === 0) {
+                        return;
+                    } else if (this.historyIndex === -1) {
+                        // we're not currently navigating the history; store
+                        // the current command and then look at the end of our
+                        // history buffer
+                        this.beforeHistoryNav = this.input;
+                        this.historyIndex = this.history.length - 1;
+                    } else if (this.historyIndex > 0) {
+                        this.historyIndex -= 1;
+                    }
+                    this.input = this.historyBuffer[this.historyIndex];
+                    this.cursorHome(false);
+                    this.clearLine();
+                    this.xterm.write(this.input);
+                    this.cursorPosition = this.input.length;
+                }
+
+                historyForward() {
+                    if (this.history.length === 0 || this.historyIndex === -1) {
+                        // we're not currently navigating the history; NOP.
+                        return;
+                    } else if (this.historyIndex < this.history.length - 1) {
+                        this.historyIndex += 1;
+                        this.input = this.historyBuffer[this.historyIndex];
+                    } else if (this.historyIndex == this.history.length - 1) {
+                        // we're coming back from the last history value; reset
+                        // the input to whatever it was when we started going
+                        // through the history
+                        this.input = this.beforeHistoryNav;
+                        this.historyIndex = -1;
+                    }
+                    this.cursorHome(false);
+                    this.clearLine();
+                    this.xterm.write(this.input);
+                    this.cursorPosition = this.input.length;
+                }
+
+                prompt = async () => {
+                    this.activeInput = true;
+                    // Hack to allow stdout/stderr to finish before we figure out where input starts
+                    setTimeout(() => {
+                        this.inputStartCursor =
+                            this.xterm.buffer.active.cursorX;
+                    }, 1);
+                    // If line buffer has a line ready, send it immediately
+                    if (this.inputBuffer.hasLineReady()) {
+                        return new Promise((resolve, reject) => {
+                            resolve(
+                                this.writeLine(this.inputBuffer.nextLine()),
+                            );
+                            this.activeInput = false;
+                        });
+                        // If line buffer has an incomplete line, use it for the active line
+                    } else if (this.inputBuffer.lastLineIsIncomplete()) {
+                        // Hack to ensure cursor input start doesn't end up after user input
+                        setTimeout(() => {
+                            this.handleCursorInsert(
+                                this.inputBuffer.nextLine()
+                            );
+                        }, 1);
+                    }
+                    return new Promise((resolve, reject) => {
+                        this.resolveInput = (value) => {
+                            if (
+                                value.replace(/\s/g, "").length != 0 &&
+                                value != _magic_ctrlc_string + "\n"
+                            ) {
+                                if (this.historyIndex !== -1) {
+                                    this.historyBuffer[this.historyIndex] =
+                                        this.history[this.historyIndex];
+                                }
+                                this.history.push(value.slice(0, -1));
+                                this.historyBuffer.push(value.slice(0, -1));
+                                this.historyIndex = -1;
+                                this.cursorPosition = 0;
+                                try {
+                                    sessionStorage.setItem('__python_wasm_repl.history', JSON.stringify(this.history));
+                                } catch(e) {
+                                }
+                            }
+                            resolve(value);
+                        };
+                    });
+                };
+
+                clear() {
+                    this.xterm.clear();
+                }
+
+                print(charCode) {
+                    let array = [charCode];
+                    if (charCode == 10) {
+                        array = [13, 10]; // Replace \n with \r\n
+                    }
+                    this.xterm.write(new Uint8Array(array));
+                }
+            }
+
+            class BufferQueue {
+                constructor(xterm) {
+                    this.buffer = [];
+                }
+
+                isEmpty() {
+                    return this.buffer.length == 0;
+                }
+
+                lastLineIsIncomplete() {
+                    return (
+                        !this.isEmpty() &&
+                        !this.buffer[this.buffer.length - 1].endsWith("\n")
+                    );
+                }
+
+                hasLineReady() {
+                    return !this.isEmpty() && this.buffer[0].endsWith("\n");
+                }
+
+                addData(data) {
+                    let lines = data.match(/.*(\n|$)/g);
+                    if (this.lastLineIsIncomplete()) {
+                        this.buffer[this.buffer.length - 1] += lines.shift();
+                    }
+                    for (let line of lines) {
+                        this.buffer.push(line);
+                    }
+                }
+
+                nextLine() {
+                    return this.buffer.shift();
+                }
+            }
+
+            const runButton = document.getElementById("run");
+            const replButton = document.getElementById("repl");
+            const stopButton = document.getElementById("stop");
+            const clearButton = document.getElementById("clear");
+
+            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();
+                    terminal.reset(); // reset the history
+                    programRunning(true);
+                    const code = editor.getValue();
+                    pythonWorkerManager.run({
+                        args: ["main.py"],
+                        files: { "main.py": code },
+                    });
+                });
+
+                replButton.addEventListener("click", (e) => {
+                    terminal.clear();
+                    terminal.reset(); // reset the history
+                    const REPL = `
+class WASMREPLKeyboardInterrupt(KeyboardInterrupt):
+    pass
+
+import sys
+import code
+import builtins
+
+def _interrupt_aware_input(prompt=''):
+    line = builtins.input(prompt)
+    if line.strip() == "${_magic_ctrlc_string}":
+        raise KeyboardInterrupt()
+    return line
+
+cprt = 'Type "help", "copyright", "credits" or "license" for more information.'
+banner = f'Python {sys.version} on {sys.platform}\\n{cprt}'
+
+code.interact(banner=banner, readfunc=_interrupt_aware_input, exitmsg='')
+`;
+                    programRunning(true);
+                    pythonWorkerManager.run({ args: ["-c", REPL], 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);
+                    pythonWorkerManager.reset();
+                };
+
+                const pythonWorkerManager = new WorkerManager(
+                    "./python.worker.mjs",
+                    stdio,
+                    readyCallback,
+                    finishedCallback,
+                );
+            };
+            var editor;
+            document.addEventListener("DOMContentLoaded", () => {
+                editor = ace.edit("editor");
+                editor.session.setMode("ace/mode/python");
+            });
+        </script>
+    </head>
+    <body>
+        <div id="repldemo">
+            <h1>Simple REPL for Python WASM</h1>
+            <div id="editor">print('Welcome to WASM!')</div>
+            <div class="button-container">
+                <button id="run" disabled>Run code</button>
+                <button id="repl" disabled>Start REPL</button>
+                <button id="stop" disabled>Stop</button>
+                <button id="clear" disabled>Clear</button>
+            </div>
+            <div id="terminal"></div>
+            <div id="info">
+                The simple REPL provides a limited Python experience in the
+                browser.
+                <a
+                    href="https://github.com/python/cpython/blob/main/Tools/wasm/README.md"
+                >
+                    Tools/wasm/README.md
+                </a>
+                contains a list of known limitations and issues. Networking,
+                subprocesses, and threading are not available.
+            </div>
+        </div>
+        <div id="buffererror" class="error" style="display: none">
+            <p>
+                <code>SharedArrayBuffer</code>, which is required for this demo,
+                is not available in your browser environment.  One common cause
+                of this failure is loading <code>index.html</code> directly in
+                your browser instead of using <code>server.py</code> as
+                described in
+                <a
+                    href="https://github.com/python/cpython/blob/main/Tools/wasm/README.md#the-web-example"
+                >
+                    Tools/wasm/README.md
+                </a>.
+            </p>
+            <p>
+                For more details about security requirements for
+                <code>SharedArrayBuffer</code>, see
+                <a
+                    href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/SharedArrayBuffer#security_requirements"
+                  >this MDN page</a
+                >.
+            </p>
+            <script>
+              if (typeof SharedArrayBuffer === 'undefined') {
+                  document.getElementById('repldemo').style.display = 'none';
+                  document.getElementById('buffererror').style.display = 'block';
+              }
+            </script>
+        </div>
+    </body>
+</html>
diff --git a/Tools/wasm/emscripten/web_example/python.html b/Tools/wasm/emscripten/web_example/python.html
deleted file mode 100644
index 078f86e..0000000
--- a/Tools/wasm/emscripten/web_example/python.html
+++ /dev/null
@@ -1,433 +0,0 @@
-<!doctype html>
-<html lang="en">
-    <head>
-        <meta charset="UTF-8" />
-        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
-        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-        <meta name="author" content="Katie Bell" />
-        <meta name="description" content="Simple REPL for Python WASM" />
-        <title>wasm-python terminal</title>
-        <link
-            rel="stylesheet"
-            href="https://unpkg.com/xterm@4.18.0/css/xterm.css"
-            crossorigin
-            integrity="sha384-4eEEn/eZgVHkElpKAzzPx/Kow/dTSgFk1BNe+uHdjHa+NkZJDh5Vqkq31+y7Eycd"
-        />
-        <style>
-            body {
-                font-family: arial;
-                max-width: 800px;
-                margin: 0 auto;
-            }
-            #code {
-                width: 100%;
-                height: 180px;
-            }
-            #info {
-                padding-top: 20px;
-            }
-            .button-container {
-                display: flex;
-                justify-content: end;
-                height: 50px;
-                align-items: center;
-                gap: 10px;
-            }
-            button {
-                padding: 6px 18px;
-            }
-        </style>
-        <script
-            src="https://unpkg.com/xterm@4.18.0/lib/xterm.js"
-            crossorigin
-            integrity="sha384-yYdNmem1ioP5Onm7RpXutin5A8TimLheLNQ6tnMi01/ZpxXdAwIm2t4fJMx1Djs+"
-        />
-        <script type="module">
-            class WorkerManager {
-                constructor(
-                    workerURL,
-                    standardIO,
-                    readyCallBack,
-                    finishedCallback,
-                ) {
-                    this.workerURL = workerURL;
-                    this.worker = null;
-                    this.standardIO = standardIO;
-                    this.readyCallBack = readyCallBack;
-                    this.finishedCallback = finishedCallback;
-
-                    this.initialiseWorker();
-                }
-
-                async initialiseWorker() {
-                    if (!this.worker) {
-                        this.worker = new Worker(this.workerURL, {
-                            type: "module",
-                        });
-                        this.worker.addEventListener(
-                            "message",
-                            this.handleMessageFromWorker,
-                        );
-                    }
-                }
-
-                async run(options) {
-                    this.worker.postMessage({
-                        type: "run",
-                        args: options.args || [],
-                        files: options.files || {},
-                    });
-                }
-
-                reset() {
-                    if (this.worker) {
-                        this.worker.terminate();
-                        this.worker = null;
-                    }
-                    this.standardIO.message("Worker process terminated.");
-                    this.initialiseWorker();
-                }
-
-                handleStdinData(inputValue) {
-                    if (this.stdinbuffer && this.stdinbufferInt) {
-                        let startingIndex = 1;
-                        if (this.stdinbufferInt[0] > 0) {
-                            startingIndex = this.stdinbufferInt[0];
-                        }
-                        const data = new TextEncoder().encode(inputValue);
-                        data.forEach((value, index) => {
-                            this.stdinbufferInt[startingIndex + index] = value;
-                        });
-
-                        this.stdinbufferInt[0] =
-                            startingIndex + data.length - 1;
-                        Atomics.notify(this.stdinbufferInt, 0, 1);
-                    }
-                }
-
-                handleMessageFromWorker = (event) => {
-                    const type = event.data.type;
-                    if (type === "ready") {
-                        this.readyCallBack();
-                    } else if (type === "stdout") {
-                        this.standardIO.stdout(event.data.stdout);
-                    } else if (type === "stderr") {
-                        this.standardIO.stderr(event.data.stderr);
-                    } else if (type === "stdin") {
-                        // Leave it to the terminal to decide whether to chunk it into lines
-                        // or send characters depending on the use case.
-                        this.stdinbuffer = event.data.buffer;
-                        this.stdinbufferInt = new Int32Array(this.stdinbuffer);
-                        this.standardIO.stdin().then((inputValue) => {
-                            this.handleStdinData(inputValue);
-                        });
-                    } else if (type === "finished") {
-                        this.standardIO.message(
-                            `Exited with status: ${event.data.returnCode}`,
-                        );
-                        this.finishedCallback();
-                    }
-                };
-            }
-
-            class WasmTerminal {
-                constructor() {
-                    this.inputBuffer = new BufferQueue();
-                    this.input = "";
-                    this.resolveInput = null;
-                    this.activeInput = false;
-                    this.inputStartCursor = null;
-
-                    this.xterm = new Terminal({
-                        scrollback: 10000,
-                        fontSize: 14,
-                        theme: { background: "#1a1c1f" },
-                        cols: 100,
-                    });
-
-                    this.xterm.onKey((keyEvent) => {
-                        // Fix for iOS Keyboard Jumping on space
-                        if (keyEvent.key === " ") {
-                            keyEvent.domEvent.preventDefault();
-                        }
-                    });
-
-                    this.xterm.onData(this.handleTermData);
-                }
-
-                open(container) {
-                    this.xterm.open(container);
-                }
-
-                handleTermData = (data) => {
-                    const ord = data.charCodeAt(0);
-                    data = data.replace(/\r(?!\n)/g, "\n"); // Convert lone CRs to LF
-
-                    // Handle pasted data
-                    if (data.length > 1 && data.includes("\n")) {
-                        let alreadyWrittenChars = 0;
-                        // If line already had data on it, merge pasted data with it
-                        if (this.input != "") {
-                            this.inputBuffer.addData(this.input);
-                            alreadyWrittenChars = this.input.length;
-                            this.input = "";
-                        }
-                        this.inputBuffer.addData(data);
-                        // If input is active, write the first line
-                        if (this.activeInput) {
-                            let line = this.inputBuffer.nextLine();
-                            this.writeLine(line.slice(alreadyWrittenChars));
-                            this.resolveInput(line);
-                            this.activeInput = false;
-                        }
-                        // When input isn't active, add to line buffer
-                    } else if (!this.activeInput) {
-                        // Skip non-printable characters
-                        if (!(ord === 0x1b || ord == 0x7f || ord < 32)) {
-                            this.inputBuffer.addData(data);
-                        }
-                        // TODO: Handle ANSI escape sequences
-                    } else if (ord === 0x1b) {
-                        // Handle special characters
-                    } else if (ord < 32 || ord === 0x7f) {
-                        switch (data) {
-                            case "\x0c": // CTRL+L
-                                this.clear();
-                                break;
-                            case "\n": // ENTER
-                            case "\x0a": // CTRL+J
-                            case "\x0d": // CTRL+M
-                                this.resolveInput(
-                                    this.input + this.writeLine("\n"),
-                                );
-                                this.input = "";
-                                this.activeInput = false;
-                                break;
-                            case "\x7F": // BACKSPACE
-                            case "\x08": // CTRL+H
-                                this.handleCursorErase(true);
-                                break;
-                            case "\x04": // CTRL+D
-                                // Send empty input
-                                if (this.input === "") {
-                                    this.resolveInput("");
-                                    this.activeInput = false;
-                                }
-                        }
-                    } else {
-                        this.handleCursorInsert(data);
-                    }
-                };
-
-                writeLine(line) {
-                    this.xterm.write(line.slice(0, -1));
-                    this.xterm.write("\r\n");
-                    return line;
-                }
-
-                handleCursorInsert(data) {
-                    this.input += data;
-                    this.xterm.write(data);
-                }
-
-                handleCursorErase() {
-                    // Don't delete past the start of input
-                    if (
-                        this.xterm.buffer.active.cursorX <=
-                        this.inputStartCursor
-                    ) {
-                        return;
-                    }
-                    this.input = this.input.slice(0, -1);
-                    this.xterm.write("\x1B[D");
-                    this.xterm.write("\x1B[P");
-                }
-
-                prompt = async () => {
-                    this.activeInput = true;
-                    // Hack to allow stdout/stderr to finish before we figure out where input starts
-                    setTimeout(() => {
-                        this.inputStartCursor =
-                            this.xterm.buffer.active.cursorX;
-                    }, 1);
-                    // If line buffer has a line ready, send it immediately
-                    if (this.inputBuffer.hasLineReady()) {
-                        return new Promise((resolve, reject) => {
-                            resolve(
-                                this.writeLine(this.inputBuffer.nextLine()),
-                            );
-                            this.activeInput = false;
-                        });
-                        // If line buffer has an incomplete line, use it for the active line
-                    } else if (this.inputBuffer.lastLineIsIncomplete()) {
-                        // Hack to ensure cursor input start doesn't end up after user input
-                        setTimeout(() => {
-                            this.handleCursorInsert(
-                                this.inputBuffer.nextLine(),
-                            );
-                        }, 1);
-                    }
-                    return new Promise((resolve, reject) => {
-                        this.resolveInput = (value) => {
-                            resolve(value);
-                        };
-                    });
-                };
-
-                clear() {
-                    this.xterm.clear();
-                }
-
-                print(charCode) {
-                    let array = [charCode];
-                    if (charCode == 10) {
-                        array = [13, 10]; // Replace \n with \r\n
-                    }
-                    this.xterm.write(new Uint8Array(array));
-                }
-            }
-
-            class BufferQueue {
-                constructor(xterm) {
-                    this.buffer = [];
-                }
-
-                isEmpty() {
-                    return this.buffer.length == 0;
-                }
-
-                lastLineIsIncomplete() {
-                    return (
-                        !this.isEmpty() &&
-                        !this.buffer[this.buffer.length - 1].endsWith("\n")
-                    );
-                }
-
-                hasLineReady() {
-                    return !this.isEmpty() && this.buffer[0].endsWith("\n");
-                }
-
-                addData(data) {
-                    let lines = data.match(/.*(\n|$)/g);
-                    if (this.lastLineIsIncomplete()) {
-                        this.buffer[this.buffer.length - 1] += lines.shift();
-                    }
-                    for (let line of lines) {
-                        this.buffer.push(line);
-                    }
-                }
-
-                nextLine() {
-                    return this.buffer.shift();
-                }
-            }
-
-            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!')
-</textarea
-        >
-        <div class="button-container">
-            <button id="run" disabled>Run</button>
-            <button id="repl" disabled>Start REPL</button>
-            <button id="stop" disabled>Stop</button>
-            <button id="clear" disabled>Clear</button>
-        </div>
-        <div id="terminal"></div>
-        <div id="info">
-            The simple REPL provides a limited Python experience in the browser.
-            <a
-                href="https://github.com/python/cpython/blob/main/Tools/wasm/README.md"
-            >
-                Tools/wasm/README.md
-            </a>
-            contains a list of known limitations and issues. Networking,
-            subprocesses, and threading are not available.
-        </div>
-    </body>
-</html>
diff --git a/configure b/configure
index 2242865..946cd47 100755
--- a/configure
+++ b/configure
@@ -9603,7 +9603,7 @@ fi
         as_fn_append LDFLAGS_NODIST " -sWASM_BIGINT"
 
         as_fn_append LINKFORSHARED " -sFORCE_FILESYSTEM -lidbfs.js -lnodefs.js -lproxyfs.js -lworkerfs.js"
-    as_fn_append LINKFORSHARED " -sEXPORTED_RUNTIME_METHODS=FS,callMain,ENV"
+    as_fn_append LINKFORSHARED " -sEXPORTED_RUNTIME_METHODS=FS,callMain,ENV,HEAPU32"
     as_fn_append LINKFORSHARED " -sEXPORTED_FUNCTIONS=_main,_Py_Version,__PyRuntime,__PyEM_EMSCRIPTEN_COUNT_ARGS_OFFSET,_PyGILState_GetThisThreadState,__Py_DumpTraceback"
     as_fn_append LINKFORSHARED " -sSTACK_SIZE=5MB"
         as_fn_append LINKFORSHARED " -sTEXTDECODER=2"
diff --git a/configure.ac b/configure.ac
index a05b3b1..6b15beb 100644
--- a/configure.ac
+++ b/configure.ac
@@ -2335,7 +2335,7 @@ AS_CASE([$ac_sys_system],
 
     dnl Include file system support
     AS_VAR_APPEND([LINKFORSHARED], [" -sFORCE_FILESYSTEM -lidbfs.js -lnodefs.js -lproxyfs.js -lworkerfs.js"])
-    AS_VAR_APPEND([LINKFORSHARED], [" -sEXPORTED_RUNTIME_METHODS=FS,callMain,ENV"])
+    AS_VAR_APPEND([LINKFORSHARED], [" -sEXPORTED_RUNTIME_METHODS=FS,callMain,ENV,HEAPU32"])
     AS_VAR_APPEND([LINKFORSHARED], [" -sEXPORTED_FUNCTIONS=_main,_Py_Version,__PyRuntime,__PyEM_EMSCRIPTEN_COUNT_ARGS_OFFSET,_PyGILState_GetThisThreadState,__Py_DumpTraceback"])
     AS_VAR_APPEND([LINKFORSHARED], [" -sSTACK_SIZE=5MB"])
     dnl Avoid bugs in JS fallback string decoding path
-- 
cgit v0.12