refactor: force Lit to perform first render synchronously (#8290)

vaadin · Dec 13, 2024 · f8ee0ef · f8ee0ef
1 parent 885d7e9
commit f8ee0ef
Show file tree

Hide file tree

Showing 25 changed files with 174 additions and 196 deletions.
diff --git a/packages/combo-box/src/vaadin-combo-box-mixin.js b/packages/combo-box/src/vaadin-combo-box-mixin.js
@@ -543,17 +543,6 @@ export const ComboBoxMixin = (subclass) =>
           theme,
           itemClassNameGenerator,
         });
-
-        // NOTE: in PolylitMixin, setProperties() waits for `hasUpdated` to be set.
-        // This means for the first opening, properties won't be set synchronously.
-        // Call `performUpdate()` in this case to mimic the Polymer version logic.
-        if (scroller.performUpdate && !scroller.hasUpdated) {
-          try {
-            scroller.performUpdate();
-          } catch (_) {
-            // Suppress errors in synchronous tests for pre-opened combo-box.
-          }
-        }
       }
     }
 

diff --git a/packages/combo-box/src/vaadin-combo-box-scroller-mixin.js b/packages/combo-box/src/vaadin-combo-box-scroller-mixin.js
@@ -329,12 +329,6 @@ export const ComboBoxScrollerMixin = (superClass) =>
         el.className = '';
       }
 
-      // NOTE: in PolylitMixin, setProperties() waits for `hasUpdated` to be set.
-      // However, this causes issues with virtualizer. So we enforce sync update.
-      if (el.performUpdate && !el.hasUpdated) {
-        el.performUpdate();
-      }
-
       el.id = `${this.__hostTagName}-item-${index}`;
       el.setAttribute('role', index !== undefined ? 'option' : false);
       el.setAttribute('aria-selected', selected.toString());

diff --git a/packages/component-base/src/polylit-mixin.js b/packages/component-base/src/polylit-mixin.js
@@ -195,6 +195,12 @@ const PolylitMixinImplementation = (superclass) => {
       return result;
     }
 
+    static get polylitConfig() {
+      return {
+        asyncFirstRender: false,
+      };
+    }
+
     constructor() {
       super();
       this.__hasPolylitMixin = true;
@@ -214,6 +220,11 @@ const PolylitMixinImplementation = (superclass) => {
         parentHost.$ ||= {};
         parentHost.$[this.id] = this;
       }
+
+      const { polylitConfig } = this.constructor;
+      if (!this.hasUpdated && !polylitConfig.asyncFirstRender) {
+        this.performUpdate();
+      }
     }
 
     /** @protected */