diff --git a/packages/client/src/pizzax.ts b/packages/client/src/pizzax.ts index 867d2f9bd3d0365e2f68d551eb1093e492bb2f39..51b5cd40d82b3d8f430432c0ab621efc43df4eaf 100644 --- a/packages/client/src/pizzax.ts +++ b/packages/client/src/pizzax.ts @@ -4,6 +4,8 @@ import { api } from './os'; import { get, set } from './scripts/idb-proxy'; import { defaultStore } from './store'; import { stream } from './stream'; +// SafariãŒBroadcastChannel未実装ãªã®ã§ãƒ©ã‚¤ãƒ–ラリを使ㆠ+import { BroadcastChannel } from 'broadcast-channel'; type StateDef = Record<string, { where: 'account' | 'device' | 'deviceAccount'; @@ -15,6 +17,13 @@ type ReactiveState<T extends StateDef> = { [K in keyof T]: Ref<T[K]['default']>; type ArrayElement<A> = A extends readonly (infer T)[] ? T : never; +type PizzaxChannelMessage<T extends StateDef> = { + where: 'device' | 'deviceAccount'; + key: keyof T; + value: T[keyof T]; + userId?: string; +}; + const connection = $i && stream.useChannel('main'); export class Storage<T extends StateDef> { @@ -22,9 +31,9 @@ export class Storage<T extends StateDef> { public readonly loaded: Promise<void>; public readonly key: string; - public readonly deviceStateKeyName: string; - public readonly deviceAccountStateKeyName: string; - public readonly registryCacheKeyName: string; + public readonly deviceStateKeyName: `pizzax::${this['key']}`; + public readonly deviceAccountStateKeyName: `pizzax::${this['key']}::${string}` | ''; + public readonly registryCacheKeyName: `pizzax::${this['key']}::cache::${string}` | ''; public readonly def: T; @@ -32,6 +41,8 @@ export class Storage<T extends StateDef> { public readonly state = {} as State<T>; public readonly reactiveState = {} as ReactiveState<T>; + private pizzaxChannel: BroadcastChannel<PizzaxChannelMessage<T>>; + // 簡易的ã«ã‚ューイングã—ã¦å 有ãƒãƒƒã‚¯ã¨ã™ã‚‹ private currentIdbJob: Promise<any> = Promise.resolve(); private addIdbSetJob<T>(job: () => Promise<T>) { @@ -50,6 +61,8 @@ export class Storage<T extends StateDef> { this.registryCacheKeyName = $i ? `pizzax::${key}::cache::${$i.id}` : ''; this.def = def; + this.pizzaxChannel = new BroadcastChannel(`pizzax::${key}`); + this.ready = this.init(); this.loaded = this.ready.then(() => this.load()); } @@ -77,11 +90,17 @@ export class Storage<T extends StateDef> { this.reactiveState[k] = ref(v); } + this.pizzaxChannel.addEventListener('message', ({ where, key, value, userId }) => { + if (where === 'deviceAccount' && !($i && userId !== $i.id)) return; + this.state[key] = value; + this.reactiveState[key].value = value; + }); + 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; @@ -141,6 +160,11 @@ export class Storage<T extends StateDef> { if (_DEV_) console.log(`set ${key} start`); switch (this.def[key].where) { case 'device': { + this.pizzaxChannel.postMessage({ + where: 'device', + key, + value: rawValue, + }); const deviceState = await get(this.deviceStateKeyName) || {}; deviceState[key] = rawValue; await set(this.deviceStateKeyName, deviceState); @@ -148,6 +172,12 @@ export class Storage<T extends StateDef> { } case 'deviceAccount': { if ($i == null) break; + this.pizzaxChannel.postMessage({ + where: 'deviceAccount', + key, + value: rawValue, + userId: $i.id, + }); const deviceAccountState = await get(this.deviceAccountStateKeyName) || {}; deviceAccountState[key] = rawValue; await set(this.deviceAccountStateKeyName, deviceAccountState);