@webkrafters/react-observable-context 5.0.0-rc.4 → 5.0.0-rc.7

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

@@ -1,4 +1,4 @@
-import type { IStorage, PartialState, Prehooks, State, StoreInternal } from '../../..';
+import type { IStorage, StoreInternal, PartialState, Prehooks, State } from '../../..';
 export declare const deps: {
     createStorageKey: () => string;
 };

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

@@ -1,16 +1,16 @@
 "use strict";
 
 function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
-function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
-function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 function _createForOfIteratorHelper(r, e) { var t = "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (!t) { if (Array.isArray(r) || (t = _unsupportedIterableToArray(r)) || e && r && "number" == typeof r.length) { t && (r = t); var _n = 0, F = function F() {}; return { s: F, n: function n() { return _n >= r.length ? { done: !0 } : { done: !1, value: r[_n++] }; }, e: function e(r) { throw r; }, f: F }; } throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); } var o, a = !0, u = !1; return { s: function s() { t = t.call(r); }, n: function n() { var r = t.next(); return a = r.done, r; }, e: function e(r) { u = !0, o = r; }, f: function f() { try { a || null == t["return"] || t["return"](); } finally { if (u) throw o; } } }; }
-function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
-function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : i + ""; }
-function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
 function _slicedToArray(r, e) { return _arrayWithHoles(r) || _iterableToArrayLimit(r, e) || _unsupportedIterableToArray(r, e) || _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 _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t["return"] && (u = t["return"](), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
 function _arrayWithHoles(r) { if (Array.isArray(r)) return r; }
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : i + ""; }
+function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
 function _toConsumableArray(r) { return _arrayWithoutHoles(r) || _iterableToArray(r) || _unsupportedIterableToArray(r) || _nonIterableSpread(); }
 function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
 function _unsupportedIterableToArray(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray(r, a); var t = {}.toString.call(r).slice(8, -1); return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0; } }
@@ -53,14 +53,32 @@ function runPrehook(prehooks, name, args) {
   }
   return res;
 }
+var consumer = {};
+function transformPayload(payload) {
+  if ((0, lodash_isempty_1["default"])(payload) || !(constants_1.FULL_STATE_SELECTOR in payload)) {
+    return payload;
+  }
+  payload = _objectSpread(_objectSpread({}, payload), {}, _defineProperty({}, constants_1.GLOBAL_SELECTOR, payload[constants_1.FULL_STATE_SELECTOR]));
+  delete payload[constants_1.FULL_STATE_SELECTOR];
+  return payload;
+}
 /** @param storage - is Closed to modification post-initialization */
 var useStore = function useStore(prehooks, value, storage) {
+  var connKey = (0, react_1.useRef)();
   var mounted = (0, react_1.useRef)(false);
   var prehooksRef = (0, use_prehooks_ref_1["default"])(prehooks);
   var storageKey = (0, react_1.useRef)();
   var _ref = (0, react_1.useState)(function () {
-      var cache = new auto_immutable_1["default"](value);
-      return [cache, cache.connect()];
+      if (connKey.current === undefined) {
+        var _cache = new auto_immutable_1["default"](value);
+        var self = _cache.connect();
+        connKey.current = self.instanceId;
+        consumer[connKey.current] = {
+          cache: _cache,
+          self: self
+        };
+      }
+      return [consumer[connKey.current].cache, consumer[connKey.current].self];
     }),
     _ref2 = _slicedToArray(_ref, 1),
     _ref2$ = _slicedToArray(_ref2[0], 2),
@@ -153,14 +171,6 @@ var useStore = function useStore(prehooks, value, storage) {
       original: original
     }]) && connection.set(resetData, onChange);
   }, []);
