@webkrafters/react-observable-context 4.0.0-alpha.2 → 4.0.0-alpha.4

package/dist/constants.d.ts

@@ -1 +1 @@
-/** @type {"@@STATE"} */
+export const FULL_STATE_SELECTOR: "@@STATE";

package/dist/constants.js

@@ -3,9 +3,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.NULL_STATE_SELECTOR = exports.FULL_STATE_SELECTOR = void 0;
-/** @type {"@@STATE"} */
 var FULL_STATE_SELECTOR = '@@STATE';
 exports.FULL_STATE_SELECTOR = FULL_STATE_SELECTOR;
-/** @type {""} */
 var NULL_STATE_SELECTOR = '';
 exports.NULL_STATE_SELECTOR = NULL_STATE_SELECTOR;

package/dist/main/hooks/use-prehooks-ref/index.d.ts

@@ -1 +1 @@
-export default usePrehooksRef;
 * @param {Prehooks<T>} prehooks
 * @template {State} T
 */
+export default usePrehooksRef;

package/dist/main/hooks/use-prehooks-ref/index.js

@@ -4,7 +4,6 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports["default"] = void 0;
 var _react = require("react");
-/**
 * @param {Prehooks<T>} prehooks
 * @template {State} T
 */
 var usePrehooksRef = function usePrehooksRef(prehooks) {
   var prehooksRef = (0, _react.useRef)(prehooks);
   (0, _react.useEffect)(function () {

package/dist/main/hooks/use-render-key-provider/index.d.ts

@@ -1 +1 @@
-export default useRenderKeyProvider;
    [selectorKey: string]: string | keyof T;
 * @type {Provider<T>}
 * @template {State} T
 */
+export default useRenderKeyProvider;
    [selectorKey: string]: string | keyof T;

package/dist/main/hooks/use-render-key-provider/index.js

@@ -4,31 +4,19 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports["default"] = void 0;
 var _react = require("react");
-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); }
-function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
-function _iterableToArrayLimit(arr, i) { var _i = null == arr ? null : "undefined" != typeof Symbol && arr[Symbol.iterator] || arr["@@iterator"]; if (null != _i) { var _s, _e, _x, _r, _arr = [], _n = !0, _d = !1; try { if (_x = (_i = _i.call(arr)).next, 0 === i) { if (Object(_i) !== _i) return; _n = !1; } else for (; !(_n = (_s = _x.call(_i)).done) && (_arr.push(_s.value), _arr.length !== i); _n = !0) { ; } } catch (err) { _d = !0, _e = err; } finally { try { if (!_n && null != _i["return"] && (_r = _i["return"](), Object(_r) !== _r)) return; } finally { if (_d) throw _e; } } return _arr; } }
-function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
-/**
 * @type {Provider<T>}
 * @template {State} T
 */
 var getCurrKeys = function getCurrKeys(selectorMap) {
   var currKeys = Object.values(selectorMap);
   return currKeys.length ? Array.from(new Set(currKeys)) : [];
 };
-/**
 * @type {Provider<T>}
 * @template {State} T
 */
 var useRenderKeyProvider = function useRenderKeyProvider(selectorMap) {
-  var _useState = (0, _react.useState)(function () {
-      return getCurrKeys(selectorMap);
-    }),
-    _useState2 = _slicedToArray(_useState, 2),
-    renderKeys = _useState2[0],
-    setRenderKeys = _useState2[1];
+  var renderKeys = (0, _react.useRef)([]);
   var currKeys = getCurrKeys(selectorMap);
-  (renderKeys.length !== currKeys.length || renderKeys.some(function (k, i) {
+  if (renderKeys.current.length !== currKeys.length || renderKeys.current.some(function (k, i) {
     return k !== currKeys[i];
-  })) && setRenderKeys(currKeys);
-  return renderKeys;
+  })) {
+    renderKeys.current = currKeys;
+  }
+  return renderKeys.current;
 };
 var _default = useRenderKeyProvider;
-/**
 * @callback Provider
 * @param {{[selectorKey: string]: string|keyof T}} selectorMap Key:value pairs where `key` => arbitrary key given to Store.data property holding the state slices and `value` => property paths to state slices used by this component. May use `{..., state: '@@STATE'}` to indicate a desire to obtain the entire state object and assign to a `state` property of Store.data. A change in any of the referenced properties results in this component render. When using `['@@STATE']`, any change in the state object results in this component render.
 * @returns {[string|keyof T]} Property paths
 * @template {State} T
 */
 exports["default"] = _default;

package/dist/main/hooks/use-state-manager/index.d.ts

@@ -1 +1 @@
-export default useStateManager;
 * @param {T} initStateValue
 * @template {State} T
 */
    select: (clientId: string, ...propertyPaths?: string[]) => {
        [propertyPaths: string]: Readonly<any>;
    };
    state: T;
    stateWatch: Listener<T>;
    unlink: (clientId: string) => void;
+export default useStateManager;
    select: (clientId: string, ...propertyPaths?: string[]) => {
        [propertyPaths: string]: Readonly<any>;
    };
    state: T;
    stateWatch: Listener<T>;
    unlink: (clientId: string) => void;

package/dist/main/hooks/use-state-manager/index.js

@@ -13,25 +13,19 @@ function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o =
 function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
 function _iterableToArrayLimit(arr, i) { var _i = null == arr ? null : "undefined" != typeof Symbol && arr[Symbol.iterator] || arr["@@iterator"]; if (null != _i) { var _s, _e, _x, _r, _arr = [], _n = !0, _d = !1; try { if (_x = (_i = _i.call(arr)).next, 0 === i) { if (Object(_i) !== _i) return; _n = !1; } else for (; !(_n = (_s = _x.call(_i)).done) && (_arr.push(_s.value), _arr.length !== i); _n = !0) { ; } } catch (err) { _d = !0, _e = err; } finally { try { if (!_n && null != _i["return"] && (_r = _i["return"](), Object(_r) !== _r)) return; } finally { if (_d) throw _e; } } return _arr; } }
 function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
-/**
 * @param {T} initStateValue
 * @template {State} T
 */
 var useStateManager = function useStateManager(initStateValue) {
-  /** @type {[T, Function]} */
   var _useState = (0, _react.useState)(function () {
       return (0, _lodash["default"])(initStateValue);
     }),
     _useState2 = _slicedToArray(_useState, 1),
     state = _useState2[0];
-  /** @type {[AccessorCache<T>, Function]} */
   var _useState3 = (0, _react.useState)(function () {
       return new _accessorCache["default"](state);
     }),
     _useState4 = _slicedToArray(_useState3, 1),
     cache = _useState4[0];
-  /** @type {StoreInternal<T>["getState"]} */
   var select = (0, _react.useCallback)(cache.get.bind(cache), []);
-  /** @type {Listener<T>} */
   var stateWatch = (0, _react.useCallback)(cache.watchSource.bind(cache), []);
-  /** @type {StoreInternal<T>["unlinkCache"]} */
   var unlink = (0, _react.useCallback)(function (clientId) {
     return cache.unlinkClient(clientId);
   }, []);

package/dist/main/hooks/use-store/index.d.ts

@@ -1 +1 @@
-export namespace deps {
    export { _setState as setState };
    export { v4 as uuid };
 * @param {Prehooks<T>} prehooks
 * @param {T} value
 * @param {IStorage<T>} [storage] Closed to modification post-initialization
 * @template {State} T
 */
    getState: (clientId: string, ...propertyPaths?: string[]) => {
        [propertyPaths: string]: Readonly<any>;
    };
    resetState: VoidFunction;
    setState: (changes: import("../../../types").PartialState<T>) => void;
    subscribe: (listener: import("../../../types").Listener<T>) => VoidFunction;
    unlinkCache: (clientId: string) => void;
+export namespace deps {
    export { _setState as setState };
    export { v4 as uuid };
    getState: (clientId: string, ...propertyPaths?: string[]) => {
        [propertyPaths: string]: Readonly<any>;
    };
    resetState: (propertyPaths?: string[]) => void;
    setState: (changes: import("../../../types").PartialState<T>) => void;
    subscribe: (listener: import("../../../types").Listener<T>) => VoidFunction;
    unlinkCache: (clientId: string) => void;

package/dist/main/hooks/use-store/index.js

@@ -6,6 +6,8 @@ exports.deps = exports["default"] = void 0;
 var _react = require("react");
 var _lodash = _interopRequireDefault(require("lodash.clonedeep"));
 var _uuid = require("uuid");
+var _constants = require("../../../constants");
+var _utils = require("../../../utils");
 var _storage2 = _interopRequireDefault(require("../../../model/storage"));
 var _usePrehooksRef = _interopRequireDefault(require("../use-prehooks-ref"));
 var _useStateManager2 = _interopRequireDefault(require("../use-state-manager"));
@@ -22,24 +24,20 @@ var deps = {
   uuid: _uuid.v4
 };
 exports.deps = deps;
-/**
 * @param {Prehooks<T>} prehooks
 * @param {T} value
 * @param {IStorage<T>} [storage] Closed to modification post-initialization
 * @template {State} T
 */
 var useStore = function useStore(prehooks, value, storage) {
   var mounted = (0, _react.useRef)(false);
   var prehooksRef = (0, _usePrehooksRef["default"])(prehooks);
-  /** @type {MutableRefObject<string>} */
   var storageKey = (0, _react.useRef)();
   var _useStateManager = (0, _useStateManager2["default"])(value),
     select = _useStateManager.select,
     state = _useStateManager.state,
     stateWatch = _useStateManager.stateWatch,
     unlink = _useStateManager.unlink;
-  /** @type {[Set<Listener<T>>, Function]} */
   var _useState = (0, _react.useState)(function () {
       return new Set();
     }),
     _useState2 = _slicedToArray(_useState, 1),
     listeners = _useState2[0];
-  /** @type {[IStorage<T>, Function]} */
   var _useState3 = (0, _react.useState)(function () {
       var isKeyRequired = true;
       var _storage = storage;
@@ -52,26 +50,24 @@ var useStore = function useStore(prehooks, value, storage) {
     }),
     _useState4 = _slicedToArray(_useState3, 1),
     _storage = _useState4[0];
-  /** @type {Listener<T>} */
   var onChange = function onChange(changes) {
     return listeners.forEach(function (listener) {
       return listener(changes);
     });
   };
-  /** @type {StoreInternal<T>["resetState"]} */
   var resetState = (0, _react.useCallback)(function () {
-    var original = _storage.getItem(storageKey.current);
-    (!('resetState' in prehooksRef.current) || prehooksRef.current.resetState({
+    var propertyPaths = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [];
+    var original = _storage.clone(_storage.getItem(storageKey.current));
+    var resetData = !propertyPaths.length ? {} : propertyPaths.includes(_constants.FULL_STATE_SELECTOR) ? original : (0, _utils.mapPathsToObject)(original, propertyPaths);
+    (!('resetState' in prehooksRef.current) || prehooksRef.current.resetState(resetData, {
       current: (0, _lodash["default"])(state),
       original: original
-    })) && deps.setState(state, original, onChange);
+    })) && deps.setState(state, resetData, onChange);
   }, []);
-  /** @type {StoreInternal<T>["setState"]} */
   var setState = (0, _react.useCallback)(function (changes) {
     changes = (0, _lodash["default"])(changes);
     (!('setState' in prehooksRef.current) || prehooksRef.current.setState(changes)) && deps.setState(state, changes, onChange);
   }, []);
-  /** @type {StoreInternal<T>["subscribe"]} */
   var subscribe = (0, _react.useCallback)(function (listener) {
     listeners.add(listener);
     return function () {
@@ -80,7 +76,7 @@ var useStore = function useStore(prehooks, value, storage) {
   }, []);
   (0, _react.useEffect)(function () {
     var sKey = storageKey.current;
-    _storage.setItem(sKey, value);
+    _storage.setItem(sKey, _storage.clone(value));
     return function () {
       return _storage.removeItem(sKey);
     };

package/dist/main/index.d.ts

@@ -1 +1,41 @@
-export class UsageError extends Error {
    [selectorKey: string]: string | keyof T_1;
    Provider: ObservableProvider<S>;
    children?: ReactNode;
    prehooks?: Prehooks<T>;
    storage?: IStorage<T>;
    value: PartialState<T>;
+export class UsageError extends Error {
+/**
+ * @param {ObservableContext<T>} context Refers to the PublicObservableContext<T> type of the ObservableContext<T>
+ * @param {{[selectorKey: string]: string|keyof T}} [selectorMap] Key:value pairs where `key` => arbitrary key given to Store.data property holding the state slices and `value` => property paths to state slices used by this component: see examples below. May use `{..., state: '@@STATE'}` to indicate a desire to obtain the entire state object and assign to a `state` property of Store.data. A change in any of the referenced properties results in this component render. When using `['@@STATE']`, any change in the state object results in this component render.
+ * @returns {(WrappedComponent: C) => MemoExoticComponent<P>}
+ * @template {State} T
+ * @template {PartialStore<T> & {[x:string]:*}} [P=PartialStore<T>]
+ * @template {ComponentType<P>|ExoticComponent<P>} C
+ * @see {ObservableContext<T>}
+ * @see {useContext} for selectorMap sample
+ */
+export function connect<T extends import("../types").State, P extends PartialStore<T> & {
    [x: string]: any;
    [selectorKey: string]: string | keyof T;
+/**
+ * @returns {ObservableContext<T>} Refers to the IObservableContext<T> type of the ObservableContext<T>
+ * @template {State} T
+ * @see {ObservableContext<T>}
+ */
+export function createContext<T extends import("../types").State>(): ObservableContext<T>;
+/**
+ * Actively monitors the store and triggers component re-render if any of the watched keys in the state objects changes
+ *
+ * @param {ObservableContext<T>} context Refers to the PublicObservableContext<T> type of the ObservableContext<T>
+ * @param {{[selectorKey: string]: string|keyof T}} [selectorMap = {}] Key:value pairs where `key` => arbitrary key given to Store.data property holding the state slices and `value` => property paths to state slices used by this component: see examples below. May use `{..., state: '@@STATE'}` to indicate a desire to obtain the entire state object and assign to a `state` property of Store.data. A change in any of the referenced properties results in this component render. When using `['@@STATE']`, any change in the state object results in this component render.
+ * @returns {Store<T>}
+ * @template {State} T
+ * @see {ObservableContext<T>}
+ * @example
+ * a valid propertyPath follows the `lodash` object property path convention.
+ * for a state = { a: 1, b: 2, c: 3, d: { e: 5, f: [6, { x: 7, y: 8, z: 9 } ] } }
+ * Any of the following is an applicable selector map.
+ * {count: 'a', myData: 'd'} => {count: 1, myData: { e: 5, f: [6, { x: 7, y: 8, z: 9 } ] }}
+ * {count: 'a'} => {count: 1} // same applies to {count: 'b'} = {count: 2}; {count: 'c'} = {count: 3}
+ * {myData: 'd'} => {mydata: { e: 5, f: [6, { x: 7, y: 8, z: 9 } ] }}
+ * {xyz: 'd.e'} => {xyz: 5}
+ * {def: 'd.e.f'} => {def: [6, { x: 7, y: 8, z: 9 } ]}
+ * {f1: 'd.e.f[0]'} or {f1: 'd.e.f.0'} => {f1: 6}
+ * {secondFElement: 'd.e.f[1]'} or {secondFElement: 'd.e.f.1'} => {secondFElement: { x: 7, y: 8, z: 9 }}
+ * {myX: 'd.e.f[1].x'} or {myX: 'd.e.f.1.x'} => {myX: 7} // same applies to {myY: 'd.e.f[1].y'} = {myY: 8}; {myZ: 'd.e.f[1].z'} = {myZ: 9}
+ * {myData: '@@STATE'} => {myData: state}
+ */
+export function useContext<T extends Stat>(context: ObservableContext<T>, selectorMap?: {
    [selectorKey: string]: string | keyof T;
    Provider: ObservableProvider<S>;
    children?: ReactNode;
    prehooks?: Prehooks<T>;
    storage?: IStorage<T>;
    value: PartialState<T>;
    data?: import("../types").Data;
    resetState?: (propertyPaths?: string[]) => void;
    setState?: (changes: import("../types").PartialState<T>) => void;
    [x: string]: any;
    [x: string]: any;

package/dist/main/index.js

@@ -2,15 +2,16 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.useContext = exports.createContext = exports.UsageError = void 0;
+exports.useContext = exports.createContext = exports.connect = exports.UsageError = void 0;
 var _react = _interopRequireWildcard(require("react"));
 var _lodash = _interopRequireDefault(require("lodash.isempty"));
 var _lodash2 = _interopRequireDefault(require("lodash.isequal"));
-var _lodash3 = _interopRequireDefault(require("lodash.omit"));
+var _lodash3 = _interopRequireDefault(require("lodash.isplainobject"));
+var _lodash4 = _interopRequireDefault(require("lodash.omit"));
 var _uuid = require("uuid");
 var _useRenderKeyProvider = _interopRequireDefault(require("./hooks/use-render-key-provider"));
 var _useStore = _interopRequireDefault(require("./hooks/use-store"));
-var _excluded = ["getState", "subscribe", "unlinkCache"];
+var _excluded = ["getState", "resetState", "subscribe", "unlinkCache"];
 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; }
@@ -30,6 +31,7 @@ function _iterableToArrayLimit(arr, i) { var _i = null == arr ? null : "undefine
 function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
 function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
 function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 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 _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, _toPropertyKey(descriptor.key), descriptor); } }
 function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); Object.defineProperty(Constructor, "prototype", { writable: false }); return Constructor; }
@@ -56,17 +58,14 @@ var UsageError = function (_Error) {
   return _createClass(UsageError);
 }( _wrapNativeSuper(Error));
 exports.UsageError = UsageError;
-/**
 * @readonly
 * @type {Prehooks<T>}
 * @template {State} T
 */
 var defaultPrehooks = Object.freeze({});
-/** @type {NonReactUsageReport} */
 var reportNonReactUsage = function reportNonReactUsage() {
   throw new UsageError('Detected usage outside of this context\'s Provider component tree. Please apply the exported Provider component');
 };
-/** @type {FC<{child: ReactNode}>} */
 var ChildMemo = function () {
   var useNodeMemo = function useNodeMemo(node) {
     var nodeRef = (0, _react.useRef)(node);
-    if (!(0, _lodash2["default"])((0, _lodash3["default"])(nodeRef.current, '_owner'), (0, _lodash3["default"])(node, '_owner'))) {
+    if (!(0, _lodash2["default"])((0, _lodash4["default"])(nodeRef.current, '_owner'), (0, _lodash4["default"])(node, '_owner'))) {
       nodeRef.current = node;
     }
     return nodeRef.current;
@@ -85,7 +84,6 @@ var ChildMemo = function () {
   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;
@@ -93,16 +91,14 @@ var memoizeImmediateChildTree = function memoizeImmediateChildTree(children) {
       return child;
     }
     if ((_child$props = child.props) !== null && _child$props !== void 0 && _child$props.children) {
-      child = (0, _react.cloneElement)(child, (0, _lodash3["default"])(child.props, 'children'), memoizeImmediateChildTree(child.props.children));
+      child = (0, _react.cloneElement)(child, (0, _lodash4["default"])(child.props, 'children'), memoizeImmediateChildTree(child.props.children));
     }
     return _react["default"].createElement(ChildMemo, {
       child: child
     });
   });
 };
-/** @param {Provider<IStore>} Provider */
 var makeObservable = function makeObservable(Provider) {
-  /**
   * @type {ObservableProvider<T>}
   * @template {State} T
   */
   var Observable = function Observable(_ref3) {
     var _ref3$children = _ref3.children,
       children = _ref3$children === void 0 ? null : _ref3$children,
@@ -118,7 +114,20 @@ var makeObservable = function makeObservable(Provider) {
   Observable.displayName = 'ObservableContext.Provider';
   return Observable;
 };
-/**
 * @returns {ObservableContext<T>} Refers to the IObservableContext<T> type of the ObservableContext<T>
 * @template {State} T
 * @see {ObservableContext<T>}
 */
+var connect = function connect(context, selectorMap) {
+  return function (WrappedComponent) {
+    if (!(0, _lodash3["default"])(WrappedComponent) || !('compare' in WrappedComponent)) {
+      WrappedComponent = (0, _react.memo)(WrappedComponent);
+    }
+    var ConnectedComponent = (0, _react.memo)(function (ownProps) {
+      var store = useContext(context, selectorMap);
+      return _react["default"].createElement(WrappedComponent, _extends({}, store, ownProps));
+    });
+    ConnectedComponent.displayName = 'ObservableContext.Connected';
+    return ConnectedComponent;
+  };
+};
+exports.connect = connect;
 var createContext = function createContext() {
   var Context = (0, _react.createContext)({
     getState: reportNonReactUsage,
@@ -131,20 +140,18 @@ var createContext = function createContext() {
   return Context;
 };
 exports.createContext = 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 Refers to the PublicObservableContext<T> type of the ObservableContext<T>
 * @param {{[selectorKey: string]: string|keyof T}} [selectorMap = {}] Key:value pairs where `key` => arbitrary key given to Store.data property holding the state slices and `value` => property paths to state slices used by this component: see examples below. May use `{..., state: '@@STATE'}` to indicate a desire to obtain the entire state object and assign to a `state` property of Store.data. A change in any of the referenced properties results in this component render. When using `['@@STATE']`, any change in the state object results in this component render.
 * @returns {Store<T>}
 * @template {State} T
 * @see {ObservableContext<T>}
 * @example
 * a valid propertyPath follows the `lodash` object property path convention.
 * for a state = { a: 1, b: 2, c: 3, d: { e: 5, f: [6, { x: 7, y: 8, z: 9 } ] } }
 * Any of the following is an applicable selector map.
 * {count: 'a', myData: 'd'} => {count: 1, myData: { e: 5, f: [6, { x: 7, y: 8, z: 9 } ] }}
 * {count: 'a'} => {count: 1}
 * {myData: 'd'} => {mydata: { e: 5, f: [6, { x: 7, y: 8, z: 9 } ] }}
 * {xyz: 'd.e'} => {xyz: 5}
 * {def: 'd.e.f'} => {def: [6, { x: 7, y: 8, z: 9 } ]}
 * {f1: 'd.e.f[0]'} or {f1: 'd.e.f.0'} => {f1: 6}
 * {secondFElement: 'd.e.f[1]'} or {secondFElement: 'd.e.f.1'} => {secondFElement: { x: 7, y: 8, z: 9 }}
 * {myX: 'd.e.f[1].x'} or {myX: 'd.e.f.1.x'} => {myX: 7}
 * {myData: '@@STATE'} => {myData: state}
 */
 var useContext = function useContext(context) {
   var selectorMap = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
-  /** @type {StoreInternal<T>} */
-  var _useContext2 = (0, _react.useContext)(context),
-    _getState = _useContext2.getState,
-    subscribe = _useContext2.subscribe,
-    unlinkCache = _useContext2.unlinkCache,
-    store = _objectWithoutProperties(_useContext2, _excluded);
-  var _useState = (0, _react.useState)(_uuid.v4),
-    _useState2 = _slicedToArray(_useState, 1),
-    clientId = _useState2[0];
+  var _React$useContext = _react["default"].useContext(context),
+    _getState = _React$useContext.getState,
+    _resetState = _React$useContext.resetState,
+    subscribe = _React$useContext.subscribe,
+    unlinkCache = _React$useContext.unlinkCache,
+    store = _objectWithoutProperties(_React$useContext, _excluded);
+  var _React$useState = _react["default"].useState(_uuid.v4),
+    _React$useState2 = _slicedToArray(_React$useState, 1),
+    clientId = _React$useState2[0];
   var _renderKeys = (0, _useRenderKeyProvider["default"])(selectorMap);
-  /** @type {{[propertyPath: string]: string}} Reversed selectorMap i.e. {selectorKey: propertyPath} => {propertyPath: selectorKey} */
   var path2SelectorMap = (0, _react.useMemo)(function () {
     var map = {};
     if ((0, _lodash["default"])(_renderKeys)) {
@@ -156,8 +163,7 @@ var useContext = function useContext(context) {
     }
     return map;
   }, [_renderKeys]);
-  /** @type {[Data, Function]} */
-  var _useState3 = (0, _react.useState)(function () {
+  var _React$useState3 = _react["default"].useState(function () {
       var data = {};
       if ((0, _lodash["default"])(_renderKeys)) {
         return data;
@@ -177,9 +183,9 @@ var useContext = function useContext(context) {
       }
       return data;
     }),
-    _useState4 = _slicedToArray(_useState3, 2),
-    data = _useState4[0],
-    setData = _useState4[1];
+    _React$useState4 = _slicedToArray(_React$useState3, 2),
+    data = _React$useState4[0],
+    setData = _React$useState4[1];
   var updateData = function updateData() {
     var hasChanges = false;
     var state = _getState.apply(void 0, [clientId].concat(_toConsumableArray(_renderKeys)));
@@ -200,7 +206,11 @@ var useContext = function useContext(context) {
     }
     hasChanges && setData(_objectSpread({}, data));
   };
-  (0, _react.useEffect)(function () {
+  var resetState = (0, _react.useCallback)(function () {
+    var propertyPath = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : _renderKeys;
+    return _resetState(propertyPath);
+  }, [_renderKeys]);
+  _react["default"].useEffect(function () {
     if ((0, _lodash["default"])(_renderKeys)) {
       !(0, _lodash2["default"])({}, data) && setData({});
       return;
@@ -219,7 +229,8 @@ var useContext = function useContext(context) {
   }, [_renderKeys]);
   return (0, _react.useMemo)(function () {
     return _objectSpread({
-      data: data
+      data: data,
+      resetState: resetState
     }, store);
   }, [data]);
 };

package/dist/main/set-state/index.d.ts

@@ -1 +1 @@
-export default setState;
    [rootKey: number]: {
        [x: string]: any;
    };
    [x: string]: any;
    [rootKey: string]: {
        [x: string]: any;
    };
    [rootKey: symbol]: {
        [x: string]: any;
    };
    [rootKey: number]: T;
    [rootKey: string]: T;
    [rootKey: symbol]: T;
    hasChanges: boolean;
 * @param {T} state
 * @param {PartialState<T>} newState
 * @param {Listener<T>} [onStateChange]
 * @template {State} T
 */
+export default setState;
    [rootKey: number]: {
        [x: string]: any;
    };
    [x: string]: any;
    [rootKey: string]: {
        [x: string]: any;
    };
    [rootKey: symbol]: {
        [x: string]: any;
    };
    [rootKey: number]: T;
    [rootKey: string]: T;
    [rootKey: symbol]: T;
    hasChanges: boolean;

package/dist/main/set-state/index.js

@@ -14,14 +14,12 @@ function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o =
 function _iterableToArray(iter) { if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter); }
 function _arrayWithoutHoles(arr) { if (Array.isArray(arr)) return _arrayLikeToArray(arr); }
 function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
-/** @param {{[x:string]: any}} obj */
 var isIndexBasedObj = function isIndexBasedObj(obj) {
   return Object.keys(obj).every(function (k) {
     var i = +k;
     return Number.isInteger(i) && i > -1;
   });
 };
-/**
 * Mutates its arguments
 *
 * @param {HasArrayRoot<K>|HasObjectRoot<K>} state
 * @param {HasArrayRoot<K>|HasObjectRoot<K>} newState
 * @param {K} stateKey
 * @param {Stats} stats
 * @template {KeyTypes} K
 */
 function setAtomic(state, newState, stateKey, stats) {
   if ((0, _lodash2["default"])(state[stateKey], newState[stateKey])) {
     return;
@@ -43,7 +41,6 @@ function setAtomic(state, newState, stateKey, stats) {
   state[stateKey] = isArrayNewState || isPlainObjectNewState ? (0, _lodash["default"])(newState[stateKey]) : newState[stateKey];
 }
 ;
-/**
 * Mutates its arguments
 *
 * @param {HasArrayRoot<K>} state
 * @param {HasArrayRoot<K>} newState
 * @param {K} rootKey
 * @param {Stats} stats
 * @template {KeyTypes} K
 */
 function setArray(state, newState, rootKey, stats) {
   var nsLength = newState[rootKey].length;
   if (state[rootKey].length !== nsLength) {
@@ -55,7 +52,6 @@ function setArray(state, newState, rootKey, stats) {
   }
 }
 ;
-/**
 * Mutates its arguments
 *
 * @param {HasArrayRoot<K>} state
 * @param {HasObjectRoot<K>} newState
 * @param {K} rootKey
 * @param {Stats} stats
 * @template {KeyTypes} K
 */
 function setArrayIndex(state, newState, rootKey, stats) {
   var incomingIndexes = Object.keys(newState[rootKey]).map(function (i) {
     return +i;
@@ -79,19 +75,16 @@ function setArrayIndex(state, newState, rootKey, stats) {
   }
 }
 ;
-/**
 * Mutates its arguments
 *
 * @param {HasObjectRoot<K>} state
 * @param {HasObjectRoot<K>} newState
 * @param {K} rootKey
 * @param {Stats} stats
 * @template {KeyTypes} K
 */
 function setPlainObject(state, newState, rootKey, stats) {
   set(state[rootKey], newState[rootKey], stats);
 }
 ;
-/**
 * Mutates its arguments
 *
 * @param {HasObjectRoot} state
 * @param {HasObjectRoot} newState
 * @param {Stats} stats
 */
 function set(state, newState, stats) {
   for (var k in newState) {
     setAtomic(state, newState, k, stats);
   }
 }
 ;
-/**
 * @param {T} state
 * @param {PartialState<T>} newState
 * @param {Listener<T>} [onStateChange]
 * @template {State} T
 */
 function setState(state, newState, onStateChange) {
   var stats = {
     hasChanges: false