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

Lms24 · lobsterkatie · web-flow · commit 0416980eb257 · 2022-03-18T11:25:41.000+01:00
* add central `build` directory to the browser package as the output directory for all module formats and bundles. This puts  all build JS files and modules (bundles, esm, cjs, types) into one central build directory. This should keep things more organized and more clearly arranged.

* add a `postbuild.sh` script to the root `scripts` directory which takes care of adding non-code assets (LICENSE, Readme, package.json) to the build directory. Additionally, it adjusts the entry points of the copied `package.json` the structure inside the build dir.

* adjust the browser package's `pack` npm script to pack from inside of `build` and put the tarball into the browser package's root directory

* adjust additional packages, tests, CI config, etc. to work with the new build directory

Co-authored-by: Katie Byers &lt;lobsterkatie@gmail.com&gt;
diff --git a/.github/workflows/build.yml b/.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
diff --git a/.size-limit.js b/.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',
diff --git a/packages/browser/examples/bundle.js b/packages/browser/examples/bundle.js
@@ -1 +1 @@
-../build/bundle.js
+../build/bundles/bundle.js
diff --git a/packages/browser/package.json b/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",
diff --git a/packages/browser/rollup.config.js b/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));
diff --git a/packages/browser/src/loader.js b/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://public@example.com/1'
 });
diff --git a/packages/browser/test/integration/run.js b/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(
diff --git a/packages/browser/test/package/test-code.js b/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
diff --git a/packages/browser/tsconfig.cjs.json b/packages/browser/tsconfig.cjs.json
@@ -3,6 +3,6 @@
 
   "compilerOptions": {
     "module": "commonjs",
-    "outDir": "dist"
+    "outDir": "build/dist",
   }
 }
diff --git a/packages/browser/tsconfig.esm.json b/packages/browser/tsconfig.esm.json
@@ -3,6 +3,6 @@
 
   "compilerOptions": {
     "module": "es6",
-    "outDir": "esm"
+    "outDir": "build/esm",
   }
 }
diff --git a/packages/integration-tests/utils/generatePlugin.ts b/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',
diff --git a/packages/wasm/test/scripts/ensure-browser-bundle.js b/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`);
diff --git a/packages/wasm/test/server.js b/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);
diff --git a/scripts/postbuild.sh b/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"

Original file line number	Diff line number	Diff line change
`@@ -1 +1 @@`
`1`		`-../build/bundle.js`
	`1`	`+../build/bundles/bundle.js`
Original file line number	Diff line number	Diff line change
`@@ -212,6 +212,6 @@`
`212`	`212`	`injectSdk(onLoadCallbacks);`
`213`	`213`	`});`
`214`	`214`	`}`
`215`		`-})(window, document, 'script', 'onerror', 'onunhandledrejection', 'Sentry', 'loader.js', '../../build/bundle.js', {`
	`215`	`+})(window, document, 'script', 'onerror', 'onunhandledrejection', 'Sentry', 'loader.js', '../../build/bundles/bundle.js', {`
`216`	`216`	`dsn: 'https://[email protected]/1'`
`217`	`217`	`});`
Original file line number	Diff line number	Diff line change
`@@ -3,6 +3,6 @@`
`3`	`3`
`4`	`4`	`"compilerOptions": {`
`5`	`5`	`"module": "commonjs",`
`6`		`- "outDir": "dist"`
	`6`	`+ "outDir": "build/dist",`
`7`	`7`	`}`
`8`	`8`	`}`
Original file line number	Diff line number	Diff line change
`@@ -3,6 +3,6 @@`
`3`	`3`
`4`	`4`	`"compilerOptions": {`
`5`	`5`	`"module": "es6",`
`6`		`- "outDir": "esm"`
	`6`	`+ "outDir": "build/esm",`
`7`	`7`	`}`
`8`	`8`	`}`