Reverse monkey patch built in methods to support LWC

.changeset/config.json

@@ -14,6 +14,7 @@
       "@rrweb/record",
       "@rrweb/types",
       "@rrweb/packer",
+      "@rrweb/utils",
       "@rrweb/web-extension",
       "rrvideo",
       "@rrweb/rrweb-plugin-console-record",

.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/rrweb-snapshot/package.json

@@ -54,6 +54,7 @@
   },
   "homepage": "https://github.com/rrweb-io/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 @@
   extractFileExtension,
   absolutifyURLs,
 } from './utils';
+import dom from '@rrweb/utils';
 
 let _id = 1;
 const tagNameRegex = new RegExp('[^a-z0-9-_:]');
@@ -247,7 +248,7 @@
   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 @@
     }
   }
   if (!checkAncestors) return false;
-  return classMatchesRegex(node.parentNode, regex, checkAncestors);
+  return classMatchesRegex(dom.parentNode(node), regex, checkAncestors);
 }
 
 export function needMaskingText(
@@ -269,16 +270,16 @@
   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 @@
     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 @@
   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 @@
   }
   // 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 @@
     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,
@@ -708,10 +709,10 @@
     const recordInlineImage = () => {
       image.removeEventListener('load', recordInlineImage);
       try {
         canvasService!.width = image.naturalWidth;
         canvasService!.height = image.naturalHeight;
         canvasCtx!.drawImage(image, 0, 0);
         attributes.rr_dataURL = canvasService!.toDataURL(
           dataURLOptions.type,
           dataURLOptions.quality,
         );
@@ -1030,8 +1031,8 @@
     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 @@
     ) {
       // 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 @@
   textNode,
   elementNode,
 } from './types';
+import dom from '@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,
+  );
 }
 
 /**
@@ -71,7 +77,7 @@
  * Browsers sometimes incorrectly escape `@import` on `.cssText` statements.
  * This function tries to correct the escaping.
  * more info: https://bugs.chromium.org/p/chromium/issues/detail?id=1472259
  * @param cssImportRule
  * @returns `cssText` with browser inconsistencies fixed, or null if not applicable.
  */
 export function escapeImportStatement(rule: CSSImportRule): string {