Registry (#7073)

* wip

* wip

* wip

* wip

* wip

* Update registry.value.vue

* wip

* wip

* wip

* wip

* typo

src/client/pizzax.ts

@@ -11,6 +11,7 @@ type ArrayElement<A> = A extends readonly (infer T)[] ? T : never;
 
 export class Storage<T extends StateDef> {
 	public readonly key: string;
+	public readonly keyForLocalStorage: string;
 
 	public readonly def: T;
 
@@ -19,20 +20,22 @@ export class Storage<T extends StateDef> {
 	public readonly reactiveState: { [K in keyof T]: Ref<T[K]['default']> };
 
 	constructor(key: string, def: T) {
-		this.key = 'pizzax::' + key;
+		this.key = key;
+		this.keyForLocalStorage = 'pizzax::' + key;
 		this.def = def;
 
 		// TODO: indexedDBにする
-		const deviceState = JSON.parse(localStorage.getItem(this.key) || '{}');
-		const deviceAccountState = $i ? JSON.parse(localStorage.getItem(this.key + '::' + $i.id) || '{}') : {};
+		const deviceState = JSON.parse(localStorage.getItem(this.keyForLocalStorage) || '{}');
+		const deviceAccountState = $i ? JSON.parse(localStorage.getItem(this.keyForLocalStorage + '::' + $i.id) || '{}') : {};
+		const registryCache = $i ? JSON.parse(localStorage.getItem(this.keyForLocalStorage + '::cache::' + $i.id) || '{}') : {};
 
 		const state = {};
 		const reactiveState = {};
 		for (const [k, v] of Object.entries(def)) {
 			if (v.where === 'device' && Object.prototype.hasOwnProperty.call(deviceState, k)) {
 				state[k] = deviceState[k];
-			} else if (v.where === 'account' && $i && Object.prototype.hasOwnProperty.call($i.clientData, k)) {
-				state[k] = $i.clientData[k];
+			} else if (v.where === 'account' && $i && Object.prototype.hasOwnProperty.call(registryCache, k)) {
+				state[k] = registryCache[k];
 			} else if (v.where === 'deviceAccount' && Object.prototype.hasOwnProperty.call(deviceAccountState, k)) {
 				state[k] = deviceAccountState[k];
 			} else {
@@ -47,16 +50,24 @@ export class Storage<T extends StateDef> {
 		this.reactiveState = reactiveState as any;
 
 		if ($i) {
-			watch($i, () => {
-				if (_DEV_) console.log('$i updated');
-
-				for (const [k, v] of Object.entries(def)) {
-					if (v.where === 'account' && Object.prototype.hasOwnProperty.call($i!.clientData, k)) {
-						state[k] = $i!.clientData[k];
-						reactiveState[k].value = $i!.clientData[k];
+			// なぜかsetTimeoutしないとapi関数内でエラーになる(おそらく循環参照してることに原因がありそう)
+			setTimeout(() => {
+				api('i/registry/get-all', { scope: ['client', this.key] }).then(kvs => {
+					for (const [k, v] of Object.entries(def)) {
+						if (v.where === 'account') {
+							if (Object.prototype.hasOwnProperty.call(kvs, k)) {
+								state[k] = kvs[k];
+								reactiveState[k].value = kvs[k];
+							} else {
+								state[k] = v.default;
+								reactiveState[k].value = v.default;
+							}
+						}
 					}
-				}
-			});
+				});
+			}, 1);
+
+			// TODO: streamingのuser storage updateイベントを監視して更新
 		}
 	}
 
@@ -68,21 +79,26 @@ export class Storage<T extends StateDef> {
 
 		switch (this.def[key].where) {
 			case 'device': {
-				const deviceState = JSON.parse(localStorage.getItem(this.key) || '{}');
+				const deviceState = JSON.parse(localStorage.getItem(this.keyForLocalStorage) || '{}');
 				deviceState[key] = value;
-				localStorage.setItem(this.key, JSON.stringify(deviceState));
+				localStorage.setItem(this.keyForLocalStorage, JSON.stringify(deviceState));
 				break;
 			}
 			case 'deviceAccount': {
 				if ($i == null) break;
-				const deviceAccountState = JSON.parse(localStorage.getItem(this.key + '::' + $i.id) || '{}');
+				const deviceAccountState = JSON.parse(localStorage.getItem(this.keyForLocalStorage + '::' + $i.id) || '{}');
 				deviceAccountState[key] = value;
-				localStorage.setItem(this.key + '::' + $i.id, JSON.stringify(deviceAccountState));
+				localStorage.setItem(this.keyForLocalStorage + '::' + $i.id, JSON.stringify(deviceAccountState));
 				break;
 			}
 			case 'account': {
-				api('i/update-client-setting', {
-					name: key,
+				if ($i == null) break;
+				const cache = JSON.parse(localStorage.getItem(this.keyForLocalStorage + '::cache::' + $i.id) || '{}');
+				cache[key] = value;
+				localStorage.setItem(this.keyForLocalStorage + '::cache::' + $i.id, JSON.stringify(cache));
+				api('i/registry/set', {
+					scope: ['client', this.key],
+					key: key,
 					value: value
 				});
 				break;