@webtides/element-js 1.0.0 → 1.1.0

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,9 +1,9 @@
 import { deepEquals, isObjectLike } from './AttributeParser.js';
 import {
-	hasSerializedState,
-	serializeState,
-	deserializeState,
-	serializableObjectsCache,
+    hasSerializedState,
+    serializeState,
+    deserializeState,
+    serializableObjectsCache,
 } from './SerializeStateHelper.js';
 import { BaseElement } from '../BaseElement.js';
 
@@ -17,174 +17,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 = 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);
+    }
 }

package/src/util/defineElement.js

@@ -4,9 +4,9 @@
  * @param {CustomElementConstructor} constructor for the custom element
  */
 export function defineElement(name, constructor) {
-	try {
-		customElements.define(name, constructor);
-	} catch (e) {
-		// console.log('error defining custom element', e);
-	}
+    try {
+        customElements.define(name, constructor);
+    } catch (e) {
+        // console.log('error defining custom element', e);
+    }
 }

package/src/util/toString.js

@@ -5,9 +5,9 @@
  * @return {string}
  */
 export function toString(value) {
-	try {
-		return JSON.stringify(value);
-	} catch (e) {
-		return '';
-	}
+    try {
+        return JSON.stringify(value);
+    } catch (e) {
+        return '';
+    }
 }