react-hooks-global-state - npm Package Compare versions

Comparing version 2.0.0-alpha.5 to 2.0.0-rc.0

CHANGELOG.md

 # Change Log
 
 ## [Unreleased]
+
+## [2.0.0-rc.0] - 2022-05-28
 ### Changed
 - Re-implemented with zustand as a dependency
 - `createStore` returns `useStoreState`
-  - BREAKING CHANGE: `useGlobalState` returned by `createStore` is deprecated
+  - `useGlobalState` returned by `createStore` is deprecated
 ### Removed
 - BREAKING CHANGE: drop reduxDevToolsExt
-  - Reference implementation in `examples/08_thunk/src/devtools.ts`
 
@@ -12,0 +13,0 @@ ## [1.0.2] - 2021-08-14

dist/index.modern.js

@@ -1,2 +0,2 @@
-import{useCallback as t}from"react";import e from"zustand";import{redux as o}from"zustand/middleware";const r=(t,e)=>{if(!t.includes(e))throw new Error(`'${e}' not found. It must be provided in initialState as a property key.`)},n=o=>{const n=e(()=>o),s=Object.keys(o),a=(t,e)=>{"production"!==process.env.NODE_ENV&&r(s,t),n.setState(o=>{return{[t]:(r=o[t],n=e,"function"==typeof n?n(r):n)};var r,n})};return{useGlobalState:e=>{"production"!==process.env.NODE_ENV&&r(s,e);const o=t(t=>t[e],[e]);return[n(o),t(t=>a(e,t),[e])]},getGlobalState:t=>("production"!==process.env.NODE_ENV&&r(s,t),n.getState()[t]),setGlobalState:a}},s=(r,n=r(void 0,{type:void 0}),a)=>{if(a)return a(s)(r,n);const i=e(o(r,n)),c=Object.keys(n),p=e=>{"production"!==process.env.NODE_ENV&&((t,e)=>{if(!t.includes(e))throw new Error(`'${e}' not found. It must be provided in initialState as a property key.`)})(c,e);const o=t(t=>t[e],[e]);return i(o)};return{useStoreState:p,useGlobalState:t=>("production"!==process.env.NODE_ENV&&console.warn("[DEPRECATED] useStoreState instead"),[p(t)]),getState:i.getState,dispatch:i.dispatch}};export{n as createGlobalState,s as createStore};
-//# sourceMappingURL=index.modern.mjs.map
+import{useCallback as t}from"react";import e from"zustand";import{redux as o}from"zustand/middleware";const r=(t,e)=>{if(!t.includes(e))throw new Error(`'${e}' not found. It must be provided in initialState as a property key.`)},n=o=>{const n=e(()=>o),s=Object.keys(o),a=(t,e)=>{"production"!==process.env.NODE_ENV&&r(s,t),n.setState(o=>{return{[t]:(r=o[t],n=e,"function"==typeof n?n(r):n)};var r,n})};return{useGlobalState:e=>{"production"!==process.env.NODE_ENV&&r(s,e);const o=t(t=>t[e],[e]);return[n(o),t(t=>a(e,t),[e])]},getGlobalState:t=>("production"!==process.env.NODE_ENV&&r(s,t),n.getState()[t]),setGlobalState:a}},s=(r,n=r(void 0,{type:void 0}),a)=>{if(a)return a(s)(r,n);const i=e(o(r,n)),u=Object.keys(n),c=e=>{"production"!==process.env.NODE_ENV&&((t,e)=>{if(!t.includes(e))throw new Error(`'${e}' not found. It must be provided in initialState as a property key.`)})(u,e);const o=t(t=>t[e],[e]);return i(o)};return{useStoreState:c,useGlobalState:e=>("production"!==process.env.NODE_ENV&&console.warn("[DEPRECATED] useStoreState instead"),[c(e),t(t=>{i.setState(o=>{return{[e]:(r=o[e],n=t,"function"==typeof n?n(r):n)};var r,n})},[e])]),getState:i.getState,dispatch:i.dispatch}};export{n as createGlobalState,s as createStore};
+//# sourceMappingURL=index.modern.js.map

