feat: Refactor module scope vars & export mirror & takeFullSnapshot directly (#113)

Currently, we use these from `record.xx`, which is not ideal thinking
about treeshaking and lazy loading.

This moves these to be proper exports so we can use the in Replay
without having to import `record` and everything that comes with it
(=everything).

Author: mydea

packages/rrweb/src/index.ts

@@ -1,7 +1,6 @@
 import record from './record';
 import { Replayer } from './replay';
 import canvasMutation from './replay/canvas';
-import { _mirror } from './utils';
 import * as utils from './utils';
 
 export {
@@ -20,15 +19,6 @@ export type {
 
 export type { recordOptions } from './types';
 
-const { addCustomEvent } = record;
-const { freezePage } = record;
+export { canvasMutation, record, Replayer, utils };
 
-export {
-  record,
-  addCustomEvent,
-  freezePage,
-  Replayer,
-  canvasMutation,
-  _mirror as mirror,
-  utils,
-};
+export { takeFullSnapshot, mirror, freezePage, addCustomEvent } from './record';

packages/rrweb/src/record/index.ts

@@ -58,13 +58,14 @@ declare global {
   const __RRWEB_EXCLUDE_IFRAME__: boolean;
 }
 
-let wrappedEmit!: (e: eventWithTime, isCheckout?: boolean) => void;
+// These are stored in module scope because we access them in other exported methods
+let _wrappedEmit:
+  | undefined
+  | ((e: eventWithoutTime, isCheckout?: boolean) => void);
+let _takeFullSnapshot: undefined | ((isCheckout?: boolean) => void);
 
-let takeFullSnapshot!: (isCheckout?: boolean) => void;
-let canvasManager: CanvasManagerInterface;
-let recording = false;
+export const mirror = createMirror();
 
-const mirror = createMirror();
 function record<T = eventWithTime>(
   options: recordOptions<T> = {},
 ): listenerHandler | undefined {
@@ -200,7 +201,7 @@ function record<T = eventWithTime>(
     }
     return e as unknown as T;
   };
-  wrappedEmit = (r: eventWithoutTime, isCheckout?: boolean) => {
+  const wrappedEmit = (r: eventWithoutTime, isCheckout?: boolean) => {
     const e = r as eventWithTime;
     e.timestamp = nowTimestamp();
     if (
@@ -251,6 +252,7 @@ function record<T = eventWithTime>(
       }
     }
   };
+  _wrappedEmit = wrappedEmit;
 
   const wrappedMutationEmit = (m: mutationCallbackParam) => {
     wrappedEmit({
@@ -310,7 +312,7 @@ function record<T = eventWithTime>(
 
   const processedNodeManager = new ProcessedNodeManager();
 
-  canvasManager =
+  const canvasManager: CanvasManagerInterface =
     typeof __RRWEB_EXCLUDE_CANVAS__ === 'boolean' && __RRWEB_EXCLUDE_CANVAS__
       ? new CanvasManagerNoop()
       : new CanvasManager({
@@ -361,7 +363,7 @@ function record<T = eventWithTime>(
           mirror,
         });
 
-  takeFullSnapshot = (isCheckout = false) => {
+  const takeFullSnapshot = (isCheckout = false) => {
     if (!recordDOM) {
       return;
     }
@@ -446,6 +448,7 @@ function record<T = eventWithTime>(
         mirror.getId(document),
       );
   };
+  _takeFullSnapshot = takeFullSnapshot;
 
   try {
     const handlers: listenerHandler[] = [];
@@ -589,7 +592,6 @@ function record<T = eventWithTime>(
     const init = () => {
       takeFullSnapshot();
       handlers.push(observe(document));
-      recording = true;
     };
     if (
       document.readyState === 'interactive' ||
@@ -623,7 +625,7 @@ function record<T = eventWithTime>(
     return () => {
       handlers.forEach((h) => h());
       processedNodeManager.destroy();
-      recording = false;
+      _takeFullSnapshot = undefined;
       unregisterErrorHandler();
     };
   } catch (error) {
@@ -632,30 +634,35 @@ function record<T = eventWithTime>(
   }
 }
 
-record.addCustomEvent = <T>(tag: string, payload: T) => {
-  if (!recording) {
+export function addCustomEvent<T>(tag: string, payload: T) {
+  if (!_wrappedEmit) {
     throw new Error('please add custom event after start recording');
   }
-  wrappedEmit({
+  _wrappedEmit({
     type: EventType.Custom,
     data: {
       tag,
       payload,
     },
   });
-};
+}
 
-record.freezePage = () => {
+export function freezePage() {
   mutationBuffers.forEach((buf) => buf.freeze());
-};
+}
 
-record.takeFullSnapshot = (isCheckout?: boolean) => {
-  if (!recording) {
+export function takeFullSnapshot(isCheckout?: boolean) {
+  if (!_takeFullSnapshot) {
     throw new Error('please take full snapshot after start recording');
   }
-  takeFullSnapshot(isCheckout);
-};
+  _takeFullSnapshot(isCheckout);
+}
+
+// record.addCustomEvent is removed because Sentry Session Replay does not use it
+// record.freezePage is removed because Sentry Session Replay does not use it
 
+// For backwards compatibility - we can eventually remove this when we migrated to using the exported `mirror` & `takeFullSnapshot`
 record.mirror = mirror;
+record.takeFullSnapshot = takeFullSnapshot;
 
 export default record;

packages/rrweb/test/record.test.ts

@@ -29,12 +29,10 @@ interface ISuite {
 
 interface IWindow extends Window {
   rrweb: {
-    record: ((
+    record: (
       options: recordOptions<eventWithTime>,
-    ) => listenerHandler | undefined) & {
-      takeFullSnapshot: (isCheckout?: boolean | undefined) => void;
-    };
-
+    ) => listenerHandler | undefined;
+    takeFullSnapshot: (isCheckout?: boolean | undefined) => void;
     freezePage(): void;
     addCustomEvent<T>(tag: string, payload: T): void;
   };
@@ -611,7 +609,7 @@ describe('record', function (this: ISuite) {
 
         setTimeout(() => {
           // When a full snapshot is checked out manually, all adoptedStylesheets should also be captured.
-          rrweb.record.takeFullSnapshot(true);
+          rrweb.takeFullSnapshot(true);
           resolve(undefined);
         }, 10);
       });