New in-browser code editor plugin

.gitignore

@@ -1,6 +1,10 @@
 .env
 .cache
 
+# Local TLS certs/keys (do not commit)
+project-331.local.pem
+project-331.local-key.pem
+
 *.secret.yml
 
 # Generated by Cargo

services/tmc/next.config.js

@@ -23,7 +23,7 @@ const config = {
   },
   output: "standalone",
   outputFileTracingRoot: ".",
-  webpack(config) {
+  webpack(config, { isServer }) {
     config.module.rules.push({
       test: /\.svg$/i,
       issuer: /\.[jt]sx?$/,
@@ -33,7 +33,11 @@ const config = {
         svgProps: { role: "presentation" },
       },
     })
-
+    // Pyodide is loaded from CDN at runtime (main thread: script tag; worker: importScripts).
+    // Do not resolve/bundle the "pyodide" package.
+    if (!isServer) {
+      config.resolve.fallback = { ...config.resolve.fallback, pyodide: false }
+    }
     return config
   },
   turbopack: {

services/tmc/package.json

@@ -3,8 +3,8 @@
   "version": "1.0.0",
   "packageManager": "pnpm@10.26.2",
   "scripts": {
-    "build": "NODE_ENV=production next build",
-    "dev": "next dev --port 3005 --turbopack",
+    "build": "node scripts/inject-pyodide-version.cjs && NODE_ENV=production next build",
+    "dev": "node scripts/inject-pyodide-version.cjs && next dev --port 3005 --turbopack",
     "export": "next export",
     "test": "NODE_OPTIONS=\"--experimental-vm-modules\" jest"
   },
@@ -59,7 +59,8 @@
     "use-debounce": "^10.0.6",
     "uuid": "^13.0.0",
     "workerpool": "^9.3.4",
-    "zstddec": "^0.1.0"
+    "zstddec": "^0.1.0",
+    "pyodide": "^0.29.3"
   },
   "devDependencies": {
     "@svgr/webpack": "^8.1.0",

services/tmc/public/browserTestWorker.js

@@ -0,0 +1,50 @@
+/**
+ * Classic Web Worker: runs the inlined Python test script in Pyodide.
+ * Loads Pyodide from CDN via importScripts, captures stdout, parses JSON RunResult, posts back.
+ * PYODIDE_INDEX_URL is injected at build time from src/util/pyodide-version.json.
+ */
+/* global importScripts, loadPyodide */
+var PYODIDE_INDEX_URL = "https://cdn.jsdelivr.net/pyodide/v0.29.3/full/"
+
+importScripts(PYODIDE_INDEX_URL + "pyodide.js")
+
+var pyodidePromise = null
+
+function getPyodide() {
+  if (pyodidePromise !== null) {
+    return pyodidePromise
+  }
+  pyodidePromise = loadPyodide({ indexURL: PYODIDE_INDEX_URL })
+  return pyodidePromise
+}
+
+self.onmessage = function (e) {
+  var script = e.data.script
+  getPyodide()
+    .then(function (pyodide) {
+      var stdout = ""
+      var stderr = ""
+      pyodide.setStdout({
+        batched: function (msg) {
+          stdout += msg + "\n"
+        },
+      })
+      pyodide.setStderr({
+        batched: function (msg) {
+          stderr += msg + "\n"
+        },
+      })
+      return pyodide.runPythonAsync(script).then(function () {
+        var lines = stdout.split("\n").filter(function (s) {
+          return s.trim().length > 0
+        })
+        var lastLine = lines.length > 0 ? lines[lines.length - 1] : ""
+        var runResult = JSON.parse(lastLine)
+        self.postMessage({ runResult: runResult })
+      })
+    })
+    .catch(function (err) {
+      var message = err && err.message ? err.message : String(err)
+      self.postMessage({ error: message })
+    })
+}

services/tmc/public/runWorker.js

@@ -0,0 +1,156 @@
+/**
+ * Run worker: executes user Python code in Pyodide with interactive stdin.
+ * When the program calls input(), the worker posts "stdin_request", waits for
+ * the main thread to send "stdin_line" via postMessage, then returns that line
+ * to Python. No SharedArrayBuffer required (works without cross-origin isolation).
+ * PYODIDE_INDEX_URL is injected at build time from src/util/pyodide-version.json.
+ */
+/* global importScripts, loadPyodide */
+var PYODIDE_INDEX_URL = "https://cdn.jsdelivr.net/pyodide/v0.29.3/full/"
+
+importScripts(PYODIDE_INDEX_URL + "pyodide.js")
+
+var pyodidePromise = null
+var pendingStdinResolve = null
+var templatePromise = null
+
+function base64EncodeUtf8(str) {
+  var bytes = new TextEncoder().encode(str)
+  var binary = ""
+  for (var i = 0; i < bytes.length; i++) {
+    binary += String.fromCharCode(bytes[i])
+  }
+  return btoa(binary)
+}
+
+function getTemplate() {
+  if (templatePromise !== null) {
+    return templatePromise
+  }
+  var templateUrl = new URL("runWorkerTemplate.py", self.location.href).href
+  templatePromise = fetch(templateUrl)
+    .then(function (r) {
+      if (!r.ok) {
+        templatePromise = null
+        throw new Error("Template fetch failed: " + r.status + " " + r.statusText)
+      }
+      return r.text()
+    })
+    .catch(function (err) {
+      templatePromise = null
+      throw err
+    })
+  return templatePromise
+}
+
+function getPyodide() {
+  if (pyodidePromise !== null) {
+    return pyodidePromise
+  }
+  pyodidePromise = loadPyodide({ indexURL: PYODIDE_INDEX_URL }).catch(function (err) {
+    pyodidePromise = null
+    throw err
+  })
+  return pyodidePromise
+}
+
+self.inputPromise = function (prompt) {
+  self.postMessage({
+    type: "stdin_request",
+    prompt: prompt != null ? String(prompt) : "",
+  })
+  return new Promise(function (resolve) {
+    pendingStdinResolve = resolve
+  })
+}
+
+self.printError = function (message, kind, line, tb) {
+  var msg = kind + " on line " + line + ": " + message
+  self.postMessage({ type: "run_error", message: msg, output: stdout })
+  runHadError = true
+}
+
+var runHadError = false
+var stdout = ""
+var stderr = ""
+
+self.exit = function () {
+  if (!runHadError) {
+    self.postMessage({ type: "run_done", output: stdout })
+  }
+}
+
+self.onmessage = function (e) {
+  var data = e.data
+
+  if (data.type === "stdin_line") {
+    if (pendingStdinResolve) {
+      var line = data.line != null ? String(data.line) : ""
+      if (line.length > 0 && line.charAt(line.length - 1) !== "\n") {
+        line += "\n"
+      }
+      pendingStdinResolve(line)
+      pendingStdinResolve = null
+    }
+    return
+  }
+
+  if (data.type !== "run") {
+    return
+  }
+
+  var script = data.script
+  runHadError = false
+  stdout = ""
+
+  getPyodide()
+    .then(function (pyodide) {
+      stdout = ""
+      stderr = ""
+      var stdoutDecoder = new TextDecoder("utf-8", { fatal: false })
+      var stderrDecoder = new TextDecoder("utf-8", { fatal: false })
+      pyodide.setStdout({
+        raw: function (byte) {
+          var chunk = stdoutDecoder.decode(new Uint8Array([byte]), { stream: true })
+          if (chunk.length > 0) {
+            stdout += chunk
+            self.postMessage({ type: "stdout", chunk: chunk })
+          }
+        },
+      })
+      pyodide.setStderr({
+        raw: function (byte) {
+          var chunk = stderrDecoder.decode(new Uint8Array([byte]), { stream: true })
+          if (chunk.length > 0) {
+            stderr += chunk
+            self.postMessage({ type: "stderr", chunk: chunk })
+          }
+        },
+      })
+
+      self.userScriptB64 = base64EncodeUtf8(script)
+      return getTemplate()
+        .then(function (template) {
+          return pyodide.runPythonAsync(template)
+        })
+        .then(function () {
+          var flushOut = stdoutDecoder.decode(new Uint8Array(0), { stream: false })
+          var flushErr = stderrDecoder.decode(new Uint8Array(0), { stream: false })
+          if (flushOut.length > 0) {
+            stdout += flushOut
+            self.postMessage({ type: "stdout", chunk: flushOut })
+          }
+          if (flushErr.length > 0) {
+            stderr += flushErr
+            self.postMessage({ type: "stderr", chunk: flushErr })
+          }
+        })
+    })
+    .then(function () {
+      /* run_done is posted by exit() when user code finishes */
+    })
+    .catch(function (err) {
+      var message = err && err.message ? err.message : String(err)
+      self.postMessage({ type: "run_error", message: message })
+    })
+}