diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index edb97b1789..46f5a739d8 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -605,7 +605,7 @@ importers: version: link:../eslint-config-bai eslint-plugin-import: specifier: 'catalog:' - version: 2.32.0(@typescript-eslint/parser@7.18.0(eslint@9.39.4(jiti@1.21.7))(typescript@5.5.4))(eslint@9.39.4(jiti@1.21.7)) + version: 2.32.0(@typescript-eslint/parser@8.57.1(eslint@9.39.4(jiti@1.21.7))(typescript@5.9.3))(eslint@9.39.4(jiti@1.21.7)) eslint-plugin-json-schema-validator: specifier: 'catalog:' version: 5.5.1(eslint@9.39.4(jiti@1.21.7)) @@ -692,7 +692,7 @@ importers: version: 7.0.1(eslint@9.39.4(jiti@1.21.7)) typescript-eslint: specifier: 'catalog:' - version: 8.57.1(eslint@9.39.4(jiti@1.21.7))(typescript@5.5.4) + version: 8.57.1(eslint@9.39.4(jiti@1.21.7))(typescript@5.9.3) react: dependencies: @@ -1038,7 +1038,7 @@ importers: version: link:../packages/eslint-config-bai eslint-plugin-import: specifier: 'catalog:' - version: 2.32.0(@typescript-eslint/parser@8.57.1(eslint@9.39.4(jiti@1.21.7))(typescript@5.7.3))(eslint@9.39.4(jiti@1.21.7)) + version: 2.32.0(@typescript-eslint/parser@5.62.0(eslint@9.39.4(jiti@1.21.7))(typescript@5.7.3))(eslint@9.39.4(jiti@1.21.7)) eslint-plugin-react: specifier: 'catalog:' version: 7.37.5(eslint@9.39.4(jiti@1.21.7)) @@ -1102,6 +1102,9 @@ importers: vite-plugin-node-polyfills: specifier: ^0.24.0 version: 0.24.0(rollup@2.80.0)(vite@6.4.1(@types/node@22.19.15)(jiti@1.21.7)(terser@5.46.0)(tsx@4.21.0)(yaml@2.8.3)) + vite-plugin-pwa: + specifier: ^1.2.0 + version: 1.2.0(vite@6.4.1(@types/node@22.19.15)(jiti@1.21.7)(terser@5.46.0)(tsx@4.21.0)(yaml@2.8.3))(workbox-build@7.4.0(@types/babel__core@7.20.5))(workbox-window@7.4.0) vite-plugin-svgr: specifier: ^4.5.0 version: 4.5.0(rollup@2.80.0)(typescript@5.7.3)(vite@6.4.1(@types/node@22.19.15)(jiti@1.21.7)(terser@5.46.0)(tsx@4.21.0)(yaml@2.8.3)) @@ -11802,6 +11805,10 @@ packages: resolution: {integrity: sha512-FFw039TmrBqFK8ma/7OL3sDz/VytdtJr044/QUJtH0wK9lb9jLq9tJyIxUwtQJHwar2BqtiA4iCWSwo9JLkzFg==} engines: {node: '>=6'} + pretty-bytes@6.1.1: + resolution: {integrity: sha512-mQUvGU6aUFQ+rNvTIAcZuWGRT9a6f6Yrg9bHs4ImKF+HZCEK+plBvnAZYSIQztknZF2qnzNtr6F8s0+IuptdlQ==} + engines: {node: ^14.13.1 || >=16.0.0} + pretty-error@4.0.0: resolution: {integrity: sha512-AoJ5YMAcXKYxKhuJGdcvse+Voc6v1RgnsR3nWcYU7q4t6z0Q6T86sv5Zq8VIRbOWWFpvdGE83LtdSMNd+6Y0xw==} @@ -14007,6 +14014,18 @@ packages: peerDependencies: vite: ^2.0.0 || ^3.0.0 || ^4.0.0 || ^5.0.0 || ^6.0.0 || ^7.0.0 + vite-plugin-pwa@1.2.0: + resolution: {integrity: sha512-a2xld+SJshT9Lgcv8Ji4+srFJL4k/1bVbd1x06JIkvecpQkwkvCncD1+gSzcdm3s+owWLpMJerG3aN5jupJEVw==} + engines: {node: '>=16.0.0'} + peerDependencies: + '@vite-pwa/assets-generator': ^1.0.0 + vite: ^3.1.0 || ^4.0.0 || ^5.0.0 || ^6.0.0 || ^7.0.0 + workbox-build: ^7.4.0 + workbox-window: ^7.4.0 + peerDependenciesMeta: + '@vite-pwa/assets-generator': + optional: true + vite-plugin-relay-lite@0.11.0: resolution: {integrity: sha512-7Wgc0BgkkEfSX9vUQOrJfeATPvqsfrhKWlvsYjWFDwNQp3AGeA7j59x/NqRkpb/Yy1Q8cYHD0XPYJw1C5uqg+A==} engines: {node: '>= 18.0.0'} @@ -20241,10 +20260,10 @@ snapshots: '@types/node': 25.3.5 optional: true - '@typescript-eslint/eslint-plugin@5.62.0(@typescript-eslint/parser@8.57.1(eslint@9.39.4(jiti@1.21.7))(typescript@5.7.3))(eslint@9.39.4(jiti@1.21.7))(typescript@5.7.3)': + '@typescript-eslint/eslint-plugin@5.62.0(@typescript-eslint/parser@5.62.0(eslint@9.39.4(jiti@1.21.7))(typescript@5.7.3))(eslint@9.39.4(jiti@1.21.7))(typescript@5.7.3)': dependencies: '@eslint-community/regexpp': 4.12.2 - '@typescript-eslint/parser': 8.57.1(eslint@9.39.4(jiti@1.21.7))(typescript@5.7.3) + '@typescript-eslint/parser': 5.62.0(eslint@9.39.4(jiti@1.21.7))(typescript@5.7.3) '@typescript-eslint/scope-manager': 5.62.0 '@typescript-eslint/type-utils': 5.62.0(eslint@9.39.4(jiti@1.21.7))(typescript@5.7.3) '@typescript-eslint/utils': 5.62.0(eslint@9.39.4(jiti@1.21.7))(typescript@5.7.3) @@ -20278,22 +20297,6 @@ snapshots: transitivePeerDependencies: - supports-color - '@typescript-eslint/eslint-plugin@8.57.1(@typescript-eslint/parser@8.57.1(eslint@9.39.4(jiti@1.21.7))(typescript@5.5.4))(eslint@9.39.4(jiti@1.21.7))(typescript@5.5.4)': - dependencies: - '@eslint-community/regexpp': 4.12.2 - '@typescript-eslint/parser': 8.57.1(eslint@9.39.4(jiti@1.21.7))(typescript@5.5.4) - '@typescript-eslint/scope-manager': 8.57.1 - '@typescript-eslint/type-utils': 8.57.1(eslint@9.39.4(jiti@1.21.7))(typescript@5.5.4) - '@typescript-eslint/utils': 8.57.1(eslint@9.39.4(jiti@1.21.7))(typescript@5.5.4) - '@typescript-eslint/visitor-keys': 8.57.1 - eslint: 9.39.4(jiti@1.21.7) - ignore: 7.0.5 - natural-compare: 1.4.0 - ts-api-utils: 2.4.0(typescript@5.5.4) - typescript: 5.5.4 - transitivePeerDependencies: - - supports-color - '@typescript-eslint/eslint-plugin@8.57.1(@typescript-eslint/parser@8.57.1(eslint@9.39.4(jiti@1.21.7))(typescript@5.7.3))(eslint@9.39.4(jiti@1.21.7))(typescript@5.7.3)': dependencies: '@eslint-community/regexpp': 4.12.2 @@ -20359,18 +20362,6 @@ snapshots: transitivePeerDependencies: - supports-color - '@typescript-eslint/parser@8.57.1(eslint@9.39.4(jiti@1.21.7))(typescript@5.5.4)': - dependencies: - '@typescript-eslint/scope-manager': 8.57.1 - '@typescript-eslint/types': 8.57.1 - '@typescript-eslint/typescript-estree': 8.57.1(typescript@5.5.4) - '@typescript-eslint/visitor-keys': 8.57.1 - debug: 4.4.3(supports-color@5.5.0) - eslint: 9.39.4(jiti@1.21.7) - typescript: 5.5.4 - transitivePeerDependencies: - - supports-color - '@typescript-eslint/parser@8.57.1(eslint@9.39.4(jiti@1.21.7))(typescript@5.7.3)': dependencies: '@typescript-eslint/scope-manager': 8.57.1 @@ -20413,15 +20404,6 @@ snapshots: transitivePeerDependencies: - supports-color - '@typescript-eslint/project-service@8.57.1(typescript@5.5.4)': - dependencies: - '@typescript-eslint/tsconfig-utils': 8.57.1(typescript@5.5.4) - '@typescript-eslint/types': 8.57.1 - debug: 4.4.3(supports-color@5.5.0) - typescript: 5.5.4 - transitivePeerDependencies: - - supports-color - '@typescript-eslint/project-service@8.57.1(typescript@5.7.3)': dependencies: '@typescript-eslint/tsconfig-utils': 8.57.1(typescript@5.7.3) @@ -20468,10 +20450,6 @@ snapshots: dependencies: typescript: 5.9.3 - '@typescript-eslint/tsconfig-utils@8.57.1(typescript@5.5.4)': - dependencies: - typescript: 5.5.4 - '@typescript-eslint/tsconfig-utils@8.57.1(typescript@5.7.3)': dependencies: typescript: 5.7.3 @@ -20504,18 +20482,6 @@ snapshots: transitivePeerDependencies: - supports-color - '@typescript-eslint/type-utils@8.57.1(eslint@9.39.4(jiti@1.21.7))(typescript@5.5.4)': - dependencies: - '@typescript-eslint/types': 8.57.1 - '@typescript-eslint/typescript-estree': 8.57.1(typescript@5.5.4) - '@typescript-eslint/utils': 8.57.1(eslint@9.39.4(jiti@1.21.7))(typescript@5.5.4) - debug: 4.4.3(supports-color@5.5.0) - eslint: 9.39.4(jiti@1.21.7) - ts-api-utils: 2.4.0(typescript@5.5.4) - typescript: 5.5.4 - transitivePeerDependencies: - - supports-color - '@typescript-eslint/type-utils@8.57.1(eslint@9.39.4(jiti@1.21.7))(typescript@5.7.3)': dependencies: '@typescript-eslint/types': 8.57.1 @@ -20607,21 +20573,6 @@ snapshots: transitivePeerDependencies: - supports-color - '@typescript-eslint/typescript-estree@8.57.1(typescript@5.5.4)': - dependencies: - '@typescript-eslint/project-service': 8.57.1(typescript@5.5.4) - '@typescript-eslint/tsconfig-utils': 8.57.1(typescript@5.5.4) - '@typescript-eslint/types': 8.57.1 - '@typescript-eslint/visitor-keys': 8.57.1 - debug: 4.4.3(supports-color@5.5.0) - minimatch: 10.2.4 - semver: 7.7.4 - tinyglobby: 0.2.15 - ts-api-utils: 2.4.0(typescript@5.5.4) - typescript: 5.5.4 - transitivePeerDependencies: - - supports-color - '@typescript-eslint/typescript-estree@8.57.1(typescript@5.7.3)': dependencies: '@typescript-eslint/project-service': 8.57.1(typescript@5.7.3) @@ -20700,17 +20651,6 @@ snapshots: transitivePeerDependencies: - supports-color - '@typescript-eslint/utils@8.57.1(eslint@9.39.4(jiti@1.21.7))(typescript@5.5.4)': - dependencies: - '@eslint-community/eslint-utils': 4.9.1(eslint@9.39.4(jiti@1.21.7)) - '@typescript-eslint/scope-manager': 8.57.1 - '@typescript-eslint/types': 8.57.1 - '@typescript-eslint/typescript-estree': 8.57.1(typescript@5.5.4) - eslint: 9.39.4(jiti@1.21.7) - typescript: 5.5.4 - transitivePeerDependencies: - - supports-color - '@typescript-eslint/utils@8.57.1(eslint@9.39.4(jiti@1.21.7))(typescript@5.7.3)': dependencies: '@eslint-community/eslint-utils': 4.9.1(eslint@9.39.4(jiti@1.21.7)) @@ -23685,7 +23625,7 @@ snapshots: '@babel/core': 7.29.0 '@babel/eslint-parser': 7.25.9(@babel/core@7.29.0)(eslint@9.39.4(jiti@1.21.7)) '@rushstack/eslint-patch': 1.10.4 - '@typescript-eslint/eslint-plugin': 5.62.0(@typescript-eslint/parser@8.57.1(eslint@9.39.4(jiti@1.21.7))(typescript@5.7.3))(eslint@9.39.4(jiti@1.21.7))(typescript@5.7.3) + '@typescript-eslint/eslint-plugin': 5.62.0(@typescript-eslint/parser@5.62.0(eslint@9.39.4(jiti@1.21.7))(typescript@5.7.3))(eslint@9.39.4(jiti@1.21.7))(typescript@5.7.3) '@typescript-eslint/parser': 5.62.0(eslint@9.39.4(jiti@1.21.7))(typescript@5.7.3) babel-preset-react-app: 10.1.0 confusing-browser-globals: 1.0.11 @@ -23741,11 +23681,11 @@ snapshots: transitivePeerDependencies: - supports-color - eslint-module-utils@2.12.1(@typescript-eslint/parser@8.57.1(eslint@9.39.4(jiti@1.21.7))(typescript@5.7.3))(eslint-import-resolver-node@0.3.9)(eslint@9.39.4(jiti@1.21.7)): + eslint-module-utils@2.12.1(@typescript-eslint/parser@8.57.1(eslint@9.39.4(jiti@1.21.7))(typescript@5.9.3))(eslint-import-resolver-node@0.3.9)(eslint@9.39.4(jiti@1.21.7)): dependencies: debug: 3.2.7 optionalDependencies: - '@typescript-eslint/parser': 8.57.1(eslint@9.39.4(jiti@1.21.7))(typescript@5.7.3) + '@typescript-eslint/parser': 8.57.1(eslint@9.39.4(jiti@1.21.7))(typescript@5.9.3) eslint: 9.39.4(jiti@1.21.7) eslint-import-resolver-node: 0.3.9 transitivePeerDependencies: @@ -23817,7 +23757,7 @@ snapshots: - eslint-import-resolver-webpack - supports-color - eslint-plugin-import@2.32.0(@typescript-eslint/parser@8.57.1(eslint@9.39.4(jiti@1.21.7))(typescript@5.7.3))(eslint@9.39.4(jiti@1.21.7)): + eslint-plugin-import@2.32.0(@typescript-eslint/parser@8.57.1(eslint@9.39.4(jiti@1.21.7))(typescript@5.9.3))(eslint@9.39.4(jiti@1.21.7)): dependencies: '@rtsao/scc': 1.1.0 array-includes: 3.1.9 @@ -23828,7 +23768,7 @@ snapshots: doctrine: 2.1.0 eslint: 9.39.4(jiti@1.21.7) eslint-import-resolver-node: 0.3.9 - eslint-module-utils: 2.12.1(@typescript-eslint/parser@8.57.1(eslint@9.39.4(jiti@1.21.7))(typescript@5.7.3))(eslint-import-resolver-node@0.3.9)(eslint@9.39.4(jiti@1.21.7)) + eslint-module-utils: 2.12.1(@typescript-eslint/parser@8.57.1(eslint@9.39.4(jiti@1.21.7))(typescript@5.9.3))(eslint-import-resolver-node@0.3.9)(eslint@9.39.4(jiti@1.21.7)) hasown: 2.0.2 is-core-module: 2.16.1 is-glob: 4.0.3 @@ -23840,7 +23780,7 @@ snapshots: string.prototype.trimend: 1.0.9 tsconfig-paths: 3.15.0 optionalDependencies: - '@typescript-eslint/parser': 8.57.1(eslint@9.39.4(jiti@1.21.7))(typescript@5.7.3) + '@typescript-eslint/parser': 8.57.1(eslint@9.39.4(jiti@1.21.7))(typescript@5.9.3) transitivePeerDependencies: - eslint-import-resolver-typescript - eslint-import-resolver-webpack @@ -23851,7 +23791,7 @@ snapshots: '@typescript-eslint/experimental-utils': 5.62.0(eslint@9.39.4(jiti@1.21.7))(typescript@5.7.3) eslint: 9.39.4(jiti@1.21.7) optionalDependencies: - '@typescript-eslint/eslint-plugin': 5.62.0(@typescript-eslint/parser@8.57.1(eslint@9.39.4(jiti@1.21.7))(typescript@5.7.3))(eslint@9.39.4(jiti@1.21.7))(typescript@5.7.3) + '@typescript-eslint/eslint-plugin': 5.62.0(@typescript-eslint/parser@5.62.0(eslint@9.39.4(jiti@1.21.7))(typescript@5.7.3))(eslint@9.39.4(jiti@1.21.7))(typescript@5.7.3) jest: 27.5.1(bufferutil@4.1.0)(ts-node@10.9.2(@types/node@22.19.15)(typescript@5.7.3))(utf-8-validate@6.0.6) transitivePeerDependencies: - supports-color @@ -28786,6 +28726,8 @@ snapshots: pretty-bytes@5.6.0: {} + pretty-bytes@6.1.1: {} + pretty-error@4.0.0: dependencies: lodash: 4.17.23 @@ -31007,10 +30949,6 @@ snapshots: dependencies: typescript: 5.5.4 - ts-api-utils@2.4.0(typescript@5.5.4): - dependencies: - typescript: 5.5.4 - ts-api-utils@2.4.0(typescript@5.7.3): dependencies: typescript: 5.7.3 @@ -31231,17 +31169,6 @@ snapshots: dependencies: is-typedarray: 1.0.0 - typescript-eslint@8.57.1(eslint@9.39.4(jiti@1.21.7))(typescript@5.5.4): - dependencies: - '@typescript-eslint/eslint-plugin': 8.57.1(@typescript-eslint/parser@8.57.1(eslint@9.39.4(jiti@1.21.7))(typescript@5.5.4))(eslint@9.39.4(jiti@1.21.7))(typescript@5.5.4) - '@typescript-eslint/parser': 8.57.1(eslint@9.39.4(jiti@1.21.7))(typescript@5.5.4) - '@typescript-eslint/typescript-estree': 8.57.1(typescript@5.5.4) - '@typescript-eslint/utils': 8.57.1(eslint@9.39.4(jiti@1.21.7))(typescript@5.5.4) - eslint: 9.39.4(jiti@1.21.7) - typescript: 5.5.4 - transitivePeerDependencies: - - supports-color - typescript-eslint@8.57.1(eslint@9.39.4(jiti@1.21.7))(typescript@5.7.3): dependencies: '@typescript-eslint/eslint-plugin': 8.57.1(@typescript-eslint/parser@8.57.1(eslint@9.39.4(jiti@1.21.7))(typescript@5.7.3))(eslint@9.39.4(jiti@1.21.7))(typescript@5.7.3) @@ -31637,6 +31564,17 @@ snapshots: transitivePeerDependencies: - rollup + vite-plugin-pwa@1.2.0(vite@6.4.1(@types/node@22.19.15)(jiti@1.21.7)(terser@5.46.0)(tsx@4.21.0)(yaml@2.8.3))(workbox-build@7.4.0(@types/babel__core@7.20.5))(workbox-window@7.4.0): + dependencies: + debug: 4.4.3(supports-color@5.5.0) + pretty-bytes: 6.1.1 + tinyglobby: 0.2.15 + vite: 6.4.1(@types/node@22.19.15)(jiti@1.21.7)(terser@5.46.0)(tsx@4.21.0)(yaml@2.8.3) + workbox-build: 7.4.0(@types/babel__core@7.20.5) + workbox-window: 7.4.0 + transitivePeerDependencies: + - supports-color + vite-plugin-relay-lite@0.11.0(graphql@16.13.1)(typescript@5.9.3)(vite@6.4.1(@types/node@25.3.5)(jiti@1.21.7)(terser@5.46.0)(tsx@4.21.0)(yaml@2.8.3)): dependencies: cosmiconfig: 9.0.0(typescript@5.9.3) diff --git a/react/VITE_POC_NOTES.md b/react/VITE_POC_NOTES.md index ce0e3e726f..5eec7a9925 100644 --- a/react/VITE_POC_NOTES.md +++ b/react/VITE_POC_NOTES.md @@ -77,11 +77,43 @@ Fix: (Each of these gets its own sub-issue under FR-2605.) -- Production `vite build` output parity with the current `craco build` (FR-2608) -- Workbox `GenerateSW` replacement (`vite-plugin-pwa`) (FR-2608) - Jest → Vitest migration (FR-2609) - CI pipeline updates (FR-2611) +## Production `vite build` + Workbox PWA — landed (FR-2608) + +`pnpm --prefix ./react run vite:build` now produces a working web build with a generated service worker. Output goes to `react/build/`, same directory the craco pipeline uses. + +### What was added + +- `react/index.html` — a throwaway build-entry stub. Vite requires an HTML at `root/` so it can parse the app entry; `projectRootStaticPlugin`'s `transformIndexHtml` replaces the stub's content with the real project-root `index.html` at build AND serve time. +- `vite-plugin-pwa` (`strategies: 'generateSW'`) — mirrors the craco-era `workbox-webpack-plugin@7.4.0 GenerateSW` options: + - `skipWaiting: true`, `clientsClaim: true` + - `maximumFileSizeToCacheInBytes: 5 MB` + - Excludes `*.map` and `asset-manifest.json` + - `injectRegister: false` — the project-root `index.html` registers `/sw.js` itself (see index.html:126-131), so the plugin must NOT emit its own registration script. +- `transformIndexHtml` is now dev/build aware via `ctx.server`: + - Dev: strips `// DEV_JS_INJECTING` → NODE_ENV shim, empties `{{nonce}}` placeholders. + - Build: removes the dev-only marker line, but **preserves `{{nonce}}` placeholders** so the backend's CSP middleware can substitute them per-request. + +### Measurements + +- Build time: `37.5s` end-to-end (vs. craco's ~1.5–2min observed on the same tree). +- Output size: `84 MB` of Vite-emitted artefacts in `react/build/`. Not directly comparable to craco's `build/web/` which includes `resources/` + `manifest/` copies from the top-level `pnpm run build` orchestrator; the Vite output does not yet copy those static dirs. +- Service worker precaches 462 entries (22.7 MiB). Generated as `sw.js` + `workbox-*.js` runtime chunk, same shape as the craco output. +- Biggest single chunk: 3.89 MB (`index-*.js`). Matches the current webpack footprint within noise — no regression. Code-splitting audit is not part of Phase 2. + +### Known follow-ups for FR-2611 (CI pipeline) + +- `pnpm run build` orchestrator still drives `craco build`. The CI task needs to swap that for `vite:build` AND update the `Makefile` dep target whose sanity grep (`grep -q 'es6://static/js/main' react/build/index.html`) matches webpack-era paths; Vite emits `es6://assets/index-*.js`. +- `vite-plugin-pwa` auto-generates a `manifest.webmanifest` with default values (`name: "backend-ai-webui-react"`, `theme_color: "#42b883"`). The project's real `manifest/` dir is authoritative and gets copied by `pnpm run copyresource`. The auto-generated manifest is cosmetic for the PoC but should be disabled or pointed at the real one in the integration step. +- Static asset copying (`resources/`, `manifest/`, `config.toml`, `version.json`, `manifest.json` → `build/web/`) is currently done by `copyresource`/`copyconfig` scripts at the top-level build orchestrator. Vite's build on its own does NOT perform these copies. Integrating via `public/` symlinks or a Vite plugin is a small follow-up. + +### Verified side-effects (no regression) + +- Dev smoke (`e2e/vite-poc-smoke.spec.ts`) still passes after adding build support — i18n renders, no new console errors. +- `projectRootStaticPlugin`'s middleware + `devAssetsReloadPlugin` remain `apply: 'serve'` and do not affect the build output. + ## fs.watch dev-reload middleware — landed (FR-2610) Ported craco's custom dev-server `fs.watch` / `fs.watchFile` behaviour (craco.config.cjs:80-147) to a Vite plugin: `devAssetsReloadPlugin`. Watches four project-root paths for changes and emits a debounced full page reload: diff --git a/react/index.html b/react/index.html new file mode 100644 index 0000000000..7286a70cba --- /dev/null +++ b/react/index.html @@ -0,0 +1,17 @@ + + + + + Backend.AI + + +
+ + + diff --git a/react/package.json b/react/package.json index bae2635422..2ea2238e80 100644 --- a/react/package.json +++ b/react/package.json @@ -89,6 +89,7 @@ "scripts": { "start": "NODE_OPTIONS='--max-old-space-size=4096' craco start", "vite:dev": "vite", + "vite:build": "vite build", "build": "pnpm run build:only && cp -r ./build/* ../build/web/", "build:only": "NODE_OPTIONS='--max-old-space-size=4096' pnpm run relay && NODE_OPTIONS='--max-old-space-size=4096' craco build", "test": "NODE_OPTIONS='$NODE_OPTIONS --no-deprecation --experimental-vm-modules' jest", @@ -166,6 +167,7 @@ "typescript-eslint": "catalog:", "vite": "^6.4.1", "vite-plugin-node-polyfills": "^0.24.0", + "vite-plugin-pwa": "^1.2.0", "vite-plugin-svgr": "^4.5.0", "webpack": "catalog:", "workbox-webpack-plugin": "^7.4.0" diff --git a/react/vite.config.ts b/react/vite.config.ts index 8a0bc3d4c6..899ccce943 100644 --- a/react/vite.config.ts +++ b/react/vite.config.ts @@ -11,6 +11,7 @@ import { import { fileURLToPath } from 'node:url'; import { defineConfig, loadEnv, type Plugin } from 'vite'; import { nodePolyfills } from 'vite-plugin-node-polyfills'; +import { VitePWA } from 'vite-plugin-pwa'; import svgr from 'vite-plugin-svgr'; const __dirname = dirname(fileURLToPath(import.meta.url)); @@ -188,17 +189,43 @@ function projectRootStaticPlugin(): Plugin { transformIndexHtml: { order: 'pre', - handler(html) { - return html - .replace( - '// DEV_JS_INJECTING', - 'globalThis.process = {env: {NODE_ENV: "development"}};', - ) - .replace( - '', - '', - ) - .replace(/\{\{nonce\}\}/g, ''); + handler(html, ctx) { + // In dev (serve), ctx.server is defined; in build, it's undefined. + // The build-time entry at `react/index.html` is a throwaway stub — + // we always want to operate on the real project-root template. + const realHtml = readFileSync(rootIndexHtml, 'utf-8'); + const isServe = !!ctx.server; + + // Always inject the app entry script at the REACT_BUNDLE_INJECTING + // marker. In dev, Vite serves `/src/index.tsx` directly. In build, + // Vite's HTML parser sees this tag, bundles `src/index.tsx`, and + // rewrites the src to the hashed chunk URL. + let out = realHtml.replace( + '', + '', + ); + + if (isServe) { + // Dev-only: the webpack/craco pipeline injected a tiny + // `process.env.NODE_ENV` shim here so dev-only code like + // `if (process.env.NODE_ENV === 'development')` works in the + // browser. Also strip `{{nonce}}` — the backend replaces it at + // runtime in prod; in local dev we have no server-side CSP. + out = out + .replace( + '// DEV_JS_INJECTING', + 'globalThis.process = {env: {NODE_ENV: "development"}};', + ) + .replace(/\{\{nonce\}\}/g, ''); + } else { + // Build: remove the dev-only marker comment entirely (so the + // inline script block just has the runtime constants) and + // PRESERVE `{{nonce}}` so the backend's CSP middleware can + // substitute it per-request. + out = out.replace('// DEV_JS_INJECTING', ''); + } + + return out; }, }, }; @@ -399,12 +426,37 @@ export default defineConfig(({ command, mode }) => { process: false, }, }), + + // Service worker generation (build only). Mirrors the options used + // by craco's workbox-webpack-plugin GenerateSW call in + // craco.config.cjs:390-400. + // + // Strategy `generateSW` produces a standalone SW file that precaches + // the build manifest. We opt out of `registerType: 'autoUpdate'` to + // preserve the legacy behaviour where index.html's inline script + // registers `/sw.js` itself on load (see ../index.html:126-131). + VitePWA({ + strategies: 'generateSW', + filename: 'sw.js', + injectRegister: false, + // Stay silent during dev — the registration happens only in prod. + devOptions: { enabled: false }, + workbox: { + skipWaiting: true, + clientsClaim: true, + maximumFileSizeToCacheInBytes: 5 * 1024 * 1024, + globIgnores: ['**/*.map', '**/asset-manifest.json'], + }, + }), ], build: { outDir: resolve(__dirname, 'build'), emptyOutDir: true, sourcemap: true, + // Suppress the warning about chunk size; the app is large and this + // matches the existing craco/webpack threshold expectation. + chunkSizeWarningLimit: 2000, }, }; });