Custom Async Generator Paging within Svelte Reactive Effect Loops

export async function* fetchStreamedBatches(endpoint, signal) {
  let offset = 0;
  while (!signal.aborted) {
    const response = await fetch(`${endpoint}?offset=${offset}`, { signal });
    const { items, hasMore } = await response.json();
    if (!items.length) break;
    yield items;
    if (!hasMore) break;
    offset += items.length;
  }
}
 
export function createStreamController(endpoint) {
  let items = $state([]);
  let loading = $state(false);
 
  async function consume(signal) {
    loading = true;
    for await (const batch of fetchStreamedBatches(endpoint, signal)) {
      items = [...items, ...batch];
    }
    loading = false;
  }
  return { get items() { return items; }, get loading() { return loading; }, consume };
}