react-simplikit 0.0.2 → 0.0.4

package/esm/index.mjs

@@ -0,0 +1,711 @@
+// src/hooks/useImpressionRef/useImpressionRef.ts
+import { useRef as useRef4 } from "react";
+
+// src/hooks/useIntersectionObserver/useIntersectionObserver.ts
+import { useMemo } from "react";
+
+// src/hooks/usePreservedCallback/usePreservedCallback.ts
+import { useCallback, useEffect, useRef } from "react";
+function usePreservedCallback(callback) {
+  const callbackRef = useRef(callback);
+  useEffect(() => {
+    callbackRef.current = callback;
+  }, [callback]);
+  return useCallback((...args) => {
+    return callbackRef.current(...args);
+  }, []);
+}
+
+// src/hooks/useRefEffect/useRefEffect.ts
+import { useCallback as useCallback2, useRef as useRef2 } from "react";
+function useRefEffect(callback, deps) {
+  const preservedCallback = usePreservedCallback(callback);
+  const cleanupCallbackRef = useRef2(() => {
+  });
+  const effect = useCallback2(
+    (element) => {
+      cleanupCallbackRef.current();
+      cleanupCallbackRef.current = () => {
+      };
+      if (element == null) {
+        return;
+      }
+      const cleanup = preservedCallback(element);
+      if (typeof cleanup === "function") {
+        cleanupCallbackRef.current = cleanup;
+      }
+    },
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [preservedCallback, ...deps]
+  );
+  return effect;
+}
+
+// src/hooks/useIntersectionObserver/useIntersectionObserver.ts
+function useIntersectionObserver(callback, options) {
+  const preservedCallback = usePreservedCallback(callback);
+  const observer = useMemo(() => {
+    if (typeof IntersectionObserver === "undefined") {
+      return;
+    }
+    return new IntersectionObserver(([entry]) => {
+      preservedCallback(entry);
+    }, options);
+  }, [preservedCallback, options]);
+  return useRefEffect(
+    (element) => {
+      observer?.observe(element);
+      return () => {
+        observer?.unobserve(element);
+      };
+    },
+    [preservedCallback, options]
+  );
+}
+
+// src/hooks/useVisibilityEvent/useVisibilityEvent.ts
+import { useCallback as useCallback3, useEffect as useEffect2 } from "react";
+function useVisibilityEvent(callback, options = {}) {
+  const handleVisibilityChange = useCallback3(() => {
+    callback(document.visibilityState);
+  }, [callback]);
+  useEffect2(() => {
+    if (options?.immediate ?? false) {
+      handleVisibilityChange();
+    }
+    document.addEventListener("visibilitychange", handleVisibilityChange);
+    return () => {
+      document.removeEventListener("visibilitychange", handleVisibilityChange);
+    };
+  }, [handleVisibilityChange, options?.immediate]);
+}
+
+// src/hooks/useImpressionRef/useDebouncedCallback.ts
+import { useCallback as useCallback4, useEffect as useEffect3, useRef as useRef3 } from "react";
+
+// src/hooks/useDebounce/debounce.ts
+function debounce(func, debounceMs, { edges = ["leading", "trailing"] } = {}) {
+  let pendingThis = void 0;
+  let pendingArgs = null;
+  const leading = edges != null && edges.includes("leading");
+  const trailing = edges == null || edges.includes("trailing");
+  const invoke = () => {
+    if (pendingArgs !== null) {
+      func.apply(pendingThis, pendingArgs);
+      pendingThis = void 0;
+      pendingArgs = null;
+    }
+  };
+  const onTimerEnd = () => {
+    if (trailing) {
+      invoke();
+    }
+    cancel();
+  };
+  let timeoutId = null;
+  const schedule = () => {
+    if (timeoutId != null) {
+      clearTimeout(timeoutId);
+    }
+    timeoutId = setTimeout(() => {
+      timeoutId = null;
+      onTimerEnd();
+    }, debounceMs);
+  };
+  const cancelTimer = () => {
+    if (timeoutId !== null) {
+      clearTimeout(timeoutId);
+      timeoutId = null;
+    }
+  };
+  const cancel = () => {
+    cancelTimer();
+    pendingThis = void 0;
+    pendingArgs = null;
+  };
+  const debounced = function(...args) {
+    pendingThis = this;
+    pendingArgs = args;
+    const isFirstCall = timeoutId == null;
+    schedule();
+    if (leading && isFirstCall) {
+      invoke();
+    }
+  };
+  debounced.cancel = cancel;
+  return debounced;
+}
+
+// src/hooks/useImpressionRef/useDebouncedCallback.ts
+function useDebouncedCallback({
+  onChange,
+  timeThreshold
+}) {
+  const handleChange = usePreservedCallback(onChange);
+  const ref = useRef3({ value: false, clearPreviousDebounce: () => {
+  } });
+  useEffect3(() => {
+    const current = ref.current;
+    return () => {
+      current.clearPreviousDebounce();
+    };
+  }, []);
+  return useCallback4(
+    (nextValue) => {
+      if (nextValue === ref.current.value) {
+        return;
+      }
+      const debounced = debounce(() => {
+        handleChange(nextValue);
+        ref.current.value = nextValue;
+      }, timeThreshold);
+      ref.current.clearPreviousDebounce();
+      debounced();
+      ref.current.clearPreviousDebounce = debounced.cancel;
+    },
+    [handleChange, timeThreshold]
+  );
+}
+
+// src/hooks/useImpressionRef/useImpressionRef.ts
+function useImpressionRef({
+  onImpressionStart = () => {
+  },
+  onImpressionEnd = () => {
+  },
+  rootMargin,
+  areaThreshold = 0,
+  timeThreshold = 0
+}) {
+  const impressionStartHandler = usePreservedCallback(onImpressionStart);
+  const impressionEndHandler = usePreservedCallback(onImpressionEnd);
+  const isIntersectingRef = useRef4(false);
+  const impressionEventHandler = useDebouncedCallback({
+    timeThreshold,
+    onChange: (impressed) => {
+      (impressed ? impressionStartHandler : impressionEndHandler)();
+    }
+  });
+  useVisibilityEvent((documentVisible) => {
+    if (!isIntersectingRef.current) {
+      return;
+    }
+    impressionEventHandler(documentVisible === "visible");
+  });
+  return useIntersectionObserver(
+    (entry) => {
+      if (document.visibilityState === "hidden") {
+        return;
+      }
+      const currentRatio = entry.intersectionRatio;
+      const isIntersecting = areaThreshold === 0 ? entry.isIntersecting : currentRatio >= areaThreshold;
+      isIntersectingRef.current = isIntersecting;
+      impressionEventHandler(isIntersecting);
+    },
+    { rootMargin, threshold: areaThreshold }
+  );
+}
+
+// src/utils/mergeRefs/mergeRefs.ts
+function mergeRefs(...refs) {
+  return (value) => {
+    for (const ref of refs) {
+      if (ref == null) {
+        continue;
+      }
+      if (typeof ref === "function") {
+        ref(value);
+        continue;
+      }
+      ref.current = value;
+    }
+  };
+}
+
+// src/components/ImpressionArea/ImpressionArea.tsx
+import { jsx } from "react/jsx-runtime";
+function ImpressionArea({
+  as,
+  rootMargin,
+  areaThreshold,
+  timeThreshold,
+  onImpressionStart,
+  onImpressionEnd,
+  ref,
+  ...props
+}) {
+  const Component = as ?? "div";
+  const impressionRef = useImpressionRef({
+    onImpressionStart,
+    onImpressionEnd,
+    areaThreshold,
+    timeThreshold,
+    rootMargin
+  });
+  return /* @__PURE__ */ jsx(Component, { ref: mergeRefs(ref, impressionRef), ...props });
+}
+
+// src/components/Separated/Separated.tsx
+import { Children, Fragment, isValidElement } from "react";
+import { Fragment as Fragment2, jsx as jsx2, jsxs } from "react/jsx-runtime";
+function Separated({ children, with: separator }) {
+  const childrenArray = Children.toArray(children).filter(isValidElement);
+  return /* @__PURE__ */ jsx2(Fragment2, { children: childrenArray.map((child, i, { length }) => /* @__PURE__ */ jsxs(Fragment, { children: [
+    child,
+    i + 1 !== length ? separator : null
+  ] }, i)) });
+}
+
+// src/components/SwitchCase/SwitchCase.tsx
+function SwitchCase({ value, caseBy, defaultComponent = () => null }) {
+  const stringifiedValue = String(value);
+  return (caseBy[stringifiedValue] ?? defaultComponent)();
+}
+
+// src/hooks/useAsyncEffect/useAsyncEffect.ts
+import { useEffect as useEffect4 } from "react";
+function useAsyncEffect(effect, deps) {
+  useEffect4(() => {
+    let cleanup;
+    effect().then((result) => {
+      cleanup = result;
+    });
+    return () => {
+      cleanup?.();
+    };
+  }, deps);
+}
+
+// src/hooks/useBooleanState/useBooleanState.ts
+import { useCallback as useCallback5, useState } from "react";
+var useBooleanState = (defaultValue = false) => {
+  const [bool, setBool] = useState(defaultValue);
+  const setTrue = useCallback5(() => {
+    setBool(true);
+  }, []);
+  const setFalse = useCallback5(() => {
+    setBool(false);
+  }, []);
+  const toggle2 = useCallback5(() => {
+    setBool((b) => !b);
+  }, []);
+  return [bool, setTrue, setFalse, toggle2];
+};
+
+// src/hooks/useCallbackOncePerRender/useCallbackOncePerRender.ts
+import { useEffect as useEffect5, useRef as useRef5 } from "react";
+function useCallbackOncePerRender(callback, deps) {
+  const hasFired = useRef5(false);
+  useEffect5(() => {
+    hasFired.current = false;
+  }, deps);
+  return usePreservedCallback((...args) => {
+    if (hasFired.current) {
+      return;
+    }
+    callback(...args);
+    hasFired.current = true;
+  });
+}
+
+// src/hooks/useDebounce/useDebounce.ts
+import { useEffect as useEffect6 } from "react";
+import { useMemo as useMemo2 } from "react";
+function useDebounce(callback, wait, options = {}) {
+  const preservedCallback = usePreservedCallback(callback);
+  const { leading = false, trailing = true } = options;
+  const edges = useMemo2(() => {
+    const _edges = [];
+    if (leading) {
+      _edges.push("leading");
+    }
+    if (trailing) {
+      _edges.push("trailing");
+    }
+    return _edges;
+  }, [leading, trailing]);
+  const debounced = useMemo2(() => {
+    return debounce(preservedCallback, wait, { edges });
+  }, [preservedCallback, wait, edges]);
+  useEffect6(() => {
+    return () => {
+      debounced.cancel();
+    };
+  }, [debounced]);
+  return debounced;
+}
+
+// src/hooks/useInputState/useInputState.ts
+import { useCallback as useCallback6, useState as useState2 } from "react";
+function useInputState(initialValue = "", transformValue = echo) {
+  const [value, setValue] = useState2(initialValue);
+  const handleValueChange = useCallback6(
+    ({ target: { value: value2 } }) => {
+      setValue(transformValue(value2));
+    },
+    [transformValue]
+  );
+  return [value, handleValueChange];
+}
+function echo(v) {
+  return v;
+}
+
+// src/hooks/useInterval/useInterval.ts
+import { useEffect as useEffect7 } from "react";
+function useInterval(callback, options) {
+  const delay = typeof options === "number" ? options : options.delay;
+  const immediate = typeof options === "number" ? false : options.immediate;
+  const enabled = typeof options === "number" ? true : options.enabled ?? true;
+  const preservedCallback = usePreservedCallback(callback);
+  useEffect7(() => {
+    if (immediate === true && enabled) {
+      preservedCallback();
+    }
+  }, [immediate, preservedCallback, enabled]);
+  useEffect7(() => {
+    if (!enabled) {
+      return;
+    }
+    const id = window.setInterval(preservedCallback, delay);
+    return () => window.clearInterval(id);
+  }, [delay, preservedCallback, enabled]);
+}
+
+// src/hooks/useLoading/useLoading.ts
+import { useCallback as useCallback7, useEffect as useEffect8, useMemo as useMemo3, useRef as useRef6, useState as useState3 } from "react";
+function useLoading() {
+  const [loading, setLoading] = useState3(false);
+  const ref = useIsMountedRef();
+  const startTransition = useCallback7(
+    async (promise) => {
+      try {
+        setLoading(true);
+        const data = await promise;
+        return data;
+      } finally {
+        if (ref.isMounted) {
+          setLoading(false);
+        }
+      }
+    },
+    [ref.isMounted]
+  );
+  return useMemo3(() => [loading, startTransition], [loading, startTransition]);
+}
+function useIsMountedRef() {
+  const ref = useRef6({ isMounted: true }).current;
+  useEffect8(() => {
+    ref.isMounted = true;
+    return () => {
+      ref.isMounted = false;
+    };
+  }, [ref]);
+  return ref;
+}
+
+// src/hooks/useOutsideClickEffect/useOutsideClickEffect.ts
+import { useEffect as useEffect9, useRef as useRef7 } from "react";
+function useOutsideClickEffect(container, callback) {
+  const containers = useRef7([]);
+  const handleDocumentClick = usePreservedCallback(({ target }) => {
+    if (target === null) {
+      return;
+    }
+    if (containers.current.length === 0) {
+      return;
+    }
+    if (containers.current.some((x) => x.contains(target))) {
+      return;
+    }
+    callback();
+  });
+  useEffect9(() => {
+    containers.current = [container].flat(1).filter((item) => item != null);
+  }, [container]);
+  useEffect9(() => {
+    document.addEventListener("click", handleDocumentClick);
+    return () => {
+      document.removeEventListener("click", handleDocumentClick);
+    };
+  }, [handleDocumentClick]);
+}
+
+// src/hooks/usePreservedReference/usePreservedReference.ts
+import { useMemo as useMemo4, useRef as useRef8 } from "react";
+function usePreservedReference(value, areValuesEqual = areDeeplyEqual) {
+  const ref = useRef8(value);
+  return useMemo4(() => {
+    if (!areValuesEqual(ref.current, value)) {
+      ref.current = value;
+    }
+    return ref.current;
+  }, [areValuesEqual, value]);
+}
+function areDeeplyEqual(x, y) {
+  return JSON.stringify(x) === JSON.stringify(y);
+}
+
+// src/hooks/usePrevious/usePrevious.ts
+import { useEffect as useEffect10, useRef as useRef9 } from "react";
+var strictEquals = (prev, next) => prev === next;
+function usePrevious(state, compare = strictEquals) {
+  const prevRef = useRef9(state);
+  const currentRef = useRef9(state);
+  const isFirstRender = useRef9(true);
+  useEffect10(() => {
+    isFirstRender.current = false;
+  }, []);
+  if (isFirstRender.current || compare(currentRef.current, state)) {
+    return prevRef.current;
+  }
+  prevRef.current = currentRef.current;
+  currentRef.current = state;
+  return prevRef.current;
+}
+
+// src/hooks/useStorageState/useStorageState.ts
+import { useCallback as useCallback8, useRef as useRef10, useSyncExternalStore } from "react";
+
+// src/hooks/useStorageState/storage.ts
+var MemoStorage = class {
+  storage = /* @__PURE__ */ new Map();
+  get(key) {
+    return this.storage.get(key) ?? null;
+  }
+  set(key, value) {
+    this.storage.set(key, value);
+  }
+  remove(key) {
+    this.storage.delete(key);
+  }
+  clear() {
+    this.storage.clear();
+  }
+};
+var LocalStorage = class {
+  static canUse() {
+    const TEST_KEY = generateTestKey();
+    try {
+      localStorage.setItem(TEST_KEY, "test");
+      localStorage.removeItem(TEST_KEY);
+      return true;
+    } catch {
+      return false;
+    }
+  }
+  get(key) {
+    return localStorage.getItem(key);
+  }
+  set(key, value) {
+    localStorage.setItem(key, value);
+  }
+  remove(key) {
+    localStorage.removeItem(key);
+  }
+  clear() {
+    localStorage.clear();
+  }
+};
+var SessionStorage = class {
+  static canUse() {
+    const TEST_KEY = generateTestKey();
+    try {
+      sessionStorage.setItem(TEST_KEY, "test");
+      sessionStorage.removeItem(TEST_KEY);
+      return true;
+    } catch {
+      return false;
+    }
+  }
+  get(key) {
+    return sessionStorage.getItem(key);
+  }
+  set(key, value) {
+    sessionStorage.setItem(key, value);
+  }
+  remove(key) {
+    sessionStorage.removeItem(key);
+  }
+  clear() {
+    sessionStorage.clear();
+  }
+};
+function generateTestKey() {
+  return new Array(4).fill(null).map(() => Math.random().toString(36).slice(2)).join("");
+}
+function generateStorage() {
+  if (LocalStorage.canUse()) {
+    return new LocalStorage();
+  }
+  return new MemoStorage();
+}
+function generateSessionStorage() {
+  if (SessionStorage.canUse()) {
+    return new SessionStorage();
+  }
+  return new MemoStorage();
+}
+var safeLocalStorage = generateStorage();
+var safeSessionStorage = generateSessionStorage();
+
+// src/hooks/useStorageState/useStorageState.ts
+var listeners = /* @__PURE__ */ new Set();
+var emitListeners = () => {
+  listeners.forEach((listener) => listener());
+};
+function useStorageState(key, { storage = safeLocalStorage, defaultValue } = {}) {
+  const cache = useRef10({
+    data: null,
+    parsed: defaultValue
+  });
+  const getSnapshot = useCallback8(() => {
+    const data = storage.get(key);
+    if (data !== cache.current.data) {
+      try {
+        cache.current.parsed = data != null ? JSON.parse(data) : defaultValue;
+      } catch {
+        cache.current.parsed = defaultValue;
+      }
+      cache.current.data = data;
+    }
+    return cache.current.parsed;
+  }, [defaultValue, key, storage]);
+  const storageState = useSyncExternalStore(
+    (onStoreChange) => {
+      listeners.add(onStoreChange);
+      const handler = (event) => {
+        if (event.key === key) {
+          onStoreChange();
+        }
+      };
+      window.addEventListener("storage", handler);
+      return () => {
+        listeners.delete(onStoreChange);
+        window.removeEventListener("storage", handler);
+      };
+    },
+    () => getSnapshot(),
+    () => defaultValue
+  );
+  const setStorageState = useCallback8(
+    (value) => {
+      const nextValue = typeof value === "function" ? value(getSnapshot()) : value;
+      if (nextValue == null) {
+        storage.remove(key);
+      } else {
+        storage.set(key, JSON.stringify(nextValue));
+      }
+      emitListeners();
+    },
+    [getSnapshot, key, storage]
+  );
+  return [storageState, setStorageState];
+}
+
+// src/hooks/useThrottle/useThrottle.ts
+import { useEffect as useEffect11, useMemo as useMemo5 } from "react";
+
+// src/hooks/useThrottle/throttle.ts
+function throttle(func, throttleMs, { edges = ["leading", "trailing"] } = {}) {
+  let pendingAt = null;
+  const debounced = debounce(func, throttleMs, { edges });
+  const throttled = function(...args) {
+    if (pendingAt == null) {
+      pendingAt = Date.now();
+    } else {
+      if (Date.now() - pendingAt >= throttleMs) {
+        pendingAt = Date.now();
+        debounced.cancel();
+        debounced(...args);
+      }
+    }
+    debounced(...args);
+  };
+  throttled.cancel = debounced.cancel;
+  return throttled;
+}
+
+// src/hooks/useThrottle/useThrottle.ts
+function useThrottle(callback, wait, options) {
+  const preservedCallback = usePreservedCallback(callback);
+  const preservedOptions = usePreservedReference(options ?? {});
+  const throttledCallback = useMemo5(() => {
+    return throttle(preservedCallback, wait, preservedOptions);
+  }, [preservedOptions, preservedCallback, wait]);
+  useEffect11(() => {
+    return () => {
+      throttledCallback.cancel();
+    };
+  }, [throttledCallback]);
+  return throttledCallback;
+}
+
+// src/hooks/useTimeout/useTimeout.ts
+import { useEffect as useEffect12 } from "react";
+function useTimeout(callback, delay = 0) {
+  const preservedCallback = usePreservedCallback(callback);
+  useEffect12(() => {
+    const timeoutId = window.setTimeout(preservedCallback, delay);
+    return () => window.clearTimeout(timeoutId);
+  }, [delay, preservedCallback]);
+}
+
+// src/hooks/useToggle/useToggle.ts
+import { useReducer } from "react";
+function useToggle(initialValue = false) {
+  return useReducer(toggle, initialValue);
+}
+var toggle = (state) => !state;
+
+// src/utils/buildContext/buildContext.tsx
+import { createContext, useContext, useMemo as useMemo6 } from "react";
+import { jsx as jsx3 } from "react/jsx-runtime";
+function buildContext(contextName, defaultContextValues) {
+  const Context = createContext(defaultContextValues ?? void 0);
+  function Provider({ children, ...contextValues }) {
+    const value = useMemo6(
+      () => Object.keys(contextValues).length > 0 ? contextValues : null,
+      // eslint-disable-next-line react-hooks/exhaustive-deps
+      [...Object.values(contextValues)]
+    );
+    return /* @__PURE__ */ jsx3(Context.Provider, { value, children });
+  }
+  function useInnerContext() {
+    const context = useContext(Context);
+    if (context != null) {
+      return context;
+    }
+    if (defaultContextValues != null) {
+      return defaultContextValues;
+    }
+    throw new Error(`\`${contextName}Context\` must be used within \`${contextName}Provider\``);
+  }
+  return [Provider, useInnerContext];
+}
+export {
+  ImpressionArea,
+  Separated,
+  SwitchCase,
+  buildContext,
+  mergeRefs,
+  useAsyncEffect,
+  useBooleanState,
+  useCallbackOncePerRender,
+  useDebounce,
+  useImpressionRef,
+  useInputState,
+  useIntersectionObserver,
+  useInterval,
+  useLoading,
+  useOutsideClickEffect,
+  usePreservedCallback,
+  usePreservedReference,
+  usePrevious,
+  useRefEffect,
+  useStorageState,
+  useThrottle,
+  useTimeout,
+  useToggle,
+  useVisibilityEvent
+};