ref(build): Add central build directory to packages without CDN bun…

…dles (Part 1) (#4854)

This PR is part 1 of adding the `build` directory to packages _without_ CDN bundles. It is split into two parts to make reviewing easier. It covers the following packages:

* Core
* Gatsby
* Hub
* Minimal

Additionally, it adjusts `prepack.ts` to handle both kinds of packages (with/without CDN bundles) via a CL argument. For the Gatsby SDK, additional actions have to be performed which are only relevant for this package. Therefore, `prepack.ts` now supports calling a package-specific `prepack.ts` file located in `<package>/scripts/prepack.ts`. 

While the tarball structure is identical to the structure in #4838 (except for temporary CDN bundles), the `build` directory structure is simplified due to the fact that there are no CDN bundles or legacy NPM packages to be added to it. Therefore we can reduce one hierarchy level, resulting in the following structure:

```
<sdk>/
├─ build/
│  ├─ cjs/    // dist until v7
│  │  ├─ CJS modules (+maps)
│  ├─ esm/
│  │  ├─ ES6 modules (+maps)
│  ├─ types/
│  │  ├─ *.d.ts files (+maps)
│  ├─ package.json
│  ├─ LICENSE
│  ├─ README.md
├─ ...
```

Co-authored-by: Abhijeet Prasad <aprasad@sentry.io>

packages/core/.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/core/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"
@@ -35,9 +35,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 -noBundles && npm pack ./build",
     "circularDepCheck": "madge --circular src/index.ts",
-    "clean": "rimraf dist esm coverage",
+    "clean": "rimraf dist esm build coverage",
     "fix": "run-s fix:eslint fix:prettier",
     "fix:eslint": "eslint . --format stylish --fix",
     "fix:prettier": "prettier --write \"{src,test,scripts}/**/*.ts\"",

packages/core/tsconfig.cjs.json

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

packages/core/tsconfig.esm.json

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

packages/gatsby/.eslintrc.js

@@ -6,5 +6,8 @@ module.exports = {
   parserOptions: {
     jsx: true,
   },
+  // ignoring the package-specific prepack script here b/c it is not
+  // covered by a `tsconfig` which makes eslint throw an error
+  ignorePatterns: ['scripts/prepack.ts'],
   extends: ['../../.eslintrc.js'],
 };

packages/gatsby/.npmignore

@@ -1,6 +1,13 @@
+# 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/**/*
+
+# Gatsby specific
 !gatsby-browser.js
 !gatsby-node.js

packages/gatsby/package.json

@@ -13,8 +13,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"
@@ -46,7 +46,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 -noBundles && npm pack ./build",
     "circularDepCheck": "madge --circular src/index.ts",
     "clean": "rimraf dist esm build coverage",
     "fix": "run-s fix:eslint fix:prettier",

packages/gatsby/scripts/prepack.ts

@@ -0,0 +1,27 @@
+/* eslint-disable no-console */
+
+// DO NOT RUN this script yourself!
+// This is invoked from the main `prepack.ts` script in `sentry-javascript/scripts/prepack.ts`.
+
+import * as fs from 'fs';
+import * as path from 'path';
+
+const PACKAGE_ASSETS = ['gatsby-browser.js', 'gatsby-node.js'];
+
+export function prepack(buildDir: string): boolean {
+  // copy package-specific assets to build dir
+  return PACKAGE_ASSETS.every(asset => {
+    const assetPath = path.resolve(asset);
+    try {
+      if (!fs.existsSync(assetPath)) {
+        console.error(`Asset ${asset} does not exist.`);
+        return false;
+      }
+      fs.copyFileSync(assetPath, path.resolve(buildDir, asset));
+    } catch (error) {
+      console.error(`Error while copying ${asset} to ${buildDir}`);
+      return false;
+    }
+    return true;
+  });
+}

packages/gatsby/tsconfig.cjs.json

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

packages/gatsby/tsconfig.esm.json

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

packages/hub/.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/hub/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"
@@ -33,6 +33,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": "ts-node ../../scripts/prepack.ts -noBundles && npm pack ./build",
     "circularDepCheck": "madge --circular src/index.ts",
     "clean": "rimraf dist esm coverage",
     "fix": "run-s fix:eslint fix:prettier",
@@ -41,8 +42,7 @@
     "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,scripts}/**/*.ts\"",
-    "build:npm": "npm pack",
+    "lint:prettier": "prettier --check \"{src,test}/**/*.ts\"",
     "test": "jest",
     "test:watch": "jest --watch"
   },

packages/hub/tsconfig.cjs.json

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

packages/hub/tsconfig.esm.json

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

packages/minimal/.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/minimal/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"
@@ -33,16 +33,16 @@
     "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": "ts-node ../../scripts/prepack.ts -noBundles && npm pack ./build",
     "circularDepCheck": "madge --circular src/index.ts",
-    "clean": "rimraf dist esm coverage",
+    "clean": "rimraf dist esm build coverage",
     "fix": "run-s fix:eslint fix:prettier",
     "fix:eslint": "eslint . --format stylish --fix",
     "fix:prettier": "prettier --write \"{src,test,scripts}/**/*.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,scripts}/**/*.ts\"",
-    "build:npm": "npm pack",
     "test": "jest",
     "test:watch": "jest --watch"
   },

