ref(build): Introduce root build directory in @sentry/browser

.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

@@ -78,10 +78,13 @@ function build() {
   concatFiles('artifacts/setup.js', ['artifacts/dedupe.js', 'common/utils.js', 'common/triggers.js', 'common/init.js']);
   rmdir('artifacts/dedupe.js');
 
-  writeFile('artifacts/sdk.js', readFile('../../build/bundle.js').replace('//# sourceMappingURL=bundle.js.map', ''));
+  writeFile(
+    'artifacts/sdk.js',
+    readFile('../../build/bundles/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"