move browser-only rrdom features to the new rrdom package (#913)
This commit is contained in:
yz-yu
@@ -22,7 +22,7 @@ import type {
|
||||
RRStyleElement,
|
||||
RRDocument,
|
||||
Mirror,
|
||||
} from './virtual-dom';
|
||||
} from '.';
|
||||
|
||||
const NAMESPACES: Record<string, string> = {
|
||||
svg: 'http://www.w3.org/2000/svg',
|
||||
@@ -113,7 +113,7 @@ export function diff(
|
||||
break;
|
||||
}
|
||||
case RRNodeType.Element: {
|
||||
const oldElement = (oldTree ) as HTMLElement;
|
||||
const oldElement = oldTree as HTMLElement;
|
||||
const newRRElement = newTree as IRRElement;
|
||||
diffProps(oldElement, newRRElement, rrnodeMirror);
|
||||
scrollDataToApply = (newRRElement as RRElement).scrollData;
|
||||
@@ -121,7 +121,7 @@ export function diff(
|
||||
switch (newRRElement.tagName) {
|
||||
case 'AUDIO':
|
||||
case 'VIDEO': {
|
||||
const oldMediaElement = (oldTree ) as HTMLMediaElement;
|
||||
const oldMediaElement = oldTree as HTMLMediaElement;
|
||||
const newMediaRRElement = newRRElement as RRMediaElement;
|
||||
if (newMediaRRElement.paused !== undefined)
|
||||
newMediaRRElement.paused
|
||||
@@ -141,7 +141,7 @@ export function diff(
|
||||
replayer.applyCanvas(
|
||||
canvasMutation.event,
|
||||
canvasMutation.mutation,
|
||||
(oldTree ) as HTMLCanvasElement,
|
||||
oldTree as HTMLCanvasElement,
|
||||
),
|
||||
);
|
||||
break;
|
||||
@@ -191,8 +191,7 @@ export function diff(
|
||||
|
||||
// IFrame element doesn't have child nodes.
|
||||
if (newTree.nodeName === 'IFRAME') {
|
||||
const oldContentDocument = ((oldTree ) as HTMLIFrameElement)
|
||||
.contentDocument;
|
||||
const oldContentDocument = (oldTree as HTMLIFrameElement).contentDocument;
|
||||
const newIFrameElement = newTree as RRIFrameElement;
|
||||
// If the iframe is cross-origin, the contentDocument will be null.
|
||||
if (oldContentDocument) {
|
||||
@@ -319,11 +318,9 @@ function diffChildren(
|
||||
if (
|
||||
replayer.mirror.getMeta(parentNode)?.type === RRNodeType.Document &&
|
||||
replayer.mirror.getMeta(newNode)?.type === RRNodeType.Element &&
|
||||
((parentNode ) as Document).documentElement
|
||||
(parentNode as Document).documentElement
|
||||
) {
|
||||
parentNode.removeChild(
|
||||
((parentNode ) as Document).documentElement,
|
||||
);
|
||||
parentNode.removeChild((parentNode as Document).documentElement);
|
||||
oldChildren[oldStartIndex] = undefined;
|
||||
oldStartNode = undefined;
|
||||
}
|
||||
@@ -417,8 +414,7 @@ export function getNestedRule(
|
||||
return rule;
|
||||
} else {
|
||||
return getNestedRule(
|
||||
((rule ).cssRules[position[1]] as CSSGroupingRule)
|
||||
.cssRules,
|
||||
(rule.cssRules[position[1]] as CSSGroupingRule).cssRules,
|
||||
position.slice(2),
|
||||
);
|
||||
}
|
||||
|
||||
@@ -1,376 +0,0 @@
|
||||
import { NodeType as RRNodeType } from 'rrweb-snapshot';
|
||||
import type { NWSAPI } from 'nwsapi';
|
||||
import type { CSSStyleDeclaration as CSSStyleDeclarationType } from 'cssstyle';
|
||||
import {
|
||||
BaseRRCDATASectionImpl,
|
||||
BaseRRCommentImpl,
|
||||
BaseRRDocumentImpl,
|
||||
BaseRRDocumentTypeImpl,
|
||||
BaseRRElementImpl,
|
||||
BaseRRMediaElementImpl,
|
||||
BaseRRNode,
|
||||
BaseRRTextImpl,
|
||||
ClassList,
|
||||
IRRDocument,
|
||||
CSSStyleDeclaration,
|
||||
} from './document';
|
||||
const nwsapi = require('nwsapi');
|
||||
const cssom = require('cssom');
|
||||
const cssstyle = require('cssstyle');
|
||||
|
||||
export class RRNode extends BaseRRNode {}
|
||||
|
||||
export class RRWindow {
|
||||
scrollLeft = 0;
|
||||
scrollTop = 0;
|
||||
scrollTo(options?: ScrollToOptions) {
|
||||
if (!options) return;
|
||||
if (typeof options.left === 'number') this.scrollLeft = options.left;
|
||||
if (typeof options.top === 'number') this.scrollTop = options.top;
|
||||
}
|
||||
}
|
||||
|
||||
export class RRDocument
|
||||
extends BaseRRDocumentImpl(RRNode)
|
||||
implements IRRDocument {
|
||||
readonly nodeName: '#document' = '#document';
|
||||
private _nwsapi: NWSAPI;
|
||||
get nwsapi() {
|
||||
if (!this._nwsapi) {
|
||||
this._nwsapi = nwsapi({
|
||||
document: (this as unknown) as Document,
|
||||
DOMException: (null as unknown) as new (
|
||||
message?: string,
|
||||
name?: string,
|
||||
) => DOMException,
|
||||
});
|
||||
this._nwsapi.configure({
|
||||
LOGERRORS: false,
|
||||
IDS_DUPES: true,
|
||||
MIXEDCASE: true,
|
||||
});
|
||||
}
|
||||
return this._nwsapi;
|
||||
}
|
||||
|
||||
get documentElement(): RRElement | null {
|
||||
return super.documentElement as RRElement | null;
|
||||
}
|
||||
|
||||
get body(): RRElement | null {
|
||||
return super.body as RRElement | null;
|
||||
}
|
||||
|
||||
get head() {
|
||||
return super.head as RRElement | null;
|
||||
}
|
||||
|
||||
get implementation(): RRDocument {
|
||||
return this;
|
||||
}
|
||||
|
||||
get firstElementChild(): RRElement | null {
|
||||
return this.documentElement;
|
||||
}
|
||||
|
||||
appendChild(childNode: RRNode) {
|
||||
return super.appendChild(childNode);
|
||||
}
|
||||
|
||||
insertBefore(newChild: RRNode, refChild: RRNode | null) {
|
||||
return super.insertBefore(newChild, refChild);
|
||||
}
|
||||
|
||||
querySelectorAll(selectors: string): RRNode[] {
|
||||
return (this.nwsapi.select(selectors) as unknown) as RRNode[];
|
||||
}
|
||||
|
||||
getElementsByTagName(tagName: string): RRElement[] {
|
||||
if (this.documentElement)
|
||||
return this.documentElement.getElementsByTagName(tagName);
|
||||
return [];
|
||||
}
|
||||
|
||||
getElementsByClassName(className: string): RRElement[] {
|
||||
if (this.documentElement)
|
||||
return this.documentElement.getElementsByClassName(className);
|
||||
return [];
|
||||
}
|
||||
|
||||
getElementById(elementId: string): RRElement | null {
|
||||
if (this.documentElement)
|
||||
return this.documentElement.getElementById(elementId);
|
||||
return null;
|
||||
}
|
||||
|
||||
createDocument(
|
||||
_namespace: string | null,
|
||||
_qualifiedName: string | null,
|
||||
_doctype?: DocumentType | null,
|
||||
) {
|
||||
return new RRDocument();
|
||||
}
|
||||
|
||||
createDocumentType(
|
||||
qualifiedName: string,
|
||||
publicId: string,
|
||||
systemId: string,
|
||||
) {
|
||||
const documentTypeNode = new RRDocumentType(
|
||||
qualifiedName,
|
||||
publicId,
|
||||
systemId,
|
||||
);
|
||||
documentTypeNode.ownerDocument = this;
|
||||
return documentTypeNode;
|
||||
}
|
||||
|
||||
createElement<K extends keyof HTMLElementTagNameMap>(
|
||||
tagName: K,
|
||||
): RRElementType<K>;
|
||||
createElement(tagName: string): RRElement;
|
||||
createElement(tagName: string) {
|
||||
const upperTagName = tagName.toUpperCase();
|
||||
let element;
|
||||
switch (upperTagName) {
|
||||
case 'AUDIO':
|
||||
case 'VIDEO':
|
||||
element = new RRMediaElement(upperTagName);
|
||||
break;
|
||||
case 'IFRAME':
|
||||
element = new RRIFrameElement(upperTagName);
|
||||
break;
|
||||
case 'IMG':
|
||||
element = new RRImageElement(upperTagName);
|
||||
break;
|
||||
case 'CANVAS':
|
||||
element = new RRCanvasElement(upperTagName);
|
||||
break;
|
||||
case 'STYLE':
|
||||
element = new RRStyleElement(upperTagName);
|
||||
break;
|
||||
default:
|
||||
element = new RRElement(upperTagName);
|
||||
break;
|
||||
}
|
||||
element.ownerDocument = this;
|
||||
return element;
|
||||
}
|
||||
|
||||
createElementNS(_namespaceURI: string, qualifiedName: string) {
|
||||
return this.createElement(qualifiedName as keyof HTMLElementTagNameMap);
|
||||
}
|
||||
|
||||
createComment(data: string) {
|
||||
const commentNode = new RRComment(data);
|
||||
commentNode.ownerDocument = this;
|
||||
return commentNode;
|
||||
}
|
||||
|
||||
createCDATASection(data: string) {
|
||||
const sectionNode = new RRCDATASection(data);
|
||||
sectionNode.ownerDocument = this;
|
||||
return sectionNode;
|
||||
}
|
||||
|
||||
createTextNode(data: string) {
|
||||
const textNode = new RRText(data);
|
||||
textNode.ownerDocument = this;
|
||||
return textNode;
|
||||
}
|
||||
}
|
||||
|
||||
export class RRDocumentType extends BaseRRDocumentTypeImpl(RRNode) {}
|
||||
|
||||
export class RRElement extends BaseRRElementImpl(RRNode) {
|
||||
private _style: CSSStyleDeclarationType;
|
||||
constructor(tagName: string) {
|
||||
super(tagName);
|
||||
this._style = new cssstyle.CSSStyleDeclaration();
|
||||
const style = this._style;
|
||||
Object.defineProperty(this.attributes, 'style', {
|
||||
get() {
|
||||
return style.cssText;
|
||||
},
|
||||
set(cssText: string) {
|
||||
style.cssText = cssText;
|
||||
},
|
||||
});
|
||||
}
|
||||
|
||||
get style() {
|
||||
return (this._style as unknown) as CSSStyleDeclaration;
|
||||
}
|
||||
|
||||
attachShadow(_init: ShadowRootInit): RRElement {
|
||||
return super.attachShadow(_init) as RRElement;
|
||||
}
|
||||
|
||||
appendChild(newChild: RRNode): RRNode {
|
||||
return super.appendChild(newChild) as RRNode;
|
||||
}
|
||||
|
||||
insertBefore(newChild: RRNode, refChild: RRNode | null): RRNode {
|
||||
return super.insertBefore(newChild, refChild) as RRNode;
|
||||
}
|
||||
|
||||
getAttribute(name: string) {
|
||||
const upperName = name && name.toLowerCase();
|
||||
if (upperName in this.attributes) return this.attributes[upperName];
|
||||
return null;
|
||||
}
|
||||
|
||||
setAttribute(name: string, attribute: string) {
|
||||
this.attributes[name.toLowerCase()] = attribute;
|
||||
}
|
||||
|
||||
removeAttribute(name: string) {
|
||||
delete this.attributes[name.toLowerCase()];
|
||||
}
|
||||
|
||||
get firstElementChild(): RRElement | null {
|
||||
for (const child of this.childNodes)
|
||||
if (child.RRNodeType === RRNodeType.Element) return child as RRElement;
|
||||
return null;
|
||||
}
|
||||
|
||||
get nextElementSibling(): RRElement | null {
|
||||
const parentNode = this.parentNode;
|
||||
if (!parentNode) return null;
|
||||
const siblings = parentNode.childNodes;
|
||||
const index = siblings.indexOf(this);
|
||||
for (let i = index + 1; i < siblings.length; i++)
|
||||
if (siblings[i] instanceof RRElement) return siblings[i] as RRElement;
|
||||
return null;
|
||||
}
|
||||
|
||||
querySelectorAll(selectors: string): RRNode[] {
|
||||
const result: RRElement[] = [];
|
||||
if (this.ownerDocument !== null) {
|
||||
((this.ownerDocument as RRDocument).nwsapi.select(
|
||||
selectors,
|
||||
(this as unknown) as Element,
|
||||
(element) => {
|
||||
if (((element as unknown) as RRElement) !== this)
|
||||
result.push((element as unknown) as RRElement);
|
||||
},
|
||||
) as unknown) as RRNode[];
|
||||
}
|
||||
return result;
|
||||
}
|
||||
|
||||
getElementById(elementId: string): RRElement | null {
|
||||
if (this.id === elementId) return this;
|
||||
for (const child of this.childNodes) {
|
||||
if (child instanceof RRElement) {
|
||||
const result = child.getElementById(elementId);
|
||||
if (result !== null) return result;
|
||||
}
|
||||
}
|
||||
return null;
|
||||
}
|
||||
|
||||
getElementsByClassName(className: string): RRElement[] {
|
||||
let elements: RRElement[] = [];
|
||||
const queryClassList = new ClassList(className);
|
||||
// Make sure this element has all queried class names.
|
||||
if (
|
||||
this instanceof RRElement &&
|
||||
queryClassList.classes.filter((queriedClassName) =>
|
||||
this.classList.classes.some((name) => name === queriedClassName),
|
||||
).length == queryClassList.classes.length
|
||||
)
|
||||
elements.push(this);
|
||||
for (const child of this.childNodes) {
|
||||
if (child instanceof RRElement)
|
||||
elements = elements.concat(child.getElementsByClassName(className));
|
||||
}
|
||||
return elements;
|
||||
}
|
||||
|
||||
getElementsByTagName(tagName: string): RRElement[] {
|
||||
let elements: RRElement[] = [];
|
||||
const normalizedTagName = tagName.toUpperCase();
|
||||
if (this instanceof RRElement && this.tagName === normalizedTagName)
|
||||
elements.push(this);
|
||||
for (const child of this.childNodes) {
|
||||
if (child instanceof RRElement)
|
||||
elements = elements.concat(child.getElementsByTagName(tagName));
|
||||
}
|
||||
return elements;
|
||||
}
|
||||
}
|
||||
|
||||
export class RRImageElement extends RRElement {
|
||||
src: string;
|
||||
width: number;
|
||||
height: number;
|
||||
onload: ((this: GlobalEventHandlers, ev: Event) => any) | null;
|
||||
}
|
||||
|
||||
export class RRMediaElement extends BaseRRMediaElementImpl(RRElement) {}
|
||||
|
||||
export class RRCanvasElement extends RRElement {
|
||||
/**
|
||||
* This is just a dummy implementation to prevent rrweb replayer from drawing mouse tail. If further analysis of canvas is needed, we may implement it with node-canvas.
|
||||
*/
|
||||
getContext(): CanvasRenderingContext2D | null {
|
||||
return null;
|
||||
}
|
||||
}
|
||||
|
||||
export class RRStyleElement extends RRElement {
|
||||
private _sheet: CSSStyleSheet | null = null;
|
||||
|
||||
get sheet() {
|
||||
if (!this._sheet) {
|
||||
let result = '';
|
||||
for (const child of this.childNodes)
|
||||
if (child.RRNodeType === RRNodeType.Text)
|
||||
result += (child as RRText).textContent;
|
||||
this._sheet = cssom.parse(result);
|
||||
}
|
||||
return this._sheet;
|
||||
}
|
||||
}
|
||||
|
||||
export class RRIFrameElement extends RRElement {
|
||||
width = '';
|
||||
height = '';
|
||||
src = '';
|
||||
contentDocument: RRDocument = new RRDocument();
|
||||
contentWindow: RRWindow = new RRWindow();
|
||||
|
||||
constructor(tagName: string) {
|
||||
super(tagName);
|
||||
const htmlElement = this.contentDocument.createElement('HTML');
|
||||
this.contentDocument.appendChild(htmlElement);
|
||||
htmlElement.appendChild(this.contentDocument.createElement('HEAD'));
|
||||
htmlElement.appendChild(this.contentDocument.createElement('BODY'));
|
||||
}
|
||||
}
|
||||
|
||||
export class RRText extends BaseRRTextImpl(RRNode) {
|
||||
readonly nodeName: '#text' = '#text';
|
||||
}
|
||||
|
||||
export class RRComment extends BaseRRCommentImpl(RRNode) {
|
||||
readonly nodeName: '#comment' = '#comment';
|
||||
}
|
||||
|
||||
export class RRCDATASection extends BaseRRCDATASectionImpl(RRNode) {
|
||||
readonly nodeName: '#cdata-section' = '#cdata-section';
|
||||
}
|
||||
|
||||
interface RRElementTagNameMap {
|
||||
audio: RRMediaElement;
|
||||
canvas: RRCanvasElement;
|
||||
iframe: RRIFrameElement;
|
||||
img: RRImageElement;
|
||||
style: RRStyleElement;
|
||||
video: RRMediaElement;
|
||||
}
|
||||
|
||||
type RRElementType<
|
||||
K extends keyof HTMLElementTagNameMap
|
||||
> = K extends keyof RRElementTagNameMap ? RRElementTagNameMap[K] : RRElement;
|
||||
@@ -1,13 +1,450 @@
|
||||
import {
|
||||
polyfillPerformance,
|
||||
polyfillRAF,
|
||||
polyfillEvent,
|
||||
polyfillNode,
|
||||
polyfillDocument,
|
||||
} from './polyfill';
|
||||
polyfillPerformance();
|
||||
polyfillRAF();
|
||||
polyfillEvent();
|
||||
polyfillNode();
|
||||
polyfillDocument();
|
||||
export * from './document-nodejs';
|
||||
NodeType as RRNodeType,
|
||||
createMirror as createNodeMirror,
|
||||
} from 'rrweb-snapshot';
|
||||
import type {
|
||||
Mirror as NodeMirror,
|
||||
IMirror,
|
||||
serializedNodeWithId,
|
||||
} from 'rrweb-snapshot';
|
||||
import type {
|
||||
canvasMutationData,
|
||||
canvasEventWithTime,
|
||||
inputData,
|
||||
scrollData,
|
||||
} from 'rrweb/src/types';
|
||||
import type { VirtualStyleRules } from './diff';
|
||||
import {
|
||||
BaseRRNode as RRNode,
|
||||
BaseRRCDATASectionImpl,
|
||||
BaseRRCommentImpl,
|
||||
BaseRRDocumentImpl,
|
||||
BaseRRDocumentTypeImpl,
|
||||
BaseRRElementImpl,
|
||||
BaseRRMediaElementImpl,
|
||||
BaseRRTextImpl,
|
||||
IRRDocument,
|
||||
IRRElement,
|
||||
IRRNode,
|
||||
NodeType,
|
||||
IRRDocumentType,
|
||||
IRRText,
|
||||
IRRComment,
|
||||
} from './document';
|
||||
|
||||
export class RRDocument extends BaseRRDocumentImpl(RRNode) {
|
||||
// In the rrweb replayer, there are some unserialized nodes like the element that stores the injected style rules.
|
||||
// These unserialized nodes may interfere the execution of the diff algorithm.
|
||||
// The id of serialized node is larger than 0. So this value less than 0 is used as id for these unserialized nodes.
|
||||
private _unserializedId = -1;
|
||||
|
||||
/**
|
||||
* Every time the id is used, it will minus 1 automatically to avoid collisions.
|
||||
*/
|
||||
public get unserializedId(): number {
|
||||
return this._unserializedId--;
|
||||
}
|
||||
|
||||
public mirror: Mirror = createMirror();
|
||||
|
||||
public scrollData: scrollData | null = null;
|
||||
|
||||
constructor(mirror?: Mirror) {
|
||||
super();
|
||||
if (mirror) {
|
||||
this.mirror = mirror;
|
||||
}
|
||||
}
|
||||
|
||||
createDocument(
|
||||
_namespace: string | null,
|
||||
_qualifiedName: string | null,
|
||||
_doctype?: DocumentType | null,
|
||||
) {
|
||||
return new RRDocument();
|
||||
}
|
||||
|
||||
createDocumentType(
|
||||
qualifiedName: string,
|
||||
publicId: string,
|
||||
systemId: string,
|
||||
) {
|
||||
const documentTypeNode = new RRDocumentType(
|
||||
qualifiedName,
|
||||
publicId,
|
||||
systemId,
|
||||
);
|
||||
documentTypeNode.ownerDocument = this;
|
||||
return documentTypeNode;
|
||||
}
|
||||
|
||||
createElement<K extends keyof HTMLElementTagNameMap>(
|
||||
tagName: K,
|
||||
): RRElementType<K>;
|
||||
createElement(tagName: string): RRElement;
|
||||
createElement(tagName: string) {
|
||||
const upperTagName = tagName.toUpperCase();
|
||||
let element;
|
||||
switch (upperTagName) {
|
||||
case 'AUDIO':
|
||||
case 'VIDEO':
|
||||
element = new RRMediaElement(upperTagName);
|
||||
break;
|
||||
case 'IFRAME':
|
||||
element = new RRIFrameElement(upperTagName, this.mirror);
|
||||
break;
|
||||
case 'CANVAS':
|
||||
element = new RRCanvasElement(upperTagName);
|
||||
break;
|
||||
case 'STYLE':
|
||||
element = new RRStyleElement(upperTagName);
|
||||
break;
|
||||
default:
|
||||
element = new RRElement(upperTagName);
|
||||
break;
|
||||
}
|
||||
element.ownerDocument = this;
|
||||
return element;
|
||||
}
|
||||
|
||||
createComment(data: string) {
|
||||
const commentNode = new RRComment(data);
|
||||
commentNode.ownerDocument = this;
|
||||
return commentNode;
|
||||
}
|
||||
|
||||
createCDATASection(data: string) {
|
||||
const sectionNode = new RRCDATASection(data);
|
||||
sectionNode.ownerDocument = this;
|
||||
return sectionNode;
|
||||
}
|
||||
|
||||
createTextNode(data: string) {
|
||||
const textNode = new RRText(data);
|
||||
textNode.ownerDocument = this;
|
||||
return textNode;
|
||||
}
|
||||
|
||||
destroyTree() {
|
||||
this.childNodes = [];
|
||||
this.mirror.reset();
|
||||
}
|
||||
|
||||
open() {
|
||||
super.open();
|
||||
this._unserializedId = -1;
|
||||
}
|
||||
}
|
||||
|
||||
export const RRDocumentType = BaseRRDocumentTypeImpl(RRNode);
|
||||
|
||||
export class RRElement extends BaseRRElementImpl(RRNode) {
|
||||
inputData: inputData | null = null;
|
||||
scrollData: scrollData | null = null;
|
||||
}
|
||||
|
||||
export class RRMediaElement extends BaseRRMediaElementImpl(RRElement) {}
|
||||
|
||||
export class RRCanvasElement extends RRElement implements IRRElement {
|
||||
public canvasMutations: {
|
||||
event: canvasEventWithTime;
|
||||
mutation: canvasMutationData;
|
||||
}[] = [];
|
||||
/**
|
||||
* This is a dummy implementation to distinguish RRCanvasElement from real HTMLCanvasElement.
|
||||
*/
|
||||
getContext(): RenderingContext | null {
|
||||
return null;
|
||||
}
|
||||
}
|
||||
|
||||
export class RRStyleElement extends RRElement {
|
||||
public rules: VirtualStyleRules = [];
|
||||
}
|
||||
|
||||
export class RRIFrameElement extends RRElement {
|
||||
contentDocument: RRDocument = new RRDocument();
|
||||
constructor(upperTagName: string, mirror: Mirror) {
|
||||
super(upperTagName);
|
||||
this.contentDocument.mirror = mirror;
|
||||
}
|
||||
}
|
||||
|
||||
export const RRText = BaseRRTextImpl(RRNode);
|
||||
export type RRText = typeof RRText;
|
||||
|
||||
export const RRComment = BaseRRCommentImpl(RRNode);
|
||||
export type RRComment = typeof RRComment;
|
||||
|
||||
export const RRCDATASection = BaseRRCDATASectionImpl(RRNode);
|
||||
export type RRCDATASection = typeof RRCDATASection;
|
||||
|
||||
interface RRElementTagNameMap {
|
||||
audio: RRMediaElement;
|
||||
canvas: RRCanvasElement;
|
||||
iframe: RRIFrameElement;
|
||||
style: RRStyleElement;
|
||||
video: RRMediaElement;
|
||||
}
|
||||
|
||||
type RRElementType<
|
||||
K extends keyof HTMLElementTagNameMap
|
||||
> = K extends keyof RRElementTagNameMap ? RRElementTagNameMap[K] : RRElement;
|
||||
|
||||
function getValidTagName(element: HTMLElement): string {
|
||||
// https://github.com/rrweb-io/rrweb-snapshot/issues/56
|
||||
if (element instanceof HTMLFormElement) {
|
||||
return 'FORM';
|
||||
}
|
||||
return element.tagName.toUpperCase();
|
||||
}
|
||||
|
||||
/**
|
||||
* Build a RRNode from a real Node.
|
||||
* @param node the real Node
|
||||
* @param rrdom the RRDocument
|
||||
* @param domMirror the NodeMirror that records the real document tree
|
||||
* @returns the built RRNode
|
||||
*/
|
||||
export function buildFromNode(
|
||||
node: Node,
|
||||
rrdom: IRRDocument,
|
||||
domMirror: NodeMirror,
|
||||
parentRRNode?: IRRNode | null,
|
||||
): IRRNode | null {
|
||||
let rrNode: IRRNode;
|
||||
|
||||
switch (node.nodeType) {
|
||||
case NodeType.DOCUMENT_NODE:
|
||||
if (parentRRNode && parentRRNode.nodeName === 'IFRAME')
|
||||
rrNode = (parentRRNode as RRIFrameElement).contentDocument;
|
||||
else {
|
||||
rrNode = rrdom;
|
||||
(rrNode as IRRDocument).compatMode = (node as Document).compatMode as
|
||||
| 'BackCompat'
|
||||
| 'CSS1Compat';
|
||||
}
|
||||
break;
|
||||
case NodeType.DOCUMENT_TYPE_NODE:
|
||||
const documentType = node as DocumentType;
|
||||
rrNode = rrdom.createDocumentType(
|
||||
documentType.name,
|
||||
documentType.publicId,
|
||||
documentType.systemId,
|
||||
);
|
||||
break;
|
||||
case NodeType.ELEMENT_NODE:
|
||||
const elementNode = node as HTMLElement;
|
||||
const tagName = getValidTagName(elementNode);
|
||||
rrNode = rrdom.createElement(tagName);
|
||||
const rrElement = rrNode as IRRElement;
|
||||
for (const { name, value } of Array.from(elementNode.attributes)) {
|
||||
rrElement.attributes[name] = value;
|
||||
}
|
||||
elementNode.scrollLeft && (rrElement.scrollLeft = elementNode.scrollLeft);
|
||||
elementNode.scrollTop && (rrElement.scrollTop = elementNode.scrollTop);
|
||||
/**
|
||||
* We don't have to record special values of input elements at the beginning.
|
||||
* Because if these values are changed later, the mutation will be applied through the batched input events on its RRElement after the diff algorithm is executed.
|
||||
*/
|
||||
break;
|
||||
case NodeType.TEXT_NODE:
|
||||
rrNode = rrdom.createTextNode((node as Text).textContent || '');
|
||||
break;
|
||||
case NodeType.CDATA_SECTION_NODE:
|
||||
rrNode = rrdom.createCDATASection((node as CDATASection).data);
|
||||
break;
|
||||
case NodeType.COMMENT_NODE:
|
||||
rrNode = rrdom.createComment((node as Comment).textContent || '');
|
||||
break;
|
||||
// if node is a shadow root
|
||||
case NodeType.DOCUMENT_FRAGMENT_NODE:
|
||||
rrNode = (parentRRNode as IRRElement).attachShadow({ mode: 'open' });
|
||||
break;
|
||||
default:
|
||||
return null;
|
||||
}
|
||||
|
||||
let sn: serializedNodeWithId | null = domMirror.getMeta(node);
|
||||
|
||||
if (rrdom instanceof RRDocument) {
|
||||
if (!sn) {
|
||||
sn = getDefaultSN(rrNode, rrdom.unserializedId);
|
||||
domMirror.add(node, sn);
|
||||
}
|
||||
rrdom.mirror.add(rrNode, { ...sn });
|
||||
}
|
||||
|
||||
return rrNode;
|
||||
}
|
||||
|
||||
/**
|
||||
* Build a RRDocument from a real document tree.
|
||||
* @param dom the real document tree
|
||||
* @param domMirror the NodeMirror that records the real document tree
|
||||
* @param rrdom the rrdom object to be constructed
|
||||
* @returns the build rrdom
|
||||
*/
|
||||
export function buildFromDom(
|
||||
dom: Document,
|
||||
domMirror: NodeMirror = createNodeMirror(),
|
||||
rrdom: IRRDocument = new RRDocument(),
|
||||
) {
|
||||
function walk(node: Node, parentRRNode: IRRNode | null) {
|
||||
const rrNode = buildFromNode(node, rrdom, domMirror, parentRRNode);
|
||||
if (rrNode === null) return;
|
||||
if (
|
||||
// if the parentRRNode isn't a RRIFrameElement
|
||||
parentRRNode?.nodeName !== 'IFRAME' &&
|
||||
// if node isn't a shadow root
|
||||
node.nodeType !== NodeType.DOCUMENT_FRAGMENT_NODE
|
||||
) {
|
||||
parentRRNode?.appendChild(rrNode);
|
||||
rrNode.parentNode = parentRRNode;
|
||||
rrNode.parentElement = parentRRNode as RRElement;
|
||||
}
|
||||
|
||||
if (node.nodeName === 'IFRAME') {
|
||||
walk((node as HTMLIFrameElement).contentDocument!, rrNode);
|
||||
} else if (
|
||||
node.nodeType === NodeType.DOCUMENT_NODE ||
|
||||
node.nodeType === NodeType.ELEMENT_NODE ||
|
||||
node.nodeType === NodeType.DOCUMENT_FRAGMENT_NODE
|
||||
) {
|
||||
// if the node is a shadow dom
|
||||
if (
|
||||
node.nodeType === NodeType.ELEMENT_NODE &&
|
||||
(node as HTMLElement).shadowRoot
|
||||
)
|
||||
walk((node as HTMLElement).shadowRoot!, rrNode);
|
||||
node.childNodes.forEach((childNode) => walk(childNode, rrNode));
|
||||
}
|
||||
}
|
||||
walk(dom, null);
|
||||
return rrdom;
|
||||
}
|
||||
|
||||
export function createMirror(): Mirror {
|
||||
return new Mirror();
|
||||
}
|
||||
|
||||
// based on Mirror from rrweb-snapshots
|
||||
export class Mirror implements IMirror<RRNode> {
|
||||
private idNodeMap: Map<number, RRNode> = new Map();
|
||||
private nodeMetaMap: WeakMap<RRNode, serializedNodeWithId> = new WeakMap();
|
||||
|
||||
getId(n: RRNode | undefined | null): number {
|
||||
if (!n) return -1;
|
||||
|
||||
const id = this.getMeta(n)?.id;
|
||||
|
||||
// if n is not a serialized Node, use -1 as its id.
|
||||
return id ?? -1;
|
||||
}
|
||||
|
||||
getNode(id: number): RRNode | null {
|
||||
return this.idNodeMap.get(id) || null;
|
||||
}
|
||||
|
||||
getIds(): number[] {
|
||||
return Array.from(this.idNodeMap.keys());
|
||||
}
|
||||
|
||||
getMeta(n: RRNode): serializedNodeWithId | null {
|
||||
return this.nodeMetaMap.get(n) || null;
|
||||
}
|
||||
|
||||
// removes the node from idNodeMap
|
||||
// doesn't remove the node from nodeMetaMap
|
||||
removeNodeFromMap(n: RRNode) {
|
||||
const id = this.getId(n);
|
||||
this.idNodeMap.delete(id);
|
||||
|
||||
if (n.childNodes) {
|
||||
n.childNodes.forEach((childNode) => this.removeNodeFromMap(childNode));
|
||||
}
|
||||
}
|
||||
has(id: number): boolean {
|
||||
return this.idNodeMap.has(id);
|
||||
}
|
||||
|
||||
hasNode(node: RRNode): boolean {
|
||||
return this.nodeMetaMap.has(node);
|
||||
}
|
||||
|
||||
add(n: RRNode, meta: serializedNodeWithId) {
|
||||
const id = meta.id;
|
||||
this.idNodeMap.set(id, n);
|
||||
this.nodeMetaMap.set(n, meta);
|
||||
}
|
||||
|
||||
replace(id: number, n: RRNode) {
|
||||
this.idNodeMap.set(id, n);
|
||||
}
|
||||
|
||||
reset() {
|
||||
this.idNodeMap = new Map();
|
||||
this.nodeMetaMap = new WeakMap();
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Get a default serializedNodeWithId value for a RRNode.
|
||||
* @param id the serialized id to assign
|
||||
*/
|
||||
export function getDefaultSN(node: IRRNode, id: number): serializedNodeWithId {
|
||||
switch (node.RRNodeType) {
|
||||
case RRNodeType.Document:
|
||||
return {
|
||||
id,
|
||||
type: node.RRNodeType,
|
||||
childNodes: [],
|
||||
};
|
||||
case RRNodeType.DocumentType:
|
||||
const doctype = node as IRRDocumentType;
|
||||
return {
|
||||
id,
|
||||
type: node.RRNodeType,
|
||||
name: doctype.name,
|
||||
publicId: doctype.publicId,
|
||||
systemId: doctype.systemId,
|
||||
};
|
||||
case RRNodeType.Element:
|
||||
return {
|
||||
id,
|
||||
type: node.RRNodeType,
|
||||
tagName: (node as IRRElement).tagName.toLowerCase(), // In rrweb data, all tagNames are lowercase.
|
||||
attributes: {},
|
||||
childNodes: [],
|
||||
};
|
||||
case RRNodeType.Text:
|
||||
return {
|
||||
id,
|
||||
type: node.RRNodeType,
|
||||
textContent: (node as IRRText).textContent || '',
|
||||
};
|
||||
case RRNodeType.Comment:
|
||||
return {
|
||||
id,
|
||||
type: node.RRNodeType,
|
||||
textContent: (node as IRRComment).textContent || '',
|
||||
};
|
||||
case RRNodeType.CDATA:
|
||||
return {
|
||||
id,
|
||||
type: node.RRNodeType,
|
||||
textContent: '',
|
||||
};
|
||||
}
|
||||
}
|
||||
|
||||
export { RRNode };
|
||||
|
||||
export {
|
||||
diff,
|
||||
createOrGetNode,
|
||||
StyleRuleType,
|
||||
ReplayerHandler,
|
||||
VirtualStyleRules,
|
||||
} from './diff';
|
||||
export * from './document';
|
||||
|
||||
@@ -1,89 +0,0 @@
|
||||
import { RRDocument, RRNode } from './document-nodejs';
|
||||
|
||||
/**
|
||||
* Polyfill the performance for nodejs.
|
||||
* Note: The performance api is available through the global object from nodejs v16.0.0.
|
||||
* https://github.com/nodejs/node/pull/37970
|
||||
*/
|
||||
export function polyfillPerformance() {
|
||||
if (typeof window !== 'undefined' || 'performance' in global) return;
|
||||
((global as Window & typeof globalThis)
|
||||
.performance as unknown) = require('perf_hooks').performance;
|
||||
}
|
||||
|
||||
/**
|
||||
* Polyfill requestAnimationFrame and cancelAnimationFrame for nodejs.
|
||||
*/
|
||||
export function polyfillRAF() {
|
||||
if (typeof window !== 'undefined' || 'requestAnimationFrame' in global)
|
||||
return;
|
||||
|
||||
const FPS = 60,
|
||||
INTERVAL = 1_000 / FPS;
|
||||
let timeoutHandle: NodeJS.Timeout | null = null,
|
||||
rafCount = 0,
|
||||
requests = Object.create(null);
|
||||
|
||||
function onFrameTimer() {
|
||||
const currentRequests = requests;
|
||||
requests = Object.create(null);
|
||||
timeoutHandle = null;
|
||||
Object.keys(currentRequests).forEach(function (id) {
|
||||
const request = currentRequests[id];
|
||||
if (request) request(Date.now());
|
||||
});
|
||||
}
|
||||
|
||||
function requestAnimationFrame(callback: (timestamp: number) => void) {
|
||||
const cbHandle = ++rafCount;
|
||||
requests[cbHandle] = callback;
|
||||
if (timeoutHandle === null)
|
||||
timeoutHandle = setTimeout(onFrameTimer, INTERVAL);
|
||||
return cbHandle;
|
||||
}
|
||||
|
||||
function cancelAnimationFrame(handleId: number) {
|
||||
delete requests[handleId];
|
||||
if (Object.keys(requests).length === 0 && timeoutHandle !== null) {
|
||||
clearTimeout(timeoutHandle);
|
||||
timeoutHandle = null;
|
||||
}
|
||||
}
|
||||
|
||||
(global as Window &
|
||||
typeof globalThis).requestAnimationFrame = requestAnimationFrame;
|
||||
(global as Window &
|
||||
typeof globalThis).cancelAnimationFrame = cancelAnimationFrame;
|
||||
}
|
||||
|
||||
/**
|
||||
* Try to polyfill Event type.
|
||||
* The implementation of Event so far is empty because rrweb doesn't strongly depend on it in nodejs mode.
|
||||
* Note: The Event class is available through the global object from nodejs v15.0.0.
|
||||
*/
|
||||
export function polyfillEvent() {
|
||||
if (typeof Event !== 'undefined') return;
|
||||
(global.Event as unknown) = function () {};
|
||||
}
|
||||
|
||||
/**
|
||||
* Polyfill Node type with RRNode for nodejs.
|
||||
*/
|
||||
export function polyfillNode() {
|
||||
if (typeof Node !== 'undefined') return;
|
||||
(global.Node as unknown) = RRNode;
|
||||
}
|
||||
|
||||
/**
|
||||
* Polyfill document object with RRDocument for nodejs.
|
||||
*/
|
||||
export function polyfillDocument() {
|
||||
if (typeof document !== 'undefined') return;
|
||||
const rrdom = new RRDocument();
|
||||
(() => {
|
||||
rrdom.appendChild(rrdom.createElement('html'));
|
||||
rrdom.documentElement!.appendChild(rrdom.createElement('head'));
|
||||
rrdom.documentElement!.appendChild(rrdom.createElement('body'));
|
||||
})();
|
||||
global.document = (rrdom as unknown) as Document;
|
||||
}
|
||||
@@ -1,450 +0,0 @@
|
||||
import {
|
||||
NodeType as RRNodeType,
|
||||
createMirror as createNodeMirror,
|
||||
} from 'rrweb-snapshot';
|
||||
import type {
|
||||
Mirror as NodeMirror,
|
||||
IMirror,
|
||||
serializedNodeWithId,
|
||||
} from 'rrweb-snapshot';
|
||||
import type {
|
||||
canvasMutationData,
|
||||
canvasEventWithTime,
|
||||
inputData,
|
||||
scrollData,
|
||||
} from 'rrweb/src/types';
|
||||
import {
|
||||
BaseRRNode as RRNode,
|
||||
BaseRRCDATASectionImpl,
|
||||
BaseRRCommentImpl,
|
||||
BaseRRDocumentImpl,
|
||||
BaseRRDocumentTypeImpl,
|
||||
BaseRRElementImpl,
|
||||
BaseRRMediaElementImpl,
|
||||
BaseRRTextImpl,
|
||||
IRRDocument,
|
||||
IRRElement,
|
||||
IRRNode,
|
||||
NodeType,
|
||||
IRRDocumentType,
|
||||
IRRText,
|
||||
IRRComment,
|
||||
} from './document';
|
||||
import type { VirtualStyleRules } from './diff';
|
||||
|
||||
export class RRDocument extends BaseRRDocumentImpl(RRNode) {
|
||||
// In the rrweb replayer, there are some unserialized nodes like the element that stores the injected style rules.
|
||||
// These unserialized nodes may interfere the execution of the diff algorithm.
|
||||
// The id of serialized node is larger than 0. So this value less than 0 is used as id for these unserialized nodes.
|
||||
private _unserializedId = -1;
|
||||
|
||||
/**
|
||||
* Every time the id is used, it will minus 1 automatically to avoid collisions.
|
||||
*/
|
||||
public get unserializedId(): number {
|
||||
return this._unserializedId--;
|
||||
}
|
||||
|
||||
public mirror: Mirror = createMirror();
|
||||
|
||||
public scrollData: scrollData | null = null;
|
||||
|
||||
constructor(mirror?: Mirror) {
|
||||
super();
|
||||
if (mirror) {
|
||||
this.mirror = mirror;
|
||||
}
|
||||
}
|
||||
|
||||
createDocument(
|
||||
_namespace: string | null,
|
||||
_qualifiedName: string | null,
|
||||
_doctype?: DocumentType | null,
|
||||
) {
|
||||
return new RRDocument();
|
||||
}
|
||||
|
||||
createDocumentType(
|
||||
qualifiedName: string,
|
||||
publicId: string,
|
||||
systemId: string,
|
||||
) {
|
||||
const documentTypeNode = new RRDocumentType(
|
||||
qualifiedName,
|
||||
publicId,
|
||||
systemId,
|
||||
);
|
||||
documentTypeNode.ownerDocument = this;
|
||||
return documentTypeNode;
|
||||
}
|
||||
|
||||
createElement<K extends keyof HTMLElementTagNameMap>(
|
||||
tagName: K,
|
||||
): RRElementType<K>;
|
||||
createElement(tagName: string): RRElement;
|
||||
createElement(tagName: string) {
|
||||
const upperTagName = tagName.toUpperCase();
|
||||
let element;
|
||||
switch (upperTagName) {
|
||||
case 'AUDIO':
|
||||
case 'VIDEO':
|
||||
element = new RRMediaElement(upperTagName);
|
||||
break;
|
||||
case 'IFRAME':
|
||||
element = new RRIFrameElement(upperTagName, this.mirror);
|
||||
break;
|
||||
case 'CANVAS':
|
||||
element = new RRCanvasElement(upperTagName);
|
||||
break;
|
||||
case 'STYLE':
|
||||
element = new RRStyleElement(upperTagName);
|
||||
break;
|
||||
default:
|
||||
element = new RRElement(upperTagName);
|
||||
break;
|
||||
}
|
||||
element.ownerDocument = this;
|
||||
return element;
|
||||
}
|
||||
|
||||
createComment(data: string) {
|
||||
const commentNode = new RRComment(data);
|
||||
commentNode.ownerDocument = this;
|
||||
return commentNode;
|
||||
}
|
||||
|
||||
createCDATASection(data: string) {
|
||||
const sectionNode = new RRCDATASection(data);
|
||||
sectionNode.ownerDocument = this;
|
||||
return sectionNode;
|
||||
}
|
||||
|
||||
createTextNode(data: string) {
|
||||
const textNode = new RRText(data);
|
||||
textNode.ownerDocument = this;
|
||||
return textNode;
|
||||
}
|
||||
|
||||
destroyTree() {
|
||||
this.childNodes = [];
|
||||
this.mirror.reset();
|
||||
}
|
||||
|
||||
open() {
|
||||
super.open();
|
||||
this._unserializedId = -1;
|
||||
}
|
||||
}
|
||||
|
||||
export const RRDocumentType = BaseRRDocumentTypeImpl(RRNode);
|
||||
|
||||
export class RRElement extends BaseRRElementImpl(RRNode) {
|
||||
inputData: inputData | null = null;
|
||||
scrollData: scrollData | null = null;
|
||||
}
|
||||
|
||||
export class RRMediaElement extends BaseRRMediaElementImpl(RRElement) {}
|
||||
|
||||
export class RRCanvasElement extends RRElement implements IRRElement {
|
||||
public canvasMutations: {
|
||||
event: canvasEventWithTime;
|
||||
mutation: canvasMutationData;
|
||||
}[] = [];
|
||||
/**
|
||||
* This is a dummy implementation to distinguish RRCanvasElement from real HTMLCanvasElement.
|
||||
*/
|
||||
getContext(): RenderingContext | null {
|
||||
return null;
|
||||
}
|
||||
}
|
||||
|
||||
export class RRStyleElement extends RRElement {
|
||||
public rules: VirtualStyleRules = [];
|
||||
}
|
||||
|
||||
export class RRIFrameElement extends RRElement {
|
||||
contentDocument: RRDocument = new RRDocument();
|
||||
constructor(upperTagName: string, mirror: Mirror) {
|
||||
super(upperTagName);
|
||||
this.contentDocument.mirror = mirror;
|
||||
}
|
||||
}
|
||||
|
||||
export const RRText = BaseRRTextImpl(RRNode);
|
||||
export type RRText = typeof RRText;
|
||||
|
||||
export const RRComment = BaseRRCommentImpl(RRNode);
|
||||
export type RRComment = typeof RRComment;
|
||||
|
||||
export const RRCDATASection = BaseRRCDATASectionImpl(RRNode);
|
||||
export type RRCDATASection = typeof RRCDATASection;
|
||||
|
||||
interface RRElementTagNameMap {
|
||||
audio: RRMediaElement;
|
||||
canvas: RRCanvasElement;
|
||||
iframe: RRIFrameElement;
|
||||
style: RRStyleElement;
|
||||
video: RRMediaElement;
|
||||
}
|
||||
|
||||
type RRElementType<
|
||||
K extends keyof HTMLElementTagNameMap
|
||||
> = K extends keyof RRElementTagNameMap ? RRElementTagNameMap[K] : RRElement;
|
||||
|
||||
function getValidTagName(element: HTMLElement): string {
|
||||
// https://github.com/rrweb-io/rrweb-snapshot/issues/56
|
||||
if (element instanceof HTMLFormElement) {
|
||||
return 'FORM';
|
||||
}
|
||||
return element.tagName.toUpperCase();
|
||||
}
|
||||
|
||||
/**
|
||||
* Build a RRNode from a real Node.
|
||||
* @param node the real Node
|
||||
* @param rrdom the RRDocument
|
||||
* @param domMirror the NodeMirror that records the real document tree
|
||||
* @returns the built RRNode
|
||||
*/
|
||||
export function buildFromNode(
|
||||
node: Node,
|
||||
rrdom: IRRDocument,
|
||||
domMirror: NodeMirror,
|
||||
parentRRNode?: IRRNode | null,
|
||||
): IRRNode | null {
|
||||
let rrNode: IRRNode;
|
||||
|
||||
switch (node.nodeType) {
|
||||
case NodeType.DOCUMENT_NODE:
|
||||
if (parentRRNode && parentRRNode.nodeName === 'IFRAME')
|
||||
rrNode = (parentRRNode as RRIFrameElement).contentDocument;
|
||||
else {
|
||||
rrNode = rrdom;
|
||||
(rrNode as IRRDocument).compatMode = (node as Document).compatMode as
|
||||
| 'BackCompat'
|
||||
| 'CSS1Compat';
|
||||
}
|
||||
break;
|
||||
case NodeType.DOCUMENT_TYPE_NODE:
|
||||
const documentType = (node ) as DocumentType;
|
||||
rrNode = rrdom.createDocumentType(
|
||||
documentType.name,
|
||||
documentType.publicId,
|
||||
documentType.systemId,
|
||||
);
|
||||
break;
|
||||
case NodeType.ELEMENT_NODE:
|
||||
const elementNode = (node ) as HTMLElement;
|
||||
const tagName = getValidTagName(elementNode);
|
||||
rrNode = rrdom.createElement(tagName);
|
||||
const rrElement = rrNode as IRRElement;
|
||||
for (const { name, value } of Array.from(elementNode.attributes)) {
|
||||
rrElement.attributes[name] = value;
|
||||
}
|
||||
elementNode.scrollLeft && (rrElement.scrollLeft = elementNode.scrollLeft);
|
||||
elementNode.scrollTop && (rrElement.scrollTop = elementNode.scrollTop);
|
||||
/**
|
||||
* We don't have to record special values of input elements at the beginning.
|
||||
* Because if these values are changed later, the mutation will be applied through the batched input events on its RRElement after the diff algorithm is executed.
|
||||
*/
|
||||
break;
|
||||
case NodeType.TEXT_NODE:
|
||||
rrNode = rrdom.createTextNode(((node ) as Text).textContent || '');
|
||||
break;
|
||||
case NodeType.CDATA_SECTION_NODE:
|
||||
rrNode = rrdom.createCDATASection(((node ) as CDATASection).data);
|
||||
break;
|
||||
case NodeType.COMMENT_NODE:
|
||||
rrNode = rrdom.createComment(
|
||||
((node ) as Comment).textContent || '',
|
||||
);
|
||||
break;
|
||||
// if node is a shadow root
|
||||
case NodeType.DOCUMENT_FRAGMENT_NODE:
|
||||
rrNode = (parentRRNode as IRRElement).attachShadow({ mode: 'open' });
|
||||
break;
|
||||
default:
|
||||
return null;
|
||||
}
|
||||
|
||||
let sn: serializedNodeWithId | null = domMirror.getMeta(node);
|
||||
|
||||
if (rrdom instanceof RRDocument) {
|
||||
if (!sn) {
|
||||
sn = getDefaultSN(rrNode, rrdom.unserializedId);
|
||||
domMirror.add(node, sn);
|
||||
}
|
||||
rrdom.mirror.add(rrNode, { ...sn });
|
||||
}
|
||||
|
||||
return rrNode;
|
||||
}
|
||||
|
||||
/**
|
||||
* Build a RRDocument from a real document tree.
|
||||
* @param dom the real document tree
|
||||
* @param domMirror the NodeMirror that records the real document tree
|
||||
* @param rrdom the rrdom object to be constructed
|
||||
* @returns the build rrdom
|
||||
*/
|
||||
export function buildFromDom(
|
||||
dom: Document,
|
||||
domMirror: NodeMirror = createNodeMirror(),
|
||||
rrdom: IRRDocument = new RRDocument(),
|
||||
) {
|
||||
function walk(node: Node, parentRRNode: IRRNode | null) {
|
||||
const rrNode = buildFromNode(node, rrdom, domMirror, parentRRNode);
|
||||
if (rrNode === null) return;
|
||||
if (
|
||||
// if the parentRRNode isn't a RRIFrameElement
|
||||
parentRRNode?.nodeName !== 'IFRAME' &&
|
||||
// if node isn't a shadow root
|
||||
node.nodeType !== NodeType.DOCUMENT_FRAGMENT_NODE
|
||||
) {
|
||||
parentRRNode?.appendChild(rrNode);
|
||||
rrNode.parentNode = parentRRNode;
|
||||
rrNode.parentElement = parentRRNode as RRElement;
|
||||
}
|
||||
|
||||
if (node.nodeName === 'IFRAME') {
|
||||
walk((node as HTMLIFrameElement).contentDocument!, rrNode);
|
||||
} else if (
|
||||
node.nodeType === NodeType.DOCUMENT_NODE ||
|
||||
node.nodeType === NodeType.ELEMENT_NODE ||
|
||||
node.nodeType === NodeType.DOCUMENT_FRAGMENT_NODE
|
||||
) {
|
||||
// if the node is a shadow dom
|
||||
if (
|
||||
node.nodeType === NodeType.ELEMENT_NODE &&
|
||||
((node ) as HTMLElement).shadowRoot
|
||||
)
|
||||
walk(((node ) as HTMLElement).shadowRoot!, rrNode);
|
||||
node.childNodes.forEach((childNode) => walk(childNode, rrNode));
|
||||
}
|
||||
}
|
||||
walk(dom, null);
|
||||
return rrdom;
|
||||
}
|
||||
|
||||
export function createMirror(): Mirror {
|
||||
return new Mirror();
|
||||
}
|
||||
|
||||
// based on Mirror from rrweb-snapshots
|
||||
export class Mirror implements IMirror<RRNode> {
|
||||
private idNodeMap: Map<number, RRNode> = new Map();
|
||||
private nodeMetaMap: WeakMap<RRNode, serializedNodeWithId> = new WeakMap();
|
||||
|
||||
getId(n: RRNode | undefined | null): number {
|
||||
if (!n) return -1;
|
||||
|
||||
const id = this.getMeta(n)?.id;
|
||||
|
||||
// if n is not a serialized Node, use -1 as its id.
|
||||
return id ?? -1;
|
||||
}
|
||||
|
||||
getNode(id: number): RRNode | null {
|
||||
return this.idNodeMap.get(id) || null;
|
||||
}
|
||||
|
||||
getIds(): number[] {
|
||||
return Array.from(this.idNodeMap.keys());
|
||||
}
|
||||
|
||||
getMeta(n: RRNode): serializedNodeWithId | null {
|
||||
return this.nodeMetaMap.get(n) || null;
|
||||
}
|
||||
|
||||
// removes the node from idNodeMap
|
||||
// doesn't remove the node from nodeMetaMap
|
||||
removeNodeFromMap(n: RRNode) {
|
||||
const id = this.getId(n);
|
||||
this.idNodeMap.delete(id);
|
||||
|
||||
if (n.childNodes) {
|
||||
n.childNodes.forEach((childNode) => this.removeNodeFromMap(childNode));
|
||||
}
|
||||
}
|
||||
has(id: number): boolean {
|
||||
return this.idNodeMap.has(id);
|
||||
}
|
||||
|
||||
hasNode(node: RRNode): boolean {
|
||||
return this.nodeMetaMap.has(node);
|
||||
}
|
||||
|
||||
add(n: RRNode, meta: serializedNodeWithId) {
|
||||
const id = meta.id;
|
||||
this.idNodeMap.set(id, n);
|
||||
this.nodeMetaMap.set(n, meta);
|
||||
}
|
||||
|
||||
replace(id: number, n: RRNode) {
|
||||
this.idNodeMap.set(id, n);
|
||||
}
|
||||
|
||||
reset() {
|
||||
this.idNodeMap = new Map();
|
||||
this.nodeMetaMap = new WeakMap();
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Get a default serializedNodeWithId value for a RRNode.
|
||||
* @param id the serialized id to assign
|
||||
*/
|
||||
export function getDefaultSN(node: IRRNode, id: number): serializedNodeWithId {
|
||||
switch (node.RRNodeType) {
|
||||
case RRNodeType.Document:
|
||||
return {
|
||||
id,
|
||||
type: node.RRNodeType,
|
||||
childNodes: [],
|
||||
};
|
||||
case RRNodeType.DocumentType:
|
||||
const doctype = node as IRRDocumentType;
|
||||
return {
|
||||
id,
|
||||
type: node.RRNodeType,
|
||||
name: doctype.name,
|
||||
publicId: doctype.publicId,
|
||||
systemId: doctype.systemId,
|
||||
};
|
||||
case RRNodeType.Element:
|
||||
return {
|
||||
id,
|
||||
type: node.RRNodeType,
|
||||
tagName: (node as IRRElement).tagName.toLowerCase(), // In rrweb data, all tagNames are lowercase.
|
||||
attributes: {},
|
||||
childNodes: [],
|
||||
};
|
||||
case RRNodeType.Text:
|
||||
return {
|
||||
id,
|
||||
type: node.RRNodeType,
|
||||
textContent: (node as IRRText).textContent || '',
|
||||
};
|
||||
case RRNodeType.Comment:
|
||||
return {
|
||||
id,
|
||||
type: node.RRNodeType,
|
||||
textContent: (node as IRRComment).textContent || '',
|
||||
};
|
||||
case RRNodeType.CDATA:
|
||||
return {
|
||||
id,
|
||||
type: node.RRNodeType,
|
||||
textContent: '',
|
||||
};
|
||||
}
|
||||
}
|
||||
|
||||
export { RRNode };
|
||||
export {
|
||||
diff,
|
||||
createOrGetNode,
|
||||
StyleRuleType,
|
||||
VirtualStyleRules,
|
||||
ReplayerHandler,
|
||||
} from './diff';
|
||||
Reference in New Issue
Block a user