@webkrafters/react-observable-context 2.1.3 → 2.1.4

package/README.md

@@ -4,11 +4,13 @@ A context bearing an observable consumer store. State changes within the store's
 
 **React::memo** *(and PureComponents)* remain the go-to solution for the repeated automatic re-renderings of entire component trees resulting from ***component*** state changes. 
 
-_**Recommendation:**_ Wrap all components calling this package's ***useContext*** function in **React::memo**. This will protect such components and their descendants from unrelated cascading render operations. 
+_**Recommendation:**_ For optimum performance, consider wrapping in **React::memo** most components using this package's ***useContext*** function either directly or through another React hook. This will protect such components and their descendants from unrelated cascading render operations.
+
+***Exempt*** from the recommendation are certain components such as those wrapped in the `React-Redux::connect()` Higher Order Component (HOC). Such HOC provides similar cascade-render protections to wrapped components and their descendants. 
 
 <hr />
 
-<h4><u>Install</u></h4>
+<h3><u>Install</u></h3>
 
 npm i -S @webkrafters/react-observable-context
 
@@ -16,7 +18,7 @@ npm install --save @webkrafters/react-observable-context
 
 ## API
 
-The React-Observable-Context package exports **3** modules namely: the **createContext** method, the **useContext** hook and the **Provider** component.
+The React-Observable-Context package exports **4** modules namely: the **createContext** method, the **useContext** hook, the **Provider** component and the **UsageError** class.
 
 * **createContext** is a zero-parameter funtion returning a store-bearing context. Pass the context to the React::useContext() parameter to obtain the context's `store`.
 
@@ -24,6 +26,8 @@ The React-Observable-Context package exports **3** modules namely: the **createC
 
 * **Provider** can immediately be used as-is anywhere the React-Observable-Context is required. It accepts **3** props and the customary Provider `children` prop. Supply the context to its `context` prop; the initial state to the customary Provider `value` prop; and the optional `prehooks` prop <i>(discussed in the prehooks section below)</i>.
 
+* **UsageError** class is the Error type reported for attempts to access this context's store outside of its Provider component tree.
+
 ***<u>Note:</u>*** the Provider `context` prop is not updateable. Once set, all further updates to this prop are not recorded.
 
 ### The Store

package/dist/index.js

@@ -9,7 +9,8 @@ var _lodash = _interopRequireDefault(require("lodash.clonedeep"));
 var _lodash2 = _interopRequireDefault(require("lodash.has"));
 var _lodash3 = _interopRequireDefault(require("lodash.isempty"));
 var _lodash4 = _interopRequireDefault(require("lodash.isequal"));
