ref(build): Introduce central build directory to packages with bundles (#4838)

Adds the central build directory to all our packages producing CDN bundles in addition to NPM tarballs:
- Browser
- Integrations
- Tracing
- WASM

Additionally, the script that would formerly be called `postbuild.ts` is now `prepack.ts` and it runs first when executing `yarn build:npm`, followed by the tarball packing procedure via npm. 
Exception: Tracing needs to have the modified package.json in the build dir for our Playwright integration tests, so `prepack.ts` is also executed after every build.

Author: Lms24

.github/workflows/build.yml

@@ -204,8 +204,8 @@ jobs:
           name: ${{ github.sha }}
           path: |
             ${{ github.workspace }}/packages/browser/build/bundles/**
-            ${{ github.workspace }}/packages/integrations/build/**
-            ${{ github.workspace }}/packages/tracing/build/**
+            ${{ github.workspace }}/packages/integrations/build/bundles/**
+            ${{ github.workspace }}/packages/tracing/build/bundles/**
             ${{ github.workspace }}/packages/**/*.tgz
             ${{ github.workspace }}/packages/serverless/dist-awslambda-layer/*.zip
 

.size-limit.js

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

packages/browser/.npmignore

@@ -1,11 +1,11 @@
 # Info: the paths in this file are specified so that they align with the file
 # structure in `./build` where this file is copied to. This is done by the
-# postbuild script `sentry-javascript/scripts/postbuild.ts`.
+# prepack script `sentry-javascript/scripts/prepack.ts`.
 
 *
 
-# TODO remove bundles in v7
-!/bundles/**/*
+# TODO remove bundles (which in the tarball are inside `build`) in v7
+!/build/**/*
 
 !/dist/**/*
 !/types/**/*

packages/browser/package.json

@@ -9,9 +9,9 @@
   "engines": {
     "node": ">=6"
   },
-  "main": "build/dist/index.js",
-  "module": "build/esm/index.js",
-  "types": "build/types/index.d.ts",
+  "main": "build/npm/dist/index.js",
+  "module": "build/npm/esm/index.js",
+  "types": "build/npm/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 && ts-node ../../scripts/postbuild.ts",
+    "build": "run-p build:cjs build:esm build:bundle build:types",
     "build:bundle": "rollup --config",
     "build:cjs": "tsc -p tsconfig.cjs.json",
     "build:dev": "run-p build:cjs build:esm build:types",
@@ -58,7 +58,7 @@
     "build:dev:watch": "run-p build:cjs:watch build:esm:watch build:types:watch",
     "build:esm:watch": "tsc -p tsconfig.esm.json --watch",
     "build:types:watch": "tsc -p tsconfig.types.json --watch",
-    "build:npm": "npm pack ./build",
+    "build:npm": "ts-node ../../scripts/prepack.ts && npm pack ./build/npm",
     "circularDepCheck": "madge --circular src/index.ts",
     "clean": "rimraf build coverage .rpt2_cache",
     "fix": "run-s fix:eslint fix:prettier",

packages/browser/test/integration/run.js

@@ -73,7 +73,7 @@ function build() {
 
   writeFile(
     'artifacts/dedupe.js',
-    readFile('../../../integrations/build/dedupe.js').replace('//# sourceMappingURL=dedupe.js.map', '')
+    readFile('../../../integrations/build/bundles/dedupe.js').replace('//# sourceMappingURL=dedupe.js.map', '')
   );
   concatFiles('artifacts/setup.js', ['artifacts/dedupe.js', 'common/utils.js', 'common/triggers.js', 'common/init.js']);
   rmdir('artifacts/dedupe.js');

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

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

packages/browser/tsconfig.cjs.json

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

packages/browser/tsconfig.esm.json

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

packages/browser/tsconfig.types.json

@@ -5,6 +5,6 @@
     "declaration": true,
     "declarationMap": true,
     "emitDeclarationOnly": true,
-    "outDir": "build/types"
+    "outDir": "build/npm/types"
   }
 }