packages/minimal/tsconfig.cjs.json

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

packages/minimal/tsconfig.esm.json

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

scripts/prepack.ts

@@ -11,18 +11,23 @@ import * as fse from 'fs-extra';
 import * as path from 'path';
 
 const NPM_BUILD_DIR = 'build/npm';
+const BUILD_DIR = 'build';
+
 const ASSETS = ['README.md', 'LICENSE', 'package.json', '.npmignore'];
 const ENTRY_POINTS = ['main', 'module', 'types'];
 
+const packageWithBundles = !process.argv.includes('-noBundles');
+const buildDir = packageWithBundles ? NPM_BUILD_DIR : BUILD_DIR;
+
 // check if build dir exists
 try {
-  if (!fs.existsSync(path.resolve(NPM_BUILD_DIR))) {
-    console.error(`Directory ${NPM_BUILD_DIR} DOES NOT exist`);
+  if (!fs.existsSync(path.resolve(buildDir))) {
+    console.error(`Directory ${buildDir} DOES NOT exist`);
     console.error("This script should only be executed after you've run `yarn build`.");
     process.exit(1);
   }
 } catch (error) {
-  console.error(`Error while looking up directory ${NPM_BUILD_DIR}`);
+  console.error(`Error while looking up directory ${buildDir}`);
   process.exit(1);
 }
 
@@ -34,9 +39,9 @@ ASSETS.forEach(asset => {
       console.error(`Asset ${asset} does not exist.`);
       process.exit(1);
     }
-    fs.copyFileSync(assetPath, path.resolve(NPM_BUILD_DIR, asset));
+    fs.copyFileSync(assetPath, path.resolve(buildDir, asset));
   } catch (error) {
-    console.error(`Error while copying ${asset} to ${NPM_BUILD_DIR}`);
+    console.error(`Error while copying ${asset} to ${buildDir}`);
     process.exit(1);
   }
 });
@@ -45,28 +50,30 @@ ASSETS.forEach(asset => {
 // copy CDN bundles into npm dir to temporarily keep bundles in npm tarball
 // inside the tarball, they are located in `build/`
 // for now, copy it by default, unless explicitly forbidden via an command line arg
-const tmpCopyBundles = !process.argv.includes('-skipBundleCopy');
+const tmpCopyBundles = packageWithBundles && !process.argv.includes('-skipBundleCopy');
 if (tmpCopyBundles) {
-  const npmTmpBundlesPath = path.resolve(NPM_BUILD_DIR, 'build');
+  const npmTmpBundlesPath = path.resolve(buildDir, 'build');
   const cdnBundlesPath = path.resolve('build', 'bundles');
   try {
     if (!fs.existsSync(npmTmpBundlesPath)) {
       fs.mkdirSync(npmTmpBundlesPath);
     }
     void fse.copy(cdnBundlesPath, npmTmpBundlesPath);
   } catch (error) {
-    console.error(`Error while tmp copying CDN bundles to ${NPM_BUILD_DIR}`);
+    console.error(`Error while tmp copying CDN bundles to ${buildDir}`);
     process.exit(1);
   }
 }
+// end remove
+
 // package.json modifications
-const packageJsonPath = path.resolve(NPM_BUILD_DIR, 'package.json');
+const packageJsonPath = path.resolve(buildDir, 'package.json');
 // eslint-disable-next-line @typescript-eslint/no-var-requires
 const pkgJson: { [key: string]: unknown } = require(packageJsonPath);
 
 // modify entry points to point to correct paths (i.e. strip out the build directory)
 ENTRY_POINTS.filter(entryPoint => pkgJson[entryPoint]).forEach(entryPoint => {
-  pkgJson[entryPoint] = (pkgJson[entryPoint] as string).replace(`${NPM_BUILD_DIR}/`, '');
+  pkgJson[entryPoint] = (pkgJson[entryPoint] as string).replace(`${buildDir}/`, '');
 });
 
 delete pkgJson.scripts;
@@ -81,4 +88,34 @@ try {
   process.exit(1);
 }
 
-console.log(`\nSuccessfully finished prepack commands for ${pkgJson.name}\n`);
+async function runPackagePrepack(packagePrepackPath: string): Promise<void> {
+  const { prepack } = await import(packagePrepackPath);
+  if (prepack && typeof prepack === 'function') {
+    const isSuccess = prepack(buildDir);
+    if (!isSuccess) {
+      process.exit(1);
+    }
+  } else {
+    console.error(`Could not find a prepack function in ${packagePrepackPath}.`);
+    console.error(
+      'Make sure, your package-specific prepack script exports `function prepack(buildDir: string): boolean`.',
+    );
+    process.exit(1);
+  }
+}
+
+// execute package specific settings
+// 1. check if a package called `<package-root>/scripts/prepack.ts` exitsts
+// if yes, 2.) execute that script for things that are package-specific
+void (async () => {
+  const packagePrepackPath = path.resolve('scripts', 'prepack.ts');
+  try {
+    if (fs.existsSync(packagePrepackPath)) {
+      await runPackagePrepack(packagePrepackPath);
+    }
+  } catch (error) {
+    console.error(`Error while trying to access ${packagePrepackPath.toString()}`);
+    process.exit(1);
+  }
+  console.log(`\nSuccessfully finished prepack commands for ${pkgJson.name}\n`);
+})();