enhance: PizzaxデータをindexedDBに保存するように (#9225)

* Revert "Revert #8098"

This reverts commit 8b9dc962ae.

* fix

* use deepClone instead of deepclone

* defaultStore.loaded

* fix load

* wait ready

* use top-level await, await in device-kind.ts
This commit is contained in:
tamaina 2023-02-02 16:43:56 +09:00 committed by GitHub
parent 00e3453ce1
commit 8a6f73c5ff
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
7 changed files with 202 additions and 92 deletions

View file

@ -43,6 +43,7 @@ import { reloadChannel } from '@/scripts/unison-reload';
import { reactionPicker } from '@/scripts/reaction-picker'; import { reactionPicker } from '@/scripts/reaction-picker';
import { getUrlWithoutLoginId } from '@/scripts/login-id'; import { getUrlWithoutLoginId } from '@/scripts/login-id';
import { getAccountFromId } from '@/scripts/get-account-from-id'; import { getAccountFromId } from '@/scripts/get-account-from-id';
import { deckStore } from './ui/deck/deck-store';
import { miLocalStorage } from './local-storage'; import { miLocalStorage } from './local-storage';
import { claimAchievement, claimedAchievements } from './scripts/achievements'; import { claimAchievement, claimedAchievements } from './scripts/achievements';
import { fetchCustomEmojis } from './custom-emojis'; import { fetchCustomEmojis } from './custom-emojis';
@ -216,6 +217,8 @@ if (splash) splash.addEventListener('transitionend', () => {
splash.remove(); splash.remove();
}); });
await deckStore.ready;
// https://github.com/misskey-dev/misskey/pull/8575#issuecomment-1114239210 // https://github.com/misskey-dev/misskey/pull/8575#issuecomment-1114239210
// なぜかinit.tsの内容が2回実行されることがあるため、mountするdivを1つに制限する // なぜかinit.tsの内容が2回実行されることがあるため、mountするdivを1つに制限する
const rootEl = (() => { const rootEl = (() => {
@ -266,6 +269,8 @@ if (lastVersion !== version) {
} }
} }
await defaultStore.ready;
// NOTE: この処理は必ず↑のクライアント更新時処理より後に来ること(テーマ再構築のため) // NOTE: この処理は必ず↑のクライアント更新時処理より後に来ること(テーマ再構築のため)
watch(defaultStore.reactiveState.darkMode, (darkMode) => { watch(defaultStore.reactiveState.darkMode, (darkMode) => {
applyTheme(darkMode ? ColdDeviceStorage.get('darkTheme') : ColdDeviceStorage.get('lightTheme')); applyTheme(darkMode ? ColdDeviceStorage.get('darkTheme') : ColdDeviceStorage.get('lightTheme'));

View file

@ -1,136 +1,209 @@
// PIZZAX --- A lightweight store // PIZZAX --- A lightweight store
import { onUnmounted, Ref, ref, watch } from 'vue'; import { onUnmounted, Ref, ref, watch } from 'vue';
import { BroadcastChannel } from 'broadcast-channel';
import { $i } from './account'; import { $i } from './account';
import { api } from './os'; import { api } from './os';
import { get, set } from './scripts/idb-proxy';
import { defaultStore } from './store';
import { stream } from './stream'; import { stream } from './stream';
import { deepClone } from './scripts/clone';
type StateDef = Record<string, { type StateDef = Record<string, {
where: 'account' | 'device' | 'deviceAccount'; where: 'account' | 'device' | 'deviceAccount';
default: any; default: any;
}>; }>;
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; 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]['default'];
userId?: string;
};
const connection = $i && stream.useChannel('main'); const connection = $i && stream.useChannel('main');
export class Storage<T extends StateDef> { export class Storage<T extends StateDef> {
public readonly ready: Promise<void>;
public readonly loaded: Promise<void>;
public readonly key: string; public readonly key: string;
public readonly keyForLocalStorage: 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; public readonly def: T;
// TODO: これが実装されたらreadonlyにしたい: https://github.com/microsoft/TypeScript/issues/37487 // TODO: これが実装されたらreadonlyにしたい: https://github.com/microsoft/TypeScript/issues/37487
public readonly state: { [K in keyof T]: T[K]['default'] }; public readonly state: State<T>;
public readonly reactiveState: { [K in keyof T]: Ref<T[K]['default']> }; public readonly reactiveState: ReactiveState<T>;
public readonly ready: Promise<void>;
private markAsReady: () => void = () => {}; private pizzaxChannel: BroadcastChannel<PizzaxChannelMessage<T>>;
// 簡易的にキューイングして占有ロックとする
private currentIdbJob: Promise<any> = Promise.resolve();
private addIdbSetJob<T>(job: () => Promise<T>) {
const promise = this.currentIdbJob.then(job, e => {
console.error('Pizzax failed to save data to idb!', e);
return job();
});
this.currentIdbJob = promise;
return promise;
}
constructor(key: string, def: T) { constructor(key: string, def: T) {
this.ready = new Promise((res) => {
this.markAsReady = res;
});
this.key = key; this.key = key;
this.keyForLocalStorage = 'pizzax::' + key; this.deviceStateKeyName = `pizzax::${key}`;
this.deviceAccountStateKeyName = $i ? `pizzax::${key}::${$i.id}` : '';
this.registryCacheKeyName = $i ? `pizzax::${key}::cache::${$i.id}` : '';
this.def = def; this.def = def;
// TODO: indexedDBにする this.pizzaxChannel = new BroadcastChannel(`pizzax::${key}`);
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 = {}; this.state = {} as State<T>;
const reactiveState = {}; this.reactiveState = {} as ReactiveState<T>;
for (const [k, v] of Object.entries(def)) {
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);
}
this.ready = this.init();
this.loaded = this.ready.then(() => this.load());
}
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) || {} : {};
for (const [k, v] of Object.entries(this.def) as [keyof T, T[keyof T]['default']][]) {
if (v.where === 'device' && Object.prototype.hasOwnProperty.call(deviceState, k)) { if (v.where === 'device' && Object.prototype.hasOwnProperty.call(deviceState, k)) {
state[k] = deviceState[k]; this.reactiveState[k].value = this.state[k] = deviceState[k];
} else if (v.where === 'account' && $i && Object.prototype.hasOwnProperty.call(registryCache, k)) { } else if (v.where === 'account' && $i && Object.prototype.hasOwnProperty.call(registryCache, k)) {
state[k] = registryCache[k]; this.reactiveState[k].value = this.state[k] = registryCache[k];
} else if (v.where === 'deviceAccount' && Object.prototype.hasOwnProperty.call(deviceAccountState, k)) { } else if (v.where === 'deviceAccount' && Object.prototype.hasOwnProperty.call(deviceAccountState, k)) {
state[k] = deviceAccountState[k]; this.reactiveState[k].value = this.state[k] = deviceAccountState[k];
} else { } else {
state[k] = v.default; this.reactiveState[k].value = this.state[k] = v.default;
if (_DEV_) console.log('Use default value', k, v.default); if (_DEV_) console.log('Use default value', k, v.default);
} }
} }
for (const [k, v] of Object.entries(state)) {
reactiveState[k] = ref(v); this.pizzaxChannel.addEventListener('message', ({ where, key, value, userId }) => {
} // アカウント変更すればunisonReloadが効くため、このreturnが発火することは
this.state = state as any; // まずないと思うけど一応弾いておく
this.reactiveState = reactiveState as any; if (where === 'deviceAccount' && !($i && userId !== $i.id)) return;
this.reactiveState[key].value = this.state[key] = value;
});
if ($i) { if ($i) {
// なぜかsetTimeoutしないとapi関数内でエラーになる(おそらく循環参照してることに原因がありそう)
window.setTimeout(() => {
api('i/registry/get-all', { scope: ['client', this.key] }).then(kvs => {
const cache = {};
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];
cache[k] = kvs[k];
} else {
state[k] = v.default;
reactiveState[k].value = v.default;
}
}
}
localStorage.setItem(this.keyForLocalStorage + '::cache::' + $i.id, JSON.stringify(cache));
this.markAsReady();
});
}, 1);
// streamingのuser storage updateイベントを監視して更新 // streamingのuser storage updateイベントを監視して更新
connection?.on('registryUpdated', ({ scope, key, value }: { scope: string[], key: keyof T, value: T[typeof key]['default'] }) => { 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; 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 = this.state[key] = value;
this.reactiveState[key].value = value;
this.addIdbSetJob(async () => {
const cache = JSON.parse(localStorage.getItem(this.keyForLocalStorage + '::cache::' + $i.id) || '{}'); const cache = await get(this.registryCacheKeyName);
if (cache[key] !== value) { if (cache[key] !== value) {
cache[key] = value; cache[key] = value;
localStorage.setItem(this.keyForLocalStorage + '::cache::' + $i.id, JSON.stringify(cache)); await set(this.registryCacheKeyName, cache);
} }
});
}); });
} else {
this.markAsReady();
} }
} }
public set<K extends keyof T>(key: K, value: T[K]['default']): void { private load(): Promise<void> {
if (_DEV_) console.log('set', key, value); return new Promise((resolve, reject) => {
if ($i) {
// api関数と循環参照なので一応setTimeoutしておく
window.setTimeout(async () => {
await defaultStore.ready;
this.state[key] = value; api('i/registry/get-all', { scope: ['client', this.key] })
this.reactiveState[key].value = value; .then(kvs => {
const cache: Partial<T> = {};
for (const [k, v] of Object.entries(this.def) as [keyof T, T[keyof T]['default']][]) {
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];
} else {
this.reactiveState[k].value = this.state[k] = v.default;
}
}
}
return set(this.registryCacheKeyName, cache);
})
.then(() => resolve());
}, 1);
} else {
resolve();
}
});
}
switch (this.def[key].where) { public set<K extends keyof T>(key: K, value: T[K]['default']): Promise<void> {
case 'device': { // IndexedDBやBroadcastChannelで扱うために単純なオブジェクトにする
const deviceState = JSON.parse(localStorage.getItem(this.keyForLocalStorage) || '{}'); // (JSON.parse(JSON.stringify(value))の代わり)
deviceState[key] = value; const rawValue = deepClone(value);
localStorage.setItem(this.keyForLocalStorage, JSON.stringify(deviceState));
break; if (_DEV_) console.log('set', key, rawValue, value);
this.reactiveState[key].value = this.state[key] = rawValue;
return this.addIdbSetJob(async () => {
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);
break;
}
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);
break;
}
case 'account': {
if ($i == null) break;
const cache = await get(this.registryCacheKeyName) || {};
cache[key] = rawValue;
await set(this.registryCacheKeyName, cache);
await api('i/registry/set', {
scope: ['client', this.key],
key: key.toString(),
value: rawValue,
});
break;
}
} }
case 'deviceAccount': { if (_DEV_) console.log(`set ${key} complete`);
if ($i == null) break; });
const deviceAccountState = JSON.parse(localStorage.getItem(this.keyForLocalStorage + '::' + $i.id) || '{}');
deviceAccountState[key] = value;
localStorage.setItem(this.keyForLocalStorage + '::' + $i.id, JSON.stringify(deviceAccountState));
break;
}
case 'account': {
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;
}
}
} }
public push<K extends keyof T>(key: K, value: ArrayElement<T[K]['default']>): void { public push<K extends keyof T>(key: K, value: ArrayElement<T[K]['default']>): void {
@ -140,6 +213,7 @@ export class Storage<T extends StateDef> {
public reset(key: keyof T) { public reset(key: keyof T) {
this.set(key, this.def[key].default); this.set(key, this.def[key].default);
return this.def[key].default;
} }
/** /**
@ -174,4 +248,25 @@ export class Storage<T extends StateDef> {
}, },
}; };
} }
// 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);
}
}
} }

View file

@ -1,5 +1,7 @@
import { defaultStore } from '@/store'; import { defaultStore } from '@/store';
await defaultStore.ready;
const ua = navigator.userAgent.toLowerCase(); const ua = navigator.userAgent.toLowerCase();
const isTablet = /ipad/.test(ua) || (/mobile|iphone|android/.test(ua) && window.innerWidth > 700); const isTablet = /ipad/.test(ua) || (/mobile|iphone|android/.test(ua) && window.innerWidth > 700);
const isSmartphone = !isTablet && /mobile|iphone|android/.test(ua); const isSmartphone = !isTablet && /mobile|iphone|android/.test(ua);

View file

@ -333,6 +333,16 @@ export class ColdDeviceStorage {
} }
} }
public static getAll(): Partial<typeof this.default> {
return (Object.keys(this.default) as (keyof typeof this.default)[]).reduce((acc, key) => {
const value = localStorage.getItem(PREFIX + key);
if (value != null) {
acc[key] = JSON.parse(value);
}
return acc;
}, {} as any);
}
public static set<T extends keyof typeof ColdDeviceStorage.default>(key: T, value: typeof ColdDeviceStorage.default[T]): void { public static set<T extends keyof typeof ColdDeviceStorage.default>(key: T, value: typeof ColdDeviceStorage.default[T]): void {
// 呼び出し側のバグ等で undefined が来ることがある // 呼び出し側のバグ等で undefined が来ることがある
// undefined を文字列として miLocalStorage に入れると参照する際の JSON.parse でコケて不具合の元になるため無視 // undefined を文字列として miLocalStorage に入れると参照する際の JSON.parse でコケて不具合の元になるため無視

View file

@ -1,7 +1,5 @@
import { inject } from 'vue';
import { post } from '@/os'; import { post } from '@/os';
import { $i, login } from '@/account'; import { $i, login } from '@/account';
import { defaultStore } from '@/store';
import { getAccountFromId } from '@/scripts/get-account-from-id'; import { getAccountFromId } from '@/scripts/get-account-from-id';
import { mainRouter } from '@/router'; import { mainRouter } from '@/router';

View file

@ -132,7 +132,7 @@ if (window.innerWidth < 1024) {
document.documentElement.style.overflowY = 'scroll'; document.documentElement.style.overflowY = 'scroll';
defaultStore.ready.then(() => { defaultStore.loaded.then(() => {
if (defaultStore.state.widgets.length === 0) { if (defaultStore.state.widgets.length === 0) {
defaultStore.set('widgets', [{ defaultStore.set('widgets', [{
name: 'calendar', name: 'calendar',

View file

@ -150,7 +150,7 @@ if (window.innerWidth > 1024) {
} }
} }
defaultStore.ready.then(() => { defaultStore.loaded.then(() => {
if (defaultStore.state.widgets.length === 0) { if (defaultStore.state.widgets.length === 0) {
defaultStore.set('widgets', [{ defaultStore.set('widgets', [{
name: 'calendar', name: 'calendar',