chore(deps)!: vite 8 (rolldown) + @vitejs/plugin-react 6 (4h)

Build drops 6.5s -> 0.65s. Three breakages found by the prod-smoke gate,
all fixed:

- rolldown removed object-form manualChunks -> function form in
  vite.config.mjs (same vendor split, all @radix/@tanstack grouped)
- the 4a 'send' bump rejects bare absolute paths: SPA fallback sendFile
  and both download routes (admin backup, user-db export) now use the
  root-option form
- rolldown minifies inline HTML scripts, breaking any CSP hash approach:
  the pre-paint theme script moved to client/public/theme-init.js so
  script-src 'self' holds with no inline hash to maintain

@testing-library/dom added (peer no longer auto-installed). Server 252,
client 52, probe 18/18, PROD SMOKE: PASS.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
This commit is contained in:
null 2026-07-10 17:53:27 -05:00
parent a1b7011149
commit d8365d0e22
7 changed files with 228 additions and 728 deletions

View File

@ -0,0 +1,24 @@
// Pre-bundle theme apply — avoids a light/dark flash. Mirrors applyTheme in
// client/contexts/ThemeContext.tsx (theme 'system' follows the OS).
// External file (not inline in index.html) so the CSP stays `script-src 'self'`
// with no inline-hash maintenance across build-tool upgrades.
(function () {
try {
var s = localStorage.getItem('bt-theme');
if (s === 'dark-purple') s = 'dark';
var theme = s === 'light' || s === 'dark' || s === 'system' ? s : 'dark';
var resolved =
theme === 'system'
? window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches
? 'dark'
: 'light'
: theme;
var root = document.documentElement;
if (resolved === 'dark') root.classList.add('dark');
else root.classList.remove('dark');
var m = document.querySelector('meta[name="theme-color"]');
if (m) m.setAttribute('content', resolved === 'dark' ? '#101417' : '#f8faf9');
} catch (e) {
/* localStorage/matchMedia unavailable — keep default */
}
})();

View File

@ -23,24 +23,9 @@
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent"> <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
<meta name="apple-mobile-web-app-title" content="Bill Tracker"> <meta name="apple-mobile-web-app-title" content="Bill Tracker">
<title>Bill Tracker</title> <title>Bill Tracker</title>
<script> <!-- Pre-bundle theme apply (external so CSP stays script-src 'self'): a
// Pre-bundle theme apply — avoids a light/dark flash. Mirrors applyTheme in classic script blocks parsing, so the class lands before first paint. -->
// client/contexts/ThemeContext.tsx (theme 'system' follows the OS). <script src="/theme-init.js"></script>
(function () {
try {
var s = localStorage.getItem('bt-theme');
if (s === 'dark-purple') s = 'dark';
var theme = (s === 'light' || s === 'dark' || s === 'system') ? s : 'dark';
var resolved = theme === 'system'
? ((window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) ? 'dark' : 'light')
: theme;
var root = document.documentElement;
if (resolved === 'dark') root.classList.add('dark'); else root.classList.remove('dark');
var m = document.querySelector('meta[name="theme-color"]');
if (m) m.setAttribute('content', resolved === 'dark' ? '#101417' : '#f8faf9');
} catch (e) { /* localStorage/matchMedia unavailable — keep default */ }
})();
</script>
</head> </head>
<body> <body>
<div id="root"></div> <div id="root"></div>

867
package-lock.json generated

File diff suppressed because it is too large Load Diff

View File

