diff --git a/ui/index.html b/ui/index.html index 9d150d6..28c2bbd 100644 --- a/ui/index.html +++ b/ui/index.html @@ -2,6 +2,32 @@ + + diff --git a/ui/package.json b/ui/package.json index 11fa26e..9138db1 100644 --- a/ui/package.json +++ b/ui/package.json @@ -27,6 +27,7 @@ "@playwright/test": "^1.49.0", "@sveltejs/vite-plugin-svelte": "^5.0.0", "@types/node": "^22.10.0", + "core-js-bundle": "^3.49.0", "svelte": "^5.15.0", "svelte-check": "^4.1.0", "typescript": "^5.7.0", diff --git a/ui/pnpm-lock.yaml b/ui/pnpm-lock.yaml index 5f813f2..8b4434c 100644 --- a/ui/pnpm-lock.yaml +++ b/ui/pnpm-lock.yaml @@ -36,6 +36,9 @@ importers: '@types/node': specifier: ^22.10.0 version: 22.19.19 + core-js-bundle: + specifier: ^3.49.0 + version: 3.49.0 svelte: specifier: ^5.15.0 version: 5.56.0 @@ -508,6 +511,9 @@ packages: resolution: {integrity: sha512-eYm0QWBtUrBWZWG0d386OGAw16Z995PiOVo2B7bjWSbHedGl5e0ZWaq65kOGgUSNesEIDkB9ISbTg/JK9dhCZA==} engines: {node: '>=6'} + core-js-bundle@3.49.0: + resolution: {integrity: sha512-WXc7oOsePN3aKFOJVG5zQdi+h/Jm2W0WIPYvRc4IG3vkNcbC2w6LlSzTmnhOl6N1xmOJEzCSNieX3mwF+3zBGw==} + debug@4.4.3: resolution: {integrity: sha512-RGwwWnwQvkVfavKVt22FGLw+xYSdzARwm0ru6DhTVA3umU5hZc28V3kO4stgYryrTlLpuvgI9GiijltAjNbcqA==} engines: {node: '>=6.0'} @@ -1132,6 +1138,8 @@ snapshots: clsx@2.1.1: {} + core-js-bundle@3.49.0: {} + debug@4.4.3: dependencies: ms: 2.1.3 diff --git a/ui/pnpm-workspace.yaml b/ui/pnpm-workspace.yaml index 34a05e7..14571e3 100644 --- a/ui/pnpm-workspace.yaml +++ b/ui/pnpm-workspace.yaml @@ -1,4 +1,8 @@ # pnpm 11 records build-script approval here. esbuild's postinstall materialises # its CLI shim; the platform binary itself ships as an optional dependency. +# core-js-bundle ships a prebuilt minified.js (we only read that file at build time, +# via vite.config emitPolyfills) and its install script is just a funding banner, so +# it is denied — nothing to build. allowBuilds: + core-js-bundle: false esbuild: true diff --git a/ui/vite.config.ts b/ui/vite.config.ts index 817abff..79ab0ac 100644 --- a/ui/vite.config.ts +++ b/ui/vite.config.ts @@ -1,3 +1,4 @@ +import { readFileSync } from 'node:fs'; import { resolve } from 'node:path'; import { defineConfig, type Plugin } from 'vite'; import { svelte } from '@sveltejs/vite-plugin-svelte'; @@ -20,6 +21,24 @@ function stripBootDiag(): Plugin { }; } +/** + * emitPolyfills writes the prebuilt core-js bundle to `dist/polyfills.js`. The index.html gate + * script loads it via document.write only on an old engine that lacks the es2020+ runtime APIs the + * app uses (globalThis, structuredClone, Array.at, …) — e.g. the Chromium 66 Android System WebView + * behind the Telegram/VK in-app browser — before the deferred module runs. A modern engine never + * requests it, so it adds nothing to that payload and stays out of the module graph the bundle-size + * gate measures. + */ +function emitPolyfills(): Plugin { + return { + name: 'emit-polyfills', + generateBundle() { + const src = readFileSync(resolve(import.meta.dirname, 'node_modules/core-js-bundle/minified.js'), 'utf8'); + this.emitFile({ type: 'asset', fileName: 'polyfills.js', source: src }); + }, + }; +} + // The edge Connect service is scrabble.edge.v1.Gateway; the gateway serves it over // h2c on :8081 by default. In dev we proxy the RPC path so the browser (which can // not speak h2c directly) talks to the dev server on the same origin. In `mock` @@ -37,10 +56,11 @@ export default defineConfig(({ mode }) => ({ // so a missing build-arg never breaks the build. __APP_VERSION__: JSON.stringify(process.env.VITE_APP_VERSION || 'dev'), }, - // The boot-diagnostic overlay ships only in the production build (the test contour); it is - // stripped from the dev server and the mock e2e build, where a full-screen overlay would - // intercept Playwright's taps. See stripBootDiag / the index.html BOOT-DIAG block. - plugins: [svelte(), ...(mode !== 'production' ? [stripBootDiag()] : [])], + // emitPolyfills always ships dist/polyfills.js (loaded only by old engines; see its docstring + // and the index.html gate). The boot-diagnostic overlay ships only in the production build (the + // test contour) — it is stripped from the dev server and the mock e2e build, where a full-screen + // overlay would intercept Playwright's taps. See stripBootDiag / the index.html BOOT-DIAG block. + plugins: [svelte(), emitPolyfills(), ...(mode !== 'production' ? [stripBootDiag()] : [])], server: { port: 5173, proxy: @@ -57,9 +77,10 @@ export default defineConfig(({ mode }) => ({ // Down-level to es2019 so an old Android System WebView (seen: Telegram/VK in-app WebView on // Chromium 66, Android 9) can parse the bundle — esbuild lowers es2020+ syntax (?., ??, private // fields, static blocks, …) that Chrome 66 rejects with "Unexpected token ?", which left the SPA - // on a white screen. esbuild lowers syntax only, not runtime APIs; the app's own source uses - // none beyond this floor (the mock-only helpers are tree-shaken from production). Reach for - // @vitejs/plugin-legacy if runtime-API polyfills for even older engines turn out to be needed. + // on a white screen. esbuild lowers syntax only, not runtime APIs — the es2020+ globals the + // bundle/deps call at runtime (globalThis, structuredClone, Array.at, …) are covered separately + // by the conditional core-js loader (emitPolyfills + the index.html gate), loaded only on an + // engine that actually lacks them. target: 'es2019', // Emit sourcemaps everywhere except the production build. A shipped `.map` // carries full `sourcesContent` — the entire TypeScript/Svelte source — and the