check-browser-baseline.mjs 5.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129
  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, relative, resolve } from 'node:path';
  31. import { fileURLToPath } from 'node:url';
  32. const ASSETS = resolve(dirname(fileURLToPath(import.meta.url)), '..', '..', 'static', 'assets');
  33. /**
  34. * Every extension the build can emit executable JavaScript under. `.mjs`
  35. * because a dependency's file imported with `?url` is copied verbatim under
  36. * its own extension and bypasses `build.target` - the pdf.js worker shipped a
  37. * class static block that way (#2976).
  38. */
  39. const SCRIPT_EXTENSIONS = ['.js', '.mjs', '.cjs'];
  40. /**
  41. * Every script under `dir`, recursively, as paths relative to ASSETS. The
  42. * subdirectories matter: pdf.js's decoder fallbacks are published verbatim
  43. * under assets/pdfjs/ (vite.config.ts) and run in its worker (#2976).
  44. */
  45. function collectScripts(dir) {
  46. const found = [];
  47. for (const entry of readdirSync(dir, { withFileTypes: true })) {
  48. const full = join(dir, entry.name);
  49. if (entry.isDirectory()) {
  50. found.push(...collectScripts(full));
  51. } else if (SCRIPT_EXTENSIONS.some((ext) => entry.name.endsWith(ext))) {
  52. found.push(relative(ASSETS, full));
  53. }
  54. }
  55. return found;
  56. }
  57. /**
  58. * Each pattern must match only real occurrences of the feature. Anything that
  59. * needs context to tell a false positive from a real hit (regex flags, for
  60. * instance, are indistinguishable from division by a variable in a minified
  61. * bundle without parsing) is left out rather than made noisy.
  62. */
  63. const FORBIDDEN = [
  64. {
  65. pattern: /\(\?<[=!]/g,
  66. feature: 'regex lookbehind assertion',
  67. since: 'Safari 16.4',
  68. hint: 'A dependency shipped `(?<=` or `(?<!` in a regex literal. Find it with:\n'
  69. + ' grep -rl \'(?<[=!]\' --include=*.js node_modules/\n'
  70. + ' then avoid importing that module (see src/utils/remarkGfmNoAutolink.ts).',
  71. },
  72. {
  73. // The one pattern here that can in principle fire on a string literal
  74. // containing the text `static {`. No bundle has ever hit it, and the
  75. // snippet printed above makes such a hit obvious at a glance - if that is
  76. // what you are looking at, narrow this pattern rather than deleting it.
  77. pattern: /\bstatic\s*\{/g,
  78. feature: 'class static initialisation block',
  79. since: 'Safari 16.4',
  80. hint: 'Set `build.target` low enough that esbuild lowers it, or drop the dependency.',
  81. },
  82. ];
  83. let bundles;
  84. try {
  85. bundles = collectScripts(ASSETS);
  86. } catch {
  87. console.error(`check-browser-baseline: no build output at ${ASSETS} - run \`vite build\` first.`);
  88. process.exit(1);
  89. }
  90. if (bundles.length === 0) {
  91. console.error(
  92. `check-browser-baseline: no ${SCRIPT_EXTENSIONS.join('/')} files in ${ASSETS} - did the build succeed?`,
  93. );
  94. process.exit(1);
  95. }
  96. const failures = [];
  97. for (const name of bundles) {
  98. const source = readFileSync(join(ASSETS, name), 'utf8');
  99. for (const { pattern, feature, since, hint } of FORBIDDEN) {
  100. const hits = source.match(pattern);
  101. if (!hits) continue;
  102. const index = source.search(pattern);
  103. failures.push(
  104. ` ${name}: ${hits.length}x ${feature} (requires ${since})\n`
  105. + ` ...${source.slice(Math.max(0, index - 70), index + 70).replace(/\n/g, ' ')}...\n`
  106. + ` ${hint}`,
  107. );
  108. }
  109. }
  110. if (failures.length > 0) {
  111. console.error(
  112. `\ncheck-browser-baseline: bundle uses syntax that Safari 16.0 / iOS 16.0 cannot parse.\n`
  113. + `A parse error takes down the WHOLE app on those browsers - blank white screen (#2971).\n\n`
  114. + `${failures.join('\n\n')}\n`,
  115. );
  116. process.exit(1);
  117. }
  118. console.log(`✓ ${bundles.length} bundle(s) parse-compatible with the Safari 16.0 baseline.`);