more auto-updates; add element.update()

main.py

@@ -221,10 +221,10 @@ with example(ui.number):
 with example(ui.color_input):
     color_label = ui.label('Change my color!')
     ui.color_input(label='Color', value='#000000',
-                   on_change=lambda e: ui.update(color_label.style(f'color:{e.value}')))
+                   on_change=lambda e: color_label.style(f'color:{e.value}'))
 
 with example(ui.color_picker):
-    picker = ui.color_picker(on_pick=lambda e: ui.update(button.style(f'background-color:{e.color}!important')))
+    picker = ui.color_picker(on_pick=lambda e: button.style(f'background-color:{e.color}!important'))
     button = ui.button(on_click=picker.open).props('icon=colorize')
 
 with example(ui.radio):
@@ -300,7 +300,7 @@ with example(ui.chart):
 
     def update():
         chart.options.series[0].data[:] = random(2)
-        ui.update(chart)
+        chart.update()
 
     chart = ui.chart({
         'title': False,
@@ -316,7 +316,7 @@ with example(ui.chart):
 with example(ui.table):
     def update():
         table.options.rowData[0].age += 1
-        ui.update(table)
+        table.update()
 
     table = ui.table({
         'columnDefs': [
@@ -438,7 +438,6 @@ with example(clear):
     def add_face():
         with container:
             ui.icon('face')
-        ui.update(container)
     add_face()
 
     ui.button('Add', on_click=add_face)
@@ -474,10 +473,10 @@ with example(ui.timer):
         ui.checkbox('active').bind_value(t, 'active')
 
     with ui.row():
-        def lazy_update():
+        def lazy_update() -> None:
             new_text = datetime.now().strftime('%X.%f')[:-5]
             if lazy_clock.text[:8] == new_text[:8]:
-                return False
+                return
             lazy_clock.text = new_text
         lazy_clock = ui.label()
         ui.timer(interval=0.1, callback=lazy_update)
@@ -499,7 +498,6 @@ with example(lifecycle):
         while True:
             count_label.text = str(count)
             count += 1
-            await row.view.update()
             await asyncio.sleep(1)
 
     ui.on_startup(counter())

nicegui/elements/color_input.py

@@ -2,7 +2,6 @@ from typing import Callable, Optional
 
 import justpy as jp
 
-from ..task_logger import create_task
 from .string_element import StringElement
 
 
@@ -36,16 +35,16 @@ class ColorInput(StringElement):
         self._icon_button.on('click', lambda *_: self.open() or False)
         self._icon_button.name_dict['color_input'].on('change', self.handle_change)
         self._icon_button.name_dict['color_input'].disable_input_event = True
-        self._icon_button.name_dict['popup'].on('input', lambda *_: create_task(view.update()) or False)
-        self._icon_button.name_dict['popup'].on('show', lambda *_: create_task(view.update()) or False)
-        self._icon_button.name_dict['popup'].on('hide', lambda *_: create_task(view.update()) or False)
+        self._icon_button.name_dict['popup'].on('input', lambda *_: self.update() or False)
+        self._icon_button.name_dict['popup'].on('show', lambda *_: self.update() or False)
+        self._icon_button.name_dict['popup'].on('hide', lambda *_: self.update() or False)
 
         super().__init__(view, value=value, on_change=on_change)
 
     def open(self):
         self._icon_button.name_dict['popup'].value = True
-        create_task(self.view.update())
+        self.update()
 
     def close(self):
         self.view.name_dict['popup'].value = False
-        create_task(self.view.update())
+        self.update()

nicegui/elements/color_picker.py

@@ -25,16 +25,16 @@ class ColorPicker(Element):
         view.name_dict['color_input'].on('change', handle_pick)
         view.name_dict['color_input'].disable_input_event = True
         view.name_dict['popup'].value = value
-        view.name_dict['popup'].on('input', lambda *_: create_task(view.update()) or False)
-        view.name_dict['popup'].on('show', lambda *_: create_task(view.update()) or False)
-        view.name_dict['popup'].on('hide', lambda *_: create_task(view.update()) or False)
+        view.name_dict['popup'].on('input', lambda *_: self.update() or False)
+        view.name_dict['popup'].on('show', lambda *_: self.update() or False)
+        view.name_dict['popup'].on('hide', lambda *_: self.update() or False)
 
         super().__init__(view)
 
     def open(self):
         self.view.name_dict['popup'].value = True
-        create_task(self.view.update())
+        self.update()
 
     def close(self):
         self.view.name_dict['popup'].value = False
-        create_task(self.view.update())
+        self.update()

nicegui/elements/colors.py

@@ -1,6 +1,3 @@
-import asyncio
-
-from ..task_logger import create_task
 from .custom_view import CustomView
 from .element import Element
 
@@ -37,5 +34,4 @@ class Colors(Element):
         """
         super().__init__(ColorsView(primary, secondary, accent, positive, negative, info, warning))
 
-        if asyncio.get_event_loop().is_running():
-            create_task(self.page.update())
+        self.update()

nicegui/elements/dialog.py

@@ -3,7 +3,6 @@ from typing import Any, Optional
 
 import justpy as jp
 
-from ..task_logger import create_task
 from .group import Group
 
 
@@ -25,11 +24,11 @@ class Dialog(Group):
 
     def open(self) -> None:
         self.view.value = True
-        create_task(self.view.update())
+        self.update()
 
     def close(self) -> None:
         self.view.value = False
-        create_task(self.view.update())
+        self.update()
 
     def __await__(self):
         self._submitted = asyncio.Event()

nicegui/elements/element.py

@@ -15,7 +15,7 @@ def _handle_visibility_change(sender: Element, visible: bool) -> None:
         asyncio.get_running_loop()  # NOTE: make sure we already have an event loop
     except RuntimeError:
         return
-    create_task(sender.view.update(), name='update view after visibility changed')
+    sender.update()
 
 
 class Element:
@@ -52,7 +52,7 @@ class Element:
     def classes(self, add: str = None, *, remove: str = None, replace: str = None):
         '''HTML classes to modify the look of the element.
         Every class in the `remove` parameter will be removed from the element.
-        Classes are seperated with a blank space.
+        Classes are separated with a blank space.
         This can be helpful if the predefined classes by NiceGUI are not wanted in a particular styling.
         '''
         class_list = [] if replace is not None else self.view.classes.split()
@@ -61,12 +61,13 @@ class Element:
         class_list += (replace or '').split()
         self.view.classes = ' '.join(class_list)
 
+        self.update()
         return self
 
     def style(self, add: str = None, *, remove: str = None, replace: str = None):
         '''CSS style sheet definitions to modify the look of the element.
         Every style in the `remove` parameter will be removed from the element.
-        Styles are seperated with a semicolon.
+        Styles are separated with a semicolon.
         This can be helpful if the predefined style sheet definitions by NiceGUI are not wanted in a particular styling.
         '''
         style_list = [] if replace is not None else self.view.style.split(';')
@@ -75,12 +76,13 @@ class Element:
         style_list += (replace or '').split(';')
         self.view.style = ';'.join(style_list)
 
+        self.update()
         return self
 
     def props(self, add: str = None, *, remove: str = None, replace: str = None):
         '''Quasar props https://quasar.dev/vue-components/button#design to modify the look of the element.
         Boolean props will automatically activated if they appear in the list of the `add` property.
-        Props are seperated with a blank space.
+        Props are separated with a blank space.
         Every prop passed to the `remove` parameter will be removed from the element.
         This can be helpful if the predefined props by NiceGUI are not wanted in a particular styling.
         '''
@@ -93,6 +95,7 @@ class Element:
             else:
                 setattr(self.view, prop, True)
 
+        self.update()
         return self
 
     def tooltip(self, text: str, *, props: str = ''):
@@ -104,4 +107,9 @@ class Element:
                 setattr(tooltip, prop, True)
         tooltip.add_page(self.page)
         self.view.add(tooltip)
+        self.update()
         return self
+
+    def update(self) -> None:
+        if asyncio.get_event_loop().is_running():
+            create_task(self.view.update())

nicegui/elements/group.py

@@ -3,7 +3,6 @@ from __future__ import annotations
 from typing import List
 
 import justpy as jp
-from nicegui.task_logger import create_task
 
 from ..binding import active_links, bindable_properties, bindings
 from ..globals import view_stack
@@ -18,6 +17,8 @@ class Group(Element):
 
     def __exit__(self, *_):
         view_stack.pop()
+        if len(view_stack) <= 1:
+            self.update()  # NOTE: update when we are back on top of the stack (only the first page is in view stack)
 
     def tight(self) -> Group:
         return self.classes(replace='').style(replace='')
@@ -59,4 +60,4 @@ class Group(Element):
                 del bindable_properties[(obj_id, name)]
 
         self.view.delete_components()
-        create_task(self.view.update())
+        self.update()

nicegui/elements/menu.py

@@ -1,6 +1,5 @@
 import justpy as jp
 
-from ..task_logger import create_task
 from .group import Group
 
 
@@ -19,8 +18,8 @@ class Menu(Group):
 
     def open(self):
         self.view.value = True
-        create_task(self.view.update())
+        self.update()
 
     def close(self):
         self.view.value = False
-        create_task(self.view.update())
+        self.update()

nicegui/elements/tree.py

@@ -2,7 +2,6 @@ from typing import Callable, Optional
 
 import justpy as jp
 from nicegui.events import ValueChangeEventArguments, handle_event
-from nicegui.task_logger import create_task
 
 from .element import Element
 
@@ -30,5 +29,5 @@ class Tree(Element):
             return handle_event(on_select, arguments)
 
         view.on('update:selected', process_event)
-        view.on('update:expanded', lambda *_: create_task(view.update()))
-        view.on('update:ticked', lambda *_: create_task(view.update()))
+        view.on('update:expanded', lambda *_: self.update())
+        view.on('update:ticked', lambda *_: self.update())

nicegui/elements/value_element.py

@@ -4,7 +4,6 @@ import justpy as jp
 
 from ..binding import BindableProperty, bind_from, bind_to
 from ..events import ValueChangeEventArguments, handle_event
-from ..task_logger import create_task
 from .element import Element
 
 
@@ -24,7 +23,7 @@ class ValueElement(Element):
 
     def handle_change(self, msg: Dict):
         self.value = msg['value']
-        create_task(self.view.update())
+        self.update()
         return False
 
     def bind_value_to(self, target_object, target_name, *, forward=lambda x: x):