Merge pull request #4 from tommyjtl/refactor/feb-12

feat: configure local development server with nodemon and dev script

Author: tommyjtl

.gitignore

@@ -39,3 +39,7 @@ yarn-error.log*
 # typescript
 *.tsbuildinfo
 next-env.d.ts
+
+# playwright
+playwright-report/
+test-results/

README.md

@@ -2,5 +2,17 @@
 
 A bunch of WASM fun.
 
-- [ ] Use local build instead of fetching remote Pydiode resources
+## Local development
+
+Run a local static server with auto-restart via `nodemon`:
+
+```bash
+npm run dev
+```
+
+Default URL: `http://127.0.0.1:5500`
+
+## To-do
+
+- [x] Use local build instead of fetching remote Pydiode resources
 - [x] Detect window resize and push the windows that exceeds the boundary to the edge accordingly.

js/pydiode/pyodide-output-worker.js

@@ -9,12 +9,13 @@ let pyodide = null;
 let runCode = null;
 
 async function loadPyodideInstance() {
-    const indexURL = 'https://cdn.jsdelivr.net/pyodide/v0.27.5/full/';
+    const indexURL = new URL('../vendor/pyodide/', import.meta.url).href;
+    const pyodideModuleURL = new URL('../vendor/pyodide/pyodide.mjs', import.meta.url).href;
 
     try {
         self.postMessage(createStatusMessage(StatusMessage.FETCHING_PYODIDE));
 
-        const { loadPyodide } = await import(indexURL + 'pyodide.mjs');
+        const { loadPyodide } = await import(pyodideModuleURL);
 
         self.postMessage(createStatusMessage(StatusMessage.INITIALIZING));
 

js/pydiode/pyodide-worker.js

@@ -12,12 +12,14 @@ let reprShorten = null;
 
 // Load Pyodide
 async function loadPyodideInstance() {
-    const indexURL = 'https://cdn.jsdelivr.net/pyodide/v0.27.5/full/';
+    const indexURL = new URL('../vendor/pyodide/', import.meta.url).href;
+    const pyodideModuleURL = new URL('../vendor/pyodide/pyodide.mjs', import.meta.url).href;
 
     try {
+        self.postMessage(createStatusMessage(`Loading from local indexURL: ${indexURL}`));
         self.postMessage(createStatusMessage(StatusMessage.FETCHING_PYODIDE));
 
-        const { loadPyodide } = await import(indexURL + 'pyodide.mjs');
+        const { loadPyodide } = await import(pyodideModuleURL);
 
         self.postMessage(createStatusMessage(StatusMessage.INITIALIZING));
 
@@ -26,6 +28,22 @@ async function loadPyodideInstance() {
             stdin: () => {
                 // We can't use prompt() in a worker, so we'll handle this differently
                 return '';
+            },
+            stdout: (text) => {
+                if (text) {
+                    self.postMessage({
+                        type: MessageType.OUTPUT,
+                        message: text
+                    });
+                }
+            },
+            stderr: (text) => {
+                if (text) {
+                    self.postMessage({
+                        type: MessageType.OUTPUT,
+                        message: text
+                    });
+                }
             }
         });
 

nodemon.json

@@ -0,0 +1,14 @@
+{
+    "watch": [
+        "index.html",
+        "css",
+        "js",
+        "scripts"
+    ],
+    "ext": "html,css,js,mjs,json",
+    "ignore": [
+        "node_modules",
+        ".git"
+    ],
+    "exec": "node scripts/dev-server.mjs"
+}