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 {