Reverse monkey patch built in methods to support LWC (rrweb-io#1509)

* Get around monkey patched Nodes

* inlineImages: Setting of `image.crossOrigin` is not always necessary (rrweb-io#1468)

Setting of the `crossorigin` attribute is not necessary for same-origin images, and causes an immediate image reload (albeit from cache) necessitating the use of a load event listener which subsequently mutates the snapshot.  This change allows us to  avoid the mutation of the snapshot for the same-origin case.

* Modify inlineImages test to remove delay and show that we can inline images without mutation

* Add an explicit test for when the `image.crossOrigin = 'anonymous';` method is necessary.  Uses a combination of about:blank and our test server to simulate a cross-origin context

* Other test changes: there were some spurious rrweb mutations being generated by the addition of the crossorigin attribute that are now elimnated from the rrweb/__snapshots__/integration.test.ts.snap after this PR - this is good

* Move `childNodes` to @rrweb/utils

* Use non-monkey patched versions of the `childNodes`, `parentNode` `parentElement` `textContent` accessors

* Add getRootNode and contains, and add comprehensive todo list

* chore: Update turbo.json tasks for better build process

* Update caniuse-lite

* chore: Update eslint-plugin-compat to version 5.0.0

* chore: Bump @rrweb/utils version to 2.0.0-alpha.15

* delete unused yarn.lock files

* Set correct @rrweb/utils version in package.json

* Migrate over some accessors to reverse-monkey-patched version

* Add missing functions

* Fix illegal invocation error

* Revert closer to what it was.

This feels incorrect to me (Justin Halsall), but some of the tests break without it so I'm restoring this to be closer to its original here:
https://github.com/rrweb-io/rrweb/blame/cfd686d488a9b88dba6b6f8880b5e4375dd8062c/packages/rrweb-snapshot/src/snapshot.ts#L1011

* Reverse monkey patch all methods LWC hijacks

* Make tests more stable

* Safely handle rrdom nodes in hasShadowRoot

* Remove duplicated test

* Use variable `serverURL` in test

* Use monorepo default browserlist

* Fix typing issue for new typescript

* Remove unused package

* Remove unused code

* Add prefix to reverse-monkey-patched methods to make them more explicit

* Add default exports to @rrweb/utils

---------

Co-authored-by: Eoghan Murray <[email protected]>

.changeset/config.json

@@ -9,9 +9,20 @@
       "@amplitude/rrdom",
       "@amplitude/rrdom-nodejs",
       "@amplitude/rrweb-player",
+      "@amplitude/rrweb-all",
+      "@amplitude/rrweb-replay",
+      "@amplitude/rrweb-record",
       "@amplitude/rrweb-types",
-      "@amplitude/rrweb-web-extension",
-      "@amplitude/rrvideo"
+      "@amplitude/rrweb-packer",
+      "@amplitude/rrweb-utils",
+      "@amplitude/web-extension",
+      "@amplitude/rrvideo",
+      "@amplitude/rrweb-plugin-console-record",
+      "@amplitude/rrweb-plugin-console-replay",
+      "@amplitude/rrweb-plugin-sequential-id-record",
+      "@amplitude/rrweb-plugin-sequential-id-replay",
+      "@amplitude/rrweb-plugin-canvas-webrtc-record",
+      "@amplitude/rrweb-plugin-canvas-webrtc-replay"
     ]
   ],
   "linked": [],

.changeset/unlucky-mirrors-invite.md

@@ -0,0 +1,7 @@
+---
+"rrweb-snapshot": patch
+"rrweb": patch
+"@rrweb/utils": patch
+---
+
+Reverse monkey patch built in methods to support LWC (and other frameworks like angular which monkey patch built in methods).

.vscode/rrweb-monorepo.code-workspace

@@ -40,6 +40,10 @@
       "name": "@rrweb/types",
       "path": "../packages/types"
     },
