@vaadin/component-base - npm Package Compare versions

Comparing version 25.2.7 to 25.2.8

package.json

 {
   "name": "@vaadin/component-base",
-  "version": "25.2.7",
+  "version": "25.2.8",
   "publishConfig": {
@@ -41,4 +41,4 @@ "access": "public"
   "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",
@@ -48,3 +48,3 @@ "sinon": "^22.0.0"
   "customElements": "custom-elements.json",
-  "gitHead": "14be1af674f3968cce68c6eb4742340694c4a949"
+  "gitHead": "46ec4be23967061d203ca4dad6e7b8291d4edd9c"
 }

src/define.js

@@ -16,3 +16,3 @@ /**
 
-export function defineCustomElement(CustomElement, version = '25.2.7') {
+export function defineCustomElement(CustomElement, version = '25.2.8') {
   Object.defineProperty(CustomElement, 'version', {
@@ -19,0 +19,0 @@ get() {

src/slot-observer.d.ts

@@ -17,2 +17,8 @@ /**
  * 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.
  */
@@ -23,3 +29,3 @@ export class SlotObserver {
     callback: (info: { addedNodes: Node[]; currentNodes: Node[]; movedNodes: Node[]; removedNodes: Node[] }) => void,
-    forceInitial?: boolean,
+    options?: { forceInitial?: boolean; syncInitial?: boolean },
   );
@@ -26,0 +32,0 @@

src/slot-observer.js

@@ -17,5 +17,16 @@ /**
  * 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} */
@@ -28,3 +39,3 @@ this.target = target;
     /** @type {boolean} */
-    this.forceInitial = forceInitial;
+    this.forceInitial = options.forceInitial;
 
@@ -45,3 +56,8 @@ /** @type {Node[]} */
     this.connect();
-    this._schedule();
+
+    if (options.syncInitial) {
+      this.flush();
+    } else {
+      this._schedule();
+    }
   }
@@ -75,3 +91,7 @@
       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();
+        }
       });
@@ -78,0 +98,0 @@ }

No alert changes

Improved metrics

Total package byte prevSize

255719

0.48%

Lines of code

7224

0.35%

No dependency changes