react-simplikit 0.0.0-canary-20260210142111

package/README.md

@@ -0,0 +1,133 @@
+# react-simplikit
+
+[![npm version](https://img.shields.io/npm/v/react-simplikit.svg)](https://www.npmjs.com/package/react-simplikit)
+[![MIT License](https://img.shields.io/badge/license-MIT-blue.svg)](https://github.com/toss/react-simplikit/blob/main/LICENSE)
+[![codecov](https://codecov.io/gh/toss/react-simplikit/graph/badge.svg?token=RHVOZ3J3TU)](https://codecov.io/gh/toss/react-simplikit)
+
+English | [한국어](./README-ko_kr.md)
+
+A lightweight, zero-dependency React utilities library providing hooks, components, and utilities.
+
+## Features
+
+- **Zero dependencies** - Extremely lightweight
+- **100% TypeScript** - Full type safety
+- **100% Test coverage** - Reliable and stable
+- **SSR-safe** - Works with Next.js and other SSR frameworks
+- **Tree-shakeable** - Only bundle what you use
+
+## Library Direction
+
+**react-simplikit is now maintained as a Universal Hook Library providing only pure state/logic hooks.**
+
+We are repositioning react-simplikit to focus exclusively on **platform-independent hooks** that work seamlessly across web and mobile (React Native, etc.).
+
+### What's Maintained: Pure State/Logic Hooks
+
+Hooks that don't depend on specific platform APIs will continue to be actively maintained:
+
+- State management hooks like `useToggle`, `useBooleanState`, `useCounter`
+- Lifecycle hooks like `usePrevious`, `useMount`
+- Utility hooks like `useDebounce`, `useThrottle`
+- **Backward compatibility (BC) is preserved** for these existing pure logic hooks
+
+### What's Deprecated: Browser/Platform-Dependent Hooks
+
+The following hooks that strongly depend on browser-specific APIs are now deprecated:
+
+- `useGeolocation` - depends on `navigator.geolocation`
+- `useStorageState` - depends on `localStorage`/`sessionStorage`
+- `useIntersectionObserver` - depends on `IntersectionObserver` API
+- `useImpressionRef` - depends on `IntersectionObserver` + Visibility API
+- `useDoubleClick`, `useLongPress` - depend on DOM events + `window.setTimeout`
+- `useOutsideClickEffect` - depends on DOM events + `document`
+- `useVisibilityEvent` - depends on `document.visibilityState`
+
+These hooks:
+
+- Will not receive new features or major enhancements
+- Are marked as `@deprecated` in documentation
+- May be removed in future major versions
+
+### Package Status
+
+- react-simplikit will **not be archived**
+- Pure state/logic hooks will continue to be maintained
+- Critical bug fixes and minimal maintenance will continue
+- No new browser/platform-dependent hooks will be added
+
+## Installation
+
+```bash
+npm install react-simplikit
+# or
+yarn add react-simplikit
+# or
+pnpm add react-simplikit
+```
+
+## Quick Start
+
+```tsx
+import { useState, useEffect } from 'react';
+import { useDebounce } from 'react-simplikit';
+
+function SearchInput() {
+  const [query, setQuery] = useState('');
+  const debouncedQuery = useDebounce(query, 300);
+
+  useEffect(() => {
+    if (debouncedQuery) {
+      searchAPI(debouncedQuery);
+    }
+  }, [debouncedQuery]);
+
+  return <input value={query} onChange={e => setQuery(e.target.value)} />;
+}
+```
+
+## What's Included
+
+### Hooks
+
+| Hook                      | Description                                         |
+| ------------------------- | --------------------------------------------------- |
+| `useBooleanState`         | Manage boolean state with handlers                  |
+| `useDebounce`             | Debounce a value                                    |
+| `useDebouncedCallback`    | Debounce a callback function                        |
+| `useInterval`             | Set up intervals declaratively                      |
+| `useIntersectionObserver` | Observe element visibility                          |
+| `usePreservedCallback`    | Stable callback reference                           |
+| `usePreservedReference`   | Stable object reference                             |
+| ...                       | [See all hooks](https://react-simplikit.slash.page) |
+
+### Components
+
+| Component        | Description                       |
+| ---------------- | --------------------------------- |
+| `SwitchCase`     | Declarative switch-case rendering |
+| `Separated`      | Render items with separators      |
+| `ImpressionArea` | Track element impressions         |
+
+### Utilities
+
+| Utility  | Description       |
+| -------- | ----------------- |
+| `assert` | Runtime assertion |
+| `noop`   | Empty function    |
+
+## Documentation
+
+Visit [react-simplikit.slash.page](https://react-simplikit.slash.page) for full documentation.
+
+## Related Packages
+
+- [@react-simplikit/mobile](https://www.npmjs.com/package/@react-simplikit/mobile) - Mobile web utilities
+
+## Contributing
+
+We welcome contributions! Please see our [Contributing Guide](https://github.com/toss/react-simplikit/blob/main/CONTRIBUTING.md).
+
+## License
+
+MIT © Viva Republica, Inc. See [LICENSE](https://github.com/toss/react-simplikit/blob/main/LICENSE) for details.

package/dist/components/ImpressionArea/index.cjs

@@ -0,0 +1,292 @@
+"use client";
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/components/ImpressionArea/index.ts
+var ImpressionArea_exports = {};
+__export(ImpressionArea_exports, {
+  ImpressionArea: () => ImpressionArea
+});
+module.exports = __toCommonJS(ImpressionArea_exports);
+
+// src/components/ImpressionArea/ImpressionArea.tsx
+var import_react7 = require("react");
+
+// src/hooks/useImpressionRef/useImpressionRef.ts
+var import_react6 = require("react");
+
+// src/hooks/useDebouncedCallback/useDebouncedCallback.ts
+var import_react2 = require("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/usePreservedCallback/usePreservedCallback.ts
+var import_react = require("react");
+function usePreservedCallback(callback) {
+  const callbackRef = (0, import_react.useRef)(callback);
+  (0, import_react.useEffect)(() => {
+    callbackRef.current = callback;
+  }, [callback]);
+  return (0, import_react.useCallback)((...args) => {
+    return callbackRef.current(...args);
+  }, []);
+}
+
+// src/hooks/useDebouncedCallback/useDebouncedCallback.ts
+function useDebouncedCallback({
+  onChange,
+  timeThreshold,
+  leading = false,
+  trailing = true
+}) {
+  const handleChange = usePreservedCallback(onChange);
+  const ref = (0, import_react2.useRef)({ value: false, clearPreviousDebounce: () => {
+  } });
+  (0, import_react2.useEffect)(() => {
+    const current = ref.current;
+    return () => {
+      current.clearPreviousDebounce();
+    };
+  }, []);
+  const edges = (0, import_react2.useMemo)(() => {
+    const _edges = [];
+    if (leading) {
+      _edges.push("leading");
+    }
+    if (trailing) {
+      _edges.push("trailing");
+    }
+    return _edges;
+  }, [leading, trailing]);
+  return (0, import_react2.useCallback)(
+    (nextValue) => {
+      if (nextValue === ref.current.value) {
+        return;
+      }
+      const debounced = debounce(
+        () => {
+          handleChange(nextValue);
+          ref.current.value = nextValue;
+        },
+        timeThreshold,
+        { edges }
+      );
+      ref.current.clearPreviousDebounce();
+      debounced();
+      ref.current.clearPreviousDebounce = debounced.cancel;
+    },
+    [handleChange, timeThreshold, edges]
+  );
+}
+
+// src/hooks/useIntersectionObserver/useIntersectionObserver.ts
+var import_react4 = require("react");
+
+// src/hooks/useRefEffect/useRefEffect.ts
+var import_react3 = require("react");
+function useRefEffect(callback, deps) {
+  const preservedCallback = usePreservedCallback(callback);
+  const cleanupCallbackRef = (0, import_react3.useRef)(() => {
+  });
+  const effect = (0, import_react3.useCallback)(
+    (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 = (0, import_react4.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
+var import_react5 = require("react");
+function useVisibilityEvent(callback, options = {}) {
+  const handleVisibilityChange = (0, import_react5.useCallback)(() => {
+    callback(document.visibilityState);
+  }, [callback]);
+  (0, import_react5.useEffect)(() => {
+    if (options?.immediate ?? false) {
+      handleVisibilityChange();
+    }
+    document.addEventListener("visibilitychange", handleVisibilityChange);
+    return () => {
+      document.removeEventListener("visibilitychange", handleVisibilityChange);
+    };
+  }, [handleVisibilityChange, options?.immediate]);
+}
+
+// src/hooks/useImpressionRef/useImpressionRef.ts
+function useImpressionRef({
+  onImpressionStart = () => {
+  },
+  onImpressionEnd = () => {
+  },
+  rootMargin,
+  areaThreshold = 0,
+  timeThreshold = 0
+}) {
+  const impressionStartHandler = usePreservedCallback(onImpressionStart);
+  const impressionEndHandler = usePreservedCallback(onImpressionEnd);
+  const isIntersectingRef = (0, import_react6.useRef)(false);
+  const impressionEventHandler = useDebouncedCallback({
+    timeThreshold,
+    onChange: (impressed) => {
+      (impressed ? impressionStartHandler : impressionEndHandler)();
+    },
+    leading: true
+  });
+  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
+var import_jsx_runtime = require("react/jsx-runtime");
+var ImpressionArea = (0, import_react7.forwardRef)(ImpressionAreaImpl);
+function ImpressionAreaImpl({ as, rootMargin, areaThreshold, timeThreshold, onImpressionStart, onImpressionEnd, ...props }, ref) {
+  const Component = as ?? "div";
+  const impressionRef = useImpressionRef({
+    onImpressionStart,
+    onImpressionEnd,
+    areaThreshold,
+    timeThreshold,
+    rootMargin
+  });
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Component, { ref: mergeRefs(ref, impressionRef), ...props });
+}
+Object.assign(ImpressionArea, {
+  displayName: "ImpressionArea"
+});
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  ImpressionArea
+});

package/dist/components/ImpressionArea/index.d.cts

@@ -0,0 +1,47 @@
+import { ElementType, ReactNode, Ref } from 'react';
+import { UseImpressionRefOptions } from '../../hooks/useImpressionRef/index.cjs';
+
+type Element<T extends ElementType, InstrinsicElements = T extends keyof React.JSX.IntrinsicElements ? React.JSX.IntrinsicElements[T] : HTMLElement> = InstrinsicElements extends React.ClassAttributes<infer E extends HTMLElement> ? E : HTMLElement;
+type Props<Tag extends ElementType> = React.ComponentPropsWithoutRef<Tag> & UseImpressionRefOptions & {
+    as?: Tag;
+    children?: ReactNode;
+    className?: string;
+};
+/**
+ * @description
+ * `ImpressionArea` is a component that measures the time a specific DOM element is visible on the screen
+ * and executes callbacks when the element enters or exits the viewport. This component uses the `useImpressionRef`
+ * hook to track the element's visibility.
+ *
+ * @template {ElementType} T - The HTML tag to render. Defaults to `div`.
+ * @param {T} [as='div'] - The HTML tag to render. Defaults to `div`.
+ * @param {string} [rootMargin] - Margin to adjust the detection area.
+ * @param {number} [areaThreshold] - Minimum ratio of the element that must be visible (0 to 1).
+ * @param {number} [timeThreshold] - Minimum time the element must be visible (in milliseconds).
+ * @param {() => void} [onImpressionStart] - Callback function executed when the element enters the view.
+ * @param {() => void} [onImpressionEnd] - Callback function executed when the element exits the view.
+ * @param {Ref<Element<T>>} [ref] - Reference to the element.
+ * @param {React.ReactNode} [children] - Child elements to be rendered inside the component.
+ * @param {string} [className] - Additional class names for styling.
+ *
+ * @returns {JSX.Element} A React component that tracks the visibility of its child elements.
+ *
+ * @example
+ * function App() {
+ *   return (
+ *     <ImpressionArea
+ *       onImpressionStart={() => console.log('Element entered view')}
+ *       onImpressionEnd={() => console.log('Element exited view')}
+ *       timeThreshold={1000}
+ *       areaThreshold={0.5}
+ *     >
+ *       <div>Track me!</div>
+ *     </ImpressionArea>
+ *   );
+ * }
+ */
+declare const ImpressionArea: <T extends ElementType = "div">(props: Props<T> & {
+    ref?: Ref<Element<T>>;
+}) => React.ReactElement;
+
+export { ImpressionArea };

package/dist/components/Separated/index.cjs

@@ -0,0 +1,41 @@
+"use client";
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/components/Separated/index.ts
+var Separated_exports = {};
+__export(Separated_exports, {
+  Separated: () => Separated
+});
+module.exports = __toCommonJS(Separated_exports);
+
+// src/components/Separated/Separated.tsx
+var import_react = require("react");
+var import_jsx_runtime = require("react/jsx-runtime");
+function Separated({ children, by: separator }) {
+  const childrenArray = import_react.Children.toArray(children).filter(import_react.isValidElement);
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_jsx_runtime.Fragment, { children: childrenArray.map((child, i, { length }) => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_react.Fragment, { children: [
+    child,
+    i + 1 !== length && separator
+  ] }, i)) });
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  Separated
+});

package/dist/components/Separated/index.d.cts

@@ -0,0 +1,38 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { ReactNode } from 'react';
+
+type Props = {
+    by: ReactNode;
+    children: ReactNode;
+};
+/**
+ * @description
+ * `Separated` is a component that inserts a specified component between each child element.
+ * It is useful for adding separators, spacing, or other repeating elements in lists.
+ *
+ * @param {React.ReactNode} children - The child elements to render.
+ *   Only valid React elements (`React.isValidElement`) will be rendered.
+ * @param {React.ReactNode} by - The component to insert between child elements.
+ *
+ * @returns {JSX.Element} A React component that separates children with a specified separator.
+ *
+ * @example
+ * function App() {
+ *   return (
+ *     <Separated by={<Border type="padding24" />}>
+ *       {['hello', 'react', 'world'].map(item => (
+ *         <div key={item}>{item}</div>
+ *       ))}
+ *     </Separated>
+ *   );
+ *   // Expected output:
+ *   // <div>hello</div>
+ *   // <Border type="padding24" />
+ *   // <div>react</div>
+ *   // <Border type="padding24" />
+ *   // <div>world</div>
+ * }
+ */
+declare function Separated({ children, by: separator }: Props): react_jsx_runtime.JSX.Element;
+
+export { Separated };

package/dist/components/SwitchCase/index.cjs

@@ -0,0 +1,36 @@
+"use client";
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/components/SwitchCase/index.ts
+var SwitchCase_exports = {};
+__export(SwitchCase_exports, {
+  SwitchCase: () => SwitchCase
+});
+module.exports = __toCommonJS(SwitchCase_exports);
+
+// src/components/SwitchCase/SwitchCase.tsx
+function SwitchCase({ value, caseBy, defaultComponent = () => null }) {
+  const stringifiedValue = String(value);
+  return (caseBy[stringifiedValue] ?? defaultComponent)();
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  SwitchCase
+});

package/dist/components/SwitchCase/index.d.cts

@@ -0,0 +1,46 @@
+import { ReactElement } from 'react';
+
+type StringifiedValue<T> = (T extends boolean ? 'true' | 'false' : never) | (T extends number ? `${T}` : never) | (T extends string ? T : never);
+type Props<Case> = {
+    value: Case;
+    caseBy: Partial<{
+        [P in StringifiedValue<Case>]: () => ReactElement | null;
+    }>;
+    defaultComponent?: () => ReactElement | null;
+};
+/**
+ * @description
+ * `SwitchCase` is a component that allows you to declaratively render components based on a given value,
+ * similar to a `switch-case` statement. It is useful when you need to conditionally render different
+ * components depending on a specific state.
+ *
+ * @param {Case} value - The value to compare against.
+ *   The component associated with the matching key in `caseBy` will be rendered.
+ * @param {Partial<{ [P in StringifiedValue<Case>]: () => ReactElement | null }>} caseBy - An object that maps values to
+ *   components to render. The keys represent possible values, and the values are functions returning
+ *   the corresponding components.
+ * @param {() => ReactElement | null} [defaultComponent] - The component to render if `value` does not match
+ *   any key in `caseBy`.
+ *
+ * @returns {ReactElement | null} A React component that conditionally renders based on cases.
+ *
+ * @example
+ * function App() {
+ *   return (
+ *     <SwitchCase
+ *       value={status}
+ *       // Renders TypeA, TypeB, or TypeC based on the status value.
+ *       caseBy={{
+ *         a: () => <TypeA />,
+ *         b: () => <TypeB />,
+ *         c: () => <TypeC />,
+ *       }}
+ *       // Renders Default when the status value does not match any case.
+ *       defaultComponent={() => <Default />}
+ *     />
+ *   );
+ * }
+ */
+declare function SwitchCase<Case>({ value, caseBy, defaultComponent }: Props<Case>): ReactElement | null;
+
+export { SwitchCase };

package/dist/hooks/useAsyncEffect/index.cjs

@@ -0,0 +1,44 @@
+"use client";
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/hooks/useAsyncEffect/index.ts
+var useAsyncEffect_exports = {};
+__export(useAsyncEffect_exports, {
+  useAsyncEffect: () => useAsyncEffect
+});
+module.exports = __toCommonJS(useAsyncEffect_exports);
+
+// src/hooks/useAsyncEffect/useAsyncEffect.ts
+var import_react = require("react");
+function useAsyncEffect(effect, deps) {
+  (0, import_react.useEffect)(() => {
+    let cleanup;
+    effect().then((result) => {
+      cleanup = result;
+    });
+    return () => {
+      cleanup?.();
+    };
+  }, deps);
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  useAsyncEffect
+});