Tools/wasm/emscripten/web_example/index.html - external/github.com/python/cpython - Git at Google

 <!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>
	<!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>