extra-react-store 0.2.6 → 0.2.8

package/README.md

@@ -55,8 +55,9 @@ function increment(value: number): (state: Draft<IState>) => void {
 ## API
 ```ts
 import { Draft } from 'immer'
+import { StrictContext } from 'extra-react-hooks'
 
-type StoreContext<State> = React.Context<IStore<State>>
+type StoreContext<State> = StrictContext<IStore<State>>
 
 interface IStore<State> {
   getState(): State

package/lib/create-store-context.js

@@ -1,17 +1,5 @@
-import { createContext } from 'react';
+import { createStrictContext } from 'extra-react-hooks';
 export function createStoreContext() {
-    const message = 'StoreContext used outside of a Provider. Did you forget to wrap your component with <Context.Provider>?';
-    const context = createContext({
-        getState() {
-            throw new Error(message);
-        },
-        setState() {
-            throw new Error(message);
-        },
-        subscribe() {
-            throw new Error(message);
-        }
-    });
-    return context;
+    return createStrictContext();
 }
 //# sourceMappingURL=create-store-context.js.map

package/lib/create-store-context.js.map

@@ -1 +1 @@
-{"version":3,"file":"create-store-context.js","sourceRoot":"","sources":["../src/create-store-context.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,OAAO,CAAA;AAGrC,MAAM,UAAU,kBAAkB;IAChC,MAAM,OAAO,GAAG,yGAAyG,CAAA;IAEzH,MAAM,OAAO,GAAG,aAAa,CAAgB;QAC3C,QAAQ;YACN,MAAM,IAAI,KAAK,CAAC,OAAO,CAAC,CAAA;QAC1B,CAAC;QACD,QAAQ;YACN,MAAM,IAAI,KAAK,CAAC,OAAO,CAAC,CAAA;QAC1B,CAAC;QACD,SAAS;YACP,MAAM,IAAI,KAAK,CAAC,OAAO,CAAC,CAAA;QAC1B,CAAC;KACF,CAAC,CAAA;IAEF,OAAO,OAAO,CAAA;AAChB,CAAC"}
+{"version":3,"file":"create-store-context.js","sourceRoot":"","sources":["../src/create-store-context.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,mBAAmB,EAAE,MAAM,mBAAmB,CAAA;AAGvD,MAAM,UAAU,kBAAkB;IAChC,OAAO,mBAAmB,EAAE,CAAA;AAC9B,CAAC"}

package/lib/types.d.ts

@@ -1,5 +1,6 @@
 import { Draft } from 'immer';
-export type StoreContext<State> = React.Context<IStore<State>>;
+import { StrictContext } from 'extra-react-hooks';
+export type StoreContext<State> = StrictContext<IStore<State>>;
 export interface IStore<State> {
     getState(): State;
     setState(newState: State): void;

package/lib/use-partial-updater.js

@@ -1,9 +1,10 @@
-import { useCallback, useContext } from 'react';
+import { useCallback } from 'react';
 import { produce } from 'immer';
 import { go } from '@blackglory/prelude';
 import { isFunction } from 'extra-utils';
+import { useStrictContext } from 'extra-react-hooks';
 export function usePartialUpdater(context, extractPartialState, mergePartialState) {
-    const store = useContext(context);
+    const store = useStrictContext(context);
     const updater = useCallback(newPartialStateOrFn => {
         const oldState = store.getState();
         const newPartialState = go(() => {

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,IACE,UAAU,CACR,mBAAmB,CACpB,EACD,CAAC;gBACD,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"}
+{"version":3,"file":"use-partial-updater.js","sourceRoot":"","sources":["../src/use-partial-updater.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,OAAO,CAAA;AACnC,OAAO,EAAS,OAAO,EAAE,MAAM,OAAO,CAAA;AACtC,OAAO,EAAE,EAAE,EAAE,MAAM,qBAAqB,CAAA;AACxC,OAAO,EAAE,UAAU,EAAE,MAAM,aAAa,CAAA;AAExC,OAAO,EAAE,gBAAgB,EAAE,MAAM,mBAAmB,CAAA;AAEpD,MAAM,UAAU,iBAAiB,CAC/B,OAA4B,EAC5B,mBAAmD,EACnD,iBAAsE;IAEtE,MAAM,KAAK,GAAG,gBAAgB,CAAC,OAAO,CAAC,CAAA;IAEvC,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,IACE,UAAU,CACR,mBAAmB,CACpB,EACD,CAAC;gBACD,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,9 +1,8 @@
-import { useContext, useRef } from 'react';
-import { useIIFE, useForceUpdate } from 'extra-react-hooks';
+import { useCallback, useRef, useSyncExternalStore } from 'react';
+import { useIIFE, useStrictContext } from 'extra-react-hooks';
 import { isReferenceEqual } from 'extra-utils';
 export function useSelector(context, selector, isEqual = isReferenceEqual) {
-    const forceUpdate = useForceUpdate();
-    const store = useContext(context);
+    const store = useStrictContext(context);
     const updateRequireRef = useRef(true);
     useIIFE(() => {
         return () => {
@@ -15,21 +14,21 @@ export function useSelector(context, selector, isEqual = isReferenceEqual) {
         valueRef.current = selector(store.getState());
         updateRequireRef.current = false;
     }
-    useIIFE(() => {
+    return useSyncExternalStore(useCallback((onStoreChange) => {
         return store.subscribe(state => {
             try {
                 const newValue = selector(state);
                 if (!isEqual(valueRef.current, newValue)) {
                     valueRef.current = newValue;
-                    forceUpdate();
+                    updateRequireRef.current = false;
+                    onStoreChange();
                 }
             }
             catch {
                 updateRequireRef.current = true;
-                forceUpdate();
+                onStoreChange();
             }
         });
-    }, [store, selector, isEqual, forceUpdate, valueRef, updateRequireRef]);
-    return valueRef.current;
+    }, [store, selector, isEqual, updateRequireRef, valueRef]), useCallback(() => valueRef.current, [valueRef]));
 }
 //# 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,UAAU,EAAE,MAAM,EAAE,MAAM,OAAO,CAAA;AAC1C,OAAO,EAAE,OAAO,EAAE,cAAc,EAAE,MAAM,mBAAmB,CAAA;AAE3D,OAAO,EAAE,gBAAgB,EAAE,MAAM,aAAa,CAAA;AAE9C,MAAM,UAAU,WAAW,CACzB,OAA4B,EAC5B,QAAiC,EACjC,UAA2C,gBAAgB;IAE3D,MAAM,WAAW,GAAG,cAAc,EAAE,CAAA;IACpC,MAAM,KAAK,GAAG,UAAU,CAAC,OAAO,CAAC,CAAA;IAEjC,MAAM,gBAAgB,GAAG,MAAM,CAAU,IAAI,CAAC,CAAA;IAC9C,OAAO,CAAC,GAAG,EAAE;QACX,OAAO,GAAG,EAAE;YACV,gBAAgB,CAAC,OAAO,GAAG,IAAI,CAAA;QACjC,CAAC,CAAA;IACH,CAAC,EAAE,CAAC,QAAQ,CAAC,CAAC,CAAA;IAEd,MAAM,QAAQ,GAAG,MAAM,CAAQ,SAAS,CAAC,CAAA;IACzC,IAAI,gBAAgB,CAAC,OAAO,EAAE,CAAC;QAC7B,QAAQ,CAAC,OAAO,GAAG,QAAQ,CAAC,KAAK,CAAC,QAAQ,EAAE,CAAC,CAAA;QAC7C,gBAAgB,CAAC,OAAO,GAAG,KAAK,CAAA;IAClC,CAAC;IAED,OAAO,CAAC,GAAG,EAAE;QACX,OAAO,KAAK,CAAC,SAAS,CAAC,KAAK,CAAC,EAAE;YAC7B,IAAI,CAAC;gBACH,MAAM,QAAQ,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAA;gBAEhC,IAAI,CAAC,OAAO,CAAC,QAAQ,CAAC,OAAQ,EAAE,QAAQ,CAAC,EAAE,CAAC;oBAC1C,QAAQ,CAAC,OAAO,GAAG,QAAQ,CAAA;oBAC3B,WAAW,EAAE,CAAA;gBACf,CAAC;YACH,CAAC;YAAC,MAAM,CAAC;gBACP,gBAAgB,CAAC,OAAO,GAAG,IAAI,CAAA;gBAC/B,WAAW,EAAE,CAAA;YACf,CAAC;QACH,CAAC,CAAC,CAAA;IACJ,CAAC,EAAE,CAAC,KAAK,EAAE,QAAQ,EAAE,OAAO,EAAE,WAAW,EAAE,QAAQ,EAAE,gBAAgB,CAAC,CAAC,CAAA;IAEvE,OAAO,QAAQ,CAAC,OAAQ,CAAA;AAC1B,CAAC"}
+{"version":3,"file":"use-selector.js","sourceRoot":"","sources":["../src/use-selector.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,EAAE,oBAAoB,EAAE,MAAM,OAAO,CAAA;AACjE,OAAO,EAAE,OAAO,EAAE,gBAAgB,EAAE,MAAM,mBAAmB,CAAA;AAE7D,OAAO,EAAE,gBAAgB,EAAE,MAAM,aAAa,CAAA;AAE9C,MAAM,UAAU,WAAW,CACzB,OAA4B,EAC5B,QAAiC,EACjC,UAA2C,gBAAgB;IAE3D,MAAM,KAAK,GAAG,gBAAgB,CAAC,OAAO,CAAC,CAAA;IAEvC,MAAM,gBAAgB,GAAG,MAAM,CAAU,IAAI,CAAC,CAAA;IAC9C,OAAO,CAAC,GAAG,EAAE;QACX,OAAO,GAAG,EAAE;YACV,gBAAgB,CAAC,OAAO,GAAG,IAAI,CAAA;QACjC,CAAC,CAAA;IACH,CAAC,EAAE,CAAC,QAAQ,CAAC,CAAC,CAAA;IAEd,MAAM,QAAQ,GAAG,MAAM,CAAQ,SAAS,CAAC,CAAA;IACzC,IAAI,gBAAgB,CAAC,OAAO,EAAE,CAAC;QAC7B,QAAQ,CAAC,OAAO,GAAG,QAAQ,CAAC,KAAK,CAAC,QAAQ,EAAE,CAAC,CAAA;QAC7C,gBAAgB,CAAC,OAAO,GAAG,KAAK,CAAA;IAClC,CAAC;IAED,OAAO,oBAAoB,CACzB,WAAW,CAAC,CAAC,aAAyB,EAAE,EAAE;QACxC,OAAO,KAAK,CAAC,SAAS,CAAC,KAAK,CAAC,EAAE;YAC7B,IAAI,CAAC;gBACH,MAAM,QAAQ,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAA;gBAEhC,IAAI,CAAC,OAAO,CAAC,QAAQ,CAAC,OAAQ,EAAE,QAAQ,CAAC,EAAE,CAAC;oBAC1C,QAAQ,CAAC,OAAO,GAAG,QAAQ,CAAA;oBAC3B,gBAAgB,CAAC,OAAO,GAAG,KAAK,CAAA;oBAChC,aAAa,EAAE,CAAA;gBACjB,CAAC;YACH,CAAC;YAAC,MAAM,CAAC;gBACP,gBAAgB,CAAC,OAAO,GAAG,IAAI,CAAA;gBAC/B,aAAa,EAAE,CAAA;YACjB,CAAC;QACH,CAAC,CAAC,CAAA;IACJ,CAAC,EAAE,CAAC,KAAK,EAAE,QAAQ,EAAE,OAAO,EAAE,gBAAgB,EAAE,QAAQ,CAAC,CAAC,EAC1D,WAAW,CAAC,GAAG,EAAE,CAAC,QAAQ,CAAC,OAAQ,EAAE,CAAC,QAAQ,CAAC,CAAC,CACjD,CAAA;AACH,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "extra-react-store",
-  "version": "0.2.6",
+  "version": "0.2.8",
   "description": "",
   "keywords": [],
   "files": [
@@ -63,7 +63,7 @@
   "dependencies": {
     "@blackglory/prelude": "^0.5.0",
     "@blackglory/structures": "^0.15.4",
-    "extra-react-hooks": "^0.8.13",
+    "extra-react-hooks": "^0.9.1",
     "extra-utils": "^6.2.0"
   },
   "peerDependencies": {

package/src/create-store-context.ts

@@ -1,20 +1,6 @@
-import { createContext } from 'react'
-import { IStore, StoreContext } from './types.js'
+import { createStrictContext } from 'extra-react-hooks'
+import { StoreContext } from './types.js'
 
 export function createStoreContext<State>(): StoreContext<State> {
-  const message = 'StoreContext used outside of a Provider. Did you forget to wrap your component with <Context.Provider>?'
-
-  const context = createContext<IStore<State>>({
-    getState(): never {
-      throw new Error(message)
-    }
-  , setState(): never {
-      throw new Error(message)
-    }
-  , subscribe(): never {
-      throw new Error(message)
-    }
-  })
-
-  return context
+  return createStrictContext()
 }

package/src/types.ts

@@ -1,6 +1,7 @@
 import { Draft } from 'immer'
+import { StrictContext } from 'extra-react-hooks'
 
-export type StoreContext<State> = React.Context<IStore<State>>
+export type StoreContext<State> = StrictContext<IStore<State>>
 
 export interface IStore<State> {
   getState(): State

package/src/use-partial-updater.ts

@@ -1,15 +1,16 @@
-import { useCallback, useContext } from 'react'
+import { useCallback } from 'react'
 import { Draft, produce } from 'immer'
 import { go } from '@blackglory/prelude'
 import { isFunction } from 'extra-utils'
 import { StoreContext, Updater } from './types.js'
+import { useStrictContext } from 'extra-react-hooks'
 
 export function usePartialUpdater<State, PartialState>(
   context: StoreContext<State>
 , extractPartialState: (state: State) => PartialState
 , mergePartialState: (state: State, partialState: PartialState) => State
 ): Updater<PartialState> {
-  const store = useContext(context)
+  const store = useStrictContext(context)
 
   const updater: Updater<PartialState> = useCallback(newPartialStateOrFn => {
     const oldState = store.getState()

package/src/use-selector.ts

@@ -1,5 +1,5 @@
-import { useContext, useRef } from 'react'
-import { useIIFE, useForceUpdate } from 'extra-react-hooks'
+import { useCallback, useRef, useSyncExternalStore } from 'react'
+import { useIIFE, useStrictContext } from 'extra-react-hooks'
 import { StoreContext } from './types.js'
 import { isReferenceEqual } from 'extra-utils'
 
@@ -8,8 +8,7 @@ export function useSelector<State, Value>(
 , selector: (state: State) => Value
 , isEqual: (a: Value, b: Value) => boolean = isReferenceEqual
 ): Value {
-  const forceUpdate = useForceUpdate()
-  const store = useContext(context)
+  const store = useStrictContext(context)
 
   const updateRequireRef = useRef<boolean>(true)
   useIIFE(() => {
@@ -24,21 +23,23 @@ export function useSelector<State, Value>(
     updateRequireRef.current = false
   }
 
-  useIIFE(() => {
-    return store.subscribe(state => {
-      try {
-        const newValue = selector(state)
+  return useSyncExternalStore(
+    useCallback((onStoreChange: () => void) => {
+      return store.subscribe(state => {
+        try {
+          const newValue = selector(state)
 
-        if (!isEqual(valueRef.current!, newValue)) {
-          valueRef.current = newValue
-          forceUpdate()
+          if (!isEqual(valueRef.current!, newValue)) {
+            valueRef.current = newValue
+            updateRequireRef.current = false
+            onStoreChange()
+          }
+        } catch {
+          updateRequireRef.current = true
+          onStoreChange()
         }
-      } catch {
-        updateRequireRef.current = true
-        forceUpdate()
-      }
-    })
-  }, [store, selector, isEqual, forceUpdate, valueRef, updateRequireRef])
-
-  return valueRef.current!
+      })
+    }, [store, selector, isEqual, updateRequireRef, valueRef])
+  , useCallback(() => valueRef.current!, [valueRef])
+  )
 }