Execute pys-on* events when triggered, not at load (#686)

* Execute pys-on* events when triggered, not at load

Mimicing the behavior of Javascripts 'onLoad' event, we should
not be executing the use code at page-load time, only when
the event is triggered.

* Update examples to new syntax

* Fix merge issue

* Await running event handler code

* Restore pys-on* events with original behavior, deprecation warning

* [pre-commit.ci] auto fixes from pre-commit.com hooks

for more information, see https://pre-commit.ci

* xfail toga example

* Add missing { (typo)

* Adjust callback chandling to make linter happy

* Change alpha to latest (#760)

* Don't create custom elements in main and fix various small issues on tests (#747)

* Create custom elements when the runtime finishes loading

* Remove xfails and fix repl integration test

* Fix commented ignore

* Address Antonio's comments

* Fix bad rebase

* Make ure to wait for repl to be in attached state before asserting content

* Move createCustomeElement up so it runs before we close the loader, xfail flaky d3 test

* Fix xfail

* [pre-commit.ci] pre-commit autoupdate (#762)

updates:
- [github.com/pre-commit/mirrors-eslint: v8.23.0 → v8.23.1](pre-commit/mirrors-eslint@v8.23.0...v8.23.1)

Co-authored-by: pre-commit-ci[bot] <66853113+pre-commit-ci[bot]@users.noreply.github.com>

* change documentation to point to latest instead of frozen alpha (#764)

* Toga example is xpass

* Correct 'xpass' to 'xfail' mark

Co-authored-by: pre-commit-ci[bot] <66853113+pre-commit-ci[bot]@users.noreply.github.com>
Co-authored-by: Peter W <34256109+pww217@users.noreply.github.com>
Co-authored-by: Fábio Rosado <fabiorosado@outlook.com>

examples/handtrack/say_hello.html

@@ -106,7 +106,7 @@
     </py-script>
 
     <div class="mb10">
-      <button  id="trackbutton" class="bx--btn bx--btn--secondary" type="button" py-onClick="toggle_video">
+      <button  id="trackbutton" class="bx--btn bx--btn--secondary" type="button" py-onClick="toggle_video()">
         Toggle Video
       </button>
       <button id="nextimagebutton" class="mt10 bx--btn bx--btn--secondary" type="button" disabled>

examples/mario/play_mario.html

@@ -131,7 +131,7 @@
 
     <div class="mb10">
       <p>Use < > to move, ↓ to crouch and x to jump. If video is enabled, say hi to jump as well! </p>
-      <button  id="trackbutton" class="bx--btn bx--btn--secondary" type="button" py-onClick="toggle_video">
+      <button  id="trackbutton" class="bx--btn bx--btn--secondary" type="button" py-onClick="toggle_video()">
         Start Video
       </button>
       <div id="update-note" py-mount class="updatenote mt10">loading model ..</div>

examples/micrograd_ai.html

@@ -49,7 +49,7 @@ <h1>Micrograd - A tiny Autograd engine (with a bite! :))</h1><br>
                 <div id="python-status">Python is currently starting.  Please wait...</div>
             </p>
             <p>
-                <button id="run-all-button" class="btn btn-primary" type="submit" py-onClick="run_all_micrograd_demo">Run All</button><br>
+                <button id="run-all-button" class="btn btn-primary" type="submit" py-onClick="run_all_micrograd_demo()">Run All</button><br>
                 <py-script src="/micrograd_ai.py"></py-script>
                 <div id="micrograd-run-all-print-div"></div><br>
                 <div id="micrograd-run-all-fig1-div"></div>

examples/simple_bioinformatics_tool.html

@@ -49,8 +49,8 @@
             </div>
         </div>
         <div class="control">
-            <button id="run" type="button" class="button is-primary" py-onClick="run">Run!</button>
-            <button id="clear" type="button" class="button is-danger" py-onClick="clear">Clear</button>
+            <button id="run" type="button" class="button is-primary" py-onClick="run()">Run!</button>
+            <button id="clear" type="button" class="button is-danger" py-onClick="clear()">Clear</button>
         </div>
         </div>
 

examples/todo.html

@@ -28,7 +28,7 @@ <h1 class="text-3xl font-bold text-gray-800 uppercase tracking-tight">To Do List
     </div>
     <div>
       <input id="new-task-content" class="py-input" type="text">
-      <button id="new-task-btn" class="py-button" type="submit" py-onClick="add_task">
+      <button id="new-task-btn" class="py-button" type="submit" py-onClick="add_task()">
         Add task
       </button>
     </div>

pyscriptjs/src/components/pyscript.ts

@@ -227,12 +227,20 @@ async function createElementsWithEventListeners(runtime: Runtime, pyAttribute: s
         }
         const handlerCode = el.getAttribute(pyAttribute);
         const event = pyAttributeToEvent.get(pyAttribute);
-        const source = `
-        from pyodide.ffi import create_proxy
-        Element("${el.id}").element.addEventListener("${event}",  create_proxy(${handlerCode}))
-        `;
-        await runtime.run(source);
 
+        if (pyAttribute === 'pys-onClick' || pyAttribute === 'pys-onKeyDown'){
+            console.warn("Use of pys-onClick and pys-onKeyDown attributes is deprecated in favor of py-onClick() and py-onKeyDown(). pys-on* attributes will be deprecated in a future version of PyScript.")
+            const source = `
+            from pyodide.ffi import create_proxy
+            Element("${el.id}").element.addEventListener("${event}",  create_proxy(${handlerCode}))
+            `;
+            await runtime.run(source);
+        }
+        else{
+            el.addEventListener(event, () => {
+                (async() => {await runtime.run(handlerCode)})();
+            });
+        }
         // TODO: Should we actually map handlers in JS instead of Python?
         // el.onclick = (evt: any) => {
         //   console.log("click");

pyscriptjs/tests/integration/test_zz_examples.py

@@ -240,6 +240,7 @@ def test_todo_pylist(self):
         assert self.page.title() == "Todo App"
         wait_for_render(self.page, "*", "<input.*?id=['\"]new-task-content['\"].*?>")
 
+    @pytest.mark.xfail(reason="To be moved to collective and updated, see issue #686")
     def test_toga_freedom(self):
         self.goto("examples/toga/freedom.html")
         self.wait_for_pyscript()