From e285e50eeba9e372dc2cc35d70a9520bd45a9d1c Mon Sep 17 00:00:00 2001 From: Lukas Stracke Date: Thu, 1 Dec 2022 10:56:58 +0100 Subject: [PATCH 1/8] build(replay): Generate Replay Addon CDN bundles --- packages/replay/package.json | 3 ++- packages/replay/rollup.bundle.config.js | 36 +++++++++++++++++++++++++ 2 files changed, 38 insertions(+), 1 deletion(-) create mode 100644 packages/replay/rollup.bundle.config.js diff --git a/packages/replay/package.json b/packages/replay/package.json index 64c317820d20..f8b60a716a3d 100644 --- a/packages/replay/package.json +++ b/packages/replay/package.json @@ -7,8 +7,9 @@ "types": "build/npm/types/index.d.ts", "sideEffects": false, "scripts": { + "build": "run-s build:worker && run-p build:core build:types build:bundle", "build:rollup": "run-s build:worker build:core", - "build": "run-s build:worker && run-p build:core build:types", + "build:bundle": "rollup -c rollup.bundle.config.js", "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", diff --git a/packages/replay/rollup.bundle.config.js b/packages/replay/rollup.bundle.config.js new file mode 100644 index 000000000000..5e04c24f10c4 --- /dev/null +++ b/packages/replay/rollup.bundle.config.js @@ -0,0 +1,36 @@ +import commonjs from '@rollup/plugin-commonjs'; +import replace from '@rollup/plugin-replace'; + +import { makeBaseBundleConfig, makeBundleConfigVariants } from '../../rollup/index.js'; + +import pkg from './package.json'; + +const baseBundleConfig = makeBaseBundleConfig({ + bundleType: 'addon', + entrypoints: ['src/index.ts'], + jsVersion: 'es6', + licenseTitle: '@sentry/replay', + outputFileBase: () => 'bundles/replay', + packageSpecificConfig: { + // We don't add @sentry/browser to the bundle, hence we mark peerDeps as external + external: [...Object.keys(pkg.peerDependencies || {})], + plugins: [ + replace({ + preventAssignment: true, + values: { + __SENTRY_REPLAY_VERSION__: JSON.stringify(pkg.version), + }, + }), + commonjs(), + ], + output: { + // set exports to 'named' or 'auto' so that rollup doesn't warn about + // the default export in `worker/worker.js` + exports: 'auto', + }, + }, +}); + +const builds = makeBundleConfigVariants(baseBundleConfig); + +export default builds; From 028cc6c2006ded87fa21f95fd362f49a7028634c Mon Sep 17 00:00:00 2001 From: Lukas Stracke Date: Fri, 2 Dec 2022 10:53:13 +0100 Subject: [PATCH 2/8] Adjust size-limit bundle entry to use CDN bundle --- .size-limit.js | 5 ++--- 1 file changed, 2 insertions(+), 3 deletions(-) diff --git a/.size-limit.js b/.size-limit.js index d872d8dad2f9..63489946260f 100644 --- a/.size-limit.js +++ b/.size-limit.js @@ -63,10 +63,9 @@ module.exports = [ gzip: true, limit: '100 KB', }, - // 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/esm/index.js', + name: '@sentry/replay ES6 CDN Bundle (gzipped + minified)', + path: 'packages/replay/build/bundles/replay.min.js', gzip: true, limit: '100 KB', ignore: ['@sentry/browser', '@sentry/utils', '@sentry/core', '@sentry/types'], From ceabd2dbb0b40736eba00aa82ff77e1587c091d2 Mon Sep 17 00:00:00 2001 From: Lukas Stracke Date: Fri, 2 Dec 2022 11:17:41 +0100 Subject: [PATCH 3/8] remove non-gzipped size-check entry --- .size-limit.js | 8 -------- 1 file changed, 8 deletions(-) diff --git a/.size-limit.js b/.size-limit.js index 63489946260f..0dd97e1e18dd 100644 --- a/.size-limit.js +++ b/.size-limit.js @@ -78,12 +78,4 @@ module.exports = [ limit: '100 KB', ignore: ['@sentry/browser', '@sentry/utils', '@sentry/core', '@sentry/types'], }, - { - name: '@sentry/replay - Webpack (minified)', - path: 'packages/replay/build/npm/esm/index.js', - import: '{ Replay }', - gzip: false, - limit: '300 KB', - ignore: ['@sentry/browser', '@sentry/utils', '@sentry/core', '@sentry/types'], - }, ]; From 55b8ca31aa66d4fce6130c411a060430b319b3fd Mon Sep 17 00:00:00 2001 From: Lukas Stracke Date: Fri, 2 Dec 2022 11:24:02 +0100 Subject: [PATCH 4/8] remove external entry (not necessary) --- packages/replay/rollup.bundle.config.js | 2 -- 1 file changed, 2 deletions(-) diff --git a/packages/replay/rollup.bundle.config.js b/packages/replay/rollup.bundle.config.js index 5e04c24f10c4..29ec47cc5d82 100644 --- a/packages/replay/rollup.bundle.config.js +++ b/packages/replay/rollup.bundle.config.js @@ -12,8 +12,6 @@ const baseBundleConfig = makeBaseBundleConfig({ licenseTitle: '@sentry/replay', outputFileBase: () => 'bundles/replay', packageSpecificConfig: { - // We don't add @sentry/browser to the bundle, hence we mark peerDeps as external - external: [...Object.keys(pkg.peerDependencies || {})], plugins: [ replace({ preventAssignment: true, From b9d982879304c56cc374cd482fd43fec12eb438c Mon Sep 17 00:00:00 2001 From: Lukas Stracke Date: Fri, 2 Dec 2022 11:29:59 +0100 Subject: [PATCH 5/8] Adjust npm scripts --- packages/replay/package.json | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/packages/replay/package.json b/packages/replay/package.json index f8b60a716a3d..585502ecc215 100644 --- a/packages/replay/package.json +++ b/packages/replay/package.json @@ -10,12 +10,12 @@ "build": "run-s build:worker && run-p build:core build:types build:bundle", "build:rollup": "run-s build:worker build:core", "build:bundle": "rollup -c rollup.bundle.config.js", - "build:dev": "run-s build #TODO adjust after adding CDN bundles", + "build:dev": "run-p build:worker build:rollup build:types", "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:watch": "run-p \"build:worker --watch\" \"build:core --watch\" \"build:bundle --watch\" build:types:watch", + "build:dev:watch": "run-p \"build:core --watch\" build:types:watch", "build:types:watch": "tsc -p tsconfig.types.json --watch", "build:npm": "ts-node ../../scripts/prepack.ts --bundles && npm pack ./build/npm", "circularDepCheck": "madge --circular src/index.ts", From c6673258bb2fb2f2da0cbd30bd224dec510530db Mon Sep 17 00:00:00 2001 From: Lukas Stracke Date: Fri, 2 Dec 2022 12:21:51 +0100 Subject: [PATCH 6/8] cleanup config, re-add `import type` --- packages/replay/rollup.bundle.config.js | 6 +----- packages/replay/src/index.ts | 2 +- 2 files changed, 2 insertions(+), 6 deletions(-) diff --git a/packages/replay/rollup.bundle.config.js b/packages/replay/rollup.bundle.config.js index 29ec47cc5d82..4ecfafbb2af6 100644 --- a/packages/replay/rollup.bundle.config.js +++ b/packages/replay/rollup.bundle.config.js @@ -19,13 +19,9 @@ const baseBundleConfig = makeBaseBundleConfig({ __SENTRY_REPLAY_VERSION__: JSON.stringify(pkg.version), }, }), + // lodash.debounce is a CJS module, so we need to convert it to ESM first commonjs(), ], - output: { - // set exports to 'named' or 'auto' so that rollup doesn't warn about - // the default export in `worker/worker.js` - exports: 'auto', - }, }, }); diff --git a/packages/replay/src/index.ts b/packages/replay/src/index.ts index ca91b2c9a206..9f4616dd77b8 100644 --- a/packages/replay/src/index.ts +++ b/packages/replay/src/index.ts @@ -23,7 +23,7 @@ import { deleteSession } from './session/deleteSession'; import { getSession } from './session/getSession'; import { saveSession } from './session/saveSession'; import { Session } from './session/Session'; -import { +import type { AllPerformanceEntry, InstrumentationTypeBreadcrumb, InstrumentationTypeSpan, From a3b8723bc7daab683dafd73b2277d8f17bb89bab Mon Sep 17 00:00:00 2001 From: Lukas Stracke Date: Fri, 2 Dec 2022 12:22:41 +0100 Subject: [PATCH 7/8] Update packages/replay/src/constants.ts Co-authored-by: Katie Byers --- packages/replay/src/constants.ts | 7 ++++--- 1 file changed, 4 insertions(+), 3 deletions(-) diff --git a/packages/replay/src/constants.ts b/packages/replay/src/constants.ts index 9936a5a2cbac..b7cbfe52873d 100644 --- a/packages/replay/src/constants.ts +++ b/packages/replay/src/constants.ts @@ -1,8 +1,9 @@ import { GLOBAL_OBJ } from '@sentry/utils'; -// exporting WINDOW from within the @sentry/replay instead of importing it from @sentry/browser -// this avoids the Browser package being bundled into the CDN bundle as well as a -// circular dependency between the Browser and Replay packages in the future +// exporting a separate copy of `WINDOW` rather than exporting the one from `@sentry/browser` +// prevents the browser package from being bundled in the CDN bundle, and avoids a +// circular dependency between the browser and replay packages should `@sentry/browser` import +// from `@sentry/replay` in the future export const WINDOW = GLOBAL_OBJ as typeof GLOBAL_OBJ & Window; export const REPLAY_SESSION_KEY = 'sentryReplaySession'; From 4080cd5fc985002259127dd38a788d0c356c842a Mon Sep 17 00:00:00 2001 From: Lukas Stracke Date: Fri, 2 Dec 2022 12:32:16 +0100 Subject: [PATCH 8/8] add individual build:*:watch scripts --- packages/replay/package.json | 7 +++++-- 1 file changed, 5 insertions(+), 2 deletions(-) diff --git a/packages/replay/package.json b/packages/replay/package.json index 585502ecc215..7d574d0e2271 100644 --- a/packages/replay/package.json +++ b/packages/replay/package.json @@ -14,8 +14,11 @@ "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:bundle --watch\" build:types:watch", - "build:dev:watch": "run-p \"build:core --watch\" build:types:watch", + "build:watch": "run-p build:worker:watch build:core:watch build:bundle:watch build:types:watch", + "build:dev:watch": "run-p build:core:watch build:types:watch", + "build:core:watch": "yarn build:core --watch", + "build:worker:watch": "yarn build:worker --watch", + "build:bundle:watch": "yarn build:bundle --watch", "build:types:watch": "tsc -p tsconfig.types.json --watch", "build:npm": "ts-node ../../scripts/prepack.ts --bundles && npm pack ./build/npm", "circularDepCheck": "madge --circular src/index.ts",