Generator Component

generator-component.tsx

import { Suspense, type ReactNode } from "react";

/**
 * This function can be called with an AsyncGenerator Function that produces
 * JSX. It will return a React Component that when rendered with some props
 * will re-render with every value that the generator produces.
 */
export function generatorComponent<T>(
  fn: (props: T) => AsyncGenerator<ReactNode, ReactNode, ReactNode>,
): React.FC<T> {
  return function GeneratorComponentOutter(props: T) {
    return <GeneratorComponent generator={fn(props)} />;
  };
}

async function GeneratorComponent(props: {
  generator: AsyncGenerator<ReactNode, ReactNode, ReactNode>;
}) {
  const result = await props.generator.next();
  if (result.done) {
    return result.value;
  }

  return (
    <Suspense fallback={result.value}>
      <GeneratorComponent generator={props.generator} />
    </Suspense>
  );
}