@koine/react 2.0.0-beta.80 → 2.0.0-beta.83

package/useSpinDelay.esm.js

@@ -1,38 +1,16 @@
 import { useState, useRef, useEffect } from 'react';
 
-var State;
-(function (State) {
-    State[State["IDLE"] = 0] = "IDLE";
-    State[State["DELAY"] = 1] = "DELAY";
-    State[State["DISPLAY"] = 2] = "DISPLAY";
-    State[State["EXPIRE"] = 3] = "EXPIRE";
-})(State || (State = {}));
-let useSpinDelay = (loading, delay = 500, minDuration = 200) => {
-    const [state, setState] = useState(State.IDLE);
-    const timeout = useRef();
-    useEffect(() => {
-        if (loading && state === State.IDLE) {
-            clearTimeout(timeout.current);
-            timeout.current = setTimeout(() => {
-                if (!loading) {
-                    return setState(State.IDLE);
-                }
-                timeout.current = setTimeout(() => {
-                    setState(State.EXPIRE);
-                }, minDuration);
-                setState(State.DISPLAY);
-            }, delay);
-            setState(State.DELAY);
-        }
-        if (!loading && state !== State.DISPLAY) {
-            clearTimeout(timeout.current);
-            setState(State.IDLE);
-        }
-    }, [loading, state, delay, minDuration]);
-    useEffect(() => {
-        return () => clearTimeout(timeout.current);
-    }, []);
-    return state === State.DISPLAY || state === State.EXPIRE;
-};
+/**
+ * Wraps your booleans only returning true after the `delay`, and for a minimum
+ * time of `minDuration`. This way you're sure that you don't show unnecessary
+ * or very short living spinners.
+ *
+ * @borrows [smeijer/spin-delay](https://github.com/smeijer/spin-delay)
+ *
+ * - Smaller footprint and options object as argument
+ *
+ * @param delay [500]
+ * @param minDuration [200]
+ */let useSpinDelay=(u,c=500,i=200)=>{let[n,o]=useState(0),l=useRef();return useEffect(()=>{u&&0===n&&(clearTimeout(l.current),l.current=setTimeout(()=>{if(!u)return o(0);l.current=setTimeout(()=>{o(3);},i),o(2);},c),o(1)),u||2===n||(clearTimeout(l.current),o(0));},[u,n,c,i]),useEffect(()=>()=>clearTimeout(l.current),[]),2===n||3===n};
 
 export { useSpinDelay as default, useSpinDelay };

package/useTraceUpdate.cjs.js

@@ -4,21 +4,10 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var react = require('react');
 
-let useTraceUpdate = (props) => {
-    const prev = react.useRef(props);
-    react.useEffect(() => {
-        const changedProps = Object.entries(props).reduce((ps, [k, v]) => {
-            if (prev.current[k] !== v) {
-                ps[k] = [prev.current[k], v];
-            }
-            return ps;
-        }, {});
-        if (Object.keys(changedProps).length > 0) {
-            console.info("[@koine/react:useTraceUpdate] changed props:", changedProps);
-        }
-        prev.current = props;
-    });
-};
+/**
+ * @see https://stackoverflow.com/a/51082563/9122820
+ */let useTraceUpdate=r=>{let c=react.useRef(r);react.useEffect(()=>{let e=Object.entries(r).reduce((e,[t,r])=>(c.current[t]!==r&&// @ts-expect-error Does not matter here...
+    (e[t]=[c.current[t],r]),e),{});Object.keys(e).length>0&&console.info("[@koine/react:useTraceUpdate] changed props:",e),c.current=r;});};
 
 exports["default"] = useTraceUpdate;
 exports.useTraceUpdate = useTraceUpdate;

package/useTraceUpdate.esm.js

@@ -1,19 +1,8 @@
 import { useRef, useEffect } from 'react';
 
-let useTraceUpdate = (props) => {
-    const prev = useRef(props);
-    useEffect(() => {
-        const changedProps = Object.entries(props).reduce((ps, [k, v]) => {
-            if (prev.current[k] !== v) {
-                ps[k] = [prev.current[k], v];
-            }
-            return ps;
-        }, {});
-        if (Object.keys(changedProps).length > 0) {
-            console.info("[@koine/react:useTraceUpdate] changed props:", changedProps);
-        }
-        prev.current = props;
-    });
-};
+/**
+ * @see https://stackoverflow.com/a/51082563/9122820
+ */let useTraceUpdate=r=>{let c=useRef(r);useEffect(()=>{let e=Object.entries(r).reduce((e,[t,r])=>(c.current[t]!==r&&// @ts-expect-error Does not matter here...
+    (e[t]=[c.current[t],r]),e),{});Object.keys(e).length>0&&console.info("[@koine/react:useTraceUpdate] changed props:",e),c.current=r;});};
 
 export { useTraceUpdate as default, useTraceUpdate };

