Skip to content

Commit 233436d

Browse files
BoshenBoshen
committed
add vitest
1 parent 640ab58 commit 233436d

15 files changed

+707
-248
lines changed

‎apps/dashboard/package.json‎

Lines changed: 10 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,8 @@
77
"dev": "vite",
88
"build": "tsc -b && vite build",
99
"preview": "vite preview",
10-
"clean": "rm -rf dist"
10+
"clean": "rm -rf dist",
11+
"test": "vitest --browser --run"
1112
},
1213
"dependencies": {
1314
"lucide-react": "^0.542.0",
@@ -19,12 +20,19 @@
1920
},
2021
"devDependencies": {
2122
"@tailwindcss/vite": "^4.1.13",
23+
"@testing-library/react": "^16.3.0",
24+
"@testing-library/user-event": "^14.6.1",
2225
"@types/react": "^19.1.10",
2326
"@types/react-dom": "^19.1.7",
2427
"@types/react-router-dom": "^5.3.3",
2528
"@types/semver": "^7.7.1",
29+
"@vitest/browser": "^3.2.4",
30+
"@vitest/ui": "^3.2.4",
31+
"happy-dom": "^18.0.1",
32+
"playwright": "^1.55.0",
2633
"rolldown-vite": "7.1.5",
2734
"tailwindcss": "^4.1.13",
28-
"typescript": "catalog:"
35+
"typescript": "catalog:",
36+
"vitest": "^3.2.4"
2937
}
3038
}

‎apps/dashboard/src/App.tsx‎

Lines changed: 8 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,20 +1,18 @@
1-
import { BrowserRouter, Route, Routes } from 'react-router-dom';
1+
import { Route, Routes } from 'react-router-dom';
22
import Layout from './components/Layout';
33
import MinificationBenchmarksPage from './pages/MinificationBenchmarksPage';
44
import NpmDownloadsPage from './pages/NpmDownloadsPage';
55
import RolldownStatsPage from './pages/RolldownStatsPage';
66

77
function App() {
88
return (
9-
<BrowserRouter basename='/vibe-dashboard'>
10-
<Routes>
11-
<Route path='/' element={<Layout />}>
12-
<Route index element={<RolldownStatsPage />} />
13-
<Route path='minification' element={<MinificationBenchmarksPage />} />
14-
<Route path='npm-downloads' element={<NpmDownloadsPage />} />
15-
</Route>
16-
</Routes>
17-
</BrowserRouter>
9+
<Routes>
10+
<Route path='/' element={<Layout />}>
11+
<Route index element={<RolldownStatsPage />} />
12+
<Route path='minification' element={<MinificationBenchmarksPage />} />
13+
<Route path='npm-downloads' element={<NpmDownloadsPage />} />
14+
</Route>
15+
</Routes>
1816
);
1917
}
2018

‎apps/dashboard/src/MinificationBenchmarks.tsx‎

