@webkrafters/react-observable-context 1.1.2 → 1.1.4

package/README.md

@@ -1,12 +1,14 @@
 # React-Observable-Context
 
-Observable react context - prevents an automatic total component tree re-rendering at context change.
+A context bearing an observable consumer store. State changes within the store's internal state are only broadcasted to components subscribed to the store. In this way, the `React-Observable-Context` prevents repeated automatic re-renderings of entire component trees resulting from ***context*** state changes.
+
+**React::memo** *(and PureComponents)* remain the go-to solution for the repeated automatic re-renderings of entire component trees resulting from ***component*** state changes.
 
 <h4><u>Install</u></h4>
 
-npm i -S @webkrafters/react-hoc-memo
+npm i -S @webkrafters/react-observable-context
 
-npm install --save @webkrafters/react-hoc-memo
+npm install --save @webkrafters/react-observable-context
 
 ## API
 
@@ -16,13 +18,13 @@ The React-Observable-Context package exports only **2** modules namely: the **cr
 
 The `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>.
 
-<i><u>Note:</u></i> the Provider `context` prop is not updateable. Once set, all further updates to this prop are ignored.
+<i><u>Note:</u></i> the Provider `context` prop is not updateable. Once set, all further updates to this prop are not recorded.
 
 The context's `store` exposes **4** methods for interacting with the context's internal state namely:
 
 * **getState**: (selector?: (state: State) => any) => any
 
-* **resetState**: VoidFunction // resets the state to the Provider latest `value` prop.
+* **resetState**: VoidFunction // resets the state to the Provider initial `value` prop.
 
 * **setState**: (changes: PartialState\<State\>) => void
 
@@ -36,7 +38,7 @@ The context's store update operation adheres to **2** user supplied prehooks whe
 
 * **setState**: (newChanges: PartialState\<State\>) => boolean
 
-**usecase**: prehooks provide a central place for sanitizing, modifying, transforming, validating etc. all related incoming state updates. The prehook returns a **boolean** value (`true` to continue OR `false` to abort the update operation). The prehook may mutate (i.e. sanitize, transform, transpose) its argument values to accurately reflect the intended update value.
+***usecase***: prehooks provide a central place for sanitizing, modifying, transforming, validating etc. all related incoming state updates. The prehook returns a **boolean** value (`true` to continue OR `false` to abort the update operation). The prehook may mutate (i.e. sanitize, transform, transpose) its argument values to accurately reflect the intended update value.
 
 ## Usage
 

package/dist/index.js

@@ -46,7 +46,8 @@ var reportNonReactUsage = function reportNonReactUsage() {
 };
 
 /**
- * @type {(state: T) => PartialState<T>}
+ * @param {T} state
+ * @return {PartialState<T>}
  * @template {State} T
  */
 var defaultSelector = function defaultSelector(state) {
@@ -96,6 +97,18 @@ var _setState = function _setState(state, newState, onStateChange) {
   !(0, _lodash2["default"])(newChanges) && onStateChange(newChanges, replacedValue);
 };
 
+/**
+ * @param {Prehooks<T>} prehooks
+ * @template {State} T
+ */
+var usePrehooksRef = function usePrehooksRef(prehooks) {
+  var prehooksRef = (0, _react.useRef)(prehooks);
+  (0, _react.useEffect)(function () {
+    prehooksRef.current = prehooks;
+  }, [prehooks]);
+  return prehooksRef;
+};
+
 /**
  * Note: `context` prop is not updateable. Furtther updates to this prop are ignored.
  *
@@ -114,21 +127,25 @@ var Provider = function Provider(_ref) {
     _ref$prehooks = _ref.prehooks,
     prehooks = _ref$prehooks === void 0 ? defaultPrehooks : _ref$prehooks,
     value = _ref.value;
-  var prehooksRef = (0, _react.useRef)(prehooks);
+  var prehooksRef = usePrehooksRef(prehooks);
   var initialState = (0, _react.useRef)(value);
 
-  /** @type {[T, Function]} */
+  /** @type {[Set<Listener<T>>, Function]} */
   var _useState = (0, _react.useState)(function () {
-      return (0, _lodash["default"])(value);
+      return new Set();
     }),
     _useState2 = _slicedToArray(_useState, 1),
-    state = _useState2[0];
-  /** @type {[Set<Listener<T>>, Function]} */
+    listeners = _useState2[0];
+  /** @type {[T, Function]} */
   var _useState3 = (0, _react.useState)(function () {
-      return new Set();
+      return (0, _lodash["default"])(value);
     }),
     _useState4 = _slicedToArray(_useState3, 1),
-    listeners = _useState4[0];
+    state = _useState4[0];
+  /** @type {ObservableContext<T>} */
+  var _useState5 = (0, _react.useState)(context),
+    _useState6 = _slicedToArray(_useState5, 1),
+    StoreContext = _useState6[0];
 
   /** @type {Listener<T>} */
   var onChange = function onChange(newValue, oldValue) {
@@ -154,6 +171,7 @@ var Provider = function Provider(_ref) {
 
   /** @type {Store<T>["setState"]} */
   var setState = (0, _react.useCallback)(function (changes) {
+    changes = (0, _lodash["default"])(changes);
     (!('setState' in prehooksRef.current) || prehooksRef.current.setState(changes)) && _setState(state, changes, onChange);
   }, []);
 
@@ -167,12 +185,9 @@ var Provider = function Provider(_ref) {
   (0, _react.useEffect)(function () {
     return setState((0, _lodash["default"])(value));
   }, [value]);
-  (0, _react.useEffect)(function () {
-    prehooksRef.current = prehooks;
-  }, [prehooks]);
-  /** @type {[Store<T>, Function]} */
 
-  var _useState5 = (0, _react.useState)(function () {
+  /** @type {[Store<T>, Function]} */
+  var _useState7 = (0, _react.useState)(function () {
       return {
         getState: getState,
         resetState: resetState,
@@ -180,12 +195,8 @@ var Provider = function Provider(_ref) {
         subscribe: subscribe
       };
     }),
-    _useState6 = _slicedToArray(_useState5, 1),
-    store = _useState6[0];
-  /** @type {ObservableContext<T>} */
-  var _useState7 = (0, _react.useState)(context),
     _useState8 = _slicedToArray(_useState7, 1),
-    StoreContext = _useState8[0];
+    store = _useState8[0];
   return /*#__PURE__*/_react["default"].createElement(StoreContext.Provider, {
     value: store
   }, children);

package/package.json

@@ -75,5 +75,5 @@
     "test:watch": "eslint --fix && jest --watchAll"
   },
   "types": "dist/index.d.ts",
-  "version": "1.1.2"
+  "version": "1.1.4"
 }