Convert the most obvious components to the new dependency injection syntax.

examples/custom_vue_component/counter.py

@@ -1,9 +1,10 @@
+from pathlib import Path
 from typing import Callable, Optional
 
-from nicegui.dependencies import register_component
+from nicegui.dependencies import register_vue_component
 from nicegui.element import Element
 
-register_component('counter', __file__, 'counter.js')
+register_vue_component(name='counter', path=Path(__file__).parent.joinpath('counter.js'))
 
 
 class Counter(Element):
@@ -12,6 +13,7 @@ class Counter(Element):
         super().__init__('counter')
         self._props['title'] = title
         self.on('change', on_change)
+        self.use_component('counter')
 
     def reset(self) -> None:
         self.run_method('reset')

examples/map/leaflet.py

@@ -1,16 +1,18 @@
+from pathlib import Path
 from typing import Tuple
 
 from nicegui import ui
-from nicegui.dependencies import register_component
+from nicegui.dependencies import register_vue_component
 from nicegui.element import Element
 
-register_component('leaflet', __file__, 'leaflet.js')
+register_vue_component(name='leaflet', path=Path(__file__).parent.joinpath('leaflet.js'))
 
 
 class leaflet(Element):
 
     def __init__(self) -> None:
         super().__init__('leaflet')
+        self.use_component('leaflet')
         ui.add_head_html('<link href="https://unpkg.com/leaflet@1.6.0/dist/leaflet.css" rel="stylesheet"/>')
         ui.add_head_html('<script src="https://unpkg.com/leaflet@1.6.0/dist/leaflet.js"></script>')
 

examples/single_page_app/router.py

@@ -1,9 +1,10 @@
+from pathlib import Path
 from typing import Awaitable, Callable, Dict, Union
 
 from nicegui import background_tasks, ui
-from nicegui.dependencies import register_component
+from nicegui.dependencies import register_vue_component
 
-register_component('router_frame', __file__, 'router_frame.js')
+register_vue_component(name='router_frame', path=Path(__file__).parent.joinpath('router_frame.js'))
 
 
 class Router():
@@ -36,5 +37,5 @@ class Router():
         background_tasks.create(build())
 
     def frame(self) -> ui.element:
-        self.content = ui.element('router_frame').on('open', lambda msg: self.open(msg['args']))
+        self.content = ui.element('router_frame').on('open', lambda msg: self.open(msg['args'])).use_component('router_frame')
         return self.content

nicegui/element.py

