feat(build): introduce root build directory in @sentry/browser

* add root build directory as the output directory for all module formats and bundles. This puts
  all build JS files and modules (bundles, esm, cjs) into one central build directory. Currently,
  `package.json`, Readme, License, etc. are still in the package root directories. This should
  keep things more organized and more clearly arranged.

* adjust `tsconfig.json` to build type declarations (*.d.ts) into a separate directory
  (`build/types`). This deduplicates the identical declarations that were peviously compiled
  into `dist` and `esm`.

* introduce `rootBuildDirectory` export in root `rollup.config.js` as it will (probably) be
  used in multiple packages and this lets us change the name for all of them at once.

Co-authored-by: Katie Byers <[email protected]>

Author: Lms24

.github/workflows/build.yml

@@ -304,7 +304,7 @@ jobs:
         with:
           name: ${{ github.sha }}
           path: |
-            ${{ github.workspace }}/packages/browser/build/**
+            ${{ github.workspace }}/packages/browser/build/bundles/**
             ${{ github.workspace }}/packages/integrations/build/**
             ${{ github.workspace }}/packages/tracing/build/**
             ${{ github.workspace }}/packages/**/*.tgz

.size-limit.js

@@ -1,38 +1,38 @@
 module.exports = [
   {
     name: '@sentry/browser - ES5 CDN Bundle (gzipped + minified)',
-    path: 'packages/browser/build/bundle.min.js',
+    path: 'packages/browser/build/bundles/bundle.min.js',
     gzip: true,
     limit: '100 KB',
   },
   {
     name: '@sentry/browser - ES5 CDN Bundle (minified)',
-    path: 'packages/browser/build/bundle.min.js',
+    path: 'packages/browser/build/bundles/bundle.min.js',
     gzip: false,
     limit: '120 KB',
   },
   {
     name: '@sentry/browser - ES6 CDN Bundle (gzipped + minified)',
-    path: 'packages/browser/build/bundle.es6.min.js',
+    path: 'packages/browser/build/bundles/bundle.es6.min.js',
     gzip: true,
     limit: '100 KB',
   },
   {
     name: '@sentry/browser - ES6 CDN Bundle (minified)',
-    path: 'packages/browser/build/bundle.es6.min.js',
+    path: 'packages/browser/build/bundles/bundle.es6.min.js',
     gzip: false,
     limit: '120 KB',
   },
   {
     name: '@sentry/browser - Webpack (gzipped + minified)',
-    path: 'packages/browser/esm/index.js',
+    path: 'packages/browser/build/esm/index.js',
     import: '{ init }',
     gzip: true,
     limit: '100 KB',
   },
   {
     name: '@sentry/browser - Webpack (minified)',
-    path: 'packages/browser/esm/index.js',
+    path: 'packages/browser/build/esm/index.js',
     import: '{ init }',
     gzip: false,
     limit: '100 KB',

packages/browser/examples/bundle.js

@@ -1 +1 @@
-../build/bundle.js
+../build/bundles/bundle.js

packages/browser/package.json

@@ -9,8 +9,8 @@
   "engines": {
     "node": ">=6"
   },
-  "main": "dist/index.js",
-  "module": "esm/index.js",
+  "main": "build/dist/index.js",
+  "module": "build/esm/index.js",
   "types": "build/types/index.d.ts",
   "publishConfig": {
     "access": "public"
@@ -44,7 +44,7 @@
     "webpack": "^4.30.0"
   },
   "scripts": {
-    "build": "run-p build:cjs build:esm build:bundle build:types",
+    "build": "run-p build:cjs build:esm build:bundle build:types && bash ../../scripts/postbuild.sh",
     "build:bundle": "rollup --config",
     "build:cjs": "tsc -p tsconfig.cjs.json",
     "build:dev": "run-p build:cjs build:esm build:types",
@@ -59,18 +59,18 @@
     "build:esm:watch": "tsc -p tsconfig.esm.json --watch",
     "build:types:watch": "tsc -p tsconfig.types.json --watch",
     "circularDepCheck": "madge --circular src/index.ts",
-    "clean": "rimraf dist esm build coverage .rpt2_cache",
+    "clean": "rimraf build coverage .rpt2_cache",
     "fix": "run-s fix:eslint fix:prettier",
     "fix:eslint": "eslint . --format stylish --fix",
     "fix:prettier": "prettier --write \"{src,test}/**/*.ts\"",
     "link:yarn": "yarn link",
     "lint": "run-s lint:prettier lint:eslint",
     "lint:eslint": "eslint . --cache --cache-location '../../eslintcache/' --format stylish",
     "lint:prettier": "prettier --check \"{src,test}/**/*.ts\"",
-    "pack": "npm pack",
+    "pack": "npm pack ./build",
     "size:check": "run-p size:check:es5 size:check:es6",
-    "size:check:es5": "cat build/bundle.min.js | gzip -9 | wc -c | awk '{$1=$1/1024; print \"ES5: \",$1,\"kB\";}'",
-    "size:check:es6": "cat build/bundle.es6.min.js | gzip -9 | wc -c | awk '{$1=$1/1024; print \"ES6: \",$1,\"kB\";}'",
+    "size:check:es5": "cat build/bundles/bundle.min.js | gzip -9 | wc -c | awk '{$1=$1/1024; print \"ES5: \",$1,\"kB\";}'",
+    "size:check:es6": "cat build/bundles/bundle.es6.min.js | gzip -9 | wc -c | awk '{$1=$1/1024; print \"ES6: \",$1,\"kB\";}'",
     "test": "run-s test:unit",
     "test:unit": "jest --config test/unit/jest.config.js",
     "test:integration": "test/integration/run.js",

packages/browser/rollup.config.js

@@ -8,7 +8,7 @@ const builds = [];
     isAddOn: false,
     jsVersion,
     licenseTitle: '@sentry/browser',
-    outputFileBase: `bundle${jsVersion === 'es6' ? '.es6' : ''}`,
+    outputFileBase: `bundles/bundle${jsVersion === 'es6' ? '.es6' : ''}`,
   });
 
   builds.push(...makeConfigVariants(baseBundleConfig));

packages/browser/src/loader.js

@@ -212,6 +212,6 @@
       injectSdk(onLoadCallbacks);
     });
   }
