Behaviour of py-*: how to pass event #835

dj-fiorex · 2022-10-06T17:18:50Z

Checklist

I added a descriptive title
I searched for other issues and couldn't find a solution or duplication
I already searched in Google and didn't find any good information or help

What happened?

Hello, i already used the py-* functionality to call a python function like this:

<input
       class="form-control"
       id="myfile"
       type="file"
       py-change="form_field_changed"
      />
...


 <py-script >
def form_field_changed(event):
</py-script>

Now this doesn't work anymore.
I noted that if i put brackets on function call like this form_field_changed() then the function is executed but comply that it require an argument (event)

is the Behaviour changed?
how can i access the event object?

Thanks

What browsers are you seeing the problem on? (if applicable)

Firefox, Chrome, Safari, Microsoft Edge, Other

Console info

No response

Additional Context

No response

The text was updated successfully, but these errors were encountered:

JeffersGlass · 2022-10-06T17:49:44Z

This behavior was changed as part of #686, which was included in the 2022.09.1 release of PyScript which was published last week. If you're linking to https://pyscript.net/latest/pyscript.js, then that's what probably broke your code.

The new syntax is:

<input
  py-change="form_field_changed()"
  ...
/>

<py-script>
    def form_field_changed():
        ...
</py-script>

This change was made to more closely mirror JavaScript's onevent syntax.

Note that PyScript's syntax does not currently make the event object available to the event handling method - you'll want to include logic for grabbing the data from the input in your form_field_changed function.

dj-fiorex · 2022-10-06T20:45:40Z

ok thank you for the explanation!
Maybe the best thing to do is to have some examples that highlight the usage of py-* attributes. Where can i create it?

tedpatrick · 2022-10-06T21:33:02Z

Yes, we need a way to get the event passed cleanly into the function. Looks like an area of work.

dj-fiorex · 2022-10-06T21:42:36Z

I'm ready to give some help in my free time, where can i look to get an overview of the event handler?

JeffersGlass · 2022-10-06T21:56:17Z

Thanks @dj-fiorex! That would be swell. The logic for the py-*event handling is in pyscript.ts.

Perhaps writing up an explanation or reference-guide for the docs section would be the best place for that info to go, if you're game to write it up. @marimeireles may have thoughts as to the best home for that info.

For what it's worth, not every possible event is currently captured (though all the 'common' ones are) - #801 has some details.

For what it's worth, and slightly orthogonal to your question here, events are available if you add the event listener separately:

<!-- py-*event syntax doesn't current pass event nor "this"-->
<button id="one" py-click="say_hello()">No Event with Py-click</button>
<py-script>
  from js import console,

  def say_hello():
    console.log("HELLO!")
</py-script>

<!-- but pyodide.ffi.wrappers.add_event_listener or Element.addEventListener do-->
<button id="two">add_event_listener passes event</button>
<py-script>
  from js import console, document
  from pyodide.ffi.wrappers import add_event_listener

  def hello_args(*args):
    console.log(f"Hi! I got some args! {args}")

  add_event_listener(document.getElementById("two"), "click", say_goodbye)
</py-script>

As @tedpatrick, we should make it possible either way, but if you need that functionality for a project you're working on now, that's a workaround.

tedpatrick · 2022-10-06T22:31:38Z

I am working on this at 2 levels:

How do we subscribe py-{event} at startup
How do we support adding a py-{event} attribute at runtime after PyScript has initialized (mutation observer)

Case 1: <button py-click="foo()">ClickMe</button>             SUPPORTED
Case 2: <button py-click="foo">ClickMe</button>               PROPOSED

In case 2, if the target function has 1 argument, it gets passed the event. If no arguments, no event.

This is an area of risk in terms of API design, I would rather do the simple thing now. We can always get more advanced in time.

tedpatrick · 2022-10-06T22:48:24Z

You can also use a create_proxy

<html>
<head>
    <link rel="stylesheet" href="https://pyscript.net/unstable/pyscript.css" />
    <script defer src="https://pyscript.net/unstable/pyscript.js"></script>
</head>
<body>
    <button id="two">add_event_listener passes event</button>
<py-script>
  from pyodide.ffi import create_proxy

  def hello_args(*args):
      console.log(f"Hi! I got some args! {args}")

  Element('two').element.addEventListener("click", create_proxy(hello_args))
</py-script>
</body>
</html>

JeffersGlass · 2022-10-06T22:54:31Z

