fix

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,10 +50,10 @@ 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) => {
+	private async init(): Promise<void> {
 		await this.migrate();
 
 		const deviceState: State<T> = await get(this.deviceStateKeyName) || {};
@@ -75,6 +76,27 @@ export class Storage<T extends StateDef> {
 			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(() => {
@@ -98,22 +120,6 @@ export class Storage<T extends StateDef> {
 					})
 					.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);
-						}
-					}
-				});
 			}
 		});
 	}