@webtides/element-js 1.0.0 → 1.1.1

package/src/util/GlobalStylesStore.js

@@ -4,67 +4,77 @@ import { Store } from './Store.js';
  * @property {CSSStyleSheet[]} cssStyleSheets
  */
 class GlobalStylesStore extends Store {
-	/** @type {Map<Node, CSSStyleSheet>} */
-	globalStyleSheetsCache = new WeakMap();
+    /** @type {Map<Node, CSSStyleSheet>} */
+    globalStyleSheetsCache = new WeakMap();
 
-	constructor() {
-		super();
-		if (globalThis.elementJsConfig?.observeGlobalStyles) {
-			const mutationObserver = new MutationObserver((mutationRecord) => {
-				if (!mutationRecord[0]) return;
-				const filteredNodes = Array.from(mutationRecord[0].addedNodes).filter(
-					(node) => node.tagName === 'STYLE' || node.tagName === 'LINK',
-				);
-				if (filteredNodes && filteredNodes[0] && filteredNodes[0].tagName === 'LINK') {
-					filteredNodes[0].onload = () => {
-						this.requestUpdate();
-					};
-				} else if (filteredNodes && filteredNodes[0] && filteredNodes[0].tagName === 'STYLE') {
-					this.requestUpdate();
-				}
-			});
-			mutationObserver.observe(globalThis.document, { subtree: true, childList: true });
-		}
-	}
+    constructor() {
+        super();
+        if (globalThis.elementJsConfig?.observeGlobalStyles) {
+            const mutationObserver = new MutationObserver((mutationRecord) => {
+                if (!mutationRecord[0]) return;
+                const filteredNodes = Array.from(mutationRecord[0].addedNodes).filter(
+                    (node) => node.tagName === 'STYLE' || node.tagName === 'LINK',
+                );
+                if (filteredNodes && filteredNodes[0] && filteredNodes[0].tagName === 'LINK') {
+                    filteredNodes[0].onload = () => {
+                        this.requestUpdate();
+                    };
+                } else if (filteredNodes && filteredNodes[0] && filteredNodes[0].tagName === 'STYLE') {
+                    this.requestUpdate();
+                }
+            });
+            mutationObserver.observe(globalThis.document, { subtree: true, childList: true });
+        }
+    }
 
-	getGlobalStyleSheets(selector) {
-		/** @type {CSSStyleSheet[]}*/
-		const cssStyleSheets = [];
+    getGlobalStyleSheets(selector) {
+        /** @type {CSSStyleSheet[]}*/
+        const cssStyleSheets = [];
 
-		if (selector === false) return cssStyleSheets;
+        if (selector === false) return cssStyleSheets;
 
-		if (typeof selector === 'string') {
-			selector = [selector];
-		}
+        if (typeof selector === 'string') {
+            selector = [selector];
+        }
 
-		if (selector === true || selector.includes('document')) {
-			cssStyleSheets.push(...globalThis.document?.adoptedStyleSheets);
-		}
+        if (selector === true || selector.includes('document')) {
+            cssStyleSheets.push(...globalThis.document?.adoptedStyleSheets);
+        }
 
-		Array.from(globalThis.document?.styleSheets).map((styleSheet) => {
-			if (Array.isArray(selector) && !selector.some((cssSelector) => styleSheet.ownerNode.matches(cssSelector))) {
-				return;
-			}
+        Array.from(globalThis.document?.styleSheets).map((styleSheet) => {
+            if (Array.isArray(selector) && !selector.some((cssSelector) => styleSheet.ownerNode.matches(cssSelector))) {
+                return;
+            }
 
-			// TODO: this will always be null as we never set anything to the cache...
-			let cssStyleSheet = this.globalStyleSheetsCache.get(styleSheet.ownerNode);
-			if (!cssStyleSheet) {
-				cssStyleSheet = new CSSStyleSheet();
-				if (styleSheet.ownerNode.tagName === 'STYLE') {
-					cssStyleSheet.replaceSync(styleSheet.ownerNode.textContent);
-				} else if (styleSheet.ownerNode.tagName === 'LINK') {
-					try {
-						Array.from(styleSheet?.cssRules ?? []).map((rule) => cssStyleSheet.insertRule(rule.cssText));
-					} catch (e) {
-						console.error('GlobalStylesStore: cannot read cssRules. Maybe add crossorigin="anonymous" to your style link?', e);
-					}
-				}
-			}
-			cssStyleSheets.push(cssStyleSheet);
-		});
+            // TODO: this will always be null as we never set anything to the cache...
+            let cssStyleSheet = this.globalStyleSheetsCache.get(styleSheet.ownerNode);
+            if (!cssStyleSheet) {
+                if (styleSheet.ownerNode.tagName === 'STYLE') {
+                    cssStyleSheet = new CSSStyleSheet({ media: styleSheet.media, disabled: styleSheet.disabled });
+                    cssStyleSheet.replaceSync(styleSheet.ownerNode.textContent);
+                } else if (styleSheet.ownerNode.tagName === 'LINK') {
+                    cssStyleSheet = new CSSStyleSheet({
+                        baseURL: styleSheet.href,
+                        media: styleSheet.media,
+                        disabled: styleSheet.disabled,
+                    });
+                    try {
+                        Array.from(styleSheet?.cssRules ?? []).map((rule, index) =>
+                            cssStyleSheet.insertRule(rule.cssText, index),
+                        );
+                    } catch (e) {
+                        console.error(
+                            'GlobalStylesStore: cannot read cssRules. Maybe add crossorigin="anonymous" to your style link?',
+                            e,
+                        );
+                    }
+                }
+            }
+            cssStyleSheets.push(cssStyleSheet);
+        });
 
-		return cssStyleSheets;
-	}
+        return cssStyleSheets;
+    }
 }
 
 export const globalStylesStore = new GlobalStylesStore();

