npm - @koine/react - Versions diffs - 2.0.0-beta.12 → 2.0.0-beta.15 - Mend

@@ -0,0 +1,38 @@
+import { useEffect, useRef, useState } 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 = {}));
+export function useSpinDelay(loading, delay, minDuration) {
+    if (delay === void 0) { delay = 500; }
+    if (minDuration === void 0) { minDuration = 200; }
+    var _a = useState(State.IDLE), state = _a[0], setState = _a[1];
+    var timeout = useRef();
+    useEffect(function () {
+        if (loading && state === State.IDLE) {
+            clearTimeout(timeout.current);
+            timeout.current = setTimeout(function () {
+                if (!loading) {
+                    return setState(State.IDLE);
+                }
+                timeout.current = setTimeout(function () {
+                    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(function () {
+        return function () { return clearTimeout(timeout.current); };
+    }, []);
+    return state === State.DISPLAY || state === State.EXPIRE;
+}
+export default useSpinDelay;

@@ -1,5 +1,2 @@
-/**
- * @see https://stackoverflow.com/a/51082563/9122820
- */
 export declare function useTraceUpdate(props: any): void;
 export default useTraceUpdate;

@@ -0,0 +1,18 @@
+import { useEffect, useRef } from "react";
+export function useTraceUpdate(props) {
+    var prev = useRef(props);
+    useEffect(function () {
+        var changedProps = Object.entries(props).reduce(function (ps, _a) {
+            var k = _a[0], v = _a[1];
+            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;
+    });
+}
+export default useTraceUpdate;

@@ -1,6 +1,3 @@
 import { useEffect } from "react";
-/**
- * @borrows [streamich/react-use](https://github.com/streamich/react-use/blob/master/src/useUpdateEffect.ts)
- */
 export declare const useUpdateEffect: typeof useEffect;
 export default useUpdateEffect;

@@ -0,0 +1,11 @@
+import { useEffect } from "react";
+import { useFirstMountState } from "./useFirstMountState.js";
+export var useUpdateEffect = function (effect, deps) {
+    var isFirstMount = useFirstMountState();
+    useEffect(function () {
+        if (!isFirstMount) {
+            return effect();
+        }
+    }, deps);
+};
+export default useUpdateEffect;

@@ -1,12 +1,3 @@
 import debounce from "@koine/utils/debounce";
-/**
- * # 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`
- */
 export declare function useWindowSize(wait?: Parameters<typeof debounce>[1], immediate?: Parameters<typeof debounce>[2]): readonly [number, number];
 export default useWindowSize;

@@ -0,0 +1,20 @@
+import { useEffect, useState } from "react";
+import listenResize from "@koine/dom/listenResize";
+import listenResizeDebounced from "@koine/dom/listenResizeDebounced";
+export function useWindowSize(wait, immediate) {
+    var _a = useState(0), width = _a[0], widthSet = _a[1];
+    var _b = useState(0), height = _b[0], heightSet = _b[1];
+    useEffect(function () {
+        function updateSize() {
+            widthSet(window.innerWidth);
+            heightSet(window.innerHeight);
+        }
+        var listener = wait
+            ? listenResizeDebounced(0, updateSize, wait, immediate)
+            : listenResize(updateSize);
+        updateSize();
+        return listener;
+    }, [wait, immediate]);
+    return [width, height];
+}
+export default useWindowSize;

@@ -2,37 +2,5 @@
 import { type LazyProps } from "framer-motion";
 export type MotionProviderFeatures = LazyProps["features"];
 export type MotionProviderProps = LazyProps & React.PropsWithChildren<{}>;
-/**
- * `<LazyMotion />` provider wrapper from `framer-motion`
- *
- * @see https://www.framer.com/docs/guide-reduce-bundle-size/
- *
- * About the difference between `lite` and `max`
- * @see https://www.framer.com/docs/guide-reduce-bundle-size/#available-features
- *
- * @example
- *
- * `lite` version:
- * ```tsx
- * import { MotionProvider } from "@koine/react/m";
- *
- * const features = () => import("@koine/react/m/lite").then((m) => m.default);
- *
- * <MotionProvider features={features}>
- *   <App />
- * </MotionProvider>
- * ```
- *
- * ### `max` version
- * ```tsx
- * import { MotionProvider } from "@koine/react/m";
- *
- * const features = () => import("@koine/react/m/max").then((m) => m.default);
- *
- * <MotionProvider features={features}>
- *   <App />
- * </MotionProvider>
- * ```
- */
 export declare const MotionProvider: ({ features, children }: MotionProviderProps) => import("react/jsx-runtime").JSX.Element;
 export default MotionProvider;

@@ -0,0 +1,7 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { LazyMotion } from "framer-motion";
+export var MotionProvider = function (_a) {
+    var features = _a.features, children = _a.children;
+    return _jsx(LazyMotion, { features: features, children: children });
+};
+export default MotionProvider;

@@ -1,6 +1 @@
-/**
- * @file
- *
- * In this file we only have exports related to `framer-motion`
- */
-export * from "./MotionProvider";
+export * from "./MotionProvider.js";

@koine/react 2.0.0-beta.12 → 2.0.0-beta.15