Use worker.sync for pubsub

examples/custom.py

@@ -11,7 +11,7 @@ def __init__(self, src, label):
                 ltk.Image(src).width(196),
                 ltk.Text(label).width("100%").css("text-align", "center")
             )
-            self.element.css("border", "2px solid orange")
+            self.css("border", "2px solid orange")
 
 
     return (

examples/pubsub.py

@@ -2,6 +2,11 @@
 
 import ltk
 import random
+from polyscript import XWorker
+
+print("launch worker")
+worker = XWorker("/examples/worker.py", config="/examples/worker.toml", type="micropython")
+print("worker", worker)
 
 fan = ltk.Preformatted("")
 
@@ -18,6 +23,7 @@ def publish(event=None):
     ]) 
     ltk.publish(
         "Influencer",   # the sender
+        "Fan",          # the intended receiver
         "message",      # the subscription topic
         message         # the message to send 
     )
@@ -34,6 +40,7 @@ def create():
             ltk.Important("What every fan sees:"),
             ltk.HBox(
                 fan
+                    .attr("id", "fan")
                     .css("border", "1px solid gray")
                     .css("overflow", "hidden")
                     .width(200)

examples/worker.py

@@ -0,0 +1,12 @@
+import ltk
+from polyscript import xworker # type: ignore
+
+ltk.find("#fan").append("Worker is running...")
+
+subscribe = xworker.sync.subscribe
+publish = xworker.sync.publish
+
+def handle_message(message):
+    ltk.find("#fan").append(message)
+
+subscribe("Worker-Fan", "message", handle_message)

ltk/jquery.py

@@ -123,8 +123,13 @@ def push_state(url):
     window.history.pushState(None, "", url)
 
 
-def inject_script(url):
-    create("<script>").attr("src", url).appendTo(window.document.head)
+def inject_script(url, type=None, worker=None):
+    script = create("<script>").attr("src", url)
+    if type:
+        script.attr("type", type)
+    if worker:
+        script.attr("worker", "")
+    script.appendTo(window.document.head)
 
 
 def inject_css(url):

ltk/logger.py

@@ -46,7 +46,7 @@ def resize(self):
 
     def _add_table(self):
         self.selector = ltk.find('#ltk-log-level')
-        self.element.css("opacity", 0)
+        self.opacity(0)
         ltk.VBox(
             ltk.HBox(
                 ltk.Text().text("When"),
@@ -154,8 +154,9 @@ def _check_network(self, message):
             post = "POST:" if "?_=p&" in name else ""
             sender = "Application" if post else "Network"
             receiver = "Network" if post else "Application"
+            io = "POST" if post else "GET"
             if type == "Xmlhttprequest":
-                self.sequence_ui.log(sender, receiver, name, f"{decodedSize}")
+                self.sequence_ui.log(io, sender, receiver, name, f"{decodedSize}")
 
     def _check_events(self, message):
         print(message)
@@ -238,8 +239,8 @@ def __init__(self, sender, receiver, topic, data, index):
 
     def set_index(self, index):
         self.index = index
-        self.css("display", "block")
-        self.set_position()
+        self.display("block")
+        ltk.schedule(self.set_position)
 
     def set_position(self):
         left = min(self.sender.title.position().left, self.receiver.title.position().left)
@@ -249,8 +250,8 @@ def set_position(self):
         height = self.sender.title.height()
 
         self.width(right - left)
-        self.css("left", round(left + width / 2 + 8))
-        self.css("top", round(top + height * 2 + 26 + self.index * 32))
+        self.left(round(left + width / 2 + 8))
+        self.top(round(top + height * 2 + 26 + self.index * 32))
         self.label.css("opacity", 0).width(self.width())
         self.label.animate(ltk.to_js({ "opacity": 1 }), 1500)
         self.dot.set_position()
@@ -265,7 +266,8 @@ def __init__(self, sender, receiver, topic, data, line, reverse):
         self.attr("title", f"{sender.text()} => {receiver.text()} - {topic}: {data}")
         self.reverse = reverse
         if reverse:
-            self.css("left", "").css("right", 0)
+            self.left("").css("right", 0)
+        self.addClass("ltk-arrow ltk-arrow-left" if reverse else "ltk-arrow ltk-arrow-right")
         self.line = line
 
     def get_start(self):
@@ -275,9 +277,9 @@ def get_stop(self):
         return -5 if self.reverse else self.line.width() - 5
 
     def set_position(self):
-        self.css("left", self.get_start())
+        self.left(self.get_start())
         if self.animated:
-            self.css("left", self.get_stop())
+            self.left(self.get_stop())
         else:
             self.animated = True
             self.animate(ltk.to_js({ "left": self.get_stop() }), 1000)
@@ -299,6 +301,9 @@ def __init__(self):
         ltk.observe(self.element, self.changed)
         self.last_width = self.element.width()
         self.on("resize", lambda event, ui: self.resize())
+        self.set_width()
+
+    def set_width(self):
         self.width(getattr(ltk.local_storage, "log-sequence-width", None) or 300)
 
     def resize(self):
@@ -312,14 +317,15 @@ def changed(self, element=None, force=False):
             for call in self.calls:
                 call.set_position()
 
-    def log(self, sender_name, receiver_name, topic, data):
+    def log(self, type, sender_name, receiver_name, topic, data):
         self.element.width("100%")
         sender = self.get_component(sender_name)
         receiver = self.get_component(receiver_name)
-        call = _Call(sender, receiver, topic, data, len(self.calls))
+        call = _Call(sender, receiver, f"{type}:{topic}", data, len(self.calls))
         self.calls.append(call)
         self.append(call.element)
         self.filter_messages()
+        self.set_width()
         ltk.schedule(lambda: self.changed(force=True), 1.5)
 
     def clear(self):