fix(ui): conditionally load core-js polyfills for old Android WebViews
CI / changes (pull_request) Successful in 1s
CI / unit (pull_request) Has been skipped
CI / integration (pull_request) Has been skipped
CI / ui (pull_request) Successful in 1m5s
CI / conformance (pull_request) Successful in 10s
CI / gate (pull_request) Successful in 0s
CI / deploy (pull_request) Successful in 1m42s
CI / changes (pull_request) Successful in 1s
CI / unit (pull_request) Has been skipped
CI / integration (pull_request) Has been skipped
CI / ui (pull_request) Successful in 1m5s
CI / conformance (pull_request) Successful in 10s
CI / gate (pull_request) Successful in 0s
CI / deploy (pull_request) Successful in 1m42s
The es2019 down-level fixed the parse error, but the Chromium 66 in-app WebView (Android 9) then threw "Uncaught ReferenceError: globalThis is not defined" — esbuild lowers syntax, not the es2020+ runtime globals the bundle and its deps reference (globalThis, structuredClone, Array.at, Object.hasOwn, Promise.allSettled, …), so the module still failed to evaluate and the SPA stayed a white screen. Load core-js only where it is actually missing. A permanent ES5 gate in index.html feature-detects the engine and, on an old one, document.writes a parser-blocking <script src=polyfills.js> before the deferred module runs; a modern engine matches none of the checks and downloads nothing. document.write is used deliberately — it is the only way to inject a script guaranteed to run before a deferred module — with a static literal argument (no interpolation, no injection surface). vite.config emitPolyfills writes dist/polyfills.js from the prebuilt core-js-bundle and keeps it out of the module graph, so the bundle-size budget is unaffected (app entry still 108.8 / 110 KB gzip). pnpm-workspace denies core-js-bundle's install script (the package ships a prebuilt minified.js we only read at build time; its script is a funding banner). svelte-check and the mock e2e (Chromium + WebKit) are green and the size gate still passes. The on-device re-test on the Chromium 66 emulator is pending.
This commit is contained in:
+28
-7
@@ -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
|
||||
|
||||
Reference in New Issue
Block a user