Skip to content

Commit 778becc

Browse files
tirankatharosada
tiran
and
katharosada
committed
bpo-40280: Add limited Emscripten REPL
Replaces Emscripten's shell.html with Katie Bell's browser-ui from https://github.com/ethanhs/python-wasm. Co-authored-by: Katie Bell <[email protected]>
1 parent c9844cb commit 778becc

File tree

8 files changed

+401
-5
lines changed

8 files changed

+401
-5
lines changed

‎Makefile.pre.in

+9-2
Original file line numberDiff line numberDiff line change
@@ -807,15 +807,22 @@ $(DLLLIBRARY) libpython$(LDVERSION).dll.a: $(LIBRARY_OBJS)
807807
else true; \
808808
fi
809809

810-
# wasm32-emscripten build
810+
# wasm32-emscripten browser build
811811
# wasm assets directory is relative to current build dir, e.g. "./usr/local".
812812
# --preload-file turns a relative asset path into an absolute path.
813813

814814
$(WASM_STDLIB): $(srcdir)/Lib/*.py $(srcdir)/Lib/*/*.py \
815-
pybuilddir.txt $(srcdir)/Tools/wasm/wasm_assets.py
815+
pybuilddir.txt $(srcdir)/Tools/wasm/wasm_assets.py \
816+
python.html python.worker.js
816817
$(PYTHON_FOR_BUILD) $(srcdir)/Tools/wasm/wasm_assets.py \
817818
--builddir . --prefix $(prefix)
818819

820+
python.html: $(srcdir)/Tools/wasm/python.html python.worker.js
821+
@cp $(srcdir)/Tools/wasm/python.html $@
822+
823+
python.worker.js: $(srcdir)/Tools/wasm/python.worker.js
824+
@cp $(srcdir)/Tools/wasm/python.worker.js $@
825+
819826
##########################################################################
820827
# Build static libmpdec.a
821828
LIBMPDEC_CFLAGS=$(PY_STDMODULE_CFLAGS) $(CCSHARED) @LIBMPDEC_CFLAGS@

‎Misc/NEWS.d/next/Tools-Demos/2022-04-03-11-47-45.bpo-40280.Q_IJik.rst

+2
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
1+
Replace Emscripten's limited shell with Katie Bell's browser-ui REPL from
2+
python-wasm project.

‎Tools/wasm/README.md

+5-1
Original file line numberDiff line numberDiff line change
@@ -55,9 +55,13 @@ emrun builddir/emscripten-browser/python.html
5555
or
5656

5757
```shell
58-
python3 -m http.server
58+
./Tools/wasm/wasm_webserver.py
5959
```
6060

61+
and open http://localhost:8000/builddir/emscripten-browser/python.html . This
62+
directory structure enables the *C/C++ DevTools Support (DWARF)* to load C
63+
and header files with debug builds.
64+
6165
### Cross compile to wasm32-emscripten for node
6266

