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
2022-05-12 06:01:13 +02:00
committed by GitHub
parent 69499be6e2
commit de755ae577
99 changed files with 7087 additions and 2821 deletions
Download Patch File Download Diff File Expand all files Collapse all files

38
packages/rrweb/test/__snapshots__/integration.test.ts.snap
View File

@@ -8362,7 +8362,7 @@ exports[`record integration tests should record console messages 1`] = `
\\"payload\\": {
\\"level\\": \\"assert\\",
\\"trace\\": [
\\"__puppeteer_evaluation_script__:2:37\\"
\\"__puppeteer_evaluation_script__:2:21\\"
],
\\"payload\\": [
\\"true\\",
@@ -8378,7 +8378,7 @@ exports[`record integration tests should record console messages 1`] = `
\\"payload\\": {
\\"level\\": \\"count\\",
\\"trace\\": [
\\"__puppeteer_evaluation_script__:3:37\\"
\\"__puppeteer_evaluation_script__:3:21\\"
],
\\"payload\\": [
\\"\\\\\\"count\\\\\\"\\"
@@ -8393,7 +8393,7 @@ exports[`record integration tests should record console messages 1`] = `
\\"payload\\": {
\\"level\\": \\"countReset\\",
\\"trace\\": [
\\"__puppeteer_evaluation_script__:4:37\\"
\\"__puppeteer_evaluation_script__:4:21\\"
],
\\"payload\\": [
\\"\\\\\\"count\\\\\\"\\"
@@ -8408,7 +8408,7 @@ exports[`record integration tests should record console messages 1`] = `
\\"payload\\": {
\\"level\\": \\"debug\\",
\\"trace\\": [
\\"__puppeteer_evaluation_script__:5:37\\"
\\"__puppeteer_evaluation_script__:5:21\\"
],
\\"payload\\": [
\\"\\\\\\"debug\\\\\\"\\"
@@ -8423,7 +8423,7 @@ exports[`record integration tests should record console messages 1`] = `
\\"payload\\": {
\\"level\\": \\"dir\\",
\\"trace\\": [
\\"__puppeteer_evaluation_script__:6:37\\"
\\"__puppeteer_evaluation_script__:6:21\\"
],
\\"payload\\": [
\\"\\\\\\"dir\\\\\\"\\"
@@ -8438,7 +8438,7 @@ exports[`record integration tests should record console messages 1`] = `
\\"payload\\": {
\\"level\\": \\"dirxml\\",
\\"trace\\": [
\\"__puppeteer_evaluation_script__:7:37\\"
\\"__puppeteer_evaluation_script__:7:21\\"
],
\\"payload\\": [
\\"\\\\\\"dirxml\\\\\\"\\"
@@ -8453,7 +8453,7 @@ exports[`record integration tests should record console messages 1`] = `
\\"payload\\": {
\\"level\\": \\"group\\",
\\"trace\\": [
\\"__puppeteer_evaluation_script__:8:37\\"
\\"__puppeteer_evaluation_script__:8:21\\"
],
\\"payload\\": []
}
@@ -8466,7 +8466,7 @@ exports[`record integration tests should record console messages 1`] = `
\\"payload\\": {
\\"level\\": \\"groupCollapsed\\",
\\"trace\\": [
\\"__puppeteer_evaluation_script__:9:37\\"
\\"__puppeteer_evaluation_script__:9:21\\"
],
\\"payload\\": []
}
@@ -8479,7 +8479,7 @@ exports[`record integration tests should record console messages 1`] = `
\\"payload\\": {
\\"level\\": \\"info\\",
\\"trace\\": [
\\"__puppeteer_evaluation_script__:10:37\\"
\\"__puppeteer_evaluation_script__:10:21\\"
],
\\"payload\\": [
\\"\\\\\\"info\\\\\\"\\"
@@ -8494,7 +8494,7 @@ exports[`record integration tests should record console messages 1`] = `
\\"payload\\": {
\\"level\\": \\"log\\",
\\"trace\\": [
\\"__puppeteer_evaluation_script__:11:37\\"
\\"__puppeteer_evaluation_script__:11:21\\"
],
\\"payload\\": [
\\"\\\\\\"log\\\\\\"\\"
@@ -8509,7 +8509,7 @@ exports[`record integration tests should record console messages 1`] = `
\\"payload\\": {
\\"level\\": \\"table\\",
\\"trace\\": [
\\"__puppeteer_evaluation_script__:12:37\\"
\\"__puppeteer_evaluation_script__:12:21\\"
],
\\"payload\\": [
\\"\\\\\\"table\\\\\\"\\"
@@ -8524,7 +8524,7 @@ exports[`record integration tests should record console messages 1`] = `
\\"payload\\": {
\\"level\\": \\"time\\",
\\"trace\\": [
\\"__puppeteer_evaluation_script__:13:37\\"
\\"__puppeteer_evaluation_script__:13:21\\"
],
\\"payload\\": []
}
@@ -8537,7 +8537,7 @@ exports[`record integration tests should record console messages 1`] = `
\\"payload\\": {
\\"level\\": \\"timeEnd\\",
\\"trace\\": [
\\"__puppeteer_evaluation_script__:14:37\\"
\\"__puppeteer_evaluation_script__:14:21\\"
],
\\"payload\\": []
}
@@ -8550,7 +8550,7 @@ exports[`record integration tests should record console messages 1`] = `
\\"payload\\": {
\\"level\\": \\"timeLog\\",
\\"trace\\": [
\\"__puppeteer_evaluation_script__:15:37\\"
\\"__puppeteer_evaluation_script__:15:21\\"
],
\\"payload\\": []
}
@@ -8563,7 +8563,7 @@ exports[`record integration tests should record console messages 1`] = `
\\"payload\\": {
\\"level\\": \\"trace\\",
\\"trace\\": [
\\"__puppeteer_evaluation_script__:16:37\\"
\\"__puppeteer_evaluation_script__:16:21\\"
],
\\"payload\\": [
\\"\\\\\\"trace\\\\\\"\\"
@@ -8578,7 +8578,7 @@ exports[`record integration tests should record console messages 1`] = `
\\"payload\\": {
\\"level\\": \\"warn\\",
\\"trace\\": [
\\"__puppeteer_evaluation_script__:17:37\\"
\\"__puppeteer_evaluation_script__:17:21\\"
],
\\"payload\\": [
\\"\\\\\\"warn\\\\\\"\\"
@@ -8593,7 +8593,7 @@ exports[`record integration tests should record console messages 1`] = `
\\"payload\\": {
\\"level\\": \\"clear\\",
\\"trace\\": [
\\"__puppeteer_evaluation_script__:18:37\\"
\\"__puppeteer_evaluation_script__:18:21\\"
],
\\"payload\\": []
}
@@ -8606,10 +8606,10 @@ exports[`record integration tests should record console messages 1`] = `
\\"payload\\": {
\\"level\\": \\"log\\",
\\"trace\\": [
\\"__puppeteer_evaluation_script__:19:37\\"
\\"__puppeteer_evaluation_script__:19:21\\"
],
\\"payload\\": [
\\"\\\\\\"TypeError: a message\\\\\\\\n at __puppeteer_evaluation_script__:19:41\\\\\\\\nEnd of stack for Error object\\\\\\"\\"
\\"\\\\\\"TypeError: a message\\\\\\\\n at __puppeteer_evaluation_script__:19:25\\\\\\\\nEnd of stack for Error object\\\\\\"\\"
]
}
}

4
packages/rrweb/test/__snapshots__/replayer.test.ts.snap
View File

@@ -56,7 +56,7 @@ html.rrweb-paused *, html.rrweb-paused ::before, html.rrweb-paused ::after { ani
file-cid-1
@charset \\"utf-8\\";
.css-added-at-500 { padding: 1.3125rem; flex: 0 0 auto; width: 100%; }
.css-added-at-400 { padding: 1.3125rem; flex: 0 0 auto; width: 100%; }
file-cid-2
@@ -64,7 +64,7 @@ file-cid-2
.css-added-at-200-overwritten-at-3000 { opacity: 1; transform: translateX(0px); }
.css-added-at-400-overwritten-at-3000 { border: 1px solid blue; }
.css-added-at-500-overwritten-at-3000 { border: 1px solid blue; }
file-cid-3