Disable form controls on xx-events until ready

WebReflection · WebReflection · commit 14fca947868f · 2023-09-25T14:38:37.000+02:00
diff --git a/core.js.map b/core.js.map
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/listeners.js b/esm/listeners.js
@@ -51,8 +51,20 @@ export const addAllListeners = (root) => {
             .join(' or ')}]`,
         root,
     )) {
-        name = name.slice(name.lastIndexOf('-') + 1);
-        if (name !== 'env') el.addEventListener(name, listener);
+        const i = name.lastIndexOf('-');
+        const type = name.slice(i + 1);
+        if (type !== 'env') {
+            el.addEventListener(type, listener);
+            // automatically disable form controls that are not disabled already
+            if ('disabled' in el && !el.disabled) {
+                el.disabled = true;
+                // set these to enable once the interpreter is known (registered + loaded)
+                queueMicrotask(async () => {
+                    await awaitInterpreter(name.slice(0, i));
+                    el.disabled = false;
+                });
+            }
+        }
     }
 };
 /* c8 ignore stop */
diff --git a/test/custom.html b/test/custom.html
@@ -23,6 +23,10 @@
               'not the same config'
             );
             wrap.run(element.textContent);
+            const button = document.createElement('button');
+            button.setAttribute('mpy-click', 'all_good');
+            button.textContent = 'runtime';
+            document.body.append(button);
           }
         });
     </script>
@@ -33,6 +37,9 @@
     import a
     from b import x
     print(x)
+
+    def all_good(event):
+        print('OK', event.type)
   </script>
   <script type="mpy" worker>
     print("worker")
@@ -46,5 +53,6 @@
     except:
         print("all good")
   </script>
+  <button mpy-click="all_good">click</button>
 </body>
 </html>
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-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>
+    <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/button.html">button</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
@@ -43,6 +43,16 @@ exports.python = {
         await expect(logs[0]).toBe('hello from A');
     },
 
+    disabledUntilReady: ({ expect }, baseURL) => async ({ page }) => {
+        await page.goto(`${baseURL}/button.html`);
+        await page.waitForSelector('button[disabled]');
+        await page.waitForSelector('button:not([disabled])');
+        const button = await page.getByRole('button');
+        await button.click();
+        const result = await page.evaluate(() => document.querySelector('button').textContent);
+        await expect(result).toContain('clicked');
+    },
+
     error: ({ expect }, baseURL) => async ({ page }) => {
         // Test that when the worker throws an error, the page does not crash and the
         // error is reported to the console.
diff --git a/test/integration/interpreter/pyodide/button.html b/test/integration/interpreter/pyodide/button.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 { init } from '../utils.js';
+        init('pyodide');
+    </script>
+</head>
+<body>
+    <script type="pyodide">
+        import js
+
+        def clicked(event):
+          event.target.textContent = "clicked"
+    </script>
+    <button pyodide-click="clicked">click me</button>
+</body>
+</html>
diff --git a/test/integration/pyodide.js b/test/integration/pyodide.js
@@ -29,4 +29,6 @@ module.exports = (playwright, baseURL) => {
     test('Pyodide Worker error', python.error(playwright, baseURL));
 
     test('Pyodide transform', python.error(playwright, baseURL));
+
+    test('Pyodide events ready', python.disabledUntilReady(playwright, baseURL));
 };