packages/integration-tests/utils/generatePlugin.ts

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

packages/integrations/.npmignore

@@ -1,4 +1,12 @@
+# Info: the paths in this file are specified so that they align with the file
+# structure in `./build` where this file is copied to. This is done by the
+# prepack script `sentry-javascript/scripts/prepack.ts`.
+
 *
-!/dist/**/*
+
+# TODO remove bundles (which in the tarball are inside `build`) in v7
 !/build/**/*
+
+!/dist/**/*
 !/esm/**/*
+!/types/**/*

packages/integrations/package.json

@@ -12,9 +12,9 @@
   "publishConfig": {
     "access": "public"
   },
-  "main": "dist/index.js",
-  "module": "esm/index.js",
-  "types": "build/types/index.d.ts",
+  "main": "build/npm/dist/index.js",
+  "module": "build/npm/esm/index.js",
+  "types": "build/npm/types/index.d.ts",
   "dependencies": {
     "@sentry/types": "6.19.4",
     "@sentry/utils": "6.19.4",
@@ -38,7 +38,7 @@
     "build:es5:watch": "yarn build:cjs:watch # *** backwards compatibility - remove in v7 ***",
     "build:esm:watch": "tsc -p tsconfig.esm.json --watch",
     "build:types:watch": "tsc -p tsconfig.types.json --watch",
-    "build:npm": "npm pack",
+    "build:npm": "ts-node ../../scripts/prepack.ts && npm pack ./build/npm",
     "circularDepCheck": "madge --circular src/index.ts",
     "clean": "rimraf dist esm build coverage .rpt2_cache",
     "fix": "run-s fix:eslint fix:prettier",

packages/integrations/rollup.config.js

@@ -12,7 +12,7 @@ const baseBundleConfig = makeBaseBundleConfig({
   isAddOn: true,
   jsVersion,
   licenseTitle: '@sentry/integrations',
-  outputFileBase: `${file.replace('.ts', '')}${jsVersion === 'ES6' ? '.es6' : ''}`,
+  outputFileBase: `bundles/${file.replace('.ts', '')}${jsVersion === 'ES6' ? '.es6' : ''}`,
 });
 
 // TODO We only need `commonjs` for localforage (used in the offline plugin). Once that's fixed, this can come out.

packages/integrations/tsconfig.cjs.json

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

packages/integrations/tsconfig.esm.json

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

packages/integrations/tsconfig.types.json

@@ -5,6 +5,6 @@
     "declaration": true,
     "declarationMap": true,
     "emitDeclarationOnly": true,
-    "outDir": "build/types"
+    "outDir": "build/npm/types"
   }
 }

packages/tracing/.npmignore

@@ -1,4 +1,12 @@
+# Info: the paths in this file are specified so that they align with the file
+# structure in `./build` where this file is copied to. This is done by the
+# prepack script `sentry-javascript/scripts/prepack.ts`.
+
 *
-!/dist/**/*
+
+# TODO remove bundles (which in the tarball are inside `build`) in v7
 !/build/**/*
+
+!/dist/**/*
 !/esm/**/*
+!/types/**/*

packages/tracing/package.json

@@ -9,9 +9,9 @@
   "engines": {
     "node": ">=6"
   },
-  "main": "dist/index.js",
-  "module": "esm/index.js",
-  "types": "build/types/index.d.ts",
+  "main": "build/npm/dist/index.js",
+  "module": "build/npm/esm/index.js",
+  "types": "build/npm/types/index.d.ts",
   "publishConfig": {
     "access": "public"
   },
