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
2022-04-06 17:56:39 +02:00
committed by GitHub
parent 539f7c8c06
commit e4f680e8c9
36 changed files with 442 additions and 382 deletions
Download Patch File Download Diff File Expand all files Collapse all files

16
packages/rrweb-snapshot/typings/rebuild.d.ts vendored
View File

@@ -1,19 +1,21 @@
import { serializedNodeWithId, idNodeMap, INode, BuildCache } from './types';
import { serializedNodeWithId, BuildCache } from './types';
import { Mirror } from './utils';
export declare function addHoverClass(cssText: string, cache: BuildCache): string;
export declare function createCache(): BuildCache;
export declare 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;
declare 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;
}): [Node | null, idNodeMap];
mirror: Mirror;
}): Node | null;
export default rebuild;

18
packages/rrweb-snapshot/typings/snapshot.d.ts vendored
View File

@@ -1,13 +1,14 @@
import { serializedNodeWithId, INode, idNodeMap, MaskInputOptions, SlimDOMOptions, DataURLOptions, MaskTextFn, MaskInputFn, KeepIframeSrcFn } from './types';
import { serializedNodeWithId, MaskInputOptions, SlimDOMOptions, DataURLOptions, MaskTextFn, MaskInputFn, KeepIframeSrcFn } from './types';
import { Mirror } from './utils';
export declare const IGNORED_NODE = -2;
export declare function absoluteToStylesheet(cssText: string | null, href: string): string;
export declare function absoluteToDoc(doc: Document, attributeValue: string): string;
export declare function transformAttribute(doc: Document, tagName: string, name: string, value: string): string;
export declare function _isBlockedElement(element: HTMLElement, blockClass: string | RegExp, blockSelector: string | null): boolean;
export declare function needMaskingText(node: Node | null, maskTextClass: string | RegExp, maskTextSelector: string | null): boolean;
export declare function serializeNodeWithId(n: Node | INode, options: {
export declare function serializeNodeWithId(n: Node, options: {
doc: Document;
map: idNodeMap;
mirror: Mirror;
blockClass: string | RegExp;
blockSelector: string | null;
maskTextClass: string | RegExp;
@@ -23,11 +24,12 @@ export declare function serializeNodeWithId(n: Node | INode, options: {
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;
declare function snapshot(n: Document, options?: {
mirror?: Mirror;
blockClass?: string | RegExp;
blockSelector?: string | null;
maskTextClass?: string | RegExp;
@@ -41,11 +43,11 @@ declare function snapshot(n: Document, options?: {
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;
export declare function visitSnapshot(node: serializedNodeWithId, onVisit: (node: serializedNodeWithId) => unknown): void;
export declare function cleanupSnapshot(): void;
export default snapshot;

5
packages/rrweb-snapshot/typings/types.d.ts vendored
View File

@@ -58,9 +58,8 @@ export interface INode extends Node {
export interface ICanvas extends HTMLCanvasElement {
__context: string;
}
export declare type idNodeMap = {
[key: number]: INode;
};
export declare type idNodeMap = Map<number, Node>;
export declare type nodeMetaMap = WeakMap<Node, serializedNodeWithId>;
export declare type MaskInputOptions = Partial<{
color: boolean;
date: boolean;

19
packages/rrweb-snapshot/typings/utils.d.ts vendored
View File

@@ -1,6 +1,21 @@
import { INode, MaskInputFn, MaskInputOptions } from './types';
export declare function isElement(n: Node | INode): n is Element;
import { MaskInputFn, MaskInputOptions, serializedNodeWithId } from './types';
export declare function isElement(n: Node): n is Element;
export declare function isShadowRoot(n: Node): n is ShadowRoot;
export declare class Mirror {
private idNodeMap;
private nodeMetaMap;
getId(n: Node | undefined | null): number;
getNode(id: number): Node | null;
getIds(): number[];
getMeta(n: Node): serializedNodeWithId | null;
removeNodeFromMap(n: Node): void;
has(id: number): boolean;
hasNode(node: Node): boolean;
add(n: Node, meta: serializedNodeWithId): void;
replace(id: number, n: Node): void;
reset(): void;
}
export declare function createMirror(): Mirror;
export declare function maskInputValue({ maskInputOptions, tagName, type, value, maskInputFn, }: {
maskInputOptions: MaskInputOptions;
tagName: string;