start to implement a custom log component with incremental updates

nicegui/elements/custom_view.py

@@ -17,9 +17,7 @@ class CustomView(jp.JustpyBaseComponent):
         self.classes = ''
         self.options = jp.Dict(**options)
 
-        super().__init__()
-
-        self.initialize(temp=False)
+        super().__init__(temp=False)
 
     def add_page(self, wp: jp.WebPage):
 

nicegui/elements/log.js

@@ -0,0 +1,18 @@
+var lines = [];
+
+Vue.component("log", {
+  template: `<div v-bind:id="jp_props.id">Hello!</div>`,
+  mounted() {
+    comp_dict[this.$props.jp_props.id] = this;
+  },
+  methods: {
+    push(line) {
+      lines.push(line);
+      document.getElementById(this.$props.jp_props.id).innerText = lines;
+    },
+  },
+  updated() {},
+  props: {
+    jp_props: Object,
+  },
+});

nicegui/elements/log.py

@@ -0,0 +1,23 @@
+import asyncio
+from justpy.htmlcomponents import WebPage
+from .custom_view import CustomView
+from .element import Element
+
+class LogView(CustomView):
+
+    def __init__(self):
+
+        super().__init__('log', __file__)
+
+class Log(Element):
+
+    def __init__(self):
+
+        super().__init__(LogView())
+
+    async def push(self, line: str):
+
+        await asyncio.gather(*[
+            self.view.run_method(f'push("{line}")', socket)
+            for socket in WebPage.sockets[Element.wp.page_id].values()
+        ])

nicegui/ui.py

@@ -13,6 +13,7 @@ class Ui:
     from .elements.html import Html as html
     from .elements.label import Label as label
     from .elements.link import Link as link
+    from .elements.log import Log as log
     from .elements.markdown import Markdown as markdown
     from .elements.number import Number as number
     from .elements.radio import Radio as radio