@@ -29,7 +29,7 @@
     "jsdom": "^16.2.2"
   },
   "scripts": {
-    "build": "run-p build:cjs build:esm build:types build:bundle",
+    "build": "run-p build:cjs build:esm build:types build:bundle && ts-node ../../scripts/prepack.ts #necessary for integration tests",
     "build:bundle": "rollup --config",
     "build:cjs": "tsc -p tsconfig.cjs.json",
     "build:dev": "run-p build:cjs build:esm build:types",
@@ -43,7 +43,7 @@
     "build:es5:watch": "yarn build:cjs:watch # *** backwards compatibility - remove in v7 ***",
     "build:esm:watch": "tsc -p tsconfig.esm.json --watch",
     "build:types:watch": "tsc -p tsconfig.types.json --watch",
-    "build:npm": "npm pack",
+    "build:npm": "ts-node ../../scripts/prepack.ts && npm pack ./build/npm",
     "clean": "rimraf dist esm build coverage",
     "circularDepCheck": "madge --circular src/index.ts",
     "fix": "run-s fix:eslint fix:prettier",

packages/tracing/rollup.config.js

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

packages/tracing/tsconfig.cjs.json

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

packages/tracing/tsconfig.esm.json

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

packages/tracing/tsconfig.types.json

@@ -5,6 +5,6 @@
     "declaration": true,
     "declarationMap": true,
     "emitDeclarationOnly": true,
-    "outDir": "build/types"
+    "outDir": "build/npm/types"
   }
 }

packages/wasm/.npmignore

@@ -1,4 +1,9 @@
+# Info: the paths in this file are specified so that they align with the file
+# structure in `./build` where this file is copied to. This is done by the
+# prepack script `sentry-javascript/scripts/prepack.ts`.
+
 *
+
 !/dist/**/*
 !/esm/**/*
-!/build/types/**/*
+!/types/**/*

packages/wasm/package.json

@@ -9,9 +9,9 @@
   "engines": {
     "node": ">=6"
   },
-  "main": "dist/index.js",
-  "module": "esm/index.js",
-  "types": "build/types/index.d.ts",
+  "main": "build/npm/dist/index.js",
+  "module": "build/npm/esm/index.js",
+  "types": "build/npm/types/index.d.ts",
   "publishConfig": {
     "access": "public"
   },
@@ -43,9 +43,9 @@
     "build:es5:watch": "yarn build:cjs:watch # *** backwards compatibility - remove in v7 ***",
     "build:esm:watch": "tsc -p tsconfig.esm.json --watch",
     "build:types:watch": "tsc -p tsconfig.types.json --watch",
-    "build:npm": "npm pack",
+    "build:npm": "ts-node ../../scripts/prepack.ts -skipBundleCopy && npm pack ./build/npm",
     "circularDepCheck": "madge --circular src/index.ts",
-    "clean": "rimraf dist esm coverage *.js.map *.d.ts",
+    "clean": "rimraf dist esm build coverage *.js.map *.d.ts",
     "fix": "run-s fix:eslint fix:prettier",
     "fix:eslint": "eslint . --format stylish --fix",
     "fix:prettier": "prettier --write \"{src,test,scripts}/**/*.ts\"",

packages/wasm/rollup.config.js

@@ -5,7 +5,7 @@ const baseBundleConfig = makeBaseBundleConfig({
   isAddOn: true,
   jsVersion: 'es5',
   licenseTitle: '@sentry/wasm',
-  outputFileBase: 'wasm',
+  outputFileBase: 'bundles/wasm',
 });
 
 export default makeConfigVariants(baseBundleConfig);

packages/wasm/test/server.js

@@ -6,7 +6,7 @@ const app = express();
 // Wasm Integration Tests Artifacts
 app.use(express.static(path.resolve(__dirname, 'public')));
 // Wasm Integration Bundle
-app.use(express.static(path.resolve(__dirname, '../build')));
+app.use(express.static(path.resolve(__dirname, '../build/bundles')));
 // Browser SDK Bundle
 app.use(express.static(path.resolve(__dirname, '../../browser/build/bundles')));
 app.listen(process.env.PORT);

packages/wasm/tsconfig.cjs.json

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

packages/wasm/tsconfig.esm.json

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

packages/wasm/tsconfig.types.json

@@ -5,6 +5,6 @@
     "declaration": true,
     "declarationMap": true,
     "emitDeclarationOnly": true,
-    "outDir": "build/types"
+    "outDir": "build/npm/types"
   }
 }