-})(window, document, 'script', 'onerror', 'onunhandledrejection', 'Sentry', 'loader.js', '../../build/bundle.js', {
+})(window, document, 'script', 'onerror', 'onunhandledrejection', 'Sentry', 'loader.js', '../../build/bundles/bundle.js', {
   dsn: 'https://[email protected]/1'
 });

packages/browser/test/integration/run.js

@@ -81,7 +81,7 @@ function build() {
   writeFile('artifacts/sdk.js', readFile('../../build/bundle.js').replace('//# sourceMappingURL=bundle.js.map', ''));
   writeFile(
     'artifacts/loader.js',
-    readFile('../../src/loader.js').replace('../../build/bundle.js', '/base/artifacts/sdk.js')
+    readFile('../../src/loader.js').replace('../../build/bundles/bundle.js', '/base/artifacts/sdk.js')
   );
 
   writeFile(

packages/browser/test/package/test-code.js

@@ -1,5 +1,5 @@
 /* eslint-disable no-console */
-const Sentry = require('../../dist/index.js');
+const Sentry = require('../../build/dist/index.js');
 const Integrations = require('../../../integrations/dist/dedupe.js');
 
 // Init

packages/browser/tsconfig.cjs.json

@@ -3,6 +3,6 @@
 
   "compilerOptions": {
     "module": "commonjs",
-    "outDir": "dist"
+    "outDir": "build/dist",
   }
 }

packages/browser/tsconfig.esm.json

@@ -3,6 +3,6 @@
 
   "compilerOptions": {
     "module": "es6",
-    "outDir": "esm"
+    "outDir": "build/esm",
   }
 }

