fix(session replay): dynamically import plugin-console-record

packages/plugin-session-replay-browser/rollup.config.js

@@ -1,14 +1,73 @@
-import { iife, umd } from '../../scripts/build/rollup.config';
+import { iife } from '../../scripts/build/rollup.config';
 import { webWorkerPlugins } from '../session-replay-browser/rollup.config';
+import typescript from '@rollup/plugin-typescript';
+import resolve from '@rollup/plugin-node-resolve';
+import commonjs from '@rollup/plugin-commonjs';
+import { terser } from 'rollup-plugin-terser';
+import gzip from 'rollup-plugin-gzip';
 
-iife.input = umd.input;
-iife.output.name = 'sessionReplay';
+// Configure ESM build
+const esm = {
+  input: 'src/index.ts',
+  output: {
+    dir: 'lib/scripts',
+    format: 'es',
+    sourcemap: true,
+    entryFileNames: 'plugin-session-replay-browser-esm.js',
+    chunkFileNames: '[name]-min.js',
+    manualChunks: {
+      'console-plugin': ['@amplitude/rrweb-plugin-console-record']
+    }
+  }
+};
 
-export default async () => {
-  const commonPlugins = await webWorkerPlugins();
+// Configure legacy build
+iife.input = 'src/index.ts';
+iife.output = {
+  ...iife.output,
+  format: 'iife',
+  file: 'lib/scripts/plugin-session-replay-browser-min.js',
+  name: 'sessionReplay',
+  sourcemap: true,
+  inlineDynamicImports: true
+};
 
-  iife.plugins = [...commonPlugins, ...iife.plugins];
-  umd.plugins = [...commonPlugins, ...umd.plugins];
+// Common plugins for both builds
+const commonPlugins = [
+  typescript({
+    tsconfig: 'tsconfig.json',
+    compilerOptions: {
+      target: 'es2015',
+      module: 'es2020',
+      moduleResolution: 'node',
+      downlevelIteration: true,
+      declaration: false,
+      declarationMap: false,
+      outDir: 'lib/scripts',
+      baseUrl: '.',
+      paths: {
+        'src/*': ['src/*']
+      }
+    }
+  }),
+  resolve({
+    browser: true,
+  }),
+  commonjs(),
+  terser({
+    output: {
+      comments: false,
+    },
+  }),
+  gzip(),
+];
 
-  return [iife, umd];
+export default async () => {
+  const webWorkerPluginsList = await webWorkerPlugins();
+
+  esm.plugins = [...webWorkerPluginsList, ...commonPlugins];
+  iife.plugins = [...webWorkerPluginsList, ...commonPlugins];
+
+  return [esm, iife];
 };
+

packages/session-replay-browser/package.json

@@ -29,7 +29,7 @@
     "lint": "yarn lint:eslint & yarn lint:prettier",
     "lint:eslint": "eslint '{src,test}/**/*.ts'",
     "lint:prettier": "prettier --check \"{src,test}/**/*.ts\"",
-    "publish": "node ../../scripts/publish/upload-to-s3.js",
+    "publish": "node ./scripts/publish/upload-to-s3.js",
     "test": "jest",
     "typecheck": "tsc -p ./tsconfig.json",
     "version": "yarn version-file && GENERATE_SNIPPET=true yarn build",

packages/session-replay-browser/rollup.config.js

@@ -1,15 +1,96 @@
 import { iife, umd } from '../../scripts/build/rollup.config';
 
-
 import resolve from '@rollup/plugin-node-resolve';
 import replace from '@rollup/plugin-replace';
 import { terser } from 'rollup-plugin-terser';
 import typescript from '@rollup/plugin-typescript';
 import { rollup } from 'rollup';
 import path from 'node:path';
+import commonjs from '@rollup/plugin-commonjs';
+import gzip from 'rollup-plugin-gzip';
 
-iife.input = umd.input;
-iife.output.name = 'sessionReplay';
+// Configure ES module build for chunks
+const esmConfig = {
+  input: 'src/session-replay.ts',
+  output: {
+    dir: 'lib/scripts',
+    format: 'es',
+    sourcemap: true,
+    entryFileNames: 'session-replay-browser-esm.js',
+    chunkFileNames: '[name]-min.js',
+    manualChunks: {
+      'console-plugin': ['@amplitude/rrweb-plugin-console-record']
+    }
+  },
+  plugins: [
+    typescript({
+      tsconfig: 'tsconfig.json',
+      compilerOptions: {
+        target: 'es2015',
+        module: 'es2020',
+        moduleResolution: 'node',
+        downlevelIteration: true,
+        declaration: false,
+        declarationMap: false,
+        outDir: 'lib/scripts',
+        baseUrl: '.',
+        paths: {
+          'src/*': ['src/*']
+        }
+      }
+    }),
+    resolve({
+      browser: true,
+    }),
+    commonjs(),  
+    terser({
+      output: {
+        comments: false,
+      },
+    }),
+    gzip(),
+  ]
+};
+
+// Keep original IIFE config for legacy browsers
+const mainBundleConfig = {
+  input: 'src/session-replay.ts',
+  output: {
+    format: 'iife',
+    file: 'lib/scripts/session-replay-browser-min.js',
+    name: 'sessionReplay',
+    sourcemap: true,
+    inlineDynamicImports: true
+  },
+  plugins: [
+    typescript({
+      tsconfig: 'tsconfig.json',
+      compilerOptions: {
+        target: 'es2015',
+        module: 'es2020',
+        moduleResolution: 'node',
+        downlevelIteration: true,
+        declaration: false,
+        declarationMap: false,
+        outDir: 'lib/scripts',
+        baseUrl: '.',
+        paths: {
+          'src/*': ['src/*']
+        }
+      }
+    }),
+    resolve({
+      browser: true,
+    }),
+    commonjs(),
+    terser({
+      output: {
+        comments: false,
+      },
+    }),
+    gzip(),
+  ]
+};
 
 async function buildWebWorker() {
   const input = path.join(path.dirname(new URL(import.meta.url).pathname), './src/worker/compression.ts');
@@ -21,9 +102,18 @@ async function buildWebWorker() {
       }),
       typescript({
         tsconfig: 'tsconfig.json',
-        // no need to output types
-        declaration: false,
-        declarationMap: false,
+        compilerOptions: {
+          target: 'es2015',
+          module: 'es2020',
+          moduleResolution: 'node',
+          downlevelIteration: true,
+          declaration: false,
+          declarationMap: false,
+          baseUrl: '.',
+          paths: {
+            'src/*': ['src/*']
+          }
+        }
       }),
       terser(),
     ],
