refactor(benchmark): use react-router instead of just vite

2025-07-14 21:39:50 +02:00
parent f52f7312a4
commit 9d175e31e8
13 changed files with 781 additions and 170 deletions
--- a/pkgs/benchmark/app/App.tsx
+++ b/pkgs/benchmark/app/App.tsx
@@ -0,0 +1,91 @@
+import * as powCaptcha from "@pow-captcha/pow-captcha";
+import { useCallback, useState } from "react";
+import type { Route } from "./+types/App";
+
+export async function loader({ params }: Route.LoaderArgs) {
+	const challenge = await powCaptcha.server.createChallengesRaw({
+		difficultyBits: 19,
+		challengeCount: 64,
+	});
+
+	return { challenge };
+}
+
+export default function App({
+	loaderData: { challenge },
+}: Route.ComponentProps) {
+	const [durationJs, setDurationJs] = useState<null | string>(null);
+	const [durationWasm, setDurationWasm] = useState<null | string>(null);
+
+	const run = useCallback(
+		async (
+			engine: "wasm" | "js",
+			setter: React.Dispatch<React.SetStateAction<string | null>>,
+		) => {
+			try {
+				setter(`Running`);
+
+				const challenges = challenge.challenges.map(
+					(challenge) =>
+						[
+							powCaptcha.wire.deserializeArray(challenge[0]),
+							powCaptcha.wire.deserializeArray(challenge[1]),
+						] as const,
+				);
+
+				const start = performance.now();
+				await powCaptcha.solver.solveChallenges({
+					difficultyBits: challenge.difficultyBits,
+					challenges,
+					engine,
+				});
+				const duration = performance.now() - start;
+
+				setter(`${duration.toFixed(1)}ms`);
+			} catch (err) {
+				setter(`Error: ${err}`);
+			}
+		},
+		[challenge],
+	);
+
+	const runJs = useCallback(async () => {
+		await run("js", setDurationJs);
+	}, [run]);
+
+	const runWasm = useCallback(async () => {
+		await run("wasm", setDurationWasm);
+	}, [run]);
+
+	return (
+		<div>
+			<h1>pow-captcha Benchmark</h1>
+			Results:
+			<table>
+				<thead>
+					<tr>
+						<th>type</th>
+						<th>duration</th>
+						<th></th>
+					</tr>
+				</thead>
+				<tbody>
+					<tr>
+						<td>wasm</td>
+						<td>{durationWasm}</td>
+						<td>
+							<button onClick={runWasm}>run</button>
+						</td>
+					</tr>
+					<tr>
+						<td>js</td>
+						<td>{durationJs}</td>
+						<td>
+							<button onClick={runJs}>run</button>
+						</td>
+					</tr>
+				</tbody>
+			</table>
+		</div>
+	);
+}
--- a/pkgs/benchmark/app/root.tsx
+++ b/pkgs/benchmark/app/root.tsx
@@ -0,0 +1,15 @@
+import { Outlet, Scripts } from "react-router";
+
+export default function App() {
+	return (
+		<html lang="en">
+			<head>
+				<title>pow-captcha Benchmark</title>
+			</head>
+			<body>
+				<Outlet />
+				<Scripts />
+			</body>
+		</html>
+	);
+}
--- a/pkgs/benchmark/app/routes.ts
+++ b/pkgs/benchmark/app/routes.ts
@@ -0,0 +1,3 @@
+import { type RouteConfig, index } from "@react-router/dev/routes";
+
+export default [index("./App.tsx")] satisfies RouteConfig;
--- a/pkgs/benchmark/app/vite-env.d.ts
+++ b/pkgs/benchmark/app/vite-env.d.ts
@@ -0,0 +1 @@
+/// <reference types="vite/client" />