Update the new elements to the dependency system.

nicegui/element.py

@@ -93,6 +93,8 @@ class Element(Visibility):
             'text': self._text,
             'slots': self._collect_slot_dict(),
             'events': [listener.to_dict() for listener in self._event_listeners.values()],
+            'libraries': self.libraries,
+            'components': self.components
         }
 
     @staticmethod

nicegui/elements/chat_message.py

@@ -1,9 +1,10 @@
+from pathlib import Path
 from typing import Optional
 
-from ..dependencies import register_component
+from ..dependencies import register_vue_component
 from ..element import Element
 
-register_component('chat_message', __file__, 'chat_message.js')
+register_vue_component(name='chat_message', path=Path(__file__).parent.joinpath('chat_message.js'))
 
 
 class ChatMessage(Element):
@@ -38,3 +39,4 @@ class ChatMessage(Element):
         if avatar is not None:
             self._props['avatar'] = avatar
         self._props['sent'] = sent
+        self.use_component('chat_message')

nicegui/elements/dark_mode.py

@@ -1,9 +1,10 @@
+from pathlib import Path
 from typing import Optional
 
-from ..dependencies import register_component
+from ..dependencies import register_vue_component
 from .mixins.value_element import ValueElement
 
-register_component('dark_mode', __file__, 'dark_mode.js')
+register_vue_component(name='dark_mode', path=Path(__file__).parent.joinpath('dark_mode.js'))
 
 
 class DarkMode(ValueElement):
@@ -20,6 +21,7 @@ class DarkMode(ValueElement):
         :param value: Whether dark mode is enabled. If None, dark mode is set to auto.
         """
         super().__init__(tag='dark_mode', value=value, on_value_change=None)
+        self.use_component('dark_mode')
 
     def enable(self) -> None:
         """Enable dark mode."""

nicegui/elements/upload.py

@@ -1,13 +1,14 @@
+from pathlib import Path
 from typing import Callable, Optional
 
 from fastapi import Request, Response
 
-from ..dependencies import register_component
+from ..dependencies import register_vue_component
 from ..events import EventArguments, UploadEventArguments, handle_event
 from ..nicegui import app
 from .mixins.disableable_element import DisableableElement
 
-register_component('upload', __file__, 'upload.js')
+register_vue_component(name='upload', path=Path(__file__).parent.joinpath('upload.js'))
 
 
 class Upload(DisableableElement):
@@ -40,6 +41,7 @@ class Upload(DisableableElement):
         self._props['label'] = label
         self._props['auto-upload'] = auto_upload
         self._props['url'] = f'/_nicegui/client/{self.client.id}/upload/{self.id}'
+        self.use_component('upload')
 
         if max_file_size is not None:
             self._props['max-file-size'] = max_file_size

nicegui/functions/refreshable.py

@@ -1,13 +1,14 @@
+from pathlib import Path
 from typing import Any, Callable, Dict, List, Tuple
 
 from typing_extensions import Self
 
 from .. import background_tasks, globals
-from ..dependencies import register_component
+from ..dependencies import register_vue_component
 from ..element import Element
 from ..helpers import is_coroutine
 
-register_component('refreshable', __file__, 'refreshable.js')
+register_vue_component(name='refreshable', path=Path(__file__).parent.joinpath('refreshable.js'))
 
 
 class refreshable:
@@ -30,6 +31,7 @@ class refreshable:
         self.prune()
         with Element('refreshable') as container:
             self.containers.append((container, args, kwargs))
+            container.use_component('refreshable')
             return self.func(*args, **kwargs) if self.instance is None else self.func(self.instance, *args, **kwargs)
 
     def refresh(self) -> None: