@dune2/tools 0.6.0 → 0.7.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dune2/tools",
-  "version": "0.6.0",
+  "version": "0.7.1",
   "description": "",
   "keywords": [
     "i18n"
@@ -32,7 +32,7 @@
     "./valtio": "./src/valtio/index.ts",
     "./valtio/*": "./src/valtio/*.ts",
     "./niceModal": "./src/niceModal/index.tsx",
-    "./zustand": "./src/zustand/index.ts",
+    "./store": "./src/store/index.ts",
     "./package.json": "./package.json"
   },
   "files": [
@@ -54,10 +54,8 @@
     "@types/js-cookie": "3.0.3",
     "@types/lodash": "^4.17.0",
     "axios": "^1.6.8",
-    "immer": "^10",
     "react": "^19",
     "valtio": "^2",
-    "zustand": "^5.0.1",
     "zx": "^7.0.8"
   },
   "publishConfig": {

package/src/storage/index.ts

@@ -69,39 +69,44 @@ class StorageHelper<V = any> {
     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,
-        }),
-      );
-    }
+    this.notifyListeners();
   }
 
   remove(): void {
     this.set(undefined);
   }
 
+  private listeners = new Set<() => void>();
+  private notifyListeners = () => {
+    this.listeners.forEach((listener) => listener());
+  };
+  /**
+   * 订阅 storage 事件
+   * @param listener
+   * @returns
+   */
+  subscribe = (listener: () => void) => {
+    // for current window
+    this.listeners.add(listener);
+    // for other windows
+    window.addEventListener("storage", listener);
+
+    return () => {
+      this.listeners.delete(listener);
+      window.removeEventListener("storage", listener);
+    };
+  };
+
   /**
    * 这是 react hooks 的 useValue 的实现
    */
   useValue() {
     return useSyncExternalStore(
-      this.useSyncExternalStoreSubscribe,
+      this.subscribe,
       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,

package/src/zustand/index.ts

@@ -1,61 +0,0 @@
-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;