Replace Array.from with clean implementation (#1464)

This work is to try to provide support where rrweb might be included
in applications with various tools that might override Array.from
so that the 2nd parameter (the map function) will always work for
rrweb.

Co-authored-by: Michael Dellanoce <[email protected]>

.changeset/eleven-bobcats-peel.md

@@ -0,0 +1,6 @@
+---
+'rrweb-snapshot': patch
+'rrweb': patch
+---
+
+better support for coexistence with older libraries (e.g. MooTools & Prototype.js) which modify the in-built `Array.from` function

packages/rrweb/src/record/index.ts

@@ -46,6 +46,20 @@ let takeFullSnapshot!: (isCheckout?: boolean) => void;
 let canvasManager!: CanvasManager;
 let recording = false;
 
+// Multiple tools (i.e. MooTools, Prototype.js) override Array.from and drop support for the 2nd parameter
+// Try to pull a clean implementation from a newly created iframe
+try {
+  if (Array.from([1], (x) => x * 2)[0] !== 2) {
+    const cleanFrame = document.createElement('iframe');
+    document.body.appendChild(cleanFrame);
+    // eslint-disable-next-line @typescript-eslint/unbound-method -- Array.from is static and doesn't rely on binding
+    Array.from = cleanFrame.contentWindow?.Array.from || Array.from;
+    document.body.removeChild(cleanFrame);
+  }
+} catch (err) {
+  console.debug('Unable to override Array.from', err);
+}
+
 const mirror = createMirror();
 function record<T = eventWithTime>(
   options: recordOptions<T> = {},

packages/rrweb/src/types.ts

@@ -207,6 +207,7 @@ export type missingNodeMap = {
 declare global {
   interface Window {
     FontFace: typeof FontFace;
+    Array: typeof Array;
   }
 }