xuguopeng/rrweb
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Remove INode (node.__sn) and use Mirror as source of truth (#868)

Browse Source 
* Move ids to weakmap

* Fix typo

* Move from INode to storing serialized data in mirror

* Update packages/rrweb-snapshot/src/rebuild.ts

Co-authored-by: Yun Feng <yun.feng@anu.edu.au>

* Remove unnessisary `as Node` typecastings

Fixes: https://github.com/rrweb-io/rrweb/pull/868#discussion_r842240758

* Remove unnessisary `as unknown as ...`

* Remove unnessisary `as unknown as ...`

* Reset mirror when recording starts

Solves: https://github.com/rrweb-io/rrweb/pull/868#discussion_r842249599

* API has changed for snapshot, change test to reflect that

* Allow for es5 compatibility

* Remove unnessisary as unknown as ... and change test to reflect the API change

* Refactor mirror to remove `nodeIdMap`

Fixes: https://github.com/rrweb-io/rrweb/pull/868#discussion_r842732696

Co-authored-by: Yun Feng <yun.feng@anu.edu.au>
This commit is contained in:
Justin Halsall
2026-04-01 12:00:00 +08:00
committed by GitHub
parent 65237a5ee9
commit d4f5d8dc48
36 changed files with 442 additions and 382 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
packages/rrweb-snapshot/src/css.ts
View File

@@ -892,7 +892,7 @@ function addParent(obj: Stylesheet, parent?: Stylesheet) {
addParent(v, childParent);
});
} else if (value && typeof value === 'object') {
addParent((value as unknown) as Stylesheet, childParent);
addParent(value as Stylesheet, childParent);
}
}

69
packages/rrweb-snapshot/src/rebuild.ts
View File

