@glimt/record 0.0.16 → 0.0.18

package/dist/record.js

@@ -363,12 +363,8 @@ function toLowerCase(str) {
 const ORIGINAL_ATTRIBUTE_NAME = "__rrweb_original__";
 const COPY_CANVAS_ON_VOLUME_GREATER_THAN = 25e4;
 function getReadableCanvasContext(canvas) {
-  if (canvas.width === 0 || canvas.height === 0) return canvas.getContext("2d");
   if (canvas.width * canvas.height < COPY_CANVAS_ON_VOLUME_GREATER_THAN)
     return canvas.getContext("2d");
-  console.log(
-    "detected large canvas, copying to offscreen canvas for willReadFrequently"
-  );
   const offscreen = document.createElement("canvas");
   offscreen.width = canvas.width;
   offscreen.height = canvas.height;
@@ -379,24 +375,23 @@ function getReadableCanvasContext(canvas) {
   return offscreen.getContext("2d", { willReadFrequently: true });
 }
 function is2DCanvasBlank(canvas) {
+  if (canvas.width === 0 || canvas.height === 0) return true;
   const ctx = getReadableCanvasContext(canvas);
   if (!ctx) return true;
-  const chunkSize = 50;
+  const chunkSize = canvas.width > 512 || canvas.height > 512 ? 100 : 50;
+  const getImageData = ctx.getImageData;
+  const originalGetImageData = ORIGINAL_ATTRIBUTE_NAME in getImageData ? getImageData[ORIGINAL_ATTRIBUTE_NAME] : getImageData;
   for (let x2 = 0; x2 < canvas.width; x2 += chunkSize) {
+    const w = Math.min(chunkSize, canvas.width - x2);
     for (let y = 0; y < canvas.height; y += chunkSize) {
-      const getImageData = ctx.getImageData;
-      const originalGetImageData = ORIGINAL_ATTRIBUTE_NAME in getImageData ? getImageData[ORIGINAL_ATTRIBUTE_NAME] : getImageData;
+      const h = Math.min(chunkSize, canvas.height - y);
       const pixelBuffer = new Uint32Array(
         // eslint-disable-next-line @typescript-eslint/no-unsafe-argument, @typescript-eslint/no-unsafe-member-access
-        originalGetImageData.call(
-          ctx,
-          x2,
-          y,
-          Math.min(chunkSize, canvas.width - x2),
-          Math.min(chunkSize, canvas.height - y)
-        ).data.buffer
+        originalGetImageData.call(ctx, x2, y, w, h).data.buffer
       );
-      if (pixelBuffer.some((pixel) => pixel !== 0)) return false;
+      for (let i2 = 0; i2 < pixelBuffer.length; i2++) {
+        if (pixelBuffer[i2] !== 0) return false;
+      }
     }
   }
   return true;
@@ -9397,7 +9392,9 @@ class MutationBuffer {
     __publicField(this, "processedNodeManager");
     __publicField(this, "unattachedDoc");
     __publicField(this, "processMutations", (mutations) => {
-      mutations.forEach(this.processMutation);
+      for (const mut of mutations) {
+        this.processMutation(mut);
+      }
       this.emit();
     });
     __publicField(this, "emit", () => {
@@ -9548,34 +9545,91 @@ class MutationBuffer {
         addList.removeNode(node2.value);
         pushAdd(node2.value);
       }
-      const payload = {
-        texts: this.texts.map((text) => {
-          const n2 = text.node;
-          const parent = index.parentNode(n2);
-          if (parent && parent.tagName === "TEXTAREA") {
-            this.genTextAreaValueMutation(parent);
-          }
-          return {
-            id: this.mirror.getId(n2),
+      const payloadTexts = [];
+      for (const text of this.texts) {
+        const n2 = text.node;
+        const parent = index.parentNode(n2);
+        if (parent && parent.tagName === "TEXTAREA") {
+          this.genTextAreaValueMutation(parent);
+        }
+        const id = this.mirror.getId(n2);
+        if (!addedIds.has(id) && this.mirror.has(id)) {
+          payloadTexts.push({
+            id,
             value: text.value
-          };
-        }).filter((text) => !addedIds.has(text.id)).filter((text) => this.mirror.has(text.id)),
-        attributes: this.attributes.map((attribute) => {
-          const { attributes } = attribute;
-          if (typeof attributes.style === "string") {
-            const diffAsStr = JSON.stringify(attribute.styleDiff);
-            const unchangedAsStr = JSON.stringify(attribute._unchangedStyles);
-            if (diffAsStr.length < attributes.style.length) {
-              if ((diffAsStr + unchangedAsStr).split("var(").length === attributes.style.split("var(").length) {
-                attributes.style = attribute.styleDiff;
-              }
+          });
+        }
+      }
+      const payloadAttributes = [];
+      for (const attribute of this.attributes) {
+        const { attributes } = attribute;
+        if (typeof attributes.style === "string") {
+          const diffAsStr = JSON.stringify(attribute.styleDiff);
+          const unchangedAsStr = JSON.stringify(attribute._unchangedStyles);
+          if (diffAsStr.length < attributes.style.length) {
+            if ((diffAsStr + unchangedAsStr).split("var(").length === attributes.style.split("var(").length) {
+              attributes.style = attribute.styleDiff;
             }
           }
-          return {
-            id: this.mirror.getId(attribute.node),
+        }
+        const id = this.mirror.getId(attribute.node);
+        if (!addedIds.has(id) && this.mirror.has(id)) {
+          payloadAttributes.push({
+            id,
             attributes
-          };
-        }).filter((attribute) => !addedIds.has(attribute.id)).filter((attribute) => this.mirror.has(attribute.id)),
+          });
+        }
+      }
+      const payload = {
+        texts: payloadTexts,
+        attributes: payloadAttributes,
+        //original implementation instead of "payloadTexts"
+        // this.texts
+        //   .map((text) => {
+        //     const n = text.node;
+        //     const parent = dom.parentNode(n);
+        //     if (parent && (parent as Element).tagName === 'TEXTAREA') {
+        //       // the node is being ignored as it isn't in the mirror, so shift mutation to attributes on parent textarea
+        //       this.genTextAreaValueMutation(parent as HTMLTextAreaElement);
+        //     }
+        //     return {
+        //       id: this.mirror.getId(n),
+        //       value: text.value,
+        //     };
+        //   })
+        //   // no need to include them on added elements, as they have just been serialized with up to date attribubtes
+        //   .filter((text) => !addedIds.has(text.id))
+        //   // text mutation's id was not in the mirror map means the target node has been removed
+        //   .filter((text) => this.mirror.has(text.id)),
+        //original implementation instead of "payloadAttributes"
+        // this.attributes
+        //   .map((attribute) => {
+        //     const { attributes } = attribute;
+        //     if (typeof attributes.style === 'string') {
+        //       const diffAsStr = JSON.stringify(attribute.styleDiff);
+        //       const unchangedAsStr = JSON.stringify(attribute._unchangedStyles);
+        //       // check if the style diff is actually shorter than the regular string based mutation
+        //       // (which was the whole point of #464 'compact style mutation').
+        //       if (diffAsStr.length < attributes.style.length) {
+        //         // also: CSSOM fails badly when var() is present on shorthand properties, so only proceed with
+        //         // the compact style mutation if these have all been accounted for
+        //         if (
+        //           (diffAsStr + unchangedAsStr).split('var(').length ===
+        //           attributes.style.split('var(').length
+        //         ) {
+        //           attributes.style = attribute.styleDiff;
+        //         }
+        //       }
+        //     }
+        //     return {
+        //       id: this.mirror.getId(attribute.node),
+        //       attributes: attributes,
+        //     };
+        //   })
+        //   // no need to include them on added elements, as they have just been serialized with up to date attribubtes
+        //   .filter((attribute) => !addedIds.has(attribute.id))
+        //   // attribute mutation's id was not in the mirror map means the target node has been removed
+        //   .filter((attribute) => this.mirror.has(attribute.id)),
         removes: this.removes,
         adds
       };
@@ -9732,8 +9786,11 @@ class MutationBuffer {
             this.genTextAreaValueMutation(m.target);
             return;
           }
-          m.addedNodes.forEach((n2) => this.genAdds(n2, m.target));
-          m.removedNodes.forEach((n2) => {
+          for (let i2 = 0; i2 < m.addedNodes.length; i2++) {
+            this.genAdds(m.addedNodes[i2], m.target);
+          }
+          for (let i2 = 0; i2 < m.removedNodes.length; i2++) {
+            const n2 = m.removedNodes[i2];
             const nodeId = this.mirror.getId(n2);
             const parentId = isShadowRoot(m.target) ? this.mirror.getId(index.host(m.target)) : this.mirror.getId(m.target);
             if (isBlocked(m.target, this.blockClass, this.blockSelector, false) || isIgnored(n2, this.mirror, this.slimDOMOptions) || !isSerialized(n2, this.mirror)) {
@@ -9755,7 +9812,7 @@ class MutationBuffer {
               processRemoves(n2, this.removesSubTreeCache);
             }
             this.mapRemoves.push(n2);
-          });
+          }
           break;
         }
       }
@@ -9780,12 +9837,17 @@ class MutationBuffer {
         this.droppedSet.delete(n2);
       }
       if (!isBlocked(n2, this.blockClass, this.blockSelector, false)) {
-        index.childNodes(n2).forEach((childN) => this.genAdds(childN));
+        const childNodes2 = index.childNodes(n2);
+        for (let i2 = 0; i2 < childNodes2.length; i2++) {
+          this.genAdds(childNodes2[i2]);
+        }
         if (hasShadowRoot(n2)) {
-          index.childNodes(index.shadowRoot(n2)).forEach((childN) => {
+          const shadowRootChildNodes = index.childNodes(index.shadowRoot(n2));
+          for (let i2 = 0; i2 < shadowRootChildNodes.length; i2++) {
+            const childN = shadowRootChildNodes[i2];
             this.processedNodeManager.add(childN, this);
             this.genAdds(childN, n2);
-          });
+          }
         }
       }
     });
@@ -9845,7 +9907,10 @@ class MutationBuffer {
 }
 function deepDelete(addsSet, n2) {
   addsSet.delete(n2);
-  index.childNodes(n2).forEach((childN) => deepDelete(addsSet, childN));
+  const childNodes2 = index.childNodes(n2);
+  for (let i2 = 0; i2 < childNodes2.length; i2++) {
+    deepDelete(addsSet, childNodes2[i2]);
+  }
 }
 function processRemoves(n2, cache) {
   const queue = [n2];
@@ -9853,7 +9918,10 @@ function processRemoves(n2, cache) {
     const next = queue.pop();
     if (cache.has(next)) continue;
     cache.add(next);
-    index.childNodes(next).forEach((n22) => queue.push(n22));
+    const childNodes2 = index.childNodes(next);
+    for (let i2 = 0; i2 < childNodes2.length; i2++) {
+      queue.push(childNodes2[i2]);
+    }
   }
   return;
 }