+    {
+      "name": "@rrweb/utils",
+      "path": "../packages/utils"
+    },
     {
       "name": "@rrweb/packer",
       "path": "../packages/packer"
@@ -88,6 +92,7 @@
       "@rrweb/record",
       "@rrweb/replay",
       "@rrweb/types",
+      "@rrweb/utils",
       "@rrweb/packer",
       "@rrweb/rrweb-plugin-console-record",
       "@rrweb/rrweb-plugin-console-replay",

guide.md

@@ -47,6 +47,7 @@ Besides the `rrweb` and `@rrweb/record` packages, rrweb also provides other pack
 - [@rrweb/replay](packages/replay): A package for replaying rrweb sessions.
 - [@rrweb/packer](packages/packer): A package for packing and unpacking rrweb data.
 - [@rrweb/types](packages/types): Contains types shared across rrweb packages.
+- [@rrweb/utils](packages/utils): Contains utility functions shared across rrweb packages.
 - [web-extension](packages/web-extension): A web extension for rrweb.
 - [rrvideo](packages/rrvideo): A package for handling video operations in rrweb.
 - [@rrweb/rrweb-plugin-console-record](packages/plugins/rrweb-plugin-console-record): A plugin for recording console logs.

guide.zh_CN.md

@@ -43,7 +43,8 @@ rrweb 代码分为录制和回放两部分，大多数时候用户在被录制
 - [@rrweb/record](packages/record)：一个用于录制 rrweb 会话的包。
 - [@rrweb/replay](packages/replay)：一个用于回放 rrweb 会话的包。
 - [@rrweb/packer](packages/packer)：一个用于打包和解包 rrweb 数据的包。
-- [@rrweb/types](packages/types)：包含 rrweb 中使用的类型定义。
+- [@rrweb/types](packages/types)：包含 rrweb 包中共享的类型定义。
+- [@rrweb/utils](packages/utils)：包含 rrweb 包中共享的工具函数。
 - [web-extension](packages/web-extension)：rrweb 的网页扩展。
 - [rrvideo](packages/rrvideo)：一个用于处理 rrweb 中视频操作的包。
 - [@rrweb/rrweb-plugin-console-record](packages/plugins/rrweb-plugin-console-record)：一个用于记录控制台日志的插件。

package.json

@@ -31,7 +31,7 @@
     "cross-env": "^7.0.3",
     "esbuild-plugin-umd-wrapper": "^2.0.0",
     "eslint": "^8.53.0",
-    "eslint-plugin-compat": "^4.2.0",
+    "eslint-plugin-compat": "^5.0.0",
     "eslint-plugin-jest": "^27.6.0",
     "eslint-plugin-tsdoc": "^0.2.17",
     "markdownlint": "^0.25.1",
@@ -49,7 +49,7 @@
     "check-types": "yarn turbo run check-types --continue",
     "format": "yarn prettier --write '**/*.{ts,md}'",
     "format:head": "git diff --name-only HEAD^ |grep '\\.ts$\\|\\.md$' |xargs yarn prettier --write",
-    "dev": "yarn turbo run dev --concurrency=17",
+    "dev": "yarn turbo run dev --concurrency=18",
     "repl": "cd packages/rrweb && npm run repl",
     "live-stream": "cd packages/rrweb && yarn live-stream",
     "lint": "yarn run concurrently --success=all -r -m=1 'yarn run markdownlint docs' 'yarn eslint packages/*/src --ext .ts,.tsx,.js,.jsx,.svelte'",

packages/plugins/rrweb-plugin-console-record/test/index.test.ts

@@ -3,7 +3,7 @@ import { stringifySnapshots } from '../../../rrweb/test/utils';
 import { createServer, ViteDevServer } from 'vite';
 import * as puppeteer from 'puppeteer';
 import type { Browser, Page } from 'puppeteer';
-import type { eventWithTime } from '@rrweb/types';
+import type { eventWithTime } from '@amplitude/rrweb-types';
 
 export async function launchPuppeteer(
   options?: Parameters<(typeof puppeteer)['launch']>[0],

packages/rrdom/test/diff/dialog.test.ts

@@ -7,7 +7,7 @@ import {
   createMirror,
   Mirror as NodeMirror,
   serializedNodeWithId,
-} from 'rrweb-snapshot';
+} from '@amplitude/rrweb-snapshot';
 import { RRDocument } from '../../src';
 import { diff, ReplayerHandler } from '../../src/diff';
 

packages/rrweb-snapshot/package.json

@@ -54,6 +54,7 @@
   },
   "homepage": "https://github.com/amplitude/rrweb/tree/master/packages/rrweb-snapshot#readme",
   "devDependencies": {
+    "@rrweb/utils": "^2.0.0-alpha.16",
     "@types/jsdom": "^20.0.0",
     "@types/node": "^18.15.11",
     "@types/puppeteer": "^5.4.4",

packages/rrweb-snapshot/src/snapshot.ts

@@ -28,6 +28,7 @@ import {
   extractFileExtension,
   absolutifyURLs,
 } from './utils';
+import dom from '@amplitude/rrweb-utils';
 
 let _id = 1;
 const tagNameRegex = new RegExp('[^a-z0-9-_:]');
@@ -247,7 +248,7 @@ export function classMatchesRegex(
   if (!node) return false;
   if (node.nodeType !== node.ELEMENT_NODE) {
     if (!checkAncestors) return false;
-    return classMatchesRegex(node.parentNode, regex, checkAncestors);
+    return classMatchesRegex(dom.parentNode(node), regex, checkAncestors);
   }
 
   for (let eIndex = (node as HTMLElement).classList.length; eIndex--; ) {
@@ -257,7 +258,7 @@ export function classMatchesRegex(
     }
   }
   if (!checkAncestors) return false;
-  return classMatchesRegex(node.parentNode, regex, checkAncestors);
+  return classMatchesRegex(dom.parentNode(node), regex, checkAncestors);
 }
 
 export function needMaskingText(
@@ -269,16 +270,16 @@ export function needMaskingText(
   let el: Element;
   if (isElement(node)) {
     el = node;
-    if (!el.childNodes.length) {
+    if (!dom.childNodes(el).length) {
       // optimisation: we can avoid any of the below checks on leaf elements
       // as masking is applied to child text nodes only
       return false;
     }
-  } else if (node.parentElement === null) {
+  } else if (dom.parentElement(node) === null) {
     // should warn? maybe a text node isn't attached to a parent node yet?
     return false;
   } else {
-    el = node.parentElement;
+    el = dom.parentElement(node)!;
   }
   try {
     if (typeof maskTextClass === 'string') {
@@ -475,7 +476,7 @@ function serializeNode(
     case n.COMMENT_NODE:
       return {
         type: NodeType.Comment,
-        textContent: (n as Comment).textContent || '',
+        textContent: dom.textContent(n as Comment) || '',
         rootId,
       };
     default:
@@ -501,43 +502,42 @@ function serializeTextNode(
   const { needsMask, maskTextFn, rootId } = options;
   // The parent node may not be a html element which has a tagName attribute.
   // So just let it be undefined which is ok in this use case.
-  const parentTagName = n.parentNode && (n.parentNode as HTMLElement).tagName;
-  let textContent = n.textContent;
+  const parent = dom.parentNode(n);
+  const parentTagName = parent && (parent as HTMLElement).tagName;
+  let text = dom.textContent(n);
   const isStyle = parentTagName === 'STYLE' ? true : undefined;
   const isScript = parentTagName === 'SCRIPT' ? true : undefined;
-  if (isStyle && textContent) {
+  if (isStyle && text) {
     try {
       // try to read style sheet
       if (n.nextSibling || n.previousSibling) {
         // This is not the only child of the stylesheet.
         // We can't read all of the sheet's .cssRules and expect them
         // to _only_ include the current rule(s) added by the text node.
         // So we'll be conservative and keep textContent as-is.
-      } else if ((n.parentNode as HTMLStyleElement).sheet?.cssRules) {
-        textContent = stringifyStylesheet(
-          (n.parentNode as HTMLStyleElement).sheet!,
-        );
+      } else if ((parent as HTMLStyleElement).sheet?.cssRules) {
+        text = stringifyStylesheet((parent as HTMLStyleElement).sheet!);
       }
     } catch (err) {
       console.warn(
         `Cannot get CSS styles from text's parentNode. Error: ${err as string}`,
         n,
       );
     }
-    textContent = absolutifyURLs(textContent, getHref(options.doc));
+    text = absolutifyURLs(text, getHref(options.doc));
   }
   if (isScript) {
-    textContent = 'SCRIPT_PLACEHOLDER';
+    text = 'SCRIPT_PLACEHOLDER';
   }
-  if (!isStyle && !isScript && textContent && needsMask) {
-    textContent = maskTextFn
-      ? maskTextFn(textContent, n.parentElement)
-      : textContent.replace(/[\S]/g, '*');
+  if (!isStyle && !isScript && text && needsMask) {
+    text = maskTextFn
+      ? maskTextFn(text, dom.parentElement(n))
+      : text.replace(/[\S]/g, '*');
   }
 
   return {
     type: NodeType.Text,
-    textContent: textContent || '',
+    textContent: text || '',
     isStyle,
     rootId,
   };
@@ -594,6 +594,7 @@ function serializeElementNode(
   }
   // remote css
   if (tagName === 'link' && inlineStylesheet) {
+    //TODO: maybe replace this `.styleSheets` with original one
     const stylesheet = Array.from(doc.styleSheets).find((s) => {
       return s.href === (n as HTMLLinkElement).href;
     });
@@ -612,7 +613,7 @@ function serializeElementNode(
     tagName === 'style' &&
     (n as HTMLStyleElement).sheet &&
     // TODO: Currently we only try to get dynamic stylesheet when it is an empty style element
-    !(n.innerText || n.textContent || '').trim().length
+    !(n.innerText || dom.textContent(n) || '').trim().length
   ) {
     const cssText = stringifyStylesheet(
       (n as HTMLStyleElement).sheet as CSSStyleSheet,
@@ -1030,8 +1031,8 @@ export function serializeNodeWithId(
     recordChild = recordChild && !serializedNode.needBlock;
     // this property was not needed in replay side
     delete serializedNode.needBlock;
-    const shadowRoot = (n as HTMLElement).shadowRoot;
-    if (shadowRoot && isNativeShadowDom(shadowRoot))
+    const shadowRootEl = dom.shadowRoot(n);
+    if (shadowRootEl && isNativeShadowDom(shadowRootEl))
       serializedNode.isShadowHost = true;
   }
   if (
@@ -1080,31 +1081,29 @@ export function serializeNodeWithId(
     ) {
       // value parameter in DOM reflects the correct value, so ignore childNode
     } else {
-      for (const childN of Array.from(n.childNodes)) {
+      for (const childN of Array.from(dom.childNodes(n))) {
         const serializedChildNode = serializeNodeWithId(childN, bypassOptions);
         if (serializedChildNode) {
           serializedNode.childNodes.push(serializedChildNode);
         }
       }
     }
 
-    if (isElement(n) && n.shadowRoot) {
-      for (const childN of Array.from(n.shadowRoot.childNodes)) {
+    let shadowRootEl: ShadowRoot | null = null;
+    if (isElement(n) && (shadowRootEl = dom.shadowRoot(n))) {
+      for (const childN of Array.from(dom.childNodes(shadowRootEl))) {
         const serializedChildNode = serializeNodeWithId(childN, bypassOptions);
         if (serializedChildNode) {
-          isNativeShadowDom(n.shadowRoot) &&
+          isNativeShadowDom(shadowRootEl) &&
             (serializedChildNode.isShadow = true);
           serializedNode.childNodes.push(serializedChildNode);
         }
       }
     }
   }
 
-  if (
-    n.parentNode &&
-    isShadowRoot(n.parentNode) &&
-    isNativeShadowDom(n.parentNode)
-  ) {
+  const parent = dom.parentNode(n);
+  if (parent && isShadowRoot(parent) && isNativeShadowDom(parent)) {
     serializedNode.isShadow = true;
   }
 

packages/rrweb-snapshot/src/utils.ts

@@ -11,15 +11,21 @@ import type {
   textNode,
   elementNode,
 } from './types';
+import dom from '@amplitude/rrweb-utils';
 import { NodeType } from './types';
 
 export function isElement(n: Node): n is Element {
   return n.nodeType === n.ELEMENT_NODE;
 }
 
 export function isShadowRoot(n: Node): n is ShadowRoot {
-  const host: Element | null = (n as ShadowRoot)?.host;
-  return Boolean(host?.shadowRoot === n);
+  const hostEl: Element | null =
+    // anchor and textarea elements also have a `host` property
+    // but only shadow roots have a `mode` property
+    (n && 'host' in n && 'mode' in n && dom.host(n as ShadowRoot)) || null;
+  return Boolean(
+    hostEl && 'shadowRoot' in hostEl && dom.shadowRoot(hostEl) === n,
+  );
 }
 
 /**