build(replay): Use Monorepo's rollup config to build Replay (#6343)

Update Replay's build config to use our monorepo's rollup config for building and transpiling the Replay integration. With this patch, we're introducing a breaking change because the tarball structure is going to change. However, this only breaks users who imported from package-internal paths directly and not from the top-level package.

More specifically, these are the changes:

* Move and rename`./config/rollup.config.core.ts` to `./rollup.npm.config.js` which now uses our `makeNPMConfigVariants` and `makeBaseNPMConfig` rollup config helper functions to create ESM and CJS transpiled JS, just like in all our other packages. For now we have to change this to JavaScript but we can ofc revisit having TS-based rollup configs in the future.
  * Instead of bundling everything into the `index.js` files, this config now just transpiles the individual modules. This is how we do it in all our other packages. We might have to revisit this strategy for vendoring rrweb and bundling but we can build on top of this PR to do so.
* Move and rename `./config/rollup.worker.config.ts` to `./rollup.worker.config.js` (no changes)
* Update eslint configs
* Fix a few type errors I came across while performing these build changes
* Update `package.json` scripts so that they are in line with the scripts of our other packages. This should simplify the scripts a little.
* Revert #6307 as we now transpile and check/build types separately, like we do with the rest of our packages.
* Revert #6341 as the`__SENTRY_DEBUG__` flag is now set in our rollup helper functions

Author: Lms24

.size-limit.js

