wip

examples/sse/src/app/StreamedTime.tsx

@@ -4,7 +4,7 @@ import { useEffect, useState } from "react";
 
 import type { ResponseShape } from "./api/sse/infinite/route";
 
-import { createEventSource, isAbortError } from "./tsonOptions";
+import { createEventSource } from "./tsonOptions";
 
 export function StreamedTime() {
 	const [time, setTime] = useState("....");
@@ -19,11 +19,7 @@ export function StreamedTime() {
 				}
 			})
 			.catch((err) => {
-				if (isAbortError(err)) {
-					console.log("aborted - might be React doing its double render thing");
-				} else {
-					console.error(err);
-				}
+				console.error(err);
 			});
 
 		return () => {

examples/sse/src/app/StreamedTuple.tsx

@@ -1,41 +1,54 @@
 "use client";
 
-import { Fragment, useEffect, useState } from "react";
+import { useCallback, useEffect, useState } from "react";
 
 import type { ResponseShape } from "./api/sse/finite/route";
 
-import { createEventSource, isAbortError } from "./tsonOptions";
+import { createEventSource } from "./tsonOptions";
 
 export function StreamedTuple() {
-	const [list, setList] = useState<null | number[]>(null);
+	const [list, setList] = useState<number[]>([]);
 
-	useEffect(() => {
+	const handleStream = useCallback(() => {
 		const abortSignal = new AbortController();
 		createEventSource<ResponseShape>("/api/sse/finite", {
 			signal: abortSignal.signal,
 		})
 			.then(async (shape) => {
-				for await (const time of shape.finiteListGenerator) {
-					setList((list) => [...(list ?? []), time]);
+				for await (const item of shape.finiteListGenerator) {
+					if (item === undefined) {
+						throw new Error("item is undefined");
+					}
+
+					setList((list) => [...list, item]);
 				}
 			})
 			.catch((err) => {
-				if (isAbortError(err)) {
-					console.log("aborted - might be React doing its double render thing");
-				} else {
-					console.error(err);
-				}
+				console.error(err);
 			});
-
-		return () => {
-			abortSignal.abort();
-		};
 	}, []);
 
 	return (
-		<>
-			{list?.map((item, index) => <Fragment key={index}>{item}</Fragment>) ??
-				"...."}
-		</>
+		<div
+			style={{
+				alignItems: "center",
+				display: "flex",
+				flexDirection: "column",
+			}}
+		>
+			<button onClick={handleStream}>Stream</button>
+			<div
+				style={{
+					display: "flex",
+					flexDirection: "row",
+					flexWrap: "wrap",
+					justifyContent: "center",
+				}}
+			>
+				{list.map((item, index) => (
+					<div key={index}>{item}</div>
+				))}
+			</div>
+		</div>
 	);
 }

examples/sse/src/app/api/sse/finite/route.ts

@@ -6,10 +6,10 @@ const sleep = (ms: number) => new Promise((resolve) => setTimeout(resolve, ms));
  * This function returns the object we will be sending to the client.
  */
 export function getResponseShape() {
-	let i = 0;
+	const tuple = [1, 2, 3, 4, 5, 6, 7, 8, 9, 0];
 	async function* finiteListGenerator() {
-		while (i < 10) {
-			yield i++;
+		while (tuple.length) {
+			yield tuple.shift();
 			await sleep(500);
 		}
 	}

examples/sse/src/app/page.tsx

@@ -7,29 +7,12 @@ import { StreamedTuple } from "./StreamedTuple";
  */
 export default function Page() {
 	return (
-		<section className="flex flex-col h-screen justify-center items-center bg-gray-100 dark:bg-gray-800 space-y-6">
-			<div className="space-y-2">
-				<div className="space-y-2">
-					<h2 className="text-2xl text-center text-gray-800 dark:text-gray-200">
-						Infinite stream
-					</h2>
-					<div className="bg-white dark:bg-gray-900 p-8 rounded-xl shadow-md">
-						<div className="text-2xl text-center text-gray-800 dark:text-gray-200 font-mono">
-							<StreamedTime />
-						</div>
-					</div>
-				</div>
-			</div>
-
-			<div className="space-y-2">
-				<h2 className="text-2xl text-center text-gray-800 dark:text-gray-200">
-					Finite stream
-				</h2>
-				<div className="bg-white dark:bg-gray-900 p-8 rounded-xl shadow-md">
-					<div className="text-2xl text-center text-gray-800 dark:text-gray-200 font-mono">
-						<StreamedTuple />
-					</div>
-				</div>
+		<section className="flex h-screen justify-center items-center bg-gray-100 dark:bg-gray-800">
+			<div className="bg-white dark:bg-gray-900 p-8 rounded-xl shadow-md">
+				<h1 className="text-2xl text-center text-gray-800 dark:text-gray-200 font-mono">
+					<StreamedTime />
+					<StreamedTuple />
+				</h1>
 			</div>
 		</section>
 	);

examples/sse/src/app/tsonOptions.ts

@@ -1,5 +1,4 @@
 import {
-	TsonAbortError,
 	TsonAsyncOptions,
 	createTsonParseEventSource,
 	createTsonSSEResponse,
@@ -24,10 +23,3 @@ export const tsonOptions: TsonAsyncOptions = {
 };
 export const createSSEResponse = createTsonSSEResponse(tsonOptions);
 export const createEventSource = createTsonParseEventSource(tsonOptions);
-
-export function isAbortError(err: unknown): err is TsonAbortError {
-	return (
-		err instanceof TsonAbortError ||
-		(err instanceof Error && err.cause === TsonAbortError)
-	);
-}