remove pys-on* and py-on* attributes (#1361)

* remove pys-on* and py-on* attributes

* update changelog

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

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

* fix eslint

---------

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

docs/changelog.md

@@ -77,3 +77,4 @@ Deprecations and Removals
 - The py-config `runtimes` to specify an interpreter has been deprecated. The `interpreters` config should be used instead. ([#1082](https://github.com/pyscript/pyscript/pull/1082))
 - The attributes `pys-onClick` and `pys-onKeyDown` have been deprecated, but the warning was only shown in the console. An alert banner will now be shown on the page if the attributes are used. They will be removed in the next release. ([#1084](https://github.com/pyscript/pyscript/pull/1084))
 - The pyscript elements `py-button`, `py-inputbox`, `py-box` and `py-title` have now completed their deprecation cycle and have been removed. ([#1084](https://github.com/pyscript/pyscript/pull/1084))
+- The attributes `pys-onClick` and `pys-onKeyDown` have been removed. Use `py-click` and `py-keydown` instead ([#1361](https://github.com/pyscript/pyscript/pull/1361))

docs/reference/API/attr_to_event.md

@@ -5,15 +5,13 @@ PyScript provides a convenient syntax for mapping JavaScript events to PyScript
 For example, you can use the following code to connect the click event to a button:
 
 ```
-<button id="py-click" py-onClick="foo()">Click me</button>
+<button id="py-click" py-click="foo()">Click me</button>
 ```
 
 Here is a list of all the available event mappings:
 
 | PyScript Event Name | DOM Event Name |
 |-------------------|----------------|
-| py-onClick        | click          |
-| py-onKeyDown      | keydown        |
 | py-afterprint     | afterprint     |
 | py-beforeprint    | beforeprint    |
 | py-beforeunload   | beforeunload   |

docs/reference/API/display.md

@@ -35,7 +35,7 @@ Display will throw an exception if the target is not clear. E.g. the following c
         # from event handlers
         display('hello')
 </py-script>
-<button id="my-button" py-onClick="display_hello()">Click me</button>
+<button id="my-button" py-click="display_hello()">Click me</button>
 ```
 
 Because it's considered unclear if the `hello` string should be displayed underneath the `<py-script>` tag or the `<button>` tag.
@@ -49,7 +49,7 @@ To write compliant code, make sure to specify the target using the `target` para
         display('hello', target="helloDiv")
 </py-script>
 <div id="helloDiv"></div>
-<button id="my-button" py-onClick="display_hello()">Click me</button>
+<button id="my-button" py-click="display_hello()">Click me</button>
 ```
 
 #### Using matplotlib with display

examples/handtrack/say_hello.html

@@ -115,7 +115,7 @@
                 id="trackbutton"
                 class="bx--btn bx--btn--secondary"
                 type="button"
-                py-onClick="toggle_video()"
+                py-click="toggle_video()"
             >
                 Toggle Video
             </button>

examples/mario/play_mario.html

@@ -143,7 +143,7 @@
                 id="trackbutton"
                 class="bx--btn bx--btn--secondary"
                 type="button"
-                py-onClick="toggle_video()"
+                py-click="toggle_video()"
             >
                 Start Video
             </button>

examples/micrograd_ai.html

@@ -83,7 +83,7 @@
                 id="run-all-button"
                 class="btn btn-primary"
                 type="submit"
-                py-onClick="run_all_micrograd_demo()"
+                py-click="run_all_micrograd_demo()"
             >
                 Run All</button
             ><br />

examples/simple_bioinformatics_tool.html

@@ -78,7 +78,7 @@
                         id="run"
                         type="button"
                         class="button is-primary"
-                        py-onClick="run()"
+                        py-click="run()"
                     >
                         Run!
                     </button>
@@ -86,7 +86,7 @@
                         id="clear"
                         type="button"
                         class="button is-danger"
-                        py-onClick="clear()"
+                        py-click="clear()"
                     >
                         Clear
                     </button>

pyscriptjs/src/components/pyscript.ts

@@ -72,11 +72,6 @@ export function make_PyScript(interpreter: InterpreterClient, app: PyScriptApp)
 
 /** Defines all possible py-on* and their corresponding event types  */
 const pyAttributeToEvent: Map<string, string> = new Map<string, string>([
-    // Leaving pys-onClick and pys-onKeyDown for backward compatibility
-    ['pys-onClick', 'click'],
-    ['pys-onKeyDown', 'keydown'],
-    ['py-onClick', 'click'],
-    ['py-onKeyDown', 'keydown'],
     // Window Events
     ['py-afterprint', 'afterprint'],
     ['py-beforeprint', 'beforeprint'],
@@ -166,15 +161,15 @@ const pyAttributeToEvent: Map<string, string> = new Map<string, string>([
 ]);
 
 /** Initialize all elements with py-* handlers attributes  */
-export async function initHandlers(interpreter: InterpreterClient) {
+export function initHandlers(interpreter: InterpreterClient) {
     logger.debug('Initializing py-* event handlers...');
     for (const pyAttribute of pyAttributeToEvent.keys()) {
-        await createElementsWithEventListeners(interpreter, pyAttribute);
+        createElementsWithEventListeners(interpreter, pyAttribute);
     }
 }
 
 /** Initializes an element with the given py-on* attribute and its handler */
-async function createElementsWithEventListeners(interpreter: InterpreterClient, pyAttribute: string) {
+function createElementsWithEventListeners(interpreter: InterpreterClient, pyAttribute: string) {
     const matches: NodeListOf<HTMLElement> = document.querySelectorAll(`[${pyAttribute}]`);
     for (const el of matches) {
         // If the element doesn't have an id, let's add one automatically!
@@ -183,37 +178,16 @@ async function createElementsWithEventListeners(interpreter: InterpreterClient,
         }
         const handlerCode = el.getAttribute(pyAttribute);
         const event = pyAttributeToEvent.get(pyAttribute);
-
-        if (pyAttribute === 'pys-onClick' || pyAttribute === 'pys-onKeyDown') {
-            const msg =
-                `The attribute 'pys-onClick' and 'pys-onKeyDown' are deprecated. Please 'py-click="myFunction()"' ` +
-                ` or 'py-keydown="myFunction()"' instead.`;
-            createDeprecationWarning(msg, msg);
-            const source = `
-            from pyodide.ffi import create_proxy
-            Element("${el.id}").element.addEventListener("${event}",  create_proxy(${handlerCode}))
-            `;
-
-            // We meed to run the source code in a try/catch block, because
-            // the source code may contain a syntax error, which will cause
-            // the splashscreen to not be removed.
-            try {
-                await interpreter.run(source);
-            } catch (e) {
-                logger.error((e as Error).message);
-            }
-        } else {
-            el.addEventListener(event, () => {
-                void (async () => {
-                    try {
-                        await interpreter.run(handlerCode);
-                    } catch (e) {
-                        const err = e as Error;
-                        displayPyException(err, el.parentElement);
-                    }
-                })();
-            });
-        }
+        el.addEventListener(event, () => {
+            void (async () => {
+                try {
+                    await interpreter.run(handlerCode);
+                } catch (e) {
+                    const err = e as Error;
+                    displayPyException(err, el.parentElement);
+                }
+            })();
+        });
         // TODO: Should we actually map handlers in JS instead of Python?
         // el.onclick = (evt: any) => {
         //   console.log("click");
@@ -224,7 +198,7 @@ async function createElementsWithEventListeners(interpreter: InterpreterClient,
         //   }).then(() => {
         //     console.log("resolved")
         //   });
-        //   // let handlerCode = el.getAttribute('py-onClick');
+        //   // let handlerCode = el.getAttribute('py-click');
         //   // pyodide.runPython(handlerCode);
         // }
     }

pyscriptjs/src/main.ts

@@ -246,7 +246,7 @@ export class PyScriptApp {
 
         //Takes a runtime and a reference to the PyScriptApp (to access plugins)
         createCustomElements(interpreter, this);
-        await initHandlers(interpreter);
+        initHandlers(interpreter);
 
         // NOTE: interpreter message is used by integration tests to know that
         // pyscript initialization has complete. If you change it, you need to

pyscriptjs/tests/integration/test_01_basic.py

@@ -301,26 +301,6 @@ class TestBasic(PyScriptTest):
             == 'print("hello world!")\n'
         )
 
-    @pytest.mark.skip(reason="pys-onClick is broken, we should kill it, see #1213")
-    def test_pys_onClick_shows_deprecation_warning(self):
-        self.pyscript_run(
-            """
-            <button id="1" pys-onClick="myfunc()">Click me</button>
-            <py-script>
-                def myfunc():
-                    print("hello world")
-
-            </py-script>
-            """
-        )
-        banner = self.page.locator(".alert-banner")
-        expected_message = (
-            "The attribute 'pys-onClick' and 'pys-onKeyDown' are "
-            "deprecated. Please 'py-click=\"myFunction()\"' or "
-            "'py-keydown=\"myFunction()\"' instead."
-        )
-        assert banner.inner_text() == expected_message
-
     def test_py_attribute_without_id(self):
         self.pyscript_run(
             """

pyscriptjs/tests/integration/test_02_display.py

@@ -113,7 +113,7 @@ class TestOutput(PyScriptTest):
                     # from event handlers
                     display('hello world')
             </py-script>
-            <button id="my-button" py-onClick="display_hello()">Click me</button>
+            <button id="my-button" py-click="display_hello()">Click me</button>
         """
         )
         self.page.locator("text=Click me").click()
@@ -151,7 +151,7 @@ class TestOutput(PyScriptTest):
                 def display_hello():
                     display('hello', target='my-button')
             </py-script>
-            <button id="my-button" py-onClick="display_hello()">Click me</button>
+            <button id="my-button" py-click="display_hello()">Click me</button>
         """
         )
         self.page.locator("text=Click me").click()

pyscriptjs/tests/integration/test_py_terminal.py

@@ -69,7 +69,7 @@ class TestPyTerminal(PyScriptTest):
             """
             <py-terminal auto></py-terminal>
 
-            <button id="my-button" py-onClick="print('hello world')">Click me</button>
+            <button id="my-button" py-click="print('hello world')">Click me</button>
             """
         )
         term = self.page.locator("py-terminal")
@@ -85,7 +85,7 @@ class TestPyTerminal(PyScriptTest):
         """
         self.pyscript_run(
             """
-            <button id="my-button" py-onClick="print('hello world')">Click me</button>
+            <button id="my-button" py-click="print('hello world')">Click me</button>
             """
         )
         term = self.page.locator("py-terminal")
@@ -136,7 +136,7 @@ class TestPyTerminal(PyScriptTest):
         """
         self.pyscript_run(
             """
-            <button id="my-button" py-onClick="print('hello world')">Click me</button>
+            <button id="my-button" py-click="print('hello world')">Click me</button>
             """
         )
         term = self.page.locator("py-terminal")

pyscriptjs/tests/integration/test_splashscreen.py

@@ -1,4 +1,3 @@
-import pytest
 from playwright.sync_api import expect
 
 from .support import PyScriptTest
@@ -77,26 +76,6 @@ class TestSplashscreen(PyScriptTest):
         expect(div).to_contain_text("Startup complete")
         assert "hello pyscript" in self.console.log.lines
 
-    @pytest.mark.skip(reason="pys-onClick is broken, we should kill it, see #1213")
-    def test_splashscreen_closes_on_error_with_pys_onClick(self):
-        self.pyscript_run(
-            """
-            <button id="submit-button" type="submit" pys-onClick="myFunc">OK</button>
-
-            <py-script>
-            from js import console
-
-            def myFunc(*args, **kwargs):
-                text = Element('test-input').element.value
-            Element('test-output').element.innerText = text
-
-            </py-script>
-            """,
-        )
-
-        assert self.page.locator("py-splashscreen").count() == 0
-        assert "Python exception" in self.console.error.text
-
     def test_splashscreen_disabled_option(self):
         self.pyscript_run(
             """