Switch to version 1.0.4 of rrweb-snapshot

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@highlight-run/rrweb",
-  "version": "0.9.23",
+  "version": "0.9.24",
   "description": "record and replay the web",
   "scripts": {
     "test": "npm run bundle:browser && cross-env TS_NODE_CACHE=false TS_NODE_FILES=true mocha -r ts-node/register test/**/*.test.ts",

src/record/index.ts

@@ -191,7 +191,6 @@ function record<T = eventWithTime>(
       maskAllInputs: maskInputOptions,
       slimDOM: slimDOMOptions,
       recordCanvas,
-      debug,
     });
 
     if (!node) {

src/snapshot/rebuild.ts

@@ -198,20 +198,13 @@ export function buildNodeWithSN(
     map: idNodeMap;
     skipChild?: boolean;
     hackCss: boolean;
-    afterAppend?: (n: INode) => unknown;
   },
 ): INode | null {
-  const { doc, map, skipChild = false, hackCss = true, afterAppend } = options;
+  const { doc, map, skipChild = false, hackCss = true } = options;
   let node = buildNode(n, { doc, hackCss });
   if (!node) {
     return null;
   }
-  if (n.rootId) {
-    console.assert(
-      ((map[n.rootId] as unknown) as Document) === doc,
-      'Target document should has the same root id.',
-    );
-  }
   // use target document as root document
   if (n.type === NodeType.Document) {
     // close before open to make sure document was closed
@@ -222,7 +215,6 @@ export function buildNodeWithSN(
 
   (node as INode).__sn = n;
   map[n.id] = node as INode;
-
   if (
     (n.type === NodeType.Document || n.type === NodeType.Element) &&
     !skipChild
@@ -233,20 +225,14 @@ export function buildNodeWithSN(
         map,
         skipChild: false,
         hackCss,
-        afterAppend,
       });
       if (!childNode) {
         console.warn('Failed to rebuild', childN);
-        continue;
-      }
-
-      node.appendChild(childNode);
-      if (afterAppend) {
-        afterAppend(childNode);
+      } else {
+        node.appendChild(childNode);
       }
     }
   }
-
   return node as INode;
 }
 