+1 to sometime having a solution that works when attributes are added after initialization - from the amount of times this has come up recently, I suspect PyScript will ultimately be one large mutation observer. And not in a bad way!

Case 1: <button py-click="foo()">ClickMe</button> SUPPORTED
Case 2: <button py-click="foo">ClickMe</button> PROPOSED

-1 to case 2: that was the sole behavior in 2022.06.1, and we specifically moved away from it with PR #686, because it's not how script onevent syntax works, and there was preference (from @fpliger et al) to at least not have PyScript do things that are surprisingly different from JavaScript in these areas.

If it's possible:

Case 3: <button py-click="foo(event)">ClickMe</button>       POSSIBLE??

would be closest, I think, though I have no idea how to implement it.

tedpatrick · 2022-10-07T01:43:50Z

That syntax is what several leading JS frameworks do today, it isn't standard but it is the common syntax for assigning attributes function values by name. vue react svelte

Much is possible, the key is what interface is best for building apps from a developer's perspective. I personally would use this all the time. And what if it worked depending on the target method's arguments? I believe there is merit in supporting both.

<button py-click="foo">ClickMe</button>

<button py-click="foo()">ClickMe</button>

marimeireles · 2022-10-07T14:17:25Z

Hey @dj-fiorex, my input for docs is that we may start introducing real content to the Reference part.
I guess it'd be nice to have a) an explanation on how to use the function, b) a list of the possible events, c) maybe @tedpatrick's example on how to use it through proxy is useful to have it there?
Thank you for offering to contribute 🎉 that's awesome :)

tedpatrick · 2022-10-12T18:45:12Z

And now for something completely different...

In exploring how to address the issues in py-event attributes, I took a detour and ended up somewhere interesting.

There are 4 core issues:

We need to get the event object into python for event handlers
It isn't clear how to expose a python function in JS
We need to support adding/removing these handlers at runtime (py-event is wired up once at startup)
We need an easy way to subscribe to events in python.

API (does not work without framework modifications)

<body style="padding:2em;">
    <button onclick="py.foo()">call foo on click</button><br><br>
    <button onclick="py.boo(event)">call boo on click w event</button><br><br>
    <button onclick="py.loo(event, 123)">call loo on click w event + 123</button><br><br>
    <button onclick="py.nothing(event)">call nothing on click w event</button><br><br>
    <button id="empty_button">empty_button with mousemove event</button><br><br>
    <py-script>
import js

@handler
def foo():
    js.console.log("foo called")

@handler
def boo(e):
    js.console.log("boo called with event")
    js.console.log( e )

@handler
def loo(*e):
    js.console.log("loo called with *event")
    js.console.log( e[0] )
    js.console.log( e[1] )

@handler(event="click")
def doc_click(*e):
    js.console.log("doc_click called with *event")
    js.console.log( e[0] )

@handler( event="mousemove", element=Element("empty_button").element )
def button_mousemove(*e):
    js.console.log("button_mousemove called with *event")
    js.console.log( e[0] )

    </py-script>
</body>

This is using the on[event] attribute syntax in JS but it adds in a global py object to allow writing event handlers like so :

onclick="py.foo()"
onclick="py.loo(event)"
onclick="py.goo(42,event,1,2,3)"

within all on[event] attributes, the event object exists within the call. So we can use event and write it directly into a call to a python handler. Since this argument interface is shared across js and python, it is easy to wire this in seamlessly.

As for exposing python methods into the py object, there is a @handler decorator that can simply add a function or wire up the event handler without using html/js at all.

Here we expose the button_mousemove handler to js and subscribe it to the mousemove event for a button element.

@handler( event="mousemove", element=Element("empty_button").element )
def button_mousemove(*e):
    js.console.log("button_mousemove called with *event")

Here is a working version for review. Open the JS console to see this working fully. Source is here.

The irony is in exploring py-event, there might be a cleaner, simpler way to manage events within a PyScript application.

Note, this is VERY EARLY and VERY POC. If we were to move forward along these lines, the naming and defaults would change but I think it feels right.

Feedback welcome.

pmp-p · 2022-10-12T20:19:46Z

i ~~like~~ love the py.* proxy for event ( i already use that in pygame-script)

~~but i don't think event has its place in arguments it should be where it is expected to be ie : js.window.event~~ <= it's a pitfall.

~~while inline onclick arguments should be fully and strictly in javascript space. That would allow to pass this properly instead of setting builtins.this before reaching python side.~~
pitfall too there should only be one argument (event)

