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

Comparing version 0.9.0 to 0.10.0

CHANGELOG.md

@@ -5,2 +5,6 @@ # Change Log
 
+## [0.10.0] - 2019-05-25
+### Changed
+- Trick to support react-hot-loader
+
 ## [0.9.0] - 2019-03-18
@@ -7,0 +11,0 @@ ### Changed

dist/index.js

@@ -51,3 +51,4 @@ "use strict";
   var globalState = initialState;
-  var listeners = [];
+  var listener = null;
+  var pending = [];
 
@@ -73,17 +74,24 @@ var calculateChangedBits = function calculateChangedBits(a, b) {
     (0, _react.useEffect)(function () {
-      listeners.push(setState);
+      if (listener) throw new Error('You cannot use <GlobalStateProvider> more than once.');
+      listener = setState;
 
-      if (globalState !== initialState) {
-        // globalState is updated during the initialization
-        // Note: there could be a better way for this
-        setState(globalState);
+      if (globalState === state) {
+        // flush pending which is added by initialization
+        pending.forEach(function (f) {
+          return f();
+        });
+      } else {
+        // probably state was saved by react-hot-loader, so restore it
+        globalState = state;
       }
 
+      pending.splice(0, pending.length); // clear pending
+
       var cleanup = function cleanup() {
-        var index = listeners.indexOf(setState);
-        listeners.splice(index, 1);
+        listener = null;
       };
 
-      return cleanup;
-    }, []);
+      return cleanup; // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [initialState]); // trick for react-hot-loader
+
     return (0, _react.createElement)(Context.Provider, {
@@ -95,6 +103,12 @@ value: state
   var setGlobalState = function setGlobalState(name, update) {
-    globalState = _objectSpread({}, globalState, _defineProperty({}, name, updateValue(globalState[name], update)));
-    listeners.forEach(function (f) {
-      return f(globalState);
-    });
+    var f = function f() {
+      globalState = _objectSpread({}, globalState, _defineProperty({}, name, updateValue(globalState[name], update)));
+      listener(globalState);
+    };
+
+    if (listener) {
+      f();
+    } else {
+      pending.push(f);
+    }
   };
@@ -117,6 +131,11 @@
   var setState = function setState(state) {
-    globalState = state;
-    listeners.forEach(function (f) {
-      return f(globalState);
-    });
+    if (listener) {
+      globalState = state;
+      listener(globalState);
+    } else {
+      pending.push(function () {
+        globalState = state;
+        listener(globalState);
+      });
+    }
   };
@@ -123,0 +142,0 @@

package.json

 {
   "name": "react-hooks-global-state",
   "description": "Simple global state for React with Hooks API",
-  "version": "0.9.0",
+  "version": "0.10.0",
   "author": "Daishi Kato",
@@ -64,2 +64,3 @@ "repository": {
     "eslint-plugin-react": "^7.12.4",
+    "eslint-plugin-react-hooks": "^1.5.1",
     "html-webpack-plugin": "^3.2.0",
@@ -66,0 +67,0 @@ "immer": "^2.1.3",

README.md

@@ -132,6 +132,6 @@ # react-hooks-global-state
 
-- [TypeScript-aware React hooks for global state](https://medium.com/@dai_shi/typescript-aware-react-hooks-for-global-state-b6e2dfc0e9a7)
-- [An alternative to React Redux by React Hooks API (For both JavaScript and TypeScript)](https://medium.com/@dai_shi/an-alternative-to-react-redux-by-react-hooks-api-for-both-javascript-and-typescript-c5e9a351ba0b)
-- [Redux middleware compatible React Hooks library for easy global state management](https://medium.com/@dai_shi/redux-middleware-compatible-react-hooks-library-for-easy-global-state-management-4fe73623e69e)
-- [React Hooks Tutorial on pure useReducer + useContext for global state like Redux and comparison with react-hooks-global-state](https://medium.com/@dai_shi/react-hooks-tutorial-for-pure-usereducer-usecontext-for-global-state-like-redux-and-comparison-dd3da5053624)
+- [TypeScript-aware React hooks for global state](https://blog.axlight.com/posts/typescript-aware-react-hooks-for-global-state/)
+- [An alternative to React Redux by React Hooks API (For both JavaScript and TypeScript)](https://blog.axlight.com/posts/an-alternative-to-react-redux-by-react-hooks-api-for-both-javascript-and-typescript/)
+- [Redux middleware compatible React Hooks library for easy global state management](https://blog.axlight.com/posts/redux-middleware-compatible-react-hooks-library-for-easy-global-state-management/)
+- [React Hooks Tutorial on pure useReducer + useContext for global state like Redux and comparison with react-hooks-global-state](https://blog.axlight.com/posts/react-hooks-tutorial-for-pure-usereducer-usecontext-for-global-state-like-redux-and-comparison/)
 
@@ -138,0 +138,0 @@ ## Community Wiki

src/index.js

@@ -36,3 +36,4 @@ import {
   let globalState = initialState;
-  const listeners = [];
+  let listener = null;
+  const pending = [];
 
@@ -52,14 +53,18 @@ const calculateChangedBits = (a, b) => {
     useEffect(() => {
-      listeners.push(setState);
-      if (globalState !== initialState) {
-        // globalState is updated during the initialization
-        // Note: there could be a better way for this
-        setState(globalState);
+      if (listener) throw new Error('You cannot use <GlobalStateProvider> more than once.');
+      listener = setState;
+      if (globalState === state) {
+        // flush pending which is added by initialization
+        pending.forEach(f => f());
+      } else {
+        // probably state was saved by react-hot-loader, so restore it
+        globalState = state;
       }
+      pending.splice(0, pending.length); // clear pending
       const cleanup = () => {
-        const index = listeners.indexOf(setState);
-        listeners.splice(index, 1);
+        listener = null;
       };
       return cleanup;
-    }, []);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [initialState]); // trick for react-hot-loader
     return createElement(Context.Provider, { value: state }, children);
@@ -69,7 +74,14 @@ };
   const setGlobalState = (name, update) => {
-    globalState = {
-      ...globalState,
-      [name]: updateValue(globalState[name], update),
+    const f = () => {
+      globalState = {
+        ...globalState,
+        [name]: updateValue(globalState[name], update),
+      };
+      listener(globalState);
     };
-    listeners.forEach(f => f(globalState));
+    if (listener) {
+      f();
+    } else {
+      pending.push(f);
+    }
   };
@@ -88,4 +100,11 @@
   const setState = (state) => {
-    globalState = state;
-    listeners.forEach(f => f(globalState));
+    if (listener) {
+      globalState = state;
+      listener(globalState);
+    } else {
+      pending.push(() => {
+        globalState = state;
+        listener(globalState);
+      });
+    }
   };
@@ -92,0 +111,0 @@

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

31149

increased by3.41%

Lines of code

531

increased by7.06%

Worsened metrics

Dev dependency count

31

increased by3.33%

No dependency changes