package/src/util/SerializeStateHelper.js

@@ -19,16 +19,16 @@ let globalElementJsState;
  * Initializes the global script element that holds the state for all `Serializable` objects.
  */
 function initGlobalStateObject() {
-	if (!globalElementJsState) {
-		globalElementJsState = Array.from(globalThis.document.scripts).find((script) => script.type === 'ejs/json');
-		if (!globalElementJsState) {
-			const script = document.createElement('script');
-			script.setAttribute('type', 'ejs/json');
-			script.textContent = '{}';
-			document.body.appendChild(script);
-			globalElementJsState = script;
-		}
-	}
+    if (!globalElementJsState) {
+        globalElementJsState = Array.from(globalThis.document.scripts).find((script) => script.type === 'ejs/json');
+        if (!globalElementJsState) {
+            const script = document.createElement('script');
+            script.setAttribute('type', 'ejs/json');
+            script.textContent = '{}';
+            document.body.appendChild(script);
+            globalElementJsState = script;
+        }
+    }
 }
 
 /**
@@ -36,23 +36,23 @@ function initGlobalStateObject() {
  * @param {Serializable} serializableObject
  */
 export function serializeState(serializableObject) {
-	if (!globalThis.elementJsConfig?.serializeState) return;
-
-	if (!serializableObject._serializationKey && !serializableObject.serializeState) {
-		throw new Error('serializableObject does not implement the Serializable interface');
-	}
-
-	initGlobalStateObject();
-
-	const currentState = JSON.parse(globalElementJsState.textContent);
-	currentState[serializableObject._serializationKey] = serializableObject.serializeState();
-	globalElementJsState.textContent = JSON.stringify(currentState, (key, value) => {
-		if (value instanceof Store) {
-			return 'Store/' + value._serializationKey;
-		} else {
-			return value;
-		}
-	});
+    if (!globalThis.elementJsConfig?.serializeState) return;
+
+    if (!serializableObject._serializationKey && !serializableObject.serializeState) {
+        throw new Error('serializableObject does not implement the Serializable interface');
+    }
+
+    initGlobalStateObject();
+
+    const currentState = JSON.parse(globalElementJsState.textContent);
+    currentState[serializableObject._serializationKey] = serializableObject.serializeState();
+    globalElementJsState.textContent = JSON.stringify(currentState, (key, value) => {
+        if (value instanceof Store) {
+            return 'Store/' + value._serializationKey;
+        } else {
+            return value;
+        }
+    });
 }
 
 /**
@@ -61,31 +61,31 @@ export function serializeState(serializableObject) {
  * @param {{[string: any]: *}} [serializedState]
  */
 export function deserializeState(serializableObject, serializedState) {
-	if (!globalThis.elementJsConfig?.serializeState) return;
-
-	if (!serializableObject._serializationKey && !serializableObject.restoreState) {
-		throw new Error('serializableObject does not implement the Serializable interface');
-	}
-
-	if (serializedState) {
-		serializableObject.restoreState(serializedState);
-		return;
-	}
-
-	initGlobalStateObject();
-
-	const unresolvedState = JSON.parse(globalElementJsState.textContent);
-	const currentState = JSON.parse(globalElementJsState.textContent, (key, value) => {
-		if (typeof value === 'string' && value.startsWith('Store/')) {
-			const [_, storeUuid] = value.split('/');
-			const serializedState = unresolvedState[storeUuid];
-			return new Store(serializedState, { key: storeUuid, serializedState });
-		} else {
-			return value;
-		}
-	});
-
-	serializableObject.restoreState(currentState[serializableObject._serializationKey]);
+    if (!globalThis.elementJsConfig?.serializeState) return;
+
+    if (!serializableObject._serializationKey && !serializableObject.restoreState) {
+        throw new Error('serializableObject does not implement the Serializable interface');
+    }
+
+    if (serializedState) {
+        serializableObject.restoreState(serializedState);
+        return;
+    }
+
+    initGlobalStateObject();
+
+    const unresolvedState = JSON.parse(globalElementJsState.textContent);
+    const currentState = JSON.parse(globalElementJsState.textContent, (key, value) => {
+        if (typeof value === 'string' && value.startsWith('Store/')) {
+            const [_, storeUuid] = value.split('/');
+            const serializedState = unresolvedState[storeUuid];
+            return new Store(serializedState, { key: storeUuid, serializedState });
+        } else {
+            return value;
+        }
+    });
+
+    serializableObject.restoreState(currentState[serializableObject._serializationKey]);
 }
 
 /**
@@ -94,10 +94,10 @@ export function deserializeState(serializableObject, serializedState) {
  * @return {boolean}
  */
 export function hasSerializedState(key) {
-	if (!globalThis.elementJsConfig?.serializeState) return false;
+    if (!globalThis.elementJsConfig?.serializeState) return false;
 
-	initGlobalStateObject();
+    initGlobalStateObject();
 
-	const serializedState = JSON.parse(globalElementJsState.textContent);
-	return serializedState.hasOwnProperty(key);
+    const serializedState = JSON.parse(globalElementJsState.textContent);
+    return serializedState.hasOwnProperty(key);
 }

