google / mesop

Rapidly build AI apps in Python
https://google.github.io/mesop/
Apache License 2.0
5.24k stars 248 forks source link

Allow registration of javascript snippets #687

Open richard-to opened 1 month ago

richard-to commented 1 month ago

Similar to how we can register javascript via web components, I think it would be nice to be able to register javascript functions that could be called by reference.

One way could be to call them as a commands (examples, focus input, Google analytics track click).

Another use case could be to pass custom rendering functions / filtering logic for tables column rendering or say autocomplete filtering logic. In this case, I don't we'd be able to call them as commands. We'd need a way to reference them, but also to know what parameters could be passed in. Maybe the components could define expected interfaces for the functions.

Another thought is I wondering if it would be possible add custom rendering via ng template, but I think that use case may not be easy to handle since these usually come as a html files, so we'd then need the ability to register html snippets as well.

richard-to commented 1 month ago

I think another good use of javascript snippets, which I think we discussed briefly yesterday was the case of a non-blocking operations, such as the timer you mentioned. But I guess the timer could be a web component.

This could also be applied to something like the custom snackbar. Right now it uses the yield and time out, but this blocks the UI. So if we could register a javascript snippet to hide the snackbar after some time, that could be nice. Though I guess one workaround is to use a slotted web component that could send an event after X seconds elapses.

with timed_faded(seconds=2):
   snackbar()

I guess you could also implement hot keys on slotted sections. So it's possible that "invisible" components could be used to implement some javascript snippet use cases via event propagation and bubbling.

with hot_keys(...):
   me.input()