feat(useAsyncIterState): add a current value property on useAsyncIterState hook's returned iterable (#41)

Author: shtaif

spec/tests/useAsyncIterState.spec.tsx

@@ -19,12 +19,17 @@ describe('`useAsyncIterState` hook', () => {
     const valuesToSet = ['a', 'b', 'c'];
 
     const collectPromise = pipe(values, asyncIterTake(valuesToSet.length), asyncIterToArray);
+    const currentValues = [values.value.current];
 
     for (const value of valuesToSet) {
-      await act(() => setValue(value));
+      await act(() => {
+        setValue(value);
+        currentValues.push(values.value.current);
+      });
     }
 
     expect(await collectPromise).toStrictEqual(['a', 'b', 'c']);
+    expect(currentValues).toStrictEqual([undefined, 'a', 'b', 'c']);
   });
 
   it(
@@ -79,6 +84,7 @@ describe('`useAsyncIterState` hook', () => {
 
       const collections = await Promise.all([collectPromise1, collectPromise2]);
       expect(collections).toStrictEqual([[], []]);
+      expect(values.value.current).toStrictEqual(undefined);
     }
   );
 
@@ -91,13 +97,18 @@ describe('`useAsyncIterState` hook', () => {
       const [values, setValue] = renderedHook.result.current;
 
       const [collectPromise1, collectPromise2] = range(2).map(() => asyncIterToArray(values));
+      const currentValues = [values.value.current];
 
-      await act(() => setValue('a'));
+      await act(() => {
+        setValue('a');
+        currentValues.push(values.value.current);
+      });
 
       renderedHook.unmount();
 
       const collections = await Promise.all([collectPromise1, collectPromise2]);
       expect(collections).toStrictEqual([['a'], ['a']]);
+      expect(currentValues).toStrictEqual([undefined, 'a']);
     }
   );
 
@@ -113,6 +124,7 @@ describe('`useAsyncIterState` hook', () => {
 
       const collections = await Promise.all(range(2).map(() => asyncIterToArray(values)));
       expect(collections).toStrictEqual([[], []]);
+      expect(values.value.current).toStrictEqual(undefined);
     }
   );
 
@@ -124,16 +136,21 @@ describe('`useAsyncIterState` hook', () => {
       const [values, setValue] = renderHook(() => useAsyncIterState<string>()).result.current;
 
       const consumeStacks: string[][] = [];
+      const currentValues = [values.value.current];
 
       for (const [i, value] of ['a', 'b', 'c'].entries()) {
         consumeStacks[i] = [];
         (async () => {
           for await (const v of values) consumeStacks[i].push(v);
         })();
-        await act(() => setValue(value));
+        await act(() => {
+          setValue(value);
+          currentValues.push(values.value.current);
+        });
       }
 
       expect(consumeStacks).toStrictEqual([['a', 'b', 'c'], ['b', 'c'], ['c']]);
+      expect(currentValues).toStrictEqual([undefined, 'a', 'b', 'c']);
     }
   );
 });

src/useAsyncIterState/IterableChannel.ts

@@ -1,13 +1,15 @@
+import { type MutableRefObject } from 'react';
 import { promiseWithResolvers } from '../common/promiseWithResolvers.js';
 
-export { IterableChannel };
+export { IterableChannel, type AsyncIterableSubject };
 
-class IterableChannel<TVal> {
+class IterableChannel<T> {
   #isClosed = false;
-  #nextIteration = promiseWithResolvers<IteratorResult<TVal, void>>();
+  #nextIteration = promiseWithResolvers<IteratorResult<T, void>>();
 
-  put(value: TVal): void {
+  put(value: T): void {
     if (!this.#isClosed) {
+      this.values.value.current = value;
       this.#nextIteration.resolve({ done: false, value });
       this.#nextIteration = promiseWithResolvers();
     }
@@ -18,20 +20,17 @@ class IterableChannel<TVal> {
     this.#nextIteration.resolve({ done: true, value: undefined });
   }
 
-  iterable: {
-    [Symbol.asyncIterator](): {
-      next(): Promise<IteratorResult<TVal, void>>;
-      return(): Promise<IteratorReturnResult<void>>;
-    };
-  } = {
+  values: AsyncIterableSubject<T> = {
+    value: {
+      current: undefined,
+    },
+
     [Symbol.asyncIterator]: () => {
       const whenIteratorClosed = promiseWithResolvers<IteratorReturnResult<undefined>>();
-
       return {
         next: () => {
           return Promise.race([this.#nextIteration.promise, whenIteratorClosed.promise]);
         },
-
         return: async () => {
           whenIteratorClosed.resolve({ done: true, value: undefined });
           return { done: true, value: undefined };
@@ -40,3 +39,11 @@ class IterableChannel<TVal> {
     },
   };
 }
+
+type AsyncIterableSubject<T> = {
+  value: MutableRefObject<T | undefined>;
+  [Symbol.asyncIterator](): {
+    next(): Promise<IteratorResult<T, void>>;
+    return(): Promise<IteratorReturnResult<void>>;
+  };
+};

src/useAsyncIterState/index.ts

@@ -1,8 +1,8 @@
 import { useEffect, useRef } from 'react';
-import { IterableChannel } from './IterableChannel.js';
+import { IterableChannel, type AsyncIterableSubject } from './IterableChannel.js';
 import { type Iterate } from '../Iterate/index.js'; // eslint-disable-line @typescript-eslint/no-unused-vars
 
-export { useAsyncIterState, type AsyncIterStateResult };
+export { useAsyncIterState, type AsyncIterStateResult, type AsyncIterableSubject };
 
 /**
  * Basically like {@link https://react.dev/reference/react/useState `React.useState`}, only that the value
@@ -58,7 +58,7 @@ function useAsyncIterState<TVal>(): AsyncIterStateResult<TVal> {
     const channel = new IterableChannel<TVal>();
     return {
       channel,
-      result: [channel.iterable, newVal => channel.put(newVal)],
+      result: [channel.values, newVal => channel.put(newVal)],
     };
   })();
 
@@ -77,4 +77,7 @@ function useAsyncIterState<TVal>(): AsyncIterStateResult<TVal> {
  *
  * @see {@link useAsyncIterState `useAsyncIterState`}
  */
-type AsyncIterStateResult<TVal> = [IterableChannel<TVal>['iterable'], (newValue: TVal) => void];
+type AsyncIterStateResult<TVal> = [
+  values: AsyncIterableSubject<TVal>,
+  setValue: (newValue: TVal) => void,
+];