@webkrafters/react-observable-context 2.0.0 → 2.1.0

package/README.md

@@ -16,7 +16,7 @@ The React-Observable-Context package exports **3** modules namely: the **createC
 
 * **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`.
 
-* **useContext** is analogous to React::useContext hook but returns the context store and takes a second parameter named ***watchedKeys***. The `watchedKeys` parameter is a list of state object property names to watch. Change in any of the referenced properties automatically triggers a render of the component calling this hook.  
+* **useContext** is analogous to React::useContext hook but returns the context store and takes a second parameter named ***watchedKeys***. The `watchedKeys` parameter is a list of state object property paths to watch. A change in any of the referenced properties automatically triggers a render of the component calling this hook.
 
 * **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>.
 
@@ -30,7 +30,7 @@ The context's `store` exposes **4** methods for interacting with the context's i
 
 * **resetState**: VoidFunction // resets the state to the Provider initial `value` prop.
 
-* **setState**: (changes: PartialState\<State\>) => void
+* **setState**: (changes: PartialState\<State\>) => void // sets only new/changed top level properties.
 
 * **subscribe**: (listener: (newValue: PartialState\<State\>, oldValue: PartialState\<State\>) => void) => ***UnsubscribeFunction***
 

package/dist/index.d.ts

@@ -1,25 +1,25 @@
 export class UsageError extends Error {
 }
-export function createContext<T_1 extends State>(): React.Context<Store<T_2>>;
-export function useContext<T_1 extends State>(context: React.Context<Store<T_2>>, watchedKeys?: (keyof T_1)[]): Store<T_1>;
+export function createContext<T_1 extends State>(): import("react").Context<Store<T_1>>;
+export function useContext<T_1 extends State>(context: import("react").Context<Store<T_1>>, watchedKeys?: (string | keyof T_1)[]): Store<T_1>;
 /**
  * Note: `context` prop is not updateable. Furtther updates to this prop are ignored.
  *
- * @type {React.FC<{
- * 		children?: React.ReactNode,
+ * @type {FC<{
+ * 		children?: ReactNode,
  * 		context: ObservableContext<T>,
  * 		prehooks?: Prehooks<T>
  * 		value: PartialState<T>
  * }>}
  * @template {State} T
  */
-export const Provider: React.FC<{
-    children?: React.ReactNode;
-    context: React.Context<Store<T_1>>;
+export const Provider: FC<{
+    children?: ReactNode;
+    context: ObservableContext<T>;
     prehooks?: Prehooks<T>;
     value: PartialState<T>;
 }>;
-export type ObservableContext<T_1 extends State> = React.Context<Store<T>>;
+export type ObservableContext<T_1 extends State> = Context<Store<T>>;
 export type OptionalTask<F = void> = F extends void ? () => never : F;
 export type Listener<T_1 extends State> = (newValue: PartialState<T>, oldValue: PartialState<T>) => void;
 export type State = {
@@ -43,4 +43,7 @@ export type Store<T_1 extends State> = {
     subscribe: (listener: Listener<T>) => Unsubscribe;
 };
 export type Unsubscribe = VoidFunction;
+export type ReactNode = import("react").ReactNode;
+export type FC<P = {}> = import("react").FC<P>;
+export type Context<T_1> = import("react").Context<T>;
 //# sourceMappingURL=index.d.ts.map

package/dist/index.js

@@ -1,6 +1,5 @@
 "use strict";
 
-function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
@@ -9,9 +8,12 @@ var _react = _interopRequireWildcard(require("react"));
 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"));
 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; }
+function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
 function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
 function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
 function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
@@ -72,13 +74,14 @@ var createContext = function createContext() {
  * Actively monitors the store and triggers component re-render if any of the watched keys in the state objects changes
  *
  * @param {ObservableContext<T>} context
- * @param {Array<keyof T>} [watchedKeys = []] Names of state properties to watch. A change in any of the referenced properties results in this component render.
+ * @param {Array<string|keyof T>} [watchedKeys = []] A list of state object property paths to watch. A change in any of the referenced properties results in this component render.
  * @returns {Store<T>}
  * @template {State} T
  */
 exports.createContext = createContext;
 var useContext = function useContext(context) {
   var watchedKeys = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : [];
+  /** @type {Store<T>} */
   var store = (0, _react.useContext)(context);
   var _useState = (0, _react.useState)(false),
     _useState2 = _slicedToArray(_useState, 2),
@@ -143,24 +146,82 @@ var usePrehooksRef = function usePrehooksRef(prehooks) {
   return prehooksRef;
 };
 
+/** @type {FC<{child: ReactNode}>} */
+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'))) {
+      nodeRef.current = node;
+    }
+    return nodeRef.current;
+  };
+  var ChildMemo = /*#__PURE__*/(0, _react.memo)(function (_ref) {
+    var child = _ref.child;
+    return child;
+  });
+  ChildMemo.displayName = 'ObservableContext.Provider.Internal.Guardian.ChildMemo';
+  var Guardian = function Guardian(_ref2) {
+    var child = _ref2.child;
+    return /*#__PURE__*/_react["default"].createElement(ChildMemo, {
+      child: useNodeMemo(child)
+    });
+  };
+  Guardian.displayName = 'ObservableContext.Provider.Internal.Guardian';
+  return Guardian;
+}();
+
+/** @type {(children: ReactNode) => ReactNode} */
+var memoizeImmediateChildTree = function memoizeImmediateChildTree(children) {
+  return _react.Children.map(children, function (child) {
+    var _child$props;
+    if (_typeof(child.type) === 'object' && 'compare' in child.type) {
+      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));
+    }
+    return /*#__PURE__*/_react["default"].createElement(ChildMemo, {
+      child: child
+    });
+  });
+};
+
+/**
+* @type {FC<{
+* 		children?: ReactNode,
+* 		context: ObservableContext<T>,
+* 		value: Store<T>
+* }>}
+* @template {State} T
+*/
+var ProviderInternal = function ProviderInternal(_ref3) {
+  var children = _ref3.children,
+    StoreContext = _ref3.context,
+    value = _ref3.value;
+  return /*#__PURE__*/_react["default"].createElement(StoreContext.Provider, {
+    value: value
+  }, memoizeImmediateChildTree(children));
+};
+ProviderInternal.displayName = 'ObservableContext.Provider.Internal';
+
 /**
  * Note: `context` prop is not updateable. Furtther updates to this prop are ignored.
  *
- * @type {React.FC<{
- * 		children?: React.ReactNode,
+ * @type {FC<{
+ * 		children?: ReactNode,
  * 		context: ObservableContext<T>,
  * 		prehooks?: Prehooks<T>
  * 		value: PartialState<T>
  * }>}
  * @template {State} T
  */
-var Provider = function Provider(_ref) {
-  var _ref$children = _ref.children,
-    children = _ref$children === void 0 ? null : _ref$children,
-    context = _ref.context,
-    _ref$prehooks = _ref.prehooks,
-    prehooks = _ref$prehooks === void 0 ? defaultPrehooks : _ref$prehooks,
-    value = _ref.value;
+var Provider = function Provider(_ref4) {
+  var _ref4$children = _ref4.children,
+    children = _ref4$children === void 0 ? null : _ref4$children,
+    context = _ref4.context,
+    _ref4$prehooks = _ref4.prehooks,
+    prehooks = _ref4$prehooks === void 0 ? defaultPrehooks : _ref4$prehooks,
+    value = _ref4.value;
   var prehooksRef = usePrehooksRef(prehooks);
   var initialState = (0, _react.useRef)(value);
 
@@ -231,7 +292,8 @@ var Provider = function Provider(_ref) {
     }),
     _useState10 = _slicedToArray(_useState9, 1),
     store = _useState10[0];
-  return /*#__PURE__*/_react["default"].createElement(StoreContext.Provider, {
+  return /*#__PURE__*/_react["default"].createElement(ProviderInternal, {
+    context: StoreContext,
     value: store
   }, children);
 };
@@ -239,7 +301,7 @@ exports.Provider = Provider;
 Provider.displayName = 'ObservableContext.Provider';
 
 /**
- * @typedef {React.Context<Store<T>>} ObservableContext
+ * @typedef {Context<Store<T>>} ObservableContext
  * @template {State} T
  */
 
@@ -283,4 +345,16 @@ Provider.displayName = 'ObservableContext.Provider';
  * @template {State} T
  */
 
-/** @typedef {VoidFunction} Unsubscribe */
+/** @typedef {VoidFunction} Unsubscribe */
+
+/** @typedef {import("react").ReactNode} ReactNode */
+
+/**
+ * @typedef {import("react").FC<P>} FC
+ * @template [P={}]
+ */
+
+/**
+ * @typedef {import("react").Context<T>} Context
+ * @template T
+ */

package/package.json

@@ -11,6 +11,8 @@
     "lodash.clonedeep": "^4.5.0",
     "lodash.has": "^4.5.2",
     "lodash.isempty": "^4.4.0",
+    "lodash.isequal": "^4.5.0",
+    "lodash.omit": "^4.5.0",
     "react": "^18.2.0"
   },
   "description": "Observable react context - prevents an automatic total component tree tear-down and re-rendering during context updates.",
@@ -72,9 +74,9 @@
   },
   "scripts": {
     "build": "eslint --fix && rm -rf dist && babel src -d dist && npx -p typescript tsc",
-    "test": "eslint --fix && jest",
-    "test:watch": "eslint --fix && jest --watchAll"
+    "test": "eslint --fix && jest --updateSnapshot",
+    "test:watch": "eslint --fix && jest --updateSnapshot --watchAll"
   },
   "types": "dist/index.d.ts",
-  "version": "2.0.0"
+  "version": "2.1.0"
 }