extra-react-store 0.1.6 → 0.1.8

package/README.md

@@ -8,6 +8,7 @@ yarn add extra-react-store
 
 ## Usage
 ```tsx
+import { Draft } from 'immer'
 import { useMemo } from 'react'
 import { createStoreContext, Store, useSelector, useUpdater } from 'extra-react-store'
 
@@ -40,12 +41,14 @@ function Controller() {
   const update = useUpdater<IState>(Context)
 
   return (
-    <button onClick={() => update(increment)}>Increment</button>
+    <button onClick={() => update(increment(1))}>Increment</button>
   )
 }
 
-function increment(state: IState): void {
-  state.count++
+function increment(value: number): (state: Draft<IState>) => void {
+  return state => {
+    state.count += value
+  }
 }
 ```
 

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,EAAS,OAAO,EAAE,MAAM,OAAO,CAAA;AACtC,OAAO,EAAE,EAAE,EAAE,MAAM,qBAAqB,CAAA;AACxC,OAAO,EAAE,UAAU,EAAE,MAAM,aAAa,CAAA;AAGxC,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"}
+{"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,MAAM,qBAAqB,CAAA;AACxC,OAAO,EAAE,UAAU,EAAE,MAAM,aAAa,CAAA;AAGxC,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,CAAC;gBACpC,MAAM,EAAE,GAAG,mBAAmB,CAAA;gBAC9B,MAAM,eAAe,GAAG,OAAO,CAC7B,mBAAmB,CAAC,QAAQ,CAAC,EAE7B,EAAE,CACH,CAAA;gBACD,OAAO,eAAe,CAAA;YACxB,CAAC;iBAAM,CAAC;gBACN,MAAM,eAAe,GAAG,mBAAmB,CAAA;gBAC3C,OAAO,eAAe,CAAA;YACxB,CAAC;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.js

@@ -1,16 +1,16 @@
-import { useState, useContext, useEffect } from 'react';
+import { useState, useContext, useLayoutEffect } from 'react';
 import { isReferenceEqual } from 'extra-utils';
 export function useSelector(context, selector, isEqual = isReferenceEqual) {
     const store = useContext(context);
     const [[value], setBox] = useState(() => [selector(store.getState())]);
-    useEffect(() => {
+    useLayoutEffect(() => {
         return store.subscribe(state => {
             const newValue = selector(state);
             if (!isEqual(value, newValue)) {
                 setBox([newValue]);
             }
         });
-    }, [store, selector, value, setBox]);
+    }, [store, selector, isEqual, 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;AAEvD,OAAO,EAAE,gBAAgB,EAAE,MAAM,aAAa,CAAA;AAE9C,MAAM,UAAU,WAAW,CACzB,OAA4B,EAC5B,QAAiC,EACjC,UAA2C,gBAAgB;IAE3D,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"}
+{"version":3,"file":"use-selector.js","sourceRoot":"","sources":["../src/use-selector.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,UAAU,EAAE,eAAe,EAAE,MAAM,OAAO,CAAA;AAE7D,OAAO,EAAE,gBAAgB,EAAE,MAAM,aAAa,CAAA;AAE9C,MAAM,UAAU,WAAW,CACzB,OAA4B,EAC5B,QAAiC,EACjC,UAA2C,gBAAgB;IAE3D,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;IAGtE,eAAe,CAAC,GAAG,EAAE;QACnB,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,CAAC;gBAC9B,MAAM,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAA;YACpB,CAAC;QACH,CAAC,CAAC,CAAA;IACJ,CAAC,EAAE,CAAC,KAAK,EAAE,QAAQ,EAAE,OAAO,EAAE,KAAK,EAAE,MAAM,CAAC,CAAC,CAAA;IAE7C,OAAO,KAAK,CAAA;AACd,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "extra-react-store",
-  "version": "0.1.6",
+  "version": "0.1.8",
   "description": "",
   "keywords": [],
   "files": [
@@ -37,8 +37,8 @@
     "@commitlint/config-conventional": "^17.6.7",
     "@testing-library/react": "^14.0.0",
     "@types/react": "^18.2.15",
-    "@typescript-eslint/eslint-plugin": "^6.1.0",
-    "@typescript-eslint/parser": "^6.1.0",
+    "@typescript-eslint/eslint-plugin": "^6.14.0",
+    "@typescript-eslint/parser": "^6.14.0",
     "@vitejs/plugin-react": "^4.0.3",
     "eslint": "^8.45.0",
     "eslint-plugin-react": "^7.33.0",
@@ -52,9 +52,9 @@
     "react-dom": "^18.2.0",
     "rimraf": "^5.0.1",
     "standard-version": "^9.3.2",
-    "ts-patch": "^3.0.2",
-    "tslib": "^2.6.0",
-    "typescript": "5.1.6",
+    "ts-patch": "^3.1.1",
+    "tslib": "^2.6.2",
+    "typescript": "5.3.3",
     "typescript-transform-paths": "^3.4.6",
     "vite": "^4.4.5",
     "vite-tsconfig-paths": "^4.2.0",

package/src/use-selector.ts

@@ -1,4 +1,4 @@
-import { useState, useContext, useEffect } from 'react'
+import { useState, useContext, useLayoutEffect } from 'react'
 import { StoreContext } from './types.js'
 import { isReferenceEqual } from 'extra-utils'
 
@@ -10,7 +10,8 @@ export function useSelector<State, Value>(
   const store = useContext(context)
   const [[value], setBox] = useState(() => [selector(store.getState())])
 
-  useEffect(() => {
+  // `useEffect` will be called too late, resulting in not subscribing in time.
+  useLayoutEffect(() => {
     return store.subscribe(state => {
       const newValue = selector(state)
 
@@ -18,7 +19,7 @@ export function useSelector<State, Value>(
         setBox([newValue])
       }
     })
-  }, [store, selector, value, setBox])
+  }, [store, selector, isEqual, value, setBox])
 
   return value
 }