Public
HTTP (preview)
stevekrouse-perf.web.val.run
Readme

Perf - a website performance tester

I had Anthropic build this for me to show off the launch of HTTP (Preview) vals: https://blog.val.town/blog/http-preview/

Screenshot 2024-07-17 at 14.14.45@2x.png

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
/** @jsxImportSource https://esm.sh/react */
import pLimit from "https://esm.sh/p-limit";
import React, { useCallback, useState } from "https://esm.sh/react";
import { hydrateRoot } from "https://esm.sh/react-dom/client";
import { renderToReadableStream } from "https://esm.sh/react-dom/server";
import { extractValInfo } from "https://esm.town/v/pomdtr/extractValInfo";
// Utility functions
const performSingleRequest = async (url) => {
const start = performance.now();
try {
await fetch(url);
const end = performance.now();
return end - start;
} catch (error) {
console.error("Error fetching URL:", error);
return null;
}
};
const performRequests = async (url, count, concurrency, onProgress) => {
const limit = pLimit(concurrency);
const tasks = Array(count).fill().map(() => limit(() => performSingleRequest(url)));
const results = [];
for (const task of tasks) {
const result = await task;
if (result !== null) {
results.push(result);
onProgress(results);
}
}
return results;
};
const calculateStats = (times) => {
if (times.length === 0) {
return { average: 0, lowest: 0, highest: 0 };
}
return {
average: times.reduce((a, b) => a + b, 0) / times.length,
lowest: Math.min(...times),
highest: Math.max(...times),
};
};
// Helper function to safely format numbers
const safeToFixed = (number, decimalPlaces) => {
return number !== undefined && number !== null
? Number(number).toFixed(decimalPlaces)
: "N/A";
};
// React components
const TestForm = ({ onSubmit, isLoading }) => {
const [url, setUrl] = useState("");
const [numRequests, setNumRequests] = useState(5);
const [prewarmRequests, setPrewarmRequests] = useState(10);
const [concurrency, setConcurrency] = useState(2);
const handleSubmit = (e) => {
e.preventDefault();
onSubmit({ url, numRequests, prewarmRequests, concurrency });
};
return (
<form onSubmit={handleSubmit} className="space-y-4">
<div>
<label htmlFor="url" className="block text-sm font-medium text-gray-700 mb-1">Website URL</label>
<input
id="url"
type="text"
value={url}
onChange={(e) => setUrl(e.target.value)}
placeholder="https://example.com"
className="w-full p-2 border border-gray-300 rounded-md"
/>
</div>
<div>
<label htmlFor="numRequests" className="block text-sm font-medium text-gray-700 mb-1">
Number of Requests
</label>
<input
id="numRequests"
type="number"
value={numRequests}
onChange={(e) => setNumRequests(parseInt(e.target.value))}
min="1"
className="w-full p-2 border border-gray-300 rounded-md"
/>
</div>
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
<div>
<label htmlFor="prewarmRequests" className="block text-xs font-medium text-gray-500 mb-1">
Pre-Warm Requests
</label>
<input
id="prewarmRequests"
type="number"
Val Town is a social website to write and deploy JavaScript.
Build APIs and schedule functions from your browser.
Comments
1
smca avatar

love it

July 17, 2024