1
0
mirror of https://github.com/hotomoe/hotomoe synced 2024-12-15 23:28:08 +09:00
hotomoe/packages/client/src/pizzax.ts

270 lines
8.9 KiB
TypeScript
Raw Normal View History

2020-12-28 17:00:31 +09:00
import { onUnmounted, Ref, ref, watch } from 'vue';
import { $i } from './account';
2021-12-29 17:40:39 +09:00
import { api } from './os';
2021-12-30 00:18:27 +09:00
import { get, set } from './scripts/idb-proxy';
2022-01-04 13:35:30 +09:00
import { defaultStore } from './store';
2021-12-29 17:40:39 +09:00
import { stream } from './stream';
2022-04-28 02:57:59 +09:00
import { BroadcastChannel } from 'broadcast-channel';
type StateDef = Record<string, {
where: 'account' | 'device' | 'deviceAccount';
default: any;
}>;
2021-12-30 00:18:27 +09:00
type State<T extends StateDef> = { [K in keyof T]: T[K]['default']; };
type ReactiveState<T extends StateDef> = { [K in keyof T]: Ref<T[K]['default']>; };
type ArrayElement<A> = A extends readonly (infer T)[] ? T : never;
2022-01-05 00:55:30 +09:00
type PizzaxChannelMessage<T extends StateDef> = {
where: 'device' | 'deviceAccount';
key: keyof T;
value: T[keyof T]['default'];
2022-01-05 00:55:30 +09:00
userId?: string;
};
2021-12-30 02:38:17 +09:00
const connection = $i && stream.useChannel('main');
2021-12-30 00:18:27 +09:00
export class Storage<T extends StateDef> {
2022-01-02 20:31:48 +09:00
public readonly ready: Promise<void>;
public readonly loaded: Promise<void>;
2021-12-30 00:18:27 +09:00
public readonly key: string;
2022-01-05 00:55:30 +09:00
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;
// TODO: これが実装されたらreadonlyにしたい: https://github.com/microsoft/TypeScript/issues/37487
public readonly state: State<T>;
public readonly reactiveState: ReactiveState<T>;
2021-12-30 00:18:27 +09:00
2022-01-05 00:55:30 +09:00
private pizzaxChannel: BroadcastChannel<PizzaxChannelMessage<T>>;
2021-12-30 03:41:49 +09:00
// 簡易的にキューイングして占有ロックとする
2021-12-30 03:42:40 +09:00
private currentIdbJob: Promise<any> = Promise.resolve();
2021-12-30 00:18:27 +09:00
private addIdbSetJob<T>(job: () => Promise<T>) {
2021-12-30 03:42:40 +09:00
const promise = this.currentIdbJob.then(job, e => {
2021-12-30 00:18:27 +09:00
console.error('Pizzax failed to save data to idb!', e);
return job();
});
2021-12-30 03:42:40 +09:00
this.currentIdbJob = promise;
2021-12-30 00:18:27 +09:00
return promise;
}
2021-12-26 02:17:36 +09:00
constructor(key: string, def: T) {
this.key = key;
2021-12-30 00:18:27 +09:00
this.deviceStateKeyName = `pizzax::${key}`;
this.deviceAccountStateKeyName = $i ? `pizzax::${key}::${$i.id}` : '';
this.registryCacheKeyName = $i ? `pizzax::${key}::cache::${$i.id}` : '';
this.def = def;
2022-01-05 00:55:30 +09:00
this.pizzaxChannel = new BroadcastChannel(`pizzax::${key}`);
this.state = {} as State<T>;
this.reactiveState = {} as ReactiveState<T>;
for (const [k, v] of Object.entries(def) as [keyof T, T[keyof T]['default']][]) {
this.state[k] = v.default;
this.reactiveState[k] = ref(v.default);
}
2021-12-30 00:18:27 +09:00
this.ready = this.init();
2022-01-02 20:31:48 +09:00
this.loaded = this.ready.then(() => this.load());
2021-12-30 00:18:27 +09:00
}
2022-01-02 20:31:48 +09:00
private async init(): Promise<void> {
await this.migrate();
2021-12-30 00:34:23 +09:00
2022-01-02 20:31:48 +09:00
const deviceState: State<T> = await get(this.deviceStateKeyName) || {};
const deviceAccountState = $i ? await get(this.deviceAccountStateKeyName) || {} : {};
const registryCache = $i ? await get(this.registryCacheKeyName) || {} : {};
2021-12-30 00:18:27 +09:00
for (const [k, v] of Object.entries(this.def) as [keyof T, T[keyof T]['default']][]) {
2022-01-02 20:31:48 +09:00
if (v.where === 'device' && Object.prototype.hasOwnProperty.call(deviceState, k)) {
this.reactiveState[k].value = this.state[k] = deviceState[k];
2022-01-02 20:31:48 +09:00
} else if (v.where === 'account' && $i && Object.prototype.hasOwnProperty.call(registryCache, k)) {
this.reactiveState[k].value = this.state[k] = registryCache[k];
2022-01-02 20:31:48 +09:00
} else if (v.where === 'deviceAccount' && Object.prototype.hasOwnProperty.call(deviceAccountState, k)) {
this.reactiveState[k].value = this.state[k] = deviceAccountState[k];
2022-01-02 20:31:48 +09:00
} else {
this.reactiveState[k].value = this.state[k] = v.default;
2022-01-02 20:31:48 +09:00
if (_DEV_) console.log('Use default value', k, v.default);
}
2022-01-02 20:31:48 +09:00
}
2022-01-05 00:55:30 +09:00
this.pizzaxChannel.addEventListener('message', ({ where, key, value, userId }) => {
2022-01-05 01:25:34 +09:00
// アカウント変更すればunisonReloadが効くため、このreturnが発火することは
// まずないと思うけど一応弾いておく
2022-01-05 00:55:30 +09:00
if (where === 'deviceAccount' && !($i && userId !== $i.id)) return;
this.reactiveState[key].value = this.state[key] = value;
2022-01-05 00:55:30 +09:00
});
2022-01-02 20:31:48 +09:00
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;
2022-01-05 00:55:30 +09:00
this.reactiveState[key].value = this.state[key] = value;
2021-12-30 00:18:27 +09:00
2022-01-02 20:31:48 +09:00
this.addIdbSetJob(async () => {
const cache = await get(this.registryCacheKeyName);
if (cache[key] !== value) {
cache[key] = value;
await set(this.registryCacheKeyName, cache);
}
});
});
}
}
2022-01-04 13:35:30 +09:00
private load(): Promise<void> {
2022-01-02 20:31:48 +09:00
return new Promise((resolve, reject) => {
2021-12-30 00:18:27 +09:00
if ($i) {
2022-01-02 20:36:00 +09:00
// api関数と循環参照なので一応setTimeoutしておく
window.setTimeout(async () => {
2022-01-04 13:35:30 +09:00
await defaultStore.ready;
2021-12-30 00:18:27 +09:00
api('i/registry/get-all', { scope: ['client', this.key] })
.then(kvs => {
const cache: Partial<T> = {};
for (const [k, v] of Object.entries(this.def) as [keyof T, T[keyof T]['default']][]) {
2021-12-30 00:18:27 +09:00
if (v.where === 'account') {
if (Object.prototype.hasOwnProperty.call(kvs, k)) {
this.reactiveState[k].value = this.state[k] = (kvs as Partial<T>)[k];
cache[k] = (kvs as Partial<T>)[k];
2021-12-30 00:18:27 +09:00
} else {
this.reactiveState[k].value = this.state[k] = v.default;
2021-12-30 00:18:27 +09:00
}
}
}
2022-01-02 20:31:48 +09:00
2021-12-30 00:18:27 +09:00
return set(this.registryCacheKeyName, cache);
})
.then(() => resolve());
}, 1);
}
2022-01-02 20:33:57 +09:00
resolve();
2021-12-30 00:18:27 +09:00
});
}
2021-12-30 00:18:27 +09:00
public set<K extends keyof T>(key: K, value: T[K]['default']): Promise<void> {
// IndexedDBやBroadcastChannelで扱うために単純なオブジェクトにする
// (JSON.parse(JSON.stringify(value))の代わり)
const rawValue = structuredClone(value);
2021-12-30 02:03:39 +09:00
if (_DEV_) console.log('set', key, rawValue, value);
this.reactiveState[key].value = this.state[key] = rawValue;
2021-12-30 00:18:27 +09:00
return this.addIdbSetJob(async () => {
2021-12-30 02:30:24 +09:00
if (_DEV_) console.log(`set ${key} start`);
2021-12-30 00:18:27 +09:00
switch (this.def[key].where) {
case 'device': {
2022-01-05 00:55:30 +09:00
this.pizzaxChannel.postMessage({
where: 'device',
key,
value: rawValue,
});
2021-12-30 00:18:27 +09:00
const deviceState = await get(this.deviceStateKeyName) || {};
2021-12-30 02:03:39 +09:00
deviceState[key] = rawValue;
2021-12-30 00:18:27 +09:00
await set(this.deviceStateKeyName, deviceState);
break;
}
case 'deviceAccount': {
if ($i == null) break;
2022-01-05 00:55:30 +09:00
this.pizzaxChannel.postMessage({
where: 'deviceAccount',
key,
value: rawValue,
userId: $i.id,
});
2021-12-30 00:18:27 +09:00
const deviceAccountState = await get(this.deviceAccountStateKeyName) || {};
2021-12-30 02:03:39 +09:00
deviceAccountState[key] = rawValue;
2021-12-30 00:18:27 +09:00
await set(this.deviceAccountStateKeyName, deviceAccountState);
break;
}
case 'account': {
if ($i == null) break;
const cache = await get(this.registryCacheKeyName) || {};
2021-12-30 02:03:39 +09:00
cache[key] = rawValue;
2021-12-30 00:18:27 +09:00
await set(this.registryCacheKeyName, cache);
await api('i/registry/set', {
scope: ['client', this.key],
key: key.toString(),
2021-12-30 02:03:39 +09:00
value: rawValue
2021-12-30 00:18:27 +09:00
});
break;
}
}
2021-12-30 02:30:24 +09:00
if (_DEV_) console.log(`set ${key} complete`);
2021-12-30 00:18:27 +09:00
});
}
public push<K extends keyof T>(key: K, value: ArrayElement<T[K]['default']>): void {
const currentState = this.state[key];
this.set(key, [...currentState, value]);
}
public reset(key: keyof T) {
this.set(key, this.def[key].default);
2022-01-04 15:39:19 +09:00
return this.def[key].default;
}
/**
* getter/setterを作ります
* vue場で設定コントロールのmodelとして使う用
*/
public makeGetterSetter<K extends keyof T>(key: K, getter?: (v: T[K]) => unknown, setter?: (v: unknown) => T[K]) {
const valueRef = ref(this.state[key]);
2020-12-28 17:00:31 +09:00
const stop = watch(this.reactiveState[key], val => {
valueRef.value = val;
});
2020-12-28 19:57:09 +09:00
// NOTE: vueコンポーネント内で呼ばれない限りは、onUnmounted は無意味なのでメモリリークする
2020-12-28 17:00:31 +09:00
onUnmounted(() => {
stop();
});
// TODO: VueのcustomRef使うと良い感じになるかも
return {
get: () => {
if (getter) {
return getter(valueRef.value);
} else {
return valueRef.value;
}
},
set: (value: unknown) => {
const val = setter ? setter(value) : value;
this.set(key, val);
valueRef.value = val;
}
};
}
2021-12-30 00:34:23 +09:00
// localStorage => indexedDBのマイグレーション
private async migrate() {
const deviceState = localStorage.getItem(this.deviceStateKeyName);
if (deviceState) {
await set(this.deviceStateKeyName, JSON.parse(deviceState));
localStorage.removeItem(this.deviceStateKeyName);
}
const deviceAccountState = $i && localStorage.getItem(this.deviceAccountStateKeyName);
if ($i && deviceAccountState) {
await set(this.deviceAccountStateKeyName, JSON.parse(deviceAccountState));
localStorage.removeItem(this.deviceAccountStateKeyName);
}
const registryCache = $i && localStorage.getItem(this.registryCacheKeyName);
if ($i && registryCache) {
await set(this.registryCacheKeyName, JSON.parse(registryCache));
localStorage.removeItem(this.registryCacheKeyName);
}
}
}