@webtides/element-js 1.0.0-alpha.2 → 1.0.0-alpha.3

package/src/util/Store.js

@@ -1,21 +1,63 @@
-import { isObjectLike, deepEquals } from './AttributeParser.js';
+import { deepEquals, isObjectLike } from './AttributeParser.js';
+import {
+	hasSerializedState,
+	serializeState,
+	deserializeState,
+	serializableObjectsCache,
+} from './SerializeStateHelper.js';
 import { BaseElement } from '../BaseElement.js';
 
+/**
+ * Options object for the Store
+ * @typedef {Object} StoreOptions
+ * @property {string} [key] - A unique key so that the store instance can be serialized and deserialized correctly across multiple shared parents/hosts.
+ */
+
+/**
+ * @implements {Serializable}
+ */
 export class Store {
-	_observer = new Set();
+	_serializationKey;
+	_observer = new Set([]);
 	_singlePropertyMode = false;
 	_state = {};
 
 	/**
-	 * @param {* | object} value
+	 * @param {* | object} [value]
+	 * @param {StoreOptions} [options]
 	 */
-	constructor(value) {
-		// wrap primitives with a generic "value" field to generate getter and setter
+	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;
-		this._state = { ...(!this._singlePropertyMode && this.properties()), ...specificValues };
+		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.entries(this._state).map(([key, value]) => {
 			Object.defineProperty(this, key, {
 				get: () => {
 					return this._state[key];
@@ -23,6 +65,11 @@ export class Store {
 				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();
@@ -34,6 +81,8 @@ export class Store {
 				},
 			});
 		});
+
+		serializableObjectsCache.set(this._serializationKey, this);
 	}
 
 	/**
@@ -72,7 +121,7 @@ export class Store {
 
 	/**
 	 * Add an observer
-	 * @param {BaseElement | Function} observer
+	 * @param {BaseElement|Function|Store} observer
 	 */
 	subscribe(observer) {
 		this._observer.add(observer);
@@ -91,17 +140,23 @@ export class Store {
 	 */
 	requestUpdate() {
 		this._observer.forEach(async (observer) => {
-			if (observer instanceof BaseElement) {
-				await observer.requestUpdate();
+			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
-					const properties = observer.properties();
 					Object.keys(observer.watch() ?? {}).forEach((key) => {
 						if (observer._state[key] === this) {
 							// observer is actually watching store changes provide new and old values
-							observer.callPropertyWatcher(key, this, this);
-							observer.notifyPropertyChange(key, this);
+							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);
+							}
 						}
 					});
 				}
@@ -112,4 +167,24 @@ export class Store {
 			}
 		});
 	}
+
+	/**
+	 * 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/i18n.js

@@ -1,20 +0,0 @@
-/**
- * Retrieves a translated key from a dictionary on the window object
- * Example: ${i18n('CustomElement.buttonLabel', 'Label')}
- * @param {string} key - to be translated
- * @param {string} fallback - to be used if key is not defined
- * @return {string} - String of the translated key or fallback or original key
- */
-export function i18n(key, fallback) {
-	try {
-		const translations = window.elementjs.i18n();
-		if (translations[key] === undefined) {
-			throw 'Translation Missing';
-		}
-
-		return translations[key];
-	} catch (err) {
-		if (fallback) return fallback;
-		else return key;
-	}
-}