for solely accessing event the method Element('two').element.addEventListener("click", create_proxy(hello_args)) described earlier is the way.

antocuni · 2022-10-12T21:48:56Z

i ~~like~~ love the py.* proxy for event ( i already use that in pygame-script), but i don't think event has its place in arguments it should be where it is expected to be ie : js.window.event

According to Mozilla's docs window.event is deprecated, isn't it?

pmp-p · 2022-10-13T00:39:50Z

According to Mozilla's docs window.event is deprecated, isn't it?

Sure but the window.event on python side is empty, so it's safe to use it for what it was/is used for : passing event for argument-less inline onclick=click()

doing onclick=click(event) would imply addressing window.event ... So if it vanishes suddenly after deprecation how one would get the event in old code ?

At least window.event is a single place in the proxy to maintain and to adapt to future ways.
it's also easy to make https://pygame-web.github.io/showroom/pyscript/unify.html

antocuni · 2022-10-13T11:53:30Z

Sure but the window.event on python side is empty, so it's safe to use it for what it was/is used for : passing event for argument-less inline onclick=click()

I don't understand. Are you proposing that we should write to window.event?
If so, I don't think it's not safe at all. Even on the Python side, js.window is a reference to the real window object on the JS side, so if we try to write a .event attribute on it, I'm sure things will explode.

doing onclick=click(event) would imply addressing window.event ... So if it vanishes suddenly after deprecation how one would get the event in old code ?

I admit that I am having troubles to understand this sentence of the mozilla docs:

you should instead use the Event passed into the event handler function.

does it mean that you should not use the onclick=... HTML attribute but that you have to manually use addEventListener if you want to access the event?

tedpatrick · 2022-10-13T13:10:56Z

Window.event is deprecated but it has very wide support <https://developer.mozilla.org/en-US/docs/Web/API/Window/event#browser_compatibility> and its removal would break the web. The @handler( event="click" ) decorator uses addEventListener internally so this essentially aligns with how events work in the DOM Event spec. You can use on[event] handlers and you get the existing behavior or you can use addEventListener directly or via the @handler decorator. on[event] attributes have limitations in that one 1 can exist for a single event type whereas addEventListener events can have many listeners and support event options. In py-event attributes, there is currently no way to obtain the event and pass it to python. Also, py-event attributes are only set at startup and lack any runtime flexibility. The interesting part here is that these are actually independent of on[event] does not conflict with py-event or vice versa.

…

On Thu, Oct 13, 2022 at 6:53 AM Antonio Cuni ***@***.***> wrote: Sure but the window.event on python side is empty, so it's safe to use it for what it was/is used for : passing event for argument-less inline onclick=click() I don't understand. Are you proposing that we should write to window.event ? If so, I don't think it's not safe at all. Even on the Python side, js.window is a reference to the real window object on the JS side, so if we try to write a .event attribute on it, I'm sure things will explode. doing onclick=click(event) would imply addressing window.event ... So if it vanishes suddenly after deprecation how one would get the event in old code ? I admit that I am having troubles to understand this sentence of the mozilla docs: you should instead use the Event <https://developer.mozilla.org/en-US/docs/Web/API/Event> passed into the event handler function. does it mean that you should not use the onclick=... HTML attribute but that you have to manually use addEventListener if you want to access the event? — Reply to this email directly, view it on GitHub <#835 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AISG7AGVFURSNR54DC23TZ3WC7Z4NANCNFSM6AAAAAAQ62ZVEI> . You are receiving this because you were mentioned.Message ID: ***@***.***>

pmp-p · 2022-10-13T14:06:50Z

If so, I don't think it's not safe at all. Even on the Python side, js.window is a reference to the real window object on the JS side, so if we try to write a .event attribute on it, I'm sure things will explode.

indeed it can have side effects and it's wasted cycle to send it back to js, why not just set "builtins.event" then only on python side ( i updated https://pygame-web.github.io/showroom/pyscript/unify.html accordingly ) ?

ps @antocuni: it's "black -x" formatted now, and maybe that's why i wanted json in pyconfig instead of toml ;)

antocuni · 2022-10-13T14:53:16Z

indeed it can have side effects and it's wasted cycle to send it back to js, why not just set "builtins.event" then only on python side

