@dxos/react-hooks 0.6.12 → 0.6.13-main.548ca8d

package/src/useAsyncEffect.test.tsx

@@ -2,14 +2,10 @@
 // Copyright 2022 DXOS.org
 //
 
-import expect from 'expect';
-import 'raf/polyfill';
 import React, { useState } from 'react';
 import { createRoot } from 'react-dom/client';
 import { act } from 'react-dom/test-utils';
-import waitForExpect from 'wait-for-expect';
-
-import { afterEach, beforeEach, describe, test } from '@dxos/test';
+import { afterEach, beforeEach, describe, expect, test } from 'vitest';
 
 import { useAsyncEffect } from './useAsyncEffect';
 
@@ -45,13 +41,11 @@ describe('useAsyncEffect', () => {
   });
 
   test('gets async value.', async () => {
-    void act(() => {
+    await act(() => {
       createRoot(rootContainer).render(<Test />);
     });
 
     const h1 = rootContainer.querySelector('h1');
-    await waitForExpect(() => {
-      expect(h1?.textContent).toEqual('DXOS');
-    });
+    expect(h1?.textContent).toEqual('DXOS');
   });
 });

package/src/{useAsyncCallback.ts → useAsyncState.ts}

@@ -2,12 +2,15 @@
 // Copyright 2024 DXOS.org
 //
 
-import { useEffect, useState } from 'react';
+import { type Dispatch, type SetStateAction, useEffect, useState } from 'react';
 
 /**
  * NOTE: Use with care and when necessary to be able to cancel an async operation when unmounting.
  */
-export const useAsyncCallback = <T>(cb: () => Promise<T>): T | undefined => {
+export const useAsyncState = <T>(
+  cb: () => Promise<T | undefined>,
+  deps: any[] = [],
+): [T | undefined, Dispatch<SetStateAction<T | undefined>>] => {
   const [value, setValue] = useState<T | undefined>();
   useEffect(() => {
     const t = setTimeout(async () => {
@@ -16,7 +19,7 @@ export const useAsyncCallback = <T>(cb: () => Promise<T>): T | undefined => {
     });
 
     return () => clearTimeout(t);
-  }, []);
+  }, deps);
 
-  return value;
+  return [value, setValue];
 };

package/src/useControlledValue.ts

@@ -7,13 +7,16 @@ import { type Dispatch, type SetStateAction, useEffect, useState } from 'react';
 /**
  * A stateful hook with a controlled value.
  */
-export const useControlledValue = <TValue>(controlledValue: TValue): [TValue, Dispatch<SetStateAction<TValue>>] => {
+export const useControlledValue = <TValue>(
+  controlledValue: TValue,
+  ...deps: any[]
+): [TValue, Dispatch<SetStateAction<TValue>>] => {
   const [value, setValue] = useState<TValue>(controlledValue);
   useEffect(() => {
     if (controlledValue !== undefined) {
       setValue(controlledValue);
     }
-  }, [controlledValue]);
+  }, [controlledValue, ...deps]);
 
   return [value, setValue];
 };

package/src/useDefaultValue.ts

@@ -15,11 +15,11 @@ import { useEffect, useState, useMemo } from 'react';
  * @param defaultValue - The initial value used when the reactiveValue is undefined. This value is not reactive.
  * @returns - The reactiveValue if it's defined, otherwise the defaultValue.
  */
-export const useDefaultValue = <T>(reactiveValue: T | undefined | null, defaultValue: T): T => {
+export const useDefaultValue = <T>(reactiveValue: T | undefined | null, getDefaultValue: () => T): T => {
   // Memoize defaultValue with an empty dependency array.
   // This ensures that the defaultValue instance remains stable across all re-renders,
   // regardless of whether the defaultValue changes.
-  const stableDefaultValue = useMemo(() => defaultValue, []);
+  const stableDefaultValue = useMemo(getDefaultValue, []);
   const [value, setValue] = useState(reactiveValue ?? stableDefaultValue);
 
   useEffect(() => {

package/src/useMulticastObservable.test.tsx

@@ -0,0 +1,23 @@
+//
+// Copyright 2022 DXOS.org
+//
+
+import { act, renderHook } from '@testing-library/react';
+import { describe, expect, test } from 'vitest';
+
+import { Event, MulticastObservable } from '@dxos/async';
+
+import { useMulticastObservable } from './useMulticastObservable';
+
+describe('useMulticastObservable', () => {
+  test('observes value', async () => {
+    const event = new Event<number>();
+    const observable = MulticastObservable.from(event, 0);
+    const { result } = renderHook(() => useMulticastObservable(observable));
+    expect(result.current).toEqual(0);
+
+    await act(() => event.emit(1));
+
+    await expect.poll(() => result.current).toEqual(1);
+  });
+});

package/src/useTransitions.ts

@@ -28,21 +28,18 @@ export const useDidTransition = <T>(
 
   useEffect(() => {
     const toValueValid = isFunction<T>(toValue) ? toValue(currentValue) : toValue === currentValue;
-
     const fromValueValid = isFunction<T>(fromValue)
       ? fromValue(previousValue.current)
       : fromValue === previousValue.current;
 
-    const transitioned = fromValueValid && toValueValid;
-
-    if (transitioned) {
+    if (fromValueValid && toValueValid && !hasTransitioned) {
       setHasTransitioned(true);
-    } else {
+    } else if ((!fromValueValid || !toValueValid) && hasTransitioned) {
       setHasTransitioned(false);
     }
 
     previousValue.current = currentValue;
-  }, [currentValue, fromValue, toValue, setHasTransitioned, previousValue]);
+  }, [currentValue, fromValue, toValue, hasTransitioned]);
 
   return hasTransitioned;
 };
@@ -55,7 +52,7 @@ export const useDidTransition = <T>(
 export const useOnTransition = <T>(
   currentValue: T,
   fromValue: T | ((value: T) => boolean),
-  toValue: ((value: T) => boolean) | T,
+  toValue: T | ((value: T) => boolean),
   callback: () => void,
 ) => {
   const dirty = useRef(false);

package/dist/types/src/useAsyncCallback.d.ts

@@ -1,5 +0,0 @@
-/**
- * NOTE: Use with care and when necessary to be able to cancel an async operation when unmounting.
- */
-export declare const useAsyncCallback: <T>(cb: () => Promise<T>) => T | undefined;
-//# sourceMappingURL=useAsyncCallback.d.ts.map

package/dist/types/src/useAsyncCallback.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"useAsyncCallback.d.ts","sourceRoot":"","sources":["../../../src/useAsyncCallback.ts"],"names":[],"mappings":"AAMA;;GAEG;AACH,eAAO,MAAM,gBAAgB,GAAI,CAAC,MAAM,MAAM,OAAO,CAAC,CAAC,CAAC,KAAG,CAAC,GAAG,SAY9D,CAAC"}