playground: minor improvements and install default font

frontend/tools/pyodide-worker.ts

@@ -12,22 +12,60 @@ let myLoadPyodide = (initOpts: Parameters<typeof loadPyodide>[0]) => loadPyodide
 
 let pyodideReadyPromise: Promise<PyodideInterface> | null = null;
 
-self.onmessage = async (event: MessageEvent<any>) => {
+export type MessageEventDataIn = {
+    type: 'asyncRun';
+    id: number;
+    code: string;
+} | {
+    type: 'mkdirTree';
+    id: number;
+    path: string;
+} | {
+    type: 'writeFile';
+    id: number;
+    path: string;
+    content: string;
+}
+
+self.onmessage = async (event: MessageEvent<MessageEventDataIn>) => {
     if (!pyodideReadyPromise) { // First message is always the init message
         // If we haven't loaded Pyodide yet, do so now.
         // This is a singleton, so we only load it once.
         pyodideReadyPromise = myLoadPyodide(event.data as Parameters<typeof loadPyodide>[0]);
         return;
     }
-    // All other messages are code to run.
-    let code = event.data as string;
-    // make sure loading is done
-    const pyodide = await pyodideReadyPromise;
-    // Now load any packages we need, run the code, and send the result back.
-    await pyodide.loadPackagesFromImports(code);
-    try {
-        self.postMessage({result: await pyodide.runPythonAsync(code)});
-    } catch (error: any) {
-        self.postMessage({error: error.message});
+    if (event.data.type === 'mkdirTree') {
+        // Create a directory tree in the Pyodide filesystem.
+        const pyodide = await pyodideReadyPromise;
+        try {
+            pyodide.FS.mkdirTree(event.data.path);
+            self.postMessage({id: event.data.id, result: true});
+        } catch (error: any) {
+            self.postMessage({id: event.data.id, error: error.message});
+        }
+        return;
+    } else if (event.data.type === 'writeFile') {
+        // Write a file to the Pyodide filesystem.
+        const pyodide = await pyodideReadyPromise;
+        try {
+            pyodide.FS.writeFile(event.data.path, event.data.content);
+            self.postMessage({id: event.data.id, result: true});
+        } catch (error: any) {
+            self.postMessage({id: event.data.id, error: error.message});
+        }
+    } else if (event.data.type === 'asyncRun') {
+        let code = event.data.code;
+        // make sure loading is done
+        const pyodide = await pyodideReadyPromise;
+        // Now load any packages we need, run the code, and send the result back.
+        await pyodide.loadPackagesFromImports(code);
+        try {
+            self.postMessage({id: event.data.id, result: await pyodide.runPythonAsync(code)});
+        } catch (error: any) {
+            self.postMessage({id: event.data.id, error: error.message});
+        }
+    } else {
+        console.error("Unknown message type:", (event.data as any)?.type);
+        self.postMessage({id: (event.data as any)?.id, error: "Unknown message type: " + (event.data as any)?.type});
     }
 };