@@ -4,11 +4,9 @@ import {
NodeType,
tagMap,
elementNode,
idNodeMap,
INode,
BuildCache,
} from './types';
import { isElement } from './utils';
import { isElement, Mirror } from './utils';
const tagMap: tagMap = {
script: 'noscript',
@@ -215,7 +213,10 @@ function buildNode(
n.attributes.rr_dataURL
) {
// backup original img srcset
node.setAttribute('rrweb-original-srcset', n.attributes.srcset as string);
node.setAttribute(
'rrweb-original-srcset',
n.attributes.srcset as string,
);
} else {
node.setAttribute(name, value);
}
@@ -307,16 +308,16 @@ export function buildNodeWithSN(
n: serializedNodeWithId,
options: {
doc: Document;
map: idNodeMap;
mirror: Mirror;
skipChild?: boolean;
hackCss: boolean;
afterAppend?: (n: INode) => unknown;
afterAppend?: (n: Node) => unknown;
cache: BuildCache;
},
): INode | null {
): Node | null {
const {
doc,
map,
mirror,
skipChild = false,
hackCss = true,
afterAppend,
@@ -328,7 +329,7 @@ export function buildNodeWithSN(
}
if (n.rootId) {
console.assert(
((map[n.rootId] as unknown) as Document) === doc,
(mirror.getNode(n.rootId) as Document) === doc,
'Target document should has the same root id.',
);
}
@@ -362,8 +363,7 @@ export function buildNodeWithSN(
node = doc;
}
(node as INode).__sn = n;
map[n.id] = node as INode;
mirror.add(node, n);
if (
(n.type === NodeType.Document || n.type === NodeType.Element) &&
@@ -372,7 +372,7 @@ export function buildNodeWithSN(
for (const childN of n.childNodes) {
const childNode = buildNodeWithSN(childN, {
doc,
map,
mirror,
skipChild: false,
hackCss,
afterAppend,
@@ -394,27 +394,27 @@ export function buildNodeWithSN(
}
}
return node as INode;
return node;
}
function visit(idNodeMap: idNodeMap, onVisit: (node: INode) => void) {
function walk(node: INode) {
function visit(mirror: Mirror, onVisit: (node: Node) => void) {
function walk(node: Node) {
onVisit(node);
}
for (const key in idNodeMap) {
if (idNodeMap[key]) {
walk(idNodeMap[key]);
for (const id of mirror.getIds()) {
if (mirror.has(id)) {
walk(mirror.getNode(id)!);
}
}
}
function handleScroll(node: INode) {
const n = node.__sn;
if (n.type !== NodeType.Element) {
function handleScroll(node: Node, mirror: Mirror) {
const n = mirror.getMeta(node);
if (n?.type !== NodeType.Element) {
return;
}
const el = (node as Node) as HTMLElement;
const el = node as HTMLElement;
for (const name in n.attributes) {
if (!(n.attributes.hasOwnProperty(name) && name.startsWith('rr_'))) {
continue;
@@ -433,29 +433,36 @@ function rebuild(
n: serializedNodeWithId,
options: {
doc: Document;
onVisit?: (node: INode) => unknown;
onVisit?: (node: Node) => unknown;
hackCss?: boolean;
afterAppend?: (n: INode) => unknown;
afterAppend?: (n: Node) => unknown;
cache: BuildCache;
mirror: Mirror;
},
): [Node | null, idNodeMap] {
const { doc, onVisit, hackCss = true, afterAppend, cache } = options;
const idNodeMap: idNodeMap = {};
): Node | null {
const {
doc,
onVisit,
hackCss = true,
afterAppend,
cache,
mirror = new Mirror(),
} = options;
const node = buildNodeWithSN(n, {
doc,
map: idNodeMap,
mirror,
skipChild: false,
hackCss,
afterAppend,
cache,
});
visit(idNodeMap, (visitedNode) => {
visit(mirror, (visitedNode) => {
if (onVisit) {
onVisit(visitedNode);
}
handleScroll(visitedNode);
handleScroll(visitedNode, mirror);
});
return [node, idNodeMap];
return node;
}
export default rebuild;

110
packages/rrweb-snapshot/src/snapshot.ts
View File

@@ -3,8 +3,6 @@ import {
serializedNodeWithId,
NodeType,
attributes,
INode,
idNodeMap,
MaskInputOptions,
SlimDOMOptions,
DataURLOptions,
@@ -14,6 +12,7 @@ import {
ICanvas,
} from './types';
import {
Mirror,
is2DCanvasBlank,
isElement,
isShadowRoot,
@@ -377,6 +376,7 @@ function serializeNode(
n: Node,
options: {
doc: Document;
mirror: Mirror;
blockClass: string | RegExp;
blockSelector: string | null;
maskTextClass: string | RegExp;
@@ -393,6 +393,7 @@ function serializeNode(
): serializedNode | false {
const {
doc,
mirror,
blockClass,
blockSelector,
maskTextClass,
@@ -408,8 +409,8 @@ function serializeNode(
} = 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;
if (mirror.getMeta(doc)) {
const docId = mirror.getId(doc);
rootId = docId === 1 ? undefined : docId;
}
switch (n.nodeType) {
@@ -786,10 +787,10 @@ function slimDOMExcluded(
}
export function serializeNodeWithId(
n: Node | INode,
n: Node,
options: {
doc: Document;
map: idNodeMap;
mirror: Mirror;
blockClass: string | RegExp;
blockSelector: string | null;
maskTextClass: string | RegExp;
@@ -805,14 +806,17 @@ export function serializeNodeWithId(
inlineImages?: boolean;
recordCanvas?: boolean;
preserveWhiteSpace?: boolean;
onSerialize?: (n: INode) => unknown;
onIframeLoad?: (iframeINode: INode, node: serializedNodeWithId) => unknown;
onSerialize?: (n: Node) => unknown;
onIframeLoad?: (
iframeNode: HTMLIFrameElement,
node: serializedNodeWithId,
) => unknown;
iframeLoadTimeout?: number;
},
): serializedNodeWithId | null {
const {
doc,
map,
mirror,
blockClass,
blockSelector,
maskTextClass,
@@ -834,6 +838,7 @@ export function serializeNodeWithId(
let { preserveWhiteSpace = true } = options;
const _serializedNode = serializeNode(n, {
doc,
mirror,
blockClass,
blockSelector,
maskTextClass,
@@ -853,10 +858,10 @@ export function serializeNodeWithId(
return null;
}
let id;
// Try to reuse the previous id
if ('__sn' in n) {
id = n.__sn.id;
let id: number | undefined;
if (mirror.hasNode(n)) {
// Reuse the previous id
id = mirror.getId(n);
} else if (
slimDOMExcluded(_serializedNode, slimDOMOptions) ||
(!preserveWhiteSpace &&
@@ -868,14 +873,16 @@ export function serializeNodeWithId(
} else {
id = genId();
}
const serializedNode = Object.assign(_serializedNode, { id });
(n as INode).__sn = serializedNode;
if (id === IGNORED_NODE) {
return null; // slimDOM
}
map[id] = n as INode;
const serializedNode = Object.assign(_serializedNode, { id });
mirror.add(n, serializedNode);
if (onSerialize) {
onSerialize(n as INode);
onSerialize(n);
}
let recordChild = !skipChild;
if (serializedNode.type === NodeType.Element) {
@@ -891,15 +898,15 @@ export function serializeNodeWithId(
) {
if (
slimDOMOptions.headWhitespace &&
_serializedNode.type === NodeType.Element &&
_serializedNode.tagName === 'head'
serializedNode.type === NodeType.Element &&
serializedNode.tagName === 'head'
// would impede performance: || getComputedStyle(n)['white-space'] === 'normal'
) {
preserveWhiteSpace = false;
}
const bypassOptions = {
doc,
map,
mirror,
blockClass,
blockSelector,
maskTextClass,
@@ -952,7 +959,7 @@ export function serializeNodeWithId(
if (iframeDoc && onIframeLoad) {
const serializedIframeNode = serializeNodeWithId(iframeDoc, {
doc: iframeDoc,
map,
mirror,
blockClass,
blockSelector,
maskTextClass,
@@ -974,7 +981,7 @@ export function serializeNodeWithId(
});
if (serializedIframeNode) {
onIframeLoad(n as INode, serializedIframeNode);
onIframeLoad(n as HTMLIFrameElement, serializedIframeNode);
}
}
},
@@ -988,6 +995,7 @@ export function serializeNodeWithId(
function snapshot(
n: Document,
options?: {
mirror?: Mirror;
blockClass?: string | RegExp;
blockSelector?: string | null;
maskTextClass?: string | RegExp;
@@ -1001,13 +1009,17 @@ function snapshot(
inlineImages?: boolean;
recordCanvas?: boolean;
preserveWhiteSpace?: boolean;
onSerialize?: (n: INode) => unknown;
onIframeLoad?: (iframeINode: INode, node: serializedNodeWithId) => unknown;
onSerialize?: (n: Node) => unknown;
onIframeLoad?: (
iframeNode: HTMLIFrameElement,
node: serializedNodeWithId,
) => unknown;
iframeLoadTimeout?: number;
keepIframeSrcFn?: KeepIframeSrcFn;
},
): [serializedNodeWithId | null, idNodeMap] {
): serializedNodeWithId | null {
const {
mirror = new Mirror(),
blockClass = 'rr-block',
blockSelector = null,
maskTextClass = 'rr-mask',
@@ -1026,7 +1038,6 @@ function snapshot(
iframeLoadTimeout,
keepIframeSrcFn = () => false,
} = options || {};
const idNodeMap: idNodeMap = {};
const maskInputOptions: MaskInputOptions =
maskAllInputs === true
? {
@@ -1070,31 +1081,28 @@ function snapshot(
: slimDOM === false
? {}
: slimDOM;
return [
serializeNodeWithId(n, {
doc: n,
map: idNodeMap,
blockClass,
blockSelector,
maskTextClass,
maskTextSelector,
skipChild: false,
inlineStylesheet,
maskInputOptions,
maskTextFn,
maskInputFn,
slimDOMOptions,
dataURLOptions,
inlineImages,
recordCanvas,
preserveWhiteSpace,
onSerialize,
onIframeLoad,
iframeLoadTimeout,
keepIframeSrcFn,
}),
idNodeMap,
];
return serializeNodeWithId(n, {
doc: n,
mirror,
blockClass,
blockSelector,
maskTextClass,
maskTextSelector,
skipChild: false,
inlineStylesheet,
maskInputOptions,
maskTextFn,
maskInputFn,
slimDOMOptions,
dataURLOptions,
inlineImages,
recordCanvas,
preserveWhiteSpace,
onSerialize,
onIframeLoad,
iframeLoadTimeout,
keepIframeSrcFn,
});
}
export function visitSnapshot(

7
packages/rrweb-snapshot/src/types.ts
View File

@@ -67,6 +67,7 @@ export type tagMap = {
[key: string]: string;
};
// @deprecated
export interface INode extends Node {
__sn: serializedNodeWithId;
}
@@ -75,9 +76,9 @@ export interface ICanvas extends HTMLCanvasElement {
__context: string;
}
export type idNodeMap = {
[key: number]: INode;
};
export type idNodeMap = Map<number, Node>;
export type nodeMetaMap = WeakMap<Node, serializedNodeWithId>;
export type MaskInputOptions = Partial<{
color: boolean;

73
packages/rrweb-snapshot/src/utils.ts
View File

@@ -1,6 +1,12 @@
import { INode, MaskInputFn, MaskInputOptions } from './types';
import {
idNodeMap,
MaskInputFn,
MaskInputOptions,
nodeMetaMap,
serializedNodeWithId,
} from './types';
export function isElement(n: Node | INode): n is Element {
export function isElement(n: Node): n is Element {
return n.nodeType === n.ELEMENT_NODE;
}
@@ -9,6 +15,69 @@ export function isShadowRoot(n: Node): n is ShadowRoot {
return Boolean(host && host.shadowRoot && host.shadowRoot === n);
}
export class Mirror {
private idNodeMap: idNodeMap = new Map();
private nodeMetaMap: nodeMetaMap = new WeakMap();
getId(n: Node | 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): Node | null {
return this.idNodeMap.get(id) || null;
}
getIds(): number[] {
return Array.from(this.idNodeMap.keys());
}
getMeta(n: Node): serializedNodeWithId | null {
return this.nodeMetaMap.get(n) || null;
}
// removes the node from idNodeMap
// doesn't remove the node from nodeMetaMap
removeNodeFromMap(n: Node) {
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: Node): boolean {
return this.nodeMetaMap.has(node);
}
add(n: Node, meta: serializedNodeWithId) {
const id = meta.id;
this.idNodeMap.set(id, n);
this.nodeMetaMap.set(n, meta);
}
replace(id: number, n: Node) {
this.idNodeMap.set(id, n);
}
reset() {
this.idNodeMap = new Map();
this.nodeMetaMap = new WeakMap();
}
}
export function createMirror(): Mirror {
return new Mirror();
}
export function maskInputValue({
maskInputOptions,
tagName,