@vaadin/component-base 25.2.7 → 25.2.8

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vaadin/component-base",
-  "version": "25.2.7",
+  "version": "25.2.8",
   "publishConfig": {
     "access": "public"
   },
@@ -38,11 +38,11 @@
     "lit": "^3.0.0"
   },
   "devDependencies": {
-    "@vaadin/chai-plugins": "~25.2.7",
-    "@vaadin/test-runner-commands": "~25.2.7",
+    "@vaadin/chai-plugins": "~25.2.8",
+    "@vaadin/test-runner-commands": "~25.2.8",
     "@vaadin/testing-helpers": "^2.0.0",
     "sinon": "^22.0.0"
   },
   "customElements": "custom-elements.json",
-  "gitHead": "14be1af674f3968cce68c6eb4742340694c4a949"
+  "gitHead": "46ec4be23967061d203ca4dad6e7b8291d4edd9c"
 }

package/src/define.js

@@ -13,7 +13,7 @@ function dashToCamelCase(dash) {
 
 const experimentalMap = {};
 
-export function defineCustomElement(CustomElement, version = '25.2.7') {
+export function defineCustomElement(CustomElement, version = '25.2.8') {
   Object.defineProperty(CustomElement, 'version', {
     get() {
       return version;

package/src/slot-observer.d.ts

@@ -14,12 +14,18 @@
  * bubbling to it and diffs the **union** of `assignedNodes({ flatten: true })`
  * every descendant `<slot>`. Cross-slot reassignment of the same node does
  * not change the union and therefore fires no callback.
+ *
+ * The initial pass runs in a microtask by default. Use the `syncInitial` option
+ * when the callback sets state that affects the layout of the component, so that
+ * it has its final size once connected. Otherwise consumers that measure it
+ * synchronously, such as auto-width columns in `<vaadin-grid>`, would measure the
+ * component before that state is applied.
  */
 export class SlotObserver {
   constructor(
     target: HTMLSlotElement | DocumentFragment,
     callback: (info: { addedNodes: Node[]; currentNodes: Node[]; movedNodes: Node[]; removedNodes: Node[] }) => void,
-    forceInitial?: boolean,
+    options?: { forceInitial?: boolean; syncInitial?: boolean },
   );
 
   readonly target: HTMLSlotElement | DocumentFragment;

package/src/slot-observer.js

@@ -14,9 +14,20 @@
  * bubbling to it and diffs the **union** of `assignedNodes({ flatten: true })`
  * across every descendant `<slot>`. Cross-slot reassignment of the same node
  * does not change the union and therefore fires no callback.
+ *
+ * The initial pass runs in a microtask by default. Use the `syncInitial` option
+ * when the callback sets state that affects the layout of the component, so that
+ * it has its final size once connected. Otherwise consumers that measure it
+ * synchronously, such as auto-width columns in `<vaadin-grid>`, would measure the
+ * component before that state is applied.
  */
 export class SlotObserver {
-  constructor(target, callback, forceInitial) {
+  /**
+   * @param {HTMLSlotElement | DocumentFragment} target
+   * @param {Function} callback
+   * @param {{ forceInitial?: boolean, syncInitial?: boolean }} options
+   */
+  constructor(target, callback, options = {}) {
     /** @type {HTMLSlotElement | DocumentFragment} */
     this.target = target;
 
@@ -24,7 +35,7 @@ export class SlotObserver {
     this.callback = callback;
 
     /** @type {boolean} */
-    this.forceInitial = forceInitial;
+    this.forceInitial = options.forceInitial;
 
     /** @type {Node[]} */
     this._storedNodes = [];
@@ -40,7 +51,12 @@ export class SlotObserver {
     };
 
     this.connect();
-    this._schedule();
+
+    if (options.syncInitial) {
+      this.flush();
+    } else {
+      this._schedule();
+    }
   }
 
   /**
@@ -69,7 +85,11 @@ export class SlotObserver {
       this._scheduled = true;
 
       queueMicrotask(() => {
-        this.flush();
+        // Skip if the nodes have already been processed by an explicit `flush()`
+        // in the meantime, to avoid running the diff a second time for nothing.
+        if (this._scheduled) {
+          this.flush();
+        }
       });
     }
   }