@webtides/element-js 0.6.2 → 0.7.1

package/index.js

@@ -1,9 +1,9 @@
-import { BaseElement } from './src/BaseElement';
-import { StyledElement } from './src/StyledElement';
-import { TemplateElement, html } from './src/TemplateElement';
-import { toString } from './src/util/toString';
-import { defineElement } from './src/util/defineElement';
-import { i18n } from './src/util/i18n';
-import { Store } from './src/util/Store';
+import { BaseElement } from './src/BaseElement.js';
+import { StyledElement } from './src/StyledElement.js';
+import { TemplateElement, html } from './src/TemplateElement.js';
+import { toString } from './src/util/toString.js';
+import { defineElement } from './src/util/defineElement.js';
+import { i18n } from './src/util/i18n.js';
+import { Store } from './src/util/Store.js';
 
 export { BaseElement, StyledElement, TemplateElement, Store, html, toString, defineElement, i18n };

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@webtides/element-js",
-	"version": "0.6.2",
+	"version": "0.7.1",
 	"module": "index.js",
 	"main": "dist/index.js",
 	"files": [
@@ -45,7 +45,7 @@
 		"@web/dev-server": "^0.1.30",
 		"@web/test-runner": "^0.13.26",
 		"babel-eslint": "^10.1.0",
-		"babel-plugin-module-resolver": "^4.0.0",
+		"babel-plugin-module-resolver": "^5.0.0",
 		"deepmerge": "^4.2.2",
 		"esbuild": "^0.8.57",
 		"eslint": "^7.0.0",

package/src/BaseElement.js

@@ -2,8 +2,8 @@ import { parseAttribute, isNaN, dashToCamel, camelToDash, isObjectLike } from '.
 import { getClosestParentCustomElementNode, isOfSameNodeType } from './util/DOMHelper.js';
 import { Store } from './util/Store.js';
 
-export { defineElement } from './util/defineElement';
-export { toString } from './util/toString';
+export { defineElement } from './util/defineElement.js';
+export { toString } from './util/toString.js';
 
 class BaseElement extends HTMLElement {
 	constructor(options = {}) {
@@ -45,6 +45,9 @@ class BaseElement extends HTMLElement {
 		// define all computed properties to "this"
 		this.defineComputedProperties();
 
+		// define context
+		this.definePropertyInjection();
+
 		// define everything that should be observed
 		this.defineObserver();
 
@@ -96,6 +99,10 @@ class BaseElement extends HTMLElement {
 		// remove events for elements in the component
 		this.removeEvents();
 
+		if (Object.keys(this.provideProperties()).length > 0) {
+			this.removeEventListener('request-context', this.onRequestContext);
+		}
+
 		// remove observers
 		if (this._mutationObserver) this._mutationObserver.disconnect();
 
@@ -189,7 +196,7 @@ class BaseElement extends HTMLElement {
 	 * Will trigger update() when a property was changed
 	 */
 	defineProperties() {
-		Object.keys(this.properties()).forEach((prop) => {
+		Object.keys({ ...this.injectProperties(), ...this.properties() }).forEach((prop) => {
 			// when mixing shadow dom elements with light dom elements and nesting custom elements
 			// it might occur that properties where set on an element before it was
 			// registered or connected. To avoid such timing issues we check
@@ -234,29 +241,17 @@ class BaseElement extends HTMLElement {
 			set: (newValue) => {
 				const oldValue = this._state[property];
 				const newValueString = JSON.stringify(newValue);
-
 				if (JSON.stringify(oldValue) !== newValueString) {
 					this._state[property] = newValue;
 
+					if (newValue instanceof Store) {
+						newValue.subscribe(this);
+					}
+
 					if (reflectAttribute || this._options.propertyOptions[property]?.reflect) {
 						this.reflectProperty({ property, newValue, newValueString });
 					}
 
-					const informWatchedPropertiesAndDispatchChangeEvent = () => {
-						// notify watched properties (after update())
-						if (property in this.watch()) {
-							this.watch()[property](newValue, oldValue);
-						}
-
-						// dispatch change event
-						if (
-							property in this._options['propertyOptions'] &&
-							this._options['propertyOptions'][property]['notify'] === true
-						) {
-							this.dispatch(`${camelToDash(property)}-changed`, newValue, true);
-						}
-					};
-
 					if (this._options.autoUpdate) {
 						this.requestUpdate({
 							notify: true,
@@ -265,18 +260,51 @@ class BaseElement extends HTMLElement {
 							newValueString: newValueString,
 							oldValue: oldValue,
 						}).finally(() => {
-							informWatchedPropertiesAndDispatchChangeEvent();
+							this.callPropertyWatcher(property, newValue, oldValue);
+							this.notifyPropertyChange(property, newValue);
 						});
 					} else {
-						informWatchedPropertiesAndDispatchChangeEvent();
+						this.callPropertyWatcher(property, newValue, oldValue);
+						this.notifyPropertyChange(property, newValue);
 					}
 				}
-
 				return this;
 			},
 		});
 	}
 
+	/**
+	 * call the watch callbacks on property changes
+	 *
+	 * @param context is the elements instance
+	 * @param property property that changes
+	 * @param newValue
+	 * @param oldValue
+	 */
+	callPropertyWatcher(property, newValue, oldValue) {
+		// notify watched properties (after update())
+		const watch = this.watch();
+		if (property in watch) {
+			watch[property](newValue, oldValue);
+		}
+	}
+	/**
+	 * notify property observer via change event
+	 *
+	 * @param context is the elements instance
+	 * @param property property that changes
+	 * @param newValue
+	 */
+	notifyPropertyChange(property, newValue) {
+		// dispatch change event
+		if (
+			property in this._options['propertyOptions'] &&
+			this._options['propertyOptions'][property]['notify'] === true
+		) {
+			this.dispatch(`${camelToDash(property)}-changed`, newValue, true);
+		}
+	}
+
 	reflectProperty(options) {
 		const { property, newValue } = options;
 		const newValueString = options.newValueString || JSON.stringify(newValue);
@@ -294,6 +322,72 @@ class BaseElement extends HTMLElement {
 		}
 	}
 
+	/**
+	 * Context Properties to issue Context Requests and to pull contextual properties into the elements scope
+	 * @return {{}}
+	 */
+	injectProperties() {
+		return {};
+	}
+
+	/**
+	 * Define which properties that can be provided to children
+	 * @return {{}}
+	 */
+	provideProperties() {
+		return {};
+	}
+
+	/**
+	 * Defines context on the element based on keys from this.injectProperties()
+	 */
+	definePropertyInjection() {
+		Object.entries(this.injectProperties()).forEach(([key, value]) => {
+			this.requestContext(key, value);
+		});
+		// define context provider
+		if (Object.keys(this.provideProperties()).length > 0) {
+			this.addEventListener('request-context', this.onRequestContext);
+		}
+	}
+
+	/**
+	 * Helper Function to initialize the context requests
+	 *
+	 * @param propertyName
+	 * @param valueOrCallback
+	 */
+	requestContext(propertyName, valueOrCallback) {
+		this.dispatch('request-context', { [propertyName]: valueOrCallback }, true);
+	}
+
+	/**
+	 * Internal Context Request Handler
+	 * This will check if the current/receiving instance actually provides a value under the requested name.
+	 * If there is something to provide it will either assign the value to the requesting element or call the callback.
+	 *
+	 * @param event
+	 */
+	onRequestContext(event) {
+		const properties = this.properties();
+		const provideProperties = this.provideProperties();
+
+		Object.entries(event.detail ?? {}).forEach(([key, valueOrCallback]) => {
+			if (key in provideProperties) {
+				// found it, provide it
+				const providedValue = provideProperties[key];
+				event.stopPropagation();
+				if (typeof valueOrCallback === 'function') {
+					// call function with context value
+					valueOrCallback(providedValue);
+				} else {
+					// assign to prop
+					event.target[key] = providedValue;
+				}
+			}
+		});
+	}
+
 	// Deprecated
 	hooks() {
 		return {};

package/src/StyledElement.js

@@ -1,6 +1,6 @@
-import { BaseElement } from './BaseElement';
-import { supportsAdoptingStyleSheets, getShadowParentOrBody } from './util/DOMHelper';
-export { i18n } from './util/i18n';
+import { BaseElement } from './BaseElement.js';
+import { supportsAdoptingStyleSheets, getShadowParentOrBody } from './util/DOMHelper.js';
+export { i18n } from './util/i18n.js';
 
 class StyledElement extends BaseElement {
 	static globalStyles = null;

package/src/TemplateElement.js

@@ -1,7 +1,7 @@
-import { StyledElement } from './StyledElement';
+import { StyledElement } from './StyledElement.js';
 import { html } from 'lit-html';
 import { render } from 'lit-html/lib/shady-render.js';
-export { i18n } from './util/i18n';
+export { i18n } from './util/i18n.js';
 
 class TemplateElement extends StyledElement {
 	constructor(options) {

package/src/renderer/vanilla/TemplateElement.js

@@ -1,11 +1,9 @@
-import { StyledElement } from '../../StyledElement';
-import { html, spreadAttributes, unsafeHTML } from './util/html';
-import { render } from './util/render';
-export { i18n } from '../../util/i18n';
+import { StyledElement } from '../../StyledElement.js';
+import { html, spreadAttributes, unsafeHTML } from './util/html.js';
+import { render } from './util/render.js';
+export { i18n } from '../../util/i18n.js';
 
 class TemplateElement extends StyledElement {
-	static _$templateElement$ = true;
-
 	constructor(options) {
 		super({
 			deferUpdate: false,

package/src/renderer/vanilla/index.js

@@ -1,9 +1,9 @@
-import { BaseElement } from '../../BaseElement';
-import { StyledElement } from '../../StyledElement';
-import { TemplateElement, html, unsafeHTML, spreadAttributes } from './TemplateElement';
-import { toString } from '../../util/toString';
-import { defineElement } from '../../util/defineElement';
-import { i18n } from '../../util/i18n';
+import { BaseElement } from '../../BaseElement.js';
+import { StyledElement } from '../../StyledElement.js';
+import { TemplateElement, html, unsafeHTML, spreadAttributes } from './TemplateElement.js';
+import { toString } from '../../util/toString.js';
+import { defineElement } from '../../util/defineElement.js';
+import { i18n } from '../../util/i18n.js';
 
 export {
 	BaseElement,

package/src/renderer/vanilla/util/html.js

@@ -1,4 +1,4 @@
-import { encodeAttribute } from '../../../util/AttributeParser';
+import { encodeAttribute } from '../../../util/AttributeParser.js';
 import { unsafeHTML, spreadAttributes } from './directives.js';
 
 class Part {

package/src/renderer/vanilla/util/render.js

@@ -1,4 +1,4 @@
-const _cachedTemplateElements = {};
+import { TemplateElement } from '../TemplateElement.js';
 
 /**
  * Parses the given template string and returns a real DOM element.
@@ -45,22 +45,10 @@ const diffAttributes = function (templateElement, domElement) {
  */
 const isTemplateElement = (element) => {
 	const tagName = element.tagName?.toLowerCase() ?? false;
-	if (!tagName || !tagName.includes('-')) {
+	if (!tagName || !tagName.includes('-') || element.shadowRoot) {
 		return false;
 	}
-
-	if (_cachedTemplateElements[tagName]) {
-		return true;
-	}
-
-	const elementClass = customElements.get(tagName);
-	const isTemplateElement = elementClass && elementClass._$templateElement$ === true;
-
-	if (isTemplateElement) {
-		_cachedTemplateElements[tagName] = elementClass;
-	}
-
-	return isTemplateElement;
+	return element instanceof TemplateElement;
 };
 
 /**
@@ -138,7 +126,10 @@ const diffNodes = function (templateNode, domNode) {
 
 		// If there are child nodes, diff them recursively
 		if (templateChildNode.hasChildNodes()) {
-			if (!isTemplateElement(templateChildNode)) {
+			// https://stackoverflow.com/questions/46898739/why-domparser-doesnt-use-the-customelements-registered
+			// we have to use the domChildNode here because the templateChildNode is not upgraded because it was not
+			// imported into a document yet and therefore instanceOf will not work...
+			if (!isTemplateElement(domChildNode)) {
 				diffNodes(templateChildNode, domChildNode);
 			}
 		}

package/src/util/AttributeParser.js

@@ -33,6 +33,18 @@ export function isNaN(value) {
 	return Number.isNaN(value);
 }
 
+/**
+ * deep compare two values primitive or complex
+ *
+ * @param valueA
+ * @param valueB
+ * @returns {boolean}
+ */
+
+export function deepEquals(valueA, valueB) {
+	return JSON.stringify(valueA) === JSON.stringify(valueB);
+}
+
 export function parseAttribute(value, options = {}) {
 	if (options.parse === false || !isString(value)) {
 		// no-op

package/src/util/Store.js

@@ -1,4 +1,5 @@
-import { isObjectLike } from './AttributeParser';
+import { isObjectLike, deepEquals } from './AttributeParser.js';
+import { BaseElement } from '../BaseElement';
 
 export class Store {
 	_observer = new Set();
@@ -17,13 +18,17 @@ export class Store {
 					return this._state[key];
 				},
 				set: (newValue) => {
+					const oldState = structuredClone(this._state);
 					const oldValue = this._state[key];
 					this._state[key] = newValue;
-					const watch = this.watch();
-					if (watch.hasOwnProperty(key) && typeof watch[key] === 'function') {
-						watch[key](newValue, oldValue);
+
+					if (!deepEquals(newValue, oldValue)) {
+						const watch = this.watch();
+						if (watch.hasOwnProperty(key) && typeof watch[key] === 'function') {
+							watch[key](newValue, oldValue);
+						}
+						this.requestUpdate(oldState);
 					}
-					this.requestUpdate();
 				},
 			});
 		});
@@ -64,9 +69,27 @@ export class Store {
 		this._observer.delete(observer);
 	}
 
-	requestUpdate() {
-		this._observer.forEach((observer) =>
-			typeof observer.requestUpdate === 'function' ? observer.requestUpdate() : observer(),
-		);
+	requestUpdate(oldState) {
+		this._observer.forEach(async (observer) => {
+			if (observer instanceof BaseElement) {
+				await observer.requestUpdate();
+				// check if store is watched by an observer
+				if (Object.keys(observer.watch() ?? {}).length > 0) {
+					// observer actually has watched properties
+					const properties = observer.properties();
+					Object.keys(observer.watch() ?? {}).forEach((key) => {
+						if (properties[key] === this) {
+							// observer is actually watching store changes provide new and old values
+							observer.callPropertyWatcher(key, this._state, oldState);
+							observer.notifyPropertyChange(key, this._state);
+						}
+					});
+				}
+			} else if (typeof observer === 'function') {
+				observer();
+			} else {
+				console.error('Store: observer type is not supported.', observer);
+			}
+		});
 	}
 }