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

.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/package.json

@@ -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/rollup.npm.config.js

@@ -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/src/createPerformanceEntry.ts

@@ -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/src/types.ts

@@ -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/util/dedupePerformanceEntries.ts

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

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

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

packages/replay/test/fixtures/performanceEntry/navigation.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/tsconfig.json

@@ -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/tsconfig.types.json

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