@dxos/react-hooks 0.8.4-main.b97322e → 0.8.4-main.f5c0578

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dxos/react-hooks",
-  "version": "0.8.4-main.b97322e",
+  "version": "0.8.4-main.f5c0578",
   "description": "React hooks supporting DXOS React primitives.",
   "homepage": "https://dxos.org",
   "bugs": "https://github.com/dxos/dxos/issues",
@@ -10,6 +10,7 @@
   "type": "module",
   "exports": {
     ".": {
+      "source": "./src/index.ts",
       "types": "./dist/types/src/index.d.ts",
       "browser": "./dist/lib/browser/index.mjs",
       "node": "./dist/lib/node-esm/index.mjs"
@@ -27,8 +28,8 @@
     "@preact-signals/safe-react": "^0.9.0",
     "alea": "^1.0.1",
     "lodash.defaultsdeep": "^4.6.1",
-    "@dxos/async": "0.8.4-main.b97322e",
-    "@dxos/log": "0.8.4-main.b97322e"
+    "@dxos/async": "0.8.4-main.f5c0578",
+    "@dxos/log": "0.8.4-main.f5c0578"
   },
   "devDependencies": {
     "@types/lodash.defaultsdeep": "^4.6.6",

package/src/useAsyncEffect.ts

@@ -4,59 +4,11 @@
 
 import { useEffect } from 'react';
 
-import { log } from '@dxos/log';
-
-/**
- * Process async event with optional non-async destructor.
- * Inspired by: https://github.com/rauldeheer/use-async-effect/blob/master/index.js
- *
- * ```tsx
- * useAsyncEffect(async () => {
- *   await test();
- * }, []);
- * ```
- *
- * The callback may check of the component is still mounted before doing state updates.
- *
- * ```tsx
- * const [value, setValue] = useState<string>();
- * useAsyncEffect<string>(async (isMounted) => {
- *   const value = await test();
- *   if (!isMounted()) {
- *     setValue(value);
- *   }
- * }, () => console.log('Unmounted'), []);
- * ```
- *
- * @param callback Receives a getter function that determines if the component is still mounted.
- * @param destructor Receives the value returned from the callback.
- * @param deps
- *
- * NOTE: This effect does not cancel the async operation if the component is unmounted.
- *
- * @deprecated Use useTimeout.
- */
-export const useAsyncEffect = <T>(
-  callback: (isMounted: () => boolean) => Promise<T> | undefined,
-  destructor?: ((value?: T) => void) | any[],
-  deps?: any[],
-) => {
-  const [effectDestructor, effectDeps] =
-    typeof destructor === 'function' ? [destructor, deps] : [undefined, destructor];
-
+export const useAsyncEffect = <T>(callback: () => Promise<T> | void, deps?: any[]) => {
   useEffect(() => {
-    let mounted = true;
-    let value: T | undefined;
-    const asyncResult = callback(() => mounted);
-    void Promise.resolve(asyncResult)
-      .then((result) => {
-        value = result;
-      })
-      .catch(log.catch);
-
-    return () => {
-      mounted = false;
-      effectDestructor?.(value);
-    };
-  }, effectDeps);
+    const t = setTimeout(() => {
+      void callback();
+    });
+    return () => clearTimeout(t);
+  }, deps);
 };

package/src/useDefaultValue.ts

@@ -2,7 +2,7 @@
 // Copyright 2024 DXOS.org
 //
 
-import { useEffect, useState, useMemo } from 'react';
+import { useEffect, useMemo, useState } from 'react';
 
 /**
  * A custom React hook that provides a stable default value for a potentially undefined reactive value.

package/src/useForwardedRef.ts

@@ -2,7 +2,7 @@
 // Copyright 2022 DXOS.org
 //
 
-import { type ForwardedRef, useRef, useEffect } from 'react';
+import { type ForwardedRef, useEffect, useRef } from 'react';
 
 /**
  * Combines a possibly undefined forwarded ref with a locally defined ref.

package/src/useIsFocused.ts

@@ -5,7 +5,7 @@
 // Based upon the useIsFocused hook which is part of the `rci` project:
 /// https://github.com/leonardodino/rci/blob/main/packages/use-is-focused
 
-import { useEffect, useRef, useState, type RefObject } from 'react';
+import { type RefObject, useEffect, useRef, useState } from 'react';
 
 export const useIsFocused = (inputRef: RefObject<HTMLInputElement>) => {
   const [isFocused, setIsFocused] = useState<boolean | undefined>(undefined);

package/src/useTimeout.ts

@@ -4,7 +4,7 @@
 
 import { useEffect, useRef } from 'react';
 
-export const useTimeout = (callback: (() => Promise<void>) | undefined, delay = 0, deps: any[] = []) => {
+export const useTimeout = (callback?: () => Promise<void>, delay = 0, deps: any[] = []) => {
   const callbackRef = useRef(callback);
   useEffect(() => {
     callbackRef.current = callback;
@@ -15,7 +15,32 @@ export const useTimeout = (callback: (() => Promise<void>) | undefined, delay =
       return;
     }
 
-    const timeout = setTimeout(() => callbackRef.current?.(), delay);
-    return () => clearTimeout(timeout);
+    const t = setTimeout(() => callbackRef.current?.(), delay);
+    return () => clearTimeout(t);
+  }, [delay, ...deps]);
+};
+
+export const useInterval = (
+  callback?: (() => Promise<void | boolean>) | (() => void | boolean),
+  delay = 0,
+  deps: any[] = [],
+) => {
+  const callbackRef = useRef(callback);
+  useEffect(() => {
+    callbackRef.current = callback;
+  }, [callback]);
+
+  useEffect(() => {
+    if (delay == null) {
+      return;
+    }
+
+    const i = setInterval(async () => {
+      const result = await callbackRef.current?.();
+      if (result === false) {
+        clearInterval(i);
+      }
+    }, delay);
+    return () => clearInterval(i);
   }, [delay, ...deps]);
 };

package/src/useTrackProps.ts

@@ -2,7 +2,7 @@
 // Copyright 2025 DXOS.org
 //
 
-import { useRef, useEffect } from 'react';
+import { useEffect, useRef } from 'react';
 
 import { log } from '@dxos/log';
 

package/src/useTransitions.ts

@@ -2,7 +2,7 @@
 // Copyright 2024 DXOS.org
 //
 
-import { useRef, useEffect, useState } from 'react';
+import { useEffect, useRef, useState } from 'react';
 
 const isFunction = <T>(functionToCheck: any): functionToCheck is (value: T) => boolean => {
   return functionToCheck instanceof Function;

package/dist/types/src/useAsyncEffect.test.d.ts

@@ -1,2 +0,0 @@
-export {};
-//# sourceMappingURL=useAsyncEffect.test.d.ts.map

package/dist/types/src/useAsyncEffect.test.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"useAsyncEffect.test.d.ts","sourceRoot":"","sources":["../../../src/useAsyncEffect.test.tsx"],"names":[],"mappings":""}

package/src/useAsyncEffect.test.tsx

@@ -1,51 +0,0 @@
-//
-// Copyright 2022 DXOS.org
-//
-
-import React, { useState } from 'react';
-import { createRoot } from 'react-dom/client';
-import { act } from 'react-dom/test-utils';
-import { afterEach, beforeEach, describe, expect, test } from 'vitest';
-
-import { useAsyncEffect } from './useAsyncEffect';
-
-const doAsync = async <T,>(value: T) =>
-  await new Promise<T>((resolve) => {
-    resolve(value);
-  });
-
-const Test = () => {
-  const [value, setValue] = useState<string>();
-  useAsyncEffect(async (isMounted) => {
-    const value = await doAsync('DXOS');
-    if (isMounted()) {
-      void act(() => {
-        setValue(value);
-      });
-    }
-  }, []);
-
-  return <h1>{value}</h1>;
-};
-
-let rootContainer: HTMLElement;
-
-describe('useAsyncEffect', () => {
-  beforeEach(() => {
-    rootContainer = document.createElement('div');
-    document.body.appendChild(rootContainer);
-  });
-
-  afterEach(() => {
-    document.body.removeChild(rootContainer!);
-  });
-
-  test('gets async value.', async () => {
-    await act(() => {
-      createRoot(rootContainer).render(<Test />);
-    });
-
-    const h1 = rootContainer.querySelector('h1');
-    expect(h1?.textContent).toEqual('DXOS');
-  });
-});