extra-react-store 0.1.3 → 0.1.5

package/README.md

@@ -63,7 +63,7 @@ interface IStore<State> {
 
 type Updater<State> = (...args:
 | [newState: State]
-| [fn: (draft: Draft<State>) => void]
+| [fn: (draft: Draft<State>) => void | State]
 ) => void
 ```
 
@@ -84,6 +84,7 @@ function createStoreContext<State>(): StoreContext<State>
 function useSelector<State, Value>(
   context: StoreContext<State>
 , selector: (state: State) => Value
+, isEqual: (a: Value, b: Value) => boolean = (a, b) => a === b
 ): Value
 ```
 

package/lib/types.d.ts

@@ -6,4 +6,4 @@ export interface IStore<State> {
     setState(newState: State): void;
     subscribe(fn: (state: State) => void): () => void;
 }
-export type Updater<State> = (...args: [newState: State] | [fn: (draft: Draft<State>) => void]) => void;
+export type Updater<State> = (...args: [newState: State] | [fn: (draft: Draft<State>) => void | State]) => void;

package/lib/use-partial-updater.js

@@ -3,16 +3,17 @@ import { produce } from 'immer';
 import { go, isFunction } from '@blackglory/prelude';
 export function usePartialUpdater(context, extractPartialState, mergePartialState) {
     const store = useContext(context);
-    const updater = useCallback(newStateOrFn => {
+    const updater = useCallback(newPartialStateOrFn => {
         const oldState = store.getState();
         const newPartialState = go(() => {
-            if (isFunction(newStateOrFn)) {
-                const fn = newStateOrFn;
-                return produce(extractPartialState(oldState), fn);
+            if (isFunction(newPartialStateOrFn)) {
+                const fn = newPartialStateOrFn;
+                const newPartialState = produce(extractPartialState(oldState), fn);
+                return newPartialState;
             }
             else {
-                const newState = newStateOrFn;
-                return newState;
+                const newPartialState = newPartialStateOrFn;
+                return newPartialState;
             }
         });
         store.setState(mergePartialState(oldState, newPartialState));

package/lib/use-partial-updater.js.map

@@ -1 +1 @@
-{"version":3,"file":"use-partial-updater.js","sourceRoot":"","sources":["../src/use-partial-updater.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,UAAU,EAAE,MAAM,OAAO,CAAA;AAC/C,OAAO,EAAE,OAAO,EAAE,MAAM,OAAO,CAAA;AAC/B,OAAO,EAAE,EAAE,EAAE,UAAU,EAAE,MAAM,qBAAqB,CAAA;AAGpD,MAAM,UAAU,iBAAiB,CAC/B,OAA4B,EAC5B,mBAAmD,EACnD,iBAAsE;IAEtE,MAAM,KAAK,GAAG,UAAU,CAAC,OAAO,CAAC,CAAA;IAEjC,MAAM,OAAO,GAA0B,WAAW,CAAC,YAAY,CAAC,EAAE;QAChE,MAAM,QAAQ,GAAG,KAAK,CAAC,QAAQ,EAAE,CAAA;QAEjC,MAAM,eAAe,GAAiB,EAAE,CAAC,GAAG,EAAE;YAC5C,IAAI,UAAU,CAAC,YAAY,CAAC,EAAE;gBAC5B,MAAM,EAAE,GAAG,YAAY,CAAA;gBACvB,OAAO,OAAO,CAAC,mBAAmB,CAAC,QAAQ,CAAC,EAAE,EAAE,CAAC,CAAA;aAClD;iBAAM;gBACL,MAAM,QAAQ,GAAG,YAAY,CAAA;gBAC7B,OAAO,QAAQ,CAAA;aAChB;QACH,CAAC,CAAC,CAAA;QAEF,KAAK,CAAC,QAAQ,CAAC,iBAAiB,CAAC,QAAQ,EAAE,eAAe,CAAC,CAAC,CAAA;IAC9D,CAAC,EAAE,CAAC,KAAK,EAAE,mBAAmB,EAAE,iBAAiB,CAAC,CAAC,CAAA;IAEnD,OAAO,OAAO,CAAA;AAChB,CAAC"}
+{"version":3,"file":"use-partial-updater.js","sourceRoot":"","sources":["../src/use-partial-updater.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,UAAU,EAAE,MAAM,OAAO,CAAA;AAC/C,OAAO,EAAS,OAAO,EAAE,MAAM,OAAO,CAAA;AACtC,OAAO,EAAE,EAAE,EAAE,UAAU,EAAE,MAAM,qBAAqB,CAAA;AAGpD,MAAM,UAAU,iBAAiB,CAC/B,OAA4B,EAC5B,mBAAmD,EACnD,iBAAsE;IAEtE,MAAM,KAAK,GAAG,UAAU,CAAC,OAAO,CAAC,CAAA;IAEjC,MAAM,OAAO,GAA0B,WAAW,CAAC,mBAAmB,CAAC,EAAE;QACvE,MAAM,QAAQ,GAAG,KAAK,CAAC,QAAQ,EAAE,CAAA;QAEjC,MAAM,eAAe,GAAiB,EAAE,CAAC,GAAG,EAAE;YAC5C,IAAI,UAAU,CAAC,mBAAmB,CAAC,EAAE;gBACnC,MAAM,EAAE,GAAG,mBAAmB,CAAA;gBAC9B,MAAM,eAAe,GAAG,OAAO,CAC7B,mBAAmB,CAAC,QAAQ,CAAC,EAE7B,EAAE,CACH,CAAA;gBACD,OAAO,eAAe,CAAA;aACvB;iBAAM;gBACL,MAAM,eAAe,GAAG,mBAAmB,CAAA;gBAC3C,OAAO,eAAe,CAAA;aACvB;QACH,CAAC,CAAC,CAAA;QAEF,KAAK,CAAC,QAAQ,CAAC,iBAAiB,CAAC,QAAQ,EAAE,eAAe,CAAC,CAAC,CAAA;IAC9D,CAAC,EAAE,CAAC,KAAK,EAAE,mBAAmB,EAAE,iBAAiB,CAAC,CAAC,CAAA;IAEnD,OAAO,OAAO,CAAA;AAChB,CAAC"}

package/lib/use-selector.d.ts

@@ -1,2 +1,2 @@
 import { StoreContext } from './types.js';
-export declare function useSelector<State, Value>(context: StoreContext<State>, selector: (state: State) => Value): Value;
+export declare function useSelector<State, Value>(context: StoreContext<State>, selector: (state: State) => Value, isEqual?: (a: Value, b: Value) => boolean): Value;

package/lib/use-selector.js

@@ -1,13 +1,15 @@
 import { useState, useContext, useEffect } from 'react';
-export function useSelector(context, selector) {
+export function useSelector(context, selector, isEqual = (a, b) => a === b) {
     const store = useContext(context);
-    const [value, setValue] = useState(() => selector(store.getState()));
+    const [[value], setBox] = useState(() => [selector(store.getState())]);
     useEffect(() => {
         return store.subscribe(state => {
             const newValue = selector(state);
-            setValue(newValue);
+            if (!isEqual(value, newValue)) {
+                setBox([newValue]);
+            }
         });
-    }, [store, selector, value]);
+    }, [store, selector, value, setBox]);
     return value;
 }
 //# sourceMappingURL=use-selector.js.map

package/lib/use-selector.js.map

@@ -1 +1 @@
-{"version":3,"file":"use-selector.js","sourceRoot":"","sources":["../src/use-selector.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,UAAU,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAGvD,MAAM,UAAU,WAAW,CACzB,OAA4B,EAC5B,QAAiC;IAEjC,MAAM,KAAK,GAAG,UAAU,CAAC,OAAO,CAAC,CAAA;IACjC,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,GAAG,QAAQ,CAAC,GAAG,EAAE,CAAC,QAAQ,CAAC,KAAK,CAAC,QAAQ,EAAE,CAAC,CAAC,CAAA;IAEpE,SAAS,CAAC,GAAG,EAAE;QACb,OAAO,KAAK,CAAC,SAAS,CAAC,KAAK,CAAC,EAAE;YAC7B,MAAM,QAAQ,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAA;YAGhC,QAAQ,CAAC,QAAQ,CAAC,CAAA;QACpB,CAAC,CAAC,CAAA;IACJ,CAAC,EAAE,CAAC,KAAK,EAAE,QAAQ,EAAE,KAAK,CAAC,CAAC,CAAA;IAE5B,OAAO,KAAK,CAAA;AACd,CAAC"}
+{"version":3,"file":"use-selector.js","sourceRoot":"","sources":["../src/use-selector.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,UAAU,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAGvD,MAAM,UAAU,WAAW,CACzB,OAA4B,EAC5B,QAAiC,EACjC,UAA2C,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC,CAAC,KAAK,CAAC;IAE5D,MAAM,KAAK,GAAG,UAAU,CAAC,OAAO,CAAC,CAAA;IACjC,MAAM,CAAC,CAAC,KAAK,CAAC,EAAE,MAAM,CAAC,GAAG,QAAQ,CAAC,GAAG,EAAE,CAAC,CAAC,QAAQ,CAAC,KAAK,CAAC,QAAQ,EAAE,CAAC,CAAC,CAAC,CAAA;IAEtE,SAAS,CAAC,GAAG,EAAE;QACb,OAAO,KAAK,CAAC,SAAS,CAAC,KAAK,CAAC,EAAE;YAC7B,MAAM,QAAQ,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAA;YAEhC,IAAI,CAAC,OAAO,CAAC,KAAK,EAAE,QAAQ,CAAC,EAAE;gBAC7B,MAAM,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAA;aACnB;QACH,CAAC,CAAC,CAAA;IACJ,CAAC,EAAE,CAAC,KAAK,EAAE,QAAQ,EAAE,KAAK,EAAE,MAAM,CAAC,CAAC,CAAA;IAEpC,OAAO,KAAK,CAAA;AACd,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "extra-react-store",
-  "version": "0.1.3",
+  "version": "0.1.5",
   "description": "",
   "keywords": [],
   "files": [
@@ -33,15 +33,15 @@
     }
   },
   "devDependencies": {
-    "@commitlint/cli": "^17.6.5",
-    "@commitlint/config-conventional": "^17.6.5",
+    "@commitlint/cli": "^17.6.7",
+    "@commitlint/config-conventional": "^17.6.7",
     "@testing-library/react": "^14.0.0",
-    "@types/react": "^18.2.11",
-    "@typescript-eslint/eslint-plugin": "^5.59.9",
-    "@typescript-eslint/parser": "^5.59.9",
+    "@types/react": "^18.2.15",
+    "@typescript-eslint/eslint-plugin": "^6.1.0",
+    "@typescript-eslint/parser": "^6.1.0",
     "@vitejs/plugin-react": "^4.0.3",
-    "eslint": "^8.42.0",
-    "eslint-plugin-react": "^7.32.2",
+    "eslint": "^8.45.0",
+    "eslint-plugin-react": "^7.33.0",
     "eslint-plugin-react-hooks": "^4.6.0",
     "extra-react-hooks": "^0.6.3",
     "husky": "4",
@@ -50,13 +50,13 @@
     "npm-run-all": "^4.1.5",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "rimraf": "^4.3.0",
+    "rimraf": "^5.0.1",
     "standard-version": "^9.3.2",
-    "ts-patch": "^2.1.0",
-    "tslib": "^2.5.3",
-    "typescript": "4.9.5",
+    "ts-patch": "^3.0.2",
+    "tslib": "^2.6.0",
+    "typescript": "5.1.6",
     "typescript-transform-paths": "^3.4.6",
-    "vite": "^4.4.3",
+    "vite": "^4.4.5",
     "vite-tsconfig-paths": "^4.2.0",
     "vitest": "^0.33.0"
   },

package/src/types.ts

@@ -10,5 +10,5 @@ export interface IStore<State> {
 
 export type Updater<State> = (...args:
 | [newState: State]
-| [fn: (draft: Draft<State>) => void]
+| [fn: (draft: Draft<State>) => void | State]
 ) => void

package/src/use-partial-updater.ts

@@ -1,5 +1,5 @@
 import { useCallback, useContext } from 'react'
-import { produce } from 'immer'
+import { Draft, produce } from 'immer'
 import { go, isFunction } from '@blackglory/prelude'
 import { StoreContext, Updater } from './types.js'
 
@@ -10,16 +10,21 @@ export function usePartialUpdater<State, PartialState>(
 ): Updater<PartialState> {
   const store = useContext(context)
 
-  const updater: Updater<PartialState> = useCallback(newStateOrFn => {
+  const updater: Updater<PartialState> = useCallback(newPartialStateOrFn => {
     const oldState = store.getState()
 
     const newPartialState: PartialState = go(() => {
-      if (isFunction(newStateOrFn)) {
-        const fn = newStateOrFn
-        return produce(extractPartialState(oldState), fn)
+      if (isFunction(newPartialStateOrFn)) {
+        const fn = newPartialStateOrFn
+        const newPartialState = produce<PartialState, Draft<PartialState>>(
+          extractPartialState(oldState)
+          // @ts-ignore
+        , fn
+        )
+        return newPartialState
       } else {
-        const newState = newStateOrFn
-        return newState
+        const newPartialState = newPartialStateOrFn
+        return newPartialState
       }
     })
 

package/src/use-selector.ts

@@ -4,18 +4,20 @@ import { StoreContext } from './types.js'
 export function useSelector<State, Value>(
   context: StoreContext<State>
 , selector: (state: State) => Value
+, isEqual: (a: Value, b: Value) => boolean = (a, b) => a === b
 ): Value {
   const store = useContext(context)
-  const [value, setValue] = useState(() => selector(store.getState()))
+  const [[value], setBox] = useState(() => [selector(store.getState())])
 
   useEffect(() => {
     return store.subscribe(state => {
       const newValue = selector(state)
 
-      // 若新旧状态引用相等, 不会发生重新渲染.
-      setValue(newValue)
+      if (!isEqual(value, newValue)) {
+        setBox([newValue])
+      }
     })
-  }, [store, selector, value])
+  }, [store, selector, value, setBox])
 
   return value
 }