Skip to content

JS bidirectionnal (@expose)

Sometimes, when using a JS lib, with heavy/bidirectionnal interactions : you 'll need to call js and receive events from JS. You can do that by using a @expose decorator.

Here is a "audio player" tag, which expose a python "play' method, and a "event" method (whil will be decorated) to receive event from the js side. Here is the best way to do it :

from htag import Tag, expose

class APlayer(Tag.div):
    statics=Tag.script(_src="https://cdnjs.cloudflare.com/ajax/libs/howler/2.2.4/howler.min.js")

    def init(self):
        self.js="""

self.play= function(url) {
    if(this._hp) {
        this._hp.stop();
        this._hp.unload();
    }

    this._hp = new Howl({
      src: [url],
      autoplay: true,
      loop: false,
      volume: 1,
      onend: function() {
        self.event("end",url);
      }
    });

}
    """ % self.bind.event(b"args")

    def play(self,url):
        self.call( f"self.play(`{url}`)" )

    @expose
    def event(self,name,url):
        self+=f"EVENT: {name} {url}"