Fix #1814 - Basic mpy integration (#1815)

Author: WebReflection

Makefile

@@ -56,7 +56,7 @@ clean:
 
 # Build PyScript.
 build:
-	cd pyscript.core && npm run build
+	cd pyscript.core && npx playwright install && npm run build
 
 # Run the precommit checks (run eslint).
 precommit-check:

pyscript.core/package-lock.json

@@ -20,11 +20,12 @@
     },
     "scripts": {
         "server": "npx static-handler --coi .",
-        "build": "npm run build:toml && npm run build:stdlib && npm run build:plugins && npm run build:core && eslint src/ && npm run ts",
+        "build": "npm run build:toml && npm run build:stdlib && npm run build:plugins && npm run build:core && eslint src/ && npm run ts && npm run test:mpy",
         "build:core": "rm -rf dist && rollup --config rollup/core.config.js",
         "build:plugins": "node rollup/plugins.cjs",
         "build:stdlib": "node rollup/stdlib.cjs",
         "build:toml": "node rollup/toml.cjs",
+        "test:mpy": "static-handler --coi . 2>/dev/null & SH_PID=$!; EXIT_CODE=0; playwright test --fully-parallel test/ || EXIT_CODE=$?; kill $SH_PID 2>/dev/null; exit $EXIT_CODE",
         "dev": "node dev.cjs",
         "release": "npm run build && npm run zip",
         "size": "echo -e \"\\033[1mdist/*.js file size\\033[0m\"; for js in $(ls dist/*.js); do echo -e \"\\033[2m$js:\\033[0m $(cat $js | brotli | wc -c) bytes\"; done",
@@ -46,6 +47,7 @@
         "type-checked-collections": "^0.1.7"
     },
     "devDependencies": {
+        "@playwright/test": "^1.39.0",
         "@rollup/plugin-node-resolve": "^15.2.3",
         "@rollup/plugin-terser": "^0.4.4",
         "@webreflection/toml-j0.4": "^1.1.3",

pyscript.core/package.json

@@ -10,7 +10,11 @@ import pyscript from "./stdlib/pyscript.js";
 
 const { entries } = Object;
 
-const python = ["from pathlib import Path as _Path", "_path = None"];
+const python = [
+    "import os as _os",
+    "from pathlib import Path as _Path",
+    "_path = None",
+];
 
 const write = (base, literal) => {
     for (const [key, value] of entries(literal)) {
@@ -19,7 +23,9 @@ const write = (base, literal) => {
             const code = JSON.stringify(value);
             python.push(`_path.write_text(${code})`);
         } else {
-            python.push("_path.mkdir(parents=True, exist_ok=True)");
+            // @see https://github.com/pyscript/pyscript/pull/1813#issuecomment-1781502909
+            python.push(`if not _os.path.exists("${base}/${key}"):`);
+            python.push("    _path.mkdir(parents=True, exist_ok=True)");
             write(`${base}/${key}`, value);
         }
     }
@@ -29,6 +35,7 @@ write(".", pyscript);
 
 python.push("del _Path");
 python.push("del _path");
+python.push("del _os");
 python.push("\n");
 
 export default python.join("\n");

pyscript.core/src/stdlib.js

@@ -6,28 +6,19 @@
   <title>PyScript Next Plugin Bug?</title>
   <link rel="stylesheet" href="../dist/core.css">
   <script type="module">
-    import { hooks } from "../dist/core.js";
-
-    // Worker
-    hooks.worker.onReady.add((wrap, xworker) => {
-      console.log("worker", "onReady");
-      console.log("worker", "wrap", wrap);
-      console.log("worker", "xworker", xworker);
-    });
-    hooks.worker.onBeforeRun.add(() => {
-      console.log("worker", "onBeforeRun");
-    });
-    hooks.worker.codeBeforeRun.add('print("worker", "codeBeforeRun")');
-    hooks.worker.codeAfterRun.add('print("worker", "codeAfterRun")');
-    hooks.worker.onAfterRun.add(() => {
-      console.log("worker", "onAfterRun");
+    addEventListener('mpy:done', () => {
+      document.documentElement.classList.add('done');
     });
 
+    import { hooks } from "../dist/core.js";
+
     // Main
     hooks.main.onReady.add((wrap, element) => {
       console.log("main", "onReady");
-      console.log("main", "wrap", wrap);
-      console.log("main", "element", element);
+      if (location.search === '?debug') {
+        console.debug("main", "wrap", wrap);
+        console.debug("main", "element", element);
+      }
     });
     hooks.main.onBeforeRun.add(() => {
       console.log("main", "onBeforeRun");
@@ -37,13 +28,30 @@
     hooks.main.onAfterRun.add(() => {
       console.log("main", "onAfterRun");
     });
+
+    // Worker
+    hooks.worker.onReady.add((wrap, xworker) => {
+      console.log("worker", "onReady");
+      if (location.search === '?debug') {
+        console.debug("worker", "wrap", wrap);
+        console.debug("worker", "xworker", xworker);
+      }
+    });
+    hooks.worker.onBeforeRun.add(() => {
+      console.log("worker", "onBeforeRun");
+    });
+    hooks.worker.codeBeforeRun.add('print("worker", "codeBeforeRun")');
+    hooks.worker.codeAfterRun.add('print("worker", "codeAfterRun")');
+    hooks.worker.onAfterRun.add(() => {
+      console.log("worker", "onAfterRun");
+    });
   </script>
 </head>
 <body>
-  <script type="py" worker>
+  <script type="mpy" worker>
     print("actual code in worker")
   </script>
-  <script type="py">
+  <script type="mpy">
     print("actual code in main")
   </script>
 </body>

pyscript.core/test/hooks.html

@@ -5,19 +5,25 @@
         <meta name="viewport" content="width=device-width, initial-scale=1.0" />
         <title>PyScript Next</title>
         <script>
-            addEventListener("mpy:ready", console.log);
+            addEventListener('mpy:done', () => {
+                document.documentElement.classList.add('done');
+            });
         </script>
         <link rel="stylesheet" href="../dist/core.css">
         <script type="module" src="../dist/core.js"></script>
     </head>
     <body>
         <script type="mpy">
             from pyscript import display
-            display("Hello", "M-PyScript Next", append=False)
+            display("Hello", "M-PyScript Main 1", append=False)
         </script>
+        <mpy-script>
+            from pyscript import display
+            display("Hello", "M-PyScript Main 2", append=False)
+        </mpy-script>
         <mpy-script worker>
             from pyscript import display
-            display("Hello", "M-PyScript Next Worker", append=False)
+            display("Hello", "M-PyScript Worker", append=False)
         </mpy-script>
     </body>
 </html>

pyscript.core/test/mpy.html

@@ -0,0 +1,37 @@
+import { test, expect } from '@playwright/test';
+
+test('MicroPython display', async ({ page }) => {
+  await page.goto('http://localhost:8080/test/mpy.html');
+  await page.waitForSelector('html.done');
+  const body = await page.evaluate(() => document.body.innerText);
+  await expect(body.trim()).toBe([
+    'M-PyScript Main 1',
+    'M-PyScript Main 2',
+    'M-PyScript Worker',
+  ].join('\n'));
+});
+
+test('MicroPython hooks', async ({ page }) => {
+  const logs = [];
+  page.on('console', msg => {
+    const text = msg.text();
+    if (!text.startsWith('['))
+      logs.push(text);
+  });
+  await page.goto('http://localhost:8080/test/hooks.html');
+  await page.waitForSelector('html.done');
+  await expect(logs.join('\n')).toBe([
+    'main onReady',
+    'main onBeforeRun',
+    'main codeBeforeRun',
+    'actual code in main',
+    'main codeAfterRun',
+    'main onAfterRun',
+    'worker onReady',
+    'worker onBeforeRun',
+    'worker codeBeforeRun',
+    'actual code in worker',
+    'worker codeAfterRun',
+    'worker onAfterRun',
+  ].join('\n'));
+});