fet(build): Create debug versions of minified bundles (#4699)

This adds to our base CDN rollup config the ability to create bundles which are minified but nonetheless contain debug logging.

Notable changes:

- Setting the constant (`__SENTRY_DEBUG__`) which controls whether or not to include logging is now done by a separate rollup plugin rather than by terser (which was setting the now-obsolete `__SENTRY_NO_DEBUG__` flag). This allows rollup to do the treeshaking, which is good because it lets us create a _non_-minified no-debug bundle. Though such a bundle doesn't make a lot of sense to publish (why strip the logging if you’re not also going to minify the code?), it _is_ very helpful for us, because it allows us to see what's being treeshaken in the context of human-readable code.

- The scope of the helper function `makeMinificationVariants` has broadened to include the creation of all bundle variants*. As a result, it no longer takes an array of configs (which it might have gotten had there ever been a `makeJSVersionVariants` or `makeDebugVariants` whose results could have been passed to `makeMinificationVariants`) but instead takes a single base config which it then spins out into all necessary flavors. This broadening of scope is also now reflected in variable names and the function name itself.

* This is not quite true, in that it's still not handling the ES5/ES6 question. I chose not to incorporate that because as soon as we go ES6-only in v7, it will no longer be an issue for any package except perhaps the browser package.

Author: lobsterkatie

packages/browser/rollup.config.js

@@ -1,4 +1,4 @@
-import { makeBaseBundleConfig, makeMinificationVariants } from '../../rollup.config';
+import { makeBaseBundleConfig, makeConfigVariants } from '../../rollup.config';
 
 const builds = [];
 
@@ -11,7 +11,7 @@ const builds = [];
     outputFileBase: `build/bundle${jsVersion === 'es6' ? '.es6' : ''}`,
   });
 
-  builds.push(...makeMinificationVariants(baseBundleConfig));
+  builds.push(...makeConfigVariants(baseBundleConfig));
 });
 
 export default builds;

packages/integrations/rollup.config.js

@@ -2,7 +2,7 @@ import * as fs from 'fs';
 
 import commonjs from '@rollup/plugin-commonjs';
 
-import { insertAt, makeBaseBundleConfig, makeMinificationVariants } from '../../rollup.config';
+import { insertAt, makeBaseBundleConfig, makeConfigVariants } from '../../rollup.config';
 
 const builds = [];
 
@@ -20,7 +20,7 @@ integrationSourceFiles.forEach(file => {
   // TODO We only need `commonjs` for localforage (used in the offline plugin). Once that's fixed, this can come out.
   baseBundleConfig.plugins = insertAt(baseBundleConfig.plugins, -2, commonjs());
 
-  builds.push(...makeMinificationVariants(baseBundleConfig));
+  builds.push(...makeConfigVariants(baseBundleConfig));
 });
 
 export default builds;

packages/tracing/rollup.config.js

@@ -1,4 +1,4 @@
-import { makeBaseBundleConfig, makeMinificationVariants } from '../../rollup.config';
+import { makeBaseBundleConfig, makeConfigVariants } from '../../rollup.config';
 
 const builds = [];
 
@@ -11,7 +11,7 @@ const builds = [];
     outputFileBase: `build/bundle.tracing${jsVersion === 'es6' ? '.es6' : ''}`,
   });
 
-  builds.push(...makeMinificationVariants(baseBundleConfig));
+  builds.push(...makeConfigVariants(baseBundleConfig));
 });
 
 export default builds;

packages/vue/rollup.config.js

