Add a Pyodide runner based on the python-execution-prototypes

CHANGELOG.md

@@ -24,6 +24,7 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 - Toggle errors sent via apiCallHandler off (#890)
 - Upgrade webpack-dev-server to 4.0.0 to support conditional headers
 - Upgrade yarn to 3.4.1 to workaround a string-width issue
+- Add a ?pyodide=true flag for python project pages
 
 ### Fixed
 

config/webpackDevServer.config.js

@@ -72,7 +72,9 @@ module.exports = function (proxy, _allowedHost) {
     headers: {
       "Access-Control-Allow-Origin": "*",
       "Access-Control-Allow-Methods": "GET, POST, PUT, DELETE, PATCH, OPTIONS",
-      "Access-Control-Allow-Headers": "X-Requested-With, content-type, Authorization"
+      "Access-Control-Allow-Headers": "X-Requested-With, content-type, Authorization",
+      "Cross-Origin-Opener-Policy": "same-origin",
+      "Cross-Origin-Embedder-Policy": "require-corp",
     },
     client: {
       // Silence WebpackDevServer's own logs since they're generally not useful.

package.json

@@ -188,7 +188,8 @@
     "webpack-cli": "^4.9.2",
     "webpack-dev-server": "4.0.0",
     "webpack-manifest-plugin": "2.2.0",
-    "workbox-webpack-plugin": "5.1.4"
+    "workbox-webpack-plugin": "5.1.4",
+    "worker-loader": "^3.0.8"
   },
   "jest": {
     "roots": [
@@ -227,7 +228,8 @@
     "modulePaths": [],
     "moduleNameMapper": {
       "^react-native$": "react-native-web",
-      "^.+\\.module\\.(css|sass|scss)$": "identity-obj-proxy"
+      "^.+\\.module\\.(css|sass|scss)$": "identity-obj-proxy",
+      "PyodideWorker.js": "<rootDir>/src/components/Editor/Runners/PyodideRunner/PyodideWorker.mock.js"
     },
     "moduleFileExtensions": [
       "web.js",

src/assets/stylesheets/PythonRunner.scss

@@ -31,6 +31,10 @@
 
 .pythonrunner-console-output-line {
   padding-inline-end: 5px;
+
+  &.stderr {
+    color: red;
+  }
 }
 
 .pythonrunner-input {

src/components/Editor/ErrorMessage/ErrorMessage.jsx

@@ -9,7 +9,7 @@ const ErrorMessage = () => {
 
   return error ? (
     <div className={`error-message error-message--${settings.fontSize}`}>
-      <p className="error-message__content">{error}</p>
+      <pre className="error-message__content">{error}</pre>
     </div>
   ) : null;
 };

src/components/Editor/Output/Output.jsx

@@ -9,12 +9,16 @@ const Output = () => {
   const isEmbedded = useSelector((state) => state.editor.isEmbedded);
   const searchParams = new URLSearchParams(window.location.search);
   const isBrowserPreview = searchParams.get("browserPreview") === "true";
+  const usePyodide = searchParams.get("pyodide") === "true";
 
   return (
     <>
       <ExternalFiles />
       <div className="proj-runner-container">
-        <RunnerFactory projectType={project.project_type} />
+        <RunnerFactory
+          projectType={project.project_type}
+          usePyodide={usePyodide}
+        />
         {isEmbedded && !isBrowserPreview ? <RunBar embedded /> : null}
       </div>
     </>