@dune2/tools 0.5.1 → 0.6.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dune2/tools",
-  "version": "0.5.1",
+  "version": "0.6.0",
   "description": "",
   "keywords": [
     "i18n"
@@ -32,6 +32,7 @@
     "./valtio": "./src/valtio/index.ts",
     "./valtio/*": "./src/valtio/*.ts",
     "./niceModal": "./src/niceModal/index.tsx",
+    "./zustand": "./src/zustand/index.ts",
     "./package.json": "./package.json"
   },
   "files": [
@@ -46,16 +47,17 @@
     "bignumber.js": "^9.1.2",
     "js-cookie": "^3.0.5",
     "lodash": "^4",
-    "store2": "^2.14.3",
-    "valtio": "^1.13.2"
+    "store2": "^2.14.3"
   },
   "devDependencies": {
     "@tanstack/react-query": "5.51.11",
     "@types/js-cookie": "3.0.3",
     "@types/lodash": "^4.17.0",
-    "@types/react": "^18.2.6",
     "axios": "^1.6.8",
-    "react": "^18.2.0",
+    "immer": "^10",
+    "react": "^19",
+    "valtio": "^2",
+    "zustand": "^5.0.1",
     "zx": "^7.0.8"
   },
   "publishConfig": {

package/src/factory/createStateContext.tsx

@@ -1,3 +1,4 @@
+"use client";
 import type { ComponentType, FC, PropsWithChildren } from "react";
 import React, { useContext } from "react";
 

package/src/i18n/duneI18n.ts

@@ -157,7 +157,13 @@ export class DuneI18n {
     this.emit("localeChange", combinedLocale);
     // 默认需要 同步到 localStorage
     if (syncToStorage) {
-      localStorage.setItem(this.config.storageKey, combinedLocale);
+      //https://www.chromium.org/for-testers/bug-reporting-guidelines/uncaught-securityerror-failed-to-read-the-localstorage-property-from-window-access-is-denied-for-this-document/
+      //fix: Failed to read the 'localStorage' property from 'Window': Access is denied for this document.
+      try {
+        localStorage.setItem(this.config.storageKey, combinedLocale);
+      } catch (error) {
+        console.error("set localStorage error", error);
+      }
     }
   };
 

package/src/storage/index.ts

@@ -1,3 +1,5 @@
+import _ from "lodash";
+import { useSyncExternalStore } from "react";
 import type { StoreType } from "store2";
 import baseStore from "store2";
 
@@ -31,6 +33,13 @@ class StorageHelper<V = any> {
    * 获取到的 key = "test.token"
    */
   key: string;
+  /**
+   * 用来缓存当前值
+   * - 防止值是 object 的时候，每次 get 都都返回新的对象，导致 react 的 重复渲染
+   * - 在 set 时，如果值没有发生变化，则不触发 storage 事件
+   * - 在 get 时，如果值没有发生变化，则直接返回缓存的值
+   */
+  private currentValue: V | undefined = undefined;
   constructor(
     public store: StoreType,
     public namespace: string,
@@ -38,22 +47,62 @@ class StorageHelper<V = any> {
     public defaultValue: V,
   ) {
     this.key = `${namespace}.${baseKey}`;
+    this.currentValue = this.defaultValue;
   }
 
   get(): V | undefined {
-    return this.store.get(this.baseKey) ?? this.defaultValue;
+    const r = this.store.get(this.baseKey) ?? this.defaultValue;
+    if (!_.isEqual(r, this.currentValue)) {
+      this.currentValue = r;
+    }
+    return this.currentValue;
   }
 
   /**
    * 设置为 undefined 时，会删除该 key
    */
-  set(v: V): void {
-    v === undefined ? this.remove() : this.store.set(this.baseKey, v);
+  set(v: V | undefined): void {
+    if (_.isEqual(v, this.currentValue)) {
+      return;
+    }
+    this.currentValue = v;
+    v === undefined
+      ? this.store.remove(this.baseKey)
+      : this.store.set(this.baseKey, v);
+    if (typeof window !== "undefined") {
+      // On localStorage.setItem, the storage event is only triggered on other tabs and windows.
+      // So we manually dispatch a storage event to trigger the subscribe function on the current window as well.
+      window.dispatchEvent(
+        new StorageEvent("storage", {
+          key: this.key,
+          // 这里 value 不重要，在内部会使用 get 重新获取值
+          newValue: null,
+        }),
+      );
+    }
   }
 
   remove(): void {
-    this.store.remove(this.baseKey);
+    this.set(undefined);
+  }
+
+  /**
+   * 这是 react hooks 的 useValue 的实现
+   */
+  useValue() {
+    return useSyncExternalStore(
+      this.useSyncExternalStoreSubscribe,
+      this.useSyncExternalStoreGetSnapshot,
+      this.useSyncExternalStoreGetSnapshot,
+    );
+  }
+  private useSyncExternalStoreSubscribe(listener: () => void) {
+    window.addEventListener("storage", listener);
+    return () => {
+      window.removeEventListener("storage", listener);
+    };
   }
+  private useSyncExternalStoreGetSnapshot = this.get.bind(this);
 }
 
 /**

package/src/zustand/index.ts

@@ -0,0 +1,61 @@
+import { produce } from "immer";
+import { create } from "zustand";
+import { useShallow } from "zustand/shallow";
+type State<S extends object, A extends Record<string, Action<S, any>>> = {
+  state: S;
+  actions: A;
+};
+
+export function createStore<
+  S extends object,
+  A extends Record<string, Action<S, any>>,
+>(config: State<S, A>) {
+  const useStore = create<S>((set) => {
+    return config.state;
+  });
+  type NormalActions = {
+    [key in keyof A]: (payload: Parameters<A[key]>[1]) => void;
+  };
+  const normalActions: NormalActions = {} as NormalActions;
+  Object.keys(config.actions).forEach((key) => {
+    // @ts-ignore
+    normalActions[key] = (payload) => {
+      useStore.setState(
+        produce((draft) => {
+          config.actions[key](draft, payload);
+        }),
+        // 尽可能复用 immer 更新的数据
+        true,
+      );
+    };
+  });
+
+  return {
+    /**
+     * 在组件内获取状态
+     */
+    useSnapshot: useStore,
+    /**
+     * 一般用于传入select，并且 selector 返回的值是对象，
+     * 这样就可以浅比较，减少不必要的更新
+     */
+    useShallowSnapshot: <U extends object>(select: (state: S) => U) => {
+      return useStore(useShallow(select));
+    },
+
+    /**
+     * 普通方法，设置状态
+     */
+    actions: normalActions,
+    /**
+     * 监听状态变化
+     */
+    subscribe: useStore.subscribe,
+    /**
+     * 获取状态
+     */
+    getState: useStore.getState,
+  };
+}
+
+type Action<S, T> = (state: S, payload: T) => any;