fix the browser storage event not work right

up yarn version and bump deps

.changeset/itchy-hounds-perform.md

@@ -0,0 +1,5 @@
+---
+'@zcloak/ui-store': patch
+---
+
+fix the browser storage event not work right

.yarnrc.yml

@@ -4,10 +4,4 @@ enableProgressBars: false
 
 nodeLinker: node-modules
 
-plugins:
-  - path: .yarn/plugins/@yarnpkg/plugin-interactive-tools.cjs
-    spec: "@yarnpkg/plugin-interactive-tools"
-  - path: .yarn/plugins/@yarnpkg/plugin-version.cjs
-    spec: "@yarnpkg/plugin-version"
-
-yarnPath: .yarn/releases/yarn-3.3.0.cjs
+yarnPath: .yarn/releases/yarn-4.0.0-rc.40.cjs

package.json

@@ -3,7 +3,7 @@
   "bugs": "https://github.com/zCloak-Network/common-ts/issues",
   "homepage": "https://github.com/zCloak-Network/common-ts#readme",
   "license": "Apache-2.0",
-  "packageManager": "yarn@3.3.0",
+  "packageManager": "yarn@4.0.0-rc.40",
   "private": true,
   "repository": {
     "type": "git",
@@ -36,7 +36,7 @@
     "@types/jest": "^29.2.3",
     "@types/react": "^18.0.25",
     "@types/react-dom": "^18.0.9",
-    "@zcloak/dev": "^0.22.0",
+    "@zcloak/dev": "^0.26.0",
     "concurrently": "^7.6.0",
     "devtron": "^1.4.0",
     "humps": "^2.0.1",
@@ -45,8 +45,10 @@
     "react-dom": "^18.2.0",
     "react-router-dom": "^6.4.3",
     "source-map-explorer": "^2.5.3",
-    "typescript": "^4.9.3",
     "webpack": "^5.75.0",
     "webpack-cli": "^5.0.0"
+  },
+  "resolutions": {
+    "typescript": "^5.0.1-rc"
   }
 }

packages/example/package.json

