diff --git a/.size-limit.js b/.size-limit.js index d872d8dad2f9..0dd97e1e18dd 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'], @@ -79,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'], - }, ]; diff --git a/packages/replay/package.json b/packages/replay/package.json index 64c317820d20..7d574d0e2271 100644 --- a/packages/replay/package.json +++ b/packages/replay/package.json @@ -7,14 +7,18 @@ "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:dev": "run-s build #TODO adjust after adding CDN bundles", + "build:bundle": "rollup -c rollup.bundle.config.js", + "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: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", diff --git a/packages/replay/rollup.bundle.config.js b/packages/replay/rollup.bundle.config.js new file mode 100644 index 000000000000..4ecfafbb2af6 --- /dev/null +++ b/packages/replay/rollup.bundle.config.js @@ -0,0 +1,30 @@ +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: { + plugins: [ + replace({ + preventAssignment: true, + values: { + __SENTRY_REPLAY_VERSION__: JSON.stringify(pkg.version), + }, + }), + // lodash.debounce is a CJS module, so we need to convert it to ESM first + commonjs(), + ], + }, +}); + +const builds = makeBundleConfigVariants(baseBundleConfig); + +export default builds; 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'; 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,