#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/jest.config.js

@@ -5,5 +5,6 @@ module.exports = {
   testMatch: ['**/**.test.ts'],
   moduleNameMapper: {
     '\\.css$': 'identity-obj-proxy',
+    'rrdom/es/(.*)': 'rrdom/lib/$1',
   },
 };

packages/rrweb/package.json

@@ -46,12 +46,12 @@
     "@types/inquirer": "0.0.43",
     "@types/jest": "^27.4.1",
     "@types/jest-image-snapshot": "^4.3.1",
-    "@types/jsdom": "^16.2.14",
     "@types/node": "^17.0.21",
     "@types/offscreencanvas": "^2019.6.4",
     "@types/prettier": "^2.3.2",
     "@types/puppeteer": "^5.4.4",
     "cross-env": "^5.2.0",
+    "esbuild": "^0.14.38",
     "fast-mhtml": "^1.1.9",
     "identity-obj-proxy": "^3.0.0",
     "ignore-styles": "^5.0.1",
@@ -59,14 +59,12 @@
     "jest": "^27.5.1",
     "jest-image-snapshot": "^4.5.1",
     "jest-snapshot": "^23.6.0",
-    "jsdom": "^17.0.0",
-    "jsdom-global": "^3.0.2",
     "prettier": "2.2.1",
     "puppeteer": "^9.1.1",
     "rollup": "^2.68.0",
+    "rollup-plugin-esbuild": "^4.9.1",
     "rollup-plugin-postcss": "^3.1.1",
     "rollup-plugin-rename-node-modules": "^1.3.1",
-    "rollup-plugin-terser": "^7.0.2",
     "rollup-plugin-typescript2": "^0.31.2",
     "rollup-plugin-web-worker-loader": "^1.6.1",
     "ts-jest": "^27.1.3",
@@ -81,6 +79,7 @@
     "base64-arraybuffer": "^1.0.1",
     "fflate": "^0.4.4",
     "mitt": "^1.1.3",
+    "rrdom": "^0.1.2",
     "rrweb-snapshot": "^1.1.14"
   }
 }

packages/rrweb/rollup.config.js

@@ -1,6 +1,6 @@
 import typescript from 'rollup-plugin-typescript2';
+import esbuild from 'rollup-plugin-esbuild';
 import resolve from '@rollup/plugin-node-resolve';
-import { terser } from 'rollup-plugin-terser';
 import postcss from 'rollup-plugin-postcss';
 import renameNodeModules from 'rollup-plugin-rename-node-modules';
 import webWorkerLoader from 'rollup-plugin-web-worker-loader';