@@ -271,8 +271,10 @@ class Element(Visibility):
         Can be overridden to perform cleanup.
         """
 
-    def use_component(self, name: str) -> None:
+    def use_component(self, name: str) -> Self:
         self.components.append(f'vue_{name}')
+        return self
 
-    def use_library(self, name: str) -> None:
+    def use_library(self, name: str) -> Self:
         self.libraries.append(f'lib_{name}')
+        return self

nicegui/elements/audio.py

@@ -1,9 +1,10 @@
 import warnings
+from pathlib import Path
 
-from ..dependencies import register_component
+from ..dependencies import register_vue_component
 from ..element import Element
 
-register_component('audio', __file__, 'audio.js')
+register_vue_component(name='audio', path=Path(__file__).parent.joinpath('audio.js'))
 
 
 class Audio(Element):
@@ -32,6 +33,7 @@ class Audio(Element):
         self._props['autoplay'] = autoplay
         self._props['muted'] = muted
         self._props['loop'] = loop
+        self.use_component('audio')
 
         if type:
             url = f'https://github.com/zauberzeug/nicegui/pull/624'

nicegui/elements/colors.py

@@ -1,7 +1,9 @@
-from ..dependencies import register_component
+from pathlib import Path
+
+from ..dependencies import register_vue_component
 from ..element import Element
 
-register_component('colors', __file__, 'colors.js')
+register_vue_component(name='colors', path=Path(__file__).parent.joinpath('colors.js'))
 
 
 class Colors(Element):
@@ -26,4 +28,5 @@ class Colors(Element):
         self._props['negative'] = negative
         self._props['info'] = info
         self._props['warning'] = warning
+        self.use_component('colors')
         self.update()

nicegui/elements/interactive_image.py

@@ -1,13 +1,14 @@
 from __future__ import annotations
 
+from pathlib import Path
 from typing import Callable, Dict, List, Optional
 
-from ..dependencies import register_component
+from ..dependencies import register_vue_component
 from ..events import MouseEventArguments, handle_event
 from .mixins.content_element import ContentElement
 from .mixins.source_element import SourceElement
 
-register_component('interactive_image', __file__, 'interactive_image.js')
+register_vue_component(name='interactive_image', path=Path(__file__).parent.joinpath('interactive_image.js'))
 
 
 class InteractiveImage(SourceElement, ContentElement):
@@ -33,6 +34,7 @@ class InteractiveImage(SourceElement, ContentElement):
         super().__init__(tag='interactive_image', source=source, content=content)
         self._props['events'] = events
         self._props['cross'] = cross
+        self.use_component('interactive_image')
 
         def handle_mouse(msg: Dict) -> None:
             if on_mouse is None:

nicegui/elements/keyboard.py

@@ -1,13 +1,14 @@
+from pathlib import Path
 from typing import Callable, Dict, List
 
 from typing_extensions import Literal
 
 from ..binding import BindableProperty
-from ..dependencies import register_component
+from ..dependencies import register_vue_component
 from ..element import Element
 from ..events import KeyboardAction, KeyboardKey, KeyboardModifiers, KeyEventArguments, handle_event
 
-register_component('keyboard', __file__, 'keyboard.js')
+register_vue_component(name='keyboard', path=Path(__file__).parent.joinpath('keyboard.js'))
 
 
 class Keyboard(Element):
@@ -35,6 +36,7 @@ class Keyboard(Element):
         self._props['repeating'] = repeating
         self._props['ignore'] = ignore
         self.on('key', self.handle_key)
+        self.use_component('keyboard')
 
     def handle_key(self, msg: Dict) -> None:
         if not self.active:

nicegui/elements/log.py

@@ -1,11 +1,11 @@
 from collections import deque
+from pathlib import Path
 from typing import Any, Optional
 
-from ..dependencies import register_component
+from ..dependencies import register_vue_component
 from ..element import Element
 
-register_component('log', __file__, 'log.js')
-
+register_vue_component(name='log', path=Path(__file__).parent.joinpath('log.js'))
 
 class Log(Element):
 
@@ -21,6 +21,7 @@ class Log(Element):
         self._props['lines'] = ''
         self._classes = ['nicegui-log']
         self.lines: deque[str] = deque(maxlen=max_lines)
+        self.use_component('log')
 
     def push(self, line: Any) -> None:
         line = str(line)

nicegui/elements/query.py

@@ -1,13 +1,13 @@
+from pathlib import Path
 from typing import Optional
 
 from typing_extensions import Self
 
-from ..dependencies import register_component
+from ..dependencies import register_vue_component
 from ..element import Element
 from ..globals import get_client
 
-register_component('query', __file__, 'query.js')
-
+register_vue_component(name='query', path=Path(__file__).parent.joinpath('query.js'))
 
 class Query(Element):
 
@@ -17,6 +17,7 @@ class Query(Element):
         self._props['classes'] = []
         self._props['style'] = {}
         self._props['props'] = {}
+        self.use_component('query')
 
     def classes(self, add: Optional[str] = None, *, remove: Optional[str] = None, replace: Optional[str] = None) \
             -> Self:

nicegui/elements/select.py

@@ -1,12 +1,13 @@
 import re
 from copy import deepcopy
+from pathlib import Path
 from typing import Any, Callable, Dict, List, Optional, Union
 
-from nicegui.dependencies import register_component
+from nicegui.dependencies import register_vue_component
 
 from .choice_element import ChoiceElement
 
-register_component('select', __file__, 'select.js')
+register_vue_component(name='select', path=Path(__file__).parent.joinpath('select.js'))
 
 
 class Select(ChoiceElement):
@@ -27,6 +28,7 @@ class Select(ChoiceElement):
         :param with_input: whether to show an input field to filter the options
         """
         super().__init__(tag='select', options=options, value=value, on_change=on_change)
+        self.use_component('select')
         if label is not None:
             self._props['label'] = label
         if with_input:

nicegui/elements/video.py

@@ -1,9 +1,10 @@
 import warnings
+from pathlib import Path
 
-from ..dependencies import register_component
+from ..dependencies import register_vue_component
 from ..element import Element
 
-register_component('video', __file__, 'video.js')
+register_vue_component(name='video', path=Path(__file__).parent.joinpath('video.js'))
 
 
 class Video(Element):
@@ -32,6 +33,7 @@ class Video(Element):
         self._props['autoplay'] = autoplay
         self._props['muted'] = muted
         self._props['loop'] = loop
+        self.use_component('video')
 
         if type:
             url = f'https://github.com/zauberzeug/nicegui/pull/624'

website/intersection_observer.py

@@ -1,10 +1,11 @@
+from pathlib import Path
 from typing import Callable
 
-from nicegui.dependencies import register_component
+from nicegui.dependencies import register_vue_component
 from nicegui.element import Element
 from nicegui.events import EventArguments, handle_event
 
-register_component('intersection_observer', __file__, 'intersection_observer.js')
+register_vue_component(name='intersection_observer', path=Path(__file__).parent.joinpath('intersection_observer.js'))
 
 
 class IntersectionObserver(Element):
@@ -14,6 +15,7 @@ class IntersectionObserver(Element):
         self.on_intersection = on_intersection
         self.active = True
         self.on('intersection', self.handle_intersection)
+        self.use_component('intersection_observer')
 
     def handle_intersection(self, _) -> None:
         self.run_method('stop')