Lines changed: 47 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -70,20 +70,27 @@ interface MinificationBenchmarksProps {
7070
function MinificationBenchmarks({}: MinificationBenchmarksProps) {
7171
return (
7272
<>
73-
<main className="max-w-6xl mx-auto px-8 py-8 flex flex-col gap-8">
73+
<main className='max-w-6xl mx-auto px-8 py-8 flex flex-col gap-8'>
7474
{/* Combined Charts for Each Library - Time and Compression Side by Side */}
75-
<div className="flex flex-col gap-8">
75+
<div className='flex flex-col gap-8'>
7676
{libraries.map(library => {
7777
const timeData = getLibraryData(library, 'time');
7878
const compressionData = getLibraryData(library, 'compression');
7979

8080
return (
81-
<div key={library} className="bg-white border border-gray-200 rounded-xl px-6 py-6 shadow-sm transition-all duration-300 hover:shadow-md hover:-translate-y-0.5">
82-
<h3 className="mb-4 text-xl font-bold text-slate-800 capitalize text-center pb-2 border-b-2 border-slate-200">{library}</h3>
83-
<div className="grid grid-cols-1 lg:grid-cols-2 gap-8 mt-4">
81+
<div
82+
key={library}
83+
className='bg-white border border-gray-200 rounded-xl px-6 py-6 shadow-sm transition-all duration-300 hover:shadow-md hover:-translate-y-0.5'
84+
>
85+
<h3 className='mb-4 text-xl font-bold text-slate-800 capitalize text-center pb-2 border-b-2 border-slate-200'>
86+
{library}
87+
</h3>
88+
<div className='grid grid-cols-1 lg:grid-cols-2 gap-8 mt-4'>
8489
{/* Left column - Minification Time */}
85-
<div className="bg-slate-50 border border-gray-200 rounded-lg p-4">
86-
<h4 className="mb-4 text-base font-medium text-gray-700 text-center pb-2 border-b border-gray-200">Minification Time</h4>
90+
<div className='bg-slate-50 border border-gray-200 rounded-lg p-4'>
91+
<h4 className='mb-4 text-base font-medium text-gray-700 text-center pb-2 border-b border-gray-200'>
92+
Minification Time
93+
</h4>
8794
<ResponsiveContainer width='100%' height={300}>
8895
<BarChart data={timeData} margin={{ top: 20, right: 30, left: 20, bottom: 5 }}>
8996
<CartesianGrid strokeDasharray='3 3' stroke='#e5e7eb' />
@@ -124,8 +131,10 @@ function MinificationBenchmarks({}: MinificationBenchmarksProps) {
124131
</div>
125132

126133
{/* Right column - Compression Ratio */}
127-
<div className="bg-slate-50 border border-gray-200 rounded-lg p-4">
128-
<h4 className="mb-4 text-base font-medium text-gray-700 text-center pb-2 border-b border-gray-200">Compression Ratio</h4>
134+
<div className='bg-slate-50 border border-gray-200 rounded-lg p-4'>
135+
<h4 className='mb-4 text-base font-medium text-gray-700 text-center pb-2 border-b border-gray-200'>
136+
Compression Ratio
137+
</h4>
129138
<ResponsiveContainer width='100%' height={300}>
130139
<BarChart data={compressionData} margin={{ top: 20, right: 30, left: 20, bottom: 5 }}>
131140
<CartesianGrid strokeDasharray='3 3' stroke='#e5e7eb' />
@@ -173,27 +182,39 @@ function MinificationBenchmarks({}: MinificationBenchmarksProps) {
173182
})}
174183
</div>
175184

176-
<div className="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-4 gap-6">
185+
<div className='grid grid-cols-1 md:grid-cols-2 xl:grid-cols-4 gap-6'>
177186
{/* Minification statistics */}
178-
<div className="bg-white border border-slate-200 px-7 py-7 rounded-xl shadow-sm border-l-4 border-l-blue-500 transition-all duration-200 hover:-translate-y-0.5 hover:shadow-md">
179-
<h3 className="mb-3 text-slate-500 text-sm font-semibold uppercase tracking-widest">Libraries Tested</h3>
180-
<p className="mb-3 text-4xl font-bold text-slate-800 tracking-tight leading-tight">{Object.keys(minificationData).length}</p>
181-
<span className="text-sm font-semibold px-3 py-1.5 rounded-lg inline-flex items-center gap-1 text-emerald-700 bg-emerald-100 bg-opacity-100 border border-emerald-200 border-opacity-200">JavaScript Libraries</span>
187+
<div className='bg-white border border-slate-200 px-7 py-7 rounded-xl shadow-sm border-l-4 border-l-blue-500 transition-all duration-200 hover:-translate-y-0.5 hover:shadow-md'>
188+
<h3 className='mb-3 text-slate-500 text-sm font-semibold uppercase tracking-widest'>Libraries Tested</h3>
189+
<p className='mb-3 text-4xl font-bold text-slate-800 tracking-tight leading-tight'>
190+
{Object.keys(minificationData).length}
191+
</p>
192+
<span className='text-sm font-semibold px-3 py-1.5 rounded-lg inline-flex items-center gap-1 text-emerald-700 bg-emerald-100 bg-opacity-100 border border-emerald-200 border-opacity-200'>
193+
JavaScript Libraries
194+
</span>
182195
</div>
183-
<div className="bg-white border border-slate-200 px-7 py-7 rounded-xl shadow-sm border-l-4 border-l-blue-500 transition-all duration-200 hover:-translate-y-0.5 hover:shadow-md">
184-
<h3 className="mb-3 text-slate-500 text-sm font-semibold uppercase tracking-widest">Minifiers Compared</h3>
185-
<p className="mb-3 text-4xl font-bold text-slate-800 tracking-tight leading-tight">{popularMinifiers.length}</p>
186-
<span className="text-sm font-semibold px-3 py-1.5 rounded-lg inline-flex items-center gap-1 text-emerald-700 bg-emerald-100 bg-opacity-100 border border-emerald-200 border-opacity-200">Popular Tools</span>
196+
<div className='bg-white border border-slate-200 px-7 py-7 rounded-xl shadow-sm border-l-4 border-l-blue-500 transition-all duration-200 hover:-translate-y-0.5 hover:shadow-md'>
197+
<h3 className='mb-3 text-slate-500 text-sm font-semibold uppercase tracking-widest'>Minifiers Compared</h3>
198+
<p className='mb-3 text-4xl font-bold text-slate-800 tracking-tight leading-tight'>
199+
{popularMinifiers.length}
200+
</p>
201+
<span className='text-sm font-semibold px-3 py-1.5 rounded-lg inline-flex items-center gap-1 text-emerald-700 bg-emerald-100 bg-opacity-100 border border-emerald-200 border-opacity-200'>
202+
Popular Tools
203+
</span>
187204
</div>
188-
<div className="bg-white border border-slate-200 px-7 py-7 rounded-xl shadow-sm border-l-4 border-l-blue-500 transition-all duration-200 hover:-translate-y-0.5 hover:shadow-md">
189-
<h3 className="mb-3 text-slate-500 text-sm font-semibold uppercase tracking-widest">Fastest Minifier</h3>
190-
<p className="mb-3 text-4xl font-bold text-slate-800 tracking-tight leading-tight">OXC</p>
191-
<span className="text-sm font-semibold px-3 py-1.5 rounded-lg inline-flex items-center gap-1 text-emerald-700 bg-emerald-100 bg-opacity-100 border border-emerald-200 border-opacity-200">Rust-based</span>
205+
<div className='bg-white border border-slate-200 px-7 py-7 rounded-xl shadow-sm border-l-4 border-l-blue-500 transition-all duration-200 hover:-translate-y-0.5 hover:shadow-md'>
206+
<h3 className='mb-3 text-slate-500 text-sm font-semibold uppercase tracking-widest'>Fastest Minifier</h3>
207+
<p className='mb-3 text-4xl font-bold text-slate-800 tracking-tight leading-tight'>OXC</p>
208+
<span className='text-sm font-semibold px-3 py-1.5 rounded-lg inline-flex items-center gap-1 text-emerald-700 bg-emerald-100 bg-opacity-100 border border-emerald-200 border-opacity-200'>
209+
Rust-based
210+
</span>
192211
</div>
193-
<div className="bg-white border border-slate-200 px-7 py-7 rounded-xl shadow-sm border-l-4 border-l-blue-500 transition-all duration-200 hover:-translate-y-0.5 hover:shadow-md">
194-
<h3 className="mb-3 text-slate-500 text-sm font-semibold uppercase tracking-widest">Best Compression</h3>
195-
<p className="mb-3 text-4xl font-bold text-slate-800 tracking-tight leading-tight">UglifyJS</p>
196-
<span className="text-sm font-semibold px-3 py-1.5 rounded-lg inline-flex items-center gap-1 text-emerald-700 bg-emerald-100 bg-opacity-100 border border-emerald-200 border-opacity-200">Traditional Leader</span>
212+
<div className='bg-white border border-slate-200 px-7 py-7 rounded-xl shadow-sm border-l-4 border-l-blue-500 transition-all duration-200 hover:-translate-y-0.5 hover:shadow-md'>
213+
<h3 className='mb-3 text-slate-500 text-sm font-semibold uppercase tracking-widest'>Best Compression</h3>
214+
<p className='mb-3 text-4xl font-bold text-slate-800 tracking-tight leading-tight'>UglifyJS</p>
215+
<span className='text-sm font-semibold px-3 py-1.5 rounded-lg inline-flex items-center gap-1 text-emerald-700 bg-emerald-100 bg-opacity-100 border border-emerald-200 border-opacity-200'>
216+
Traditional Leader
217+
</span>
197218
</div>
198219
</div>
199220
</main>

‎apps/dashboard/src/NpmDownloads.tsx‎

Lines changed: 43 additions & 33 deletions
Original file line numberDiff line numberDiff line change
@@ -3,14 +3,14 @@ interface NpmDownloadsProps {}
33
// List of npm packages to display download counts for
44
const packages = [
55
'vite',
6-
'rolldown-vite',
6+
'rolldown-vite',
77
'rolldown',
88
'tsdown',
99
'oxlint',
1010
'oxc-parser',
1111
'oxc-transform',
1212
'oxc-minify',
13-
'oxc-resolver'
13+
'oxc-resolver',
1414
];
1515

1616
function NpmDownloads({}: NpmDownloadsProps) {
@@ -21,18 +21,18 @@ function NpmDownloads({}: NpmDownloadsProps) {
2121

2222
return (
2323
<>
24-
<main className="max-w-6xl mx-auto px-8 py-8 flex flex-col gap-8">
25-
<div className="bg-white border border-slate-200 px-8 py-8 rounded-xl shadow-sm">
26-
<h2 className="mb-6 text-slate-800 text-3xl font-bold tracking-tight">NPM Weekly Downloads</h2>
27-
28-
<div className="mx-auto mb-8 rounded-lg border border-slate-200 bg-white shadow-sm max-w-lg w-fit">
29-
<ul className="list-none p-0 m-0">
24+
<main className='max-w-6xl mx-auto px-8 py-8 flex flex-col gap-8'>
25+
<div className='bg-white border border-slate-200 px-8 py-8 rounded-xl shadow-sm'>
26+
<h2 className='mb-6 text-slate-800 text-3xl font-bold tracking-tight'>NPM Weekly Downloads</h2>
27+
28+
<div className='mx-auto mb-8 rounded-lg border border-slate-200 bg-white shadow-sm max-w-lg w-fit'>
29+
<ul className='list-none p-0 m-0'>
3030
{packages.map((packageName) => (
31-
<li
32-
key={packageName}
33-
className="flex items-center justify-between px-4 py-2 border-b border-slate-200 transition-all duration-200 cursor-pointer gap-3 min-w-fit hover:bg-slate-50 focus:outline-2 focus:outline-blue-500 focus:outline-offset-[-2px] focus:bg-slate-50 last:border-b-0"
31+
<li
32+
key={packageName}
33+
className='flex items-center justify-between px-4 py-2 border-b border-slate-200 transition-all duration-200 cursor-pointer gap-3 min-w-fit hover:bg-slate-50 focus:outline-2 focus:outline-blue-500 focus:outline-offset-[-2px] focus:bg-slate-50 last:border-b-0'
3434
onClick={() => handleCardClick(packageName)}
35-
role="button"
35+
role='button'
3636
tabIndex={0}
3737
onKeyDown={(e) => {
3838
if (e.key === 'Enter' || e.key === ' ') {
@@ -41,44 +41,54 @@ function NpmDownloads({}: NpmDownloadsProps) {
4141
}
4242
}}
4343
>
44-
<span className="font-mono text-sm font-medium text-gray-700 bg-slate-100 px-2 py-1 rounded border border-slate-300 min-w-fit whitespace-nowrap">{packageName}</span>
44+
<span className='font-mono text-sm font-medium text-gray-700 bg-slate-100 px-2 py-1 rounded border border-slate-300 min-w-fit whitespace-nowrap'>
45+
{packageName}
46+
</span>
4547
<img
46-
className="h-auto max-h-5 flex-shrink-0"
48+
className='h-auto max-h-5 flex-shrink-0'
4749
src={`https://img.shields.io/npm/dw/${packageName}?label=npm`}
4850
alt={`Weekly downloads for ${packageName}`}
49-
loading="lazy"
51+
loading='lazy'
5052
/>
5153
</li>
5254
))}
5355
</ul>
5456
</div>
5557
</div>
5658

57-
<div className="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-4 gap-6">
58-
<div className="bg-white border border-slate-200 px-7 py-7 rounded-xl shadow-sm border-l-4 border-l-blue-500 transition-all duration-200 hover:-translate-y-0.5 hover:shadow-md">
59-
<h3 className="mb-3 text-slate-500 text-sm font-semibold uppercase tracking-widest">Total Packages</h3>
60-
<p className="mb-3 text-4xl font-bold text-slate-800 tracking-tight leading-tight">{packages.length}</p>
61-
<span className="text-sm font-semibold px-3 py-1.5 rounded-lg inline-flex items-center gap-1 text-emerald-700 bg-emerald-100 bg-opacity-100 border border-emerald-200 border-opacity-200">NPM Packages</span>
59+
<div className='grid grid-cols-1 md:grid-cols-2 xl:grid-cols-4 gap-6'>
60+
<div className='bg-white border border-slate-200 px-7 py-7 rounded-xl shadow-sm border-l-4 border-l-blue-500 transition-all duration-200 hover:-translate-y-0.5 hover:shadow-md'>
61+
<h3 className='mb-3 text-slate-500 text-sm font-semibold uppercase tracking-widest'>Total Packages</h3>
62+
<p className='mb-3 text-4xl font-bold text-slate-800 tracking-tight leading-tight'>{packages.length}</p>
63+
<span className='text-sm font-semibold px-3 py-1.5 rounded-lg inline-flex items-center gap-1 text-emerald-700 bg-emerald-100 bg-opacity-100 border border-emerald-200 border-opacity-200'>
64+
NPM Packages
65+
</span>
6266
</div>
63-
<div className="bg-white border border-slate-200 px-7 py-7 rounded-xl shadow-sm border-l-4 border-l-blue-500 transition-all duration-200 hover:-translate-y-0.5 hover:shadow-md">
64-
<h3 className="mb-3 text-slate-500 text-sm font-semibold uppercase tracking-widest">Registry</h3>
65-
<p className="mb-3 text-4xl font-bold text-slate-800 tracking-tight leading-tight">NPM</p>
66-
<span className="text-sm font-semibold px-3 py-1.5 rounded-lg inline-flex items-center gap-1 text-emerald-700 bg-emerald-100 bg-opacity-100 border border-emerald-200 border-opacity-200">Public Registry</span>
67+
<div className='bg-white border border-slate-200 px-7 py-7 rounded-xl shadow-sm border-l-4 border-l-blue-500 transition-all duration-200 hover:-translate-y-0.5 hover:shadow-md'>
68+
<h3 className='mb-3 text-slate-500 text-sm font-semibold uppercase tracking-widest'>Registry</h3>
69+
<p className='mb-3 text-4xl font-bold text-slate-800 tracking-tight leading-tight'>NPM</p>
70+
<span className='text-sm font-semibold px-3 py-1.5 rounded-lg inline-flex items-center gap-1 text-emerald-700 bg-emerald-100 bg-opacity-100 border border-emerald-200 border-opacity-200'>
71+
Public Registry
72+
</span>
6773
</div>
68-
<div className="bg-white border border-slate-200 px-7 py-7 rounded-xl shadow-sm border-l-4 border-l-blue-500 transition-all duration-200 hover:-translate-y-0.5 hover:shadow-md">
69-
<h3 className="mb-3 text-slate-500 text-sm font-semibold uppercase tracking-widest">Update Frequency</h3>
70-
<p className="mb-3 text-4xl font-bold text-slate-800 tracking-tight leading-tight">Weekly</p>
71-
<span className="text-sm font-semibold px-3 py-1.5 rounded-lg inline-flex items-center gap-1 text-emerald-700 bg-emerald-100 bg-opacity-100 border border-emerald-200 border-opacity-200">Auto Updated</span>
74+
<div className='bg-white border border-slate-200 px-7 py-7 rounded-xl shadow-sm border-l-4 border-l-blue-500 transition-all duration-200 hover:-translate-y-0.5 hover:shadow-md'>
75+
<h3 className='mb-3 text-slate-500 text-sm font-semibold uppercase tracking-widest'>Update Frequency</h3>
76+
<p className='mb-3 text-4xl font-bold text-slate-800 tracking-tight leading-tight'>Weekly</p>
77+
<span className='text-sm font-semibold px-3 py-1.5 rounded-lg inline-flex items-center gap-1 text-emerald-700 bg-emerald-100 bg-opacity-100 border border-emerald-200 border-opacity-200'>
78+
Auto Updated
79+
</span>
7280
</div>
73-
<div className="bg-white border border-slate-200 px-7 py-7 rounded-xl shadow-sm border-l-4 border-l-blue-500 transition-all duration-200 hover:-translate-y-0.5 hover:shadow-md">
74-
<h3 className="mb-3 text-slate-500 text-sm font-semibold uppercase tracking-widest">Data Source</h3>
75-
<p className="mb-3 text-4xl font-bold text-slate-800 tracking-tight leading-tight">Shields.io</p>
76-
<span className="text-sm font-semibold px-3 py-1.5 rounded-lg inline-flex items-center gap-1 text-emerald-700 bg-emerald-100 bg-opacity-100 border border-emerald-200 border-opacity-200">Live Data</span>
81+
<div className='bg-white border border-slate-200 px-7 py-7 rounded-xl shadow-sm border-l-4 border-l-blue-500 transition-all duration-200 hover:-translate-y-0.5 hover:shadow-md'>
82+
<h3 className='mb-3 text-slate-500 text-sm font-semibold uppercase tracking-widest'>Data Source</h3>
83+
<p className='mb-3 text-4xl font-bold text-slate-800 tracking-tight leading-tight'>Shields.io</p>
84+
<span className='text-sm font-semibold px-3 py-1.5 rounded-lg inline-flex items-center gap-1 text-emerald-700 bg-emerald-100 bg-opacity-100 border border-emerald-200 border-opacity-200'>
85+
Live Data
86+
</span>
7787
</div>
7888
</div>
7989
</main>
8090
</>
8191
);
8292
}
8393

84-
export default NpmDownloads;
94+
export default NpmDownloads;

0 commit comments

Comments
 (0)