package/src/util/Store.js

@@ -1,11 +1,12 @@
 import { deepEquals, isObjectLike } from './AttributeParser.js';
 import {
-	hasSerializedState,
-	serializeState,
-	deserializeState,
-	serializableObjectsCache,
+    hasSerializedState,
+    serializeState,
+    deserializeState,
+    serializableObjectsCache,
 } from './SerializeStateHelper.js';
 import { BaseElement } from '../BaseElement.js';
+import { randomUUID } from './crypto.js';
 
 /**
  * Options object for the Store
@@ -17,174 +18,174 @@ import { BaseElement } from '../BaseElement.js';
  * @implements {Serializable}
  */
 export class Store {
-	_serializationKey;
-	_observer = new Set([]);
-	_singlePropertyMode = false;
-	_state = {};
-
-	/**
-	 * @param {* | object} [value]
-	 * @param {StoreOptions} [options]
-	 */
-	constructor(value, options) {
-		if (options?.key && serializableObjectsCache.has(options?.key)) {
-			return serializableObjectsCache.get(options?.key);
-		}
-
-		this._singlePropertyMode = arguments.length > 0 && !isObjectLike(value);
-
-		if (options?.key) {
-			this._serializationKey = options?.key;
-		} else {
-			this._serializationKey = globalThis.crypto.randomUUID();
-		}
-
-		if (options?.serializedState) {
-			deserializeState(this, options.serializedState);
-		} else if (hasSerializedState(this._serializationKey)) {
-			deserializeState(this);
-		}
-
-		// wrap primitives with a generic "value" field to generate getter and setter
-		const specificValues = this._singlePropertyMode ? { value } : value;
-		const properties = { ...(!this._singlePropertyMode && this.properties()), ...specificValues };
-
-		const serializationKeys = Object.keys(this.serializeState());
-		Object.entries(properties).map(([key, value]) => {
-			this._state[key] =
-				hasSerializedState(this._serializationKey) && serializationKeys.includes(key) ? this[key] : value;
-
-			if (value instanceof Store) {
-				value.subscribe(this);
-			}
-
-			Object.defineProperty(this, key, {
-				get: () => {
-					return this._state[key];
-				},
-				set: (newValue) => {
-					const oldValue = this._state[key];
-					this._state[key] = newValue;
-					if (value instanceof Store) {
-						value.subscribe(this);
-					}
-
-					serializeState(this);
-
-					if (!deepEquals(newValue, oldValue)) {
-						const watch = this.watch();
-						if (watch.hasOwnProperty(key) && typeof watch[key] === 'function') {
-							watch[key](newValue, oldValue);
-						}
-						this.requestUpdate();
-					}
-				},
-			});
-		});
-
-		serializableObjectsCache.set(this._serializationKey, this);
-	}
-
-	/**
-	 * Properties to be defined and assigned on the store. Can be overridden in extended classes.
-	 * Properties defined here will also trigger an update cycle when changed.
-	 * @return {{}}
-	 */
-	properties() {
-		return {};
-	}
-
-	/**
-	 * When a property as the key was changed in the store, the callback function defined as value
-	 * will be called with `newValue` and `oldValue`
-	 * @return {{}}
-	 */
-	watch() {
-		return {};
-	}
-
-	/**
-	 * Overrides `valueOf` to automatically return .value
-	 * @returns {* | {}}
-	 */
-	valueOf() {
-		return this._singlePropertyMode ? this._state.value : this._state;
-	}
-
-	/**
-	 * Overrides `toString` to automatically return .value
-	 * @returns {string}
-	 */
-	toString() {
-		return `${this._singlePropertyMode ? this._state.value : this._state}`;
-	}
-
-	/**
-	 * Add an observer
-	 * @param {BaseElement|Function|Store} observer
-	 */
-	subscribe(observer) {
-		this._observer.add(observer);
-	}
-
-	/**
-	 * Remove an observer
-	 * @param {BaseElement | Function} observer
-	 */
-	unsubscribe(observer) {
-		this._observer.delete(observer);
-	}
-
-	/**
-	 * Request and batch an asynchronous update cycle
-	 */
-	requestUpdate() {
-		this._observer.forEach(async (observer) => {
-			if (observer instanceof BaseElement || observer instanceof Store) {
-				if (observer?._options?.autoUpdate !== false) {
-					await observer.requestUpdate();
-				}
-				// check if store is watched by an observer
-				if (Object.keys(observer.watch() ?? {}).length > 0) {
-					// observer actually has watched properties
-					Object.keys(observer.watch() ?? {}).forEach((key) => {
-						if (observer._state[key] === this) {
-							// observer is actually watching store changes provide new and old values
-							if (observer instanceof Store) {
-								// observer is a foreign store / call watcher
-								observer.watch?.()[key](this, this);
-							} else {
-								observer.callPropertyWatcher(key, this, this);
-								observer.notifyPropertyChange(key, this);
-							}
-						}
-					});
-				}
-			} else if (typeof observer === 'function') {
-				observer();
-			} else {
-				console.error('Store: observer type is not supported.', observer);
-			}
-		});
-	}
-
-	/**
-	 * This method will be used to serialize this stores state.
-	 * By default, it will generate an object with all properties from this.properties().
-	 * You can override this and return a different object with more/less/different properties.
-	 * @return {{[string: any]: *}}
-	 */
-	serializeState() {
-		const keys = Object.keys(this.properties());
-		return Object.fromEntries(keys.map((key) => [key, this[key]]));
-	}
-
-	/**
-	 * This method will be used to restore properties on the store from a previously serialized state.
-	 * You can override this and handle the deserialization differently if the default is not enough.
-	 * @param {{[string: any]: *}} serializedState
-	 */
-	restoreState(serializedState) {
-		Object.assign(this, serializedState);
-	}
+    _serializationKey;
+    _observer = new Set([]);
+    _singlePropertyMode = false;
+    _state = {};
+
+    /**
+     * @param {* | object} [value]
+     * @param {StoreOptions} [options]
+     */
+    constructor(value, options) {
+        if (options?.key && serializableObjectsCache.has(options?.key)) {
+            return serializableObjectsCache.get(options?.key);
+        }
+
+        this._singlePropertyMode = arguments.length > 0 && !isObjectLike(value);
+
+        if (options?.key) {
+            this._serializationKey = options?.key;
+        } else {
+            this._serializationKey = randomUUID();
+        }
+
+        if (options?.serializedState) {
+            deserializeState(this, options.serializedState);
+        } else if (hasSerializedState(this._serializationKey)) {
+            deserializeState(this);
+        }
+
+        // wrap primitives with a generic "value" field to generate getter and setter
+        const specificValues = this._singlePropertyMode ? { value } : value;
+        const properties = { ...(!this._singlePropertyMode && this.properties()), ...specificValues };
+
+        const serializationKeys = Object.keys(this.serializeState());
+        Object.entries(properties).map(([key, value]) => {
+            this._state[key] =
+                hasSerializedState(this._serializationKey) && serializationKeys.includes(key) ? this[key] : value;
+
+            if (value instanceof Store) {
+                value.subscribe(this);
+            }
+
+            Object.defineProperty(this, key, {
+                get: () => {
+                    return this._state[key];
+                },
+                set: (newValue) => {
+                    const oldValue = this._state[key];
+                    this._state[key] = newValue;
+                    if (value instanceof Store) {
+                        value.subscribe(this);
+                    }
+
+                    serializeState(this);
+
+                    if (!deepEquals(newValue, oldValue)) {
+                        const watch = this.watch();
+                        if (watch.hasOwnProperty(key) && typeof watch[key] === 'function') {
+                            watch[key](newValue, oldValue);
+                        }
+                        this.requestUpdate();
+                    }
+                },
+            });
+        });
+
+        serializableObjectsCache.set(this._serializationKey, this);
+    }
+
+    /**
+     * Properties to be defined and assigned on the store. Can be overridden in extended classes.
+     * Properties defined here will also trigger an update cycle when changed.
+     * @return {{}}
+     */
+    properties() {
+        return {};
+    }
+
+    /**
+     * When a property as the key was changed in the store, the callback function defined as value
+     * will be called with `newValue` and `oldValue`
+     * @return {{}}
+     */
+    watch() {
+        return {};
+    }
+
+    /**
+     * Overrides `valueOf` to automatically return .value
+     * @returns {* | {}}
+     */
+    valueOf() {
+        return this._singlePropertyMode ? this._state.value : this._state;
+    }
+
+    /**
+     * Overrides `toString` to automatically return .value
+     * @returns {string}
+     */
+    toString() {
+        return `${this._singlePropertyMode ? this._state.value : this._state}`;
+    }
+
+    /**
+     * Add an observer
+     * @param {BaseElement|Function|Store} observer
+     */
+    subscribe(observer) {
+        this._observer.add(observer);
+    }
+
+    /**
+     * Remove an observer
+     * @param {BaseElement | Function} observer
+     */
+    unsubscribe(observer) {
+        this._observer.delete(observer);
+    }
+
+    /**
+     * Request and batch an asynchronous update cycle
+     */
+    requestUpdate() {
+        this._observer.forEach(async (observer) => {
+            if (observer instanceof BaseElement || observer instanceof Store) {
+                if (observer?._options?.autoUpdate !== false) {
+                    await observer.requestUpdate();
+                }
+                // check if store is watched by an observer
+                if (Object.keys(observer.watch() ?? {}).length > 0) {
+                    // observer actually has watched properties
+                    Object.keys(observer.watch() ?? {}).forEach((key) => {
+                        if (observer._state[key] === this) {
+                            // observer is actually watching store changes provide new and old values
+                            if (observer instanceof Store) {
+                                // observer is a foreign store / call watcher
+                                observer.watch?.()[key](this, this);
+                            } else {
+                                observer.callPropertyWatcher(key, this, this);
+                                observer.notifyPropertyChange(key, this);
+                            }
+                        }
+                    });
+                }
+            } else if (typeof observer === 'function') {
+                observer();
+            } else {
+                console.error('Store: observer type is not supported.', observer);
+            }
+        });
+    }
+
+    /**
+     * This method will be used to serialize this stores state.
+     * By default, it will generate an object with all properties from this.properties().
+     * You can override this and return a different object with more/less/different properties.
+     * @return {{[string: any]: *}}
+     */
+    serializeState() {
+        const keys = Object.keys(this.properties());
+        return Object.fromEntries(keys.map((key) => [key, this[key]]));
+    }
+
+    /**
+     * This method will be used to restore properties on the store from a previously serialized state.
+     * You can override this and handle the deserialization differently if the default is not enough.
+     * @param {{[string: any]: *}} serializedState
+     */
+    restoreState(serializedState) {
+        Object.assign(this, serializedState);
+    }
 }

package/src/util/crypto.js

@@ -0,0 +1,13 @@
+/**
+ * Helper function to use the crypto.randomUUID() as it will fail in none secure hosts (e.g. localhost)
+ * @return {`${string}-${string}-${string}-${string}-${string}`|*}
+ */
+export function randomUUID() {
+    if (!('randomUUID' in globalThis.crypto)) {
+        // https://stackoverflow.com/a/2117523/2800218
+        return ([1e7] + -1e3 + -4e3 + -8e3 + -1e11).replace(/[018]/g, (c) =>
+            (c ^ (crypto.getRandomValues(new Uint8Array(1))[0] & (15 >> (c / 4)))).toString(16),
+        );
+    }
+    return globalThis.crypto.randomUUID();
+}