From 8e290ba7f6e736d5bee1e9a01e16c75f9b665adb Mon Sep 17 00:00:00 2001
From: tamaina <tamaina@hotmail.co.jp>
Date: Sun, 2 Jan 2022 20:31:48 +0900
Subject: [PATCH] fix

---
 packages/client/src/pizzax.ts | 82 +++++++++++++++++++----------------
 1 file changed, 44 insertions(+), 38 deletions(-)

diff --git a/packages/client/src/pizzax.ts b/packages/client/src/pizzax.ts
index 1dad1bbd77..d5dce70e7c 100644
--- a/packages/client/src/pizzax.ts
+++ b/packages/client/src/pizzax.ts
@@ -17,7 +17,8 @@ type ArrayElement<A> = A extends readonly (infer T)[] ? T : never;
 const connection = $i && stream.useChannel('main');
 
 export class Storage<T extends StateDef> {
-	public readonly ready: PromiseLike<void>;
+	public readonly ready: Promise<void>;
+	public readonly loaded: Promise<void>;
 
 	public readonly key: string;
 	public readonly deviceStateKeyName: string;
@@ -49,32 +50,53 @@ export class Storage<T extends StateDef> {
 		this.def = def;
 
 		this.ready = this.init();
+		this.loaded = this.ready.then(() => this.load());
 	}
 
-	private init(): Promise<void> {
-		return new Promise(async (resolve, reject) => {
-			await this.migrate();
+	private async init(): Promise<void> {
+		await this.migrate();
 
-			const deviceState: State<T> = await get(this.deviceStateKeyName) || {};
-			const deviceAccountState = $i ? await get(this.deviceAccountStateKeyName) || {} : {};
-			const registryCache = $i ? await get(this.registryCacheKeyName) || {} : {};
+		const deviceState: State<T> = await get(this.deviceStateKeyName) || {};
+		const deviceAccountState = $i ? await get(this.deviceAccountStateKeyName) || {} : {};
+		const registryCache = $i ? await get(this.registryCacheKeyName) || {} : {};
 	
-			for (const [k, v] of Object.entries(this.def) as [keyof T, T[keyof T]][]) {
-				if (v.where === 'device' && Object.prototype.hasOwnProperty.call(deviceState, k)) {
-					this.state[k] = deviceState[k];
-				} else if (v.where === 'account' && $i && Object.prototype.hasOwnProperty.call(registryCache, k)) {
-					this.state[k] = registryCache[k];
-				} else if (v.where === 'deviceAccount' && Object.prototype.hasOwnProperty.call(deviceAccountState, k)) {
-					this.state[k] = deviceAccountState[k];
-				} else {
-					this.state[k] = v.default;
-					if (_DEV_) console.log('Use default value', k, v.default);
-				}
-			}
-			for (const [k, v] of Object.entries(this.state) as [keyof T, T[keyof T]][]) {
-				this.reactiveState[k] = ref(v);
+		for (const [k, v] of Object.entries(this.def) as [keyof T, T[keyof T]][]) {
+			if (v.where === 'device' && Object.prototype.hasOwnProperty.call(deviceState, k)) {
+				this.state[k] = deviceState[k];
+			} else if (v.where === 'account' && $i && Object.prototype.hasOwnProperty.call(registryCache, k)) {
+				this.state[k] = registryCache[k];
+			} else if (v.where === 'deviceAccount' && Object.prototype.hasOwnProperty.call(deviceAccountState, k)) {
+				this.state[k] = deviceAccountState[k];
+			} else {
+				this.state[k] = v.default;
+				if (_DEV_) console.log('Use default value', k, v.default);
 			}
+		}
+		for (const [k, v] of Object.entries(this.state) as [keyof T, T[keyof T]][]) {
+			this.reactiveState[k] = ref(v);
+		}
+
+		if ($i) {
+			// streamingのuser storage updateイベントを監視して更新
+			connection?.on('registryUpdated', ({ scope, key, value }: { scope?: string[], key: keyof T, value: T[typeof key]['default'] }) => {
+				if (!scope || scope.length !== 2 || scope[0] !== 'client' || scope[1] !== this.key || this.state[key] === value) return;
 	
+				this.state[key] = value;
+				this.reactiveState[key].value = value;
+	
+				this.addIdbSetJob(async () => {
+					const cache = await get(this.registryCacheKeyName);
+					if (cache[key] !== value) {
+						cache[key] = value;
+						await set(this.registryCacheKeyName, cache);
+					}
+				});
+			});
+		}
+	}
+
+	private async load(): Promise<void> {
+		return new Promise((resolve, reject) => {
 			if ($i) {
 				// なぜかsetTimeoutしないとapi関数内でエラーになる(おそらく循環参照してることに原因がありそう)
 				setTimeout(() => {
@@ -93,27 +115,11 @@ export class Storage<T extends StateDef> {
 								}
 							}
 						}
-
+	
 						return set(this.registryCacheKeyName, cache);
 					})
 					.then(() => resolve());
 				}, 1);
-
-				// streamingのuser storage updateイベントを監視して更新
-				connection?.on('registryUpdated', ({ scope, key, value }: { scope: string[], key: keyof T, value: T[typeof key]['default'] }) => {
-					if (scope.length !== 2 || scope[0] !== 'client' || scope[1] !== this.key || this.state[key] === value) return;
-
-					this.state[key] = value;
-					this.reactiveState[key].value = value;
-
-					this.addIdbSetJob(async () => {
-						const cache = await get(this.registryCacheKeyName);
-						if (cache[key] !== value) {
-							cache[key] = value;
-							await set(this.registryCacheKeyName, cache);
-						}
-					}
-				});
 			}
 		});
 	}