chore(build): Replace sucrase with esbuild (#20865)

This PR updates our rollup config to use esbuild instead of
sucrase/typescript plugins.

1. We relied on a custom, kind of weird fork of sucrase here to get the
proper es support we cared about with minimal bundle size. this is not
really ideal...
2. We also still had some code paths (for the replay worker) relying on
typescript plugin, which we have since dropped in other places already.
this PR unifies this to use esbuild everywhere.
3. This also allows us to get rid of the cleanup plugin as this is
handled by esbuild already anyhow.
4. Using esbuild is a more future proof solution here, we can easily
update es support and it will handle it for us.
5. Removes any rollup dependencies we actually no longer use (some where
orphaned already)

Doing this, required a few changes to our rollup plugin setup, which all
should be generally good changes IMHO:

* With esbuild, the order of some of our plugins becomes more important,
as esbuild strips certain comments etc. more aggressively. This PR takes
care of this by being more explicit in the order of plugins and
enforcing this everywhere.

Overall bundle size seems stable, slight reductions in a few places -
execpt for cloudflare, which actually has a 3.5kb reduction for whatever
reason.

Author: mydea

dev-packages/rollup-utils/bundleHelpers.mjs

@@ -8,14 +8,13 @@ import deepMerge from 'deepmerge';
 
 import {
   makeBrowserBuildPlugin,
-  makeCleanupPlugin,
   makeCommonJSPlugin,
+  makeEsbuildPlugin,
   makeIsDebugBuildPlugin,
   makeLicensePlugin,
   makeNodeResolvePlugin,
   makeRrwebBuildPlugin,
   makeSetSDKSourcePlugin,
-  makeSucrasePlugin,
   makeTerserPlugin,
 } from './plugins/index.mjs';
 import { mergePlugins } from './utils.mjs';
@@ -24,11 +23,10 @@ import { makeProductionReplacePlugin } from './plugins/npmPlugins.mjs';
 const BUNDLE_VARIANTS = ['.js', '.min.js', '.debug.min.js'];
 
 export function makeBaseBundleConfig(options) {
-  const { bundleType, entrypoints, licenseTitle, outputFileBase, packageSpecificConfig, sucrase } = options;
+  const { bundleType, entrypoints, licenseTitle, outputFileBase, packageSpecificConfig, esbuild } = options;
 
   const nodeResolvePlugin = makeNodeResolvePlugin();
-  const sucrasePlugin = makeSucrasePlugin({}, sucrase);
-  const cleanupPlugin = makeCleanupPlugin();
+  const transpilePlugin = makeEsbuildPlugin(esbuild);
   const markAsBrowserBuildPlugin = makeBrowserBuildPlugin(true);
   const licensePlugin = makeLicensePlugin(licenseTitle);
   const rrwebBuildPlugin = makeRrwebBuildPlugin({
@@ -118,7 +116,7 @@ export function makeBaseBundleConfig(options) {
       strict: false,
       esModule: false,
     },
-    plugins: [productionReplacePlugin, sucrasePlugin, nodeResolvePlugin, cleanupPlugin],
+    plugins: [productionReplacePlugin, transpilePlugin, nodeResolvePlugin],
     treeshake: 'smallest',
   };
 

dev-packages/rollup-utils/npmHelpers.mjs

@@ -13,12 +13,11 @@ import deepMerge from 'deepmerge';
 
 import { defineConfig } from 'rollup';
 import {
-  makeCleanupPlugin,
   makeDebugBuildStatementReplacePlugin,
+  makeEsbuildPlugin,
   makeNodeResolvePlugin,
   makeProductionReplacePlugin,
   makeRrwebBuildPlugin,
-  makeSucrasePlugin,
 } from './plugins/index.mjs';
 import { makePackageNodeEsm } from './plugins/make-esm-plugin.mjs';
 import { mergeExternals, mergePlugins } from './utils.mjs';
@@ -34,14 +33,13 @@ export function makeBaseNPMConfig(options = {}) {
     entrypoints = ['src/index.ts'],
     hasBundles = false,
     packageSpecificConfig = {},
-    sucrase = {},
+    esbuild = {},
     bundledBuiltins = [],
   } = options;
 
   const nodeResolvePlugin = makeNodeResolvePlugin();
-  const sucrasePlugin = makeSucrasePlugin({}, sucrase);
+  const transpilePlugin = makeEsbuildPlugin(esbuild);
   const debugBuildStatementReplacePlugin = makeDebugBuildStatementReplacePlugin();
-  const cleanupPlugin = makeCleanupPlugin();
   const rrwebBuildPlugin = makeRrwebBuildPlugin({
     excludeShadowDom: undefined,
     excludeIframe: undefined,
@@ -104,7 +102,7 @@ export function makeBaseNPMConfig(options = {}) {
       },
     },
 
-    plugins: [nodeResolvePlugin, sucrasePlugin, debugBuildStatementReplacePlugin, rrwebBuildPlugin, cleanupPlugin],
+    plugins: [nodeResolvePlugin, transpilePlugin, debugBuildStatementReplacePlugin, rrwebBuildPlugin],
 
     // don't include imported modules from outside the package in the final output
     // also treat subpath exports (e.g. `@sentry/core/browser`) as external
@@ -154,8 +152,9 @@ export function makeNPMConfigVariants(baseConfig, options = {}) {
         output: {
           format: 'esm',
           dir: path.join(baseConfig.output.dir, 'esm/prod'),
-          plugins: [makeProductionReplacePlugin(), makePackageNodeEsm()],
+          plugins: [makePackageNodeEsm()],
         },
+        plugins: [makeProductionReplacePlugin()],
       });
     } else {
       variantSpecificConfigs.push({
@@ -168,7 +167,13 @@ export function makeNPMConfigVariants(baseConfig, options = {}) {
     }
   }
 
-  return variantSpecificConfigs.map(variant => deepMerge(baseConfig, variant));
+  return variantSpecificConfigs.map(variant =>
+    // Plugin arrays must be merged in the right order or the build silently misbehaves
+    // (e.g. esbuild strips dev-mode marker comments before the replace plugin can act).
+    deepMerge(baseConfig, variant, {
+      customMerge: key => (key === 'plugins' ? mergePlugins : undefined),
+    }),
+  );
 }
 
 /**

dev-packages/rollup-utils/plugins/bundlePlugins.mjs

@@ -46,7 +46,7 @@ export function makeLicensePlugin(title) {
  * 'false`
  */
 export function makeIsDebugBuildPlugin(includeDebugging) {
-  return replace({
+  const plugin = replace({
     // TODO `preventAssignment` will default to true in version 5.x of the replace plugin, at which point we can get rid
     // of this. (It actually makes no difference in this case whether it's true or false, since we never assign to
     // `__SENTRY_DEBUG__`, but if we don't give it a value, it will spam with warnings.)
@@ -58,16 +58,28 @@ export function makeIsDebugBuildPlugin(includeDebugging) {
       __SENTRY_DEBUG__: includeDebugging,
     },
   });
+  plugin.name = 'replace-debug-flags';
+  return plugin;
 }
 
+/**
+ * Replaces the comment marker `/*! __SENTRY_SDK_SOURCE__ *\/` in core's `getSDKSource()` with a
+ * `return '<source>';` statement so the bundle reports the correct distribution channel.
+ *
+ * The marker uses the `/*! ... *\/` legal-comment syntax so it survives esbuild's transpile
+ * (esbuild strips ordinary block comments). The plugin sort order in utils.mjs also pins
+ * this name before `esbuild`, in case it ever runs on un-transpiled source directly.
+ */
 export function makeSetSDKSourcePlugin(sdkSource) {
-  return replace({
+  const plugin = replace({
     preventAssignment: false,
     delimiters: ['', ''],
     values: {
-      '/* __SENTRY_SDK_SOURCE__ */': `return ${JSON.stringify(sdkSource)};`,
+      '/*! __SENTRY_SDK_SOURCE__ */': `return ${JSON.stringify(sdkSource)};`,
     },
   });
+  plugin.name = 'replace-sdk-source';
+  return plugin;
 }
 
 /**
@@ -77,13 +89,15 @@ export function makeSetSDKSourcePlugin(sdkSource) {
  * @returns An instance of the `replace` plugin to do the replacement of the magic string with `true` or 'false`
  */
 export function makeBrowserBuildPlugin(isBrowserBuild) {
-  return replace({
+  const plugin = replace({
     // TODO This will be the default in the next version of the `replace` plugin
     preventAssignment: true,
     values: {
       __SENTRY_BROWSER_BUNDLE__: isBrowserBuild,
     },
   });
+  plugin.name = 'replace-browser-bundle-flag';
+  return plugin;
 }
 
 // `terser` options reference: https://github.com/terser/terser#api-reference

dev-packages/rollup-utils/plugins/npmPlugins.mjs

@@ -2,37 +2,50 @@
  * Rollup plugin hooks docs: https://rollupjs.org/guide/en/#build-hooks and
  * https://rollupjs.org/guide/en/#output-generation-hooks
  *
- * Cleanup plugin docs: https://github.com/aMarCruz/rollup-plugin-cleanup
+ * esbuild plugin docs: https://github.com/egoist/rollup-plugin-esbuild
  * Replace plugin docs: https://github.com/rollup/plugins/tree/master/packages/replace
- * Sucrase plugin docs: https://github.com/rollup/plugins/tree/master/packages/sucrase
  */
 
 import json from '@rollup/plugin-json';
 import replace from '@rollup/plugin-replace';
-import cleanup from 'rollup-plugin-cleanup';
-import sucrase from './vendor/sucrase-plugin.mjs';
+import esbuild from 'rollup-plugin-esbuild';
 
 /**
- * Create a plugin to transpile TS syntax using `sucrase`.
+ * Create a plugin to transpile TS/JSX syntax using `esbuild`.
  *
- * @returns An instance of the `@rollup/plugin-sucrase` plugin
+ * `target: 'es2020'` keeps ES2020-native syntax (`?.`, `??`, optional catch binding) and
+ * downlevels everything newer (logical assignment, numeric separators, class private
+ * fields, static class blocks, ...).
+ *
+ * `esbuildOptions` are forwarded to `rollup-plugin-esbuild` verbatim and can override
+ * any of the pinned defaults (e.g. JSX-related keys like `jsxFactory` / `jsxFragment`
+ * for packages that use a non-React pragma).
  */
-export function makeSucrasePlugin(options = {}, sucraseOptions = {}) {
-  return sucrase(
-    {
-      // Required for bundling OTEL code properly
-      exclude: ['**/*.json'],
-      ...options,
-    },
-    {
-      transforms: ['typescript', 'jsx'],
-      // We use a custom forked version of sucrase,
-      // where there is a new option `disableES2019Transforms`
-      disableESTransforms: false,
-      disableES2019Transforms: true,
-      ...sucraseOptions,
+export function makeEsbuildPlugin(esbuildOptions = {}) {
+  const plugin = esbuild({
+    // `.json` is handled by the JSON plugin further down the pipeline.
+    exclude: ['**/*.json'],
+    // ES2020 is our floor — keeps `?.`/`??` native, downlevels everything newer.
+    target: 'es2020',
+    // Don't read per-package tsconfig (they vary and can pull in unrelated settings).
+    // Pin only the compilerOptions that affect codegen.
+    tsconfig: false,
+    tsconfigRaw: {
+      compilerOptions: {
+        // Match the project tsconfig's effective behavior at target=es2020: class
+        // field initializers compile to `this.x = v` (set semantics), not via the
+        // `Object.defineProperty`-based `__publicField` helper esbuild emits by
+        // default. This is what tsc itself outputs at this target.
+        useDefineForClassFields: false,
+      },
     },
-  );
+    sourceMap: true,
+    ...esbuildOptions,
+  });
+
+  // Force a stable plugin name so the plugin sort order in utils.mjs can target it.
+  plugin.name = 'esbuild';
+  return plugin;
 }
 
 export function makeJsonPlugin() {
@@ -89,23 +102,6 @@ export function makeDebuggerPlugin(hookName) {
   };
 }
 
-/**
- * Create a plugin to clean up output files by:
- * - Converting line endings unix line endings
- * - Removing consecutive empty lines
- *
- * @returns A `rollup-plugin-cleanup` instance.
- */
-export function makeCleanupPlugin() {
-  return cleanup({
-    // line endings are unix-ized by default
-    comments: 'all', // comments to keep
-    compactComments: 'false', // don't remove blank lines in multi-line comments
-    maxEmptyLines: 1,
-    extensions: ['js', 'jsx', 'ts', 'tsx'],
-  });
-}
-
 /**
  * Creates a plugin to replace all instances of "__DEBUG_BUILD__" with a safe statement that
  * a) evaluates to `true`
@@ -114,28 +110,30 @@ export function makeCleanupPlugin() {
  * @returns A `@rollup/plugin-replace` instance.
  */
 export function makeDebugBuildStatementReplacePlugin() {
-  return replace({
+  const plugin = replace({
     preventAssignment: false,
     values: {
       __DEBUG_BUILD__: "(typeof __SENTRY_DEBUG__ === 'undefined' || __SENTRY_DEBUG__)",
     },
   });
+  plugin.name = 'replace-debug-build-statement';
+  return plugin;
 }
 
 export function makeProductionReplacePlugin() {
-  const pattern = /\/\* rollup-include-development-only \*\/[\s\S]*?\/\* rollup-include-development-only-end \*\/\s*/g;
-
-  function stripDevBlocks(code) {
-    if (!code) return null;
-    if (!code.includes('rollup-include-development-only')) return null;
-    const replaced = code.replace(pattern, '');
-    return { code: replaced, map: null };
-  }
+  // Markers use the `/*! ... */` legal-comment syntax so esbuild preserves them through
+  // transpile. We still run as a `transform` (per-module) hook rather than `renderChunk`:
+  // the block typically uses imports declared at the module top, and stripping it before
+  // rollup analyses module-graph imports lets those now-unused imports be tree-shaken away.
+  // The plugin sort order in utils.mjs pins this before `esbuild`.
+  const pattern =
+    /\/\*! rollup-include-development-only \*\/[\s\S]*?\/\*! rollup-include-development-only-end \*\/\s*/g;
 
   return {
     name: 'remove-dev-mode-blocks',
-    renderChunk(code) {
-      return stripDevBlocks(code);
+    transform(code) {
+      if (!code.includes('rollup-include-development-only')) return null;
+      return { code: code.replace(pattern, ''), map: null };
     },
   };
 }
@@ -159,8 +157,10 @@ export function makeRrwebBuildPlugin({ excludeShadowDom, excludeIframe } = {}) {
     values['__RRWEB_EXCLUDE_IFRAME__'] = excludeIframe;
   }
 
-  return replace({
+  const plugin = replace({
     preventAssignment: true,
     values,
   });
+  plugin.name = 'replace-rrweb-build-flags';
+  return plugin;
 }