package/useUpdateEffect.cjs.js

@@ -5,14 +5,10 @@ Object.defineProperty(exports, '__esModule', { value: true });
 var react = require('react');
 var useFirstMountState = require('./useFirstMountState.cjs.js');
 
-let useUpdateEffect = (effect, deps) => {
-    const isFirstMount = useFirstMountState.useFirstMountState();
-    react.useEffect(() => {
-        if (!isFirstMount) {
-            return effect();
-        }
-    }, deps);
-};
+/**
+ * @borrows [streamich/react-use](https://github.com/streamich/react-use/blob/master/src/useUpdateEffect.ts)
+ */let useUpdateEffect=(r,f)=>{let o=useFirstMountState.useFirstMountState();react.useEffect(()=>{if(!o)return r()},// eslint-disable-next-line react-hooks/exhaustive-deps
+f);};
 
 exports["default"] = useUpdateEffect;
 exports.useUpdateEffect = useUpdateEffect;

package/useUpdateEffect.esm.js

@@ -1,13 +1,9 @@
 import { useEffect } from 'react';
 import { useFirstMountState } from './useFirstMountState.esm.js';
 
-let useUpdateEffect = (effect, deps) => {
-    const isFirstMount = useFirstMountState();
-    useEffect(() => {
-        if (!isFirstMount) {
-            return effect();
-        }
-    }, deps);
-};
+/**
+ * @borrows [streamich/react-use](https://github.com/streamich/react-use/blob/master/src/useUpdateEffect.ts)
+ */let useUpdateEffect=(r,f)=>{let o=useFirstMountState();useEffect(()=>{if(!o)return r()},// eslint-disable-next-line react-hooks/exhaustive-deps
+f);};
 
 export { useUpdateEffect as default, useUpdateEffect };

package/useWindowSize.cjs.js

@@ -3,25 +3,17 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var react = require('react');
-require('@koine/utils');
 var dom = require('@koine/dom');
 
-let useWindowSize = (wait, immediate) => {
-    const [width, widthSet] = react.useState(0);
-    const [height, heightSet] = react.useState(0);
-    react.useEffect(() => {
-        const updateSize = () => {
-            widthSet(window.innerWidth);
-            heightSet(window.innerHeight);
-        };
-        const listener = wait
-            ? dom.listenResizeDebounced(0, updateSize, wait, immediate)
-            : dom.listenResize(updateSize);
-        updateSize();
-        return listener;
-    }, [wait, immediate]);
-    return [width, height];
-};
+/**
+ * # Use `window` size
+ *
+ * @param args Optionally pass {@link debounce} arguments (`wait` and `immediate`)
+ *
+ * @returns An array with:
+ * 1) _width_: using `window.innerWidth`
+ * 2) _height_: using `window.innerHeight`
+ */let useWindowSize=(o,n)=>{let[d,w]=react.useState(0),[m,u]=react.useState(0);return react.useEffect(()=>{let e=()=>{w(window.innerWidth),u(window.innerHeight);},i=o?dom.listenResizeDebounced(0,e,o,n):dom.listenResize(e);return e(),i},[o,n]),[d,m]};
 
 exports["default"] = useWindowSize;
 exports.useWindowSize = useWindowSize;

package/useWindowSize.esm.js

@@ -1,22 +1,14 @@
 import { useState, useEffect } from 'react';
-import '@koine/utils';
 import { listenResizeDebounced, listenResize } from '@koine/dom';
 
-let useWindowSize = (wait, immediate) => {
-    const [width, widthSet] = useState(0);
-    const [height, heightSet] = useState(0);
-    useEffect(() => {
-        const updateSize = () => {
-            widthSet(window.innerWidth);
-            heightSet(window.innerHeight);
-        };
-        const listener = wait
-            ? listenResizeDebounced(0, updateSize, wait, immediate)
-            : listenResize(updateSize);
-        updateSize();
-        return listener;
-    }, [wait, immediate]);
-    return [width, height];
-};
+/**
+ * # Use `window` size
+ *
+ * @param args Optionally pass {@link debounce} arguments (`wait` and `immediate`)
+ *
+ * @returns An array with:
+ * 1) _width_: using `window.innerWidth`
+ * 2) _height_: using `window.innerHeight`
+ */let useWindowSize=(o,n)=>{let[d,w]=useState(0),[m,u]=useState(0);return useEffect(()=>{let e=()=>{w(window.innerWidth),u(window.innerHeight);},i=o?listenResizeDebounced(0,e,o,n):listenResize(e);return e(),i},[o,n]),[d,m]};
 
 export { useWindowSize as default, useWindowSize };