feat(browser): Separate dev/prod browser builds

Author: timfish

dev-packages/rollup-utils/bundleHelpers.mjs

@@ -11,7 +11,6 @@ import {
   makeCleanupPlugin,
   makeCommonJSPlugin,
   makeIsDebugBuildPlugin,
-  makeJsonPlugin,
   makeLicensePlugin,
   makeNodeResolvePlugin,
   makeRrwebBuildPlugin,
@@ -20,6 +19,7 @@ import {
   makeTerserPlugin,
 } from './plugins/index.mjs';
 import { mergePlugins } from './utils.mjs';
+import { makeProductionReplacePlugin } from './plugins/npmPlugins.mjs';
 
 const BUNDLE_VARIANTS = ['.js', '.min.js', '.debug.min.js'];
 
@@ -35,14 +35,13 @@ export function makeBaseBundleConfig(options) {
     excludeIframe: false,
     excludeShadowDom: false,
   });
+  const productionReplacePlugin = makeProductionReplacePlugin();
 
   // The `commonjs` plugin is the `esModuleInterop` of the bundling world. When used with `transformMixedEsModules`, it
   // will include all dependencies, imported or required, in the final bundle. (Without it, CJS modules aren't included
   // at all, and without `transformMixedEsModules`, they're only included if they're imported, not if they're required.)
   const commonJSPlugin = makeCommonJSPlugin({ transformMixedEsModules: true });
 
-  const jsonPlugin = makeJsonPlugin();
-
   // used by `@sentry/browser`
   const standAloneBundleConfig = {
     output: {
@@ -119,7 +118,7 @@ export function makeBaseBundleConfig(options) {
       strict: false,
       esModule: false,
     },
-    plugins: [sucrasePlugin, nodeResolvePlugin, cleanupPlugin],
+    plugins: [productionReplacePlugin, sucrasePlugin, nodeResolvePlugin, cleanupPlugin],
     treeshake: 'smallest',
   };
 

dev-packages/rollup-utils/npmHelpers.mjs

@@ -16,6 +16,7 @@ import {
   makeCleanupPlugin,
   makeDebugBuildStatementReplacePlugin,
   makeNodeResolvePlugin,
+  makeProductionReplacePlugin,
   makeRrwebBuildPlugin,
   makeSucrasePlugin,
 } from './plugins/index.mjs';
@@ -114,22 +115,47 @@ export function makeBaseNPMConfig(options = {}) {
 }
 
 export function makeNPMConfigVariants(baseConfig, options = {}) {
-  const { emitEsm = true, emitCjs = true } = options;
+  const { emitEsm = true, emitCjs = true, splitDevProd = false } = options;
 
   const variantSpecificConfigs = [];
 
   if (emitCjs) {
-    variantSpecificConfigs.push({ output: { format: 'cjs', dir: path.join(baseConfig.output.dir, 'cjs') } });
+    if (splitDevProd) {
+      variantSpecificConfigs.push({ output: { format: 'cjs', dir: path.join(baseConfig.output.dir, 'cjs/dev') } });
+      variantSpecificConfigs.push({
+        output: { format: 'cjs', dir: path.join(baseConfig.output.dir, 'cjs/prod') },
+        plugins: [makeProductionReplacePlugin()]
+      });
+    } else {
+      variantSpecificConfigs.push({ output: { format: 'cjs', dir: path.join(baseConfig.output.dir, 'cjs') } });
+    }
   }
 
   if (emitEsm) {
-    variantSpecificConfigs.push({
-      output: {
-        format: 'esm',
-        dir: path.join(baseConfig.output.dir, 'esm'),
-        plugins: [makePackageNodeEsm()],
-      },
-    });
+    if (splitDevProd) {
+      variantSpecificConfigs.push({
+        output: {
+          format: 'esm',
+          dir: path.join(baseConfig.output.dir, 'esm/dev'),
+          plugins: [makePackageNodeEsm()],
+        },
+      });
+      variantSpecificConfigs.push({
+        output: {
+          format: 'esm',
+          dir: path.join(baseConfig.output.dir, 'esm/prod'),
+          plugins: [makeProductionReplacePlugin(), makePackageNodeEsm()],
+        },
+      });
+    } else {
+      variantSpecificConfigs.push({
+        output: {
+          format: 'esm',
+          dir: path.join(baseConfig.output.dir, 'esm'),
+          plugins: [makePackageNodeEsm()],
+        },
+      });
+    }
   }
 
   return variantSpecificConfigs.map(variant => deepMerge(baseConfig, variant));

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

@@ -125,6 +125,24 @@ export function makeDebugBuildStatementReplacePlugin() {
   });
 }
 
