@vaadin/component-base 24.7.0-alpha1 → 24.7.0-alpha3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vaadin/component-base",
-  "version": "24.7.0-alpha1",
+  "version": "24.7.0-alpha3",
   "publishConfig": {
     "access": "public"
   },
@@ -38,9 +38,9 @@
     "lit": "^3.0.0"
   },
   "devDependencies": {
-    "@vaadin/chai-plugins": "24.7.0-alpha1",
-    "@vaadin/testing-helpers": "^1.0.0",
+    "@vaadin/chai-plugins": "24.7.0-alpha3",
+    "@vaadin/testing-helpers": "^1.1.0",
     "sinon": "^18.0.0"
   },
-  "gitHead": "04be941c9a7b659871c97f31b9cc3ffd7528087b"
+  "gitHead": "dd5cfad6c9b54e676f5b10dffba2233775378f40"
 }

package/src/define.js

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

package/src/polylit-mixin.js

@@ -4,6 +4,7 @@
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
 import { dedupeMixin } from '@open-wc/dedupe-mixin';
+import { notEqual } from 'lit';
 import { get, set } from './path-utils.js';
 
 const caseMap = {};
@@ -101,12 +102,15 @@ const PolylitMixinImplementation = (superclass) => {
           get: defaultDescriptor.get,
           set(value) {
             const oldValue = this[name];
-            this[key] = value;
-            this.requestUpdate(name, oldValue, options);
 
-            // Enforce synchronous update
-            if (this.hasUpdated) {
-              this.performUpdate();
+            if (notEqual(value, oldValue)) {
+              this[key] = value;
+              this.requestUpdate(name, oldValue, options);
+
+              // Enforce synchronous update
+              if (this.hasUpdated) {
+                this.performUpdate();
+              }
             }
           },
           configurable: true,
@@ -115,21 +119,17 @@ const PolylitMixinImplementation = (superclass) => {
       }
 
       if (options.readOnly) {
-        const setter = defaultDescriptor.set;
+        const setter = result.set;
 
         this.addCheckedInitializer((instance) => {
           // This is run during construction of the element
           instance[`_set${upper(name)}`] = function (value) {
             setter.call(instance, value);
-
-            if (options.sync) {
-              this.performUpdate();
-            }
           };
         });
 
         result = {
-          get: defaultDescriptor.get,
+          get: result.get,
           set() {
             // Do nothing, property is read-only.
           },
@@ -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 */

package/src/resize-mixin.js

@@ -8,6 +8,10 @@ import { dedupingMixin } from '@polymer/polymer/lib/utils/mixin.js';
 const observer = new ResizeObserver((entries) => {
   setTimeout(() => {
     entries.forEach((entry) => {
+      if (!entry.target.isConnected) {
+        return;
+      }
+
       // Notify child resizables, if any
       if (entry.target.resizables) {
         entry.target.resizables.forEach((resizable) => {