dist/index.umd.js

@@ -1,2 +0,2 @@
-!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports,require("react"),require("zustand"),require("zustand/middleware")):"function"==typeof define&&define.amd?define(["exports","react","zustand","zustand/middleware"],t):t((e||self).reactHooksGlobalState={},e.react,e.zustand,e.middleware)}(this,function(e,t,n,r){function o(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var u=o(n),a=function(e,t){if(!e.includes(t))throw new Error("'"+t+"' not found. It must be provided in initialState as a property key.")};e.createGlobalState=function(e){var n=u.default(function(){return e}),r=Object.keys(e),o=function(e,t){"production"!==process.env.NODE_ENV&&a(r,e),n.setState(function(n){var r,o;return(r={})[e]="function"==typeof(o=t)?o(n[e]):o,r})};return{useGlobalState:function(e){"production"!==process.env.NODE_ENV&&a(r,e);var u=t.useCallback(function(t){return t[e]},[e]);return[n(u),t.useCallback(function(t){return o(e,t)},[e])]},getGlobalState:function(e){return"production"!==process.env.NODE_ENV&&a(r,e),n.getState()[e]},setGlobalState:o}},e.createStore=function e(n,o,a){if(void 0===o&&(o=n(void 0,{type:void 0})),a)return a(e)(n,o);var i=u.default(r.redux(n,o)),c=Object.keys(o),d=function(e){"production"!==process.env.NODE_ENV&&function(e,t){if(!e.includes(t))throw new Error("'"+t+"' not found. It must be provided in initialState as a property key.")}(c,e);var n=t.useCallback(function(t){return t[e]},[e]);return i(n)};return{useStoreState:d,useGlobalState:function(e){return"production"!==process.env.NODE_ENV&&console.warn("[DEPRECATED] useStoreState instead"),[d(e)]},getState:i.getState,dispatch:i.dispatch}}});
+!function(t,e){"object"==typeof exports&&"undefined"!=typeof module?e(exports,require("react"),require("zustand"),require("zustand/middleware")):"function"==typeof define&&define.amd?define(["exports","react","zustand","zustand/middleware"],e):e((t||self).reactHooksGlobalState={},t.React,t.zustand,t.middleware)}(this,function(t,e,n,r){function o(t){return t&&"object"==typeof t&&"default"in t?t:{default:t}}var u=/*#__PURE__*/o(n),a=function(t,e){if(!t.includes(e))throw new Error("'"+e+"' not found. It must be provided in initialState as a property key.")};t.createGlobalState=function(t){var n=u.default(function(){return t}),r=Object.keys(t),o=function(t,e){"production"!==process.env.NODE_ENV&&a(r,t),n.setState(function(n){var r,o;return(r={})[t]="function"==typeof(o=e)?o(n[t]):o,r})};return{useGlobalState:function(t){"production"!==process.env.NODE_ENV&&a(r,t);var u=e.useCallback(function(e){return e[t]},[t]);return[n(u),e.useCallback(function(e){return o(t,e)},[t])]},getGlobalState:function(t){return"production"!==process.env.NODE_ENV&&a(r,t),n.getState()[t]},setGlobalState:o}},t.createStore=function t(n,o,a){if(void 0===o&&(o=n(void 0,{type:void 0})),a)return a(t)(n,o);var i=u.default(r.redux(n,o)),c=Object.keys(o),s=function(t){"production"!==process.env.NODE_ENV&&function(t,e){if(!t.includes(e))throw new Error("'"+e+"' not found. It must be provided in initialState as a property key.")}(c,t);var n=e.useCallback(function(e){return e[t]},[t]);return i(n)};return{useStoreState:s,useGlobalState:function(t){return"production"!==process.env.NODE_ENV&&console.warn("[DEPRECATED] useStoreState instead"),[s(t),e.useCallback(function(e){i.setState(function(n){var r,o;return(r={})[t]="function"==typeof(o=e)?o(n[t]):o,r})},[t])]},getState:i.getState,dispatch:i.dispatch}}});
 //# sourceMappingURL=index.umd.js.map

dist/src/createStore.d.ts

@@ -1,2 +0,2 @@
-import { Reducer } from 'react';
+import { Reducer, SetStateAction } from 'react';
 /**
@@ -36,3 +36,6 @@ * Create a global store.
      */
-    useGlobalState: <StateKey extends keyof State>(stateKey: StateKey) => readonly [State[StateKey]];
+    useGlobalState: <StateKey extends keyof State>(stateKey: StateKey) => readonly [
+        State[StateKey],
+        (u: SetStateAction<State[StateKey]>) => void
+    ];
     getState: () => State;
@@ -39,0 +42,0 @@ dispatch: (action: Action) => Action;

package.json

 {
   "name": "react-hooks-global-state",
   "description": "Simple global state for React with Hooks API without Context API",
-  "version": "2.0.0-alpha.5",
-  "publishConfig": {
-    "tag": "next"
-  },
+  "version": "2.0.0-rc.0",
   "author": "Daishi Kato",
@@ -32,4 +29,4 @@ "repository": {
   "scripts": {
-    "compile": "microbundle build -f modern,umd",
-    "postcompile": "cp dist/index.modern.mjs dist/index.modern.js && cp dist/index.modern.mjs.map dist/index.modern.js.map",
+    "compile": "microbundle build -f modern,umd --globals react=React",
+    "postcompile": "cp dist/index.modern.js dist/index.modern.mjs && cp dist/index.modern.js.map dist/index.modern.mjs.map",
     "test": "run-s eslint tsc-test jest e2e-test:*",
@@ -51,17 +48,15 @@ "eslint": "eslint --ext .js,.ts,.tsx --ignore-pattern dist .",
     "e2e-test:11_deep": "server-test examples:11_deep 8080 'jest --preset jest-puppeteer __tests__/e2e/11_deep.ts'",
-    "e2e-test:12_effect": "server-test examples:12_effect 8080 'jest --preset jest-puppeteer __tests__/e2e/12_effect.ts'",
     "e2e-test:13_persistence": "server-test examples:13_persistence 8080 'jest --preset jest-puppeteer __tests__/e2e/13_persistence.ts'",
-    "examples:01_minimal": "DIR=01_minimal EXT=js webpack-cli serve",
-    "examples:02_typescript": "DIR=02_typescript webpack-cli serve",
-    "examples:03_actions": "DIR=03_actions webpack-cli serve",
-    "examples:04_fetch": "DIR=04_fetch webpack-cli serve",
-    "examples:05_onmount": "DIR=05_onmount webpack-cli serve",
-    "examples:06_reducer": "DIR=06_reducer webpack-cli serve",
-    "examples:07_middleware": "DIR=07_middleware webpack-cli serve",
-    "examples:08_thunk": "DIR=08_thunk webpack-cli serve",
-    "examples:09_comparison": "DIR=09_comparison webpack-cli serve",
-    "examples:10_immer": "DIR=10_immer webpack-cli serve",
-    "examples:11_deep": "DIR=11_deep webpack-cli serve",
-    "examples:12_effect": "DIR=12_effect webpack-cli serve",
-    "examples:13_persistence": "DIR=13_persistence webpack-cli serve"
+    "examples:01_minimal": "DIR=01_minimal EXT=js webpack serve",
+    "examples:02_typescript": "DIR=02_typescript webpack serve",
+    "examples:03_actions": "DIR=03_actions webpack serve",
+    "examples:04_fetch": "DIR=04_fetch webpack serve",
+    "examples:05_onmount": "DIR=05_onmount webpack serve",
+    "examples:06_reducer": "DIR=06_reducer webpack serve",
+    "examples:07_middleware": "DIR=07_middleware webpack serve",
+    "examples:08_thunk": "DIR=08_thunk webpack serve",
+    "examples:09_comparison": "DIR=09_comparison webpack serve",
+    "examples:10_immer": "DIR=10_immer webpack serve",
+    "examples:11_deep": "DIR=11_deep webpack serve",
+    "examples:13_persistence": "DIR=13_persistence webpack serve"
   },
@@ -84,41 +79,42 @@ "jest": {
   "dependencies": {
-    "zustand": "^3.5.10"
+    "zustand": "4.0.0-rc.1"
   },
   "devDependencies": {
-    "@testing-library/react": "^12.0.0",
-    "@types/expect-puppeteer": "^4.4.6",
-    "@types/jest": "^27.0.1",
-    "@types/jest-environment-puppeteer": "^4.4.1",
-    "@types/puppeteer": "^5.4.4",
-    "@types/react": "^17.0.20",
-    "@types/react-dom": "^17.0.9",
+    "@testing-library/react": "^13.2.0",
+    "@types/expect-puppeteer": "^4.4.7",
+    "@types/jest": "^27.5.1",
+    "@types/jest-environment-puppeteer": "^5.0.2",
+    "@types/puppeteer": "^5.4.6",
+    "@types/react": "^18.0.9",
+    "@types/react-dom": "^18.0.5",
     "@types/redux-logger": "^3.0.9",
-    "@typescript-eslint/eslint-plugin": "^4.31.0",
-    "@typescript-eslint/parser": "^4.31.0",
+    "@typescript-eslint/eslint-plugin": "^5.26.0",
+    "@typescript-eslint/parser": "^5.26.0",
     "documentation": "^13.2.5",
-    "eslint": "^7.32.0",
-    "eslint-config-airbnb": "^18.2.1",
-    "eslint-plugin-import": "^2.24.2",
-    "eslint-plugin-jsx-a11y": "^6.4.1",
-    "eslint-plugin-react": "^7.25.1",
-    "eslint-plugin-react-hooks": "^4.2.0",
-    "html-webpack-plugin": "^5.3.2",
-    "immer": "^9.0.6",
-    "jest": "^27.1.1",
-    "jest-puppeteer": "^5.0.4",
-    "microbundle": "^0.13.3",
+    "eslint": "^8.16.0",
+    "eslint-config-airbnb": "^19.0.4",
+    "eslint-plugin-import": "^2.26.0",
+    "eslint-plugin-jsx-a11y": "^6.5.1",
+    "eslint-plugin-react": "^7.30.0",
+    "eslint-plugin-react-hooks": "^4.5.0",
+    "html-webpack-plugin": "^5.5.0",
+    "immer": "^9.0.14",
+    "jest": "^28.1.0",
+    "jest-environment-jsdom": "^28.1.0",
+    "jest-puppeteer": "^6.1.0",
+    "microbundle": "^0.15.0",
     "npm-run-all": "^4.1.5",
-    "puppeteer": "^10.2.0",
-    "react": "^16.13.1",
-    "react-dom": "^17.0.2",
-    "redux": "^4.1.1",
+    "puppeteer": "^14.1.1",
+    "react": "^18.1.0",
+    "react-dom": "^18.1.0",
+    "redux": "^4.2.0",
     "redux-logger": "^3.0.6",
-    "redux-thunk": "^2.3.0",
+    "redux-thunk": "^2.4.1",
     "start-server-and-test": "^1.14.0",
-    "ts-jest": "^27.0.5",
-    "ts-loader": "^9.2.5",
-    "typescript": "^4.4.2",
-    "webpack": "^5.52.0",
-    "webpack-cli": "^4.8.0",
-    "webpack-dev-server": "^4.1.1"
+    "ts-jest": "^28.0.3",
+    "ts-loader": "^9.3.0",
+    "typescript": "^4.7.2",
+    "webpack": "^5.72.1",
+    "webpack-cli": "^4.9.2",
+    "webpack-dev-server": "^4.9.0"
   },
@@ -125,0 +121,0 @@ "peerDependencies": {

README.md

@@ -196,3 +196,2 @@ # react-hooks-global-state
 [11](https://codesandbox.io/s/github/dai-shi/react-hooks-global-state/tree/main/examples/11\_deep)
-[12](https://codesandbox.io/s/github/dai-shi/react-hooks-global-state/tree/main/examples/12\_effect)
 [13](https://codesandbox.io/s/github/dai-shi/react-hooks-global-state/tree/main/examples/13\_persistence)
@@ -199,0 +198,0 @@

src/createGlobalState.ts

@@ -13,8 +13,5 @@ import { SetStateAction, useCallback } from 'react';
 
-const updateValue = <Value>(oldValue: Value, newValue: SetStateAction<Value>) => {
-  if (isFunction(newValue)) {
-    return newValue(oldValue);
-  }
-  return newValue;
-};
+const updateValue = <Value>(oldValue: Value, newValue: SetStateAction<Value>) => (
+  isFunction(newValue) ? newValue(oldValue) : newValue
+);
 
@@ -54,3 +51,3 @@ /**
       [stateKey]: updateValue(previousState[stateKey], update),
-    } as Pick<State, StateKey>));
+    } as Pick<State, StateKey> as Partial<State>));
   };
@@ -57,0 +54,0 @@

src/createStore.ts

 /* eslint @typescript-eslint/no-explicit-any: off */
 
-import { Reducer, useCallback } from 'react';
+import { Reducer, SetStateAction, useCallback } from 'react';
 
@@ -8,2 +8,6 @@ import create from 'zustand';
 
+type ExtractState<S> = S extends {
+  getState: () => infer T;
+} ? T : never;
+
 const validateStateKey = (keys: string[], stateKey: string) => {
@@ -15,2 +19,8 @@ if (!keys.includes(stateKey)) {
 
+const isFunction = (fn: unknown): fn is Function => (typeof fn === 'function');
+
+const updateValue = <Value>(oldValue: Value, newValue: SetStateAction<Value>) => (
+  isFunction(newValue) ? newValue(oldValue) : newValue
+);
+
 /**
@@ -45,7 +55,8 @@ * Create a global store.
 ): Store<State, Action> => {
-  if (enhancer) return enhancer(createStore)(reducer, initialState) as never;
+  if (enhancer) return enhancer(createStore)(reducer, initialState);
 
-  const useStore = create<State>(redux(reducer, initialState));
+  const useStore = create(redux(reducer, initialState));
 
-  type StateKeys = keyof State;
+  type BoundState = ExtractState<typeof useStore>;
+  type StateKeys = keyof BoundState;
   const keys = Object.keys(initialState);
@@ -57,3 +68,6 @@
     }
-    const selector = useCallback((state: State) => state[stateKey], [stateKey]);
+    const selector = useCallback(
+      (state: BoundState) => state[stateKey],
+      [stateKey],
+    );
     return useStore(selector);
@@ -67,3 +81,12 @@ };
     }
-    return [useStoreState(stateKey)] as const;
+    const partialState = useStoreState(stateKey);
+    const updater = useCallback(
+      (update: SetStateAction<BoundState[StateKey]>) => {
+        useStore.setState((previousState) => ({
+          [stateKey]: updateValue(previousState[stateKey], update),
+        } as Pick<BoundState, StateKey> as Partial<BoundState>));
+      },
+      [stateKey],
+    );
+    return [partialState, updater] as const;
   };
@@ -75,4 +98,4 @@
     getState: useStore.getState,
-    dispatch: (useStore as any).dispatch,
-  };
+    dispatch: useStore.dispatch,
+  } as unknown as Store<State, Action>;
 };
@@ -87,5 +110,8 @@
    */
-  useGlobalState: <StateKey extends keyof State>(stateKey: StateKey) => readonly [State[StateKey]];
+  useGlobalState: <StateKey extends keyof State>(stateKey: StateKey) => readonly [
+    State[StateKey],
+    (u: SetStateAction<State[StateKey]>) => void,
+  ];
   getState: () => State;
   dispatch: (action: Action) => Action;
 };

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

53109

increased by7.98%

Lines of code

256

increased by9.87%

Worsened metrics

Dev dependency count

37

increased by2.78%

Number of lines in readme file

211

decreased by-0.47%

Dependency changes

• + Addedjs-tokens@4.0.0(transitive)

• + Addedloose-envify@1.4.0(transitive)

• + Addedreact@18.3.1(transitive)

• + Addeduse-sync-external-store@1.1.0(transitive)

• + Addedzustand@4.0.0-rc.1(transitive)

• - Removedzustand@3.7.2(transitive)

• Updatedzustand@4.0.0-rc.1