@vaadin/component-base 24.6.0 → 24.7.0-alpha2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vaadin/component-base",
-  "version": "24.6.0",
+  "version": "24.7.0-alpha2",
   "publishConfig": {
     "access": "public"
   },
@@ -38,9 +38,9 @@
     "lit": "^3.0.0"
   },
   "devDependencies": {
-    "@vaadin/chai-plugins": "~24.6.0",
+    "@vaadin/chai-plugins": "24.7.0-alpha2",
     "@vaadin/testing-helpers": "^1.0.0",
     "sinon": "^18.0.0"
   },
-  "gitHead": "c0b38aa981494d04fac64da35aa3890ad72551ea"
+  "gitHead": "e2523f9b4abc5a9586fb758166f823dc40c399dd"
 }

package/src/define.js

@@ -13,7 +13,7 @@ function dashToCamelCase(dash) {
 
 const experimentalMap = {};
 
-export function defineCustomElement(CustomElement, version = '24.6.0') {
+export function defineCustomElement(CustomElement, version = '24.7.0-alpha2') {
   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,38 @@ const PolylitMixinImplementation = (superclass) => {
       return result;
     }
 
+    static get polylitConfig() {
+      return {
+        asyncFirstRender: false,
+      };
+    }
+
+    constructor() {
+      super();
+      this.__hasPolylitMixin = true;
+    }
+
+    /** @protected */
+    connectedCallback() {
+      super.connectedCallback();
+
+      // Components like `vaadin-overlay` are teleported to the body element when opened.
+      // If their opened state is set as an attribute, the teleportation happens immediately
+      // after they are connected to the DOM. This means they will be outside the scope of
+      // querySelectorAll in the parent component's `firstUpdated()`. To ensure their reference
+      // is still registered in the $ map, we propagate the reference here.
+      const parentHost = this.getRootNode().host;
+      if (parentHost && parentHost.__hasPolylitMixin && this.id) {
+        parentHost.$ ||= {};
+        parentHost.$[this.id] = this;
+      }
+
+      const { polylitConfig } = this.constructor;
+      if (!this.hasUpdated && !polylitConfig.asyncFirstRender) {
+        this.performUpdate();
+      }
+    }
+
     /** @protected */
     firstUpdated() {
       super.firstUpdated();
@@ -203,8 +235,10 @@ const PolylitMixinImplementation = (superclass) => {
         this.$ = {};
       }
 
-      this.renderRoot.querySelectorAll('[id]').forEach((node) => {
-        this.$[node.id] = node;
+      [...Object.values(this.$), this.renderRoot].forEach((node) => {
+        node.querySelectorAll('[id]').forEach((node) => {
+          this.$[node.id] = node;
+        });
       });
     }
 

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) => {