fix(ui): conditionally load core-js polyfills for old Android WebViews

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.
2026-07-04 17:03:49 +02:00
parent 6dfd5203d7
commit 4a0c296bbb
5 changed files with 67 additions and 7 deletions
@@ -2,6 +2,32 @@
 <html lang="ru">
  <head>
    <meta charset="UTF-8" />
+    <!-- Old-engine polyfills. An old Android System WebView (seen: Chromium 66 in the Telegram/VK
+         in-app browser) supports ES modules but lacks the es2020+ runtime globals the bundle and its
+         deps call (globalThis, structuredClone, Array.at, …); they throw a ReferenceError, the module
+         never mounts and the SPA is a white screen. Feature-detect that and synchronously pull core-js
+         (emitted as polyfills.js) BEFORE the deferred module runs. A modern engine matches none of
+         these checks and loads nothing — zero extra bytes, and polyfills.js stays out of the module
+         graph the bundle-size budget measures. document.write is deliberate here: it is the only way
+         to inject a parser-blocking <script> guaranteed to execute before the deferred module (a
+         dynamically-appended script is async and could run after it). The written string is a static
+         literal — no interpolation, so no injection surface. -->
+    <script>
+      (function () {
+        var need =
+          typeof globalThis === 'undefined' ||
+          typeof structuredClone === 'undefined' ||
+          typeof WeakRef === 'undefined' ||
+          typeof queueMicrotask === 'undefined' ||
+          !Array.prototype.at ||
+          !Array.prototype.findLast ||
+          !Object.hasOwn ||
+          !Object.fromEntries ||
+          !Promise.allSettled ||
+          !Promise.any;
+        if (need) document.write('<script src="polyfills.js"><\/script>');
+      })();
+    </script>
    <!-- The SPA shell is an empty client-rendered document behind the public landing — keep it
         out of search indexes (robots.txt deliberately does NOT disallow /app/, so crawlers can
         reach this tag). -->
@@ -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",
@@ -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
@@ -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
@@ -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