feat: migrate from React to Preact, add Vitest testing, and optimize bundle

Major framework and tooling changes:
- Migrate from React 19 to Preact 10 with preact-iso for routing
- Replace @mantine/hooks with custom hooks (useBooleanToggle, useViewportSize)
- Switch from @heroicons/react to lucide-preact for icons
- Replace chance.js with random-js for RNG

Testing infrastructure:
- Add Vitest with @testing-library/preact and happy-dom
- Set up test configuration and initial App tests
- Add Vitest UI for interactive test running

Build optimizations:
- Add cssnano for CSS minification
- Configure aggressive bundle optimizations in Vite
- Update to Tailwind CSS 4.1.17

Project structure:
- Consolidate entry point from main.tsx to index.tsx
- Reorganize CSS location (styles/index.css → index.css)
- Add ESLint with preact config
- Update TypeScript configuration for Preact
This commit is contained in:
Ryan Walters
2025-11-06 21:56:53 -06:00
parent d668a21750
commit e632e69b91
18 changed files with 3057 additions and 532 deletions

View File

@@ -1,6 +1,5 @@
import { defineConfig, loadEnv } from "vite";
import react from "@vitejs/plugin-react";
import tsconfigPaths from "vite-tsconfig-paths";
import preact from "@preact/preset-vite";
import tailwindcss from "@tailwindcss/vite";
import { visualizer } from "rollup-plugin-visualizer";
import cssnano from "cssnano";
@@ -12,11 +11,13 @@ export default ({ mode }) => {
return defineConfig({
base: "/",
plugins: [
react(),
tsconfigPaths(),
preact({
prerender: {
enabled: true,
renderTarget: "#root",
},
}),
tailwindcss(),
cssnano(),
visualizer({
template: "treemap",
open: true, // Automatically open the report in your browser after build
@@ -25,17 +26,5 @@ export default ({ mode }) => {
brotliSize: true, // Show brotli size
}),
],
build: {
rollupOptions: {
treeshake: {
// Remove unused module exports
moduleSideEffects: false,
// Optimize property access
propertyReadSideEffects: false,
// Remove unused imports
tryCatchDeoptimization: false,
},
},
},
});
};