packages/integration-tests/utils/generatePlugin.ts

@@ -17,12 +17,12 @@ const useBundle = bundleKey && !useCompiledModule;
 
 const BUNDLE_PATHS: Record<string, Record<string, string>> = {
   browser: {
-    cjs: 'dist/index.js',
-    esm: 'esm/index.js',
-    bundle_es5: 'build/bundle.js',
-    bundle_es5_min: 'build/bundle.min.js',
-    bundle_es6: 'build/bundle.es6.js',
-    bundle_es6_min: 'build/bundle.es6.min.js',
+    cjs: 'build/dist/index.js',
+    esm: 'build/esm/index.js',
+    bundle_es5: 'build/bundles/bundle.js',
+    bundle_es5_min: 'build/bundles/bundle.min.js',
+    bundle_es6: 'build/bundles/bundle.es6.js',
+    bundle_es6_min: 'build/bundles/bundle.es6.min.js',
   },
   tracing: {
     cjs: 'dist/index.js',

packages/wasm/test/scripts/ensure-browser-bundle.js

@@ -4,7 +4,7 @@ const { execSync } = require('child_process');
 
 function ensureBrowserBundle() {
   const browserPackageDir = path.resolve(__dirname, '../../../browser');
-  if (!fs.existsSync(path.resolve(browserPackageDir, 'build/bundle.js'))) {
+  if (!fs.existsSync(path.resolve(browserPackageDir, 'build/bundles/bundle.js'))) {
     // eslint-disable-next-line no-console
     console.warn('\nWARNING: Missing browser bundle. Bundle will be created before running wasm integration tests.');
     execSync(`pushd ${browserPackageDir} && yarn build:bundle && popd`);

packages/wasm/test/server.js

@@ -8,5 +8,5 @@ app.use(express.static(path.resolve(__dirname, 'public')));
 // Wasm Integration Bundle
 app.use(express.static(path.resolve(__dirname, '../build')));
 // Browser SDK Bundle
-app.use(express.static(path.resolve(__dirname, '../../browser/build')));
+app.use(express.static(path.resolve(__dirname, '../../browser/build/bundles')));
 app.listen(process.env.PORT);

scripts/postbuild.sh

@@ -0,0 +1,39 @@
+#!/bin/sh
+
+# This script prepares the `build` directory for NPM package creation.
+# It first copies all non-code files into the `build` directory, including `package.json` which
+# is edited via a few `sed` commands. These edits include corrections of paths (e.g. entry points)
+# in the copied package.json so that they align with the directory structure inside `build`.
+
+BUILD_DIR=build
+
+ASSETS="README.md
+LICENSE
+package.json"
+
+# check if build dir exists
+if [ ! -d $BUILD_DIR ]; then
+  echo "Directory ${BUILD_DIR}/ DOES NOT exist."
+  echo "This script should only be executed after you've run \`yarn build\`."
+  exit 1
+fi
+
+# copy non-code assets to build dir
+for f in $ASSETS; do
+  cp $f $BUILD_DIR/
+done
+
+# package.json modifications
+
+# sed command to modify package.json entry points in build dir
+# remove `BUILD_DIR` from `main`, `module` and `type` entry point paths
+entryPointsCommand="/\"(main|module|types)\": .*,/s/$BUILD_DIR\///"
+
+# use empty backup file extension for sed in-place editing on MacOS and no backup for other platforms
+if [[ $(uname) == "Darwin" ]]; then
+  sed -i "" -E "$entryPointsCommand" $BUILD_DIR/package.json
+else
+  sed -i -E "$entryPointsCommand#" $BUILD_DIR/package.json
+fi
+
+echo "Successfully finished postbuild commands"