初期値にデフォルト値を挿入する & JSON.parse/stringify操作をdeepcopyに

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",

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> = A extends readonly (infer T)[] ? T : never;
 type PizzaxChannelMessage<T extends StateDef> = {
 	where: 'device' | 'deviceAccount';
 	key: keyof T;
-	value: T[keyof T];
+	value: T[keyof T]['default'];
 	userId?: string;
 };
 
@@ -38,8 +39,8 @@ export class Storage<T extends StateDef> {
 	public readonly def: T;
 
 	// TODO: これが実装されたらreadonlyにしたい: https://github.com/microsoft/TypeScript/issues/37487
-	public readonly state = {} as State<T>;
+	public readonly state: State<T>;
-	public readonly reactiveState = {} as ReactiveState<T>;
+	public readonly reactiveState: ReactiveState<T>;
 
 	private pizzaxChannel: BroadcastChannel<PizzaxChannelMessage<T>>;
 
@@ -63,6 +64,14 @@ export class Storage<T extends StateDef> {
 
 		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);
+		}
+	
 		this.ready = this.init();
 		this.loaded = this.ready.then(() => this.load());
 	}
@@ -74,28 +83,24 @@ export class Storage<T extends StateDef> {
 		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 = this.state[key] = value;
-			this.reactiveState[key].value = value;
 		});
 
 		if ($i) {
@@ -103,8 +108,7 @@ export class Storage<T extends StateDef> {
 			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 = this.state[key] = value;
-				this.reactiveState[key].value = value;
 	
 				this.addIdbSetJob(async () => {
 					const cache = await get(this.registryCacheKeyName);
@@ -126,16 +130,14 @@ export class Storage<T extends StateDef> {
 
 					api('i/registry/get-all', { scope: ['client', this.key] })
 					.then(kvs => {
-						const cache = {};
+						const cache: Partial<T> = {};
-						for (const [k, v] of Object.entries(this.def)) {
+						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].value = this.state[k] = (kvs as Partial<T>)[k];
-									this.reactiveState[k as keyof T].value = kvs[k as string];
+									cache[k] = (kvs as Partial<T>)[k];
-									cache[k] = kvs[k];
 								} else {
-									this.state[k as keyof T] = v.default;
+									this.reactiveState[k].value = this.state[k] = v.default;
-									this.reactiveState[k].value = v.default;
 								}
 							}
 						}
@@ -151,12 +153,13 @@ export class Storage<T extends StateDef> {
 	}
 
 	public set<K extends keyof T>(key: K, value: T[K]['default']): Promise<void> {
-		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 = this.state[key] = rawValue;
-		this.reactiveState[key].value = rawValue;
 
 		return this.addIdbSetJob(async () => {
 			if (_DEV_) console.log(`set ${key} start`);
@@ -192,7 +195,7 @@ export class Storage<T extends StateDef> {
 					await set(this.registryCacheKeyName, cache);
 					await api('i/registry/set', {
 						scope: ['client', this.key],
-						key: key,
+						key: key.toString(),
 						value: rawValue
 					});
 					break;

packages/client/tsconfig.json

@@ -12,6 +12,7 @@
 		"target": "es2017",
 		"module": "esnext",
 		"moduleResolution": "node",
+		"allowSyntheticDefaultImports": true,
 		"removeComments": false,
 		"noLib": false,
 		"strict": true,

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"