Merge pull request #292 from zauberzeug/log

Let ui.log hold a server-side copy of recent lines

nicegui/elements/log.js

@@ -5,6 +5,11 @@ export default {
       num_lines: 0,
     };
   },
+  mounted() {
+    const text = decodeURIComponent(this.lines);
+    this.$el.innerHTML = text;
+    this.num_lines = text ? text.split("\n").length : 0;
+  },
   methods: {
     push(line) {
       const decoded = decodeURIComponent(line);
@@ -22,5 +27,6 @@ export default {
   },
   props: {
     max_lines: Number,
+    lines: String,
   },
 };

nicegui/elements/log.py

@@ -1,3 +1,4 @@
+from collections import deque
 from typing import Optional
 
 from ..dependencies import register_component
@@ -17,8 +18,12 @@ class Log(Element):
         """
         super().__init__('log')
         self._props['max_lines'] = max_lines
+        self._props['lines'] = ''
         self.classes('border whitespace-pre font-mono')
         self.style('opacity: 1 !important; cursor: text !important')
+        self.lines: deque[str] = deque(maxlen=max_lines)
 
     def push(self, line: str) -> None:
+        self.lines.extend(line.splitlines())
+        self._props['lines'] = '\n'.join(self.lines)
         self.run_method('push', line)

tests/test_log.py

@@ -0,0 +1,26 @@
+from selenium.webdriver.common.by import By
+
+from nicegui import ui
+
+from .screen import Screen
+
+
+def test_log(screen: Screen):
+    log = ui.log(max_lines=3)
+    log.push('A')
+    log.push('B')
+    log.push('C')
+    log.push('D')
+
+    screen.open('/')
+    assert screen.selenium.find_element(By.ID, log.id).text == 'B\nC\nD'
+
+
+def test_log_with_newlines(screen: Screen):
+    log = ui.log(max_lines=3)
+    log.push('A')
+    log.push('B')
+    log.push('C\nD')
+
+    screen.open('/')
+    assert screen.selenium.find_element(By.ID, log.id).text == 'B\nC\nD'