diff --git a/packages/rrdom/src/diff.ts b/packages/rrdom/src/diff.ts index f03557e7..842bfb89 100644 --- a/packages/rrdom/src/diff.ts +++ b/packages/rrdom/src/diff.ts @@ -1,4 +1,8 @@ -import { NodeType as RRNodeType, Mirror as NodeMirror } from 'rrweb-snapshot'; +import { + NodeType as RRNodeType, + Mirror as NodeMirror, + elementNode, +} from 'rrweb-snapshot'; import type { canvasMutationData, canvasEventWithTime, @@ -10,7 +14,6 @@ import type { import type { IRRCDATASection, IRRComment, - IRRDocument, IRRDocumentType, IRRElement, IRRNode, @@ -85,21 +88,36 @@ export type ReplayerHandler = { data: styleDeclarationData | styleSheetRuleData, styleSheet: CSSStyleSheet, ) => void; + // Similar to the `afterAppend` callback in the `rrweb-snapshot` package. It's a postorder traversal of the newly appended nodes. + afterAppend?(node: Node, id: number): void; }; +// A set contains newly appended nodes. It's used to make sure the afterAppend callback can iterate newly appended nodes in the same traversal order as that in the `rrweb-snapshot` package. +let createdNodeSet: WeakSet | null = null; + +/** + * Make the old tree to have the same structure and properties as the new tree with the diff algorithm. + * @param oldTree - The old tree to be modified. + * @param newTree - The new tree which the old tree will be modified to. + * @param replayer - A slimmed replayer instance including the mirror of the old tree. + * @param rrnodeMirror - The mirror of the new tree. + */ export function diff( oldTree: Node, newTree: IRRNode, replayer: ReplayerHandler, - rrnodeMirror?: Mirror, + rrnodeMirror: Mirror = (newTree as RRDocument).mirror || + (newTree.ownerDocument as RRDocument).mirror, ) { + oldTree = diffBeforeUpdatingChildren( + oldTree, + newTree, + replayer, + rrnodeMirror, + ); + const oldChildren = oldTree.childNodes; const newChildren = newTree.childNodes; - rrnodeMirror = - rrnodeMirror || - (newTree as RRDocument).mirror || - (newTree.ownerDocument as RRDocument).mirror; - if (oldChildren.length > 0 || newChildren.length > 0) { diffChildren( Array.from(oldChildren), @@ -110,20 +128,119 @@ export function diff( ); } - let inputDataToApply = null, - scrollDataToApply = null; + diffAfterUpdatingChildren(oldTree, newTree, replayer, rrnodeMirror); +} + +/** + * Do some preparation work before updating the children of the old tree. + */ +function diffBeforeUpdatingChildren( + oldTree: Node, + newTree: IRRNode, + replayer: ReplayerHandler, + rrnodeMirror: Mirror, +) { + if (replayer.afterAppend && !createdNodeSet) { + createdNodeSet = new WeakSet(); + setTimeout(() => { + createdNodeSet = null; + }, 0); + } + // If the Mirror data has some flaws, the diff function may throw errors. We check the node consistency here to make it robust. + if (!sameNodeType(oldTree, newTree)) { + const calibratedOldTree = createOrGetNode( + newTree, + replayer.mirror, + rrnodeMirror, + ); + oldTree.parentNode?.replaceChild(calibratedOldTree, oldTree); + oldTree = calibratedOldTree; + } switch (newTree.RRNodeType) { case RRNodeType.Document: { - const newRRDocument = newTree as IRRDocument; - scrollDataToApply = (newRRDocument as RRDocument).scrollData; + /** + * Special cases for updating the document node: + * Case 1: If the oldTree is the content document of an iframe element and its content (HTML, HEAD, and BODY) is automatically mounted by browsers, we need to remove them to avoid unexpected behaviors. e.g. Selector matches may be case insensitive. + * Case 2: The newTree has a different serialized Id (a different document object), we need to reopen it and update the nodeMirror. + */ + if (!nodeMatching(oldTree, newTree, replayer.mirror, rrnodeMirror)) { + const newMeta = rrnodeMirror.getMeta(newTree); + if (newMeta) { + replayer.mirror.removeNodeFromMap(oldTree); + (oldTree as Document).close(); + (oldTree as Document).open(); + replayer.mirror.add(oldTree, newMeta); + createdNodeSet?.add(oldTree); + } + } break; } case RRNodeType.Element: { const oldElement = oldTree as HTMLElement; const newRRElement = newTree as IRRElement; + switch (newRRElement.tagName) { + case 'IFRAME': { + const oldContentDocument = (oldTree as HTMLIFrameElement) + .contentDocument; + // If the iframe is cross-origin, the contentDocument will be null. + if (!oldContentDocument) break; + // IFrame element doesn't have child nodes, so here we update its content document separately. + diff( + oldContentDocument, + (newTree as RRIFrameElement).contentDocument, + replayer, + rrnodeMirror, + ); + break; + } + } + if (newRRElement.shadowRoot) { + if (!oldElement.shadowRoot) oldElement.attachShadow({ mode: 'open' }); + // eslint-disable-next-line @typescript-eslint/no-non-null-assertion + const oldChildren = oldElement.shadowRoot!.childNodes; + const newChildren = newRRElement.shadowRoot.childNodes; + if (oldChildren.length > 0 || newChildren.length > 0) + diffChildren( + Array.from(oldChildren), + newChildren, + // eslint-disable-next-line @typescript-eslint/no-non-null-assertion + oldElement.shadowRoot!, + replayer, + rrnodeMirror, + ); + } + break; + } + } + return oldTree; +} + +/** + * Finish the diff work after updating the children of the old tree. + */ +function diffAfterUpdatingChildren( + oldTree: Node, + newTree: IRRNode, + replayer: ReplayerHandler, + rrnodeMirror: Mirror, +) { + switch (newTree.RRNodeType) { + case RRNodeType.Document: { + const scrollData = (newTree as RRDocument).scrollData; + scrollData && replayer.applyScroll(scrollData, true); + break; + } + case RRNodeType.Element: { + const oldElement = oldTree as HTMLElement; + const newRRElement = newTree as RRElement; diffProps(oldElement, newRRElement, rrnodeMirror); - scrollDataToApply = (newRRElement as RRElement).scrollData; - inputDataToApply = (newRRElement as RRElement).inputData; + newRRElement.scrollData && + replayer.applyScroll(newRRElement.scrollData, true); + /** + * Input data need to get applied after all children of this node are updated. + * Otherwise when we set a value for a select element whose options are empty, the value won't actually update. + */ + newRRElement.inputData && replayer.applyInput(newRRElement.inputData); switch (newRRElement.tagName) { case 'AUDIO': case 'VIDEO': { @@ -143,59 +260,43 @@ export function diff( oldMediaElement.playbackRate = newMediaRRElement.playbackRate; break; } - case 'CANVAS': - { - const rrCanvasElement = newTree as RRCanvasElement; - // This canvas element is created with initial data in an iframe element. https://github.com/rrweb-io/rrweb/pull/944 - if (rrCanvasElement.rr_dataURL !== null) { - const image = document.createElement('img'); - image.onload = () => { - const ctx = (oldElement as HTMLCanvasElement).getContext('2d'); - if (ctx) { - ctx.drawImage(image, 0, 0, image.width, image.height); - } - }; - image.src = rrCanvasElement.rr_dataURL; - } - rrCanvasElement.canvasMutations.forEach((canvasMutation) => - replayer.applyCanvas( - canvasMutation.event, - canvasMutation.mutation, - oldTree as HTMLCanvasElement, - ), - ); + case 'CANVAS': { + const rrCanvasElement = newTree as RRCanvasElement; + // This canvas element is created with initial data in an iframe element. https://github.com/rrweb-io/rrweb/pull/944 + if (rrCanvasElement.rr_dataURL !== null) { + const image = document.createElement('img'); + image.onload = () => { + const ctx = (oldElement as HTMLCanvasElement).getContext('2d'); + if (ctx) { + ctx.drawImage(image, 0, 0, image.width, image.height); + } + }; + image.src = rrCanvasElement.rr_dataURL; } - break; - case 'STYLE': - { - const styleSheet = (oldElement as HTMLStyleElement).sheet; - styleSheet && - (newTree as RRStyleElement).rules.forEach((data) => - replayer.applyStyleSheetMutation(data, styleSheet), - ); - } - break; - } - if (newRRElement.shadowRoot) { - if (!oldElement.shadowRoot) oldElement.attachShadow({ mode: 'open' }); - // eslint-disable-next-line @typescript-eslint/no-non-null-assertion - const oldChildren = oldElement.shadowRoot!.childNodes; - const newChildren = newRRElement.shadowRoot.childNodes; - if (oldChildren.length > 0 || newChildren.length > 0) - diffChildren( - Array.from(oldChildren), - newChildren, - // eslint-disable-next-line @typescript-eslint/no-non-null-assertion - oldElement.shadowRoot!, - replayer, - rrnodeMirror, + rrCanvasElement.canvasMutations.forEach((canvasMutation) => + replayer.applyCanvas( + canvasMutation.event, + canvasMutation.mutation, + oldTree as HTMLCanvasElement, + ), ); + break; + } + // Props of style elements have to be updated after all children are updated. Otherwise the props can be overwritten by textContent. + case 'STYLE': { + const styleSheet = (oldElement as HTMLStyleElement).sheet; + styleSheet && + (newTree as RRStyleElement).rules.forEach((data) => + replayer.applyStyleSheetMutation(data, styleSheet), + ); + break; + } } break; } case RRNodeType.Text: case RRNodeType.Comment: - case RRNodeType.CDATA: + case RRNodeType.CDATA: { if ( oldTree.textContent !== (newTree as IRRText | IRRComment | IRRCDATASection).data @@ -205,34 +306,12 @@ export function diff( | IRRComment | IRRCDATASection).data; break; - default: - } - - scrollDataToApply && replayer.applyScroll(scrollDataToApply, true); - /** - * Input data need to get applied after all children of this node are updated. - * Otherwise when we set a value for a select element whose options are empty, the value won't actually update. - */ - inputDataToApply && replayer.applyInput(inputDataToApply); - - // IFrame element doesn't have child nodes. - if (newTree.nodeName === 'IFRAME') { - const oldContentDocument = (oldTree as HTMLIFrameElement).contentDocument; - const newIFrameElement = newTree as RRIFrameElement; - // If the iframe is cross-origin, the contentDocument will be null. - if (oldContentDocument) { - const sn = rrnodeMirror.getMeta(newIFrameElement.contentDocument); - if (sn) { - replayer.mirror.add(oldContentDocument, { ...sn }); - } - diff( - oldContentDocument, - newIFrameElement.contentDocument, - replayer, - rrnodeMirror, - ); } } + if (createdNodeSet?.has(oldTree)) { + createdNodeSet.delete(oldTree); + replayer.afterAppend?.(oldTree, replayer.mirror.getId(oldTree)); + } } function diffProps( @@ -245,8 +324,8 @@ function diffProps( for (const name in newAttributes) { const newValue = newAttributes[name]; - const sn = rrnodeMirror.getMeta(newTree); - if (sn && 'isSVG' in sn && sn.isSVG && NAMESPACES[name]) + const sn = rrnodeMirror.getMeta(newTree) as elementNode | null; + if (sn?.isSVG && NAMESPACES[name]) oldTree.setAttributeNS(NAMESPACES[name], name, newValue); else if (newTree.tagName === 'CANVAS' && name === 'rr_dataURL') { const image = document.createElement('img'); @@ -283,53 +362,47 @@ function diffChildren( newStartNode = newChildren[newStartIndex], newEndNode = newChildren[newEndIndex]; let oldIdToIndex: Record | undefined = undefined, - indexInOld; + indexInOld: number | undefined = undefined; while (oldStartIndex <= oldEndIndex && newStartIndex <= newEndIndex) { - const oldStartId = replayer.mirror.getId(oldStartNode); - const oldEndId = replayer.mirror.getId(oldEndNode); - const newStartId = rrnodeMirror.getId(newStartNode); - const newEndId = rrnodeMirror.getId(newEndNode); - - // rrdom contains elements with negative ids, we don't want to accidentally match those to a mirror mismatch (-1) id. - // Negative oldStartId happen when nodes are not in the mirror, but are in the DOM. - // eg.iframes come with a document, html, head and body nodes. - // thats why below we always check if an id is negative. - if (oldStartNode === undefined) { oldStartNode = oldChildren[++oldStartIndex]; } else if (oldEndNode === undefined) { oldEndNode = oldChildren[--oldEndIndex]; } else if ( - oldStartId !== -1 && - // same first element? - oldStartId === newStartId + // same first node? + nodeMatching(oldStartNode, newStartNode, replayer.mirror, rrnodeMirror) ) { diff(oldStartNode, newStartNode, replayer, rrnodeMirror); oldStartNode = oldChildren[++oldStartIndex]; newStartNode = newChildren[++newStartIndex]; } else if ( - oldEndId !== -1 && - // same last element? - oldEndId === newEndId + // same last node? + nodeMatching(oldEndNode, newEndNode, replayer.mirror, rrnodeMirror) ) { diff(oldEndNode, newEndNode, replayer, rrnodeMirror); oldEndNode = oldChildren[--oldEndIndex]; newEndNode = newChildren[--newEndIndex]; } else if ( - oldStartId !== -1 && - // is the first old element the same as the last new element? - oldStartId === newEndId + // is the first old node the same as the last new node? + nodeMatching(oldStartNode, newEndNode, replayer.mirror, rrnodeMirror) ) { - parentNode.insertBefore(oldStartNode, oldEndNode.nextSibling); + try { + parentNode.insertBefore(oldStartNode, oldEndNode.nextSibling); + } catch (e) { + console.warn(e); + } diff(oldStartNode, newEndNode, replayer, rrnodeMirror); oldStartNode = oldChildren[++oldStartIndex]; newEndNode = newChildren[--newEndIndex]; } else if ( - oldEndId !== -1 && - // is the last old element the same as the first new element? - oldEndId === newStartId + // is the last old node the same as the first new node? + nodeMatching(oldEndNode, newStartNode, replayer.mirror, rrnodeMirror) ) { - parentNode.insertBefore(oldEndNode, oldStartNode); + try { + parentNode.insertBefore(oldEndNode, oldStartNode); + } catch (e) { + console.warn(e); + } diff(oldEndNode, newStartNode, replayer, rrnodeMirror); oldEndNode = oldChildren[--oldEndIndex]; newStartNode = newChildren[++newStartIndex]; @@ -345,10 +418,17 @@ function diffChildren( } } indexInOld = oldIdToIndex[rrnodeMirror.getId(newStartNode)]; - if (indexInOld) { - // eslint-disable-next-line @typescript-eslint/no-non-null-assertion - const nodeToMove = oldChildren[indexInOld]!; - parentNode.insertBefore(nodeToMove, oldStartNode); + const nodeToMove = oldChildren[indexInOld]; + if ( + indexInOld !== undefined && + nodeToMove && + nodeMatching(nodeToMove, newStartNode, replayer.mirror, rrnodeMirror) + ) { + try { + parentNode.insertBefore(nodeToMove, oldStartNode); + } catch (e) { + console.warn(e); + } diff(nodeToMove, newStartNode, replayer, rrnodeMirror); oldChildren[indexInOld] = undefined; } else { @@ -358,50 +438,66 @@ function diffChildren( rrnodeMirror, ); - /** - * A mounted iframe element has an automatically created HTML element. - * We should delete it before insert a serialized one. Otherwise, an error 'Only one element on document allowed' will be thrown. - */ if ( parentNode.nodeName === '#document' && - replayer.mirror.getMeta(newNode)?.type === RRNodeType.Element && - (parentNode as Document).documentElement + oldStartNode && + /** + * Special case 1: one document isn't allowed to have two doctype nodes at the same time, so we need to remove the old one first before inserting the new one. + * How this case happens: A parent document in the old tree already has a doctype node with an id e.g. #1. A new full snapshot rebuilds the replayer with a new doctype node with another id #2. According to the algorithm, the new doctype node will be inserted before the old one, which is not allowed by the Document standard. + */ + ((newNode.nodeType === newNode.DOCUMENT_TYPE_NODE && + oldStartNode.nodeType === oldStartNode.DOCUMENT_TYPE_NODE) || + /** + * Special case 2: one document isn't allowed to have two HTMLElements at the same time, so we need to remove the old one first before inserting the new one. + * How this case happens: A mounted iframe element has an automatically created HTML element. We should delete it before inserting a serialized one. Otherwise, an error 'Only one element on document allowed' will be thrown. + */ + (newNode.nodeType === newNode.ELEMENT_NODE && + oldStartNode.nodeType === oldStartNode.ELEMENT_NODE)) ) { - parentNode.removeChild((parentNode as Document).documentElement); - oldChildren[oldStartIndex] = undefined; - oldStartNode = undefined; + parentNode.removeChild(oldStartNode); + replayer.mirror.removeNodeFromMap(oldStartNode); + oldStartNode = oldChildren[++oldStartIndex]; + } + + try { + parentNode.insertBefore(newNode, oldStartNode || null); + diff(newNode, newStartNode, replayer, rrnodeMirror); + } catch (e) { + console.warn(e); } - parentNode.insertBefore(newNode, oldStartNode || null); - diff(newNode, newStartNode, replayer, rrnodeMirror); } newStartNode = newChildren[++newStartIndex]; } } if (oldStartIndex > oldEndIndex) { const referenceRRNode = newChildren[newEndIndex + 1]; - let referenceNode = null; + let referenceNode: Node | null = null; if (referenceRRNode) - parentNode.childNodes.forEach((child) => { - if ( - replayer.mirror.getId(child) === rrnodeMirror.getId(referenceRRNode) - ) - referenceNode = child; - }); + referenceNode = replayer.mirror.getNode( + rrnodeMirror.getId(referenceRRNode), + ); for (; newStartIndex <= newEndIndex; ++newStartIndex) { const newNode = createOrGetNode( newChildren[newStartIndex], replayer.mirror, rrnodeMirror, ); - parentNode.insertBefore(newNode, referenceNode); - diff(newNode, newChildren[newStartIndex], replayer, rrnodeMirror); + try { + parentNode.insertBefore(newNode, referenceNode); + diff(newNode, newChildren[newStartIndex], replayer, rrnodeMirror); + } catch (e) { + console.warn(e); + } } } else if (newStartIndex > newEndIndex) { for (; oldStartIndex <= oldEndIndex; oldStartIndex++) { const node = oldChildren[oldStartIndex]; - if (node) { + if (!node || !parentNode.contains(node)) continue; + try { parentNode.removeChild(node); replayer.mirror.removeNodeFromMap(node); + } catch (e) { + console.warn(e); } } } @@ -417,7 +513,7 @@ export function createOrGetNode( let node: Node | null = null; // negative ids shouldn't be compared accross mirrors if (nodeId > -1) node = domMirror.getNode(nodeId); - if (node !== null) return node; + if (node !== null && sameNodeType(node, rrNode)) return node; switch (rrNode.RRNodeType) { case RRNodeType.Document: node = new Document(); @@ -449,5 +545,41 @@ export function createOrGetNode( } if (sn) domMirror.add(node, { ...sn }); + try { + createdNodeSet?.add(node); + } catch (e) { + // Just for safety concern. + } return node; } + +/** + * To check whether two nodes are the same type of node. If they are both Elements, check wether their tagNames are same or not. + */ +export function sameNodeType(node1: Node, node2: IRRNode) { + if (node1.nodeType !== node2.nodeType) return false; + return ( + node1.nodeType !== node1.ELEMENT_NODE || + (node1 as HTMLElement).tagName.toUpperCase() === + (node2 as IRRElement).tagName + ); +} + +/** + * To check whether two nodes are matching. If so, they are supposed to have the same serialized Id and node type. If they are both Elements, their tagNames should be the same as well. Otherwise, they are not matching. + */ +export function nodeMatching( + node1: Node, + node2: IRRNode, + domMirror: NodeMirror, + rrdomMirror: Mirror, +): boolean { + const node1Id = domMirror.getId(node1); + const node2Id = rrdomMirror.getId(node2); + // rrdom contains elements with negative ids, we don't want to accidentally match those to a mirror mismatch (-1) id. + // Negative oldStartId happen when nodes are not in the mirror, but are in the DOM. + // eg.iframes come with a document, html, head and body nodes. + // thats why below we always check if an id is negative. + if (node1Id === -1 || node1Id !== node2Id) return false; + return sameNodeType(node1, node2); +} diff --git a/packages/rrdom/src/document.ts b/packages/rrdom/src/document.ts index f8ee5b86..9f76f821 100644 --- a/packages/rrdom/src/document.ts +++ b/packages/rrdom/src/document.ts @@ -204,6 +204,12 @@ export function BaseRRDocumentImpl< public readonly RRNodeType = RRNodeType.Document; public textContent: string | null = null; + // eslint-disable-next-line @typescript-eslint/no-explicit-any + constructor(...args: any[]) { + super(args); + this.ownerDocument = this; + } + public get documentElement(): IRRElement | null { return ( (this.childNodes.find( @@ -258,6 +264,7 @@ export function BaseRRDocumentImpl< } childNode.parentElement = null; childNode.parentNode = this; + childNode.ownerDocument = this.ownerDocument; this.childNodes.push(childNode); return childNode; } @@ -285,6 +292,7 @@ export function BaseRRDocumentImpl< this.childNodes.splice(childIndex, 0, newChild); newChild.parentElement = null; newChild.parentNode = this; + newChild.ownerDocument = this.ownerDocument; return newChild; } @@ -522,6 +530,7 @@ export function BaseRRElementImpl< this.childNodes.push(newChild); newChild.parentNode = this; newChild.parentElement = this; + newChild.ownerDocument = this.ownerDocument; return newChild; } @@ -535,6 +544,7 @@ export function BaseRRElementImpl< this.childNodes.splice(childIndex, 0, newChild); newChild.parentElement = this; newChild.parentNode = this; + newChild.ownerDocument = this.ownerDocument; return newChild; } diff --git a/packages/rrdom/test/diff.test.ts b/packages/rrdom/test/diff.test.ts index 6e02577f..536641b0 100644 --- a/packages/rrdom/test/diff.test.ts +++ b/packages/rrdom/test/diff.test.ts @@ -1,15 +1,29 @@ /** * @jest-environment jsdom */ -import { getDefaultSN, RRDocument, RRMediaElement } from '../src'; -import { createOrGetNode, diff, ReplayerHandler } from '../src/diff'; +import * as path from 'path'; +import * as puppeteer from 'puppeteer'; import { NodeType as RRNodeType, serializedNodeWithId, createMirror, - Mirror, + Mirror as NodeMirror, } from 'rrweb-snapshot'; -import type { IRRNode } from '../src/document'; +import { + buildFromDom, + getDefaultSN, + Mirror as RRNodeMirror, + RRDocument, + RRMediaElement, +} from '../src'; +import { + createOrGetNode, + diff, + ReplayerHandler, + nodeMatching, + sameNodeType, +} from '../src/diff'; +import type { IRRElement, IRRNode } from '../src/document'; import { Replayer } from 'rrweb'; import type { eventWithTime, @@ -18,6 +32,7 @@ import type { styleSheetRuleData, } from '@rrweb/types'; import { EventType, IncrementalSource } from '@rrweb/types'; +import { compileTSCode } from './utils'; const elementSn = { type: RRNodeType.Element, @@ -45,7 +60,7 @@ type RRNode = IRRNode; function createTree( treeNode: ElementType, rrDocument?: RRDocument, - mirror: Mirror = createMirror(), + mirror: NodeMirror = createMirror(), ): Node | RRNode { type TNode = typeof rrDocument extends RRDocument ? RRNode : Node; let root: TNode; @@ -87,7 +102,7 @@ function shuffle(list: number[]) { } describe('diff algorithm for rrdom', () => { - let mirror: Mirror; + let mirror: NodeMirror; let replayer: ReplayerHandler; beforeEach(() => { @@ -98,7 +113,9 @@ describe('diff algorithm for rrdom', () => { applyInput: () => {}, applyScroll: () => {}, applyStyleSheetMutation: () => {}, + afterAppend: () => {}, }; + document.write(''); }); describe('diff single node', () => { @@ -117,7 +134,7 @@ describe('diff algorithm for rrdom', () => { x: 0, y: 0, }; - replayer.applyScroll = jest.fn(); + const applyScrollFn = jest.spyOn(replayer, 'applyScroll'); diff(document, rrNode, replayer); expect(document.childNodes.length).toEqual(1); expect(document.childNodes[0]).toBeInstanceOf(DocumentType); @@ -126,7 +143,24 @@ describe('diff algorithm for rrdom', () => { '-//W3C//DTD XHTML 1.0 Transitional//EN', ); expect(document.doctype?.systemId).toEqual(''); - expect(replayer.applyScroll).toBeCalledTimes(1); + expect(applyScrollFn).toHaveBeenCalledTimes(1); + applyScrollFn.mockRestore(); + }); + + it('should apply scroll data on an element', () => { + const element = document.createElement('div'); + const rrDocument = new RRDocument(); + const rrNode = rrDocument.createElement('div'); + rrNode.scrollData = { + source: IncrementalSource.Scroll, + id: 0, + x: 0, + y: 0, + }; + const applyScrollFn = jest.spyOn(replayer, 'applyScroll'); + diff(element, rrNode, replayer); + expect(applyScrollFn).toHaveBeenCalledTimes(1); + applyScrollFn.mockRestore(); }); it('should apply input data on an input element', () => { @@ -247,6 +281,29 @@ describe('diff algorithm for rrdom', () => { expect(element.paused).toEqual(true); } }); + + it('should diff a node with different node type', () => { + // When the diff target has a different node type. + let parentNode: Node = document.createElement('div'); + let unreliableNode: Node = document.createTextNode(''); + parentNode.appendChild(unreliableNode); + const rrNode = new RRDocument().createElement('li'); + diff(unreliableNode, rrNode, replayer); + expect(parentNode.childNodes.length).toEqual(1); + expect(parentNode.childNodes[0]).toBeInstanceOf(HTMLElement); + expect((parentNode.childNodes[0] as HTMLElement).tagName).toEqual('LI'); + + // When the diff target has the same node type but with different tagName. + parentNode = document.createElement('div'); + unreliableNode = document.createElement('span'); + parentNode.appendChild(unreliableNode); + diff(unreliableNode, rrNode, replayer); + expect((parentNode.childNodes[0] as HTMLElement).tagName).toEqual('LI'); + + // When the diff target is a node without parentNode. + unreliableNode = document.createComment(''); + diff(unreliableNode, rrNode, replayer); + }); }); describe('diff properties', () => { @@ -1001,6 +1058,67 @@ describe('diff algorithm for rrdom', () => { newElementsIds, ); }); + + it('should diff children with unreliable Mirror', () => { + const parentNode = createTree( + { + tagName: 'div', + id: 0, + children: [], + }, + undefined, + mirror, + ) as Node; + // Construct unreliable Mirror data. + const unreliableChild = document.createTextNode(''); + const unreliableSN = { + id: 1, + textContent: '', + type: RRNodeType.Text, + } as serializedNodeWithId; + mirror.add(unreliableChild, unreliableSN); + parentNode.appendChild(unreliableChild); + createTree( + { + tagName: 'div', + id: 2, + children: [], + }, + undefined, + mirror, + ); + + const rrParentNode = createTree( + { + tagName: 'div', + id: 0, + children: [1].map((c) => ({ + tagName: 'span', + id: c, + children: [2].map((c1) => ({ + tagName: 'li', + id: c1, + })), + })), + }, + new RRDocument(), + ) as RRNode; + const id = 'correctElement'; + (rrParentNode.childNodes[0] as IRRElement).setAttribute('id', id); + diff(parentNode, rrParentNode, replayer); + + expect(parentNode.childNodes.length).toEqual(1); + expect(parentNode.childNodes[0]).toBeInstanceOf(HTMLElement); + + const spanChild = parentNode.childNodes[0] as HTMLElement; + expect(spanChild.tagName).toEqual('SPAN'); + expect(spanChild.id).toEqual(id); + expect(spanChild.childNodes.length).toEqual(1); + expect(spanChild.childNodes[0]).toBeInstanceOf(HTMLElement); + + const liChild = spanChild.childNodes[0] as HTMLElement; + expect(liChild.tagName).toEqual('LI'); + }); }); describe('diff shadow dom', () => { @@ -1040,6 +1158,8 @@ describe('diff algorithm for rrdom', () => { }); describe('diff iframe elements', () => { + jest.setTimeout(60_000); + it('should add an element to the contentDocument of an iframe element', () => { document.write(''); const node = document.createElement('iframe'); @@ -1191,6 +1311,306 @@ describe('diff algorithm for rrdom', () => { expect(element.nodeType).toBe(element.DOCUMENT_TYPE_NODE); expect(mirror.getId(element)).toEqual(-1); }); + + it('should remove children from document before adding new nodes 4', () => { + /** + * This case aims to test whether the diff function can remove all the old doctype and html element from the document before adding new doctype and html element. + * If not, the diff function will throw errors or warnings. + */ + // Mock the original console.warn function to make the test fail once console.warn is called. + const warn = jest.spyOn(global.console, 'warn'); + + document.write(''); + const rrdom = new RRDocument(); + /** + * Make the structure of document and RRDom look like this: + * -2 Document + * -3 DocumentType + * -4 HTML + * -5 HEAD + * -6 BODY + */ + buildFromDom(document, mirror, rrdom); + expect(mirror.getId(document)).toBe(-2); + expect(mirror.getId(document.body)).toBe(-6); + expect(rrdom.mirror.getId(rrdom)).toBe(-2); + expect(rrdom.mirror.getId(rrdom.body)).toBe(-6); + + rrdom.childNodes = []; + /** + * Rebuild the rrdom and make it looks like this: + * -7 RRDocument + * -8 RRDocumentType + * -9 HTML + * -10 HEAD + * -11 BODY + */ + buildFromDom(document, undefined, rrdom); + // Keep the ids of real document unchanged. + expect(mirror.getId(document)).toBe(-2); + expect(mirror.getId(document.body)).toBe(-6); + + expect(rrdom.mirror.getId(rrdom)).toBe(-7); + expect(rrdom.mirror.getId(rrdom.body)).toBe(-11); + + // Diff the document with the new rrdom. + diff(document, rrdom, replayer); + // Check that warn was not called (fail on warning) + expect(warn).not.toHaveBeenCalled(); + + // Check that the old nodes are removed from the NodeMirror. + [-2, -3, -4, -5, -6].forEach((id) => + expect(mirror.getNode(id)).toBeNull(), + ); + expect(mirror.getId(document)).toBe(-7); + expect(mirror.getId(document.doctype)).toBe(-8); + expect(mirror.getId(document.documentElement)).toBe(-9); + expect(mirror.getId(document.head)).toBe(-10); + expect(mirror.getId(document.body)).toBe(-11); + + warn.mockRestore(); + }); + + it('selectors should be case-sensitive for matching in iframe dom', async () => { + /** + * If the selector match is case insensitive, it will cause some CSS style problems in the replayer. + * This test result executed in JSDom is different from that in real browser so we use puppeteer as test environment. + */ + const browser = await puppeteer.launch(); + const page = await browser.newPage(); + await page.goto('about:blank'); + + try { + const code = await compileTSCode( + path.resolve(__dirname, '../src/index.ts'), + ); + await page.evaluate(code); + + const className = 'case-sensitive'; + // To show the selector match pattern (case sensitive) in normal dom. + const caseInsensitiveInNormalDom = await page.evaluate((className) => { + document.write( + '', + ); + const htmlEl = document.documentElement; + htmlEl.className = className.toLowerCase(); + return htmlEl.matches(`.${className.toUpperCase()}`); + }, className); + expect(caseInsensitiveInNormalDom).toBeFalsy(); + + // To show the selector match pattern (case insensitive) in auto mounted iframe dom. + const caseInsensitiveInDefaultIFrameDom = await page.evaluate( + (className) => { + const iframeEl = document.querySelector('iframe'); + const htmlEl = iframeEl?.contentDocument?.documentElement; + if (htmlEl) { + htmlEl.className = className.toLowerCase(); + return htmlEl.matches(`.${className.toUpperCase()}`); + } + }, + className, + ); + expect(caseInsensitiveInDefaultIFrameDom).toBeTruthy(); + + const iframeElId = 3, + iframeDomId = 4, + htmlElId = 5; + const result = await page.evaluate(` + const iframeEl = document.querySelector('iframe'); + + // Construct a virtual dom tree. + const rrDocument = new rrdom.RRDocument(); + const rrIframeEl = rrDocument.createElement('iframe'); + rrDocument.mirror.add(rrIframeEl, rrdom.getDefaultSN(rrIframeEl, ${iframeElId})); + rrDocument.appendChild(rrIframeEl); + rrDocument.mirror.add( + rrIframeEl.contentDocument, + rrdom.getDefaultSN(rrIframeEl.contentDocument, ${iframeDomId}), + ); + const rrDocType = rrDocument.createDocumentType('html', '', ''); + rrIframeEl.contentDocument.appendChild(rrDocType); + const rrHtmlEl = rrDocument.createElement('html'); + rrDocument.mirror.add(rrHtmlEl, rrdom.getDefaultSN(rrHtmlEl, ${htmlElId})); + rrIframeEl.contentDocument.appendChild(rrHtmlEl); + + const replayer = { + mirror: rrdom.createMirror(), + applyCanvas: () => {}, + applyInput: () => {}, + applyScroll: () => {}, + applyStyleSheetMutation: () => {}, + }; + rrdom.diff(iframeEl, rrIframeEl, replayer); + + iframeEl.contentDocument.documentElement.className = + '${className.toLowerCase()}'; + iframeEl.contentDocument.childNodes.length === 2 && + replayer.mirror.getId(iframeEl.contentDocument.documentElement) === ${htmlElId} && + // To test whether the selector match of the updated iframe document is case sensitive or not. + !iframeEl.contentDocument.documentElement.matches( + '.${className.toUpperCase()}', + ); + `); + // IFrame document has two children, mirror id of documentElement is ${htmlElId}, and selectors should be case-sensitive for matching in iframe dom (consistent with the normal dom). + expect(result).toBeTruthy(); + } finally { + await page.close(); + await browser.close(); + } + }); + }); + + describe('afterAppend callback', () => { + it('should call afterAppend callback', () => { + const afterAppendFn = jest.spyOn(replayer, 'afterAppend'); + const node = createTree( + { + tagName: 'div', + id: 1, + }, + undefined, + mirror, + ) as Node; + + const rrdom = new RRDocument(); + const rrNode = createTree( + { + tagName: 'div', + id: 1, + children: [ + { + tagName: 'span', + id: 2, + }, + ], + }, + rrdom, + ) as RRNode; + diff(node, rrNode, replayer); + expect(afterAppendFn).toHaveBeenCalledTimes(1); + expect(afterAppendFn).toHaveBeenCalledWith(node.childNodes[0], 2); + afterAppendFn.mockRestore(); + }); + + it('should diff without afterAppend callback', () => { + replayer.afterAppend = undefined; + const rrdom = buildFromDom(document); + document.open(); + diff(document, rrdom, replayer); + replayer.afterAppend = () => {}; + }); + + it('should call afterAppend callback in the post traversal order', () => { + const afterAppendFn = jest.spyOn(replayer, 'afterAppend'); + document.open(); + + const rrdom = new RRDocument(); + rrdom.mirror.add(rrdom, getDefaultSN(rrdom, 1)); + const rrNode = createTree( + { + tagName: 'html', + id: 1, + children: [ + { + tagName: 'head', + id: 2, + }, + { + tagName: 'body', + id: 3, + children: [ + { + tagName: 'span', + id: 4, + children: [ + { + tagName: 'li', + id: 5, + }, + { + tagName: 'li', + id: 6, + }, + ], + }, + { + tagName: 'p', + id: 7, + }, + { + tagName: 'p', + id: 8, + children: [ + { + tagName: 'li', + id: 9, + }, + { + tagName: 'li', + id: 10, + }, + ], + }, + ], + }, + ], + }, + rrdom, + ) as RRNode; + diff(document, rrNode, replayer); + + expect(afterAppendFn).toHaveBeenCalledTimes(10); + // the correct traversal order + [2, 5, 6, 4, 7, 9, 10, 8, 3, 1].forEach((id, index) => { + expect((mirror.getNode(id) as HTMLElement).tagName).toEqual( + (rrdom.mirror.getNode(id) as IRRElement).tagName, + ); + expect(afterAppendFn).toHaveBeenNthCalledWith( + index + 1, + mirror.getNode(id), + id, + ); + }); + }); + + it('should only call afterAppend for newly created nodes', () => { + const afterAppendFn = jest.spyOn(replayer, 'afterAppend'); + const rrdom = buildFromDom(document, replayer.mirror) as RRDocument; + + // Append 3 nodes to rrdom. + const rrNode = createTree( + { + tagName: 'span', + id: 1, + children: [ + { + tagName: 'li', + id: 2, + }, + { + tagName: 'li', + id: 3, + }, + ], + }, + rrdom, + ) as RRNode; + rrdom.body?.appendChild(rrNode); + diff(document, rrdom, replayer); + expect(afterAppendFn).toHaveBeenCalledTimes(3); + // Should only call afterAppend for 3 newly appended nodes. + [2, 3, 1].forEach((id, index) => { + expect((mirror.getNode(id) as HTMLElement).tagName).toEqual( + (rrdom.mirror.getNode(id) as IRRElement).tagName, + ); + expect(afterAppendFn).toHaveBeenNthCalledWith( + index + 1, + mirror.getNode(id), + id, + ); + }); + afterAppendFn.mockClear(); + }); }); describe('create or get a Node', () => { @@ -1431,4 +1851,116 @@ describe('diff algorithm for rrdom', () => { ).toEqual('a {color: blue;}'); }); }); + + describe('test sameNodeType function', () => { + const rrdom = new RRDocument(); + it('should return true when two elements have same tagNames', () => { + const div1 = document.createElement('div'); + const div2 = rrdom.createElement('div'); + expect(sameNodeType(div1, div2)).toBeTruthy(); + }); + + it('should return false when two elements have different tagNames', () => { + const div1 = document.createElement('div'); + const div2 = rrdom.createElement('span'); + expect(sameNodeType(div1, div2)).toBeFalsy(); + }); + + it('should return false when two nodes have the same node type', () => { + let node1: Node = new Document(); + let node2: IRRNode = new RRDocument(); + expect(sameNodeType(node1, node2)).toBeTruthy(); + + node1 = document.implementation.createDocumentType('html', '', ''); + node2 = rrdom.createDocumentType('', '', ''); + expect(sameNodeType(node1, node2)).toBeTruthy(); + + node1 = document.createTextNode('node1'); + node2 = rrdom.createTextNode('node2'); + expect(sameNodeType(node1, node2)).toBeTruthy(); + + node1 = document.createComment('node1'); + node2 = rrdom.createComment('node2'); + expect(sameNodeType(node1, node2)).toBeTruthy(); + }); + + it('should return false when two nodes have different node types', () => { + let node1: Node = new Document(); + let node2: IRRNode = rrdom.createDocumentType('', '', ''); + expect(sameNodeType(node1, node2)).toBeFalsy(); + + node1 = document.implementation.createDocumentType('html', '', ''); + node2 = new RRDocument(); + expect(sameNodeType(node1, node2)).toBeFalsy(); + + node1 = document.createTextNode('node1'); + node2 = rrdom.createComment('node2'); + expect(sameNodeType(node1, node2)).toBeFalsy(); + + node1 = document.createComment('node1'); + node2 = rrdom.createTextNode('node2'); + expect(sameNodeType(node1, node2)).toBeFalsy(); + }); + }); + + describe('test nodeMatching function', () => { + const rrdom = new RRDocument(); + const NodeMirror = createMirror(); + const rrdomMirror = new RRNodeMirror(); + beforeEach(() => { + NodeMirror.reset(); + rrdomMirror.reset(); + }); + + it('should return false when two nodes have different Ids', () => { + const node1 = document.createElement('div'); + const node2 = rrdom.createElement('div'); + NodeMirror.add(node1, getDefaultSN(node2, 1)); + rrdomMirror.add(node2, getDefaultSN(node2, 2)); + expect(nodeMatching(node1, node2, NodeMirror, rrdomMirror)).toBeFalsy(); + }); + + it('should return false when two nodes have same Ids but different node types', () => { + // Compare an element with a comment node + let node1: Node = document.createElement('div'); + NodeMirror.add(node1, getDefaultSN(rrdom.createElement('div'), 1)); + let node2: IRRNode = rrdom.createComment('test'); + rrdomMirror.add(node2, getDefaultSN(node2, 1)); + expect(nodeMatching(node1, node2, NodeMirror, rrdomMirror)).toBeFalsy(); + + // Compare an element node with a text node + node2 = rrdom.createTextNode(''); + rrdomMirror.add(node2, getDefaultSN(node2, 1)); + expect(nodeMatching(node1, node2, NodeMirror, rrdomMirror)).toBeFalsy(); + + // Compare a document with a text node + node1 = new Document(); + NodeMirror.add(node1, getDefaultSN(rrdom, 1)); + expect(nodeMatching(node1, node2, NodeMirror, rrdomMirror)).toBeFalsy(); + + // Compare a document with a document type node + node2 = rrdom.createDocumentType('', '', ''); + rrdomMirror.add(node2, getDefaultSN(node2, 1)); + expect(nodeMatching(node1, node2, NodeMirror, rrdomMirror)).toBeFalsy(); + }); + + it('should compare two elements', () => { + // Compare two elements with different tagNames + let node1 = document.createElement('div'); + let node2 = rrdom.createElement('span'); + NodeMirror.add(node1, getDefaultSN(rrdom.createElement('div'), 1)); + rrdomMirror.add(node2, getDefaultSN(node2, 1)); + expect(nodeMatching(node1, node2, NodeMirror, rrdomMirror)).toBeFalsy(); + + // Compare two elements with same tagNames but different attributes + node2 = rrdom.createElement('div'); + node2.setAttribute('class', 'test'); + rrdomMirror.add(node2, getDefaultSN(node2, 1)); + expect(nodeMatching(node1, node2, NodeMirror, rrdomMirror)).toBeTruthy(); + + // Should return false when two elements have same tagNames and attributes but different children + rrdomMirror.add(node2, getDefaultSN(node2, 2)); + expect(nodeMatching(node1, node2, NodeMirror, rrdomMirror)).toBeFalsy(); + }); + }); }); diff --git a/packages/rrdom/test/document.test.ts b/packages/rrdom/test/document.test.ts index c9ee13c3..47d9fa73 100644 --- a/packages/rrdom/test/document.test.ts +++ b/packages/rrdom/test/document.test.ts @@ -133,7 +133,7 @@ describe('Basic RRDocument implementation', () => { expect(node.parentElement).toEqual(null); expect(node.childNodes).toBeInstanceOf(Array); expect(node.childNodes.length).toBe(0); - expect(node.ownerDocument).toBeUndefined(); + expect(node.ownerDocument).toBe(node); expect(node.textContent).toBeNull(); expect(node.RRNodeType).toBe(RRNodeType.Document); expect(node.nodeType).toBe(document.nodeType); diff --git a/packages/rrdom/test/utils.ts b/packages/rrdom/test/utils.ts new file mode 100644 index 00000000..a189ae36 --- /dev/null +++ b/packages/rrdom/test/utils.ts @@ -0,0 +1,26 @@ +import * as rollup from 'rollup'; +import * as typescript from 'rollup-plugin-typescript2'; +import resolve from '@rollup/plugin-node-resolve'; +const _typescript = (typescript as unknown) as typeof typescript.default; + +/** + * Use rollup to compile an input TS script into JS code string. + */ +export async function compileTSCode(inputFilePath: string) { + const bundle = await rollup.rollup({ + input: inputFilePath, + plugins: [ + (resolve() as unknown) as rollup.Plugin, + (_typescript({ + tsconfigOverride: { compilerOptions: { module: 'ESNext' } }, + }) as unknown) as rollup.Plugin, + ], + }); + const { + output: [{ code: _code }], + } = await bundle.generate({ + name: 'rrdom', + format: 'iife', + }); + return _code; +} diff --git a/packages/rrdom/test/virtual-dom.test.ts b/packages/rrdom/test/virtual-dom.test.ts index e414e230..0b25f684 100644 --- a/packages/rrdom/test/virtual-dom.test.ts +++ b/packages/rrdom/test/virtual-dom.test.ts @@ -4,9 +4,6 @@ import * as fs from 'fs'; import * as path from 'path'; import * as puppeteer from 'puppeteer'; -import * as rollup from 'rollup'; -import resolve from '@rollup/plugin-node-resolve'; -import * as typescript from 'rollup-plugin-typescript2'; import { JSDOM } from 'jsdom'; import { cdataNode, @@ -29,8 +26,8 @@ import { RRElement, BaseRRNode as RRNode, } from '../src'; +import { compileTSCode } from './utils'; -const _typescript = (typescript as unknown) as typeof typescript.default; const printRRDomCode = ` /** * Print the RRDom as a string. @@ -61,7 +58,7 @@ describe('RRDocument for browser environment', () => { describe('create a RRNode from a real Node', () => { it('should support quicksmode documents', () => { - // seperate jsdom document as changes to the document would otherwise bleed into other tests + // separate jsdom document as changes to the document would otherwise bleed into other tests const dom = new JSDOM(); const document = dom.window.document; @@ -219,22 +216,7 @@ describe('RRDocument for browser environment', () => { beforeAll(async () => { browser = await puppeteer.launch(); - const bundle = await rollup.rollup({ - input: path.resolve(__dirname, '../src/index.ts'), - plugins: [ - (resolve() as unknown) as rollup.Plugin, - (_typescript({ - tsconfigOverride: { compilerOptions: { module: 'ESNext' } }, - }) as unknown) as rollup.Plugin, - ], - }); - const { - output: [{ code: _code }], - } = await bundle.generate({ - name: 'rrdom', - format: 'iife', - }); - code = _code; + code = await compileTSCode(path.resolve(__dirname, '../src/index.ts')); }); afterAll(async () => { await browser.close(); diff --git a/packages/rrweb/src/replay/index.ts b/packages/rrweb/src/replay/index.ts index 0e2abb11..3cd1567e 100644 --- a/packages/rrweb/src/replay/index.ts +++ b/packages/rrweb/src/replay/index.ts @@ -230,14 +230,24 @@ export class Replayer { else if (data.source === IncrementalSource.StyleDeclaration) this.applyStyleDeclaration(data, styleSheet); }, + afterAppend: (node: Node, id: number) => { + for (const plugin of this.config.plugins || []) { + if (plugin.onBuild) plugin.onBuild(node, { id, replayer: this }); + } + }, }; - this.iframe.contentDocument && - diff( - this.iframe.contentDocument, - this.virtualDom, - replayerHandler, - this.virtualDom.mirror, - ); + if (this.iframe.contentDocument) + try { + diff( + this.iframe.contentDocument, + this.virtualDom, + replayerHandler, + this.virtualDom.mirror, + ); + } catch (e) { + console.warn(e); + } + this.virtualDom.destroyTree(); this.usingVirtualDom = false; @@ -858,6 +868,8 @@ export class Replayer { ); } + // Skip the plugin onBuild callback in the virtual dom mode + if (this.usingVirtualDom) return; for (const plugin of this.config.plugins || []) { if (plugin.onBuild) plugin.onBuild(builtNode, { @@ -1475,6 +1487,8 @@ export class Replayer { return; } const afterAppend = (node: Node | RRNode, id: number) => { + // Skip the plugin onBuild callback for virtual dom + if (this.usingVirtualDom) return; for (const plugin of this.config.plugins || []) { if (plugin.onBuild) plugin.onBuild(node, { id, replayer: this }); }