@vaadin/component-base - npm Package Compare versions

package.json

src/define.js

		@@ -7,3 +7,12 @@ /**

		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', {
		@@ -15,2 +24,35 @@ get() {

		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);
		@@ -17,0 +59,0 @@ if (!defined) {

src/polylit-mixin.js

		@@ -220,2 +220,6 @@ /**

		if (this.__dynamicPropertyObservers) {
		this.__runDynamicObservers(props, this.__dynamicPropertyObservers);
		}

		if (this.constructor.__complexObservers) {
		@@ -225,4 +229,4 @@ this.__runComplexObservers(props, this.constructor.__complexObservers);

		if (this.__dynamicObservers) {
		this.__runComplexObservers(props, this.__dynamicObservers);
		if (this.__dynamicMethodObservers) {
		this.__runComplexObservers(props, this.__dynamicMethodObservers);
		}
		@@ -262,3 +266,3 @@
		_createMethodObserver(observer) {
		const dynamicObservers = getOrCreateMap(this, '__dynamicObservers');
		const dynamicObservers = getOrCreateMap(this, '__dynamicMethodObservers');
		const { method, observerProps } = parseObserver(observer);
		@@ -268,2 +272,8 @@ dynamicObservers.set(method, observerProps);

		/** @protected */
		_createPropertyObserver(property, method) {
		const dynamicObservers = getOrCreateMap(this, '__dynamicPropertyObservers');
		dynamicObservers.set(method, property);
		}

		/** @private */
		@@ -283,2 +293,11 @@ __runComplexObservers(props, observers) {
		/** @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) {
		@@ -285,0 +304,0 @@ props.forEach((v, k) => {

New alerts