From dbd46fbeb5e156eb21ed1fe78ad44ff984f75d82 Mon Sep 17 00:00:00 2001 From: tamaina Date: Sun, 9 Jan 2022 02:55:27 +0900 Subject: [PATCH] =?UTF-8?q?=E5=88=9D=E6=9C=9F=E5=80=A4=E3=81=AB=E3=83=87?= =?UTF-8?q?=E3=83=95=E3=82=A9=E3=83=AB=E3=83=88=E5=80=A4=E3=82=92=E6=8C=BF?= =?UTF-8?q?=E5=85=A5=E3=81=99=E3=82=8B=20&=20JSON.parse/stringify=E6=93=8D?= =?UTF-8?q?=E4=BD=9C=E3=82=92deepcopy=E3=81=AB?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- packages/client/package.json | 1 + packages/client/src/pizzax.ts | 55 ++++++++++++++++++----------------- packages/client/tsconfig.json | 1 + packages/client/yarn.lock | 12 ++++++++ 4 files changed, 43 insertions(+), 26 deletions(-) diff --git a/packages/client/package.json b/packages/client/package.json index 167ab2e816..5f841dc77a 100644 --- a/packages/client/package.json +++ b/packages/client/package.json @@ -55,6 +55,7 @@ "css-loader": "6.5.1", "cssnano": "5.0.14", "date-fns": "2.28.0", + "deepcopy": "2.1.0", "escape-regexp": "0.0.1", "eslint": "8.6.0", "eslint-plugin-vue": "8.2.0", diff --git a/packages/client/src/pizzax.ts b/packages/client/src/pizzax.ts index a4c54ccd57..17a91af58b 100644 --- a/packages/client/src/pizzax.ts +++ b/packages/client/src/pizzax.ts @@ -4,6 +4,7 @@ import { api } from './os'; import { get, set } from './scripts/idb-proxy'; import { defaultStore } from './store'; import { stream } from './stream'; +import * as deepcopy from 'deepcopy'; // SafariがBroadcastChannel未実装なのでライブラリを使う import { BroadcastChannel } from 'broadcast-channel'; @@ -20,7 +21,7 @@ type ArrayElement = A extends readonly (infer T)[] ? T : never; type PizzaxChannelMessage = { where: 'device' | 'deviceAccount'; key: keyof T; - value: T[keyof T]; + value: T[keyof T]['default']; userId?: string; }; @@ -38,8 +39,8 @@ export class Storage { public readonly def: T; // TODO: これが実装されたらreadonlyにしたい: https://github.com/microsoft/TypeScript/issues/37487 - public readonly state = {} as State; - public readonly reactiveState = {} as ReactiveState; + public readonly state: State; + public readonly reactiveState: ReactiveState; private pizzaxChannel: BroadcastChannel>; @@ -63,6 +64,14 @@ export class Storage { this.pizzaxChannel = new BroadcastChannel(`pizzax::${key}`); + this.state = {} as State; + this.reactiveState = {} as ReactiveState; + + 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()); } @@ -74,28 +83,24 @@ export class Storage { 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]][]) { + 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)) { - this.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)) { - this.state[k] = registryCache[k]; + this.reactiveState[k].value = this.state[k] = registryCache[k]; } else if (v.where === 'deviceAccount' && Object.prototype.hasOwnProperty.call(deviceAccountState, k)) { - this.state[k] = deviceAccountState[k]; + this.reactiveState[k].value = this.state[k] = deviceAccountState[k]; } else { - this.state[k] = v.default; + this.reactiveState[k].value = 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); - } this.pizzaxChannel.addEventListener('message', ({ where, key, value, userId }) => { // アカウント変更すればunisonReloadが効くため、このreturnが発火することは // まずないと思うけど一応弾いておく if (where === 'deviceAccount' && !($i && userId !== $i.id)) return; - this.state[key] = value; - this.reactiveState[key].value = value; + this.reactiveState[key].value = this.state[key] = value; }); if ($i) { @@ -103,8 +108,7 @@ export class Storage { 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.reactiveState[key].value = this.state[key] = value; this.addIdbSetJob(async () => { const cache = await get(this.registryCacheKeyName); @@ -126,16 +130,14 @@ export class Storage { api('i/registry/get-all', { scope: ['client', this.key] }) .then(kvs => { - const cache = {}; - for (const [k, v] of Object.entries(this.def)) { + const cache: Partial = {}; + 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.state[k as keyof T] = kvs[k]; - this.reactiveState[k as keyof T].value = kvs[k as string]; - cache[k] = kvs[k]; + this.reactiveState[k].value = this.state[k] = (kvs as Partial)[k]; + cache[k] = (kvs as Partial)[k]; } else { - this.state[k as keyof T] = v.default; - this.reactiveState[k].value = v.default; + this.reactiveState[k].value = this.state[k] = v.default; } } } @@ -151,12 +153,13 @@ export class Storage { } public set(key: K, value: T[K]['default']): Promise { - const rawValue = JSON.parse(JSON.stringify(value)); + // IndexedDBやBroadcastChannelで扱うために単純なオブジェクトにする + // (JSON.parse(JSON.stringify(value))の代わり) + const rawValue = deepcopy(value); if (_DEV_) console.log('set', key, rawValue, value); - this.state[key] = rawValue; - this.reactiveState[key].value = rawValue; + this.reactiveState[key].value = this.state[key] = rawValue; return this.addIdbSetJob(async () => { if (_DEV_) console.log(`set ${key} start`); @@ -192,7 +195,7 @@ export class Storage { await set(this.registryCacheKeyName, cache); await api('i/registry/set', { scope: ['client', this.key], - key: key, + key: key.toString(), value: rawValue }); break; diff --git a/packages/client/tsconfig.json b/packages/client/tsconfig.json index b44cf2f895..f344ae09c6 100644 --- a/packages/client/tsconfig.json +++ b/packages/client/tsconfig.json @@ -12,6 +12,7 @@ "target": "es2017", "module": "esnext", "moduleResolution": "node", + "allowSyntheticDefaultImports": true, "removeComments": false, "noLib": false, "strict": true, diff --git a/packages/client/yarn.lock b/packages/client/yarn.lock index 80cf1fc982..76cc499b06 100644 --- a/packages/client/yarn.lock +++ b/packages/client/yarn.lock @@ -2097,6 +2097,13 @@ deep-is@^0.1.3: resolved "https://registry.yarnpkg.com/deep-is/-/deep-is-0.1.3.tgz#b369d6fb5dbc13eecf524f91b070feedc357cf34" integrity sha1-s2nW+128E+7PUk+RsHD+7cNXzzQ= +deepcopy@2.1.0: + version "2.1.0" + resolved "https://registry.yarnpkg.com/deepcopy/-/deepcopy-2.1.0.tgz#2deb0dd52d079c2ecb7924b640a7c3abd4db1d6d" + integrity sha512-8cZeTb1ZKC3bdSCP6XOM1IsTczIO73fdqtwa2B0N15eAz7gmyhQo+mc5gnFuulsgN3vIQYmTgbmQVKalH1dKvQ== + dependencies: + type-detect "^4.0.8" + define-properties@^1.1.2, define-properties@^1.1.3: version "1.1.3" resolved "https://registry.yarnpkg.com/define-properties/-/define-properties-1.1.3.tgz#cf88da6cbee26fe6db7094f61d870cbd84cee9f1" @@ -5934,6 +5941,11 @@ type-check@^0.4.0, type-check@~0.4.0: dependencies: prelude-ls "^1.2.1" +type-detect@^4.0.8: + version "4.0.8" + resolved "https://registry.yarnpkg.com/type-detect/-/type-detect-4.0.8.tgz#7646fb5f18871cfbb7749e69bd39a6388eb7450c" + integrity sha512-0fr/mIH1dlO+x7TlcMy+bIDqKPsw/70tVyeHW787goQjhmqaZe10uwLujubK9q9Lg6Fiho1KUKDYz0Z7k7g5/g== + type-fest@^0.20.2: version "0.20.2" resolved "https://registry.yarnpkg.com/type-fest/-/type-fest-0.20.2.tgz#1bf207f4b28f91583666cb5fbd327887301cd5f4"