6367
```

‎Tools/wasm/python.html

+257
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,257 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta http-equiv="X-UA-Compatible" content="IE=edge">
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
7+
<meta name="author" content="Katie Bell">
8+
<meta name="description" content="Simple REPL for Python WASM">
9+
<title>wasm-python terminal</title>
10+
<link rel="stylesheet" href="https://unpkg.com/[email protected]/css/xterm.css" crossorigin/>
11+
<style>
12+
body {
13+
font-family: arial;
14+
max-width: 800px;
15+
margin: 0 auto
16+
}
17+
#code {
18+
width: 100%;
19+
height: 180px;
20+
}
21+
#info {
22+
padding-top: 20px;
23+
}
24+
.button-container {
25+
display: flex;
26+
justify-content: end;
27+
height: 50px;
28+
align-items: center;
29+
gap: 10px;
30+
}
31+
button {
32+
padding: 6px 18px;
33+
}
34+
</style>
35+
<script src="https://unpkg.com/[email protected]/lib/xterm.js" crossorigin></script>
36+
<script type="module">
37+
class WorkerManager {
38+
constructor(workerURL, standardIO, readyCallBack) {
39+
this.workerURL = workerURL
40+
this.worker = null
41+
this.standardIO = standardIO
42+
this.readyCallBack = readyCallBack
43+
44+
this.initialiseWorker()
45+
}
46+
47+
async initialiseWorker() {
48+
if (!this.worker) {
49+
this.worker = new Worker(this.workerURL)
50+
this.worker.addEventListener('message', this.handleMessageFromWorker)
51+
}
52+
}
53+
54+
async run(options) {
55+
this.worker.postMessage({
56+
type: 'run',
57+
args: options.args || [],
58+
files: options.files || {}
59+
})
60+
}
61+
62+
handleStdinData(inputValue) {
63+
if (this.stdinbuffer && this.stdinbufferInt) {
64+
let startingIndex = 1
65+
if (this.stdinbufferInt[0] > 0) {
66+
startingIndex = this.stdinbufferInt[0]
67+
}
68+
const data = new TextEncoder().encode(inputValue)
69+
data.forEach((value, index) => {
70+
this.stdinbufferInt[startingIndex + index] = value
71+
})
72+
73+
this.stdinbufferInt[0] = startingIndex + data.length - 1
74+
Atomics.notify(this.stdinbufferInt, 0, 1)
75+
}
76+
}
77+
78+
handleMessageFromWorker = (event) => {
79+
const type = event.data.type
80+
if (type === 'ready') {
81+
this.readyCallBack()
82+
} else if (type === 'stdout') {
83+
this.standardIO.stdout(event.data.stdout)
84+
} else if (type === 'stderr') {
85+
this.standardIO.stderr(event.data.stderr)
86+
} else if (type === 'stdin') {
87+
// Leave it to the terminal to decide whether to chunk it into lines
88+
// or send characters depending on the use case.
89+
this.stdinbuffer = event.data.buffer
90+
this.stdinbufferInt = new Int32Array(this.stdinbuffer)
91+
this.standardIO.stdin().then((inputValue) => {
92+
this.handleStdinData(inputValue)
93+
})
94+
} else if (type === 'finished') {
95+
this.standardIO.stderr(`Exited with status: ${event.data.returnCode}\r\n`)
96+
}
97+
}
98+
}
99+
100+
class WasmTerminal {
101+
102+
constructor() {
103+
this.input = ''
104+
this.resolveInput = null
105+
this.activeInput = false
106+
this.inputStartCursor = null
107+
108+
this.xterm = new Terminal(
109+
{ scrollback: 10000, fontSize: 14, theme: { background: '#1a1c1f' }, cols: 100}
110+
);
111+
112+
this.xterm.onKey((keyEvent) => {
113+
// Fix for iOS Keyboard Jumping on space
114+
if (keyEvent.key === " ") {
115+
keyEvent.domEvent.preventDefault();
116+
}
117+
});
118+
119+
this.xterm.onData(this.handleTermData)
120+
}
121+
122+
open(container) {
123+
this.xterm.open(container);
124+
}
125+
126+
handleReadComplete(lastChar) {
127+
this.resolveInput(this.input + lastChar)
128+
this.activeInput = false
129+
}
130+
131+
handleTermData = (data) => {
132+
if (!this.activeInput) {
133+
return
134+
}
135+
const ord = data.charCodeAt(0);
136+
let ofs;
137+
138+
// TODO: Handle ANSI escape sequences
139+
if (ord === 0x1b) {
140+
// Handle special characters
141+
} else if (ord < 32 || ord === 0x7f) {
142+
switch (data) {
143+
case "\r": // ENTER
144+
case "\x0a": // CTRL+J
145+
case "\x0d": // CTRL+M
146+
this.xterm.write('\r\n');
147+
this.handleReadComplete('\n');
148+
break;
149+
case "\x7F": // BACKSPACE
150+
case "\x08": // CTRL+H
151+
case "\x04": // CTRL+D
152+
this.handleCursorErase(true);
153+
break;
154+
}
155+
} else {
156+
this.handleCursorInsert(data);
157+
}
158+
}
159+
160+
handleCursorInsert(data) {
161+
this.input += data;
162+
this.xterm.write(data)
163+
}
164+
165+
handleCursorErase() {
166+
// Don't delete past the start of input
167+
if (this.xterm.buffer.active.cursorX <= this.inputStartCursor) {
168+
return
169+
}
170+
this.input = this.input.slice(0, -1)
171+
this.xterm.write('\x1B[D')
172+
this.xterm.write('\x1B[P')
173+
}
174+
175+
prompt = async () => {
176+
this.activeInput = true
177+
// Hack to allow stdout/stderr to finish before we figure out where input starts
178+
setTimeout(() => {this.inputStartCursor = this.xterm.buffer.active.cursorX}, 1)
179+
return new Promise((resolve, reject) => {
180+
this.resolveInput = (value) => {
181+
this.input = ''
182+
resolve(value)
183+
}
184+
})
185+
}
186+
187+
clear() {
188+
this.xterm.clear();
189+
}
190+
191+
print(message) {
192+
const normInput = message.replace(/[\r\n]+/g, "\n").replace(/\n/g, "\r\n");
193+
this.xterm.write(normInput);
194+
}
195+
}
196+
197+
const replButton = document.getElementById('repl')
198+
const clearButton = document.getElementById('clear')
199+
200+
window.onload = () => {
201+
const terminal = new WasmTerminal()
202+
terminal.open(document.getElementById('terminal'))
203+
204+
const stdio = {
205+
stdout: (s) => { terminal.print(s) },
206+
stderr: (s) => { terminal.print(s) },
207+
stdin: async () => {
208+
return await terminal.prompt()
209+
}
210+
}
211+
212+
replButton.addEventListener('click', (e) => {
213+
// Need to use "-i -" to force interactive mode.
214+
// Looks like isatty always returns false in emscripten
215+
pythonWorkerManager.run({args: ['-i', '-'], files: {}})
216+
})
217+
218+
clearButton.addEventListener('click', (e) => {
219+
terminal.clear()
220+
})
221+
222+
const readyCallback = () => {
223+
replButton.removeAttribute('disabled')
224+
clearButton.removeAttribute('disabled')
225+
}
226+
227+
const pythonWorkerManager = new WorkerManager('./python.worker.js', stdio, readyCallback)
228+
}
229+
</script>
230+
</head>
231+
<body>
232+
<h1>Simple REPL for Python WASM</h1>
233+
<div id="terminal"></div>
234+
<div class="button-container">
235+
<button id="repl" disabled>Start REPL</button>
236+
<button id="clear" disabled>Clear</button>
237+
</div>
238+
<div id="info">
239+
The simple REPL provides a limited Python experience in the browser.
240+
<ul>
241+
<li>
242+
Large parts of the stdlib are not provided or do not work
243+
correctly.
244+
</li>
245+
<li>
246+
Python's socket and networking modules do not work with
247+
emulated POSIX sockets yet. asyncio and urllib are not
248+
available.
249+
</li>
250+
<li>In-memory file system is not persistent and limited.</li>
251+
<li>Sub processes and threading APIs are not available.</li>
252+
<li>Heap memory and stack size are restricted.</li>
253+
<li>Copy 'n paste and unicode support are limited.</li>
254+
</ul>
255+
</div>
256+
</body>
257+
</html>

‎Tools/wasm/python.worker.js

+87
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,87 @@
1+
class StdinBuffer {
2+
constructor() {
3+
this.sab = new SharedArrayBuffer(128 * Int32Array.BYTES_PER_ELEMENT)
4+
this.buffer = new Int32Array(this.sab)
5+
this.readIndex = 1;
6+
this.numberOfCharacters = 0;
7+
this.sentNull = true
8+
}
9+
10+
prompt() {
11+
this.readIndex = 1
12+
Atomics.store(this.buffer, 0, -1)
13+
postMessage({
14+
type: 'stdin',
15+
buffer: this.sab
16+
})
17+
Atomics.wait(this.buffer, 0, -1)
18+
this.numberOfCharacters = this.buffer[0]
19+
}
20+
21+
stdin = () => {
22+
if (this.numberOfCharacters + 1 === this.readIndex) {
23+
if (!this.sentNull) {
24+
// Must return null once to indicate we're done for now.
25+
this.sentNull = true
26+
return null
27+
}
28+
this.sentNull = false
29+
this.prompt()
30+
}
31+
const char = this.buffer[this.readIndex]
32+
this.readIndex += 1
33+
// How do I send an EOF??
34+
return char
35+
}
36+
}
37+
38+
const stdoutBufSize = 128;
39+
const stdoutBuf = new Int32Array()
40+
let index = 0;
41+
42+
const stdout = (charCode) => {
43+
if (charCode) {
44+
postMessage({
45+
type: 'stdout',
46+
stdout: String.fromCharCode(charCode),
47+
})
48+
} else {
49+
console.log(typeof charCode, charCode)
50+
}
51+
}
52+
53+
const stderr = (charCode) => {
54+
if (charCode) {
55+
postMessage({
56+
type: 'stderr',
57+
stderr: String.fromCharCode(charCode),
58+
})
59+
} else {
60+
console.log(typeof charCode, charCode)
61+
}
62+
}
63+
64+
const stdinBuffer = new StdinBuffer()
65+
66+
var Module = {
67+
noInitialRun: true,
68+
stdin: stdinBuffer.stdin,
69+
stdout: stdout,
70+
stderr: stderr,
71+
onRuntimeInitialized: () => {
72+
postMessage({type: 'ready', stdinBuffer: stdinBuffer.sab})
73+
}
74+
}
75+
76+
onmessage = (event) => {
77+
if (event.data.type === 'run') {
78+
// TODO: Set up files from event.data.files
79+
const ret = callMain(event.data.args)
80+
postMessage({
81+
type: 'finished',
82+
returnCode: ret
83+
})
84+
}
85+
}
86+
87+
importScripts('python.js')

0 commit comments

Comments
 (0)