@@ -1,4 +1,4 @@
-import { makeBaseBundleConfig, makeMinificationVariants } from '../../rollup.config';
+import { makeBaseBundleConfig, makeConfigVariants } from '../../rollup.config';
 
 const baseBundleConfig = makeBaseBundleConfig({
   input: 'src/index.bundle.ts',
@@ -8,4 +8,4 @@ const baseBundleConfig = makeBaseBundleConfig({
   outputFileBase: 'build/bundle.vue',
 });
 
-export default makeMinificationVariants(baseBundleConfig);
+export default makeConfigVariants(baseBundleConfig);

packages/wasm/rollup.config.js

@@ -1,4 +1,4 @@
-import { makeBaseBundleConfig, makeMinificationVariants } from '../../rollup.config';
+import { makeBaseBundleConfig, makeConfigVariants } from '../../rollup.config';
 
 const baseBundleConfig = makeBaseBundleConfig({
   input: 'src/index.ts',
@@ -8,4 +8,4 @@ const baseBundleConfig = makeBaseBundleConfig({
   outputFileBase: 'build/wasm',
 });
 
-export default makeMinificationVariants(baseBundleConfig);
+export default makeConfigVariants(baseBundleConfig);

rollup.config.js

@@ -20,12 +20,12 @@ import typescript from 'rollup-plugin-typescript2';
 const getLastElement = array => {
   return array[array.length - 1];
 };
-export const insertAt = (arr, index, insertee) => {
+export const insertAt = (arr, index, ...insertees) => {
   const newArr = [...arr];
   // Add 1 to the array length so that the inserted element ends up in the right spot with respect to the length of the
   // new array (which will be one element longer), rather than that of the current array
   const destinationIndex = index >= 0 ? index : arr.length + 1 + index;
-  newArr.splice(destinationIndex, 0, insertee);
+  newArr.splice(destinationIndex, 0, ...insertees);
   return newArr;
 };
 
@@ -46,14 +46,18 @@ function makeLicensePlugin(title) {
   });
 }
 
-export const terserPlugin = terser({
-  compress: {
-    // Tell env.ts that we're building a browser bundle and that we do not
-    // want to have unnecessary debug functionality.
-    global_defs: {
-      __SENTRY_NO_DEBUG__: false,
+function makeIsDebugBuildPlugin(includeDebugging) {
+  return replace({
+    // don't turn `const __SENTRY_DEBUG__ = false` into `const false = false`
+    preventAssignment: true,
+    // everywhere else, replace it with the value of `includeDebugging`
+    values: {
+      __SENTRY_DEBUG__: includeDebugging,
     },
-  },
+  });
+}
+
+export const terserPlugin = terser({
   mangle: {
     // captureExceptions and captureMessage are public API methods and they don't need to be listed here
     // as mangler doesn't touch user-facing thing, however sentryWrapped is not, and it would be mangled into a minified version.
@@ -190,45 +194,66 @@ export function makeBaseBundleConfig(options) {
   return deepMerge(sharedBundleConfig, isAddOn ? addOnBundleConfig : standAloneBundleConfig);
 }
 
-export function makeMinificationVariants(existingConfigs) {
-  const newConfigs = [];
-
-  // ensure we've got an array of configs rather than a single config
-  existingConfigs = Array.isArray(existingConfigs) ? existingConfigs : [existingConfigs];
+/**
+ * Takes the CDN rollup config for a given package and produces three versions of it:
+ *   - non-minified, including debug logging,
+ *   - minified, including debug logging,
+ *   - minified, with debug logging stripped
+ *
+ * @param baseConfig The rollup config shared by the entire package
+ * @returns An array of versions of that config
+ */
+export function makeConfigVariants(baseConfig) {
+  const configVariants = [];
 
-  existingConfigs.forEach(existingConfig => {
-    const { plugins } = existingConfig;
+  const { plugins } = baseConfig;
+  const includeDebuggingPlugin = makeIsDebugBuildPlugin(true);
+  const stripDebuggingPlugin = makeIsDebugBuildPlugin(false);
 
-    // The license plugin has to be last, so it ends up after terser. Otherwise, terser will remove the license banner.
-    assert(
-      getLastElement(plugins).name === 'rollup-plugin-license',
-      `Last plugin in given options should be \`rollup-plugin-license\`. Found ${getLastElement(plugins).name}`,
-    );
+  // The license plugin has to be last, so it ends up after terser. Otherwise, terser will remove the license banner.
+  assert(
+    getLastElement(plugins).name === 'rollup-plugin-license',
+    `Last plugin in given options should be \`rollup-plugin-license\`. Found ${getLastElement(plugins).name}`,
+  );
 
-    const bundleVariants = [
-      {
-        output: {
-          file: `${existingConfig.output.file}.js`,
-        },
-        plugins,
+  // The additional options to use for each variant we're going to create
+  const variantSpecificConfigs = [
+    {
+      output: {
+        file: `${baseConfig.output.file}.js`,
       },
-      {
-        output: {
-          file: `${existingConfig.output.file}.min.js`,
-        },
-        plugins: insertAt(plugins, -2, terserPlugin),
+      plugins: insertAt(plugins, -2, includeDebuggingPlugin),
+    },
+    // This variant isn't particularly helpful for an SDK user, as it strips logging while making no other minification
+    // changes, so by default we don't create it. It is however very useful when debugging rollup's treeshaking, so it's
+    // left here for that purpose.
+    // {
+    //   output: { file: `${baseConfig.output.file}.no-debug.js`,
+    //   },
+    //   plugins: insertAt(plugins, -2, stripDebuggingPlugin),
+    // },
+    {
+      output: {
+        file: `${baseConfig.output.file}.min.js`,
+      },
+      plugins: insertAt(plugins, -2, stripDebuggingPlugin, terserPlugin),
+    },
+    {
+      output: {
+        file: `${baseConfig.output.file}.debug.min.js`,
       },
-    ];
-
-    bundleVariants.forEach(variant => {
-      const mergedConfig = deepMerge(existingConfig, variant, {
-        // this makes it so that instead of concatenating the `plugin` properties of the two objects, the first value is
-        // just overwritten by the second value
-        arrayMerge: (first, second) => second,
-      });
-      newConfigs.push(mergedConfig);
+      plugins: insertAt(plugins, -2, includeDebuggingPlugin, terserPlugin),
+    },
+  ];
+
+  variantSpecificConfigs.forEach(variant => {
+    const mergedConfig = deepMerge(baseConfig, variant, {
+      // this makes it so that instead of concatenating the `plugin` properties of the two objects, the first value is
+      // just overwritten by the second value
+      arrayMerge: (first, second) => second,
     });
+    configVariants.push(mergedConfig);
   });
 
-  return newConfigs;
+  return configVariants;
 }