@koine/react 2.0.0-beta.2 → 2.0.0-beta.5

package/hooks/useInterval.js

@@ -1,32 +1,44 @@
 "use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.useInterval = void 0;
-var tslib_1 = require("tslib");
-var react_1 = require("react");
-var noop_1 = tslib_1.__importDefault(require("@koine/utils/noop"));
-/**
- * @borrows [dan abramov](https://overreacted.io/making-setinterval-declarative-with-react-hooks/)
- *
- * We just add `deps` array argument and typescript support
- */
-function useInterval(callback, delay, deps) {
-    if (deps === void 0) { deps = []; }
-    var savedCallback = (0, react_1.useRef)();
-    (0, react_1.useEffect)(function () {
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+function _export(target, all) {
+    for(var name in all)Object.defineProperty(target, name, {
+        enumerable: true,
+        get: all[name]
+    });
+}
+_export(exports, {
+    useInterval: function() {
+        return useInterval;
+    },
+    default: function() {
+        return _default;
+    }
+});
+const _interop_require_default = require("@swc/helpers/_/_interop_require_default");
+const _react = require("react");
+const _noop = /*#__PURE__*/ _interop_require_default._(require("@koine/utils/noop"));
+function useInterval(callback, delay, deps = []) {
+    const savedCallback = (0, _react.useRef)();
+    (0, _react.useEffect)(()=>{
         savedCallback.current = callback;
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, tslib_1.__spreadArray([callback], deps, true));
-    (0, react_1.useEffect)(function () {
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [
+        callback,
+        ...deps
+    ]);
+    (0, _react.useEffect)(()=>{
         function tick() {
-            if (savedCallback.current)
-                savedCallback.current();
+            if (savedCallback.current) savedCallback.current();
         }
         if (delay !== null) {
-            var id_1 = setInterval(tick, delay);
-            return function () { return clearInterval(id_1); };
+            const id = setInterval(tick, delay);
+            return ()=>clearInterval(id);
         }
-        return noop_1.default;
-    }, [delay]);
+        return _noop.default;
+    }, [
+        delay
+    ]);
 }
-exports.useInterval = useInterval;
-exports.default = useInterval;
+const _default = useInterval;

package/hooks/useInterval.mjs

@@ -1,28 +1,29 @@
-import { __spreadArray } from "tslib";
 import { useEffect, useRef } from "react";
 import noop from "@koine/utils/noop";
 /**
  * @borrows [dan abramov](https://overreacted.io/making-setinterval-declarative-with-react-hooks/)
  *
  * We just add `deps` array argument and typescript support
- */
-export function useInterval(callback, delay, deps) {
-    if (deps === void 0) { deps = []; }
-    var savedCallback = useRef();
-    useEffect(function () {
+ */ export function useInterval(callback, delay, deps = []) {
+    const savedCallback = useRef();
+    useEffect(()=>{
         savedCallback.current = callback;
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, __spreadArray([callback], deps, true));
-    useEffect(function () {
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [
+        callback,
+        ...deps
+    ]);
+    useEffect(()=>{
         function tick() {
-            if (savedCallback.current)
-                savedCallback.current();
+            if (savedCallback.current) savedCallback.current();
         }
         if (delay !== null) {
-            var id_1 = setInterval(tick, delay);
-            return function () { return clearInterval(id_1); };
+            const id = setInterval(tick, delay);
+            return ()=>clearInterval(id);
         }
         return noop;
-    }, [delay]);
+    }, [
+        delay
+    ]);
 }
 export default useInterval;

package/hooks/useIsomorphicLayoutEffect.js

@@ -1,13 +1,23 @@
 "use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.useIsomorphicLayoutEffect = void 0;
-var tslib_1 = require("tslib");
-var react_1 = require("react");
-var isBrowser_1 = tslib_1.__importDefault(require("@koine/utils/isBrowser"));
-/**
- * @borrows [streamich/react-use](https://github.com/streamich/react-use/blob/master/src/useIsomorphicLayoutEffect.ts)
- */
-exports.useIsomorphicLayoutEffect = isBrowser_1.default
-    ? react_1.useLayoutEffect
-    : react_1.useEffect;
-exports.default = exports.useIsomorphicLayoutEffect;
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+function _export(target, all) {
+    for(var name in all)Object.defineProperty(target, name, {
+        enumerable: true,
+        get: all[name]
+    });
+}
+_export(exports, {
+    useIsomorphicLayoutEffect: function() {
+        return useIsomorphicLayoutEffect;
+    },
+    default: function() {
+        return _default;
+    }
+});
+const _interop_require_default = require("@swc/helpers/_/_interop_require_default");
+const _react = require("react");
+const _isBrowser = /*#__PURE__*/ _interop_require_default._(require("@koine/utils/isBrowser"));
+const useIsomorphicLayoutEffect = _isBrowser.default ? _react.useLayoutEffect : _react.useEffect;
+const _default = useIsomorphicLayoutEffect;

package/hooks/useIsomorphicLayoutEffect.mjs

@@ -2,8 +2,5 @@ import { useEffect, useLayoutEffect } from "react";
 import isBrowser from "@koine/utils/isBrowser";
 /**
  * @borrows [streamich/react-use](https://github.com/streamich/react-use/blob/master/src/useIsomorphicLayoutEffect.ts)
- */
-export var useIsomorphicLayoutEffect = isBrowser
-    ? useLayoutEffect
-    : useEffect;
+ */ export const useIsomorphicLayoutEffect = isBrowser ? useLayoutEffect : useEffect;
 export default useIsomorphicLayoutEffect;

package/hooks/useKeyUp.js

@@ -1,27 +1,40 @@
 "use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.useKeyUp = void 0;
-var tslib_1 = require("tslib");
-var react_1 = require("react");
-var on_1 = tslib_1.__importDefault(require("@koine/dom/on"));
-function useKeyUp(callback, deps) {
-    if (deps === void 0) { deps = []; }
-    (0, react_1.useEffect)(function () {
-        var listener = (0, on_1.default)(window, "keyup", function (event) {
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+function _export(target, all) {
+    for(var name in all)Object.defineProperty(target, name, {
+        enumerable: true,
+        get: all[name]
+    });
+}
+_export(exports, {
+    useKeyUp: function() {
+        return useKeyUp;
+    },
+    default: function() {
+        return _default;
+    }
+});
+const _interop_require_default = require("@swc/helpers/_/_interop_require_default");
+const _react = require("react");
+const _on = /*#__PURE__*/ _interop_require_default._(require("@koine/dom/on"));
+function useKeyUp(callback, deps = []) {
+    (0, _react.useEffect)(()=>{
+        const listener = (0, _on.default)(window, "keyup", (event)=>{
             // const { key } = event;
             // be sure we do not intercept keys combinations maybe used for other
             // actions like native browser navigation shortcuts
             // @see https://stackoverflow.com/a/37559790/1938970
-            if (!event.ctrlKey &&
-                !event.altKey &&
-                !event.shiftKey &&
-                !event.metaKey) {
+            if (!event.ctrlKey && !event.altKey && !event.shiftKey && !event.metaKey) {
                 callback(event);
             }
         });
         return listener;
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, tslib_1.__spreadArray([callback], deps, true));
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [
+        callback,
+        ...deps
+    ]);
 }
-exports.useKeyUp = useKeyUp;
-exports.default = useKeyUp;
+const _default = useKeyUp;

package/hooks/useKeyUp.mjs

@@ -1,23 +1,21 @@
-import { __spreadArray } from "tslib";
 import { useEffect } from "react";
 import on from "@koine/dom/on";
-export function useKeyUp(callback, deps) {
-    if (deps === void 0) { deps = []; }
-    useEffect(function () {
-        var listener = on(window, "keyup", function (event) {
+export function useKeyUp(callback, deps = []) {
+    useEffect(()=>{
+        const listener = on(window, "keyup", (event)=>{
             // const { key } = event;
             // be sure we do not intercept keys combinations maybe used for other
             // actions like native browser navigation shortcuts
             // @see https://stackoverflow.com/a/37559790/1938970
-            if (!event.ctrlKey &&
-                !event.altKey &&
-                !event.shiftKey &&
-                !event.metaKey) {
+            if (!event.ctrlKey && !event.altKey && !event.shiftKey && !event.metaKey) {
                 callback(event);
             }
         });
         return listener;
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, __spreadArray([callback], deps, true));
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [
+        callback,
+        ...deps
+    ]);
 }
 export default useKeyUp;

package/hooks/useMeasure.js

@@ -1,26 +1,46 @@
 "use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.useMeasure = void 0;
-var tslib_1 = require("tslib");
-var react_1 = require("react");
-var debounce_1 = tslib_1.__importDefault(require("@koine/utils/debounce"));
-var noop_1 = tslib_1.__importDefault(require("@koine/utils/noop"));
-var listenResizeDebounced_1 = tslib_1.__importDefault(require("@koine/dom/listenResizeDebounced"));
-var listenScrollDebounced_1 = tslib_1.__importDefault(require("@koine/dom/listenScrollDebounced"));
-var on_1 = tslib_1.__importDefault(require("@koine/dom/on"));
-var off_1 = tslib_1.__importDefault(require("@koine/dom/off"));
-var observer;
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+function _export(target, all) {
+    for(var name in all)Object.defineProperty(target, name, {
+        enumerable: true,
+        get: all[name]
+    });
+}
+_export(exports, {
+    useMeasure: function() {
+        return useMeasure;
+    },
+    default: function() {
+        return _default;
+    }
+});
+const _interop_require_default = require("@swc/helpers/_/_interop_require_default");
+const _react = require("react");
+const _debounce = /*#__PURE__*/ _interop_require_default._(require("@koine/utils/debounce"));
+const _noop = /*#__PURE__*/ _interop_require_default._(require("@koine/utils/noop"));
+const _listenResizeDebounced = /*#__PURE__*/ _interop_require_default._(require("@koine/dom/listenResizeDebounced"));
+const _listenScrollDebounced = /*#__PURE__*/ _interop_require_default._(require("@koine/dom/listenScrollDebounced"));
+const _off = /*#__PURE__*/ _interop_require_default._(require("@koine/dom/off"));
+const _on = /*#__PURE__*/ _interop_require_default._(require("@koine/dom/on"));
+let observer;
 // Returns a list of scroll offsets
 function findScrollContainers(element) {
-    var result = [];
-    if (!element || element === document.body)
-        return result;
-    var _a = window.getComputedStyle(element), overflow = _a.overflow, overflowX = _a.overflowX, overflowY = _a.overflowY;
-    if ([overflow, overflowX, overflowY].some(function (prop) { return prop === "auto" || prop === "scroll"; }))
-        result.push(element);
-    return tslib_1.__spreadArray(tslib_1.__spreadArray([], result, true), findScrollContainers(element.parentElement), true);
+    const result = [];
+    if (!element || element === document.body) return result;
+    const { overflow, overflowX, overflowY } = window.getComputedStyle(element);
+    if ([
+        overflow,
+        overflowX,
+        overflowY
+    ].some((prop)=>prop === "auto" || prop === "scroll")) result.push(element);
+    return [
+        ...result,
+        ...findScrollContainers(element.parentElement)
+    ];
 }
-var keys = [
+const keys = [
     "x",
     "y",
     "top",
@@ -28,19 +48,12 @@ var keys = [
     "left",
     "right",
     "width",
-    "height",
+    "height"
 ];
-var areBoundsEqual = function (a, b) {
-    return keys.every(function (key) { return a[key] === b[key]; });
-};
-/**
- * Use measure hook
- *
- * @borrows [pmndrs/react-use-measure](https://github.com/pmndrs/react-use-measure)
- */
+const areBoundsEqual = (a, b)=>keys.every((key)=>a[key] === b[key]);
 function useMeasure(options) {
-    var _a = (options || {}).scroll /* offsetSize = false */, scroll = _a === void 0 ? false : _a /* offsetSize = false */;
-    var _b = (0, react_1.useState)({
+    const { scroll = false } = options || {};
+    const [bounds, setBounds] = (0, _react.useState)({
         left: 0,
         top: 0,
         width: 0,
@@ -48,10 +61,10 @@ function useMeasure(options) {
         bottom: 0,
         right: 0,
         x: 0,
-        y: 0,
-    }), bounds = _b[0], setBounds = _b[1];
+        y: 0
+    });
     // keep all state in a ref
-    var state = (0, react_1.useRef)([
+    const state = (0, _react.useRef)([
         // element
         null,
         // scrollContainers
@@ -59,25 +72,20 @@ function useMeasure(options) {
         // resizeObserver
         null,
         // lastBounds
-        bounds,
+        bounds
     ]);
     // make sure to update state only as long as the component is truly mounted
-    var mounted = (0, react_1.useRef)(false);
-    (0, react_1.useEffect)(function () {
+    const mounted = (0, _react.useRef)(false);
+    (0, _react.useEffect)(()=>{
         mounted.current = true;
-        return function () { return void (mounted.current = false); };
+        return ()=>void (mounted.current = false);
     }, []);
     // memoize handlers, so event-listeners know when they should update
-    var _c = (0, react_1.useMemo)(function () {
-        var callback = function () {
-            var _args = [];
-            for (var _i = 0; _i < arguments.length; _i++) {
-                _args[_i] = arguments[_i];
-            }
-            var _a = state.current, element = _a[0], lastBounds = _a[3];
-            if (!element)
-                return;
-            var size = element.getBoundingClientRect();
+    const [forceRefresh /* resizeChange */ , , scrollChange] = (0, _react.useMemo)(()=>{
+        const callback = (..._args)=>{
+            const [element, , , lastBounds] = state.current;
+            if (!element) return;
+            const size = element.getBoundingClientRect();
             // if (element instanceof HTMLElement && offsetSize) {
             //   size.height = element.offsetHeight;
             //   size.width = element.offsetWidth;
@@ -88,16 +96,20 @@ function useMeasure(options) {
                 setBounds(size);
             }
         };
-        var debouncedCallback = (0, debounce_1.default)(callback);
-        return [callback, debouncedCallback, debouncedCallback];
-    }, [setBounds /* , offsetSize */]), forceRefresh = _c[0] /* resizeChange */, scrollChange = _c[2];
+        const debouncedCallback = (0, _debounce.default)(callback);
+        return [
+            callback,
+            debouncedCallback,
+            debouncedCallback
+        ];
+    }, [
+        setBounds /* , offsetSize */ 
+    ]);
     // cleanup current scroll-listeners / observers
     function removeListeners() {
-        var _a = state.current, scrollContainers = _a[1], resizeObserver = _a[2];
+        const [, scrollContainers, resizeObserver] = state.current;
         if (scrollContainers) {
-            scrollContainers.forEach(function (element) {
-                return (0, off_1.default)(element, "scroll", scrollChange);
-            });
+            scrollContainers.forEach((element)=>(0, _off.default)(element, "scroll", scrollChange));
             state.current[1] = null;
         }
         if (resizeObserver) {
@@ -107,27 +119,23 @@ function useMeasure(options) {
     }
     // add scroll-listeners / observers
     function addListeners() {
-        var _a = state.current, element = _a[0], scrollContainers = _a[1];
-        if (!element)
-            return;
+        const [element, scrollContainers] = state.current;
+        if (!element) return;
         if (!observer && ResizeObserver) {
             observer = new ResizeObserver(scrollChange);
             state.current[2] = observer;
             observer.observe(element);
             if (scroll && scrollContainers) {
-                scrollContainers.forEach(function (scrollContainer) {
-                    return (0, on_1.default)(scrollContainer, "scroll", scrollChange, {
+                scrollContainers.forEach((scrollContainer)=>(0, _on.default)(scrollContainer, "scroll", scrollChange, {
                         capture: true,
-                        passive: true,
-                    });
-                });
+                        passive: true
+                    }));
             }
         }
     }
     // the ref we expose to the user
-    var ref = function (node) {
-        if (!node || node === state.current[0])
-            return;
+    const ref = (node)=>{
+        if (!node || node === state.current[0]) return;
         removeListeners();
         state.current[0] = node;
         state.current[1] = findScrollContainers(node);
@@ -139,33 +147,43 @@ function useMeasure(options) {
     //   debugger;
     //   forceRefresh();
     // });
-    (0, react_1.useEffect)(function () {
+    (0, _react.useEffect)(()=>{
         if (scroll) {
-            var listener = (0, listenScrollDebounced_1.default)(0, forceRefresh, 100);
+            const listener = (0, _listenScrollDebounced.default)(0, forceRefresh, 100);
             return listener;
         }
-        return noop_1.default;
-    }, [scroll, forceRefresh]);
-    (0, react_1.useEffect)(function () {
+        return _noop.default;
+    }, [
+        scroll,
+        forceRefresh
+    ]);
+    (0, _react.useEffect)(()=>{
         // const listener = listenResizeDebounced(onWindowResize);
         // return listener;
-        var listener = (0, listenResizeDebounced_1.default)(0, forceRefresh, 100);
+        const listener = (0, _listenResizeDebounced.default)(0, forceRefresh, 100);
         return listener;
-    }, [forceRefresh]);
+    }, [
+        forceRefresh
+    ]);
     // respond to changes that are relevant for the listeners
-    (0, react_1.useEffect)(function () {
+    (0, _react.useEffect)(()=>{
         removeListeners();
         addListeners();
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [scroll /* , scrollChange, resizeChange */]);
-    (0, react_1.useEffect)(function () {
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [
+        scroll /* , scrollChange, resizeChange */ 
+    ]);
+    (0, _react.useEffect)(()=>{
         // operate on mount, @kuus on the original version there is no call on mount?
         forceRefresh();
         // remove all listeners when the components unmounts
         return removeListeners;
-        // eslint-disable-next-line react-hooks/exhaustive-deps
+    // eslint-disable-next-line react-hooks/exhaustive-deps
     }, []);
-    return [ref, bounds, forceRefresh];
+    return [
+        ref,
+        bounds,
+        forceRefresh
+    ];
 }
-exports.useMeasure = useMeasure;
-exports.default = useMeasure;
+const _default = useMeasure;