System architecture#

_images/architecture.png

Fig. 1 Overall system architecture#

The architecture consists of these parts:

  • Main thread (Vue app): the user interface (editor, console, canvas tabs, file tree), the stores (Pinia) and the devices. The turtle is drawn here (@tigerpython/turtle-renderer), and sounds are played with Tone.js. GPanel, Pygame, GameGrid and soundsystem instead run in the worker: the host bridge hands them the canvas as an OffscreenCanvas and forwards events and audio.

  • Pyodide worker (src/pyodide/pyodideworker.ts): runs the Python code with Pyodide, using pyodide-worker-runner. The Python libraries (src/python/) call the main thread through callbacks and the host bridge (src/pyodide/host_bridge/).

  • Blocking calls such as input() and sleep() use sync-message: with SharedArrayBuffer when the page is cross-origin isolated, otherwise through the service worker (src/pyodide/serviceWorker.ts). See Challenges with sleep and input.

  • File worker (src/file_system/fileWorker.ts): owns the workspace file system (see Multi-File System), an in-memory file system that is shared with the Pyodide worker and saved to IndexedDB. Git (isomorphic-git) and OneDrive (Microsoft Graph API) run in the main thread and access the files through the file worker (src/file_system/fs_isogit_wrapper.ts).

  • Embedding: when WebTigerPython runs in an iframe, the parent page controls it with the postMessage API.