Fix #43 - Break src + worker urls

WebReflection · WebReflection · commit a3308ac9652b · 2023-09-20T15:18:24.000+02:00
diff --git a/core.js.map b/core.js.map
diff --git a/docs/README.md b/docs/README.md
@@ -444,6 +444,7 @@ The list of options' fields is described as such and all of these are *optional*
 | :------------------------ | :-------------------------------------------- | :--------|
 | version                   | `{verstion: '0.23.2'}`                        | Allow the usage of a specific version of an interpreter, same way `version` attribute works with `<script>` elements. |
 | config                    | `{config: 'type.toml'}` `{config: {}}` | Ensure such config is already parsed and available, if not already passed as object, for every custom `type` that execute code. |
+| onerror                   | `(error, element) => { throw error; }         | Allows custom types to intercept early errors possibly happened while bootstrapping elements. |
 | env                       | `{env: 'my-project'}`                         | Guarantee same environment for every custom `type`, avoiding conflicts with any other possible default or custom environment. |
 | onInterpreterReady        | `{onInterpreterReady(wrap, element) {}}`      | This is the main entry point to define anything extra to the context of the always same interpreter. This callback is *awaited* and executed, after the desired *interpreter* is fully available and bootstrapped *once* though other optional fields, per each element that matches the defined `type`. The `wrap` reference contains many fields and utilities helpful to run most common operations, and it is passed along most other options too, when defined. |
 | onBeforeRun               | `{onBeforeRun(wrap, element) {}}`             | This is a **hook** into the logic that runs right before any *interpreter* `run(...)` is performed. It receives the same `wrap` already sent when *onInterpreterReady* executes, and it passes along the current `element` that is going to execute such code. |
diff --git a/docs/core.js b/docs/core.js
diff --git a/docs/core.js.map b/docs/core.js.map
diff --git a/esm/custom.js b/esm/custom.js
@@ -45,21 +45,29 @@ export const handleCustomType = (node) => {
                     version,
                     env,
                     onInterpreterReady,
+                    onerror,
                 } = options;
 
-                const worker = workerURL(node);
-                if (worker) {
-                    const xworker = XWorker.call(new Hook(null, options), worker, {
-                        ...nodeInfo(node, type),
-                        version,
-                        type: runtime,
-                        custom: type,
-                        config: node.getAttribute('config') || config || {},
-                        async: node.hasAttribute('async')
-                    });
-                    defineProperty(node, 'xworker', { value: xworker });
-                    resolve({ type, xworker });
-                    return;
+                let error;
+                try {
+                    const worker = workerURL(node);
+                    if (worker) {
+                        const xworker = XWorker.call(new Hook(null, options), worker, {
+                            ...nodeInfo(node, type),
+                            version,
+                            type: runtime,
+                            custom: type,
+                            config: node.getAttribute('config') || config || {},
+                            async: node.hasAttribute('async')
+                        });
+                        defineProperty(node, 'xworker', { value: xworker });
+                        resolve({ type, xworker });
+                        return;
+                    }
+                }
+                // let the custom type handle errors via its `io`
+                catch (workerError) {
+                    error = workerError;
                 }
 
                 const name = getRuntimeID(runtime, version);
@@ -138,6 +146,8 @@ export const handleCustomType = (node) => {
 
                     resolve(resolved);
 
+                    if (error) onerror?.(error, node);
+
                     onInterpreterReady?.(resolved, node);
                 });
             }
diff --git a/esm/worker/url.js b/esm/worker/url.js
@@ -2,10 +2,16 @@ import { dedent } from '../utils.js';
 
 /* c8 ignore start */ // tested via integration
 export default element => {
-  const { worker } = element.attributes;
+  const { src, worker } = element.attributes;
   if (worker) {
       let { value } = worker;
+      // throw on worker values as ambiguous
+      // @see https://github.com/pyscript/polyscript/issues/43
+      if (value) throw new SyntaxError(`Invalid worker attribute: ${value}`);
+      value = src?.value;
       if (!value) {
+          // throw on empty src attributes
+          if (src) throw new SyntaxError('Invalid src attribute');
           if (!element.childElementCount)
               value = element.textContent;
           else {
diff --git a/test/integration.html b/test/integration.html
@@ -5,5 +5,5 @@
         <meta name="viewport" content="width=device-width, initial-scale=1.0" />
         <title>polyscript integration tests</title>
     </head>
-    <body><ul><li><strong>micropython</strong><ul><li><a href="/test/integration/interpreter/micropython/bootstrap.html">bootstrap</a></li><li><a href="/test/integration/interpreter/micropython/config-object.html">config-object</a></li><li><a href="/test/integration/interpreter/micropython/fetch.html">fetch</a></li><li><a href="/test/integration/interpreter/micropython/no-type.html">no-type</a></li><li><a href="/test/integration/interpreter/micropython/worker-attribute.html">worker-attribute</a></li><li><a href="/test/integration/interpreter/micropython/worker-empty-attribute.html">worker-empty-attribute</a></li><li><a href="/test/integration/interpreter/micropython/worker-error.html">worker-error</a></li><li><a href="/test/integration/interpreter/micropython/worker-lua.html">worker-lua</a></li><li><a href="/test/integration/interpreter/micropython/worker-tag.html">worker-tag</a></li><li><a href="/test/integration/interpreter/micropython/worker-window.html">worker-window</a></li><li><a href="/test/integration/interpreter/micropython/worker.html">worker</a></li></ul><li><strong>pyodide</strong><ul><li><a href="/test/integration/interpreter/pyodide/bootstrap.html">bootstrap</a></li><li><a href="/test/integration/interpreter/pyodide/fetch.html">fetch</a></li><li><a href="/test/integration/interpreter/pyodide/sync.html">sync</a></li><li><a href="/test/integration/interpreter/pyodide/worker-error.html">worker-error</a></li><li><a href="/test/integration/interpreter/pyodide/worker-transform.html">worker-transform</a></li><li><a href="/test/integration/interpreter/pyodide/worker.html">worker</a></li></ul><li><strong>ruby-wasm-wasi</strong><ul><li><a href="/test/integration/interpreter/ruby-wasm-wasi/bootstrap.html">bootstrap</a></li></ul><li><strong>wasmoon</strong><ul><li><a href="/test/integration/interpreter/wasmoon/bootstrap.html">bootstrap</a></li><li><a href="/test/integration/interpreter/wasmoon/worker.html">worker</a></li></ul></ul></body>
+    <body><ul><li><strong>micropython</strong><ul><li><a href="/test/integration/interpreter/micropython/bootstrap.html">bootstrap</a></li><li><a href="/test/integration/interpreter/micropython/config-object.html">config-object</a></li><li><a href="/test/integration/interpreter/micropython/fetch.html">fetch</a></li><li><a href="/test/integration/interpreter/micropython/no-type.html">no-type</a></li><li><a href="/test/integration/interpreter/micropython/worker-attribute.html">worker-attribute</a></li><li><a href="/test/integration/interpreter/micropython/worker-bad.html">worker-bad</a></li><li><a href="/test/integration/interpreter/micropython/worker-empty-attribute.html">worker-empty-attribute</a></li><li><a href="/test/integration/interpreter/micropython/worker-error.html">worker-error</a></li><li><a href="/test/integration/interpreter/micropython/worker-lua.html">worker-lua</a></li><li><a href="/test/integration/interpreter/micropython/worker-tag.html">worker-tag</a></li><li><a href="/test/integration/interpreter/micropython/worker-window.html">worker-window</a></li><li><a href="/test/integration/interpreter/micropython/worker.html">worker</a></li></ul><li><strong>pyodide</strong><ul><li><a href="/test/integration/interpreter/pyodide/bootstrap.html">bootstrap</a></li><li><a href="/test/integration/interpreter/pyodide/fetch.html">fetch</a></li><li><a href="/test/integration/interpreter/pyodide/sync.html">sync</a></li><li><a href="/test/integration/interpreter/pyodide/worker-error.html">worker-error</a></li><li><a href="/test/integration/interpreter/pyodide/worker-transform.html">worker-transform</a></li><li><a href="/test/integration/interpreter/pyodide/worker.html">worker</a></li></ul><li><strong>ruby-wasm-wasi</strong><ul><li><a href="/test/integration/interpreter/ruby-wasm-wasi/bootstrap.html">bootstrap</a></li></ul><li><strong>wasmoon</strong><ul><li><a href="/test/integration/interpreter/wasmoon/bootstrap.html">bootstrap</a></li><li><a href="/test/integration/interpreter/wasmoon/worker.html">worker</a></li></ul></ul></body>
 </html>
diff --git a/test/integration/_shared.js b/test/integration/_shared.js
@@ -108,4 +108,12 @@ exports.python = {
         await expect(logs.pop()).toBe('worker attribute');
         await expect(logs.pop().slice(0, 11)).toBe('Deprecated:');
     },
+
+    workerTagBadAttribute: ({ expect }, url) => async ({ page }) => {
+        const logs = [];
+        page.on('console', msg => logs.push(msg.text()));
+        await page.goto(url);
+        await page.waitForSelector('html.error');
+        await expect(logs.pop()).toBe('Invalid worker attribute: nope.py');
+    },
 };
diff --git a/test/integration/interpreter/micropython/worker-attribute.html b/test/integration/interpreter/micropython/worker-attribute.html
@@ -6,6 +6,6 @@
     <script type="module" src="/core.js"></script>
 </head>
 <body>
-    <script type="micropython" worker="../worker_attribute.py"></script>
+    <script type="micropython" src="../worker_attribute.py" worker></script>
 </body>
 </html>
diff --git a/test/integration/interpreter/micropython/worker-bad.html b/test/integration/interpreter/micropython/worker-bad.html
@@ -0,0 +1,20 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <script type="module">
+        import { define } from '/core.js';
+        define('mpy', {
+          interpreter: 'micropython',
+          onerror({ message }) {
+            console.error(message);
+            document.documentElement.classList.add('error');
+          }
+        });
+    </script>
+</head>
+<body>
+  <mpy-script worker="nope.py"></mpy-script>
+</body>
+</html>
diff --git a/test/integration/micropython.js b/test/integration/micropython.js
@@ -25,6 +25,8 @@ module.exports = (playwright, baseURL) => {
 
     test('MicroPython worker tag', python.workerTagAttribute(playwright, `${baseURL}/worker-tag.html`));
 
+    test('MicroPython worker bad', python.workerTagBadAttribute(playwright, `${baseURL}/worker-bad.html`));
+
     test('MicroPython w/out type', async ({ page }) => {
         await page.goto(`${baseURL}/no-type.html`);
         await page.waitForSelector('html.ready');
diff --git a/test/plugins/worker.html b/test/plugins/worker.html
@@ -6,6 +6,6 @@
         <script type="module" src="../../core.js"></script>
     </head>
     <body>
-        <script type="micropython" worker="./worker.py" config="../fetch.toml"></script>
+        <script type="micropython" config="../fetch.toml" src="./worker.py" worker></script>
     </body>
 </html>
diff --git a/test/ruby.html b/test/ruby.html
@@ -5,16 +5,6 @@
         <meta name="viewport" content="width=device-width,initial-scale=1.0" />
         <title>Ruby</title>
         <link rel="stylesheet" href="style.css" />
-        <script type="importmap">
-            {
-                "imports": {
-                    "basic-devtools": "../node_modules/basic-devtools/esm/index.js",
-                    "coincident/window": "../node_modules/coincident/window.js",
-                    "@ungap/with-resolvers": "../node_modules/@ungap/with-resolvers/index.js",
-                    "@ungap/structured-clone/json": "../node_modules/@ungap/structured-clone/esm/json.js"
-                }
-            }
-        </script>
         <script type="module" src="../core.js"></script>
     </head>
     <body>
diff --git a/test/test.html b/test/test.html
@@ -5,17 +5,7 @@
         <meta name="viewport" content="width=device-width,initial-scale=1.0" />
         <title>python</title>
         <link rel="stylesheet" href="style.css" />
-        <script type="importmap">
-            {
-                "imports": {
-                    "basic-devtools": "../node_modules/basic-devtools/esm/index.js",
-                    "coincident/window": "../node_modules/coincident/window.js",
-                    "@ungap/with-resolvers": "../node_modules/@ungap/with-resolvers/index.js",
-                    "@ungap/structured-clone/json": "../node_modules/@ungap/structured-clone/esm/json.js"
-                }
-            }
-        </script>
-        <script type="module" src="../esm/index.js"></script>
+        <script type="module" src="/core.js"></script>
     </head>
     <body>
         <script type="pyodide">
diff --git a/test/wasmoon.html b/test/wasmoon.html
@@ -5,17 +5,7 @@
         <meta name="viewport" content="width=device-width,initial-scale=1.0" />
         <title>lua</title>
         <link rel="stylesheet" href="style.css" />
-        <script type="importmap">
-            {
-                "imports": {
-                    "basic-devtools": "../node_modules/basic-devtools/esm/index.js",
-                    "coincident/window": "../node_modules/coincident/window.js",
-                    "@ungap/with-resolvers": "../node_modules/@ungap/with-resolvers/index.js",
-                    "@ungap/structured-clone/json": "../node_modules/@ungap/structured-clone/esm/json.js"
-                }
-            }
-        </script>
-        <script type="module" src="../esm/index.js"></script>
+        <script type="module" src="/core.js"></script>
     </head>
     <body>
         <script type="wasmoon" config="./fetch.toml">
diff --git a/test/worker/index.html b/test/worker/index.html
@@ -4,23 +4,12 @@
         <meta charset="UTF-8" />
         <meta name="viewport" content="width=device-width,initial-scale=1.0" />
         <title>python workers</title>
-        <script type="importmap">
-            {
-                "imports": {
-                    "basic-devtools": "../../node_modules/basic-devtools/esm/index.js",
-                    "coincident/window": "../../node_modules/coincident/window.js",
-                    "@ungap/with-resolvers": "../../node_modules/@ungap/with-resolvers/index.js",
-                    "@ungap/structured-clone/json": "../../node_modules/@ungap/structured-clone/esm/json.js",
-                    "@pyscript/core": "../../esm/index.js"
-                }
-            }
-        </script>
     </head>
     <body>
         <div>See console ➡️</div>
         <!-- XWorker - JavaScript to MicroPython -->
         <script type="module">
-            import { XWorker } from "@pyscript/core";
+            import { XWorker } from "/core.js";
 
             const w = new XWorker("./worker.py", { type: "micropython", config: "../fetch.toml" });
             w.postMessage("JavaScript: Hello MicroPython 👋");
diff --git a/test/worker/input.html b/test/worker/input.html
@@ -4,19 +4,8 @@
         <meta charset="UTF-8" />
         <meta name="viewport" content="width=device-width,initial-scale=1.0" />
         <title>python workers</title>
-        <script type="importmap">
-            {
-                "imports": {
-                    "basic-devtools": "../../node_modules/basic-devtools/esm/index.js",
-                    "coincident/window": "../../node_modules/coincident/esm/window.js",
-                    "@ungap/with-resolvers": "../../node_modules/@ungap/with-resolvers/index.js",
-                    "@ungap/structured-clone/json": "../../node_modules/@ungap/structured-clone/esm/json.js",
-                    "@pyscript/core": "../../esm/index.js"
-                }
-            }
-        </script>
         <script type="module">
-            import "@pyscript/core";
+            import "/core.js";
         </script>
     </head>
     <body>