@ -66,7 +66,7 @@
"qrcode": "^1.5.4", "qrcode": "^1.5.4",
"react": "^19.2.7", "react": "^19.2.7",
"react-dom": "^19.2.7", "react-dom": "^19.2.7",
"react-router-dom": "^6.26.2", "react-router-dom": "^7.18.1",
"sonner": "^2.0.7", "sonner": "^2.0.7",
"tailwind-merge": "^2.5.4", "tailwind-merge": "^2.5.4",
"tailwindcss-animate": "^1.0.7", "tailwindcss-animate": "^1.0.7",
@ -76,11 +76,12 @@
"@axe-core/playwright": "^4.10.1", "@axe-core/playwright": "^4.10.1",
"@eslint/js": "^10.0.1", "@eslint/js": "^10.0.1",
"@playwright/test": "^1.50.1", "@playwright/test": "^1.50.1",
"@testing-library/dom": "^10.4.1",
"@testing-library/react": "^16.3.2", "@testing-library/react": "^16.3.2",
"@types/node": "^26.1.0", "@types/node": "^26.1.0",
"@types/react": "^19.2.17", "@types/react": "^19.2.17",
"@types/react-dom": "^19.2.3", "@types/react-dom": "^19.2.3",
"@vitejs/plugin-react": "^4.3.3", "@vitejs/plugin-react": "^6.0.3",
"autoprefixer": "^10.4.20", "autoprefixer": "^10.4.20",
"babel-plugin-react-compiler": "^1.0.0", "babel-plugin-react-compiler": "^1.0.0",
"concurrently": "^10.0.3", "concurrently": "^10.0.3",
@ -97,7 +98,7 @@
"tailwindcss": "^3.4.14", "tailwindcss": "^3.4.14",
"typescript": "^6.0.3", "typescript": "^6.0.3",
"typescript-eslint": "^8.62.1", "typescript-eslint": "^8.62.1",
"vite": "^5.4.10", "vite": "^8.1.4",
"vite-plugin-pwa": "^1.3.0", "vite-plugin-pwa": "^1.3.0",
"vitest": "^4.1.8" "vitest": "^4.1.8"
}, },

View File

@ -149,9 +149,16 @@ router.get('/backups/:id/download', (req: Req, res: Res) => {
const backup = getBackupFile(req.params.id); const backup = getBackupFile(req.params.id);
res.setHeader('Content-Type', 'application/octet-stream'); res.setHeader('Content-Type', 'application/octet-stream');
res.setHeader('X-Content-Type-Options', 'nosniff'); res.setHeader('X-Content-Type-Options', 'nosniff');
res.download(backup.path, backup.metadata.id, (err) => { // root-option form: send >= 2026-07 rejects bare absolute paths (4a dep sweep)
const pathMod = require('path');
res.download(
pathMod.basename(backup.path),
backup.metadata.id,
{ root: pathMod.dirname(backup.path) },
(err) => {
if (err && !res.headersSent) sendError(res, err); if (err && !res.headersSent) sendError(res, err);
}); },
);
} catch (err) { } catch (err) {
sendError(res, err); sendError(res, err);
} }

View File

@ -273,7 +273,8 @@ const { getCsrfToken } = require('./middleware/csrf.cts');
app.get('/{*splat}', (req, res) => { app.get('/{*splat}', (req, res) => {
// Set CSRF cookie if not present (needed for SPA to read token) // Set CSRF cookie if not present (needed for SPA to read token)
getCsrfToken(req, res); getCsrfToken(req, res);
res.sendFile(path.join(DIST, 'index.html')); // root-option form: send >= 2026-07 rejects bare absolute paths (4a dep sweep)
res.sendFile('index.html', { root: DIST });
}); });
// ── Global error handler ────────────────────────────────────────────────────── // ── Global error handler ──────────────────────────────────────────────────────

View File

@ -103,18 +103,15 @@ export default defineConfig({
output: { output: {
// QA-B0-01: split the shared vendor code out of the ~659 kB index chunk // QA-B0-01: split the shared vendor code out of the ~659 kB index chunk
// so large libs load/cache independently and the main bundle shrinks. // so large libs load/cache independently and the main bundle shrinks.
manualChunks: { // Function form: vite 8 (rolldown core) dropped the object form.
'vendor-react': ['react', 'react-dom', 'react-router-dom'], manualChunks(id) {
'vendor-radix': [ if (!id.includes('node_modules')) return undefined;
'@radix-ui/react-dialog', if (/node_modules[\\/](react|react-dom|react-router|react-router-dom)[\\/]/.test(id))
'@radix-ui/react-select', return 'vendor-react';
'@radix-ui/react-dropdown-menu', if (/node_modules[\\/]@radix-ui[\\/]/.test(id)) return 'vendor-radix';
'@radix-ui/react-tabs', if (/node_modules[\\/]framer-motion[\\/]/.test(id)) return 'vendor-motion';
'@radix-ui/react-tooltip', if (/node_modules[\\/]@tanstack[\\/]/.test(id)) return 'vendor-query';
'@radix-ui/react-alert-dialog', return undefined;
],
'vendor-motion': ['framer-motion'],
'vendor-query': ['@tanstack/react-query', '@tanstack/react-virtual'],
}, },
}, },
}, },