well, relying on global state seems suboptimal and a certain source of bug. I would strongly prefer a solution in which we pass event as a function argument (even if on the JS side is a global -- it's not a good reason for continuing doing wrong things).

Example of things which can go wrong with a global/window/builtins event:

def on_click():
    assert event.type == "click" # guaranteed to work
    await fetch_something()
    assert event.type == "click" # might fail if another event handler was fired in the meantime

JeffersGlass · 2022-10-13T16:08:03Z

@tedpatrick This is a very slick implementation! I agree with your four goals - the only thing that I think is missing is that there's no way to pass Python variables/objects as arguments, true? Since all arguments in that scheme live in JS?

Can I suggest some alternate solutions for achieving the same goals? I've re-ordered them for narrative purposes.

We need an easy way to subscribe to events in python. We need to support adding/removing these handlers at runtime (py-event is wired up once at startup)

I personally think both of these are covered by Pyodide's add_event_listener()/ remove_event_listener(), which are a combination of create_proxy and JavaScript's addEventListener/removeEventListener. So, the style of your last code example would be:

import pyodide
def button_mousemove(*e):
    js.console.log("button_mousemove called with *event")
    js.console.log( e[0] )

pyodide.ffi.add_event_listener( Element("empty_button").element, event="mousemove", button_mousemove)

Though perhaps having this functionality as a decorator in PyScript might be appealing? If we want to dynamically add this behavior to elements that gain a "py-[event]" attribute, I think a MutationObserver might be the way.

We need to get the event object into python for event handlers

This is something I've been noodling on, and have a working prototype of. An example of code would be:

<button id="b" py-click="my_python_function(event)">Run my_python_function</button>

The key additions are:

#pyscript.py
from js import window
from contextvars import ContextVar

event = None

def load_event(js_event):
    global event #See below, this will be a ContextVar
    event = js_event
   
window.loadEvent = load_event #See below

//pyscript.ts
el.addEventListener(event, (event) => {
    event.preventDefault();
    (async(event) => {window.loadEvent(event); await runtime.run(handlerCode)})(event);

This is just the core of the idea - rather than a global event object, a ContextVar could be used to deal with the case of overlapping events. And there's surely a better way to create a JS function that assigning it to an attribute of window. Also a type-safe way.

It isn't clear how to expose a python function in JS

If PyScript were to export a reference to the Pyodide interpretter, Python functions would be accessible at something like PyScript.interpretter.globals['func_name'] (see Pyodide.globals).

This has been a request for awhile per that issue, and I think would solve that issue in the same way the Pyodide does.

The interesting part here is that these are actually independent of on[event] does not conflict with py-event or vice versa.

I was just thinking the same thing!

dj-fiorex · 2022-10-13T17:52:10Z

Hello guys, i'm a web developer for 90% of my time and 10% python, and i can say that in the web space the event handler receive an event as an argument.
What @tedpatrick suggests is the way to go in my opinion

pauleveritt · 2022-10-16T19:36:41Z

Small note...I agree with @antocuni about the event argument being deprecated. My IDE is yelling at me when it is used. 😀 Yes it is still implemented. But if it's a bad practice, it's a bad practice.

antocuni · 2022-10-17T08:17:14Z

Small note...I agree with @antocuni about the event argument being deprecated. My IDE is yelling at me when it is used. grinning Yes it is still implemented. But if it's a bad practice, it's a bad practice.

Just to be extra sure that we are talking about the same thing: you mean the event global variable such as in <button onclick="console.log(event)">, right?

pauleveritt · 2022-10-17T11:00:29Z

@antocuni Yes. I will generally wear the hat for "Good IDE and tooling integration" and this is one of those places.

marimeireles · 2023-02-13T17:35:02Z

I guess this will be fixed once #1200 is merged

WebReflection · 2024-01-22T15:35:56Z

I know in classic this discussion had reasons to exist but with current PyScript, thisis the contract:

Case 1: <button py-click="foo()">ClickMe</button>             NOT SUPPORTED
Case 2: <button py-click="foo">ClickMe</button>               WORKS

For the @when use case and explicit trigger we should have a different and well defined issue, imho, so I am closing this as it won't get fixed in classic and it's pointless to argue about this in current PyScript as we discussed this long time and the current state is not going to change.

dj-fiorex added needs-triage Issue needs triage type: bug Something isn't working labels Oct 6, 2022

JeffersGlass added waiting on reporter Further information is requested from the reported and removed type: bug Something isn't working needs-triage Issue needs triage labels Oct 6, 2022

marimeireles added tag: docs Related to the documentation backlog issue has been triaged but has not been earmarked for any upcoming release and removed waiting on reporter Further information is requested from the reported labels Oct 11, 2022

antocuni mentioned this issue Oct 14, 2022

<py-button> and <py-inputbox> should be killed, or at least they should not execute code #854

Closed

marimeireles mentioned this issue Oct 14, 2022

[DOCS] fix & event-handlers #852

Closed

This was referenced Oct 30, 2022

[User-friendliness] Event handler without the event parameter #905

Closed

[PROPOSAL] Python Plugin System #891

Closed

JeffersGlass mentioned this issue Nov 13, 2022

Deprecate py-button, py-inputbox, py-box and py-title #931

Merged

marimeireles mentioned this issue Feb 13, 2023

Marimeireles feat/intro handlers #1200

Closed

marimeireles mentioned this issue Mar 22, 2023

Add docs for py-event* #1300

Merged

3 tasks

JeffersGlass added the classic Issues only applicable to PyScript versions 2023.05.1 and earlier ("PyScript Classic") label Sep 15, 2023

WebReflection closed this as completed Jan 22, 2024

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Behaviour of py-*: how to pass event #835

Behaviour of py-*: how to pass event #835

dj-fiorex commented Oct 6, 2022

JeffersGlass commented Oct 6, 2022

dj-fiorex commented Oct 6, 2022

tedpatrick commented Oct 6, 2022

dj-fiorex commented Oct 6, 2022

JeffersGlass commented Oct 6, 2022 •

edited

tedpatrick commented Oct 6, 2022 •

edited

tedpatrick commented Oct 6, 2022

JeffersGlass commented Oct 6, 2022 •

edited

tedpatrick commented Oct 7, 2022

marimeireles commented Oct 7, 2022

tedpatrick commented Oct 12, 2022

pmp-p commented Oct 12, 2022 •

edited

antocuni commented Oct 12, 2022

pmp-p commented Oct 13, 2022 •

edited

antocuni commented Oct 13, 2022

tedpatrick commented Oct 13, 2022 via email

pmp-p commented Oct 13, 2022

antocuni commented Oct 13, 2022

JeffersGlass commented Oct 13, 2022 •

edited

dj-fiorex commented Oct 13, 2022

pauleveritt commented Oct 16, 2022

antocuni commented Oct 17, 2022 •

edited

pauleveritt commented Oct 17, 2022

marimeireles commented Feb 13, 2023

WebReflection commented Jan 22, 2024

Behaviour of py-*: how to pass event #835

Behaviour of py-*: how to pass event #835

Comments

dj-fiorex commented Oct 6, 2022

Checklist

What happened?

What browsers are you seeing the problem on? (if applicable)

Console info

Additional Context

JeffersGlass commented Oct 6, 2022

dj-fiorex commented Oct 6, 2022

tedpatrick commented Oct 6, 2022

dj-fiorex commented Oct 6, 2022

JeffersGlass commented Oct 6, 2022 • edited

tedpatrick commented Oct 6, 2022 • edited

tedpatrick commented Oct 6, 2022

JeffersGlass commented Oct 6, 2022 • edited

tedpatrick commented Oct 7, 2022

marimeireles commented Oct 7, 2022

tedpatrick commented Oct 12, 2022

pmp-p commented Oct 12, 2022 • edited

antocuni commented Oct 12, 2022

pmp-p commented Oct 13, 2022 • edited

antocuni commented Oct 13, 2022

tedpatrick commented Oct 13, 2022 via email

pmp-p commented Oct 13, 2022

antocuni commented Oct 13, 2022

JeffersGlass commented Oct 13, 2022 • edited

We need an easy way to subscribe to events in python. We need to support adding/removing these handlers at runtime (py-event is wired up once at startup)

We need to get the event object into python for event handlers

It isn't clear how to expose a python function in JS

The interesting part here is that these are actually independent of on[event] does not conflict with py-event or vice versa.

dj-fiorex commented Oct 13, 2022

pauleveritt commented Oct 16, 2022

antocuni commented Oct 17, 2022 • edited

pauleveritt commented Oct 17, 2022

marimeireles commented Feb 13, 2023

WebReflection commented Jan 22, 2024

JeffersGlass commented Oct 6, 2022 •

edited

tedpatrick commented Oct 6, 2022 •

edited

JeffersGlass commented Oct 6, 2022 •

edited

pmp-p commented Oct 12, 2022 •

edited

pmp-p commented Oct 13, 2022 •

edited

JeffersGlass commented Oct 13, 2022 •

edited

antocuni commented Oct 17, 2022 •

edited