feat(benchmark): allow running benchmarks individually

pkgs/benchmark/src/App.tsx

@@ -1,6 +1,5 @@
-// import * as wasm from "@pow-captcha/solver-wasm";
 import * as powCaptcha from "@pow-captcha/pow-captcha";
-import { useEffect, useRef, useState } from "react";
+import { useCallback, useEffect, useState } from "react";
 
 async function benchmark(cb: () => void | Promise<void>): Promise<number> {
 	const start = performance.now();
@@ -10,27 +9,36 @@ async function benchmark(cb: () => void | Promise<void>): Promise<number> {
 }
 
 export default function App() {
-	const [durationJs, _setDurationJs] = useState<null | number>(null);
+	const [challenge, setChallenge] =
-	const [durationWasm, setDurationWasm] = useState<null | number>(null);
+		useState<null | powCaptcha.wire.Challenge>(null);
 
-	const [runBenchmark, setRunBenchmark] = useState(false);
+	const [durationJs, setDurationJs] = useState<null | string>(null);
-
+	const [durationWasm, setDurationWasm] = useState<null | string>(null);
-	const initStartedRef = useRef(false);
 
 	useEffect(() => {
-		if (!runBenchmark || initStartedRef.current) {
+		async function init() {
+			const challengesRaw = await powCaptcha.server.createChallengesRaw({
+				difficultyBits: 19,
+				challengeCount: 64,
+			});
+			setChallenge(challengesRaw);
+		}
+		init();
+	}, []);
+
+	const run = useCallback(
+		async (
+			engine: "wasm" | "js",
+			setter: React.Dispatch<React.SetStateAction<string | null>>,
+		) => {
+			try {
+				if (!challenge) {
 					return;
 				}
 
-		initStartedRef.current = true;
+				setter(`Running`);
 
-		async function init() {
+				const challenges = challenge.challenges.map(
-			const challengesRaw = await powCaptcha.server.createChallengesRaw({
-				difficultyBits: 18,
-				challengeCount: 32,
-			});
-
-			const challenges = challengesRaw.challenges.map(
 					(challenge) =>
 						[
 							powCaptcha.wire.deserializeArray(challenge[0]),
@@ -38,47 +46,53 @@ export default function App() {
 						] as const,
 				);
 
-			const durationWasm = await benchmark(async () => {
+				const duration = await benchmark(async () => {
-				const solutions = await powCaptcha.solver.solveChallenges({
+					await powCaptcha.solver.solveChallenges({
-					difficultyBits: challengesRaw.difficultyBits,
+						difficultyBits: challenge.difficultyBits,
 						challenges,
-					engine: "wasm",
+						engine,
 					});
-				console.log("wasm solutions", solutions);
 				});
-			setDurationWasm(durationWasm);
 
-			// const durationJs = await benchmark(async () => {
+				setter(`${duration.toFixed(1)}ms`);
-			// 	const solutions = await powCaptcha.solver.solveChallenges({
+			} catch (err) {
-			// 		difficultyBits: challengesRaw.difficultyBits,
+				setter(`Error: ${err}`);
-			// 		challenges,
-			// 		engine: "js",
-			// 	});
-			// 	console.log("js solutions", solutions);
-			// });
-			// setDurationJs(durationJs);
 			}
+		},
+		[challenge],
+	);
 
-		init();
+	const runJs = useCallback(async () => {
-	}, [runBenchmark]);
+		await run("js", setDurationJs);
+	}, [run]);
+
+	const runWasm = useCallback(async () => {
+		await run("wasm", setDurationWasm);
+	}, [run]);
 
 	return (
 		<div>
 			<h1>pow-captcha Benchmark</h1>
-			<button onClick={() => setRunBenchmark(true)}>run</button>
 			Results:
 			<table>
 				<tr>
 					<th>type</th>
 					<th>duration</th>
+					<th></th>
 				</tr>
 				<tr>
 					<td>wasm</td>
-					<td>{durationWasm}ms</td>
+					<td>{durationWasm}</td>
+					<td>
+						<button onClick={runWasm}>run</button>
+					</td>
 				</tr>
 				<tr>
 					<td>js</td>
-					<td>{durationJs}ms</td>
+					<td>{durationJs}</td>
+					<td>
+						<button onClick={runJs}>run</button>
+					</td>
 				</tr>
 			</table>
 		</div>