check-browser-baseline.mjs 4.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101
  1. #!/usr/bin/env node
  2. /**
  3. * Fail the build when the bundle uses a JS feature our oldest supported browser
  4. * cannot parse (#2971).
  5. *
  6. * Why this exists as a grep rather than a build target: Vite's `build.target`
  7. * only governs *syntax lowering*. esbuild does not rewrite regular expressions,
  8. * so a lookbehind assertion - unsupported before Safari 16.4 - builds silently
  9. * under `safari15`, `safari16.0` and `es2020` alike (measured, all three). That
  10. * is exactly how #2971 shipped: `remark-gfm` pulled a lookbehind regex literal
  11. * into the entry chunk, iOS 16.0-16.3 refused to compile the module, and every
  12. * page rendered as a blank white screen from v1.2.5 until it was found in the
  13. * field two months later.
  14. *
  15. * A regex literal is validated when its module is *compiled*, so one of these
  16. * anywhere in the entry chunk takes down the entire app, not just the feature
  17. * that pulled it in. There is no graceful degradation to fall back on, which is
  18. * why this is a hard build failure and not a warning.
  19. *
  20. * BASELINE: Safari 16.0 / iOS 16.0. Raising it is a product decision - if you
  21. * do, drop the entries that the new floor supports rather than deleting the
  22. * check.
  23. *
  24. * Scope: parse-time failures only. Runtime APIs (`Object.groupBy`,
  25. * `Promise.withResolvers`, ...) break one feature rather than the whole bundle
  26. * and are better caught by real-browser testing, so they are deliberately not
  27. * listed here.
  28. */
  29. import { readdirSync, readFileSync } from 'node:fs';
  30. import { join, dirname, resolve } from 'node:path';
  31. import { fileURLToPath } from 'node:url';
  32. const ASSETS = resolve(dirname(fileURLToPath(import.meta.url)), '..', '..', 'static', 'assets');
  33. /**
  34. * Each pattern must match only real occurrences of the feature. Anything that
  35. * needs context to tell a false positive from a real hit (regex flags, for
  36. * instance, are indistinguishable from division by a variable in a minified
  37. * bundle without parsing) is left out rather than made noisy.
  38. */
  39. const FORBIDDEN = [
  40. {
  41. pattern: /\(\?<[=!]/g,
  42. feature: 'regex lookbehind assertion',
  43. since: 'Safari 16.4',
  44. hint: 'A dependency shipped `(?<=` or `(?<!` in a regex literal. Find it with:\n'
  45. + ' grep -rl \'(?<[=!]\' --include=*.js node_modules/\n'
  46. + ' then avoid importing that module (see src/utils/remarkGfmNoAutolink.ts).',
  47. },
  48. {
  49. // The one pattern here that can in principle fire on a string literal
  50. // containing the text `static {`. No bundle has ever hit it, and the
  51. // snippet printed above makes such a hit obvious at a glance - if that is
  52. // what you are looking at, narrow this pattern rather than deleting it.
  53. pattern: /\bstatic\s*\{/g,
  54. feature: 'class static initialisation block',
  55. since: 'Safari 16.4',
  56. hint: 'Set `build.target` low enough that esbuild lowers it, or drop the dependency.',
  57. },
  58. ];
  59. let bundles;
  60. try {
  61. bundles = readdirSync(ASSETS).filter((f) => f.endsWith('.js'));
  62. } catch {
  63. console.error(`check-browser-baseline: no build output at ${ASSETS} - run \`vite build\` first.`);
  64. process.exit(1);
  65. }
  66. if (bundles.length === 0) {
  67. console.error(`check-browser-baseline: no .js files in ${ASSETS} - did the build succeed?`);
  68. process.exit(1);
  69. }
  70. const failures = [];
  71. for (const name of bundles) {
  72. const source = readFileSync(join(ASSETS, name), 'utf8');
  73. for (const { pattern, feature, since, hint } of FORBIDDEN) {
  74. const hits = source.match(pattern);
  75. if (!hits) continue;
  76. const index = source.search(pattern);
  77. failures.push(
  78. ` ${name}: ${hits.length}x ${feature} (requires ${since})\n`
  79. + ` ...${source.slice(Math.max(0, index - 70), index + 70).replace(/\n/g, ' ')}...\n`
  80. + ` ${hint}`,
  81. );
  82. }
  83. }
  84. if (failures.length > 0) {
  85. console.error(
  86. `\ncheck-browser-baseline: bundle uses syntax that Safari 16.0 / iOS 16.0 cannot parse.\n`
  87. + `A parse error takes down the WHOLE app on those browsers - blank white screen (#2971).\n\n`
  88. + `${failures.join('\n\n')}\n`,
  89. );
  90. process.exit(1);
  91. }
  92. console.log(`✓ ${bundles.length} bundle(s) parse-compatible with the Safari 16.0 baseline.`);