Generator component for Next.js 13

async-component.tsx

export function asyncComponent<T>(
  fn: (props: T) => Promise<JSX.Element>
): React.FC<T> {
  return fn as any;
}

generator-component.tsx

import { Suspense } from "react";
import { asyncComponent } from "./async-component";

export function generatorComponent<T>(
  fn: (props: T) => AsyncGenerator<JSX.Element, JSX.Element, JSX.Element>
): React.FC<T> {
  return (props: T) => {
    return <GeneratorComponent generator={fn(props)} />;
  };
}

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

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