@vaadin/component-base 24.6.0-alpha8 → 24.6.0-alpha9

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vaadin/component-base",
-  "version": "24.6.0-alpha8",
+  "version": "24.6.0-alpha9",
   "publishConfig": {
     "access": "public"
   },
@@ -38,9 +38,9 @@
     "lit": "^3.0.0"
   },
   "devDependencies": {
-    "@vaadin/chai-plugins": "24.6.0-alpha8",
+    "@vaadin/chai-plugins": "24.6.0-alpha9",
     "@vaadin/testing-helpers": "^1.0.0",
     "sinon": "^18.0.0"
   },
-  "gitHead": "a11e1510c4caa08775b202714f5fc1198c22132a"
+  "gitHead": "e303d77ba20c3089c9998be9a318733d9ec5b53c"
 }

package/src/define.js

@@ -4,13 +4,55 @@
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
 
-export function defineCustomElement(CustomElement, version = '24.6.0-alpha8') {
+window.Vaadin ||= {};
+window.Vaadin.featureFlags ||= {};
+
+function dashToCamelCase(dash) {
+  return dash.replace(/-[a-z]/gu, (m) => m[1].toUpperCase());
+}
+
+const experimentalMap = {};
+
+export function defineCustomElement(CustomElement, version = '24.6.0-alpha9') {
   Object.defineProperty(CustomElement, 'version', {
     get() {
       return version;
     },
   });
 
+  if (CustomElement.experimental) {
+    const featureFlagKey =
+      typeof CustomElement.experimental === 'string'
+        ? CustomElement.experimental
+        : `${dashToCamelCase(CustomElement.is.split('-').slice(1).join('-'))}Component`;
+
+    if (!window.Vaadin.featureFlags[featureFlagKey] && !experimentalMap[featureFlagKey]) {
+      // Add setter to define experimental component when it's set to true
+      experimentalMap[featureFlagKey] = new Set();
+      experimentalMap[featureFlagKey].add(CustomElement);
+
+      Object.defineProperty(window.Vaadin.featureFlags, featureFlagKey, {
+        get() {
+          return experimentalMap[featureFlagKey].size === 0;
+        },
+        set(value) {
+          if (!!value && experimentalMap[featureFlagKey].size > 0) {
+            experimentalMap[featureFlagKey].forEach((elementClass) => {
+              customElements.define(elementClass.is, elementClass);
+            });
+            experimentalMap[featureFlagKey].clear();
+          }
+        },
+      });
+
+      return;
+    } else if (experimentalMap[featureFlagKey]) {
+      // Allow to register multiple components with single flag
+      experimentalMap[featureFlagKey].add(CustomElement);
+      return;
+    }
+  }
+
   const defined = customElements.get(CustomElement.is);
   if (!defined) {
     customElements.define(CustomElement.is, CustomElement);

package/src/polylit-mixin.js

@@ -217,12 +217,16 @@ const PolylitMixinImplementation = (superclass) => {
         this.__runObservers(props, this.constructor.__observers);
       }
 
+      if (this.__dynamicPropertyObservers) {
+        this.__runDynamicObservers(props, this.__dynamicPropertyObservers);
+      }
+
       if (this.constructor.__complexObservers) {
         this.__runComplexObservers(props, this.constructor.__complexObservers);
       }
 
-      if (this.__dynamicObservers) {
-        this.__runComplexObservers(props, this.__dynamicObservers);
+      if (this.__dynamicMethodObservers) {
+        this.__runComplexObservers(props, this.__dynamicMethodObservers);
       }
 
       if (this.constructor.__notifyProps) {
@@ -257,11 +261,17 @@ const PolylitMixinImplementation = (superclass) => {
 
     /** @protected */
     _createMethodObserver(observer) {
-      const dynamicObservers = getOrCreateMap(this, '__dynamicObservers');
+      const dynamicObservers = getOrCreateMap(this, '__dynamicMethodObservers');
       const { method, observerProps } = parseObserver(observer);
       dynamicObservers.set(method, observerProps);
     }
 
+    /** @protected */
+    _createPropertyObserver(property, method) {
+      const dynamicObservers = getOrCreateMap(this, '__dynamicPropertyObservers');
+      dynamicObservers.set(method, property);
+    }
+
     /** @private */
     __runComplexObservers(props, observers) {
       observers.forEach((observerProps, method) => {
@@ -275,6 +285,15 @@ const PolylitMixinImplementation = (superclass) => {
       });
     }
 
+    /** @private */
+    __runDynamicObservers(props, observers) {
+      observers.forEach((prop, method) => {
+        if (props.has(prop) && this[method]) {
+          this[method](this[prop], props.get(prop));
+        }
+      });
+    }
+
     /** @private */
     __runObservers(props, observers) {
       props.forEach((v, k) => {