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

#853 Second try: fast-forward implementation v2: virtual dom optimization (#895)

Browse Source 
* rrdom: add a diff function for properties

* implement diffChildren function and unit tests

* finish basic functions of diff algorithm

* fix several bugs in the diff algorithm

* replace the virtual parent optimization in applyMutation()

* fix: moveAndHover after the diff algorithm is executed

* replace virtual style map with rrdom

cssom version has to be above 0.5.0 to pass virtual style tests

* fix: failed virtual style tests in replayer.test.ts

* fix: failed polyfill tests caused by nodejs compatibility of different versions

* fix: svg viewBox attribute doesn't work

Cause the attribute viewBox is case sensitive, set value for viewbox doesn't work

* feat: replace treeIndex optimization with rrdom

* fix bug of diffProps and disable smooth scrolling animation in fast-forward mode

* feat: add iframe support

* fix: @rollup/plugin-typescript build errors in rrweb-player

Error: @rollup/plugin-typescript TS1371: This import is never used as a value and must use 'import type' because the 'importsNotUsedAsValues' is set to 'error'

* fix: bug when fast-forward input events and add test for it

* add test for fast-forward scroll events

* fix: custom style rules don't get inserted into some iframe elements

* code style tweak

* fix: enable to diff iframe elements

* fix  the jest error "Unexpected token 'export'"

* try to fix build error of rrweb-player

* correct the attributes definition in rrdom

* fix: custom style rules are not inserted in some iframes

* add support for shadow dom

* add support for MediaInteraction

* add canvas support

* fix unit test error in rrdom

* add support for Text, Comment

* try to refactor RRDom

* refactor RRDom to reduce duplicate code

* rename document-browser to virtual-dom

* increase the test coverage for document.ts and add ownerDocument for it

* Merge branch 'master' into virtual-dom

* add more test for virtual-dom.ts

* use cssstyle in document-nodejs

* fix: bundle error

* improve document-nodejs

* enable to diff scroll positions of an element

* rename rrdom to virtualDom for more readability and make the tree public

* revert unknown change

* improve the css style parser for comments

* improve code style

* update typings

* add handling for the case where legacy_missingNodeRetryMap is not empty

* only import types from rrweb into rrdom

* Apply suggestions from code review

Co-authored-by: Justin Halsall <Juice10@users.noreply.github.com>

* Apply suggestions from code review

* fix building error in rrweb

* add a method setDefaultSN to set a default value for a RRNode's __sn

* fix rrweb test error and bump up other packages

* add support for custom property of css styles

* add a switch for virtual-dom optimization

* Apply suggestions from code review

1. add an enum type for NodeType
2. rename nodeType from rrweb-snapshot to RRNodeType
3. rename notSerializedId to unserializedId
4. add comments for some confusing variables

* adapt changes of #865 to virtual-dom and improve the test case for more coverage

* apply review suggestions

https://github.com/rrweb-io/rrweb/pull/853#pullrequestreview-922474953

* tweak the diff algorithm

* add description of the flag useVirtualDom and remove outdated logConfig

* Remove console.log

* Contain changes to document

* Upgrade rollup to 2.70.2

* Revert "Upgrade rollup to 2.70.2"

This reverts commit b1be81a2a76565935c9dc391f31beb7f64d25956.

* Fix type checking rrdom

* Fix typing error while bundling

* Fix tslib error on build

Rollup would output the following error:
`semantic error TS2343: This syntax requires an imported helper named '__spreadArray' which does not exist in 'tslib'. Consider upgrading your version of 'tslib'.`

* Increase memory limit for rollup

* Use esbuild for bundling

Speeds up bundling significantly

* Avoid circular dependencies and import un-bundled rrdom

* Fix imports

* Revert back to pre-esbuild

This reverts the following commits:
b7b3c8dbaa551a0129da1477136b1baaad28e6e1
72e23b8e27f9030d911358d3a17fe5ad1b3b5d4f
85d600a20c56cfa764cf1f858932ba14e67b1d23
61e1a5d323212ca8fbe0569e0b3062ddd53fc612

* Set node to lts (12 is no longer supported)

* Speed up bundling and use less memory

This fixes the out of memory errors happening while bundling

* remove __sn from rrdom

* fix typo

* test: add a test case for StyleSheet mutation exceptions while fast-forwarding

* rename Array.prototype.slice.call() to Array.from()

* improve test cases

* fix: PR #887 in 'virtual-dom' branch

* apply justin's suggestion on 'Array.from' refactor

related commit 0f6729d27a323260b36fbe79485a86715c0bc98a

* improve import code structure

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 4f2f739d93
commit 2887c8c7e5
99 changed files with 7087 additions and 2821 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -330,7 +330,7 @@ export function buildNodeWithSN(
if (n.rootId) {
console.assert(
(mirror.getNode(n.rootId) as Document) === doc,
'Target document should has the same root id.',
'Target document should have the same root id.',
);
}
// use target document as root document

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

@@ -76,6 +76,28 @@ export interface ICanvas extends HTMLCanvasElement {
__context: string;
}
export interface IMirror<TNode> {
getId(n: TNode | undefined | null): number;
getNode(id: number): TNode | null;
getIds(): number[];
getMeta(n: TNode): serializedNodeWithId | null;
removeNodeFromMap(n: TNode): void;
has(id: number): boolean;
hasNode(node: TNode): boolean;
add(n: TNode, meta: serializedNodeWithId): void;
replace(id: number, n: TNode): void;
reset(): void;
}
export type idNodeMap = Map<number, Node>;
export type nodeMetaMap = WeakMap<Node, serializedNodeWithId>;

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

@@ -3,6 +3,7 @@ import {
MaskInputFn,
MaskInputOptions,
nodeMetaMap,
IMirror,
serializedNodeWithId,
} from './types';
@@ -15,7 +16,7 @@ export function isShadowRoot(n: Node): n is ShadowRoot {
return Boolean(host && host.shadowRoot && host.shadowRoot === n);
}
export class Mirror {
export class Mirror implements IMirror<Node> {
private idNodeMap: idNodeMap = new Map();
private nodeMetaMap: nodeMetaMap = new WeakMap();
@@ -47,7 +48,9 @@ export class Mirror {
this.idNodeMap.delete(id);
if (n.childNodes) {
n.childNodes.forEach((childNode) => this.removeNodeFromMap(childNode));
n.childNodes.forEach((childNode) =>
this.removeNodeFromMap((childNode as unknown) as Node),
);
}
}
has(id: number): boolean {

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

@@ -58,6 +58,18 @@ export interface INode extends Node {
export interface ICanvas extends HTMLCanvasElement {
__context: string;
}
export interface IMirror<TNode> {
getId(n: TNode | undefined | null): number;
getNode(id: number): TNode | null;
getIds(): number[];
getMeta(n: TNode): serializedNodeWithId | null;
removeNodeFromMap(n: TNode): void;
has(id: number): boolean;
hasNode(node: TNode): boolean;
add(n: TNode, meta: serializedNodeWithId): void;
replace(id: number, n: TNode): void;
reset(): void;
}
export declare type idNodeMap = Map<number, Node>;
export declare type nodeMetaMap = WeakMap<Node, serializedNodeWithId>;
export declare type MaskInputOptions = Partial<{

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

@@ -1,7 +1,7 @@
import { MaskInputFn, MaskInputOptions, serializedNodeWithId } from './types';
import { MaskInputFn, MaskInputOptions, IMirror, 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 {
export declare class Mirror implements IMirror<Node> {
private idNodeMap;
private nodeMetaMap;
getId(n: Node | undefined | null): number;