summaryrefslogtreecommitdiff
path: root/packages/client/src
diff options
context:
space:
mode:
Diffstat (limited to 'packages/client/src')
-rw-r--r--packages/client/src/pizzax.ts229
-rw-r--r--packages/client/src/ui/chat/index.vue4
-rw-r--r--packages/client/src/ui/deck.vue4
3 files changed, 148 insertions, 89 deletions
diff --git a/packages/client/src/pizzax.ts b/packages/client/src/pizzax.ts
index dbbbfc228a..c8f75273fb 100644
--- a/packages/client/src/pizzax.ts
+++ b/packages/client/src/pizzax.ts
@@ -1,6 +1,7 @@
import { onUnmounted, Ref, ref, watch } from 'vue';
import { $i } from './account';
import { api } from './os';
+import { get, set } from './scripts/idb-proxy';
import { stream } from './stream';
type StateDef = Record<string, {
@@ -8,119 +9,152 @@ type StateDef = Record<string, {
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;
const connection = $i && stream.useChannel('main');
export class Storage<T extends StateDef> {
+ public readonly ready: PromiseLike<void>;
+
public readonly key: string;
- public readonly keyForLocalStorage: string;
+ public readonly deviceStateKeyName: string;
+ public readonly deviceAccountStateKeyName: string;
+ public readonly registryCacheKeyName: string;
public readonly def: T;
// TODO: これが実装されたらreadonlyにしたい: https://github.com/microsoft/TypeScript/issues/37487
- public readonly state: { [K in keyof T]: T[K]['default'] };
- public readonly reactiveState: { [K in keyof T]: Ref<T[K]['default']> };
+ public readonly state = {} as State<T>;
+ public readonly reactiveState = {} as ReactiveState<T>;
+
+ // indexedDB保存を重複させないために簡易的にキューイング
+ private nextIdbJob: Promise<any> = Promise.resolve();
+ private addIdbSetJob<T>(job: () => Promise<T>) {
+ const promise = this.nextIdbJob.then(job, e => {
+ console.error('Pizzax failed to save data to idb!', e);
+ return job();
+ });
+ this.nextIdbJob = promise;
+ return promise;
+ }
constructor(key: string, def: T) {
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;
- // TODO: indexedDBにする
- 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) || '{}') : {};
+ this.ready = this.init();
+ }
- const state = {};
- const reactiveState = {};
- for (const [k, v] of Object.entries(def)) {
- if (v.where === 'device' && Object.prototype.hasOwnProperty.call(deviceState, k)) {
- state[k] = deviceState[k];
- } else if (v.where === 'account' && $i && Object.prototype.hasOwnProperty.call(registryCache, k)) {
- state[k] = registryCache[k];
- } else if (v.where === 'deviceAccount' && Object.prototype.hasOwnProperty.call(deviceAccountState, k)) {
- state[k] = deviceAccountState[k];
- } else {
- state[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.state = state as any;
- this.reactiveState = reactiveState as any;
+ private init(): Promise<void> {
+ return new Promise(async (resolve, reject) => {
+ await this.migrate();
- if ($i) {
- // なぜかsetTimeoutしないとapi関数内でエラーになる(おそらく循環参照してることに原因がありそう)
- 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;
+ 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);
+ }
+
+ if ($i) {
+ // なぜかsetTimeoutしないとapi関数内でエラーになる(おそらく循環参照してることに原因がありそう)
+ setTimeout(() => {
+ api('i/registry/get-all', { scope: ['client', this.key] })
+ .then(kvs => {
+ const cache = {};
+ for (const [k, v] of Object.entries(this.def)) {
+ if (v.where === 'account') {
+ if (Object.prototype.hasOwnProperty.call(kvs, k)) {
+ this.state[k as keyof T] = kvs[k];
+ this.reactiveState[k as keyof T].value = kvs[k as string];
+ cache[k] = kvs[k];
+ } else {
+ this.state[k as keyof T] = v.default;
+ this.reactiveState[k].value = v.default;
+ }
}
}
- }
- localStorage.setItem(this.keyForLocalStorage + '::cache::' + $i.id, JSON.stringify(cache));
- });
- }, 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;
+ return set(this.registryCacheKeyName, cache);
+ })
+ .then(() => resolve());
+ }, 1);
- const cache = JSON.parse(localStorage.getItem(this.keyForLocalStorage + '::cache::' + $i.id) || '{}');
- if (cache[key] !== value) {
- cache[key] = value;
- localStorage.setItem(this.keyForLocalStorage + '::cache::' + $i.id, JSON.stringify(cache));
- }
- });
- }
+ // 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;
+
+ const cache = JSON.parse(localStorage.getItem(this.keyForLocalStorage + '::cache::' + $i.id) || '{}');
+ if (cache[key] !== value) {
+ cache[key] = value;
+ localStorage.setItem(this.keyForLocalStorage + '::cache::' + $i.id, JSON.stringify(cache));
+ }
+ });
+ }
+ });
}
- public set<K extends keyof T>(key: K, value: T[K]['default']): void {
- if (_DEV_) console.log('set', key, value);
+ public set<K extends keyof T>(key: K, value: T[K]['default']): Promise<void> {
+ const rawValue = JSON.parse(JSON.stringify(value));
- this.state[key] = value;
- this.reactiveState[key].value = value;
+ if (_DEV_) console.log('set', key, rawValue, value);
- switch (this.def[key].where) {
- case 'device': {
- const deviceState = JSON.parse(localStorage.getItem(this.keyForLocalStorage) || '{}');
- deviceState[key] = value;
- localStorage.setItem(this.keyForLocalStorage, JSON.stringify(deviceState));
- break;
- }
- case 'deviceAccount': {
- 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;
+ this.state[key] = rawValue;
+ this.reactiveState[key].value = rawValue;
+
+ return this.addIdbSetJob(async () => {
+ if (_DEV_) console.log(`set ${key} start`);
+ switch (this.def[key].where) {
+ case 'device': {
+ const deviceState = await get(this.deviceStateKeyName) || {};
+ deviceState[key] = rawValue;
+ await set(this.deviceStateKeyName, deviceState);
+ break;
+ }
+ case 'deviceAccount': {
+ if ($i == null) break;
+ 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,
+ value: rawValue
+ });
+ break;
+ }
}
- }
+ if (_DEV_) console.log(`set ${key} complete`);
+ });
}
public push<K extends keyof T>(key: K, value: ArrayElement<T[K]['default']>): void {
@@ -164,4 +198,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);
+ }
+ }
}
diff --git a/packages/client/src/ui/chat/index.vue b/packages/client/src/ui/chat/index.vue
index f66ab4dcee..10cad6b98e 100644
--- a/packages/client/src/ui/chat/index.vue
+++ b/packages/client/src/ui/chat/index.vue
@@ -160,12 +160,14 @@ export default defineComponent({
}
},
- created() {
+ async created() {
if (window.innerWidth < 1024) {
localStorage.setItem('ui', 'default');
location.reload();
}
+ await store.ready;
+
os.api('users/lists/list').then(lists => {
this.lists = lists;
});
diff --git a/packages/client/src/ui/deck.vue b/packages/client/src/ui/deck.vue
index 73dc83180f..e1718d3df9 100644
--- a/packages/client/src/ui/deck.vue
+++ b/packages/client/src/ui/deck.vue
@@ -68,7 +68,7 @@ export default defineComponent({
DeckColumnCore,
},
- setup() {
+ async setup() {
const isMobile = ref(window.innerWidth <= 500);
window.addEventListener('resize', () => {
isMobile.value = window.innerWidth <= 500;
@@ -81,6 +81,8 @@ export default defineComponent({
drawerMenuShowing.value = false;
});
+ await deckStore.ready;
+
const columns = deckStore.reactiveState.columns;
const layout = deckStore.reactiveState.layout;
const menuIndicated = computed(() => {
generated by cgit v1.2.3-freya (git 2.53.0.84.g453e7b744a) at 2026-04-27 15:18:42 +0000