@@ -23,7 +23,7 @@
   },
   "devDependencies": {
     "@types/punycode": "^2.1.0",
-    "@zcloak/dev": "^0.22.0",
+    "@zcloak/dev": "^0.26.0",
     "assert": "^2.0.0",
     "babel-loader": "^9.1.0",
     "buffer": "^6.0.3",

packages/ui-store/src/BrowserSession.ts

@@ -10,7 +10,6 @@ export class BrowserSession extends BaseStore {
   constructor() {
     super();
     this.#session = new SessionStorage();
-    this.#session.on('clear', this.emit);
     this.#session.on('store_changed', this.emit);
   }
 
@@ -36,14 +35,12 @@ export class BrowserSession extends BaseStore {
 
   public remove(key: string): Promise<void> {
     this.#session.remove(key);
-    this.emit('store_changed', key);
 
     return Promise.resolve();
   }
 
   public set(key: string, value: any): Promise<void> {
     this.#session.set(key, value);
-    this.emit('store_changed', key, value);
 
     return Promise.resolve();
   }

packages/ui-store/src/BrowserStore.ts

@@ -10,7 +10,6 @@ export class BrowserStore extends BaseStore {
   constructor() {
     super();
     this.#store = new LocalStorage();
-    this.#store.on('clear', this.emit);
     this.#store.on('store_changed', this.emit);
   }
 
@@ -36,14 +35,12 @@ export class BrowserStore extends BaseStore {
 
   public remove(key: string): Promise<void> {
     this.#store.remove(key);
-    this.emit('store_changed', key);
 
     return Promise.resolve();
   }
 
   public set(key: string, value: any): Promise<void> {
     this.#store.set(key, value);
-    this.emit('store_changed', key, value);
 
     return Promise.resolve();
   }

packages/ui-store/src/store/LocalStorage.ts

@@ -5,17 +5,29 @@ import type { StorageEvent } from '../types';
 
 import Events from 'eventemitter3';
 
-import { deserialize, serialize } from './utils';
+import { deserialize, getAllItems, serialize } from './utils';
 
 export class LocalStorage extends Events<StorageEvent> {
+  #items: Map<string, any> = new Map();
+
   constructor() {
     super();
+
+    this.#items = getAllItems(localStorage);
     window.addEventListener('storage', (event) => {
       if (event.storageArea === localStorage) {
-        if (sessionStorage.length === 0) {
-          this.emit('clear');
+        if (localStorage.length === 0) {
+          // clear storage
+
+          for (const [key, value] of this.#items) {
+            this.#items.delete(key);
+            this.emit('store_changed', key, value, null);
+          }
         } else {
-          this.emit('store_changed', event.key, event.oldValue, event.newValue);
+          if (event.key) {
+            this.#items.set(event.key, event.newValue);
+            this.emit('store_changed', event.key, event.oldValue, event.newValue);
+          }
         }
       }
     });
@@ -33,10 +45,16 @@ export class LocalStorage extends Events<StorageEvent> {
     const val = serialize(value);
 
     localStorage.setItem(key, val);
+    const oldValue = this.#items.get(key);
+
+    this.#items.set(key, val);
+    this.emit('store_changed', key, oldValue, value);
   }
 
   public remove(key: string) {
     localStorage.removeItem(key);
+    this.#items.delete(key);
+    this.emit('store_changed', key, this.#items.get(key), null);
   }
 
   public each(fn: (key: string, val: any) => void): void {

packages/ui-store/src/store/SessionStorage.ts

@@ -5,17 +5,29 @@ import type { StorageEvent } from '../types';
 
 import Events from 'eventemitter3';
 
-import { deserialize, serialize } from './utils';
+import { deserialize, getAllItems, serialize } from './utils';
 
 export class SessionStorage extends Events<StorageEvent> {
+  #items: Map<string, any> = new Map();
+
   constructor() {
     super();
+
+    this.#items = getAllItems(sessionStorage);
     window.addEventListener('storage', (event) => {
       if (event.storageArea === sessionStorage) {
         if (sessionStorage.length === 0) {
-          this.emit('clear');
+          // clear storage
+
+          for (const [key, value] of this.#items) {
+            this.#items.delete(key);
+            this.emit('store_changed', key, value, null);
+          }
         } else {
-          this.emit('store_changed', event.key, event.oldValue, event.newValue);
+          if (event.key) {
+            this.#items.set(event.key, event.newValue);
+            this.emit('store_changed', event.key, event.oldValue, event.newValue);
+          }
         }
       }
     });
@@ -33,10 +45,16 @@ export class SessionStorage extends Events<StorageEvent> {
     const val = serialize(value);
 
     sessionStorage.setItem(key, val);
+    const oldValue = this.#items.get(key);
+
+    this.#items.set(key, val);
+    this.emit('store_changed', key, oldValue, value);
   }
 
   public remove(key: string) {
     sessionStorage.removeItem(key);
+    this.#items.delete(key);
+    this.emit('store_changed', key, this.#items.get(key), null);
   }
 
   public each(fn: (key: string, val: any) => void): void {

packages/ui-store/src/store/utils.ts

@@ -18,3 +18,17 @@ export function deserialize(strVal: string | null) {
 
   return val;
 }
+
+export function getAllItems(storage: Storage): Map<string, any> {
+  const items: Map<string, any> = new Map();
+
+  for (let i = 0; i < storage.length; i++) {
+    const key = storage.key(i);
+
+    if (key) {
+      items.set(key, storage.getItem(key));
+    }
+  }
+
+  return items;
+}

packages/ui-store/src/types.ts

@@ -1,4 +1,4 @@
 // Copyright 2021-2023 zcloak authors & contributors
 // SPDX-License-Identifier: Apache-2.0
 
-export type StorageEvent = 'clear' | 'store_changed';
+export type StorageEvent = 'store_changed';