@@ -108,10 +108,34 @@ const baseConfigs = [
 
 let configs = [];
 
+function getPlugins(options = {}) {
+  const { minify = false, sourceMap = false } = options;
+  return [
+    resolve({ browser: true }),
+    webWorkerLoader({
+      targetPlatform: 'browser',
+      inline: true,
+      sourceMap,
+    }),
+    esbuild({
+      minify,
+    }),
+    postcss({
+      extract: false,
+      inject: false,
+      minimize: minify,
+      sourceMap,
+    }),
+  ];
+}
+
 for (const c of baseConfigs) {
   const basePlugins = [
     resolve({ browser: true }),
+
+    // supports bundling `web-worker:..filename`
     webWorkerLoader(),
+
     typescript(),
   ];
   const plugins = basePlugins.concat(
@@ -123,7 +147,7 @@ for (const c of baseConfigs) {
   // browser
   configs.push({
     input: c.input,
-    plugins,
+    plugins: getPlugins(),
     output: [
       {
         name: c.name,
@@ -135,14 +159,7 @@ for (const c of baseConfigs) {
   // browser + minify
   configs.push({
     input: c.input,
-    plugins: basePlugins.concat(
-      postcss({
-        extract: true,
-        minimize: true,
-        sourceMap: true,
-      }),
-      terser(),
-    ),
+    plugins: getPlugins({ minify: true, sourceMap: true }),
     output: [
       {
         name: c.name,
@@ -197,23 +214,9 @@ if (process.env.BROWSER_ONLY) {
   configs = [];
 
   for (const c of browserOnlyBaseConfigs) {
-    const plugins = [
-      resolve({ browser: true }),
-      webWorkerLoader(),
-      typescript({
-        outDir: null,
-      }),
-      postcss({
-        extract: false,
-        inject: false,
-        sourceMap: true,
-      }),
-      terser(),
-    ];
-
     configs.push({
       input: c.input,
-      plugins,
+      plugins: getPlugins({ sourceMap: true, minify: true }),
       output: [
         {
           name: c.name,

packages/rrweb/src/packer/base.ts

@@ -1,4 +1,4 @@
-import { eventWithTime } from '../types';
+import type { eventWithTime } from '../types';
 
 export type PackFn = (event: eventWithTime) => string;
 export type UnpackFn = (raw: string) => eventWithTime;

packages/rrweb/src/packer/unpack.ts

@@ -1,6 +1,6 @@
 import { strFromU8, strToU8, unzlibSync } from 'fflate';
 import { UnpackFn, eventWithTimeAndPacker, MARK } from './base';
-import { eventWithTime } from '../types';
+import type { eventWithTime } from '../types';
 
 export const unpack: UnpackFn = (raw: string) => {
   if (typeof raw !== 'string') {
@@ -16,7 +16,7 @@ export const unpack: UnpackFn = (raw: string) => {
   }
   try {
     const e: eventWithTimeAndPacker = JSON.parse(
-      strFromU8(unzlibSync(strToU8(raw, true)))
+      strFromU8(unzlibSync(strToU8(raw, true))),
     );
     if (e.v === MARK) {
       return e;

packages/rrweb/src/plugins/console/record/index.ts

@@ -1,4 +1,4 @@
-import { listenerHandler, RecordPlugin, IWindow } from '../../../types';
+import type { listenerHandler, RecordPlugin, IWindow } from '../../../types';
 import { patch } from '../../../utils';
 import { ErrorStackParser, StackFrame } from './error-stack-parser';
 import { stringify } from './stringify';

packages/rrweb/src/plugins/console/record/stringify.ts

@@ -4,7 +4,7 @@
  *
  */
 
-import { StringifyOptions } from './index';
+import type { StringifyOptions } from './index';
 
 /**
  * transfer the node path in Event to string

packages/rrweb/src/plugins/sequential-id/record/index.ts

@@ -1,4 +1,4 @@
-import { RecordPlugin } from '../../../types';
+import type { RecordPlugin } from '../../../types';
 
 export type SequentialIdOptions = {
   key: string;

packages/rrweb/src/plugins/sequential-id/replay/index.ts

@@ -1,5 +1,5 @@
 import type { SequentialIdOptions } from '../record';
-import { ReplayPlugin, eventWithTime } from '../../../types';
+import type { ReplayPlugin, eventWithTime } from '../../../types';
 
 type Options = SequentialIdOptions & {
   warnOnMissingId: boolean;

packages/rrweb/src/record/iframe-manager.ts

@@ -1,5 +1,5 @@
-import { Mirror, serializedNodeWithId } from 'rrweb-snapshot';
-import { mutationCallBack } from '../types';
+import type { Mirror, serializedNodeWithId } from 'rrweb-snapshot';
+import type { mutationCallBack } from '../types';
 
 export class IframeManager {
   private iframes: WeakMap<HTMLIFrameElement, true> = new WeakMap();

packages/rrweb/src/record/mutation.ts

@@ -7,7 +7,7 @@ import {
   maskInputValue,
   Mirror,
 } from 'rrweb-snapshot';
-import {
+import type {
   mutationRecord,
   textCursor,
   attributeCursor,
@@ -298,7 +298,7 @@ export default class MutationBuffer {
         inlineImages: this.inlineImages,
         onSerialize: (currentN) => {
           if (isSerializedIframe(currentN, this.mirror)) {
-            this.iframeManager.addIframe(currentN);
+            this.iframeManager.addIframe(currentN as HTMLIFrameElement);
           }
           if (hasShadowRoot(n)) {
             this.shadowDomManager.addShadowRoot(n.shadowRoot, document);
@@ -322,7 +322,7 @@ export default class MutationBuffer {
       this.mirror.removeNodeFromMap(this.mapRemoves.shift()!);
     }
 
-    for (const n of this.movedSet) {
+    for (const n of Array.from(this.movedSet.values())) {
       if (
         isParentRemoved(this.removes, n, this.mirror) &&
         !this.movedSet.has(n.parentNode!)
@@ -332,7 +332,7 @@ export default class MutationBuffer {
       pushAdd(n);
     }
 
-    for (const n of this.addedSet) {
+    for (const n of Array.from(this.addedSet.values())) {
       if (
         !isAncestorInSet(this.droppedSet, n) &&
         !isParentRemoved(this.removes, n, this.mirror)

packages/rrweb/src/record/observer.ts

@@ -1,5 +1,5 @@
 import { MaskInputOptions, maskInputValue } from 'rrweb-snapshot';
-import { FontFaceSet } from 'css-font-loading-module';
+import type { FontFaceSet } from 'css-font-loading-module';
 import {
   throttle,
   on,
@@ -108,9 +108,9 @@ export function initMutationObserver(
       typeof MutationObserver
     >)[angularZoneSymbol];
   }
-  const observer = new mutationObserverCtor(
-    mutationBuffer.processMutations.bind(mutationBuffer),
-  );
+  const observer = new (mutationObserverCtor as new (
+    callback: MutationCallback,
+  ) => MutationObserver)(mutationBuffer.processMutations.bind(mutationBuffer));
   observer.observe(rootEl, {
     attributes: true,
     attributeOldValue: true,

packages/rrweb/src/record/observers/canvas/2d.ts

@@ -1,4 +1,4 @@
-import { Mirror } from 'rrweb-snapshot';
+import type { Mirror } from 'rrweb-snapshot';
 import {
   blockClass,
   CanvasContext,

packages/rrweb/src/record/observers/canvas/canvas-manager.ts

@@ -1,7 +1,6 @@
-import { ICanvas, Mirror } from 'rrweb-snapshot';
-import {
+import type { ICanvas, Mirror } from 'rrweb-snapshot';
+import type {
   blockClass,
-  CanvasContext,
   canvasManagerMutationCallback,
   canvasMutationCallback,
   canvasMutationCommand,
@@ -10,11 +9,12 @@ import {
   listenerHandler,
   CanvasArg,
 } from '../../../types';
+import { CanvasContext } from '../../../types';
 import initCanvas2DMutationObserver from './2d';
 import initCanvasContextObserver from './canvas';
 import initCanvasWebGLMutationObserver from './webgl';
 import ImageBitmapDataURLWorker from 'web-worker:../../workers/image-bitmap-data-url-worker.ts';
-import { ImageBitmapDataURLRequestWorker } from '../../workers/image-bitmap-data-url-worker';
+import type { ImageBitmapDataURLRequestWorker } from '../../workers/image-bitmap-data-url-worker';
 
 export type RafStamps = { latestId: number; invokeId: number | null };
 

packages/rrweb/src/record/observers/canvas/canvas.ts

@@ -1,5 +1,5 @@
-import { ICanvas } from 'rrweb-snapshot';
-import { blockClass, IWindow, listenerHandler } from '../../../types';
+import type { ICanvas } from 'rrweb-snapshot';
+import type { blockClass, IWindow, listenerHandler } from '../../../types';
 import { isBlocked, patch } from '../../../utils';
 
 export default function initCanvasContextObserver(

packages/rrweb/src/record/observers/canvas/serialize-args.ts

@@ -1,5 +1,5 @@
 import { encode } from 'base64-arraybuffer';
-import { IWindow, CanvasArg } from '../../../types';
+import type { IWindow, CanvasArg } from '../../../types';
 
 // TODO: unify with `replay/webgl.ts`
 type CanvasVarMap = Map<string, any[]>;

packages/rrweb/src/record/observers/canvas/webgl.ts

@@ -1,4 +1,4 @@
-import { Mirror } from 'rrweb-snapshot';
+import type { Mirror } from 'rrweb-snapshot';
 import {
   blockClass,
   CanvasContext,
@@ -31,8 +31,8 @@ function patchGLPrototype(
         return function (this: typeof prototype, ...args: Array<unknown>) {
           const result = original.apply(this, args);
           saveWebGLVar(result, win, prototype);
-          if (!isBlocked(this.canvas, blockClass)) {
-            const id = mirror.getId(this.canvas);
+          if (!isBlocked(this.canvas as HTMLCanvasElement, blockClass)) {
+            const id = mirror.getId(this.canvas as HTMLCanvasElement);
 
             const recordArgs = serializeArgs([...args], win, prototype);
             const mutation: canvasMutationWithType = {

packages/rrweb/src/record/shadow-dom-manager.ts

@@ -1,4 +1,4 @@
-import {
+import type {
   mutationCallBack,
   scrollCallback,
   MutationBufferParam,
@@ -6,7 +6,7 @@ import {
 } from '../types';
 import { initMutationObserver, initScrollObserver } from './observer';
 import { patch } from '../utils';
-import { Mirror } from 'rrweb-snapshot';
+import type { Mirror } from 'rrweb-snapshot';
 
 type BypassOptions = Omit<
   MutationBufferParam,

packages/rrweb/src/record/workers/image-bitmap-data-url-worker.ts

@@ -1,5 +1,5 @@
 import { encode } from 'base64-arraybuffer';
-import {
+import type {
   ImageBitmapDataURLWorkerParams,
   ImageBitmapDataURLWorkerResponse,
 } from '../../types';

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

@@ -1,5 +1,5 @@
-import { Replayer } from '../';
-import { canvasMutationCommand } from '../../types';
+import type { Replayer } from '../';
+import type { canvasMutationCommand } from '../../types';
 import { deserializeArg } from './deserialize-args';
 
 export default async function canvasMutation({

packages/rrweb/src/replay/canvas/deserialize-args.ts

@@ -1,6 +1,6 @@
 import { decode } from 'base64-arraybuffer';
 import type { Replayer } from '../';
-import { CanvasArg, SerializedCanvasArg } from '../../types';
+import type { CanvasArg, SerializedCanvasArg } from '../../types';
 
 // TODO: add ability to wipe this list
 type GLVarMap = Map<string, any[]>;

packages/rrweb/src/replay/canvas/index.ts

@@ -1,4 +1,4 @@
-import { Replayer } from '..';
+import type { Replayer } from '..';
 import {
   CanvasContext,
   canvasMutationCommand,

packages/rrweb/src/replay/canvas/webgl.ts

@@ -11,9 +11,8 @@ function getContext(
   // you might have to do `ctx.flush()` before every webgl canvas event
   try {
     if (type === CanvasContext.WebGL) {
-      return (
-        target.getContext('webgl')! || target.getContext('experimental-webgl')
-      );
+      return (target.getContext('webgl')! ||
+        target.getContext('experimental-webgl')) as WebGLRenderingContext;
     }
     return target.getContext('webgl2')!;
   } catch (e) {

packages/rrweb/src/replay/virtual-styles.ts

@@ -1,186 +0,0 @@
-export enum StyleRuleType {
-  Insert,
-  Remove,
-  Snapshot,
-  SetProperty,
-  RemoveProperty,
-}
-
-type InsertRule = {
-  cssText: string;
-  type: StyleRuleType.Insert;
-  index?: number | number[];
-};
-type RemoveRule = {
-  type: StyleRuleType.Remove;
-  index: number | number[];
-};
-type SnapshotRule = {
-  type: StyleRuleType.Snapshot;
-  cssTexts: string[];
-};
-type SetPropertyRule = {
-  type: StyleRuleType.SetProperty;
-  index: number[];
-  property: string;
-  value: string | null;
-  priority: string | undefined;
-};
-type RemovePropertyRule = {
-  type: StyleRuleType.RemoveProperty;
-  index: number[];
-  property: string;
-};
-
-export type VirtualStyleRules = Array<
-  InsertRule | RemoveRule | SnapshotRule | SetPropertyRule | RemovePropertyRule
->;
-export type VirtualStyleRulesMap = Map<Node, VirtualStyleRules>;
-
-export function getNestedRule(
-  rules: CSSRuleList,
-  position: number[],
-): CSSGroupingRule {
-  const rule = rules[position[0]] as CSSGroupingRule;
-  if (position.length === 1) {
-    return rule;
-  } else {
-    return getNestedRule(
-      ((rule as CSSGroupingRule).cssRules[position[1]] as CSSGroupingRule)
-        .cssRules,
-      position.slice(2),
-    );
-  }
-}
-
-export function getPositionsAndIndex(nestedIndex: number[]) {
-  const positions = [...nestedIndex];
-  const index = positions.pop();
-  return { positions, index };
-}
-
-export function applyVirtualStyleRulesToNode(
-  storedRules: VirtualStyleRules,
-  styleNode: HTMLStyleElement,
-) {
-  const { sheet } = styleNode;
-  if (!sheet) {
-    // styleNode without sheet means the DOM has been removed
-    // so the rules no longer need to be applied
-    return;
-  }
-
-  storedRules.forEach((rule) => {
-    if (rule.type === StyleRuleType.Insert) {
-      try {
-        if (Array.isArray(rule.index)) {
-          const { positions, index } = getPositionsAndIndex(rule.index);
-          const nestedRule = getNestedRule(sheet.cssRules, positions);
-          nestedRule.insertRule(rule.cssText, index);
-        } else {
-          sheet.insertRule(rule.cssText, rule.index);
-        }
-      } catch (e) {
-        /**
-         * sometimes we may capture rules with browser prefix
-         * insert rule with prefixs in other browsers may cause Error
-         */
-      }
-    } else if (rule.type === StyleRuleType.Remove) {
-      try {
-        if (Array.isArray(rule.index)) {
-          const { positions, index } = getPositionsAndIndex(rule.index);
-          const nestedRule = getNestedRule(sheet.cssRules, positions);
-          nestedRule.deleteRule(index || 0);
-        } else {
-          sheet.deleteRule(rule.index);
-        }
-      } catch (e) {
-        /**
-         * accessing styleSheet rules may cause SecurityError
-         * for specific access control settings
-         */
-      }
-    } else if (rule.type === StyleRuleType.Snapshot) {
-      restoreSnapshotOfStyleRulesToNode(rule.cssTexts, styleNode);
-    } else if (rule.type === StyleRuleType.SetProperty) {
-      const nativeRule = (getNestedRule(
-        sheet.cssRules,
-        rule.index,
-      ) as unknown) as CSSStyleRule;
-      nativeRule.style.setProperty(rule.property, rule.value, rule.priority);
-    } else if (rule.type === StyleRuleType.RemoveProperty) {
-      const nativeRule = (getNestedRule(
-        sheet.cssRules,
-        rule.index,
-      ) as unknown) as CSSStyleRule;
-      nativeRule.style.removeProperty(rule.property);
-    }
-  });
-}
-
-function restoreSnapshotOfStyleRulesToNode(
-  cssTexts: string[],
-  styleNode: HTMLStyleElement,
-) {
-  try {
-    const existingRules = Array.from(styleNode.sheet?.cssRules || []).map(
-      (rule) => rule.cssText,
-    );
-    const existingRulesReversed = Object.entries(existingRules).reverse();
-    let lastMatch = existingRules.length;
-    existingRulesReversed.forEach(([index, rule]) => {
-      const indexOf = cssTexts.indexOf(rule);
-      if (indexOf === -1 || indexOf > lastMatch) {
-        try {
-          styleNode.sheet?.deleteRule(Number(index));
-        } catch (e) {
-          /**
-           * accessing styleSheet rules may cause SecurityError
-           * for specific access control settings
-           */
-        }
-      }
-      lastMatch = indexOf;
-    });
-    cssTexts.forEach((cssText, index) => {
-      try {
-        if (styleNode.sheet?.cssRules[index]?.cssText !== cssText) {
-          styleNode.sheet?.insertRule(cssText, index);
-        }
-      } catch (e) {
-        /**
-         * sometimes we may capture rules with browser prefix
-         * insert rule with prefixs in other browsers may cause Error
-         */
-      }
-    });
-  } catch (e) {
-    /**
-     * accessing styleSheet rules may cause SecurityError
-     * for specific access control settings
-     */
-  }
-}
-
-export function storeCSSRules(
-  parentElement: HTMLStyleElement,
-  virtualStyleRulesMap: VirtualStyleRulesMap,
-) {
-  try {
-    const cssTexts = Array.from(
-      (parentElement as HTMLStyleElement).sheet?.cssRules || [],
-    ).map((rule) => rule.cssText);
-    virtualStyleRulesMap.set(parentElement, [
-      {
-        type: StyleRuleType.Snapshot,
-        cssTexts,
-      },
-    ]);
-  } catch (e) {
-    /**
-     * accessing styleSheet rules may cause SecurityError
-     * for specific access control settings
-     */
-  }
-}

packages/rrweb/src/types.ts

@@ -1,4 +1,4 @@
-import {
+import type {
   serializedNodeWithId,
   Mirror,
   INode,
@@ -7,11 +7,12 @@ import {
   MaskInputFn,
   MaskTextFn,
 } from 'rrweb-snapshot';
-import { PackFn, UnpackFn } from './packer/base';
-import { IframeManager } from './record/iframe-manager';
-import { ShadowDomManager } from './record/shadow-dom-manager';
+import type { PackFn, UnpackFn } from './packer/base';
+import type { IframeManager } from './record/iframe-manager';
+import type { ShadowDomManager } from './record/shadow-dom-manager';
 import type { Replayer } from './replay';
-import { CanvasManager } from './record/observers/canvas/canvas-manager';
+import type { RRNode } from 'rrdom/es/virtual-dom';
+import type { CanvasManager } from './record/observers/canvas/canvas-manager';
 
 export enum EventType {
   DomContentLoaded,
@@ -169,6 +170,11 @@ export type eventWithTime = event & {
   delay?: number;
 };
 
+export type canvasEventWithTime = eventWithTime & {
+  type: EventType.IncrementalSnapshot;
+  data: canvasMutationData;
+};
+
 export type blockClass = string | RegExp;
 
 export type maskTextClass = string | RegExp;
@@ -653,6 +659,7 @@ export type playerConfig = {
         strokeStyle?: string;
       };
   unpackFn?: UnpackFn;
+  useVirtualDom: boolean;
   plugins?: ReplayPlugin[];
 };
 
@@ -663,7 +670,7 @@ export type playerMetaData = {
 };
 
 export type missingNode = {
-  node: Node;
+  node: Node | RRNode;
   mutation: addedNodeMutation;
 };
 export type missingNodeMap = {
@@ -706,12 +713,6 @@ export enum ReplayerEvents {
   PlayBack = 'play-back',
 }
 
-// store the state that would be changed during the process(unmount from dom and mount again)
-export type ElementState = {
-  // [scrollLeft,scrollTop]
-  scroll?: [number, number];
-};
-
 export type KeepIframeSrcFn = (src: string) => boolean;
 
 declare global {

packages/rrweb/src/utils.ts

@@ -1,21 +1,17 @@
-import {
+import type {
   throttleOptions,
   listenerHandler,
   hookResetter,
   blockClass,
-  IncrementalSource,
   addedNodeMutation,
-  removedNodeMutation,
-  textMutation,
-  attributeMutation,
-  mutationData,
-  scrollData,
-  inputData,
   DocumentDimension,
   IWindow,
   DeprecatedMirror,
+  textMutation,
 } from './types';
-import { Mirror, IGNORED_NODE, isShadowRoot } from 'rrweb-snapshot';
+import type { IMirror, Mirror } from 'rrweb-snapshot';
+import { isShadowRoot, IGNORED_NODE } from 'rrweb-snapshot';
+import type { RRNode, RRIFrameElement } from 'rrdom/es/virtual-dom';
 
 export function on(
   type: string,
@@ -280,201 +276,6 @@ export function polyfill(win = window) {
   }
 }
 
-export type TreeNode = {
-  id: number;
-  mutation: addedNodeMutation;
-  parent?: TreeNode;
-  children: Record<number, TreeNode>;
-  texts: textMutation[];
-  attributes: attributeMutation[];
-};
-
-export class TreeIndex {
-  public tree!: Record<number, TreeNode>;
-
-  private removeNodeMutations!: removedNodeMutation[];
-  private textMutations!: textMutation[];
-  private attributeMutations!: attributeMutation[];
-  private indexes!: Map<number, TreeNode>;
-  private removeIdSet!: Set<number>;
-  private scrollMap!: Map<number, scrollData>;
-  private inputMap!: Map<number, inputData>;
-
-  constructor() {
-    this.reset();
-  }
-
-  public add(mutation: addedNodeMutation) {
-    const parentTreeNode = this.indexes.get(mutation.parentId);
-    const treeNode: TreeNode = {
-      id: mutation.node.id,
-      mutation,
-      children: [],
-      texts: [],
-      attributes: [],
-    };
-    if (!parentTreeNode) {
-      this.tree[treeNode.id] = treeNode;
-    } else {
-      treeNode.parent = parentTreeNode;
-      parentTreeNode.children[treeNode.id] = treeNode;
-    }
-    this.indexes.set(treeNode.id, treeNode);
-  }
-
-  public remove(mutation: removedNodeMutation, mirror: Mirror) {
-    const parentTreeNode = this.indexes.get(mutation.parentId);
-    const treeNode = this.indexes.get(mutation.id);
-
-    const deepRemoveFromMirror = (id: number) => {
-      if (id === -1) return;
-
-      this.removeIdSet.add(id);
-      const node = mirror.getNode(id);
-      node?.childNodes.forEach((childNode) => {
-        deepRemoveFromMirror(mirror.getId(childNode));
-      });
-    };
-    const deepRemoveFromTreeIndex = (node: TreeNode) => {
-      this.removeIdSet.add(node.id);
-      Object.values(node.children).forEach((n) => deepRemoveFromTreeIndex(n));
-      const _treeNode = this.indexes.get(node.id);
-      if (_treeNode) {
-        const _parentTreeNode = _treeNode.parent;
-        if (_parentTreeNode) {
-          delete _treeNode.parent;
-          delete _parentTreeNode.children[_treeNode.id];
-          this.indexes.delete(mutation.id);
-        }
-      }
-    };
-
-    if (!treeNode) {
-      this.removeNodeMutations.push(mutation);
-      deepRemoveFromMirror(mutation.id);
-    } else if (!parentTreeNode) {
-      delete this.tree[treeNode.id];
-      this.indexes.delete(treeNode.id);
-      deepRemoveFromTreeIndex(treeNode);
-    } else {
-      delete treeNode.parent;
-      delete parentTreeNode.children[treeNode.id];
-      this.indexes.delete(mutation.id);
-      deepRemoveFromTreeIndex(treeNode);
-    }
-  }
-
-  public text(mutation: textMutation) {
-    const treeNode = this.indexes.get(mutation.id);
-    if (treeNode) {
-      treeNode.texts.push(mutation);
-    } else {
-      this.textMutations.push(mutation);
-    }
-  }
-
-  public attribute(mutation: attributeMutation) {
-    const treeNode = this.indexes.get(mutation.id);
-    if (treeNode) {
-      treeNode.attributes.push(mutation);
-    } else {
-      this.attributeMutations.push(mutation);
-    }
-  }
-
-  public scroll(d: scrollData) {
-    this.scrollMap.set(d.id, d);
-  }
-
-  public input(d: inputData) {
-    this.inputMap.set(d.id, d);
-  }
-
-  public flush(): {
-    mutationData: mutationData;
-    scrollMap: TreeIndex['scrollMap'];
-    inputMap: TreeIndex['inputMap'];
-  } {
-    const {
-      tree,
-      removeNodeMutations,
-      textMutations,
-      attributeMutations,
-    } = this;
-
-    const batchMutationData: mutationData = {
-      source: IncrementalSource.Mutation,
-      removes: removeNodeMutations,
-      texts: textMutations,
-      attributes: attributeMutations,
-      adds: [],
-    };
-
-    const walk = (treeNode: TreeNode, removed: boolean) => {
-      if (removed) {
-        this.removeIdSet.add(treeNode.id);
-      }
-      batchMutationData.texts = batchMutationData.texts
-        .concat(removed ? [] : treeNode.texts)
-        .filter((m) => !this.removeIdSet.has(m.id));
-      batchMutationData.attributes = batchMutationData.attributes
-        .concat(removed ? [] : treeNode.attributes)
-        .filter((m) => !this.removeIdSet.has(m.id));
-      if (
-        !this.removeIdSet.has(treeNode.id) &&
-        !this.removeIdSet.has(treeNode.mutation.parentId) &&
-        !removed
-      ) {
-        batchMutationData.adds.push(treeNode.mutation);
-        if (treeNode.children) {
-          Object.values(treeNode.children).forEach((n) => walk(n, false));
-        }
-      } else {
-        Object.values(treeNode.children).forEach((n) => walk(n, true));
-      }
-    };
-
-    Object.values(tree).forEach((n) => walk(n, false));
-
-    for (const id of this.scrollMap.keys()) {
-      if (this.removeIdSet.has(id)) {
-        this.scrollMap.delete(id);
-      }
-    }
-    for (const id of this.inputMap.keys()) {
-      if (this.removeIdSet.has(id)) {
-        this.inputMap.delete(id);
-      }
-    }
-
-    const scrollMap = new Map(this.scrollMap);
-    const inputMap = new Map(this.inputMap);
-
-    this.reset();
-
-    return {
-      mutationData: batchMutationData,
-      scrollMap,
-      inputMap,
-    };
-  }
-
-  private reset() {
-    this.tree = [];
-    this.indexes = new Map();
-    this.removeNodeMutations = [];
-    this.textMutations = [];
-    this.attributeMutations = [];
-    this.removeIdSet = new Set();
-    this.scrollMap = new Map();
-    this.inputMap = new Map();
-  }
-
-  public idRemoved(id: number): boolean {
-    return this.removeIdSet.has(id);
-  }
-}
-
 type ResolveTree = {
   value: addedNodeMutation;
   children: ResolveTree[];
@@ -542,13 +343,13 @@ export function iterateResolveTree(
 
 export type AppendedIframe = {
   mutationInQueue: addedNodeMutation;
-  builtNode: HTMLIFrameElement;
+  builtNode: HTMLIFrameElement | RRIFrameElement;
 };
 
-export function isSerializedIframe(
-  n: Node,
-  mirror: Mirror,
-): n is HTMLIFrameElement {
+export function isSerializedIframe<TNode extends Node | RRNode>(
+  n: TNode,
+  mirror: IMirror<TNode>,
+): boolean {
   return Boolean(n.nodeName === 'IFRAME' && mirror.getMeta(n));
 }
 
@@ -582,12 +383,34 @@ export function getBaseDimension(
   };
 }
 
-export function hasShadowRoot<T extends Node>(
+export function hasShadowRoot<T extends Node | RRNode>(
   n: T,
 ): n is T & { shadowRoot: ShadowRoot } {
   return Boolean(((n as unknown) as Element)?.shadowRoot);
 }
 
+export function getNestedRule(
+  rules: CSSRuleList,
+  position: number[],
+): CSSGroupingRule {
+  const rule = rules[position[0]] as CSSGroupingRule;
+  if (position.length === 1) {
+    return rule;
+  } else {
+    return getNestedRule(
+      ((rule as CSSGroupingRule).cssRules[position[1]] as CSSGroupingRule)
+        .cssRules,
+      position.slice(2),
+    );
+  }
+}
+
+export function getPositionsAndIndex(nestedIndex: number[]) {
+  const positions = [...nestedIndex];
+  const index = positions.pop();
+  return { positions, index };
+}
+
 /**
  * Returns the latest mutation in the queue for each node.
  * @param  {textMutation[]} mutations The text mutations to filter.

packages/rrweb/test/__snapshots__/integration.test.ts.snap

@@ -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\\\\\\"\\"
         ]
       }
     }

packages/rrweb/test/__snapshots__/replayer.test.ts.snap

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

packages/rrweb/test/e2e/webgl.test.ts

@@ -1,7 +1,7 @@
-import * as http from 'http';
+import type * as http from 'http';
 import * as fs from 'fs';
 import * as path from 'path';
-import * as puppeteer from 'puppeteer';
+import type * as puppeteer from 'puppeteer';
 import {
   startServer,
   launchPuppeteer,
@@ -9,12 +9,7 @@ import {
   replaceLast,
   waitForRAF,
 } from '../utils';
-import {
-  recordOptions,
-  eventWithTime,
-  EventType,
-  IncrementalSource,
-} from '../../src/types';
+import type { recordOptions, eventWithTime } from '../../src/types';
 import { toMatchImageSnapshot } from 'jest-image-snapshot';
 expect.extend({ toMatchImageSnapshot });
 

packages/rrweb/test/events/iframe.ts

@@ -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,

packages/rrweb/test/events/input.ts

@@ -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;

packages/rrweb/test/events/scroll.ts

@@ -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;

packages/rrweb/test/events/shadow-dom.ts

@@ -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;

packages/rrweb/test/events/style-sheet-rule-events.ts

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

packages/rrweb/test/events/style-sheet-text-mutation.ts

@@ -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;

packages/rrweb/test/integration.test.ts

@@ -1,7 +1,7 @@
 import * as fs from 'fs';
 import * as path from 'path';
-import * as http from 'http';
-import * as puppeteer from 'puppeteer';
+import type * as http from 'http';
+import type * as puppeteer from 'puppeteer';
 import {
   assertSnapshot,
   startServer,

packages/rrweb/test/record.test.ts

@@ -2,7 +2,7 @@
 
 import * as fs from 'fs';
 import * as path from 'path';
-import * as puppeteer from 'puppeteer';
+import type * as puppeteer from 'puppeteer';
 import {
   recordOptions,
   listenerHandler,

packages/rrweb/test/record/webgl.test.ts

@@ -2,7 +2,7 @@
 
 import * as fs from 'fs';
 import * as path from 'path';
-import * as puppeteer from 'puppeteer';
+import type * as puppeteer from 'puppeteer';
 import {
   recordOptions,
   listenerHandler,
@@ -17,7 +17,7 @@ import {
   stripBase64,
   waitForRAF,
 } from '../utils';
-import { ICanvas } from 'rrweb-snapshot';
+import type { ICanvas } from 'rrweb-snapshot';
 
 interface ISuite {
   code: string;

packages/rrweb/test/replay/preload-all-images.test.ts

@@ -5,7 +5,6 @@ import { polyfillWebGLGlobals } from '../utils';
 polyfillWebGLGlobals();
 
 import { Replayer } from '../../src/replay';
-import {} from '../../src/types';
 import {
   CanvasContext,
   CanvasArg,

packages/rrweb/test/replay/virtual-styles.test.ts

@@ -1,165 +0,0 @@
-import { JSDOM } from 'jsdom';
-import {
-  applyVirtualStyleRulesToNode,
-  StyleRuleType,
-  VirtualStyleRules,
-} from '../../src/replay/virtual-styles';
-
-describe('virtual styles', () => {
-  describe('applyVirtualStyleRulesToNode', () => {
-    it('should insert rule at index 0 in empty sheet', () => {
-      const dom = new JSDOM(`
-        <style></style>
-      `);
-      const styleEl = dom.window.document.getElementsByTagName('style')[0];
-
-      const cssText = '.added-rule {border: 1px solid yellow;}';
-
-      const virtualStyleRules: VirtualStyleRules = [
-        { cssText, index: 0, type: StyleRuleType.Insert },
-      ];
-      applyVirtualStyleRulesToNode(virtualStyleRules, styleEl);
-
-      expect(styleEl.sheet?.cssRules?.length).toEqual(1);
-      expect(styleEl.sheet?.cssRules[0].cssText).toEqual(cssText);
-    });
-
-    it('should insert rule at index 0 and keep exsisting rules', () => {
-      const dom = new JSDOM(`
-        <style>
-          a {color: blue}
-          div {color: black}
-        </style>
-      `);
-      const styleEl = dom.window.document.getElementsByTagName('style')[0];
-
-      const cssText = '.added-rule {border: 1px solid yellow;}';
-      const virtualStyleRules: VirtualStyleRules = [
-        { cssText, index: 0, type: StyleRuleType.Insert },
-      ];
-      applyVirtualStyleRulesToNode(virtualStyleRules, styleEl);
-
-      expect(styleEl.sheet?.cssRules?.length).toEqual(3);
-      expect(styleEl.sheet?.cssRules[0].cssText).toEqual(cssText);
-    });
-
-    it('should delete rule at index 0', () => {
-      const dom = new JSDOM(`
-        <style>
-          a {color: blue;}
-          div {color: black;}
-        </style>
-      `);
-      const styleEl = dom.window.document.getElementsByTagName('style')[0];
-
-      const virtualStyleRules: VirtualStyleRules = [
-        { index: 0, type: StyleRuleType.Remove },
-      ];
-      applyVirtualStyleRulesToNode(virtualStyleRules, styleEl);
-
-      expect(styleEl.sheet?.cssRules?.length).toEqual(1);
-      expect(styleEl.sheet?.cssRules[0].cssText).toEqual('div {color: black;}');
-    });
-
-    it('should restore a snapshot by inserting missing rules', () => {
-      const dom = new JSDOM(`
-        <style>
-          a {color: blue;}
-          .deleted-rule {color: pink;}
-          div {color: black;}
-        </style>
-      `);
-      const styleEl = dom.window.document.getElementsByTagName('style')[0];
-
-      const virtualStyleRules: VirtualStyleRules = [
-        {
-          cssTexts: ['a {color: blue;}', 'div {color: black;}'],
-          type: StyleRuleType.Snapshot,
-        },
-      ];
-      applyVirtualStyleRulesToNode(virtualStyleRules, styleEl);
-
-      expect(styleEl.sheet?.cssRules?.length).toEqual(2);
-    });
-
-    it('should restore a snapshot by fixing order of rules', () => {
-      const dom = new JSDOM(`
-        <style>
-          div {color: black;}
-          a {color: blue;}
-        </style>
-      `);
-      const styleEl = dom.window.document.getElementsByTagName('style')[0];
-
-      const cssTexts = ['a {color: blue;}', 'div {color: black;}'];
-
-      const virtualStyleRules: VirtualStyleRules = [
-        {
-          cssTexts,
-          type: StyleRuleType.Snapshot,
-        },
-      ];
-      applyVirtualStyleRulesToNode(virtualStyleRules, styleEl);
-
-      expect(styleEl.sheet?.cssRules?.length).toEqual(2);
-      expect(
-        Array.from(styleEl.sheet?.cssRules || []).map((rule) => rule.cssText),
-      ).toEqual(cssTexts);
-    });
-
-    // JSDOM/CSSOM is currently broken for this test
-    // remove '.skip' once https://github.com/NV/CSSOM/pull/113#issue-712485075 is merged
-    it.skip('should insert rule at index [0,0] and keep exsisting rules', () => {
-      const dom = new JSDOM(`
-        <style>
-          @media {
-            a {color: blue}
-            div {color: black}
-          }
-        </style>
-      `);
-      const styleEl = dom.window.document.getElementsByTagName('style')[0];
-
-      const cssText = '.added-rule {border: 1px solid yellow;}';
-      const virtualStyleRules: VirtualStyleRules = [
-        { cssText, index: [0, 0], type: StyleRuleType.Insert },
-      ];
-      applyVirtualStyleRulesToNode(virtualStyleRules, styleEl);
-
-      console.log(
-        Array.from((styleEl.sheet?.cssRules[0] as CSSMediaRule).cssRules),
-      );
-
-      expect(
-        (styleEl.sheet?.cssRules[0] as CSSMediaRule).cssRules?.length,
-      ).toEqual(3);
-      expect(
-        (styleEl.sheet?.cssRules[0] as CSSMediaRule).cssRules[0].cssText,
-      ).toEqual(cssText);
-    });
-
-    it('should delete rule at index [0,1]', () => {
-      const dom = new JSDOM(`
-        <style>
-          @media {
-            a {color: blue;}
-            div {color: black;}
-          }
-        </style>
-      `);
-      const styleEl = dom.window.document.getElementsByTagName('style')[0];
-
-      const virtualStyleRules: VirtualStyleRules = [
-        { index: [0, 1], type: StyleRuleType.Remove },
-      ];
-      applyVirtualStyleRulesToNode(virtualStyleRules, styleEl);
-
-      expect(
-        (styleEl.sheet?.cssRules[0] as CSSMediaRule).cssRules?.length,
-      ).toEqual(1);
-      expect(
-        (styleEl.sheet?.cssRules[0] as CSSMediaRule).cssRules[0].cssText,
-      ).toEqual('a {color: blue;}');
-    });
-  });
-});

packages/rrweb/test/replay/webgl.test.ts

@@ -1,8 +1,8 @@
 import * as fs from 'fs';
 import * as path from 'path';
-import { assertDomSnapshot, launchPuppeteer } from '../utils';
+import { launchPuppeteer } from '../utils';
 import { toMatchImageSnapshot } from 'jest-image-snapshot';
-import * as puppeteer from 'puppeteer';
+import type * as puppeteer from 'puppeteer';
 import events from '../events/webgl';
 
 interface ISuite {

packages/rrweb/test/replayer.test.ts

@@ -2,16 +2,21 @@
 
 import * as fs from 'fs';
 import * as path from 'path';
-import * as puppeteer from 'puppeteer';
+import type * as puppeteer from 'puppeteer';
 import {
   assertDomSnapshot,
   launchPuppeteer,
   sampleEvents as events,
   sampleStyleSheetRemoveEvents as stylesheetRemoveEvents,
+  waitForRAF,
 } from './utils';
 import styleSheetRuleEvents from './events/style-sheet-rule-events';
 import orderingEvents from './events/ordering';
+import scrollEvents from './events/scroll';
+import inputEvents from './events/input';
 import iframeEvents from './events/iframe';
+import shadowDomEvents from './events/shadow-dom';
+import StyleSheetTextMutation from './events/style-sheet-text-mutation';
 
 interface ISuite {
   code: string;
@@ -247,12 +252,206 @@ describe('replayer', function () {
       const rules = [...replayer.iframe.contentDocument.styleSheets].map(
         (sheet) => [...sheet.rules],
       ).flat();
-      rules.some((x) => x.selectorText === '.css-added-at-3100');
+      rules.some((x) => x.selectorText === '.css-added-at-3100') &&
+        !rules.some(
+          (x) => x.selectorText === '.css-added-at-500-overwritten-at-3000',
+        );
     `);
 
     expect(result).toEqual(true);
   });
 
+  it('should overwrite all StyleSheetRules by appending a text node to stylesheet element while fast-forwarding', async () => {
+    await page.evaluate(`events = ${JSON.stringify(StyleSheetTextMutation)}`);
+    const result = await page.evaluate(`
+      const { Replayer } = rrweb;
+      const replayer = new Replayer(events);
+      replayer.pause(1600);
+      const rules = [...replayer.iframe.contentDocument.styleSheets].map(
+        (sheet) => [...sheet.rules],
+      ).flat();
+      rules.some((x) => x.selectorText === '.css-added-at-1000-overwritten-at-1500');
+    `);
+    expect(result).toEqual(false);
+  });
+
+  it('should apply fast-forwarded StyleSheetRules that came after appending text node to stylesheet element', async () => {
+    await page.evaluate(`events = ${JSON.stringify(StyleSheetTextMutation)}`);
+    const result = await page.evaluate(`
+      const { Replayer } = rrweb;
+      const replayer = new Replayer(events);
+      replayer.pause(2100);
+      const rules = [...replayer.iframe.contentDocument.styleSheets].map(
+        (sheet) => [...sheet.rules],
+      ).flat();
+      rules.some((x) => x.selectorText === '.css-added-at-2000-overwritten-at-2500');
+    `);
+    expect(result).toEqual(true);
+  });
+
+  it('should overwrite all StyleSheetRules by removing text node from stylesheet element while fast-forwarding', async () => {
+    await page.evaluate(`events = ${JSON.stringify(StyleSheetTextMutation)}`);
+    const result = await page.evaluate(`
+      const { Replayer } = rrweb;
+      const replayer = new Replayer(events);
+      replayer.pause(2600);
+      const rules = [...replayer.iframe.contentDocument.styleSheets].map(
+        (sheet) => [...sheet.rules],
+      ).flat();
+      rules.some((x) => x.selectorText === '.css-added-at-2000-overwritten-at-2500');
+    `);
+    expect(result).toEqual(false);
+  });
+
+  it('should apply fast-forwarded StyleSheetRules that came after removing text node from stylesheet element', async () => {
+    await page.evaluate(`events = ${JSON.stringify(StyleSheetTextMutation)}`);
+    const result = await page.evaluate(`
+      const { Replayer } = rrweb;
+      const replayer = new Replayer(events);
+      replayer.pause(3100);
+      const rules = [...replayer.iframe.contentDocument.styleSheets].map(
+        (sheet) => [...sheet.rules],
+      ).flat();
+      rules.some((x) => x.selectorText === '.css-added-at-3000');
+    `);
+    expect(result).toEqual(true);
+  });
+
+  it('can fast forward scroll events', async () => {
+    await page.evaluate(`
+      events = ${JSON.stringify(scrollEvents)};
+      const { Replayer } = rrweb;
+      var replayer = new Replayer(events,{showDebug:true});
+      replayer.pause(550);
+    `);
+    // add the "#container" element at 500
+    const iframe = await page.$('iframe');
+    const contentDocument = await iframe!.contentFrame()!;
+    expect(await contentDocument!.$('#container')).not.toBeNull();
+    expect(await contentDocument!.$('#block')).not.toBeNull();
+    expect(
+      await contentDocument!.$eval(
+        '#container',
+        (element: Element) => element.scrollTop,
+      ),
+    ).toEqual(0);
+
+    // restart the replayer
+    await page.evaluate('replayer.play(0);');
+    await waitForRAF(page);
+
+    await page.evaluate('replayer.pause(1050);');
+    // scroll the "#container" div' at 1000
+    expect(
+      await contentDocument!.$eval(
+        '#container',
+        (element: Element) => element.scrollTop,
+      ),
+    ).toEqual(2500);
+
+    await page.evaluate('replayer.play(0);');
+    await waitForRAF(page);
+    await page.evaluate('replayer.pause(1550);');
+    // scroll the document at 1500
+    expect(
+      await page.$eval(
+        'iframe',
+        (element: Element) =>
+          (element as HTMLIFrameElement)!.contentWindow!.scrollY,
+      ),
+    ).toEqual(250);
+
+    await page.evaluate('replayer.play(0);');
+    await waitForRAF(page);
+    await page.evaluate('replayer.pause(2050);');
+    // remove the "#container" element at 2000
+    expect(await contentDocument!.$('#container')).toBeNull();
+    expect(await contentDocument!.$('#block')).toBeNull();
+    expect(
+      await page.$eval(
+        'iframe',
+        (element: Element) =>
+          (element as HTMLIFrameElement)!.contentWindow!.scrollY,
+      ),
+    ).toEqual(0);
+  });
+
+  it('can fast forward input events', async () => {
+    await page.evaluate(`
+      events = ${JSON.stringify(inputEvents)};
+      const { Replayer } = rrweb;
+      var replayer = new Replayer(events,{showDebug:true});
+      replayer.pause(1050);
+    `);
+    const iframe = await page.$('iframe');
+    const contentDocument = await iframe!.contentFrame()!;
+    expect(await contentDocument!.$('select')).not.toBeNull();
+    expect(
+      await contentDocument!.$eval(
+        'select',
+        (element: Element) => (element as HTMLSelectElement).value,
+      ),
+    ).toEqual('valueB'); // the default value
+
+    // restart the replayer
+    await page.evaluate('replayer.play(0);');
+    await waitForRAF(page);
+
+    await page.evaluate('replayer.pause(1550);');
+    // the value get changed to 'valueA' at 1500
+    expect(
+      await contentDocument!.$eval(
+        'select',
+        (element: Element) => (element as HTMLSelectElement).value,
+      ),
+    ).toEqual('valueA');
+
+    await page.evaluate('replayer.play(0);');
+    await waitForRAF(page);
+    await page.evaluate('replayer.pause(2050);');
+    // the value get changed to 'valueC' at 2000
+    expect(
+      await contentDocument!.$eval(
+        'select',
+        (element: Element) => (element as HTMLSelectElement).value,
+      ),
+    ).toEqual('valueC');
+
+    await page.evaluate('replayer.play(0);');
+    await waitForRAF(page);
+    await page.evaluate('replayer.pause(2550);');
+    // add a new input element at 2500
+    expect(
+      await contentDocument!.$eval(
+        'input',
+        (element: Element) => (element as HTMLSelectElement).value,
+      ),
+    ).toEqual('');
+
+    await page.evaluate('replayer.play(0);');
+    await waitForRAF(page);
+    await page.evaluate('replayer.pause(3050);');
+    // set the value 'test input' for the input element at 3000
+    expect(
+      await contentDocument!.$eval(
+        'input',
+        (element: Element) => (element as HTMLSelectElement).value,
+      ),
+    ).toEqual('test input');
+
+    await page.evaluate('replayer.play(0);');
+    await waitForRAF(page);
+    await page.evaluate('replayer.pause(3550);');
+    // remove the select element at 3500
+    expect(await contentDocument!.$('select')).toBeNull();
+
+    await page.evaluate('replayer.play(0);');
+    await waitForRAF(page);
+    await page.evaluate('replayer.pause(4050);');
+    // remove the input element at 4000
+    expect(await contentDocument!.$('input')).toBeNull();
+  });
+
   it('can fast-forward mutation events containing nested iframe elements', async () => {
     await page.evaluate(`
       events = ${JSON.stringify(iframeEvents)};
@@ -264,13 +463,12 @@ describe('replayer', function () {
     const contentDocument = await iframe!.contentFrame()!;
     expect(await contentDocument!.$('iframe')).toBeNull();
 
-    const delay = 50;
     // restart the replayer
     await page.evaluate('replayer.play(0);');
-    await page.waitForTimeout(delay);
+    await waitForRAF(page);
     await page.evaluate('replayer.pause(550);'); // add 'iframe one' at 500
     expect(await contentDocument!.$('iframe')).not.toBeNull();
-    const iframeOneDocument = await (await contentDocument!.$(
+    let iframeOneDocument = await (await contentDocument!.$(
       'iframe',
     ))!.contentFrame();
     expect(iframeOneDocument).not.toBeNull();
@@ -286,14 +484,21 @@ describe('replayer', function () {
 
     // add 'iframe two' and 'iframe three' at 1000
     await page.evaluate('replayer.play(0);');
-    await page.waitForTimeout(delay);
+    await waitForRAF(page);
     await page.evaluate('replayer.pause(1050);');
+    // check the inserted style of iframe 'one' again
+    iframeOneDocument = await (await contentDocument!.$(
+      'iframe',
+    ))!.contentFrame();
+    expect((await iframeOneDocument!.$$('style')).length).toBe(1);
+
     expect((await contentDocument!.$$('iframe')).length).toEqual(2);
     let iframeTwoDocument = await (
       await contentDocument!.$$('iframe')
     )[1]!.contentFrame();
     expect(iframeTwoDocument).not.toBeNull();
     expect((await iframeTwoDocument!.$$('iframe')).length).toEqual(2);
+    expect((await iframeTwoDocument!.$$('style')).length).toBe(1);
     let iframeThreeDocument = await (
       await iframeTwoDocument!.$$('iframe')
     )[0]!.contentFrame();
@@ -301,25 +506,27 @@ describe('replayer', function () {
       await iframeTwoDocument!.$$('iframe')
     )[1]!.contentFrame();
     expect(iframeThreeDocument).not.toBeNull();
+    expect((await iframeThreeDocument!.$$('style')).length).toBe(1);
     expect(iframeFourDocument).not.toBeNull();
 
     // add 'iframe four' at 1500
     await page.evaluate('replayer.play(0);');
-    await page.waitForTimeout(delay);
+    await waitForRAF(page);
     await page.evaluate('replayer.pause(1550);');
     iframeTwoDocument = await (
       await contentDocument!.$$('iframe')
     )[1]!.contentFrame();
+    expect((await iframeTwoDocument!.$$('style')).length).toBe(1);
     iframeFourDocument = await (
       await iframeTwoDocument!.$$('iframe')
     )[1]!.contentFrame();
     expect(await iframeFourDocument!.$('iframe')).toBeNull();
-    expect(await iframeFourDocument!.$('style')).not.toBeNull();
+    expect((await iframeFourDocument!.$$('style')).length).toBe(1);
     expect(await iframeFourDocument!.title()).toEqual('iframe 4');
 
     // add 'iframe five' at 2000
     await page.evaluate('replayer.play(0);');
-    await page.waitForTimeout(delay);
+    await waitForRAF(page);
     await page.evaluate('replayer.pause(2050);');
     iframeTwoDocument = await (
       await contentDocument!.$$('iframe')
@@ -327,6 +534,7 @@ describe('replayer', function () {
     iframeFourDocument = await (
       await iframeTwoDocument!.$$('iframe')
     )[1]!.contentFrame();
+    expect((await iframeFourDocument!.$$('style')).length).toBe(1);
     expect(await iframeFourDocument!.$('iframe')).not.toBeNull();
     const iframeFiveDocument = await (await iframeFourDocument!.$(
       'iframe',
@@ -343,7 +551,7 @@ describe('replayer', function () {
 
     // remove the html element of 'iframe four' at 2500
     await page.evaluate('replayer.play(0);');
-    await page.waitForTimeout(delay);
+    await waitForRAF(page);
     await page.evaluate('replayer.pause(2550);');
     iframeTwoDocument = await (
       await contentDocument!.$$('iframe')
@@ -362,6 +570,51 @@ describe('replayer', function () {
     ).not.toBeNull();
   });
 
+  it('can fast-forward mutation events containing nested shadow doms', async () => {
+    await page.evaluate(`
+      events = ${JSON.stringify(shadowDomEvents)};
+      const { Replayer } = rrweb;
+      var replayer = new Replayer(events,{showDebug:true});
+      replayer.pause(550);
+    `);
+    // add shadow dom 'one' at 500
+    const iframe = await page.$('iframe');
+    const contentDocument = await iframe!.contentFrame()!;
+    expect(
+      await contentDocument!.$eval('div', (element) => element.shadowRoot),
+    ).not.toBeNull();
+    expect(
+      await contentDocument!.evaluate(
+        () =>
+          document
+            .querySelector('body > div')!
+            .shadowRoot!.querySelector('span')!.textContent,
+      ),
+    ).toEqual('shadow dom one');
+
+    // add shadow dom 'two' at 1000
+    await page.evaluate('replayer.play(0);');
+    await waitForRAF(page);
+    await page.evaluate('replayer.pause(1050);');
+    expect(
+      await contentDocument!.evaluate(
+        () =>
+          document
+            .querySelector('body > div')!
+            .shadowRoot!.querySelector('div')!.shadowRoot,
+      ),
+    ).not.toBeNull();
+    expect(
+      await contentDocument!.evaluate(
+        () =>
+          document
+            .querySelector('body > div')!
+            .shadowRoot!.querySelector('div')!
+            .shadowRoot!.querySelector('span')!.textContent,
+      ),
+    ).toEqual('shadow dom two');
+  });
+
   it('can stream events in live mode', async () => {
     const status = await page.evaluate(`
       const { Replayer } = rrweb;

packages/rrweb/tsconfig.json

@@ -2,7 +2,7 @@
   "compilerOptions": {
     "module": "ESNext",
     "moduleResolution": "Node",
-    "target": "ES5",
+    "target": "ES6",
     "noImplicitAny": true,
     "strictNullChecks": true,
     "removeComments": true,
@@ -10,7 +10,8 @@
     "rootDir": "src",
     "outDir": "build",
     "lib": ["es6", "dom"],
-    "downlevelIteration": true
+    "downlevelIteration": true,
+    "importsNotUsedAsValues": "error"
   },
   "exclude": ["test"],
   "include": [

packages/rrweb/typings/packer/base.d.ts

@@ -1,4 +1,4 @@
-import { eventWithTime } from '../types';
+import type { eventWithTime } from '../types';
 export declare type PackFn = (event: eventWithTime) => string;
 export declare type UnpackFn = (raw: string) => eventWithTime;
 export declare type eventWithTimeAndPacker = eventWithTime & {

packages/rrweb/typings/plugins/console/record/index.d.ts

@@ -1,4 +1,4 @@
-import { RecordPlugin } from '../../../types';
+import type { RecordPlugin } from '../../../types';
 export declare type StringifyOptions = {
     stringLengthLimit?: number;
     numOfKeysLimit: number;

packages/rrweb/typings/plugins/console/record/stringify.d.ts

@@ -1,2 +1,2 @@
-import { StringifyOptions } from './index';
+import type { StringifyOptions } from './index';
 export declare function stringify(obj: any, stringifyOptions?: StringifyOptions): string;

packages/rrweb/typings/plugins/sequential-id/record/index.d.ts

@@ -1,4 +1,4 @@
-import { RecordPlugin } from '../../../types';
+import type { RecordPlugin } from '../../../types';
 export declare type SequentialIdOptions = {
     key: string;
 };

packages/rrweb/typings/plugins/sequential-id/replay/index.d.ts

@@ -1,5 +1,5 @@
 import type { SequentialIdOptions } from '../record';
-import { ReplayPlugin } from '../../../types';
+import type { ReplayPlugin } from '../../../types';
 declare type Options = SequentialIdOptions & {
     warnOnMissingId: boolean;
 };

packages/rrweb/typings/record/iframe-manager.d.ts

@@ -1,5 +1,5 @@
-import { Mirror, serializedNodeWithId } from 'rrweb-snapshot';
-import { mutationCallBack } from '../types';
+import type { Mirror, serializedNodeWithId } from 'rrweb-snapshot';
+import type { mutationCallBack } from '../types';
 export declare class IframeManager {
     private iframes;
     private mutationCb;

packages/rrweb/typings/record/mutation.d.ts

@@ -1,4 +1,4 @@
-import { mutationRecord, MutationBufferParam } from '../types';
+import type { mutationRecord, MutationBufferParam } from '../types';
 export default class MutationBuffer {
     private frozen;
     private locked;

packages/rrweb/typings/record/observers/canvas/2d.d.ts

@@ -1,3 +1,3 @@
-import { Mirror } from 'rrweb-snapshot';
+import type { Mirror } from 'rrweb-snapshot';
 import { blockClass, canvasManagerMutationCallback, IWindow, listenerHandler } from '../../../types';
 export default function initCanvas2DMutationObserver(cb: canvasManagerMutationCallback, win: IWindow, blockClass: blockClass, mirror: Mirror): listenerHandler;

packages/rrweb/typings/record/observers/canvas/canvas-manager.d.ts

@@ -1,5 +1,5 @@
-import { Mirror } from 'rrweb-snapshot';
-import { blockClass, canvasMutationCallback, IWindow } from '../../../types';
+import type { Mirror } from 'rrweb-snapshot';
+import type { blockClass, canvasMutationCallback, IWindow } from '../../../types';
 export declare type RafStamps = {
     latestId: number;
     invokeId: number | null;

packages/rrweb/typings/record/observers/canvas/canvas.d.ts

@@ -1,2 +1,2 @@
-import { blockClass, IWindow, listenerHandler } from '../../../types';
+import type { blockClass, IWindow, listenerHandler } from '../../../types';
 export default function initCanvasContextObserver(win: IWindow, blockClass: blockClass): listenerHandler;

packages/rrweb/typings/record/observers/canvas/serialize-args.d.ts

@@ -1,4 +1,4 @@
-import { IWindow, CanvasArg } from '../../../types';
+import type { IWindow, CanvasArg } from '../../../types';
 export declare function variableListFor(ctx: RenderingContext, ctor: string): any[];
 export declare const saveWebGLVar: (value: any, win: IWindow, ctx: RenderingContext) => number | void;
 export declare function serializeArg(value: any, win: IWindow, ctx: RenderingContext): CanvasArg;

packages/rrweb/typings/record/observers/canvas/webgl.d.ts

@@ -1,3 +1,3 @@
-import { Mirror } from 'rrweb-snapshot';
+import type { Mirror } from 'rrweb-snapshot';
 import { blockClass, canvasManagerMutationCallback, IWindow, listenerHandler } from '../../../types';
 export default function initCanvasWebGLMutationObserver(cb: canvasManagerMutationCallback, win: IWindow, blockClass: blockClass, mirror: Mirror): listenerHandler;

packages/rrweb/typings/record/shadow-dom-manager.d.ts

@@ -1,5 +1,5 @@
-import { mutationCallBack, scrollCallback, MutationBufferParam, SamplingStrategy } from '../types';
-import { Mirror } from 'rrweb-snapshot';
+import type { mutationCallBack, scrollCallback, MutationBufferParam, SamplingStrategy } from '../types';
+import type { Mirror } from 'rrweb-snapshot';
 declare type BypassOptions = Omit<MutationBufferParam, 'doc' | 'mutationCb' | 'mirror' | 'shadowDomManager'> & {
     sampling: SamplingStrategy;
 };

packages/rrweb/typings/record/workers/image-bitmap-data-url-worker.d.ts

@@ -1,4 +1,4 @@
-import { ImageBitmapDataURLWorkerParams, ImageBitmapDataURLWorkerResponse } from '../../types';
+import type { ImageBitmapDataURLWorkerParams, ImageBitmapDataURLWorkerResponse } from '../../types';
 export interface ImageBitmapDataURLRequestWorker {
     postMessage: (message: ImageBitmapDataURLWorkerParams, transfer?: [ImageBitmap]) => void;
     onmessage: (message: MessageEvent<ImageBitmapDataURLWorkerResponse>) => void;

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 {};

packages/rrweb/typings/types.d.ts

@@ -1,9 +1,10 @@
-import { serializedNodeWithId, Mirror, INode, MaskInputOptions, SlimDOMOptions, MaskInputFn, MaskTextFn } from 'rrweb-snapshot';
-import { PackFn, UnpackFn } from './packer/base';
-import { IframeManager } from './record/iframe-manager';
-import { ShadowDomManager } from './record/shadow-dom-manager';
+import type { serializedNodeWithId, Mirror, INode, MaskInputOptions, SlimDOMOptions, MaskInputFn, MaskTextFn } from 'rrweb-snapshot';
+import type { PackFn, UnpackFn } from './packer/base';
+import type { IframeManager } from './record/iframe-manager';
+import type { ShadowDomManager } from './record/shadow-dom-manager';
 import type { Replayer } from './replay';
-import { CanvasManager } from './record/observers/canvas/canvas-manager';
+import type { RRNode } from 'rrdom/es/virtual-dom';
+import type { CanvasManager } from './record/observers/canvas/canvas-manager';
 export declare enum EventType {
     DomContentLoaded = 0,
     Load = 1,
@@ -115,6 +116,10 @@ export declare type eventWithTime = event & {
     timestamp: number;
     delay?: number;
 };
+export declare type canvasEventWithTime = eventWithTime & {
+    type: EventType.IncrementalSnapshot;
+    data: canvasMutationData;
+};
 export declare type blockClass = string | RegExp;
 export declare type maskTextClass = string | RegExp;
 export declare type SamplingStrategy = Partial<{
@@ -464,6 +469,7 @@ export declare type playerConfig = {
         strokeStyle?: string;
     };
     unpackFn?: UnpackFn;
+    useVirtualDom: boolean;
     plugins?: ReplayPlugin[];
 };
 export declare type playerMetaData = {
@@ -472,7 +478,7 @@ export declare type playerMetaData = {
     totalTime: number;
 };
 export declare type missingNode = {
-    node: Node;
+    node: Node | RRNode;
     mutation: addedNodeMutation;
 };
 export declare type missingNodeMap = {
@@ -507,9 +513,6 @@ export declare enum ReplayerEvents {
     StateChange = "state-change",
     PlayBack = "play-back"
 }
-export declare type ElementState = {
-    scroll?: [number, number];
-};
 export declare type KeepIframeSrcFn = (src: string) => boolean;
 declare global {
     interface Window {

packages/rrweb/typings/utils.d.ts

@@ -1,5 +1,6 @@
-import { throttleOptions, listenerHandler, hookResetter, blockClass, addedNodeMutation, removedNodeMutation, textMutation, attributeMutation, mutationData, scrollData, inputData, DocumentDimension, IWindow, DeprecatedMirror } from './types';
-import { Mirror } from 'rrweb-snapshot';
+import type { throttleOptions, listenerHandler, hookResetter, blockClass, addedNodeMutation, DocumentDimension, IWindow, DeprecatedMirror, textMutation } from './types';
+import type { IMirror, Mirror } from 'rrweb-snapshot';
+import type { RRNode, RRIFrameElement } from 'rrdom/es/virtual-dom';
 export declare function on(type: string, fn: EventListenerOrEventListenerObject, target?: Document | IWindow): listenerHandler;
 export declare let _mirror: DeprecatedMirror;
 export declare function throttle<T>(func: (arg: T) => void, wait: number, options?: throttleOptions): (arg: T) => void;
@@ -15,38 +16,6 @@ export declare function isIgnored(n: Node, mirror: Mirror): boolean;
 export declare function isAncestorRemoved(target: Node, mirror: Mirror): boolean;
 export declare function isTouchEvent(event: MouseEvent | TouchEvent): event is TouchEvent;
 export declare function polyfill(win?: Window & typeof globalThis): void;
-export declare type TreeNode = {
-    id: number;
-    mutation: addedNodeMutation;
-    parent?: TreeNode;
-    children: Record<number, TreeNode>;
-    texts: textMutation[];
-    attributes: attributeMutation[];
-};
-export declare class TreeIndex {
-    tree: Record<number, TreeNode>;
-    private removeNodeMutations;
-    private textMutations;
-    private attributeMutations;
-    private indexes;
-    private removeIdSet;
-    private scrollMap;
-    private inputMap;
-    constructor();
-    add(mutation: addedNodeMutation): void;
-    remove(mutation: removedNodeMutation, mirror: Mirror): void;
-    text(mutation: textMutation): void;
-    attribute(mutation: attributeMutation): void;
-    scroll(d: scrollData): void;
-    input(d: inputData): void;
-    flush(): {
-        mutationData: mutationData;
-        scrollMap: TreeIndex['scrollMap'];
-        inputMap: TreeIndex['inputMap'];
-    };
-    private reset;
-    idRemoved(id: number): boolean;
-}
 declare type ResolveTree = {
     value: addedNodeMutation;
     children: ResolveTree[];
@@ -56,12 +25,17 @@ export declare function queueToResolveTrees(queue: addedNodeMutation[]): Resolve
 export declare function iterateResolveTree(tree: ResolveTree, cb: (mutation: addedNodeMutation) => unknown): void;
 export declare type AppendedIframe = {
     mutationInQueue: addedNodeMutation;
-    builtNode: HTMLIFrameElement;
+    builtNode: HTMLIFrameElement | RRIFrameElement;
 };
-export declare function isSerializedIframe(n: Node, mirror: Mirror): n is HTMLIFrameElement;
+export declare function isSerializedIframe<TNode extends Node | RRNode>(n: TNode, mirror: IMirror<TNode>): boolean;
 export declare function getBaseDimension(node: Node, rootIframe: Node): DocumentDimension;
-export declare function hasShadowRoot<T extends Node>(n: T): n is T & {
+export declare function hasShadowRoot<T extends Node | RRNode>(n: T): n is T & {
     shadowRoot: ShadowRoot;
 };
-export declare function getUniqueTextMutations(mutations: textMutation[]): textMutation[];
+export declare function getNestedRule(rules: CSSRuleList, position: number[]): CSSGroupingRule;
+export declare function getPositionsAndIndex(nestedIndex: number[]): {
+    positions: number[];
+    index: number | undefined;
+};
+export declare function uniqueTextMutations(mutations: textMutation[]): textMutation[];
 export {};