@onepercentio/one-ui 0.19.1 → 0.19.3

package/dist/hooks/useHero.js

@@ -1,171 +1,183 @@
 "use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = useHero;
+var _react = require("react");
+var _ownEvent = _interopRequireDefault(require("../utils/ownEvent"));
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: 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 _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; }
+function _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _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(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 _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; }
+const ID = function ID(id) {
+  return "".concat(id, "-hero");
 };
-Object.defineProperty(exports, "__esModule", { value: true });
-const react_1 = require("react");
-const ownEvent_1 = __importDefault(require("../utils/ownEvent"));
-const ID = (id) => `${id}-hero`;
 const viewport = window.visualViewport;
+
 /**
  * This hook implements the logic for a hero animation between 2 elements
  */
-function useHero(id, options = {
-    propsToTransition: [],
-}, events = {}) {
-    const { propsToTransition = [], "data-preffix": dataPreffix, repeatable, } = options;
-    const _dataPreffix = dataPreffix ? `-${dataPreffix}` : "";
-    const dataProperty = `data${_dataPreffix}-hero`;
-    const heroRef = (0, react_1.useRef)(null);
-    (0, react_1.useLayoutEffect)(() => {
-        heroRef.current.setAttribute(dataProperty, id);
-    }, [id]);
-    const getHerosOnScreen = (0, react_1.useCallback)(() => {
-        const otherElements = Array.from(document.querySelectorAll(`[${dataProperty}="${id}"]`)).filter((el) => el !== heroRef.current);
-        return otherElements;
-    }, [id]);
-    function triggerHeroAnimation() {
-        const allPropsToTransition = [
-            "width",
-            "height",
-            "top",
-            "left",
-            ...propsToTransition,
-        ];
-        const shouldHeroFn = events.onHeroDetect || ((...a) => true);
-        const otherElements = getHerosOnScreen().filter((el) => shouldHeroFn(el, heroRef.current));
-        const currentElCoordinates = heroRef.current.getBoundingClientRect();
-        if (process.env.NODE_ENV === "development" && otherElements.length > 2)
-            console.warn("There are too many elements to transition to, I will transition to the first I find", otherElements);
-        const otherElement = otherElements.find((el) => el !== heroRef.current);
-        if (otherElement) {
-            const [originContainer, targetContainer] = events.onBeforeTransition
-                ? events.onBeforeTransition(otherElement, heroRef.current)
-                : [viewport, viewport];
-            const shouldSkip = isElementOutsideContainer(targetContainer, currentElCoordinates) ||
-                isElementOutsideContainer(originContainer, otherElement.getBoundingClientRect())
-                ? (events.onHeroSkip || (() => true))(otherElement, heroRef.current)
-                : false;
-            if (shouldSkip)
-                return;
-            const oldClone = document.querySelector(`[${dataProperty}-clone="${ID(id)}"]`);
-            const clone = (oldClone ||
-                otherElement.cloneNode(true));
-            // Clean up thos properties that can cause confusion since it's a clone
-            clone.style.visibility = "";
-            clone.removeAttribute(dataProperty);
-            clone.setAttribute(`${dataProperty}-clone`, ID(id));
-            /**
-             * If it's repeatable, we should keep the flag that indicates the hero existance
-             */
-            if (!repeatable)
-                // Since a transition is now triggering from the old element, he cannot be considered for other transitions
-                otherElement.removeAttribute(dataProperty);
-            function willTheHeroMove(origin, target) {
-                return !(origin.top === target.top &&
-                    origin.left === target.left &&
-                    origin.width === target.width &&
-                    origin.height === target.height);
-            }
-            /**
-             *
-             * @param el
-             * @returns Returns if it will move
-             */
-            function setCloneToCoordinatesOf(el) {
-                const coordinates = el.getBoundingClientRect();
-                const currentCoordinates = clone.getBoundingClientRect();
-                const willMove = willTheHeroMove(coordinates, currentCoordinates);
-                clone.style.position = "fixed";
-                clone.style.top = `${coordinates.top}px`;
-                clone.style.left = `${coordinates.left}px`;
-                clone.style.width = `${coordinates.width}px`;
-                clone.style.height = `${coordinates.height}px`;
-                return willMove;
-            }
-            const coordinates = otherElement.getBoundingClientRect();
-            const currentCoordinates = heroRef.current.getBoundingClientRect();
-            const itWontMove = !willTheHeroMove(coordinates, currentCoordinates);
-            if (itWontMove)
-                return;
-            if (!oldClone) {
-                /** Set the clone over the starting element */
-                setCloneToCoordinatesOf(otherElement);
-                document.body.appendChild(clone);
-            }
-            heroRef.current.style.visibility = "hidden";
-            otherElement.style.visibility = "hidden";
-            clone.style.transition = `${allPropsToTransition
-                .map((prop) => `${prop} var(--animation--speed-fast, 250ms) ease-out`)
-                .join(", ")}`;
-            setTimeout(() => {
-                const el = heroRef.current;
-                const cleanup = () => {
-                    if (events.onHeroEnd)
-                        events.onHeroEnd();
-                    clone.remove();
-                    if (el) {
-                        if (repeatable)
-                            el.setAttribute(dataProperty, id);
-                        el.style.visibility = "";
-                    }
-                };
-                if (events.onHeroStart)
-                    events.onHeroStart(clone, otherElement, heroRef.current);
-                if (!el) {
-                    cleanup();
-                    return;
-                }
-                /** Set the clone over the new position */
-                const willMove = setCloneToCoordinatesOf(el);
-                if (!willMove)
-                    cleanup();
-                else {
-                    for (let propToTransition of propsToTransition)
-                        clone.style[propToTransition] =
-                            el.style[propToTransition];
-                    const transitionEndCb = (0, ownEvent_1.default)(({ target, currentTarget }) => {
-                        if (target === currentTarget)
-                            cleanup();
-                    });
-                    clone.addEventListener("transitionend", transitionEndCb);
-                    clone.addEventListener("transitionstart", () => {
-                        const onCancelCb = (0, ownEvent_1.default)((e) => {
-                            clone.removeEventListener("transitionend", transitionEndCb);
-                            clone.removeEventListener("transitioncancel", onCancelCb);
-                        });
-                        clone.addEventListener("transitioncancel", onCancelCb);
-                    });
-                }
-            }, 0);
+function useHero(id) {
+  let options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {
+    propsToTransition: []
+  };
+  let events = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {};
+  const _options$propsToTrans = options.propsToTransition,
+    propsToTransition = _options$propsToTrans === void 0 ? [] : _options$propsToTrans,
+    dataPreffix = options["data-preffix"],
+    repeatable = options.repeatable;
+  const _dataPreffix = dataPreffix ? "-".concat(dataPreffix) : "";
+  const dataProperty = "data".concat(_dataPreffix, "-hero");
+  const heroRef = (0, _react.useRef)(null);
+  (0, _react.useLayoutEffect)(function () {
+    heroRef.current.setAttribute(dataProperty, id);
+  }, [id]);
+  const getHerosOnScreen = (0, _react.useCallback)(function () {
+    const otherElements = Array.from(document.querySelectorAll("[".concat(dataProperty, "=\"").concat(id, "\"]"))).filter(function (el) {
+      return el !== heroRef.current;
+    });
+    return otherElements;
+  }, [id]);
+  function triggerHeroAnimation() {
+    const allPropsToTransition = ["width", "height", "top", "left"].concat(_toConsumableArray(propsToTransition));
+    const shouldHeroFn = events.onHeroDetect || function () {
+      return true;
+    };
+    const otherElements = getHerosOnScreen().filter(function (el) {
+      return shouldHeroFn(el, heroRef.current);
+    });
+    const currentElCoordinates = heroRef.current.getBoundingClientRect();
+    if (process.env.NODE_ENV === "development" && otherElements.length > 2) console.warn("There are too many elements to transition to, I will transition to the first I find", otherElements);
+    const otherElement = otherElements.find(function (el) {
+      return el !== heroRef.current;
+    });
+    if (otherElement) {
+      let willTheHeroMove = function willTheHeroMove(origin, target) {
+        return !(origin.top === target.top && origin.left === target.left && origin.width === target.width && origin.height === target.height);
+      };
+      /**
+       *
+       * @param el
+       * @returns Returns if it will move
+       */
+      let setCloneToCoordinatesOf = function setCloneToCoordinatesOf(el) {
+        const coordinates = el.getBoundingClientRect();
+        const currentCoordinates = clone.getBoundingClientRect();
+        const willMove = willTheHeroMove(coordinates, currentCoordinates);
+        clone.style.position = "fixed";
+        clone.style.top = "".concat(coordinates.top, "px");
+        clone.style.left = "".concat(coordinates.left, "px");
+        clone.style.width = "".concat(coordinates.width, "px");
+        clone.style.height = "".concat(coordinates.height, "px");
+        return willMove;
+      };
+      const _ref = events.onBeforeTransition ? events.onBeforeTransition(otherElement, heroRef.current) : [viewport, viewport],
+        _ref2 = _slicedToArray(_ref, 2),
+        originContainer = _ref2[0],
+        targetContainer = _ref2[1];
+      const shouldSkip = isElementOutsideContainer(targetContainer, currentElCoordinates) || isElementOutsideContainer(originContainer, otherElement.getBoundingClientRect()) ? (events.onHeroSkip || function () {
+        return true;
+      })(otherElement, heroRef.current) : false;
+      if (shouldSkip) {
+        var _events$onHeroSkipped;
+        (_events$onHeroSkipped = events.onHeroSkipped) === null || _events$onHeroSkipped === void 0 ? void 0 : _events$onHeroSkipped.call(events);
+        return;
+      }
+      const oldClone = document.querySelector("[".concat(dataProperty, "-clone=\"").concat(ID(id), "\"]"));
+      const clone = oldClone || otherElement.cloneNode(true);
+
+      // Clean up thos properties that can cause confusion since it's a clone
+      clone.style.visibility = "";
+      clone.removeAttribute(dataProperty);
+      clone.setAttribute("".concat(dataProperty, "-clone"), ID(id));
+
+      /**
+       * If it's repeatable, we should keep the flag that indicates the hero existance
+       */
+      if (!repeatable)
+        // Since a transition is now triggering from the old element, he cannot be considered for other transitions
+        otherElement.removeAttribute(dataProperty);
+      const coordinates = otherElement.getBoundingClientRect();
+      const currentCoordinates = heroRef.current.getBoundingClientRect();
+      const itWontMove = !willTheHeroMove(coordinates, currentCoordinates);
+      if (itWontMove) return;
+      if (!oldClone) {
+        /** Set the clone over the starting element */
+        setCloneToCoordinatesOf(otherElement);
+        document.body.appendChild(clone);
+      }
+      heroRef.current.style.visibility = "hidden";
+      otherElement.style.visibility = "hidden";
+      clone.style.transition = "".concat(allPropsToTransition.map(function (prop) {
+        return "".concat(prop, " var(--animation--speed-fast, 250ms) ease-out");
+      }).join(", "));
+      setTimeout(function () {
+        const el = heroRef.current;
+        const cleanup = function cleanup() {
+          if (events.onHeroEnd) events.onHeroEnd();
+          clone.remove();
+          if (el) {
+            if (repeatable) el.setAttribute(dataProperty, id);
+            el.style.visibility = "";
+          }
+        };
+        if (events.onHeroStart) events.onHeroStart(clone, otherElement, heroRef.current);
+        if (!el) {
+          cleanup();
+          return;
+        }
+        /** Set the clone over the new position */
+        const willMove = setCloneToCoordinatesOf(el);
+        if (!willMove) cleanup();else {
+          for (let propToTransition of propsToTransition) clone.style[propToTransition] = el.style[propToTransition];
+          const transitionEndCb = (0, _ownEvent.default)(function (_ref3) {
+            let target = _ref3.target,
+              currentTarget = _ref3.currentTarget;
+            if (target === currentTarget) cleanup();
+          });
+          clone.addEventListener("transitionend", transitionEndCb);
+          clone.addEventListener("transitionstart", function () {
+            const onCancelCb = (0, _ownEvent.default)(function () {
+              clone.removeEventListener("transitionend", transitionEndCb);
+              clone.removeEventListener("transitioncancel", onCancelCb);
+            });
+            clone.addEventListener("transitioncancel", onCancelCb);
+          });
         }
+      }, 0);
     }
-    (0, react_1.useEffect)(() => {
-        triggerHeroAnimation();
-    }, []);
-    return { heroRef, getHerosOnScreen, trigger: triggerHeroAnimation };
+  }
+  (0, _react.useEffect)(function () {
+    triggerHeroAnimation();
+  }, []);
+  return {
+    heroRef: heroRef,
+    getHerosOnScreen: getHerosOnScreen,
+    trigger: triggerHeroAnimation
+  };
 }
-exports.default = useHero;
 function isElementOutsideViewport(coordinates) {
-    const elementOverflowsViewport = coordinates.left >= viewport.width || coordinates.top >= viewport.height;
-    const elementUnderflowsViewport = coordinates.left <= -coordinates.width ||
-        coordinates.top <= -coordinates.height;
-    return elementOverflowsViewport || elementUnderflowsViewport;
+  const elementOverflowsViewport = coordinates.left >= viewport.width || coordinates.top >= viewport.height;
+  const elementUnderflowsViewport = coordinates.left <= -coordinates.width || coordinates.top <= -coordinates.height;
+  return elementOverflowsViewport || elementUnderflowsViewport;
 }
 function isElementOutsideContainer(container, coordinates) {
-    if (container instanceof VisualViewport) {
-        return isElementOutsideViewport(coordinates);
-    }
-    else {
-        const containerBounds = container.getBoundingClientRect();
-        const isContainerOutsideViewport = isElementOutsideViewport(containerBounds);
-        if (isContainerOutsideViewport)
-            return true;
-        const elementOverflowsViewport = coordinates.left >= containerBounds.left + containerBounds.width ||
-            coordinates.top >= containerBounds.top + containerBounds.height;
-        const elementUnderflowsViewport = containerBounds.left - coordinates.left >= coordinates.width ||
-            containerBounds.top - coordinates.top >= coordinates.height;
-        return elementUnderflowsViewport || elementOverflowsViewport;
-    }
-}
-//# sourceMappingURL=useHero.js.map
+  if (container instanceof VisualViewport) {
+    return isElementOutsideViewport(coordinates);
+  } else {
+    const containerBounds = container.getBoundingClientRect();
+    const isContainerOutsideViewport = isElementOutsideViewport(containerBounds);
+    if (isContainerOutsideViewport) return true;
+    const elementOverflowsViewport = coordinates.left >= containerBounds.left + containerBounds.width || coordinates.top >= containerBounds.top + containerBounds.height;
+    const elementUnderflowsViewport = containerBounds.left - coordinates.left >= coordinates.width || containerBounds.top - coordinates.top >= coordinates.height;
+    return elementUnderflowsViewport || elementOverflowsViewport;
+  }
+}

package/dist/hooks/useIntersection.js

@@ -1,30 +1,36 @@
 "use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-const react_1 = require("react");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = useIntersection;
+var _react = require("react");
 function useIntersection() {
-    const { current: targetMap } = (0, react_1.useRef)([]);
-    const { current: observer } = (0, react_1.useRef)(("IntersectionObserver" in window) ? new IntersectionObserver((els) => {
-        els.forEach((e, i) => {
-            const result = targetMap.find((el) => el[0] === e.target);
-            if (result && e.isIntersecting) {
-                result[1]();
-            }
+  const _useRef = (0, _react.useRef)([]),
+    targetMap = _useRef.current;
+  const _useRef2 = (0, _react.useRef)("IntersectionObserver" in window ? new IntersectionObserver(function (els) {
+      els.forEach(function (e) {
+        const result = targetMap.find(function (el) {
+          return el[0] === e.target;
         });
-    }) : null);
-    return (0, react_1.useMemo)(() => {
-        return {
-            observe: (e, cb) => {
-                targetMap.push([e, cb]);
-                if (observer)
-                    observer.observe(e);
-            },
-            unobserve: (e) => {
-                if (observer)
-                    observer.unobserve(e);
-                targetMap.splice(targetMap.findIndex((el) => el[0] === e), 1);
-            },
-        };
-    }, []);
-}
-exports.default = useIntersection;
-//# sourceMappingURL=useIntersection.js.map
+        if (result && e.isIntersecting) {
+          result[1]();
+        }
+      });
+    }) : null),
+    observer = _useRef2.current;
+  return (0, _react.useMemo)(function () {
+    return {
+      observe: function observe(e, cb) {
+        targetMap.push([e, cb]);
+        if (observer) observer.observe(e);
+      },
+      unobserve: function unobserve(e) {
+        if (observer) observer.unobserve(e);
+        targetMap.splice(targetMap.findIndex(function (el) {
+          return el[0] === e;
+        }), 1);
+      }
+    };
+  }, []);
+}

package/dist/hooks/useMergeRefs.js

@@ -1,31 +1,34 @@
 "use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.useMergeRefsFunc = void 0;
-const react_1 = require("react");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = useMergeRefs;
+exports.useMergeRefsFunc = useMergeRefsFunc;
+var _react = require("react");
 /**
  * This function exists so we can work with multiple refs as a single one
  */
-function useMergeRefs(mainRef, ...otherRefs) {
-    (0, react_1.useLayoutEffect)(() => {
-        for (let ref of otherRefs)
-            ref.current = mainRef.current;
-    }, []);
-    return mainRef;
+function useMergeRefs(mainRef) {
+  for (var _len = arguments.length, otherRefs = new Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {
+    otherRefs[_key - 1] = arguments[_key];
+  }
+  (0, _react.useLayoutEffect)(function () {
+    for (let ref of otherRefs) ref.current = mainRef.current;
+  }, []);
+  return mainRef;
 }
-exports.default = useMergeRefs;
+
 /**
  * This function exists so we can work with multiple refs as a single one, almost immediatly
  */
-function useMergeRefsFunc(mainRef, ...otherRefs) {
-    return (providedRef) => {
-        if (providedRef)
-            for (let ref of [mainRef, ...otherRefs]) {
-                if (typeof ref === "function")
-                    ref(providedRef);
-                else
-                    ref.current = providedRef;
-            }
-    };
-}
-exports.useMergeRefsFunc = useMergeRefsFunc;
-//# sourceMappingURL=useMergeRefs.js.map
+function useMergeRefsFunc(mainRef) {
+  for (var _len2 = arguments.length, otherRefs = new Array(_len2 > 1 ? _len2 - 1 : 0), _key2 = 1; _key2 < _len2; _key2++) {
+    otherRefs[_key2 - 1] = arguments[_key2];
+  }
+  return function (providedRef) {
+    if (providedRef) for (let ref of [mainRef].concat(otherRefs)) {
+      if (typeof ref === "function") ref(providedRef);else ref.current = providedRef;
+    }
+  };
+}

package/dist/hooks/useObserve.js

@@ -1,18 +1,31 @@
 "use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-const react_1 = require("react");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = useObserve;
+var _react = require("react");
 require("./shims/ObjectWatchShim.js");
+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; }
 function useObserve(toObserve, keysToObserve) {
-    const [_, ss] = (0, react_1.useState)(0);
-    (0, react_1.useLayoutEffect)(() => {
-        const arr = Array.isArray(toObserve) ? toObserve : [toObserve];
-        const unwatchers = arr.map(object => object.watch(keysToObserve, () => {
-            ss((p) => {
-                return p + 1;
-            });
-        }));
-        return () => unwatchers.forEach(unwatch => unwatch());
-    }, [toObserve]);
-}
-exports.default = useObserve;
-//# sourceMappingURL=useObserve.js.map
+  (0, _react.useLayoutEffect)(function () {
+    const arr = Array.isArray(toObserve) ? toObserve : [toObserve];
+    const unwatchers = arr.map(function (object) {
+      return object.watch(keysToObserve, function () {
+        ss(function (p) {
+          return p + 1;
+        });
+      });
+    });
+    return function () {
+      return unwatchers.forEach(function (unwatch) {
+        return unwatch();
+      });
+    };
+  }, [toObserve]);
+}