reload page when new dependencies are added dynamically

nicegui/elements/chart.py

@@ -1,7 +1,9 @@
+import asyncio
 from typing import Dict
 
 import justpy as jp
 
+from ..task_logger import create_task
 from .element import Element
 
 jp.template_options['highcharts'] = False
@@ -14,9 +16,12 @@ class Chart(Element):
 
         An element to create a chart using `Highcharts <https://www.highcharts.com/>`_.
 
-        :param options: dictionary of highcharts options
+        :param options: dictionary of Highcharts options
         """
         view = jp.HighCharts(temp=False)
         view.options = self.options = jp.Dict(**options)
-        jp.template_options['highcharts'] = True
         super().__init__(view)
+
+        if not jp.template_options['highcharts'] and asyncio.get_event_loop().is_running():
+            create_task(self.page.run_javascript('location.reload()'))
+        jp.template_options['highcharts'] = True

nicegui/elements/element.py

@@ -6,7 +6,7 @@ import justpy as jp
 
 from .. import globals
 from ..binding import BindableProperty, bind_from, bind_to
-from ..page import get_current_view
+from ..page import Page, get_current_view
 from ..task_logger import create_task
 
 
@@ -27,7 +27,7 @@ class Element:
         self.parent_view.add(view)
         self.view = view
         assert len(self.parent_view.pages) == 1
-        self.page = list(self.parent_view.pages.values())[0]
+        self.page: Page = list(self.parent_view.pages.values())[0]
         self.view.add_page(self.page)
 
         self.visible = True

nicegui/elements/table.py

@@ -1,7 +1,9 @@
+import asyncio
 from typing import Dict
 
 import justpy as jp
 
+from ..task_logger import create_task
 from .element import Element
 
 jp.template_options['aggrid'] = False
@@ -18,5 +20,8 @@ class Table(Element):
         """
         view = jp.AgGrid(temp=False)
         view.options = self.options = jp.Dict(**options)
-        jp.template_options['aggrid'] = True
         super().__init__(view)
+
+        if not jp.template_options['aggrid'] and asyncio.get_event_loop().is_running():
+            create_task(self.page.run_javascript('location.reload()'))
+        jp.template_options['aggrid'] = True

nicegui/routes.py

@@ -67,14 +67,11 @@ def add_dependencies(py_filepath: str, dependencies: List[str] = []) -> None:
         return
     globals.dependencies[py_filepath] = dependencies
 
-    new_dependencies: List[str] = []
-
     vue_filepath = os.path.splitext(os.path.realpath(py_filepath))[0] + '.js'
     if vue_filepath not in jp.component_file_list:
         filename = os.path.basename(vue_filepath)
         jp.app.routes.insert(0, Route(f'/{filename}', lambda _: FileResponse(vue_filepath)))
         jp.component_file_list += [filename]
-        new_dependencies.append(filename)
 
     for dependency in dependencies:
         is_remote = dependency.startswith('http://') or dependency.startswith('https://')
@@ -85,19 +82,11 @@ def add_dependencies(py_filepath: str, dependencies: List[str] = []) -> None:
                 filepath = f'{os.path.dirname(vue_filepath)}/{src}'
                 route = Route(f'/{src}', lambda _, filepath=filepath: FileResponse(filepath))
                 jp.app.routes.insert(0, route)
-            new_dependencies.append(src)
 
     if asyncio.get_event_loop().is_running():
-        create_task(inject_dependencies(new_dependencies))
-
-
-async def inject_dependencies(dependencies: List[str]) -> None:
-    for page in get_current_view().pages.values():
-        assert isinstance(page, Page)
-        for src in dependencies:
-            await page.await_javascript(f'''
-            let script = document.createElement("script");
-            script.src = "{src}";
-            document.body.append(script);
-            ''')
-        await page.update()
+        # NOTE: if new dependencies are added after starting the server, we need to reload the page on connected clients
+        async def reload() -> None:
+            for page in get_current_view().pages.values():
+                assert isinstance(page, Page)
+                await page.await_javascript('location.reload()')
+        create_task(reload())