replace element.components with element.component

nicegui/dependencies.py

@@ -139,7 +139,8 @@ def generate_resources(prefix: str, elements: List[Element]) -> Tuple[List[str],
                 if not library.expose:
                     js_imports.append(f'import "{prefix}/_nicegui/{__version__}/libraries/{library.key}";')
                 done_libraries.add(library.key)
-        for component in element.components:
+        if element.component:
+            component = element.component
             if component.key not in done_components and component.path.suffix.lower() == '.js':
                 js_imports.extend([
                     f'import {{ default as {component.name} }} from "{prefix}/_nicegui/{__version__}/components/{component.key}";',

nicegui/element.py

@@ -24,7 +24,7 @@ PROPS_PATTERN = re.compile(r'([:\w\-]+)(?:=(?:("[^"\\]*(?:\\.[^"\\]*)*")|([\w\-.
 
 
 class Element(Visibility):
-    components: List[JsComponent] = []
+    component: Optional[JsComponent] = None
     libraries: List[Library] = []
     extra_libraries: List[Library] = []
     exposed_libraries: List[Library] = []
@@ -42,7 +42,7 @@ class Element(Visibility):
         self.client = _client or globals.get_client()
         self.id = self.client.next_element_id
         self.client.next_element_id += 1
-        self.tag = tag if tag else self.components[0].tag if self.components else 'div'
+        self.tag = tag if tag else self.component.tag if self.component else 'div'
         self._classes: List[str] = []
         self._style: Dict[str, str] = {}
         self._props: Dict[str, Any] = {'key': self.id}  # HACK: workaround for #600 and #898
@@ -72,7 +72,7 @@ class Element(Visibility):
                           ) -> None:
         super().__init_subclass__()
         base = Path(inspect.getfile(cls)).parent
-        cls.components = [register_vue_component(Path(component), base)] if component else []
+        cls.component = register_vue_component(Path(component), base) if component else None
         cls.libraries = [register_library(Path(library), base) for library in libraries]
         cls.extra_libraries = [register_library(Path(library), base) for library in extra_libraries]
         cls.exposed_libraries = [register_library(Path(library), base, expose=True) for library in exposed_libraries]
@@ -115,8 +115,17 @@ class Element(Visibility):
             'text': self._text,
             'slots': self._collect_slot_dict(),
             'events': [listener.to_dict() for listener in self._event_listeners.values()],
-            'components': [{'key': c.key, 'name': c.name, 'tag': c.tag} for c in self.components],
-            'libraries': [{'key': l.key, 'name': l.name} for l in self.libraries],
+            'component': {
+                'key': self.component.key,
+                'name': self.component.name,
+                'tag': self.component.tag
+            } if self.component else None,
+            'libraries': [
+                {
+                    'key': library.key,
+                    'name': library.name,
+                } for library in self.libraries
+            ],
         }
 
     @staticmethod

nicegui/templates/index.html

@@ -105,7 +105,7 @@
         }
 
         // @todo: Try avoid this with better handling of initial page load.
-        element.components.forEach((component) => loaded_components.add(component.name));
+        if (element.component) loaded_components.add(element.component.name);
         element.libraries.forEach((library) => loaded_libraries.add(library.name));
 
         const props = {
@@ -190,12 +190,10 @@
       }
 
       async function loadDependencies(element) {
-        for (const {name, key, tag} of element.components) {
-          if (loaded_components.has(name)) continue;
-          if (key.endsWith('.vue')) continue;
-          const component = (await import(`{{ prefix | safe }}/_nicegui/{{version}}/components/${key}`)).default;
-          app = app.component(tag, component);
-          loaded_components.add(name);
+        if (element.component && !loaded_components.has(element.component.name) && !element.component.key.endsWith('.vue')) {
+          const component = (await import(`{{ prefix | safe }}/_nicegui/{{version}}/components/${element.component.key}`)).default;
+          app = app.component(element.component.tag, component);
+          loaded_components.add(element.component.name);
         }
         for (const {name, key} of element.libraries) {
           if (loaded_libraries.has(name)) continue;