session-replay: use ESM modules (#272)

* session-replay: change output to esm, bundle with rollup

* session-replay: update tests to use esm

---------

Co-authored-by: Sebastian Alex <[email protected]>

Author: perf2711

package-lock.json

@@ -0,0 +1,17 @@
+/** @type {import('ts-jest').JestConfigWithTsJest} */
+export default {
+    preset: 'ts-jest/presets/default-esm',
+    testEnvironment: 'jsdom',
+    setupFiles: ['./jest.setup.mjs'],
+    moduleNameMapper: {
+        '^(\\.{1,2}/.*)\\.js$': '$1',
+    },
+    transform: {
+        '^.+\\.tsx?$': [
+            'ts-jest',
+            {
+                useESM: true,
+            },
+        ],
+    },
+};

packages/session-replay/jest.config.js

@@ -0,0 +1,2 @@
+import { jest } from '@jest/globals';
+global.jest = jest;

packages/session-replay/jest.config.mjs

@@ -2,15 +2,18 @@
     "name": "@backtrace/session-replay",
     "version": "0.1.0",
     "description": "Backtrace-JavaScript Session Replay module",
-    "main": "lib/index.js",
+    "main": "lib/bundle.cjs",
+    "module": "lib/bundle.mjs",
+    "browser": "lib/bundle.mjs",
     "types": "lib/index.d.ts",
+    "type": "module",
     "scripts": {
-        "build": "tsc",
+        "build": "rollup -c rollup.config.mjs",
         "clean": "tsc -b --clean && rimraf \"lib\"",
         "format": "prettier --write '**/*.ts'",
         "lint": "eslint . --ext .ts",
-        "watch": "tsc -w",
-        "test": "cross-env NODE_ENV=test jest"
+        "watch": "npm run build -- --watch",
+        "test": "cross-env NODE_OPTIONS=\"$NODE_OPTIONS --experimental-vm-modules\" NODE_NO_WARNINGS=1 NODE_ENV=test jest"
     },
     "repository": {
         "type": "git",
@@ -25,13 +28,22 @@
         "/lib"
     ],
     "homepage": "https://github.com/backtrace-labs/backtrace-javascript#readme",
-    "peerDependencies": {
-        "@backtrace/sdk-core": "^0.4.0"
-    },
     "dependencies": {
         "rrweb": "^2.0.0-alpha.15"
     },
     "devDependencies": {
-        "jest-environment-jsdom": "^29.7.0"
+        "@backtrace/sdk-core": "^0.4.0",
+        "@rollup/plugin-commonjs": "^26.0.1",
+        "@rollup/plugin-json": "^6.1.0",
+        "@rollup/plugin-node-resolve": "^15.2.3",
+        "@rollup/plugin-terser": "^0.4.4",
+        "@types/jest": "^29.5.1",
+        "@types/ua-parser-js": "^0.7.36",
+        "jest": "^29.5.0",
+        "jest-environment-jsdom": "^29.7.0",
+        "rollup": "^4.21.0",
+        "rollup-plugin-typescript2": "^0.36.0",
+        "ts-jest": "^29.1.0",
+        "typescript": "^5.0.4"
     }
 }

packages/session-replay/jest.setup.mjs

@@ -0,0 +1,47 @@
+import commonjs from '@rollup/plugin-commonjs';
+import json from '@rollup/plugin-json';
+import nodeResolve from '@rollup/plugin-node-resolve';
+import terser from '@rollup/plugin-terser';
+import path from 'path';
+import typescript from 'rollup-plugin-typescript2';
+
+const extensions = ['.js', '.ts'];
+
+/** @type {import('rollup').RollupOptions} */
+export default {
+    input: './src/index.ts',
+    output: [
+        {
+            file: 'lib/bundle.mjs',
+            format: 'esm',
+            sourcemap: true,
+        },
+        {
+            file: 'lib/bundle.min.mjs',
+            format: 'esm',
+            sourcemap: true,
+            plugins: [terser()],
+        },
+        {
+            file: 'lib/bundle.cjs',
+            format: 'cjs',
+            sourcemap: true,
+        },
+        {
+            file: 'lib/bundle.min.cjs',
+            format: 'cjs',
+            sourcemap: true,
+            plugins: [terser()],
+        },
+    ],
+    plugins: [
+        typescript({ tsconfig: './tsconfig.build.json' }),
+        nodeResolve({
+            extensions,
+            preferBuiltins: true,
+            modulePaths: [path.resolve('./node_modules'), path.resolve('../../node_modules')],
+        }),
+        commonjs({ defaultIsModuleExports: true }),
+        json(),
+    ],
+};

packages/session-replay/package.json

@@ -1,4 +1,4 @@
-import { BacktraceModule, BacktraceModuleBindData } from '@backtrace/sdk-core';
+import type { BacktraceModule, BacktraceModuleBindData } from '@backtrace/sdk-core';
 import { BacktraceSessionRecorder } from './BacktraceSessionRecorder';
 import { BacktraceSessionRecorderOptions } from './options';
 

packages/session-replay/rollup.config.mjs

@@ -0,0 +1,8 @@
+{
+    "extends": "./tsconfig.json",
+    "exclude": ["node_modules", "tests", "lib"],
+    "compilerOptions": {
+        "rootDir": "./src",
+        "outDir": "./lib"
+    }
+}

packages/session-replay/src/BacktraceSessionReplayModule.ts

@@ -1,14 +1,10 @@
 {
     "extends": "../../tsconfig.base.json",
     "compilerOptions": {
-        "rootDir": "./src",
-        "outDir": "./lib",
+        "target": "ES2015",
+        "module": "ESNext",
+        "moduleResolution": "Bundler",
         "composite": true
     },
-    "exclude": ["node_modules", "tests", "lib"],
-    "references": [
-        {
-            "path": "../sdk-core/tsconfig.json"
-        }
-    ]
+    "exclude": ["node_modules", "lib"]
 }