@dxos/react-hooks 0.6.11-staging.e6894a4 → 0.6.12-main.15a606f

package/src/useAsyncEffect.test.tsx

@@ -0,0 +1,51 @@
+//
+// 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');
+  });
+});

package/src/useAsyncEffect.ts

@@ -0,0 +1,61 @@
+//
+// Copyright 2022 DXOS.org
+//
+
+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.
+ */
+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];
+
+  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);
+};

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

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

package/src/useDebugReactDeps.ts

@@ -0,0 +1,27 @@
+//
+// Copyright 2024 DXOS.org
+//
+
+/* eslint-disable no-console */
+
+import { type DependencyList, useEffect, useRef } from 'react';
+
+/**
+ * Util to log deps that have changed.
+ */
+// TODO(burdon): Move to react-hooks.
+export const useDebugReactDeps = (deps: DependencyList = []) => {
+  const lastDeps = useRef<DependencyList>([]);
+  useEffect(() => {
+    console.group('deps changed', { old: lastDeps.current.length, new: deps.length });
+    for (let i = 0; i < Math.max(lastDeps.current.length ?? 0, deps.length ?? 0); i++) {
+      console.log(i, lastDeps.current[i] === deps[i] ? 'SAME' : 'CHANGED', {
+        previous: lastDeps.current[i],
+        current: deps[i],
+      });
+    }
+
+    console.groupEnd();
+    lastDeps.current = deps;
+  }, deps);
+};

package/src/useDefaultValue.ts

@@ -22,7 +22,9 @@ export const useDefaultValue = <T>(reactiveValue: T | undefined | null, defaultV
   const stableDefaultValue = useMemo(() => defaultValue, []);
   const [value, setValue] = useState(reactiveValue ?? stableDefaultValue);
 
-  useEffect(() => setValue(reactiveValue ?? stableDefaultValue), [reactiveValue, stableDefaultValue]);
+  useEffect(() => {
+    setValue(reactiveValue ?? stableDefaultValue);
+  }, [reactiveValue, stableDefaultValue]);
 
   return value;
 };

package/src/useDynamicRef.ts

@@ -9,5 +9,6 @@ export const useDynamicRef = <T>(value: T) => {
   useEffect(() => {
     ref.current = value;
   }, [value]);
+
   return ref;
 };

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/useMulticastObservable.ts

@@ -0,0 +1,26 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+import { useMemo, useSyncExternalStore } from 'react';
+
+import { type MulticastObservable } from '@dxos/async';
+
+/**
+ * Subscribe to a MulticastObservable and return the latest value.
+ * @param observable the observable to subscribe to. Will resubscribe if the observable changes.
+ */
+// TODO(burdon): Move to react-hooks.
+export const useMulticastObservable = <T>(observable: MulticastObservable<T>): T => {
+  // Make sure useSyncExternalStore is stable in respect to the observable.
+  const subscribeFn = useMemo(
+    () => (listener: () => void) => {
+      const subscription = observable.subscribe(listener);
+      return () => subscription.unsubscribe();
+    },
+    [observable],
+  );
+
+  // useSyncExternalStore will resubscribe to the observable and update the value if the subscribeFn changes.
+  return useSyncExternalStore(subscribeFn, () => observable.get());
+};

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,2 +0,0 @@
-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,eAAO,MAAM,gBAAgB,GAAI,CAAC,MAAM,MAAM,OAAO,CAAC,CAAC,CAAC,KAAG,CAAC,GAAG,SAY9D,CAAC"}