ref(build): Add central build directory from JS SDK (getsentry/sentry-replay#321)

Introduce central `build` directory to the Replay package:

* Change build output to `build/npm` (see explanation below)
* Change `build:npm` command to execute a prepack script
* Temporarily introduce the `./scripts/tmp-prepack.ts` script which
copies files like `README.md`, `LICENSE` and `package.json` into
`build/npm`. This is a simplified version of the monorepo's prepack
script. While doing so, the script makes changes to `package.json` to
align the entry points.
* This file will be removed once we migrated as we can then use the
monorepo's prepack script.
* Remove the `files` entry in `package.json` for consistency with the
monorepo (we just rely on `.npmignore`s)
* Adjust occurrances of `dist` folder, replacing or adding `build` as
appropriate

As of this patch, the build directory will have the following structure:
```
<replay-root>/
├─ build/
│  ├─ npm/ <-- everything in this directory goes into the NPM tarball
│  │  ├─ types/
│  │  │  ├─ *.d.ts files (+maps)
│  │  ├─ index(.es)?.js file + map
│  │  ├─ package.json
│  │  ├─ LICENSE
│  |  ├─ README.md
├─ ...
```

Co-authored-by: Billy Vong <[email protected]>

Author: Lms24

.eslintignore

@@ -1,3 +1,3 @@
 node_modules/
-dist/
+build/
 demo/build/

.github/workflows/build.yml

@@ -22,6 +22,9 @@ jobs:
       - run: |
           yarn test
 
+      - run: |
+          yarn build
+
       - run: |
           yarn build:npm
 

.gitignore

@@ -1,4 +1,5 @@
 node_modules
-dist
 /*.tgz
 .eslintcache
+dist
+build

.npmignore

@@ -1,5 +1,3 @@
-*
-!/package.json
-!/README.md
-!/LICENSE
-!dist/**
+# TODO after we migrated, we should revisit this file and check if we can use the monorepo's master
+# .npmigore file or if we should add custom entries here.
+# For the time being, this can stay empty.

config/tsconfig.core.json

@@ -7,7 +7,7 @@
     "baseUrl": "..",
     "rootDir": "..",
     "strictNullChecks": true,
-    "outDir": "dist"
+    "outDir": "build/npm"
   },
   "include": ["../src/**/*.ts"],
   "exclude": ["../src/**/*.test.ts"]

package.json

@@ -2,9 +2,9 @@
   "name": "@sentry/replay",
   "version": "0.6.14",
   "description": "User replays for Sentry",
-  "main": "dist/index.js",
-  "module": "dist/index.es.js",
-  "types": "dist/types/src/index.d.ts",
+  "main": "build/npm/index.js",
+  "module": "build/npm/index.es.js",
+  "types": "build/npm/types/src/index.d.ts",
   "sideEffects": false,
   "scripts": {
     "bootstrap": "yarn && cd demo && yarn #TODO: change after migration",
@@ -17,9 +17,9 @@
     "build:watch": "NODE_ENV=production yarn build:all:watch",
     "build:dev:watch": "NODE_ENV=development yarn build:all:watch",
     "build:all:watch": "yarn clean && run-p \"build:worker --watch\" \"build:core --watch\"",
-    "build:npm": "yarn pack #TODO: use JS sdk prepack script after migration",
+    "build:npm": "ts-node ./scripts/tmp-prepack.ts --bundles && npm pack ./build/npm #TODO: use JS sdk prepack script after migration",
     "circularDepCheck": "#TODO comment in after migration: madge --circular src/index.ts",
-    "clean": "rimraf dist sentry-replay-*.tgz",
+    "clean": "rimraf build sentry-replay-*.tgz",
     "fix": "run-s fix:eslint fix:prettier",
     "fix:eslint": "eslint . --format stylish --fix",
     "fix:prettier": "prettier --write \"{src,test,scripts,worker}/**/*.ts\"",
@@ -29,13 +29,9 @@
     "test": "jest",
     "test:watch": "jest --watch",
     "start:demo": "yarn build:dev && cd demo && yarn start",
-    "prepack": "yarn build #TODO: remove after migration",
     "build:prod": "yarn build #TODO remove, we don't need this anymore after migration",
     "dev": "yarn build:dev:watch #TODO remove, we don't need this anymore after migration"
   },
-  "files": [
-    "dist"
-  ],
   "repository": {
     "type": "git",
     "url": "git+https://github.com/getsentry/sentry-replay.git"
@@ -92,7 +88,7 @@
   },
   "size-limit": [
     {
-      "path": "dist/index.js",
+      "path": "build/npm/index.js",
       "limit": "4500ms"
     }
   ],

scripts/tmp-prepack.ts

@@ -0,0 +1,91 @@
+/* eslint-disable @typescript-eslint/no-var-requires */
+/* eslint-disable no-console */
+
+/*
+  THIS IS ONLY TEMPORARILY HERE
+  This file is originally from the sentry-javascript repo. It's only here to ease
+  migration into the monorepo and will be removed once the migration is complete.
+  TODO: Delete once migrated to sentry-javascript
+*/
+
+/*
+  This script prepares the central `build` directory for NPM package creation.
+  It first copies all non-code files into the `build` directory, including `package.json`, which
+  is edited to adjust entry point paths. These corrections are performed so that the paths align with
+  the directory structure inside `build`.
+*/
+
+const fs = require('fs');
+const path = require('path');
+
+const NPM_BUILD_DIR = 'build/npm';
+const BUILD_DIR = 'build';
+
+const ASSETS = ['README.md', 'LICENSE', 'package.json'];
+const ENTRY_POINTS = ['main', 'module', 'types', 'browser'];
+
+const packageWithBundles = process.argv.includes('--bundles');
+const buildDir = packageWithBundles ? NPM_BUILD_DIR : BUILD_DIR;
+
+// eslint-disable-next-line @typescript-eslint/no-var-requires
+const pkgJson: { [key: string]: unknown } = require(path.resolve(
+  'package.json'
+));
+
+// check if build dir exists
+if (!fs.existsSync(path.resolve(buildDir))) {
+  console.error(
+    `\nERROR: Directory '${buildDir}' does not exist in ${pkgJson.name}.`
+  );
+  console.error(
+    "This script should only be executed after you've run `yarn build`."
+  );
+  process.exit(1);
+}
+
+// copy non-code assets to build dir
+ASSETS.forEach((asset) => {
+  const assetPath = path.resolve(asset);
+  if (!fs.existsSync(assetPath)) {
+    console.error(`\nERROR: Asset '${asset}' does not exist.`);
+    process.exit(1);
+  }
+  const destinationPath = path.resolve(buildDir, path.basename(asset));
+  console.log(
+    `Copying ${path.basename(asset)} to ${path.relative(
+      '../..',
+      destinationPath
+    )}.`
+  );
+  fs.copyFileSync(assetPath, destinationPath);
+});
+
+// package.json modifications
+const newPackageJsonPath = path.resolve(buildDir, 'package.json');
+// eslint-disable-next-line @typescript-eslint/no-var-requires
+const newPkgJson: { [key: string]: unknown } = require(newPackageJsonPath);
+
+// modify entry points to point to correct paths (i.e. strip out the build directory)
+ENTRY_POINTS.filter((entryPoint) => newPkgJson[entryPoint]).forEach(
+  (entryPoint) => {
+    newPkgJson[entryPoint] = (newPkgJson[entryPoint] as string).replace(
+      `${buildDir}/`,
+      ''
+    );
+  }
+);
+
+delete newPkgJson.scripts;
+delete newPkgJson.volta;
+delete newPkgJson.jest;
+
+// write modified package.json to file (pretty-printed with 2 spaces)
+try {
+  fs.writeFileSync(newPackageJsonPath, JSON.stringify(newPkgJson, null, 2));
+} catch (error) {
+  console.error(
+    `\nERROR: Error while writing modified 'package.json' to disk in ${pkgJson.name}:\n`,
+    error
+  );
+  process.exit(1);
+}