@@ -33,6 +123,7 @@ async function buildWebWorker() {
     format: 'iife',
     name: 'WebWorker',
     inlineDynamicImports: true,
+    sourcemap: true
   });
   const webWorkerCode = output[0].code;
 
@@ -52,9 +143,7 @@ export async function webWorkerPlugins() {
 
 export default async () => {
   const commonPlugins = await webWorkerPlugins();
-
-  iife.plugins = [...commonPlugins, ...iife.plugins];
-  umd.plugins = [...commonPlugins, ...umd.plugins];
-
-  return [iife, umd];
+  mainBundleConfig.plugins = [...commonPlugins, ...mainBundleConfig.plugins];
+  esmConfig.plugins = [...commonPlugins, ...esmConfig.plugins];
+  return [mainBundleConfig, esmConfig];
 };

packages/session-replay-browser/scripts/publish/upload-to-s3.js

@@ -0,0 +1,62 @@
+const fs = require('fs');
+const path = require('path');
+const { S3Client, PutObjectCommand, HeadObjectCommand } = require('@aws-sdk/client-s3');
+const { getName, getVersion } = require('../../../scripts/utils');
+
+const bucket = process.env.S3_BUCKET_NAME;
+const location = path.join(process.cwd(), 'lib', 'scripts');
+const files = [
+  'session-replay-browser-esm.js',  // ESM version
+  'session-replay-browser-min.js',  // IIFE version
+  'console-plugin-min.js'  // Console plugin chunk
+];
+
+let deployedCount = 0;
+
+console.log('[Publish Session Replay Browser to AWS S3] START');
+const promises = files.map((file) => {
+  const body = fs.readFileSync(path.join(location, file));
+  const key = `libs/${file.replace('session-replay-browser', `${getName()}-${getVersion()}`)}`;
+  const client = new S3Client();
+
+  const headObject = new HeadObjectCommand({
+    Bucket: bucket,
+    Key: key,
+  });
+  console.log(`[Publish to AWS S3] Checking if ${key} exists in target bucket...`);
+  return client
+    .send(headObject)
+    .then(() => {
+      console.log(`[Publish to AWS S3] ${key} exists in target bucket. Skipping upload job.`);
+    })
+    .catch(() => {
+      console.log(`[Publish to AWS S3] ${key} does not exist in target bucket. Uploading to S3...`);
+      const putObject = new PutObjectCommand({
+        ACL: 'public-read',
+        Body: body,
+        Bucket: bucket,
+        CacheControl: 'max-age=31536000',
+        ContentType: 'application/javascript',
+        ContentEncoding: 'gzip',
+        Key: key,
+      });
+      return client
+        .send(putObject)
+        .then(() => {
+          console.log(`[Publish to AWS S3] Upload success for ${key}.`);
+          deployedCount += 1;
+        })
+        .catch(console.error);
+    });
+});
+
+Promise.all(promises)
+  .then(() => {
+    if (deployedCount === 0) {
+      console.log(`[Publish to AWS S3] Complete! Nothing to deploy.`);
+    } else {
+      console.log(`[Publish to AWS S3] Success! Deployed ${deployedCount}/${files.length} files.`);
+    }
+    console.log('[Publish to AWS S3] END');
+  })
+  .catch(console.log);