-  function transformPayload(payload) {
-    if ((0, lodash_isempty_1["default"])(payload) || !(constants_1.FULL_STATE_SELECTOR in payload)) {
-      return payload;
-    }
-    payload = _objectSpread(_objectSpread({}, payload), {}, _defineProperty({}, constants_1.GLOBAL_SELECTOR, payload[constants_1.FULL_STATE_SELECTOR]));
-    delete payload[constants_1.FULL_STATE_SELECTOR];
-    return payload;
-  }
   var setState = (0, react_1.useCallback)(function (connection, changes) {
     if (!runPrehook(prehooksRef.current, 'setState', [changes])) {
       return;
@@ -184,7 +194,12 @@ var useStore = function useStore(prehooks, value, storage) {
     var sKey = storageKey.current;
     _storage.setItem(sKey, _storage.clone(value));
     return function () {
-      return _storage.removeItem(sKey);
+      _storage.removeItem(sKey);
+      ownConnection.disconnect();
+      delete consumer[connKey.current];
+      connKey.current = undefined;
+      cache.close();
+      listeners.clear();
     };
   }, []);
   (0, react_1.useEffect)(function () {
@@ -194,13 +209,6 @@ var useStore = function useStore(prehooks, value, storage) {
     }
     setState(ownConnection, value);
   }, [value]);
-  (0, react_1.useEffect)(function () {
-    return function () {
-      ownConnection.disconnect();
-      cache.close();
-      listeners.clear();
-    };
-  }, []);
   return (0, react_1.useState)(function () {
     return {
       cache: cache,

package/dist/main/index.js

@@ -78,7 +78,6 @@ var lodash_omit_1 = __importDefault(require("lodash.omit"));
 var constants = __importStar(require("../constants"));
 var use_render_key_provider_1 = __importDefault(require("./hooks/use-render-key-provider"));
 var use_store_1 = __importDefault(require("./hooks/use-store"));
-var auto_immutable_1 = __importDefault(require("@webkrafters/auto-immutable"));
 var reportNonReactUsage = function reportNonReactUsage() {
   throw new UsageError('Detected usage outside of this context\'s Provider component tree. Please apply the exported Provider component');
 };
@@ -95,6 +94,19 @@ function createContext() {
 }
 exports.createContext = createContext;
 ;
+var connRegister = {};
+function getConnectionFrom(connKey, cache) {
+  if (connKey.current === undefined) {
+    try {
+      var connection = cache.connect();
+      connKey.current = connection.instanceId;
+      connRegister[connKey.current] = connection;
+    } catch (e) {
+      reportNonReactUsage();
+    }
+  }
+  return connRegister[connKey.current];
+}
 /**
  * Actively monitors the store and triggers component re-render if any of the watched keys in the state objects changes
  *
@@ -129,34 +141,41 @@ function useContext(context, selectorMap) {
     _resetState = _react_1$default$useC.resetState,
     _setState = _react_1$default$useC.setState,
     subscribe = _react_1$default$useC.subscribe;
+  var connKey = (0, react_1.useRef)();
   var _react_1$default$useS = react_1["default"].useState(function () {
-      if (cache instanceof auto_immutable_1["default"]) {
-        return cache.connect();
-      }
-      reportNonReactUsage();
+      return getConnectionFrom(connKey, cache);
     }),
-    _react_1$default$useS2 = _slicedToArray(_react_1$default$useS, 2),
-    connection = _react_1$default$useS2[0],
-    refreshConnection = _react_1$default$useS2[1];
+    _react_1$default$useS2 = _slicedToArray(_react_1$default$useS, 1),
+    connection = _react_1$default$useS2[0];
   var _renderKeys = (0, use_render_key_provider_1["default"])(selectorMap);
-  /* Reverses selectorMap i.e. {selectorKey: propertyPath} => {propertyPath: selectorKey} */
-  var selectorMapInverse = (0, react_1.useMemo)(function () {
-    var map = {};
-    if ((0, lodash_isempty_1["default"])(_renderKeys)) {
-      return map;
+  var refineKeys = function refineKeys() {
+    var rKeys = _renderKeys.slice();
+    if (fullStateSelectorIndex !== -1) {
+      rKeys[fullStateSelectorIndex] = constants.GLOBAL_SELECTOR;
     }
-    ;
-    for (var selectorKey in selectorMap) {
-      map[selectorMap[selectorKey]] = selectorKey;
-    }
-    return map;
-  }, [_renderKeys]);
+    return rKeys;
+  };
+  /* Reverses selectorMap i.e. {selectorKey: propertyPath} => {propertyPath: selectorKey} */
+  var _ref = (0, react_1.useMemo)(function () {
+      var map = {};
+      if ((0, lodash_isempty_1["default"])(_renderKeys)) {
+        return [map, _renderKeys.indexOf(constants.FULL_STATE_SELECTOR)];
+      }
+      for (var selectorKey in selectorMap) {
+        map[selectorMap[selectorKey]] = selectorKey;
+      }
+      return [map, _renderKeys.indexOf(constants.FULL_STATE_SELECTOR)];
+    }, [_renderKeys]),
+    _ref2 = _slicedToArray(_ref, 2),
+    selectorMapInverse = _ref2[0],
+    fullStateSelectorIndex = _ref2[1];
   var _react_1$default$useS3 = react_1["default"].useState(function () {
+      var _connection;
       var data = {};
       if ((0, lodash_isempty_1["default"])(_renderKeys)) {
         return data;
       }
-      var state = connection.get.apply(connection, _toConsumableArray(_renderKeys));
+      var state = (_connection = connection).get.apply(_connection, _toConsumableArray(refineKeys()));
       var _iterator = _createForOfIteratorHelper(_renderKeys),
         _step;
       try {
@@ -175,8 +194,9 @@ function useContext(context, selectorMap) {
     data = _react_1$default$useS4[0],
     setData = _react_1$default$useS4[1];
   var updateData = function updateData() {
+    var _connection2;
     var hasChanges = false;
-    var state = connection.get.apply(connection, _toConsumableArray(_renderKeys));
+    var state = (_connection2 = connection).get.apply(_connection2, _toConsumableArray(refineKeys()));
     var d = data;
     var _iterator2 = _createForOfIteratorHelper(_renderKeys),
       _step2;
@@ -216,7 +236,7 @@ function useContext(context, selectorMap) {
     if (cache.closed) {
       return;
     }
-    refreshConnection(cache.connect());
+    connection = getConnectionFrom(connKey, cache);
     if ((0, lodash_isempty_1["default"])(_renderKeys)) {
       var _default = {};
       !(0, lodash_isequal_1["default"])(_default, data) && setData(_default);
@@ -235,6 +255,8 @@ function useContext(context, selectorMap) {
       }
       unsubscribe();
       connection.disconnect();
+      delete connRegister[connKey.current];
+      connKey.current = undefined;
     };
   }, [_renderKeys, cache]);
   return (0, react_1.useMemo)(function () {
@@ -271,65 +293,6 @@ function connect(context, selectorMap) {
   return connector;
 }
 exports.connect = connect;
-var Ctx = createContext();
-var CCC = function CCC() {
-  return react_1["default"].createElement(Ctx.Provider, {
-    value: {
-      test: 234
-    }
-  });
-};
-var getConnected = connect(Ctx, {
-  val: 'test'
-});
-// @debug
-// const T : ForwardRefExoticComponent<PP & {
-// 	data: Data<SMap>;
-//     resetState: (propertyPaths?: string[]) => void;
-//     setState: (changes: import("../").Changes<MyState>) => void;
-// }> = forwardRef(
-var T = (0, react_1.forwardRef)(function (_ref, ref) {
-  var val = _ref.data.val;
-  return react_1["default"].createElement("div", {
-    ref: ref
-  }, val);
-});
-var Connected = getConnected(T);
-var Connected2 = getConnected(function () {
-  return react_1["default"].createElement("div", null);
-});
-;
-var T2 = function T2(_ref2) {
-  var b0 = _ref2.b0,
-    data = _ref2.data,
-    n0 = _ref2.n0,
-    s0 = _ref2.s0;
-  return react_1["default"].createElement("div", null, JSON.stringify({
-    b0: b0,
-    data: data,
-    n0: n0,
-    s0: s0
-  }, null, 2));
-};
-var Connected3 = getConnected(T2);
-var V = function V() {
-  var c = react_1["default"].createElement(Connected, {
-    n: 33,
-    ref: (0, react_1.useRef)()
-  });
-  var c2 = react_1["default"].createElement(Connected2, null);
-  var c3 = react_1["default"].createElement(Connected3, {
-    n0: 33
-  });
-  return react_1["default"].createElement(react_1["default"].Fragment, null, c, c2, c3);
-};
-var F = function F(props) {
-  return react_1["default"].createElement("div", null, props.age);
-};
-var f = react_1["default"].createElement(F, {
-  age: 33
-});
-// -----
 var UsageError = /*#__PURE__*/function (_Error) {
   function UsageError() {
     _classCallCheck(this, UsageError);
@@ -372,9 +335,10 @@ function makeObservable(Provider) {
       _ref5$storage = _ref5.storage,
       storage = _ref5$storage === void 0 ? null : _ref5$storage,
       value = _ref5.value;
+    var connKey = (0, react_1.useRef)();
     var store = (0, use_store_1["default"])(prehooks, value, storage);
     var _ref6 = (0, react_1.useState)(function () {
-        return store.cache.connect();
+        return getConnectionFrom(connKey, store.cache);
       }),
       _ref7 = _slicedToArray(_ref6, 1),
       connection = _ref7[0];
@@ -395,7 +359,9 @@ function makeObservable(Provider) {
     }, [storeRef === null || storeRef === void 0 ? void 0 : storeRef.current]);
     (0, react_1.useEffect)(function () {
       return function () {
-        return connection.disconnect();
+        connection.disconnect();
+        delete connRegister[connKey.current];
+        connKey.current = undefined;
       };
     }, []);
     return react_1["default"].createElement(Provider, {

package/package.json

@@ -8,16 +8,9 @@
     "steveswork <stephen.isienyi@gmail.com> (https://github.com/steveswork)"
   ],
   "dependencies": {
-    "@webkrafters/auto-immutable": "^1.0.0",
-    "@webkrafters/clone-total": "0.0.4",
-    "@webkrafters/data-distillery": "0.0.3",
-    "@webkrafters/get-property": "^1.1.2",
-    "@webkrafters/path-dotize": "0.0.2",
-    "lodash.isboolean": "^3.0.3",
-    "lodash.isempty": "^4.4.0",
-    "lodash.isequal": "^4.5.0",
-    "lodash.isplainobject": "^4.0.6",
-    "lodash.omit": "^4.5.0"
+    "@webkrafters/auto-immutable": "^1.0.1",
+    "@webkrafters/data-distillery": "^0.0.3",
+    "@webkrafters/path-dotize": "^0.0.2"
   },
   "description": "Observable react context - Update-friendly context. Prevents automatic total component tree tear-down and re-rendering during context updates.",
   "devDependencies": {
@@ -34,6 +27,7 @@
     "@types/jest": "^29.5.12",
     "@types/jest-cli": "^24.3.0",
     "@types/node": "^20.11.28",
+    "@webkrafters/clone-total": "^1.0.1",
     "babel-loader": "^9.1.3",
     "eslint": "^8.57.0",
     "eslint-config-standard": "^17.1.0",
@@ -46,9 +40,15 @@
     "jest": "^29.7.0",
     "jest-cli": "^29.7.0",
     "jest-environment-jsdom": "^29.7.0",
+    "lodash.isboolean": "^3.0.3",
+    "lodash.isempty": "^4.4.0",
+    "lodash.isequal": "^4.5.0",
+    "lodash.isplainobject": "^4.0.6",
+    "lodash.omit": "^4.5.0",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "react-performance-testing": "^2.0.0",
+    "setimmediate": "^1.0.5",
     "ts-jest": "^29.1.2",
     "ts-node": "^10.9.2",
     "typescript": "^5.4.5"
@@ -93,7 +93,13 @@
   "main": "dist/index.js",
   "name": "@webkrafters/react-observable-context",
   "peerDependencies": {
-    "@types/react": ">= 16.8.0"
+    "@types/react": ">= 16.8.0",
+    "lodash.isboolean": ">= 0.1.0",
+    "lodash.isempty": ">= 0.1.0",
+    "lodash.isequal": ">= 0.1.0",
+    "lodash.isplainobject": ">= 0.8.0",
+    "lodash.omit": ">= 0.1.0",
+    "react": ">= 16.8.0"
   },
   "publishConfig": {
     "access": "public"
@@ -111,5 +117,5 @@
     "test:watch": "eslint --fix && jest --updateSnapshot --watchAll"
   },
   "types": "dist/index.d.ts",
-  "version": "5.0.0-rc.4"
-}
+  "version": "5.0.0-rc.7"
+}