add deps repeater to hooks

Author: brainkim

src/__tests__/react-hooks.ts

@@ -2,8 +2,31 @@ import { Repeater } from "@repeaterjs/repeater";
 import { act, renderHook } from "@testing-library/react-hooks";
 import { useAsyncIter, useRepeater, useResult } from "../react-hooks";
 
+describe("useRepeater", () => {
+ test("basic", async () => {
+ const { result } = renderHook(() => {
+ return useRepeater();
+ });
+
+ const [repeater, push, stop] = result.current;
+ expect(repeater).toBeDefined();
+ expect(push).toBeDefined();
+ expect(stop).toBeDefined();
+ push(1);
+ expect(await repeater.next()).toEqual({ value: 1, done: false });
+ push(2);
+ expect(await repeater.next()).toEqual({ value: 2, done: false });
+ push(3);
+ push(4);
+ expect(await repeater.next()).toEqual({ value: 3, done: false });
+ expect(await repeater.next()).toEqual({ value: 4, done: false });
+ stop();
+ expect(await repeater.next()).toEqual({ done: true });
+ });
+});
+
 describe("useAsyncIter", () => {
- test("render", async () => {
+ test("basic", async () => {
  const callback = jest.fn(async function*(): AsyncIterableIterator<number> {
  yield 1;
  await new Promise((resolve) => setTimeout(resolve, 100));
@@ -40,14 +63,37 @@ describe("useAsyncIter", () => {
  return useAsyncIter(callback);
  });
 
+ expect(await result.current.next()).toEqual({ value: 1, done: false });
  unmount();
  expect(await result.current.next()).toEqual({ done: true });
  expect(callback).toHaveBeenCalledTimes(1);
  });
+
+test("deps", async () => {
+const callback = jest.fn(async function*(
+deps: AsyncIterableIterator<[number]>
+): AsyncIterableIterator<number> {
+for await (const [num] of deps) {
+yield num ** 2;
+}
+ });
+
+const { result, rerender } = renderHook((props) => {
+return useAsyncIter(callback, [props.num]);
+}, {initialProps: {num: 1}});
+
+expect(await result.current.next()).toEqual({ value: 1, done: false });
+rerender({ num: 2 });
+expect(await result.current.next()).toEqual({ value: 4, done: false });
+rerender({ num: 3 });
+rerender({ num: 4 });
+expect(await result.current.next()).toEqual({ value: 9, done: false });
+expect(await result.current.next()).toEqual({ value: 16, done: false });
+});
 });
 
 describe("useResult", () => {
- test("render", async () => {
+ test("basic", async () => {
  let push: (value: number) => Promise<void>;
  let stop: (() => void) & Promise<void>;
  const repeater = new Repeater(async (push1, stop1) => {
@@ -97,36 +143,41 @@ describe("useResult", () => {
  expect(result.current).toBeUndefined();
  await act(() => push(1));
  expect(result.current).toEqual({ value: 1, done: false });
- await act(() => push(2));
- expect(result.current).toEqual({ value: 2, done: false });
- await act(() => push(3));
- expect(result.current).toEqual({ value: 3, done: false });
  unmount();
- expect(result.current).toEqual({ value: 3, done: false });
  expect(callback).toHaveBeenCalledTimes(1);
  expect(returnSpy).toHaveBeenCalledTimes(1);
  });
-});
 
-describe("useRepeater", () => {
- test("render", async () => {
- const { result } = renderHook(() => {
- return useRepeater();
+ test("deps", async () => {
+ const callback = jest.fn((deps) => {
+return new Repeater<number>(async (push1) => {
+const push = async (num: number) => {
+return act(() => push1(num));
+};
+
+for await (const [num] of deps) {
+await push(num);
+}
+
+return -1;
+});
  });
 
- const [repeater, push, stop] = result.current;
- expect(repeater).toBeDefined();
- expect(push).toBeDefined();
- expect(stop).toBeDefined();
- push(1);
- push(2);
- push(3);
- push(4);
- stop();
- expect(await repeater.next()).toEqual({ value: 1, done: false });
- expect(await repeater.next()).toEqual({ value: 2, done: false });
- expect(await repeater.next()).toEqual({ value: 3, done: false });
- expect(await repeater.next()).toEqual({ value: 4, done: false });
- expect(await repeater.next()).toEqual({ done: true });
+ const { result, rerender, waitForNextUpdate } = renderHook((props) => {
+ return useResult(callback, [props.num]);
+}, { initialProps: { num: 1 } });
+
+ expect(result.current).toBeUndefined();
+await waitForNextUpdate();
+expect(result.current).toEqual({ value: 1, done: false });
+rerender({ num: 2 });
+expect(result.current).toEqual({ value: 1, done: false });
+await waitForNextUpdate();
+expect(result.current).toEqual({ value: 2, done: false });
+rerender({ num: 3 });
+expect(result.current).toEqual({ value: 2, done: false });
+await waitForNextUpdate();
+expect(result.current).toEqual({ value: 3, done: false });
+ expect(callback).toHaveBeenCalledTimes(1);
  });
 });

src/react-hooks.ts

@@ -1,27 +1,61 @@
 import { useEffect, useState } from "react";
 import { Push, Repeater, RepeaterBuffer, Stop } from "@repeaterjs/repeater";
 
-export function useAsyncIter<T>(
- callback: () => AsyncIterableIterator<T>,
+// Repeaters are lazy, hooks are eager.
+// We need to return push and stop synchronously from the useRepeater hook so
+// we prime the repeater by calling next immediately.
+function createPrimedRepeater<T>(
+buffer?: RepeaterBuffer<T>,
+): [Repeater<T>, Push<T>, Stop] {
+ let push: Push<T>;
+ let stop: Stop;
+const repeater = new Repeater((push1, stop1) => {
+push = push1;
+stop = stop1;
+// this value is thrown away
+push(null as any);
+}, buffer);
+// pull and throw away the first value so the executor above runs
+repeater.next();
+return [repeater, push!, stop!];
+}
+
+export function useRepeater<T>(
+ buffer?: RepeaterBuffer<T>,
+): [Repeater<T>, Push<T>, Stop] {
+ const [tuple] = useState(() => createPrimedRepeater(buffer));
+ return tuple;
+}
+
+export function useAsyncIter<T, TDeps extends any[]>(
+callback: (deps: AsyncIterableIterator<TDeps>) => AsyncIterableIterator<T>,
+deps: TDeps = [] as unknown as TDeps,
 ): AsyncIterableIterator<T> {
- const [iter] = useState(() => callback());
+const [repeater, push, stop] = useRepeater<TDeps>();
+ const [iter] = useState(() => callback(repeater));
+useEffect(() => {
+push(deps);
+}, [...deps]);
+
  useEffect(
- () => () => {
- if (iter.return != null) {
- // TODO: handle return errors
- iter.return().catch();
- }
- },
+() => () => {
+stop();
+if (iter.return != null) {
+// TODO: handle return errors
+iter.return().catch();
+}
+},
  [],
  );
 
  return iter;
 }
 
-export function useResult<T>(
- callback: () => AsyncIterableIterator<T>,
+export function useResult<T, TDeps extends any[]>(
+callback: (deps: AsyncIterableIterator<TDeps>) => AsyncIterableIterator<T>,
+deps?: TDeps,
 ): IteratorResult<T> | undefined {
- const iter = useAsyncIter(callback);
+ const iter = useAsyncIter(callback, deps);
  const [result, setResult] = useState<IteratorResult<T>>();
  useEffect(() => {
  let mounted = true;
@@ -53,24 +87,3 @@ export function useResult<T>(
 
  return result;
 }
-
-export function useRepeater<T>(
- buffer?: RepeaterBuffer<T>,
-): [Repeater<T>, Push<T>, Stop] {
- let push: Push<T>;
- let stop: Stop;
- const [repeater] = useState(() => {
- const repeater = new Repeater((push1, stop1) => {
- push = push1;
- stop = stop1;
- }, buffer);
-
- // We pull the first value so that the executor runs.
- repeater.next();
- // The first value (null) is thrown away.
- push(null as any);
- return repeater;
- });
-
- return [repeater, push!, stop!];
-}