use native setTimeout,add/removeEventListener when zone.js is present

.changeset/fair-seahorses-care.md

@@ -0,0 +1,6 @@
+---
+'rrweb': patch
+---
+
+Use native setTimeout when zone.js is present
+Use native add/removeEventListener when zone.js is present

packages/rrweb-snapshot/src/snapshot.ts

@@ -25,6 +25,7 @@ import {
   getInputType,
   toLowerCase,
   extractFileExtension,
+  nativeSetTimeout
 } from './utils';
 
 let _id = 1;
@@ -383,7 +384,7 @@ function onceIframeLoaded(
     return;
   }
   if (readyState !== 'complete') {
-    const timer = setTimeout(() => {
+    const timer = nativeSetTimeout(() => {
       if (!fired) {
         listener();
         fired = true;
@@ -405,7 +406,7 @@ function onceIframeLoaded(
   ) {
     // iframe was already loaded, make sure we wait to trigger the listener
     // till _after_ the mutation that found this iframe has had time to process
-    setTimeout(listener, 0);
+    nativeSetTimeout(listener, 0);
 
     return iframeEl.addEventListener('load', listener); // keep listing for future loads
   }
@@ -428,7 +429,7 @@ function onceStylesheetLoaded(
 
   if (styleSheetLoaded) return;
 
-  const timer = setTimeout(() => {
+  const timer = nativeSetTimeout(() => {
     if (!fired) {
       listener();
       fired = true;

packages/rrweb-snapshot/src/types.ts

@@ -188,3 +188,5 @@ export type KeepIframeSrcFn = (src: string) => boolean;
 export type BuildCache = {
   stylesWithHoverClass: Map<string, string>;
 };
+
+export type IWindow = Window & typeof globalThis;

packages/rrweb-snapshot/src/utils.ts

@@ -10,6 +10,7 @@ import type {
   documentTypeNode,
   textNode,
   elementNode,
+  IWindow,
 } from './types';
 import { NodeType } from './types';
 
@@ -30,6 +31,34 @@ export function isNativeShadowDom(shadowRoot: ShadowRoot): boolean {
   return Object.prototype.toString.call(shadowRoot) === '[object ShadowRoot]';
 }
 
+type WindowWithAngularZone = IWindow & {
+  Zone?: {
+    __symbol__?: (key: keyof IWindow) => string;
+  };
+  [key: string]: any;
+};
+
+export function getNative<T>(
+  symbolName: keyof IWindow,
+  windowObj: IWindow = window,
+): T {
+  const windowWithZone = windowObj as WindowWithAngularZone;
+  const angularZoneSymbol = windowWithZone?.Zone?.__symbol__?.(symbolName);
+  if (angularZoneSymbol) {
+    const zonelessImpl = windowWithZone[angularZoneSymbol] as T;
+    if (zonelessImpl) {
+      return zonelessImpl;
+    }
+  }
+
+  return windowWithZone[symbolName] as T;
+}
+
+export const nativeSetTimeout =
+  typeof window !== 'undefined'
+    ? getNative<typeof window.setTimeout>('setTimeout')
+    : global.setTimeout;
+
 /**
  * Browsers sometimes destructively modify the css rules they receive.
  * This function tries to rectify the modifications the browser made to make it more cross platform compatible.

packages/rrweb/src/record/observer.ts

@@ -4,6 +4,8 @@ import {
   Mirror,
   getInputType,
   toLowerCase,
+  getNative,
+  nativeSetTimeout,
 } from 'rrweb-snapshot';
 import type { FontFaceSet } from 'css-font-loading-module';
 import {
@@ -56,11 +58,6 @@ import { callbackWrapper } from './error-handler';
 type WindowWithStoredMutationObserver = IWindow & {
   __rrMutationObserver?: MutationObserver;
 };
-type WindowWithAngularZone = IWindow & {
-  Zone?: {
-    __symbol__?: (key: string) => string;
-  };
-};
 
 export const mutationBuffers: MutationBuffer[] = [];
 
@@ -95,7 +92,7 @@ export function initMutationObserver(
   // see mutation.ts for details
   mutationBuffer.init(options);
   let mutationObserverCtor =
-    window.MutationObserver ||
+    getNative<typeof MutationObserver>('MutationObserver') ||
     /**
      * Some websites may disable MutationObserver by removing it from the window object.
      * If someone is using rrweb to build a browser extention or things like it, they
@@ -105,19 +102,6 @@ export function initMutationObserver(
      * window.__rrMutationObserver = MutationObserver
      */
     (window as WindowWithStoredMutationObserver).__rrMutationObserver;
-  const angularZoneSymbol = (
-    window as WindowWithAngularZone
-  )?.Zone?.__symbol__?.('MutationObserver');
-  if (
-    angularZoneSymbol &&
-    (window as unknown as Record<string, typeof MutationObserver>)[
-      angularZoneSymbol
-    ]
-  ) {
-    mutationObserverCtor = (
-      window as unknown as Record<string, typeof MutationObserver>
-    )[angularZoneSymbol];
-  }
   const observer = new (mutationObserverCtor as new (
     callback: MutationCallback,
   ) => MutationObserver)(
@@ -1107,7 +1091,7 @@ function initFontObserver({ fontCb, doc }: observerParam): listenerHandler {
     'add',
     function (original: (font: FontFace) => void) {
       return function (this: FontFaceSet, fontFace: FontFace) {
-        setTimeout(
+        nativeSetTimeout(
           callbackWrapper(() => {
             const p = fontMap.get(fontFace);
             if (p) {

packages/rrweb/src/record/observers/canvas/2d.ts

@@ -1,3 +1,5 @@
+import type { Mirror } from 'rrweb-snapshot';
+import { nativeSetTimeout } from 'rrweb-snapshot';
 import {
   type blockClass,
   CanvasContext,
@@ -43,7 +45,7 @@ export default function initCanvas2DMutationObserver(
             if (!isBlocked(this.canvas, blockClass, blockSelector, true)) {
               // Using setTimeout as toDataURL can be heavy
               // and we'd rather not block the main thread
-              setTimeout(() => {
+              nativeSetTimeout(() => {
                 const recordArgs = serializeArgs(args, win, this);
                 cb(this.canvas, {
                   type: CanvasContext['2D'],

packages/rrweb/src/record/shadow-dom-manager.ts

@@ -11,7 +11,7 @@ import {
 } from './observer';
 import { patch, inDom } from '../utils';
 import type { Mirror } from 'rrweb-snapshot';
-import { isNativeShadowDom } from 'rrweb-snapshot';
+import { isNativeShadowDom, nativeSetTimeout } from 'rrweb-snapshot';
 
 type BypassOptions = Omit<
   MutationBufferParam,
@@ -74,7 +74,7 @@ export class ShadowDomManager {
       }),
     );
     // Defer this to avoid adoptedStyleSheet events being created before the full snapshot is created or attachShadow action is recorded.
-    setTimeout(() => {
+    nativeSetTimeout(() => {
       if (
         shadowRoot.adoptedStyleSheets &&
         shadowRoot.adoptedStyleSheets.length > 0

packages/rrweb/src/utils.ts

@@ -9,18 +9,42 @@ import type {
   DeprecatedMirror,
   textMutation,
 } from '@rrweb/types';
+<<<<<<< HEAD
 import type { IMirror, Mirror, SlimDOMOptions } from 'rrweb-snapshot';
 import { isShadowRoot, IGNORED_NODE, classMatchesRegex } from 'rrweb-snapshot';
+=======
+import type { IMirror, Mirror } from 'rrweb-snapshot';
+import {
+  isShadowRoot,
+  IGNORED_NODE,
+  classMatchesRegex,
+  getNative,
+  nativeSetTimeout,
+} from 'rrweb-snapshot';
+>>>>>>> 54127ce (use native setTimeout,add/removeEventListener when zone.js is present)
 import type { RRNode, RRIFrameElement } from 'rrdom';
 
+function getWindow(documentOrWindow: Document | IWindow): IWindow {
+  const defaultView = (documentOrWindow as Document).defaultView;
+  return (defaultView ? defaultView : documentOrWindow) as IWindow;
+}
+
 export function on(
   type: string,
   fn: EventListenerOrEventListenerObject,
   target: Document | IWindow = document,
 ): listenerHandler {
+  const windowObj = getWindow(target);
+  const nativeAddEventListener = getNative<typeof window.addEventListener>(
+    'addEventListener',
+    windowObj,
+  );
+  const nativeRemoveEventListener = getNative<
+    typeof window.removeEventListener
+  >('removeEventListener', windowObj);
   const options = { capture: true, passive: true };
-  target.addEventListener(type, fn, options);
-  return () => target.removeEventListener(type, fn, options);
+  nativeAddEventListener.call(target, type, fn, options);
+  return () => nativeRemoveEventListener.call(target, type, fn, options);
 }
 
 // https://github.com/rrweb-io/rrweb/pull/407
@@ -70,7 +94,7 @@ export function throttle<T>(
   wait: number,
   options: throttleOptions = {},
 ) {
-  let timeout: ReturnType<typeof setTimeout> | null = null;
+  let timeout: ReturnType<typeof setTimeout> | number | null = null;
   let previous = 0;
   return function (...args: T[]) {
     const now = Date.now();
@@ -88,7 +112,7 @@ export function throttle<T>(
       previous = now;
       func.apply(context, args);
     } else if (!timeout && options.trailing !== false) {
-      timeout = setTimeout(() => {
+      timeout = nativeSetTimeout(() => {
         previous = options.leading === false ? 0 : Date.now();
         timeout = null;
         func.apply(context, args);
@@ -113,7 +137,7 @@ export function hookSetter<T>(
       : {
           set(value) {
             // put hooked setter into event loop to avoid of set latency
-            setTimeout(() => {
+            nativeSetTimeout(() => {
               d.set!.call(this, value);
             }, 0);
             if (original && original.set) {

packages/types/src/index.ts

@@ -3,6 +3,7 @@ import type {
   Mirror,
   INode,
   DataURLOptions,
+  IWindow,
 } from 'rrweb-snapshot';
 
 export enum EventType {
@@ -688,8 +689,6 @@ declare global {
   }
 }
 
-export type IWindow = Window & typeof globalThis;
-
 export type Optional<T, K extends keyof T> = Pick<Partial<T>, K> & Omit<T, K>;
 
 export type GetTypedKeys<Obj extends object, ValueType> = TakeTypeHelper<
@@ -708,3 +707,5 @@ export type TakeTypedKeyValues<Obj extends object, Type> = Pick<
 // Types for @rrweb/packer
 export type PackFn = (event: eventWithTime) => string;
 export type UnpackFn = (raw: string) => eventWithTime;
+
+export { IWindow };