ref: Avoid unnecessary cloning of objects or arrays (#1340)

.changeset/gold-apples-joke.md

@@ -0,0 +1,5 @@
+---
+'rrweb': patch
+---
+
+ref: Avoid unnecessary cloning of objects or arrays

packages/rrweb/src/record/observer.ts

@@ -405,15 +405,6 @@ function initViewportResizeObserver(
   return on('resize', updateDimension, win);
 }
 
-function wrapEventWithUserTriggeredFlag(
-  v: inputValue,
-  enable: boolean,
-): inputValue {
-  const value = { ...v };
-  if (!enable) delete value.userTriggered;
-  return value;
-}
-
 export const INPUT_TAGS = ['INPUT', 'TEXTAREA', 'SELECT'];
 const lastInputValueMap: WeakMap<EventTarget, inputValue> = new WeakMap();
 function initInputObserver({
@@ -477,10 +468,9 @@ function initInputObserver({
     }
     cbWithDedup(
       target,
-      callbackWrapper(wrapEventWithUserTriggeredFlag)(
+      userTriggeredOnInput
-        { text, isChecked, userTriggered },
+        ? { text, isChecked, userTriggered }
-        userTriggeredOnInput,
+        : { text, isChecked },
-      ),
     );
     // if a radio was checked
     // the other radios with the same name attribute will be unchecked.
@@ -490,16 +480,12 @@ function initInputObserver({
         .querySelectorAll(`input[type="radio"][name="${name}"]`)
         .forEach((el) => {
           if (el !== target) {
+            const text = (el as HTMLInputElement).value;
             cbWithDedup(
               el,
-              callbackWrapper(wrapEventWithUserTriggeredFlag)(
+              userTriggeredOnInput
-                {
+                ? { text, isChecked: !isChecked, userTriggered: false }
-                  text: (el as HTMLInputElement).value,
+                : { text, isChecked: !isChecked },
-                  isChecked: !isChecked,
-                  userTriggered: false,
-                },
-                userTriggeredOnInput,
-              ),
             );
           }
         });

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

@@ -45,7 +45,7 @@ export default function initCanvas2DMutationObserver(
               // Using setTimeout as toDataURL can be heavy
               // and we'd rather not block the main thread
               setTimeout(() => {
-                const recordArgs = serializeArgs([...args], win, this);
+                const recordArgs = serializeArgs(args, win, this);
                 cb(this.canvas, {
                   type: CanvasContext['2D'],
                   property: prop,

packages/rrweb/src/record/observers/canvas/serialize-args.ts

@@ -133,7 +133,7 @@ export const serializeArgs = (
   win: IWindow,
   ctx: RenderingContext,
 ) => {
-  return [...args].map((arg) => serializeArg(arg, win, ctx));
+  return args.map((arg) => serializeArg(arg, win, ctx));
 };
 
 export const isInstanceOfWebGLObject = (

packages/rrweb/src/record/observers/canvas/webgl.ts

@@ -53,7 +53,7 @@ function patchGLPrototype(
               'tagName' in this.canvas &&
               !isBlocked(this.canvas, blockClass, blockSelector, true)
             ) {
-              const recordArgs = serializeArgs([...args], win, this);
+              const recordArgs = serializeArgs(args, win, this);
               const mutation: canvasMutationWithType = {
                 type,
                 property: prop,