-var _lodash5 = _interopRequireDefault(require("lodash.omit"));
+var _lodash5 = _interopRequireDefault(require("lodash.isplainobject"));
+var _lodash6 = _interopRequireDefault(require("lodash.omit"));
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
@@ -111,28 +112,59 @@ var useContext = function useContext(context) {
  */
 exports.useContext = useContext;
 var defaultPrehooks = Object.freeze({});
-
-/**
- * @param {T} state
- * @param {PartialState<T>} newState
- * @param {Listener<T>} onStateChange
- * @template {State} T
- */
-var _setState = function _setState(state, newState, onStateChange) {
-  /** @type {PartialState<T>} */
-  var newChanges = {};
-  /** @type {PartialState<T>} */
-  var replacedValue = {};
-  for (var k in newState) {
-    if (state[k] === newState[k]) {
-      continue;
+var _setState = function () {
+  var setAtomic = function setAtomic(state, newState, changed, replaced, stateKey) {
+    if ((0, _lodash4["default"])(state[stateKey], newState[stateKey])) {
+      return;
     }
-    replacedValue[k] = state[k];
-    state[k] = newState[k];
-    newChanges[k] = newState[k];
-  }
-  !(0, _lodash3["default"])(newChanges) && onStateChange(newChanges, replacedValue);
-};
+    var isArrayNewState = Array.isArray(newState[stateKey]);
+    if (Array.isArray(state[stateKey]) && isArrayNewState) {
+      return setArray(state, newState, changed, replaced, stateKey);
+    }
+    var isPlainObjectNewState = (0, _lodash5["default"])(newState[stateKey]);
+    if ((0, _lodash5["default"])(state[stateKey]) && isPlainObjectNewState) {
+      return setPlainObject(state, newState, changed, replaced, stateKey);
+    }
+    replaced[stateKey] = state[stateKey];
+    state[stateKey] = isArrayNewState || isPlainObjectNewState ? (0, _lodash["default"])(newState[stateKey]) : newState[stateKey];
+    changed[stateKey] = newState[stateKey];
+  };
+  var setArray = function setArray(state, newState, changed, replaced, rootKey) {
+    changed[rootKey] = {};
+    replaced[rootKey] = {};
+    for (var i = 0, len = newState[rootKey].length; i < len; i++) {
+      setAtomic(state[rootKey], newState[rootKey], changed[rootKey], replaced[rootKey], i);
+    }
+  };
+  var setPlainObject = function setPlainObject(state, newState, changed, replaced, rootKey) {
+    changed[rootKey] = {};
+    replaced[rootKey] = {};
+    for (var k in newState[rootKey]) {
+      setAtomic(state[rootKey], newState[rootKey], changed[rootKey], replaced[rootKey], k);
+    }
+  };
+  var set = function set(state, newState) {
+    var changed = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {};
+    var replaced = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : {};
+    for (var k in newState) {
+      setAtomic(state, newState, changed, replaced, k);
+    }
+  };
+  /**
+   * @param {T} state
+   * @param {PartialState<T>} newState
+   * @param {Listener<T>} onStateChange
+   * @template {State} T
+   */
+  return function (state, newState, onStateChange) {
+    /** @type {PartialState<T>} */
+    var newChanges = {};
+    /** @type {PartialState<T>} */
+    var replacedValue = {};
+    set(state, newState, newChanges, replacedValue);
+    !(0, _lodash3["default"])(newChanges) && onStateChange(newChanges, replacedValue);
+  };
+}();
 
 /**
  * @param {Prehooks<T>} prehooks
@@ -150,7 +182,7 @@ var usePrehooksRef = function usePrehooksRef(prehooks) {
 var ChildMemo = function () {
   var useNodeMemo = function useNodeMemo(node) {
     var nodeRef = (0, _react.useRef)(node);
-    if (!(0, _lodash4["default"])((0, _lodash5["default"])(nodeRef.current, '_owner'), (0, _lodash5["default"])(node, '_owner'))) {
+    if (!(0, _lodash4["default"])((0, _lodash6["default"])(nodeRef.current, '_owner'), (0, _lodash6["default"])(node, '_owner'))) {
       nodeRef.current = node;
     }
     return nodeRef.current;
@@ -178,7 +210,7 @@ var memoizeImmediateChildTree = function memoizeImmediateChildTree(children) {
       return child;
     }
     if ((_child$props = child.props) !== null && _child$props !== void 0 && _child$props.children) {
-      child = /*#__PURE__*/(0, _react.cloneElement)(child, (0, _lodash5["default"])(child.props, 'children'), memoizeImmediateChildTree(child.props.children));
+      child = /*#__PURE__*/(0, _react.cloneElement)(child, (0, _lodash6["default"])(child.props, 'children'), memoizeImmediateChildTree(child.props.children));
     }
     return /*#__PURE__*/_react["default"].createElement(ChildMemo, {
       child: child
@@ -252,7 +284,8 @@ var Provider = function Provider(_ref4) {
   /** @type {Store<T>["getState"]} */
   var getState = (0, _react.useCallback)(function () {
     var selector = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : defaultSelector;
-    return selector(state);
+    var slice = selector(state);
+    return _typeof(slice) === 'object' ? (0, _lodash["default"])(slice) : slice;
   }, []);
 
   /** @type {Store<T>["resetState"]} */

package/package.json

@@ -12,6 +12,7 @@
     "lodash.has": "^4.5.2",
     "lodash.isempty": "^4.4.0",
     "lodash.isequal": "^4.5.0",
+    "lodash.isplainobject": "^4.0.6",
     "lodash.omit": "^4.5.0",
     "react": "^18.2.0"
   },
@@ -78,5 +79,5 @@
     "test:watch": "eslint --fix && jest --updateSnapshot --watchAll"
   },
   "types": "dist/index.d.ts",
-  "version": "2.1.3"
+  "version": "2.1.4"
 }