@folklore/hooks 0.0.6

package/dist/cjs.js

@@ -0,0 +1,259 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var _slicedToArray = require('@babel/runtime/helpers/slicedToArray');
+var _toConsumableArray = require('@babel/runtime/helpers/toConsumableArray');
+var _defineProperty = require('@babel/runtime/helpers/defineProperty');
+var react = require('react');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var _slicedToArray__default = /*#__PURE__*/_interopDefaultLegacy(_slicedToArray);
+var _toConsumableArray__default = /*#__PURE__*/_interopDefaultLegacy(_toConsumableArray);
+var _defineProperty__default = /*#__PURE__*/_interopDefaultLegacy(_defineProperty);
+
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty__default["default"](target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+var observersCache = new Map();
+
+var getOptionsKey = function getOptionsKey(_ref) {
+  var _ref$root = _ref.root,
+      root = _ref$root === void 0 ? null : _ref$root,
+      rootMargin = _ref.rootMargin,
+      _ref$threshold = _ref.threshold,
+      threshold = _ref$threshold === void 0 ? null : _ref$threshold;
+  return "root_".concat(root, "_rootMargin_").concat(rootMargin || null, "_threshold_").concat(threshold);
+};
+
+var createObserver = function createObserver(Observer) {
+  var options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
+  var subscribers = [];
+
+  var addSubscriber = function addSubscriber(element, callback) {
+    var currentSubscriber = subscribers.find(function (it) {
+      return it.element === element;
+    }) || null;
+
+    if (currentSubscriber !== null) {
+      return subscribers.map(function (it) {
+        return it.element === element && it.callbacks.indexOf(callback) === -1 ? _objectSpread(_objectSpread({}, it), {}, {
+          callbacks: [].concat(_toConsumableArray__default["default"](it.callbacks), [callback])
+        }) : it;
+      }).filter(function (it) {
+        return it.callbacks.length > 0;
+      });
+    }
+
+    return [].concat(_toConsumableArray__default["default"](subscribers), [{
+      element: element,
+      callbacks: [callback]
+    }]);
+  };
+
+  var removeSubscriber = function removeSubscriber(element, callback) {
+    return subscribers.map(function (it) {
+      return it.element === element ? _objectSpread(_objectSpread({}, it), {}, {
+        callbacks: it.callbacks.filter(function (subCallback) {
+          return subCallback !== callback;
+        })
+      }) : it;
+    }).filter(function (it) {
+      return it.callbacks.length > 0;
+    });
+  };
+
+  var onUpdate = function onUpdate(entries) {
+    entries.forEach(function (entry) {
+      subscribers.forEach(function (_ref2) {
+        var element = _ref2.element,
+            callbacks = _ref2.callbacks;
+
+        if (element === entry.target) {
+          callbacks.forEach(function (callback) {
+            callback(entry);
+          });
+        }
+      });
+    });
+  };
+
+  var observer = new Observer(onUpdate, options);
+
+  var unsubscribe = function unsubscribe(element) {
+    var callback = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : null;
+    subscribers = removeSubscriber(element, callback);
+
+    if (typeof observer.unobserve === 'undefined') {
+      observer.disconnect();
+      subscribers.forEach(function (subscriber) {
+        observer.observe(subscriber.element);
+      });
+      return;
+    }
+
+    var currentSubscriber = subscribers.find(function (it) {
+      return it.element === element;
+    }) || null;
+
+    if (currentSubscriber === null) {
+      observer.unobserve(element);
+    }
+  };
+
+  var subscribe = function subscribe(element, callback) {
+    var currentSubscriber = subscribers.find(function (it) {
+      return it.element === element;
+    }) || null;
+    subscribers = addSubscriber(element, callback);
+
+    if (currentSubscriber === null) {
+      observer.observe(element);
+    }
+  };
+
+  return {
+    subscribe: subscribe,
+    unsubscribe: unsubscribe,
+    observer: observer
+  };
+};
+
+var getObserver = function getObserver(Observer) {
+  var options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
+  var observerKey = getOptionsKey(options);
+
+  if (!observersCache.has(Observer)) {
+    observersCache.set(Observer, {});
+  }
+
+  var observers = observersCache.get(Observer);
+
+  if (typeof observers[observerKey] === 'undefined') {
+    observers[observerKey] = createObserver(Observer, options);
+    observersCache.set(Observer, observers);
+  }
+
+  return observers[observerKey];
+};
+var useObserver = function useObserver(Observer) {
+  var opts = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
+  var initialEntry = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {};
+  var _opts$root = opts.root,
+      root = _opts$root === void 0 ? null : _opts$root,
+      _opts$rootMargin = opts.rootMargin,
+      rootMargin = _opts$rootMargin === void 0 ? null : _opts$rootMargin,
+      _opts$threshold = opts.threshold,
+      threshold = _opts$threshold === void 0 ? null : _opts$threshold,
+      _opts$disabled = opts.disabled,
+      disabled = _opts$disabled === void 0 ? false : _opts$disabled;
+
+  var _useState = react.useState(initialEntry),
+      _useState2 = _slicedToArray__default["default"](_useState, 2),
+      entry = _useState2[0],
+      setEntry = _useState2[1];
+
+  var nodeRef = react.useRef(null);
+  var currentElement = react.useRef(null);
+  var elementChanged = nodeRef.current !== currentElement.current;
+  react.useEffect(function () {
+    var nodeElement = nodeRef.current;
+
+    var callback = function callback(newEntry) {
+      return setEntry(newEntry);
+    };
+
+    var unsubscribe = null;
+
+    if (nodeElement !== null) {
+      var newOpts = {};
+
+      if (root !== null) {
+        newOpts.root = root;
+      }
+
+      if (rootMargin !== null) {
+        newOpts.rootMargin = rootMargin;
+      }
+
+      if (threshold !== null) {
+        newOpts.threshold = threshold;
+      }
+
+      var _getObserver = getObserver(Observer, newOpts),
+          subscribe = _getObserver.subscribe,
+          localUnsubscribe = _getObserver.unsubscribe;
+
+      unsubscribe = localUnsubscribe;
+      subscribe(nodeElement, callback);
+    }
+
+    currentElement.current = nodeElement;
+    return function () {
+      if (unsubscribe !== null) {
+        unsubscribe(nodeElement, callback);
+      }
+    };
+  }, [Observer, elementChanged, disabled, root, rootMargin, threshold]);
+  return {
+    ref: nodeRef,
+    entry: entry
+  };
+};
+/**
+ * Intersection Observer
+ */
+
+var intersectionObserverInitialEntry = {
+  target: null,
+  time: null,
+  isVisible: false,
+  isIntersecting: false,
+  intersectionRatio: 0,
+  intersectionRect: null,
+  boundingClientRect: null,
+  rootBounds: null
+};
+var useIntersectionObserver = function useIntersectionObserver() {
+  var _ref3 = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {},
+      _ref3$root = _ref3.root,
+      root = _ref3$root === void 0 ? null : _ref3$root,
+      _ref3$rootMargin = _ref3.rootMargin,
+      rootMargin = _ref3$rootMargin === void 0 ? '0px' : _ref3$rootMargin,
+      _ref3$threshold = _ref3.threshold,
+      threshold = _ref3$threshold === void 0 ? [0, 1.0] : _ref3$threshold,
+      _ref3$disabled = _ref3.disabled,
+      disabled = _ref3$disabled === void 0 ? false : _ref3$disabled;
+
+  return useObserver(IntersectionObserver, {
+    root: root,
+    rootMargin: rootMargin,
+    threshold: threshold,
+    disabled: disabled
+  }, intersectionObserverInitialEntry);
+};
+/**
+ * Resize Observer
+ */
+
+var resizeObserverInitialEntry = {
+  target: null,
+  contentRect: null,
+  contentBoxSize: null,
+  borderBoxSize: null
+};
+var useResizeObserver = function useResizeObserver() {
+  var _ref4 = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {},
+      _ref4$disabled = _ref4.disabled,
+      disabled = _ref4$disabled === void 0 ? false : _ref4$disabled;
+
+  return useObserver(ResizeObserver, {
+    disabled: disabled
+  }, resizeObserverInitialEntry);
+};
+
+exports.getObserver = getObserver;
+exports.useIntersectionObserver = useIntersectionObserver;
+exports.useObserver = useObserver;
+exports.useResizeObserver = useResizeObserver;

package/dist/es.js

@@ -0,0 +1,246 @@
+import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
+import _toConsumableArray from '@babel/runtime/helpers/toConsumableArray';
+import _defineProperty from '@babel/runtime/helpers/defineProperty';
+import { useState, useRef, useEffect } from 'react';
+
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+var observersCache = new Map();
+
+var getOptionsKey = function getOptionsKey(_ref) {
+  var _ref$root = _ref.root,
+      root = _ref$root === void 0 ? null : _ref$root,
+      rootMargin = _ref.rootMargin,
+      _ref$threshold = _ref.threshold,
+      threshold = _ref$threshold === void 0 ? null : _ref$threshold;
+  return "root_".concat(root, "_rootMargin_").concat(rootMargin || null, "_threshold_").concat(threshold);
+};
+
+var createObserver = function createObserver(Observer) {
+  var options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
+  var subscribers = [];
+
+  var addSubscriber = function addSubscriber(element, callback) {
+    var currentSubscriber = subscribers.find(function (it) {
+      return it.element === element;
+    }) || null;
+
+    if (currentSubscriber !== null) {
+      return subscribers.map(function (it) {
+        return it.element === element && it.callbacks.indexOf(callback) === -1 ? _objectSpread(_objectSpread({}, it), {}, {
+          callbacks: [].concat(_toConsumableArray(it.callbacks), [callback])
+        }) : it;
+      }).filter(function (it) {
+        return it.callbacks.length > 0;
+      });
+    }
+
+    return [].concat(_toConsumableArray(subscribers), [{
+      element: element,
+      callbacks: [callback]
+    }]);
+  };
+
+  var removeSubscriber = function removeSubscriber(element, callback) {
+    return subscribers.map(function (it) {
+      return it.element === element ? _objectSpread(_objectSpread({}, it), {}, {
+        callbacks: it.callbacks.filter(function (subCallback) {
+          return subCallback !== callback;
+        })
+      }) : it;
+    }).filter(function (it) {
+      return it.callbacks.length > 0;
+    });
+  };
+
+  var onUpdate = function onUpdate(entries) {
+    entries.forEach(function (entry) {
+      subscribers.forEach(function (_ref2) {
+        var element = _ref2.element,
+            callbacks = _ref2.callbacks;
+
+        if (element === entry.target) {
+          callbacks.forEach(function (callback) {
+            callback(entry);
+          });
+        }
+      });
+    });
+  };
+
+  var observer = new Observer(onUpdate, options);
+
+  var unsubscribe = function unsubscribe(element) {
+    var callback = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : null;
+    subscribers = removeSubscriber(element, callback);
+
+    if (typeof observer.unobserve === 'undefined') {
+      observer.disconnect();
+      subscribers.forEach(function (subscriber) {
+        observer.observe(subscriber.element);
+      });
+      return;
+    }
+
+    var currentSubscriber = subscribers.find(function (it) {
+      return it.element === element;
+    }) || null;
+
+    if (currentSubscriber === null) {
+      observer.unobserve(element);
+    }
+  };
+
+  var subscribe = function subscribe(element, callback) {
+    var currentSubscriber = subscribers.find(function (it) {
+      return it.element === element;
+    }) || null;
+    subscribers = addSubscriber(element, callback);
+
+    if (currentSubscriber === null) {
+      observer.observe(element);
+    }
+  };
+
+  return {
+    subscribe: subscribe,
+    unsubscribe: unsubscribe,
+    observer: observer
+  };
+};
+
+var getObserver = function getObserver(Observer) {
+  var options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
+  var observerKey = getOptionsKey(options);
+
+  if (!observersCache.has(Observer)) {
+    observersCache.set(Observer, {});
+  }
+
+  var observers = observersCache.get(Observer);
+
+  if (typeof observers[observerKey] === 'undefined') {
+    observers[observerKey] = createObserver(Observer, options);
+    observersCache.set(Observer, observers);
+  }
+
+  return observers[observerKey];
+};
+var useObserver = function useObserver(Observer) {
+  var opts = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
+  var initialEntry = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {};
+  var _opts$root = opts.root,
+      root = _opts$root === void 0 ? null : _opts$root,
+      _opts$rootMargin = opts.rootMargin,
+      rootMargin = _opts$rootMargin === void 0 ? null : _opts$rootMargin,
+      _opts$threshold = opts.threshold,
+      threshold = _opts$threshold === void 0 ? null : _opts$threshold,
+      _opts$disabled = opts.disabled,
+      disabled = _opts$disabled === void 0 ? false : _opts$disabled;
+
+  var _useState = useState(initialEntry),
+      _useState2 = _slicedToArray(_useState, 2),
+      entry = _useState2[0],
+      setEntry = _useState2[1];
+
+  var nodeRef = useRef(null);
+  var currentElement = useRef(null);
+  var elementChanged = nodeRef.current !== currentElement.current;
+  useEffect(function () {
+    var nodeElement = nodeRef.current;
+
+    var callback = function callback(newEntry) {
+      return setEntry(newEntry);
+    };
+
+    var unsubscribe = null;
+
+    if (nodeElement !== null) {
+      var newOpts = {};
+
+      if (root !== null) {
+        newOpts.root = root;
+      }
+
+      if (rootMargin !== null) {
+        newOpts.rootMargin = rootMargin;
+      }
+
+      if (threshold !== null) {
+        newOpts.threshold = threshold;
+      }
+
+      var _getObserver = getObserver(Observer, newOpts),
+          subscribe = _getObserver.subscribe,
+          localUnsubscribe = _getObserver.unsubscribe;
+
+      unsubscribe = localUnsubscribe;
+      subscribe(nodeElement, callback);
+    }
+
+    currentElement.current = nodeElement;
+    return function () {
+      if (unsubscribe !== null) {
+        unsubscribe(nodeElement, callback);
+      }
+    };
+  }, [Observer, elementChanged, disabled, root, rootMargin, threshold]);
+  return {
+    ref: nodeRef,
+    entry: entry
+  };
+};
+/**
+ * Intersection Observer
+ */
+
+var intersectionObserverInitialEntry = {
+  target: null,
+  time: null,
+  isVisible: false,
+  isIntersecting: false,
+  intersectionRatio: 0,
+  intersectionRect: null,
+  boundingClientRect: null,
+  rootBounds: null
+};
+var useIntersectionObserver = function useIntersectionObserver() {
+  var _ref3 = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {},
+      _ref3$root = _ref3.root,
+      root = _ref3$root === void 0 ? null : _ref3$root,
+      _ref3$rootMargin = _ref3.rootMargin,
+      rootMargin = _ref3$rootMargin === void 0 ? '0px' : _ref3$rootMargin,
+      _ref3$threshold = _ref3.threshold,
+      threshold = _ref3$threshold === void 0 ? [0, 1.0] : _ref3$threshold,
+      _ref3$disabled = _ref3.disabled,
+      disabled = _ref3$disabled === void 0 ? false : _ref3$disabled;
+
+  return useObserver(IntersectionObserver, {
+    root: root,
+    rootMargin: rootMargin,
+    threshold: threshold,
+    disabled: disabled
+  }, intersectionObserverInitialEntry);
+};
+/**
+ * Resize Observer
+ */
+
+var resizeObserverInitialEntry = {
+  target: null,
+  contentRect: null,
+  contentBoxSize: null,
+  borderBoxSize: null
+};
+var useResizeObserver = function useResizeObserver() {
+  var _ref4 = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {},
+      _ref4$disabled = _ref4.disabled,
+      disabled = _ref4$disabled === void 0 ? false : _ref4$disabled;
+
+  return useObserver(ResizeObserver, {
+    disabled: disabled
+  }, resizeObserverInitialEntry);
+};
+
+export { getObserver, useIntersectionObserver, useObserver, useResizeObserver };

package/package.json

@@ -0,0 +1,52 @@
+{
+    "name": "@folklore/hooks",
+    "version": "0.0.6",
+    "description": "React hooks",
+    "keywords": [
+        "javascript",
+        "size",
+        "ui",
+        "utils"
+    ],
+    "homepage": "https://github.com/folkloreinc/folklore-js",
+    "repository": {
+        "type": "git",
+        "url": "git+https://github.com/folkloreinc/folklore-js.git"
+    },
+    "author": {
+        "name": "Folklore",
+        "email": "info@folklore.email"
+    },
+    "contributors": [
+        {
+            "name": "David Mongeau-Petitpas",
+            "email": "dmp@folklore.email"
+        },
+        {
+            "name": "Nicolas Roy-Bourdages",
+            "email": "nrb@folklore.email"
+        }
+    ],
+    "main": "dist/cjs.js",
+    "module": "dist/es.js",
+    "files": [
+        "dist"
+    ],
+    "scripts": {
+        "clean": "rm -rf dist",
+        "build": "rollup --config ../../rollup.config.js",
+        "prepare": "npm run clean && npm run build"
+    },
+    "devDependencies": {
+        "react": "^17.0.0 || ^18.0.0",
+        "react-dom": "^17.0.0 || ^18.0.0"
+    },
+    "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0 || ^18.0.0",
+        "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0"
+    },
+    "publishConfig": {
+        "access": "public"
+    },
+    "gitHead": "cf8f69f622f7ce5476723a2dea46157be2fe5833"
+}