+export function makeProductionReplacePlugin() {
+  const pattern = /\/\* development-only \*\/[\s\S]*?\/\* end-development-only \*\//g;
+
+  function stripDevBlocks(code) {
+    if (!code) return null;
+    if (!pattern.test(code)) return null;
+    const replaced = code.replace(pattern, '');
+    return { code: replaced, map: null };
+  }
+
+  return {
+    name: 'remove-dev-mode-blocks',
+    renderChunk(code) {
+      return stripDevBlocks(code);
+    },
+  };
+}
+
 /**
  * Creates a plugin to replace build flags of rrweb with either a constant (if passed true/false) or with a safe statement that:
  * a) evaluates to `true`

dev-packages/rollup-utils/utils.mjs

@@ -21,7 +21,7 @@ export function mergePlugins(pluginsA, pluginsB) {
     // here.
     // Additionally, the excludeReplay plugin must run before TS/Sucrase so that we can eliminate the replay code
     // before anything is type-checked (TS-only) and transpiled.
-    const order = ['excludeReplay', 'typescript', 'sucrase', '...', 'terser', 'license', 'output-base64-worker-script'];
+    const order = ['remove-dev-mode-blocks', 'excludeReplay', 'typescript', 'sucrase', '...', 'terser', 'license', 'output-base64-worker-script'];
     const sortKeyA = order.includes(a.name) ? a.name : '...';
     const sortKeyB = order.includes(b.name) ? b.name : '...';
 

packages/browser/package.json

@@ -12,19 +12,23 @@
   "files": [
     "/build/npm"
   ],
-  "main": "build/npm/cjs/index.js",
-  "module": "build/npm/esm/index.js",
+  "main": "build/npm/cjs/prod/index.js",
+  "module": "build/npm/esm/prod/index.js",
   "types": "build/npm/types/index.d.ts",
   "exports": {
     "./package.json": "./package.json",
     ".": {
       "import": {
         "types": "./build/npm/types/index.d.ts",
-        "default": "./build/npm/esm/index.js"
+        "development": "./build/npm/esm/dev/index.js",
+        "production": "./build/npm/esm/prod/index.js",
+        "default": "./build/npm/esm/prod/index.js"
       },
       "require": {
         "types": "./build/npm/types/index.d.ts",
-        "default": "./build/npm/cjs/index.js"
+        "development": "./build/npm/cjs/dev/index.js",
+        "production": "./build/npm/cjs/prod/index.js",
+        "default": "./build/npm/cjs/prod/index.js"
       }
     }
   },

packages/browser/rollup.npm.config.mjs

@@ -16,4 +16,5 @@ export default makeNPMConfigVariants(
       },
     },
   }),
+  { splitDevProd: true }
 );

packages/browser/src/sdk.ts

@@ -15,6 +15,7 @@ import { browserSessionIntegration } from './integrations/browsersession';
 import { globalHandlersIntegration } from './integrations/globalhandlers';
 import { httpContextIntegration } from './integrations/httpcontext';
 import { linkedErrorsIntegration } from './integrations/linkederrors';
+import { spotlightBrowserIntegration } from './integrations/spotlight';
 import { defaultStackParser } from './stack-parsers';
 import { makeFetchTransport } from './transports/fetch';
 import { checkAndWarnIfIsEmbeddedBrowserExtension } from './utils/detectBrowserExtension';
@@ -37,6 +38,9 @@ export function getDefaultIntegrations(_options: Options): Integration[] {
     dedupeIntegration(),
     httpContextIntegration(),
     browserSessionIntegration(),
+    /* development-only */
+    spotlightBrowserIntegration(),
+    /* end-development-only */
   ];
 }