@@ -66,22 +66,22 @@ module.exports = [
   // This entry is only here temporarily and will be replaced once we have proper CDN bundles
   {
     name: '@sentry/replay index.js',
-    path: 'packages/replay/build/npm/dist/index.js',
+    path: 'packages/replay/build/npm/esm/index.js',
     gzip: true,
     limit: '100 KB',
     ignore: ['@sentry/browser', '@sentry/utils', '@sentry/core', '@sentry/types'],
   },
   {
     name: '@sentry/replay - Webpack (gzipped + minified)',
-    path: 'packages/replay/build/npm/dist/index.js',
+    path: 'packages/replay/build/npm/esm/index.js',
     import: '{ Replay }',
     gzip: true,
     limit: '100 KB',
     ignore: ['@sentry/browser', '@sentry/utils', '@sentry/core', '@sentry/types'],
   },
   {
     name: '@sentry/replay - Webpack (minified)',
-    path: 'packages/replay/build/npm/dist/index.js',
+    path: 'packages/replay/build/npm/esm/index.js',
     import: '{ Replay }',
     gzip: false,
     limit: '300 KB',

packages/replay/.eslintrc.js

@@ -5,21 +5,7 @@
 
 module.exports = {
   extends: ['../../.eslintrc.js'],
-  ignorePatterns: [
-    'coverage/**',
-    'build/**',
-    'dist/**',
-    'cjs/**',
-    'esm/**',
-    'examples/**',
-    'test/manual/**',
-    'types/**',
-    // TODO: Remove these after migration
-    'scripts/**',
-    'config/**',
-    'config/**',
-    '__mocks__/**',
-  ],
+  ignorePatterns: ['rollup.config.worker.js'],
   overrides: [
     {
       files: ['worker/**/*.ts'],

packages/replay/.gitignore

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

packages/replay/config/rollup.config.core.ts

@@ -2,22 +2,21 @@
   "name": "@sentry/replay",
   "version": "7.22.0",
   "description": "User replays for Sentry",
-  "main": "build/npm/dist/index.js",
-  "module": "build/npm/dist/index.es.js",
-  "types": "build/npm/dist/src/index.d.ts",
+  "main": "build/npm/cjs/index.js",
+  "module": "build/npm/esm/index.js",
+  "types": "build/npm/types/src/index.d.ts",
   "sideEffects": false,
   "scripts": {
     "bootstrap": "yarn && cd demo && yarn #TODO: change after migration",
-    "build": "yarn build:extras",
-    "build:extras": "NODE_ENV=production yarn build:all",
-    "build:dev": "NODE_ENV=development yarn build:all",
-    "build:all": "run-s clean build:worker build:core",
-    "build:core": "yarn build:actualRollup --config config/rollup.config.core.ts",
-    "build:worker": "yarn build:actualRollup --config config/rollup.config.worker.ts",
-    "build:actualRollup": "rollup",
-    "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:rollup": "run-s build:worker build:core",
+    "build": "run-s build:worker && run-p build:core build:types",
+    "build:dev": "run-s build #TODO adjust after adding CDN bundles",
+    "build:worker": "rollup -c rollup.config.worker.js",
+    "build:core": "rollup -c rollup.npm.config.js",
+    "build:types": "tsc -p tsconfig.types.json",
+    "build:watch": "run-p \"build:worker --watch\" \"build:core --watch\" build:types:watch",
+    "build:dev:watch": "yarn build:watch #TODO adjust after adding CDN bundles",
+    "build:types:watch": "tsc -p tsconfig.types.json --watch",
     "build:npm": "ts-node ../../scripts/prepack.ts --bundles && npm pack ./build/npm",
     "circularDepCheck": "#TODO comment in after migration: madge --circular src/index.ts",
     "clean": "rimraf build sentry-replay-*.tgz",

packages/replay/package.json

@@ -0,0 +1,28 @@
+import replace from '@rollup/plugin-replace';
+
+import { makeBaseNPMConfig, makeNPMConfigVariants } from '../../rollup/index';
+
+import pkg from './package.json';
+
+export default makeNPMConfigVariants(
+  makeBaseNPMConfig({
+    hasBundles: true,
+    packageSpecificConfig: {
+      external: [...Object.keys(pkg.dependencies || {}), ...Object.keys(pkg.peerDependencies || {})],
+      plugins: [
+        // TODO: Remove this - replay version will be in sync w/ SDK version
+        replace({
+          preventAssignment: true,
+          values: {
+            __SENTRY_REPLAY_VERSION__: JSON.stringify(pkg.version),
+          },
+        }),
+      ],
+      output: {
+        // set exports to 'named' or 'auto' so that rollup doesn't warn about
+        // the default export in `worker/worker.js`
+        exports: 'named',
+      },
+    },
+  }),
+);

packages/replay/config/rollup.config.worker.ts renamed to packages/replay/rollup.config.worker.js

@@ -2,7 +2,7 @@ import { WINDOW } from '@sentry/browser';
 import { browserPerformanceTimeOrigin } from '@sentry/utils';
 import { record } from 'rrweb';
 
-import { AllPerformanceEntry } from './types';
+import { AllPerformanceEntry, PerformanceNavigationTiming, PerformancePaintTiming } from './types';
 import { isIngestHost } from './util/isIngestHost';
 
 export interface ReplayPerformanceEntry {

packages/replay/rollup.npm.config.js

@@ -35,14 +35,16 @@ export interface WorkerRequest {
 
 declare global {
   const __SENTRY_REPLAY_VERSION__: string;
-
-  // PerformancePaintTiming is only available since TS 4.4, so for now we just define this here
-  // see: https://github.com/microsoft/TypeScript/blob/main/lib/lib.dom.d.ts#L10564
-  type PerformancePaintTiming = PerformanceEntry;
-  // @ts-ignore declare again, this _should_ be there but somehow is not available in worker context
-  type PerformanceNavigationTiming = PerformanceEntry;
 }
 
+// PerformancePaintTiming and PerformanceNavigationTiming are only available with TS 4.4 and newer
+// Therefore, we're exporting them here to make them available in older TS versions
+export type PerformancePaintTiming = PerformanceEntry;
+export type PerformanceNavigationTiming = PerformanceEntry & {
+  type: string;
+  transferSize: number;
+  domComplete: number;
+};
 /**
  * The response from the worker
  */

packages/replay/src/createPerformanceEntry.ts

@@ -1,3 +1,5 @@
+import type { PerformanceNavigationTiming, PerformancePaintTiming } from '../types';
+
 const NAVIGATION_ENTRY_KEYS: Array<keyof PerformanceNavigationTiming> = [
   'name',
   'type',

packages/replay/src/types.ts

@@ -1,3 +1,5 @@
+import { PerformancePaintTiming } from '../../../src/types';
+
 export function PerformanceEntryLcp(obj?: Partial<PerformancePaintTiming>): PerformancePaintTiming {
   const entry = {
     name: '',

packages/replay/src/util/dedupePerformanceEntries.ts

@@ -1,3 +1,5 @@
+import type { PerformanceNavigationTiming } from '../../../src/types';
+
 export function PerformanceEntryNavigation(obj?: Partial<PerformanceNavigationTiming>): PerformanceNavigationTiming {
   const entry = {
     name: 'https://sentry.io/organizations/sentry/discover/',

packages/replay/test/fixtures/performanceEntry/lcp.ts

@@ -16,9 +16,7 @@
     "allowJs": true,
     "declaration": true,
     "declarationMap": true,
-    "declarationDir": "./types",
-    "strictNullChecks": true,
-    "outDir": "./build/npm/dist"
+    "strictNullChecks": true
   },
   "include": ["src/**/*.ts"],
   "exclude": ["node_modules"]

packages/replay/test/fixtures/performanceEntry/navigation.ts

@@ -0,0 +1,10 @@
+{
+  "extends": "./tsconfig.json",
+
+  "compilerOptions": {
+    "declaration": true,
+    "declarationMap": true,
+    "emitDeclarationOnly": true,
+    "outDir": "build/npm/types"
+  }
+}