@@ -288,17 +274,15 @@ function rebuild(
     doc: Document;
     onVisit?: (node: INode) => unknown;
     hackCss?: boolean;
-    afterAppend?: (n: INode) => unknown;
   },
 ): [Node | null, idNodeMap] {
-  const { doc, onVisit, hackCss = true, afterAppend } = options;
+  const { doc, onVisit, hackCss = true } = options;
   const idNodeMap: idNodeMap = {};
   const node = buildNodeWithSN(n, {
     doc,
     map: idNodeMap,
     skipChild: false,
     hackCss,
-    afterAppend,
   });
   visit(idNodeMap, (visitedNode) => {
     if (onVisit) {

src/snapshot/snapshot.ts

@@ -35,13 +35,11 @@ function getValidTagName(element: HTMLElement): string {
   return processedTagName;
 }
 
-function getCssRulesString(s: CSSStyleSheet, debug?: boolean, printObj?: any): string | null {
+function getCssRulesString(s: CSSStyleSheet): string | null {
   try {
     const rules = s.rules || s.cssRules;
-    debug && console.info('Stylesheet (+): -> ', {...printObj})
     return rules ? Array.from(rules).map(getCssRuleString).join('') : null;
   } catch (error) {
-    debug && console.info('Stylesheet (-): -> ', {...printObj, error})
     return null;
   }
 }
@@ -198,46 +196,6 @@ export function _isBlockedElement(
   return false;
 }
 
-// https://stackoverflow.com/a/36155560
-function onceIframeLoaded(
-  iframeEl: HTMLIFrameElement,
-  listener: () => unknown,
-  iframeLoadTimeout: number,
-) {
-  const win = iframeEl.contentWindow;
-  if (!win) {
-    return;
-  }
-  // document is loading
-  let fired = false;
-  if (win.document.readyState !== 'complete') {
-    const timer = setTimeout(() => {
-      if (!fired) {
-        listener();
-        fired = true;
-      }
-    }, iframeLoadTimeout);
-    iframeEl.addEventListener('load', () => {
-      clearTimeout(timer);
-      fired = true;
-      listener();
-    });
-    return;
-  }
-  // check blank frame for Chrome
-  const blankUrl = 'about:blank';
-  if (
-    win.location.href !== blankUrl ||
-    iframeEl.src === blankUrl ||
-    iframeEl.src === ''
-  ) {
-    listener();
-    return;
-  }
-  // use default listener
-  iframeEl.addEventListener('load', listener);
-}
-
 function serializeNode(
   n: Node,
   options: {
@@ -247,7 +205,6 @@ function serializeNode(
     inlineStylesheet: boolean;
     maskInputOptions: MaskInputOptions;
     recordCanvas: boolean;
-    debug?: boolean;
   },
 ): serializedNode | false {
   const {
@@ -257,28 +214,19 @@ function serializeNode(
     inlineStylesheet,
     maskInputOptions = {},
     recordCanvas,
-    debug
   } = options;
-  // Only record root id when document object is not the base document
-  let rootId: number | undefined;
-  if (((doc as unknown) as INode).__sn) {
-    const docId = ((doc as unknown) as INode).__sn.id;
-    rootId = docId === 1 ? undefined : docId;
-  }
   switch (n.nodeType) {
     case n.DOCUMENT_NODE:
       return {
         type: NodeType.Document,
         childNodes: [],
-        rootId,
       };
     case n.DOCUMENT_TYPE_NODE:
       return {
         type: NodeType.DocumentType,
         name: (n as DocumentType).name,
         publicId: (n as DocumentType).publicId,
         systemId: (n as DocumentType).systemId,
-        rootId,
       };
     case n.ELEMENT_NODE:
       const needBlock = _isBlockedElement(
@@ -296,13 +244,7 @@ function serializeNode(
         const stylesheet = Array.from(doc.styleSheets).find((s) => {
           return s.href === (n as HTMLLinkElement).href;
         });
-        const cssText = getCssRulesString(
-          stylesheet as CSSStyleSheet, 
-          debug, {
-          href: (n as HTMLLinkElement).href,
-          sheet: stylesheet,
-        }
-        );
+        const cssText = getCssRulesString(stylesheet as CSSStyleSheet);
         if (cssText) {
           delete attributes.rel;
           delete attributes.href;
@@ -376,7 +318,6 @@ function serializeNode(
       if ((n as HTMLElement).scrollTop) {
         attributes.rr_scrollTop = (n as HTMLElement).scrollTop;
       }
-      // block element
       if (needBlock) {
         const { width, height } = (n as HTMLElement).getBoundingClientRect();
         attributes = {
@@ -385,18 +326,13 @@ function serializeNode(
           rr_height: `${height}px`,
         };
       }
-      // iframe
-      if (tagName === 'iframe') {
-        delete attributes.src;
-      }
       return {
         type: NodeType.Element,
         tagName,
         attributes,
         childNodes: [],
         isSVG: isSVGElement(n as Element) || undefined,
         needBlock,
-        rootId,
       };
     case n.TEXT_NODE:
       // The parent node may not be a html element which has a tagName attribute.
@@ -415,19 +351,16 @@ function serializeNode(
         type: NodeType.Text,
         textContent: textContent || '',
         isStyle,
-        rootId,
       };
     case n.CDATA_SECTION_NODE:
       return {
         type: NodeType.CDATA,
         textContent: '',
-        rootId,
       };
     case n.COMMENT_NODE:
       return {
         type: NodeType.Comment,
         textContent: (n as Comment).textContent || '',
-        rootId,
       };
     default:
       return false;
@@ -539,10 +472,6 @@ export function serializeNodeWithId(
     slimDOMOptions: SlimDOMOptions;
     recordCanvas?: boolean;
     preserveWhiteSpace?: boolean;
-    onSerialize?: (n: INode) => unknown;
-    onIframeLoad?: (iframeINode: INode, node: serializedNodeWithId) => unknown;
-    iframeLoadTimeout?: number;
-    debug?: boolean;
   },
 ): serializedNodeWithId | null {
   const {
@@ -555,10 +484,6 @@ export function serializeNodeWithId(
     maskInputOptions = {},
     slimDOMOptions,
     recordCanvas = false,
-    onSerialize,
-    onIframeLoad,
-    iframeLoadTimeout = 5000,
-    debug,
   } = options;
   let { preserveWhiteSpace = true } = options;
   const _serializedNode = serializeNode(n, {
@@ -568,7 +493,6 @@ export function serializeNodeWithId(
     inlineStylesheet,
     maskInputOptions,
     recordCanvas,
-    debug
   });
   if (!_serializedNode) {
     // TODO: dev only
@@ -597,9 +521,6 @@ export function serializeNodeWithId(
     return null; // slimDOM
   }
   map[id] = n as INode;
-  if (onSerialize) {
-    onSerialize(n as INode);
-  }
   let recordChild = !skipChild;
   if (serializedNode.type === NodeType.Element) {
     recordChild = recordChild && !serializedNode.needBlock;
@@ -631,51 +552,12 @@ export function serializeNodeWithId(
         slimDOMOptions,
         recordCanvas,
         preserveWhiteSpace,
-        onSerialize,
-        onIframeLoad,
-        iframeLoadTimeout,
-        debug
       });
       if (serializedChildNode) {
         serializedNode.childNodes.push(serializedChildNode);
       }
     }
   }
-
-  if (
-    serializedNode.type === NodeType.Element &&
-    serializedNode.tagName === 'iframe'
-  ) {
-    onceIframeLoaded(
-      n as HTMLIFrameElement,
-      () => {
-        const iframeDoc = (n as HTMLIFrameElement).contentDocument;
-        if (iframeDoc && onIframeLoad) {
-          const serializedIframeNode = serializeNodeWithId(iframeDoc, {
-            doc: iframeDoc,
-            map,
-            blockClass,
-            blockSelector,
-            skipChild: false,
-            inlineStylesheet,
-            maskInputOptions,
-            slimDOMOptions,
-            recordCanvas,
-            preserveWhiteSpace,
-            onSerialize,
-            onIframeLoad,
-            iframeLoadTimeout,
-          });
-
-          if (serializedIframeNode) {
-            onIframeLoad(n as INode, serializedIframeNode);
-          }
-        }
-      },
-      iframeLoadTimeout,
-    );
-  }
-
   return serializedNode;
 }
 
@@ -688,11 +570,6 @@ function snapshot(
     slimDOM?: boolean | SlimDOMOptions;
     recordCanvas?: boolean;
     blockSelector?: string | null;
-    preserveWhiteSpace?: boolean;
-    onSerialize?: (n: INode) => unknown;
-    onIframeLoad?: (iframeINode: INode, node: serializedNodeWithId) => unknown;
-    iframeLoadTimeout?: number;
-    debug?: boolean;
   },
 ): [serializedNodeWithId | null, idNodeMap] {
   const {
@@ -702,11 +579,6 @@ function snapshot(
     blockSelector = null,
     maskAllInputs = false,
     slimDOM = false,
-    preserveWhiteSpace,
-    onSerialize,
-    onIframeLoad,
-    iframeLoadTimeout,
-    debug,
   } = options || {};
   const idNodeMap: idNodeMap = {};
   const maskInputOptions: MaskInputOptions =
@@ -760,11 +632,6 @@ function snapshot(
       maskInputOptions,
       slimDOMOptions,
       recordCanvas,
-      preserveWhiteSpace,
-      onSerialize,
-      onIframeLoad,
-      iframeLoadTimeout,
-      debug
     }),
     idNodeMap,
   ];

src/snapshot/types.ts

@@ -47,16 +47,13 @@ export type commentNode = {
   textContent: string;
 };
 
-export type serializedNode = (
+export type serializedNode =
   | documentNode
   | documentTypeNode
   | elementNode
   | textNode
   | cdataNode
-  | commentNode
-) & {
-  rootId?: number;
-};
+  | commentNode;
 
 export type serializedNodeWithId = serializedNode & { id: number };