Reduce payload (#2702)

* reduce payload by excluding empty fields from element dictionary

* set "key" prop on the client

* tiny fix

* move children of default slot out of slot dictionary

* remove "id" from payload

nicegui/element.py

@@ -82,7 +82,7 @@ class Element(Visibility):
         self._classes.extend(self._default_classes)
         self._style: Dict[str, str] = {}
         self._style.update(self._default_style)
-        self._props: Dict[str, Any] = {'key': self.id}  # HACK: workaround for #600 and #898
+        self._props: Dict[str, Any] = {}
         self._props.update(self._default_props)
         self._event_listeners: Dict[str, EventListener] = {}
         self._text: Optional[str] = None
@@ -182,31 +182,41 @@ class Element(Visibility):
 
     def _collect_slot_dict(self) -> Dict[str, Any]:
         return {
-            name: {'template': slot.template, 'ids': [child.id for child in slot]}
+            name: {
+                'ids': [child.id for child in slot],
+                **({'template': slot.template} if slot.template is not None else {}),
+            }
             for name, slot in self.slots.items()
+            if slot != self.default_slot
         }
 
     def _to_dict(self) -> Dict[str, Any]:
         return {
-            'id': self.id,
             'tag': self.tag,
-            'class': self._classes,
-            'style': self._style,
-            'props': self._props,
-            'text': self._text,
-            'slots': self._collect_slot_dict(),
-            'events': [listener.to_dict() for listener in self._event_listeners.values()],
-            '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
-            ],
+            **({'text': self._text} if self._text is not None else {}),
+            **{
+                key: value
+                for key, value in {
+                    'class': self._classes,
+                    'style': self._style,
+                    'props': self._props,
+                    'slots': self._collect_slot_dict(),
+                    'children': [child.id for child in self.default_slot.children],
+                    'events': [listener.to_dict() for listener in self._event_listeners.values()],
+                    '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
+                    ],
+                }.items()
+                if value
+            },
         }
 
     @staticmethod

nicegui/templates/index.html

@@ -139,13 +139,23 @@
             return;
         }
 
+        element.class ??= [];
+        element.style ??= {};
+        element.props ??= {};
+        element.text ??= null;
+        element.slots ??= {};
+        element.events ??= [];
+        element.component ??= null;
+        element.libraries ??= [];
+
         // @todo: Try avoid this with better handling of initial page load.
         if (element.component) loaded_components.add(element.component.name);
         element.libraries.forEach((library) => loaded_libraries.add(library.name));
 
         const props = {
-          id: 'c' + element.id,
-          ref: 'r' + element.id,
+          id: 'c' + id,
+          ref: 'r' + id,
+          key: id,  // HACK: workaround for #600 and #898
           class: element.class.join(' ') || undefined,
           style: Object.entries(element.style).reduce((str, [p, val]) => `${str}${p}:${val};`, '') || undefined,
           ...element.props,
@@ -172,7 +182,7 @@
           else {
             handler = (...args) => {
               const data = {
-                id: element.id,
+                id: id,
                 client_id: window.client_id,
                 listener_id: event.listener_id,
                 args: stringifyEventArgs(args, event.args),
@@ -194,7 +204,11 @@
           }
         });
         const slots = {};
-        Object.entries(element.slots).forEach(([name, data]) => {
+        const element_slots = {
+          default: { ids: element.children || [] },
+          ...element.slots,
+        };
+        Object.entries(element_slots).forEach(([name, data]) => {
           slots[name] = (props) => {
             const rendered = [];
             if (data.template) {
@@ -255,10 +269,12 @@
             loaded_components.add(name);
           }
         }
-        for (const {name, key} of element.libraries) {
-          if (loaded_libraries.has(name)) continue;
-          await import(`{{ prefix | safe }}/_nicegui/{{version}}/libraries/${key}`);
-          loaded_libraries.add(name);
+        if (element.libraries) {
+          for (const {name, key} of element.libraries) {
+            if (loaded_libraries.has(name)) continue;
+            await import(`{{ prefix | safe }}/_nicegui/{{version}}/libraries/${key}`);
+            loaded_libraries.add(name);
+          }
         }
       }
 
@@ -311,10 +327,10 @@
                   delete this.elements[id];
                   continue;
                 }
-                if (element.component || element.libraries.length > 0) {
+                if (element.component || element.libraries) {
                   await loadDependencies(element);
                 }
-                this.elements[element.id] = element;
+                this.elements[id] = element;
               }
             },
             run_javascript: (msg) => runJavascript(msg['code'], msg['request_id']),