@dune2/tools 0.5.2 → 0.7.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dune2/tools",
-  "version": "0.5.2",
+  "version": "0.7.0",
   "description": "",
   "keywords": [
     "i18n"
@@ -32,6 +32,7 @@
     "./valtio": "./src/valtio/index.ts",
     "./valtio/*": "./src/valtio/*.ts",
     "./niceModal": "./src/niceModal/index.tsx",
+    "./store": "./src/store/index.ts",
     "./package.json": "./package.json"
   },
   "files": [
@@ -46,16 +47,15 @@
     "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",
+    "react": "^19",
+    "valtio": "^2",
     "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/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/store/index.ts

@@ -0,0 +1,88 @@
+import _ from "lodash";
+import { useDebugValue, useRef, useSyncExternalStore } from "react";
+import { proxy, snapshot, subscribe, useSnapshot } from "valtio";
+
+const stores: any = {};
+
+if (typeof window !== "undefined") {
+  Object.defineProperty(window, "__stores2", {
+    get() {
+      const r = snapshot(proxy(stores));
+      return { ...r, __raw: stores };
+    },
+  });
+}
+
+type Config<S extends object, A extends Record<string, Action<S, any>>> = {
+  name: string;
+  state: S;
+  actionsCreator: (state: S) => A;
+};
+
+export function createStore<
+  S extends object,
+  A extends Record<string, Action<S, any>>,
+>(config: Config<S, A>) {
+  const store = proxy(config.state);
+  const initialState = snapshot(store) as S;
+
+  const actions = config.actionsCreator(store);
+
+  const api = {
+    /**
+     * 状态 可以直接修改，会触发状态变化
+     */
+    state: store,
+    /**
+     * 初始状态 快照
+     */
+    initialState,
+    /**
+     * 获取当前状态 快照
+     */
+    getState() {
+      return snapshot(store) as S;
+    },
+    actions,
+    /**
+     * 监听状态变化
+     */
+    subscribe(fn: (state: S) => void) {
+      return subscribe(store, (ops) => {
+        const state = api.getState();
+        fn(state);
+      });
+    },
+    /**
+     * 获取当前状态 快照
+     */
+    useSnapshot() {
+      return useSnapshot(store) as S;
+    },
+    useShallowSnapshot<T>(selector: (state: S) => T) {
+      const prev = useRef<T>(undefined);
+      const combinedSelector = (state: S) => {
+        const next = selector(state);
+        if (!_.isEqual(prev.current, next)) {
+          prev.current = next;
+        }
+        return prev.current;
+      };
+      const slice = useSyncExternalStore(
+        api.subscribe,
+        () => {
+          return combinedSelector(api.getState());
+        },
+        () => {
+          return combinedSelector(api.initialState);
+        },
+      );
+      useDebugValue(slice);
+      return slice;
+    },
+  };
+
+  return api;
+}
+
+type Action<S, T> = (payload: T) => any;

package/src/valtio/index.ts

@@ -18,6 +18,9 @@ if (typeof window !== "undefined") {
   });
 }
 
+/**
+ * @deprecated use createStore instead
+ */
 export function proxy<T extends object>(
   initialObject: T,
   opts: Options,