import { component$, SSRStream } from '@builder.io/qwik';

export function delay(time: number) {
  return new Promise<void>((resolve) => {
    setTimeout(() => resolve(), time);
  });
}

export const Streaming = component$(() => {
  return (
    <div>
      <ul>
        <SSRStream>
          {async function* () {
            for (let i = 0; i < 5; i++) {
              yield <li>yield: {i}</li>;
              await delay(100);
            }
          }}
        </SSRStream>
      </ul>

      <ol>
        <SSRStream>
          {async function (stream) {
            for (let i = 0; i < 10; i++) {
              stream.write(`<li>raw: ${i}</li>`);
              await delay(100);
            }
          }}
        </SSRStream>
      </ol>
    </div>
  );
});