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

48
packages/rrweb/test/events/iframe.ts
View File

@@ -486,6 +486,30 @@ const events: eventWithTime[] = [
timestamp: now + 1500,
},
// add iframe five
{
type: EventType.IncrementalSnapshot,
data: {
source: IncrementalSource.Mutation,
texts: [],
attributes: [],
removes: [],
adds: [
{
parentId: 75,
nextId: null,
node: {
type: 2,
tagName: 'iframe',
attributes: { id: 'five' },
childNodes: [],
rootId: 62,
id: 80,
},
},
],
},
timestamp: now + 2000,
},
{
type: EventType.IncrementalSnapshot,
data: {
@@ -550,30 +574,6 @@ const events: eventWithTime[] = [
},
timestamp: now + 2000,
},
{
type: EventType.IncrementalSnapshot,
data: {
source: IncrementalSource.Mutation,
texts: [],
attributes: [],
removes: [],
adds: [
{
parentId: 75,
nextId: null,
node: {
type: 2,
tagName: 'iframe',
attributes: { id: 'five' },
childNodes: [],
rootId: 62,
id: 80,
},
},
],
},
timestamp: now + 2000,
},
// remove the html element of iframe four
{
type: EventType.IncrementalSnapshot,

215
packages/rrweb/test/events/input.ts Normal file
View File

@@ -0,0 +1,215 @@
import { EventType, eventWithTime, IncrementalSource } from '../../src/types';
const now = Date.now();
const events: eventWithTime[] = [
{
type: EventType.DomContentLoaded,
data: {},
timestamp: now,
},
{
type: EventType.Load,
data: {},
timestamp: now + 100,
},
{
type: EventType.Meta,
data: {
href: 'http://localhost',
width: 1000,
height: 800,
},
timestamp: now + 100,
},
// full snapshot:
{
data: {
node: {
id: 1,
type: 0,
childNodes: [
{ id: 2, name: 'html', type: 1, publicId: '', systemId: '' },
{
id: 3,
type: 2,
tagName: 'html',
attributes: { lang: 'en' },
childNodes: [
{
id: 4,
type: 2,
tagName: 'head',
attributes: {},
childNodes: [],
},
{
id: 5,
type: 2,
tagName: 'body',
attributes: {},
childNodes: [],
},
],
},
],
},
initialOffset: { top: 0, left: 0 },
},
type: EventType.FullSnapshot,
timestamp: now + 100,
},
// mutation that adds select elements
{
type: EventType.IncrementalSnapshot,
data: {
source: IncrementalSource.Mutation,
texts: [],
attributes: [],
removes: [],
adds: [
{
parentId: 5,
nextId: null,
node: {
type: 2,
tagName: 'select',
childNodes: [],
id: 26,
},
},
{
parentId: 26,
nextId: null,
node: {
type: 2,
tagName: 'option',
attributes: { value: 'valueC' },
childNodes: [],
id: 27,
},
},
{
parentId: 27,
nextId: null,
node: { type: 3, textContent: 'C', id: 28 },
},
{
parentId: 26,
nextId: 27,
node: {
type: 2,
tagName: 'option',
attributes: { value: 'valueB', selected: true },
childNodes: [],
id: 29,
},
},
{
parentId: 26,
nextId: 29,
node: {
type: 2,
tagName: 'option',
attributes: { value: 'valueA' },
childNodes: [],
id: 30,
},
},
{
parentId: 30,
nextId: null,
node: { type: 3, textContent: 'A', id: 31 },
},
{
parentId: 29,
nextId: null,
node: { type: 3, textContent: 'B', id: 32 },
},
],
},
timestamp: now + 1000,
},
// input event
{
type: EventType.IncrementalSnapshot,
data: {
source: IncrementalSource.Input,
text: 'valueA',
isChecked: false,
id: 26,
},
timestamp: now + 1500,
},
// input event
{
type: EventType.IncrementalSnapshot,
data: {
source: IncrementalSource.Input,
text: 'valueC',
isChecked: false,
id: 26,
},
timestamp: now + 2000,
},
// mutation that adds an input element
{
type: EventType.IncrementalSnapshot,
data: {
source: IncrementalSource.Mutation,
texts: [],
attributes: [],
removes: [],
adds: [
{
parentId: 5,
nextId: null,
node: {
type: 2,
tagName: 'input',
attributes: {},
childNodes: [],
id: 33,
},
},
],
},
timestamp: now + 2500,
},
// an input event
{
type: EventType.IncrementalSnapshot,
data: {
source: IncrementalSource.Input,
text: 'test input',
isChecked: false,
id: 33,
},
timestamp: now + 3000,
},
// remove the select element
{
type: EventType.IncrementalSnapshot,
data: {
source: IncrementalSource.Mutation,
texts: [],
attributes: [],
removes: [{ parentId: 5, id: 26 }],
adds: [],
},
timestamp: now + 3500,
},
// remove the input element
{
type: EventType.IncrementalSnapshot,
data: {
source: IncrementalSource.Mutation,
texts: [],
attributes: [],
removes: [{ parentId: 5, id: 33 }],
adds: [],
},
timestamp: now + 4000,
},
];
export default events;

128
packages/rrweb/test/events/scroll.ts Normal file
View File

@@ -0,0 +1,128 @@
import { EventType, eventWithTime, IncrementalSource } from '../../src/types';
const now = Date.now();
const events: eventWithTime[] = [
{
type: EventType.DomContentLoaded,
data: {},
timestamp: now,
},
{
type: EventType.Load,
data: {},
timestamp: now + 100,
},
{
type: EventType.Meta,
data: {
href: 'http://localhost',
width: 1200,
height: 500,
},
timestamp: now + 100,
},
// full snapshot:
{
data: {
node: {
id: 1,
type: 0,
childNodes: [
{ id: 2, name: 'html', type: 1, publicId: '', systemId: '' },
{
id: 3,
type: 2,
tagName: 'html',
attributes: { lang: 'en' },
childNodes: [
{
id: 4,
type: 2,
tagName: 'head',
attributes: {},
childNodes: [],
},
{
id: 5,
type: 2,
tagName: 'body',
attributes: {},
childNodes: [],
},
],
},
],
},
initialOffset: { top: 0, left: 0 },
},
type: EventType.FullSnapshot,
timestamp: now + 100,
},
// mutation that adds two div elements
{
type: EventType.IncrementalSnapshot,
data: {
source: IncrementalSource.Mutation,
texts: [],
attributes: [],
removes: [],
adds: [
{
parentId: 5,
nextId: null,
node: {
type: 2,
tagName: 'div',
attributes: {
id: 'container',
style: 'height: 1000px; overflow: scroll;',
},
childNodes: [],
id: 6,
},
},
{
parentId: 6,
nextId: null,
node: {
type: 2,
tagName: 'div',
attributes: {
id: 'block',
style: 'height: 10000px; background-color: yellow;',
},
childNodes: [],
id: 7,
},
},
],
},
timestamp: now + 500,
},
// scroll event on the "#container" div
{
type: EventType.IncrementalSnapshot,
data: { source: IncrementalSource.Scroll, id: 6, x: 0, y: 2500 },
timestamp: now + 1000,
},
// scroll event on document
{
type: EventType.IncrementalSnapshot,
data: { source: IncrementalSource.Scroll, id: 1, x: 0, y: 250 },
timestamp: now + 1500,
},
// remove the "#container" div
{
type: EventType.IncrementalSnapshot,
data: {
source: IncrementalSource.Mutation,
texts: [],
attributes: [],
removes: [{ parentId: 5, id: 6 }],
adds: [],
},
timestamp: now + 2000,
},
];
export default events;

172
packages/rrweb/test/events/shadow-dom.ts Normal file
View File

@@ -0,0 +1,172 @@
import { EventType, eventWithTime, IncrementalSource } from '../../src/types';
const now = Date.now();
const events: eventWithTime[] = [
{
type: EventType.DomContentLoaded,
data: {},
timestamp: now,
},
{
type: EventType.Load,
data: {},
timestamp: now + 100,
},
{
type: EventType.Meta,
data: {
href: 'http://localhost',
width: 1200,
height: 500,
},
timestamp: now + 100,
},
{
type: EventType.FullSnapshot,
data: {
node: {
id: 1,
type: 0,
childNodes: [
{ id: 2, name: 'html', type: 1, publicId: '', systemId: '' },
{
id: 3,
type: 2,
tagName: 'html',
attributes: { lang: 'en' },
childNodes: [
{
id: 4,
type: 2,
tagName: 'head',
attributes: {},
childNodes: [],
},
{
id: 5,
type: 2,
tagName: 'body',
attributes: {},
childNodes: [],
},
],
},
],
},
initialOffset: { top: 0, left: 0 },
},
timestamp: now + 200,
},
// add shadow dom elements
{
type: EventType.IncrementalSnapshot,
data: {
source: IncrementalSource.Mutation,
texts: [],
attributes: [],
removes: [],
adds: [
{
parentId: 5,
nextId: null,
node: {
type: 2,
tagName: 'div',
attributes: {},
childNodes: [],
id: 6,
isShadowHost: true,
},
},
],
},
timestamp: now + 500,
},
{
type: EventType.IncrementalSnapshot,
data: {
source: IncrementalSource.Mutation,
texts: [],
attributes: [],
removes: [],
adds: [
{
parentId: 6,
nextId: null,
node: {
type: 2,
tagName: 'span',
attributes: {},
childNodes: [],
id: 7,
isShadow: true,
},
},
{
parentId: 7,
nextId: null,
node: { type: 3, textContent: 'shadow dom one', id: 8 },
},
],
},
timestamp: now + 500,
},
// add nested shadow dom elements
{
type: EventType.IncrementalSnapshot,
data: {
source: IncrementalSource.Mutation,
texts: [],
attributes: [],
removes: [],
adds: [
{
parentId: 6,
nextId: null,
node: {
type: 2,
tagName: 'div',
attributes: {},
childNodes: [],
id: 9,
isShadow: true,
isShadowHost: true,
},
},
],
},
timestamp: now + 1000,
},
{
type: EventType.IncrementalSnapshot,
data: {
source: IncrementalSource.Mutation,
texts: [],
attributes: [],
removes: [],
adds: [
{
parentId: 9,
nextId: null,
node: {
type: 2,
tagName: 'span',
attributes: {},
childNodes: [],
id: 10,
isShadow: true,
},
},
{
parentId: 10,
nextId: null,
node: { type: 3, textContent: 'shadow dom two', id: 11 },
},
],
},
timestamp: now + 1000,
},
];
export default events;

34
packages/rrweb/test/events/style-sheet-rule-events.ts
View File

@@ -105,22 +105,6 @@ const events: eventWithTime[] = [
type: EventType.FullSnapshot,
timestamp: now + 100,
},
// mutation that adds style rule to existing stylesheet
{
data: {
id: 101,
adds: [
{
rule:
'.css-added-at-400-overwritten-at-3000 {border: 1px solid blue;}',
index: 1,
},
],
source: IncrementalSource.StyleSheetRule,
},
type: EventType.IncrementalSnapshot,
timestamp: now + 400,
},
// mutation that adds stylesheet
{
data: {
@@ -142,7 +126,7 @@ const events: eventWithTime[] = [
type: 3,
isStyle: true,
textContent:
'\n.css-added-at-500 {\n padding: 1.3125rem;\n flex: none;\n width: 100%;\n}\n',
'\n.css-added-at-400 {\n padding: 1.3125rem;\n flex: none;\n width: 100%;\n}\n',
},
nextId: null,
parentId: 255,
@@ -154,6 +138,22 @@ const events: eventWithTime[] = [
attributes: [],
},
type: EventType.IncrementalSnapshot,
timestamp: now + 400,
},
// mutation that adds style rule to existing stylesheet
{
data: {
id: 101,
adds: [
{
rule:
'.css-added-at-500-overwritten-at-3000 {border: 1px solid blue;}',
index: 1,
},
],
source: IncrementalSource.StyleSheetRule,
},
type: EventType.IncrementalSnapshot,
timestamp: now + 500,
},
// adds StyleSheetRule

178
packages/rrweb/test/events/style-sheet-text-mutation.ts Normal file
View File

@@ -0,0 +1,178 @@
import { EventType, eventWithTime, IncrementalSource } from '../../src/types';
const now = Date.now();
const events: eventWithTime[] = [
{
type: EventType.DomContentLoaded,
data: {},
timestamp: now,
},
{
type: EventType.Load,
data: {},
timestamp: now + 100,
},
{
type: EventType.Meta,
data: {
href: 'http://localhost',
width: 1000,
height: 800,
},
timestamp: now + 100,
},
// full snapshot
{
data: {
node: {
id: 1,
type: 0,
childNodes: [
{ id: 2, name: 'html', type: 1, publicId: '', systemId: '' },
{
id: 3,
type: 2,
tagName: 'html',
attributes: { lang: 'en' },
childNodes: [
{
id: 4,
type: 2,
tagName: 'head',
attributes: {},
childNodes: [
{
id: 101,
type: 2,
tagName: 'style',
attributes: {},
childNodes: [
{
id: 102,
type: 3,
isStyle: true,
textContent: '\n.css-added-at-100 {color: yellow;}\n',
},
],
},
],
},
{
id: 107,
type: 2,
tagName: 'body',
attributes: {},
childNodes: [],
},
],
},
],
},
initialOffset: { top: 0, left: 0 },
},
type: EventType.FullSnapshot,
timestamp: now + 100,
},
// mutation that adds an element
{
data: {
adds: [
{
node: {
id: 108,
type: 2,
tagName: 'div',
attributes: {},
childNodes: [],
},
nextId: null,
parentId: 107,
},
],
texts: [],
source: IncrementalSource.Mutation,
removes: [],
attributes: [],
},
type: EventType.IncrementalSnapshot,
timestamp: now + 500,
},
// adds a StyleSheetRule by inserting
{
data: {
id: 101,
adds: [
{
rule: '.css-added-at-1000-overwritten-at-1500 {color:red;}',
},
],
source: IncrementalSource.StyleSheetRule,
},
type: EventType.IncrementalSnapshot,
timestamp: now + 1000,
},
// adds a StyleSheetRule by adding a text
{
data: {
adds: [
{
node: {
type: 3,
textContent: '.css-added-at-1500-deleted-at-2500 {color: yellow;}',
id: 109,
},
nextId: null,
parentId: 101,
},
],
texts: [],
source: IncrementalSource.Mutation,
removes: [],
attributes: [],
},
type: EventType.IncrementalSnapshot,
timestamp: now + 1500,
},
// adds a StyleSheetRule by inserting
{
data: {
id: 101,
adds: [
{
rule: '.css-added-at-2000-overwritten-at-2500 {color: blue;}',
},
],
source: IncrementalSource.StyleSheetRule,
},
type: EventType.IncrementalSnapshot,
timestamp: now + 2000,
},
// deletes a StyleSheetRule by removing the text
{
data: {
texts: [],
attributes: [],
removes: [{ parentId: 101, id: 109 }],
adds: [],
source: IncrementalSource.Mutation,
},
type: EventType.IncrementalSnapshot,
timestamp: now + 2500,
},
// adds a StyleSheetRule by inserting
{
data: {
id: 101,
adds: [
{
rule: '.css-added-at-3000 {color: red;}',
},
],
source: IncrementalSource.StyleSheetRule,
},
type: EventType.IncrementalSnapshot,
timestamp: now + 3000,
},
];
export default events;