Python object methods get lost somewhere in the JS side

[marimeireles]

Hey folks,
So this is a description of what I'm seeing in #1240 in a more comprehensible form.

The point of the PR is to separate event handling in two ways:

1. using the py-event-code tag to run non-callable code
2. using the py-event tag to run callable code

For 1 here is an example of a code that should work:

<br><button py-click-code="print('should work: this is a good use of py-click-code')" id="6">non_callable_no_dec py-click-code</button><

For 2 here is an example that should work:

<br><button py-click="no_event_dec" id="3">no_event_dec py-click</button><br>

With the impl. of no_event_dec being the following:

@when("click", id="3")
def no_event_dec():
    print(f"should work: I've clicked no_event_dec, and it ran with no arguements")

Currently, we're facing the following problem: every time we use the when decorator that's implemented in the following way in pyscript/__init__.py:

def when(event=None, id=None):
    """
    Decorates a function and passes py-* events to the decorated function
    The events might or not be an argument of the decorated function
    """

    def decorator(func):
        element = js.document.getElementById(id)
        sig = inspect.signature(func)

        # Function doesn't receive events
        if not sig.parameters:
            def wrapper(*args, **kwargs):
                func()
            proxy = create_proxy(wrapper)
            element.addEventListener(event, cast(wrapper, proxy))
        else:
            proxy = create_proxy(func)
            element.addEventListener(event, func)
    return decorator

We lost methods like __call__ from the function that we're decorating. The problem happens somewhere in the Python side not on the JS side with proxy conversion. The reason why I know that is because non-decorated code works fine:

<br><button py-click-code="missuse_no_event_no_dec" id="1">missuse_no_event_no_dec py-click-code</button><br>

And the definition of missuse_no_event_no_dec:

def missuse_no_event_no_dec():
    print(f"should error: I've clicked no_event_no_dec, and it ran with no arguements")

As you can see the code above should fail, because this is a callable being used with the py-event-code tag, and this code does fail.

However if you decorate this code:

@when("click", id="1")
def missuse_no_event_no_dec():
    print(f"should error: I've clicked no_event_no_dec, and it ran with no arguements")

It will succeed because in JS side this function will no longer be identified as callable. (and this shouldn't happen!)

I'm not sure what's wrong in the Python side. I've tried to use Pyodide's add_event_listener's but it also doesn't work. This function is even casting the obj to be a callable but even with that is not working.

If you run the examples in testing_event_interaction.html you'll see from my print statements that all functions are mistakenly identified as non-callable in the JS side, while in the Python side everything is working fine.

Marking @hoodmane here because I think he's the one that has better chances in knowing what's up? But please, if anyone feel inclined would love your help too.

[JeffersGlass]

Thanks for all your work on this @marimeireles - I'm digging through it now, just want to make sure I'm understanding the examples in testing_event_interaction.html correctly. Haven't gotten quite to the issue you asked about, with functions not appearing callable on the TS side, but a couple of initial comments:

---

<br><button py-click="no_event_dec" id="3">no_event_dec py-click</button><br>
<py-script>
  @when("click", id="3")
  def no_event_dec():
      print(f"should work: I've clicked no_event_dec, and it ran with no arguements")
</py-script>

This is redundant, right? There's no reason to use the @when decorator and py-[event] at the same time - they're both ways of setting up an event handler for a particular event on a specific object, one's just in Python and the other's in the HTML.

---

Smaller thing:

<!-- the reason why this prints is bc of the way we eval it to try to figure it out if it's callable or not
it always runs it with the eval() function
we need to find a new way of evaluating? -->
<br><button py-click="print('should error: this is a py-click misuse')" id="5">missuse_non_callable_no_dec py-click</button><br>

This is something that came up at the offsite; my personal feeling is that it's fine for the expression to produce side effects (like printing) for now, as long as it also shows an error, and we can improve the name resolution later if we decide it's necessary.

[marimeireles]

Smaller thing:

Yeah... This is another thing I've been thinking about how to fix and didn't come up with a solution yet..

This is redundant, right?

It's not necessary, I just wanted to make it clear by showing how maintaining all the other variables that this thing was failing on the python side only. Maybe it made it more confusing, though, sorry.

[hoodmane]

Is it possible that the problem is that you forgot to return the function from the decorator? I think a reasonable decorator should look as follows:

def when(event=None, id=None):
    def decorator(func):
        element = js.document.getElementById(id)
        sig = inspect.signature(func)

        # Function doesn't receive events
        if not sig.parameters:
            def wrapper(*args, **kwargs):
                func()
            proxy = create_proxy(wrapper)
            element.addEventListener(event, cast(wrapper, proxy))
        else:
            proxy = create_proxy(func)
            element.addEventListener(event, func)
        return func # <============================================ added this line
    return decorator

[marimeireles]

Ahhhr yesss
Hood
iou a drink of ur preference next time we meet.
event 2.
Thank you!