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

* 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>

packages/rrweb/typings/replay/canvas/2d.d.ts

@@ -1,5 +1,5 @@
-import { Replayer } from '../';
-import { canvasMutationCommand } from '../../types';
+import type { Replayer } from '../';
+import type { canvasMutationCommand } from '../../types';
 export default function canvasMutation({ event, mutation, target, imageMap, errorHandler, }: {
     event: Parameters<Replayer['applyIncremental']>[0];
     mutation: canvasMutationCommand;

packages/rrweb/typings/replay/canvas/deserialize-args.d.ts

@@ -1,5 +1,5 @@
 import type { Replayer } from '../';
-import { CanvasArg, SerializedCanvasArg } from '../../types';
+import type { CanvasArg, SerializedCanvasArg } from '../../types';
 export declare function variableListFor(ctx: CanvasRenderingContext2D | WebGLRenderingContext | WebGL2RenderingContext, ctor: string): any[];
 export declare function isSerializedArg(arg: unknown): arg is SerializedCanvasArg;
 export declare function deserializeArg(imageMap: Replayer['imageMap'], ctx: CanvasRenderingContext2D | WebGLRenderingContext | WebGL2RenderingContext | null, preload?: {

packages/rrweb/typings/replay/canvas/index.d.ts

@@ -1,4 +1,4 @@
-import { Replayer } from '..';
+import type { Replayer } from '..';
 import { canvasMutationData } from '../../types';
 export default function canvasMutation({ event, mutation, target, imageMap, canvasEventMap, errorHandler, }: {
     event: Parameters<Replayer['applyIncremental']>[0];

packages/rrweb/typings/replay/index.d.ts

@@ -1,4 +1,5 @@
 import { Mirror } from 'rrweb-snapshot';
+import { RRDocument } from 'rrdom/es/virtual-dom';
 import { Timer } from './timer';
 import { createPlayerService, createSpeedService } from './machine';
 import { eventWithTime, playerConfig, playerMetaData, Handler } from '../types';
@@ -10,16 +11,14 @@ export declare class Replayer {
     speedService: ReturnType<typeof createSpeedService>;
     get timer(): Timer;
     config: playerConfig;
+    usingVirtualDom: boolean;
+    virtualDom: RRDocument;
     private mouse;
     private mouseTail;
     private tailPositions;
     private emitter;
     private nextUserInteractionEvent;
     private legacy_missingNodeRetryMap;
-    private treeIndex;
-    private fragmentParentMap;
-    private elementStateMap;
-    private virtualStyleRulesMap;
     private cache;
     private imageMap;
     private canvasEventMap;
@@ -62,17 +61,12 @@ export declare class Replayer {
     private applyMutation;
     private applyScroll;
     private applyInput;
-    private applyText;
     private legacy_resolveMissingNode;
     private moveAndHover;
     private drawMouseTail;
     private hoverElements;
     private isUserInteraction;
     private backToNormal;
-    private restoreRealParent;
-    private storeState;
-    private restoreState;
-    private restoreNodeSheet;
     private warnNodeNotFound;
     private warnCanvasMutationFailed;
     private debugNodeNotFound;

packages/rrweb/typings/replay/virtual-styles.d.ts

@@ -1,42 +0,0 @@
-export declare enum StyleRuleType {
-    Insert = 0,
-    Remove = 1,
-    Snapshot = 2,
-    SetProperty = 3,
-    RemoveProperty = 4
-}
-declare type InsertRule = {
-    cssText: string;
-    type: StyleRuleType.Insert;
-    index?: number | number[];
-};
-declare type RemoveRule = {
-    type: StyleRuleType.Remove;
-    index: number | number[];
-};
-declare type SnapshotRule = {
-    type: StyleRuleType.Snapshot;
-    cssTexts: string[];
-};
-declare type SetPropertyRule = {
-    type: StyleRuleType.SetProperty;
-    index: number[];
-    property: string;
-    value: string | null;
-    priority: string | undefined;
-};
-declare type RemovePropertyRule = {
-    type: StyleRuleType.RemoveProperty;
-    index: number[];
-    property: string;
-};
-export declare type VirtualStyleRules = Array<InsertRule | RemoveRule | SnapshotRule | SetPropertyRule | RemovePropertyRule>;
-export declare type VirtualStyleRulesMap = Map<Node, VirtualStyleRules>;
-export declare function getNestedRule(rules: CSSRuleList, position: number[]): CSSGroupingRule;
-export declare function getPositionsAndIndex(nestedIndex: number[]): {
-    positions: number[];
-    index: number | undefined;
-};
-export declare function applyVirtualStyleRulesToNode(storedRules: VirtualStyleRules, styleNode: HTMLStyleElement): void;
-export declare function storeCSSRules(parentElement: HTMLStyleElement, virtualStyleRulesMap: VirtualStyleRulesMap): void;
-export {};