[DEV-1035] Remove animation CSS as a config (#19)

SaolaAI · Aug 27, 2024 · 51139b9 · 51139b9
1 parent 0245c23
commit 51139b9
Show file tree

Hide file tree

Showing 19 changed files with 100 additions and 27 deletions.
diff --git a/packages/rrdom-nodejs/CHANGELOG.md b/packages/rrdom-nodejs/CHANGELOG.md
@@ -1,5 +1,13 @@
 # rrdom-nodejs
 
+## 2.0.8
+
+### Patch Changes
+
+- Updated dependencies []:
+  - @saola.ai/[email protected]
+  - @saola.ai/[email protected]
+
 ## 2.0.7
 
 ### Patch Changes

diff --git a/packages/rrdom-nodejs/package.json b/packages/rrdom-nodejs/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@saola.ai/rrdom-nodejs",
-  "version": "2.0.7",
+  "version": "2.0.8",
   "scripts": {
     "dev": "vite build --watch",
     "build": "tsc -noEmit && vite build",
@@ -55,8 +55,8 @@
     "cssom": "^0.5.0",
     "cssstyle": "^2.3.0",
     "nwsapi": "^2.2.0",
-    "@saola.ai/rrdom": "^2.0.7",
-    "@saola.ai/rrweb-snapshot": "^2.0.7"
+    "@saola.ai/rrdom": "^2.0.8",
+    "@saola.ai/rrweb-snapshot": "^2.0.8"
   },
   "browserslist": [
     "supports es6-class"

diff --git a/packages/rrdom/CHANGELOG.md b/packages/rrdom/CHANGELOG.md
@@ -1,5 +1,12 @@
 # rrdom
 
+## 2.0.8
+
+### Patch Changes
+
+- Updated dependencies []:
+  - @saola.ai/[email protected]
+
 ## 2.0.7
 
 ### Patch Changes

diff --git a/packages/rrdom/package.json b/packages/rrdom/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@saola.ai/rrdom",
-  "version": "2.0.7",
+  "version": "2.0.8",
   "homepage": "https://github.com/rrweb-io/rrweb/tree/main/packages/rrdom#readme",
   "license": "MIT",
   "type": "module",
@@ -41,7 +41,7 @@
     "url": "https://github.com/rrweb-io/rrweb/issues"
   },
   "devDependencies": {
-    "@saola.ai/rrweb-types": "^2.0.7",
+    "@saola.ai/rrweb-types": "^2.0.8",
     "@types/puppeteer": "^5.4.4",
     "@typescript-eslint/eslint-plugin": "^5.23.0",
     "@typescript-eslint/parser": "^5.23.0",
@@ -52,6 +52,6 @@
     "vite-plugin-dts": "^3.8.1"
   },
   "dependencies": {
-    "@saola.ai/rrweb-snapshot": "^2.0.7"
+    "@saola.ai/rrweb-snapshot": "^2.0.8"
   }
 }
diff --git a/packages/rrvideo/CHANGELOG.md b/packages/rrvideo/CHANGELOG.md
@@ -1,5 +1,12 @@
 # rrvideo
 
+## 2.0.8
+
+### Patch Changes
+
+- Updated dependencies []:
+  - @saola.ai/[email protected]
+
 ## 2.0.7
 
 ### Patch Changes

diff --git a/packages/rrvideo/package.json b/packages/rrvideo/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@saola.ai/rrvideo",
-  "version": "2.0.7",
+  "version": "2.0.8",
   "description": "transform rrweb session into video",
   "main": "build/index.js",
   "bin": {
@@ -27,13 +27,13 @@
     "@types/node": "^18.15.11",
     "jest": "^27.5.1",
     "ts-jest": "^27.1.3",
-    "@saola.ai/rrweb-types": "^2.0.7"
+    "@saola.ai/rrweb-types": "^2.0.8"
   },
   "dependencies": {
     "@open-tech-world/cli-progress-bar": "^2.0.2",
     "fs-extra": "^11.1.1",
     "minimist": "^1.2.5",
     "playwright": "^1.32.1",
-    "@saola.ai/rrweb-player": "^2.0.7"
+    "@saola.ai/rrweb-player": "^2.0.8"
   }
 }
diff --git a/packages/rrweb-player/CHANGELOG.md b/packages/rrweb-player/CHANGELOG.md
@@ -1,5 +1,7 @@
 # rrweb-player
 
+## 2.0.8
+
 ## 2.0.7
 
 ## 2.0.6

diff --git a/packages/rrweb-player/package.json b/packages/rrweb-player/package.json
@@ -1,8 +1,8 @@
 {
   "name": "@saola.ai/rrweb-player",
-  "version": "2.0.7",
+  "version": "2.0.8",
   "devDependencies": {
-    "@saola.ai/rrweb-types": "^2.0.7",
+    "@saola.ai/rrweb-types": "^2.0.8",
     "@sveltejs/adapter-auto": "^3.0.0",
     "@sveltejs/kit": "^2.0.0",
     "@sveltejs/package": "^2.0.0",

diff --git a/packages/rrweb-snapshot/CHANGELOG.md b/packages/rrweb-snapshot/CHANGELOG.md
@@ -1,5 +1,11 @@
 # rrweb-snapshot
 
+## 2.0.8
+
+### Patch Changes
+
+- [DEV-1035] Remove animation CSS as a config
+
 ## 2.0.7
 
 ### Patch Changes

diff --git a/packages/rrweb-snapshot/package.json b/packages/rrweb-snapshot/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@saola.ai/rrweb-snapshot",
-  "version": "2.0.7",
+  "version": "2.0.8",
   "description": "rrweb's component to take a snapshot of DOM, aka DOM serializer",
   "scripts": {
     "prepare": "npm run prepack",

diff --git a/packages/rrweb-snapshot/src/rebuild.ts b/packages/rrweb-snapshot/src/rebuild.ts
@@ -66,7 +66,11 @@ const MEDIA_SELECTOR = /(max|min)-device-(width|height)/;
 const MEDIA_SELECTOR_GLOBAL = new RegExp(MEDIA_SELECTOR.source, 'g');
 const HOVER_SELECTOR = /([^\\]):hover/;
 const HOVER_SELECTOR_GLOBAL = new RegExp(HOVER_SELECTOR.source, 'g');
-export function adaptCssForReplay(cssText: string, cache: BuildCache): string {
+export function adaptCssForReplay(
+  cssText: string,
+  cache: BuildCache,
+  removeAnimationCss = false,
+): string {
   const cachedStyle = cache?.stylesWithHoverClass.get(cssText);
   if (cachedStyle) return cachedStyle;
 
@@ -134,7 +138,7 @@ export function adaptCssForReplay(cssText: string, cache: BuildCache): string {
       return media.replace(MEDIA_SELECTOR_GLOBAL, '$1-$2');
     });
   }
-  result = result.replace(/animation.+?;/g, '');
+  if (removeAnimationCss) result = result.replace(/animation.+?;/g, '');
   cache?.stylesWithHoverClass.set(cssText, result);
   return result;
 }
@@ -152,9 +156,10 @@ function buildNode(
     doc: Document;
     hackCss: boolean;
     cache: BuildCache;
+    removeAnimationCss: boolean;
   },
 ): Node | null {
-  const { doc, hackCss, cache } = options;
+  const { doc, hackCss, cache, removeAnimationCss } = options;
   switch (n.type) {
     case NodeType.Document:
       return doc.implementation.createDocument(null, '', null);
@@ -225,7 +230,7 @@ function buildNode(
         const isTextarea = tagName === 'textarea' && name === 'value';
         const isRemoteOrDynamicCss = tagName === 'style' && name === '_cssText';
         if (isRemoteOrDynamicCss && hackCss && typeof value === 'string') {
-          value = adaptCssForReplay(value, cache);
+          value = adaptCssForReplay(value, cache, removeAnimationCss);
         }
         if ((isTextarea || isRemoteOrDynamicCss) && typeof value === 'string') {
           node.appendChild(doc.createTextNode(value));
@@ -406,6 +411,7 @@ export function buildNodeWithSN(
      */
     afterAppend?: (n: Node, id: number) => unknown;
     cache: BuildCache;
+    removeAnimationCss: boolean;
   },
 ): Node | null {
   const {
@@ -415,6 +421,7 @@ export function buildNodeWithSN(
     hackCss = true,
     afterAppend,
     cache,
+    removeAnimationCss,
   } = options;
   /**
    * Add a check to see if the node is already in the mirror. If it is, we can skip the whole process.
@@ -429,7 +436,7 @@ export function buildNodeWithSN(
     // For safety concern, check if the node in mirror is the same as the node we are trying to build
     if (isNodeMetaEqual(meta, n)) return mirror.getNode(n.id);
   }
-  let node = buildNode(n, { doc, hackCss, cache });
+  let node = buildNode(n, { doc, hackCss, cache, removeAnimationCss });
   if (!node) {
     return null;
   }
@@ -481,6 +488,7 @@ export function buildNodeWithSN(
         hackCss,
         afterAppend,
         cache,
+        removeAnimationCss,
       });
       if (!childNode) {
         console.warn('Failed to rebuild', childN);
@@ -570,6 +578,7 @@ function rebuild(
     afterAppend?: (n: Node, id: number) => unknown;
     cache: BuildCache;
     mirror: Mirror;
+    removeAnimationCss: boolean;
   },
 ): Node | null {
   const {
@@ -579,6 +588,7 @@ function rebuild(
     afterAppend,
     cache,
     mirror = new Mirror(),
+    removeAnimationCss,
   } = options;
   const node = buildNodeWithSN(n, {
     doc,
@@ -587,6 +597,7 @@ function rebuild(
     hackCss,
     afterAppend,
     cache,
+    removeAnimationCss,
   });
   visit(mirror, (visitedNode) => {
     if (onVisit) {

diff --git a/packages/rrweb/CHANGELOG.md b/packages/rrweb/CHANGELOG.md
@@ -1,5 +1,16 @@
 # rrweb
 
+## 2.0.8
+
+### Patch Changes
+
+- [DEV-1035] Remove animation CSS as a config
+
+- Updated dependencies []:
+  - @saola.ai/[email protected]
+  - @saola.ai/[email protected]
+  - @saola.ai/[email protected]
+
 ## 2.0.7
 
 ### Patch Changes

diff --git a/packages/rrweb/package.json b/packages/rrweb/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@saola.ai/rrweb",
-  "version": "2.0.7",
+  "version": "2.0.8",
   "description": "record and replay the web",
   "scripts": {
     "prepare": "npm run prepack",
@@ -83,12 +83,12 @@
     "vite-plugin-dts": "^3.8.1"
   },
   "dependencies": {
-    "@saola.ai/rrweb-types": "^2.0.7",
+    "@saola.ai/rrweb-types": "^2.0.8",
     "@types/css-font-loading-module": "0.0.7",
     "@xstate/fsm": "^1.4.0",
     "base64-arraybuffer": "^1.0.1",
     "mitt": "^3.0.0",
-    "@saola.ai/rrdom": "^2.0.7",
-    "@saola.ai/rrweb-snapshot": "^2.0.7"
+    "@saola.ai/rrdom": "^2.0.8",
+    "@saola.ai/rrweb-snapshot": "^2.0.8"
   }
 }
diff --git a/packages/rrweb/src/replay/index.ts b/packages/rrweb/src/replay/index.ts
@@ -198,6 +198,7 @@ export class Replayer {
       mouseTail: defaultMouseTailConfig,
       useVirtualDom: true, // Virtual-dom optimization is enabled by default.
       logger: console,
+      removeAnimationCss: false,
     };
     this.config = Object.assign({}, defaultConfig, config);
 
@@ -862,6 +863,7 @@ export class Replayer {
       afterAppend,
       cache: this.cache,
       mirror: this.mirror,
+      removeAnimationCss: this.config.removeAnimationCss,
     });
     afterAppend(this.iframe.contentDocument, event.data.node.id);
 
@@ -968,6 +970,7 @@ export class Replayer {
       skipChild: false,
       afterAppend,
       cache: this.cache,
+      removeAnimationCss: this.config.removeAnimationCss,
     });
     afterAppend(iframeEl.contentDocument! as Document, mutation.node.id);
 
@@ -1568,6 +1571,7 @@ export class Replayer {
         skipChild: true,
         hackCss: true,
         cache: this.cache,
+        removeAnimationCss: this.config.removeAnimationCss,
         /**
          * caveat: `afterAppend` only gets called on child nodes of target
          * we have to call it again below when this target was added to the DOM
@@ -1782,6 +1786,7 @@ export class Replayer {
                     skipChild: true,
                     hackCss: true,
                     cache: this.cache,
+                    removeAnimationCss: this.config.removeAnimationCss,
                   });
                   const siblingNode = target.nextSibling;
                   const parentNode = target.parentNode;

diff --git a/packages/rrweb/src/types.ts b/packages/rrweb/src/types.ts
@@ -196,6 +196,7 @@ export type playerConfig = {
     warn: (...args: Parameters<typeof console.warn>) => void;
   };
   plugins?: ReplayPlugin[];
+  removeAnimationCss: boolean;
 };
 
 export type missingNode = {

diff --git a/packages/types/CHANGELOG.md b/packages/types/CHANGELOG.md
@@ -1,5 +1,12 @@
 # @rrweb/types
 
+## 2.0.8
+
+### Patch Changes
+
+- Updated dependencies []:
+  - @saola.ai/[email protected]
+
 ## 2.0.7
 
 ### Patch Changes

diff --git a/packages/types/package.json b/packages/types/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@saola.ai/rrweb-types",
-  "version": "2.0.7",
+  "version": "2.0.8",
   "publishConfig": {
     "access": "public"
   },
@@ -52,7 +52,7 @@
   "dependencies": {
     "@changesets/cli": "^2.27.1",
     "@monorepo-utils/workspaces-to-typescript-project-references": "^2.8.2",
-    "@saola.ai/rrweb-snapshot": "^2.0.7",
+    "@saola.ai/rrweb-snapshot": "^2.0.8",
     "browserslist": "^4.22.1",
     "concurrently": "^7.1.0",
     "cssom": "https://registry.npmjs.org/rrweb-cssom/-/rrweb-cssom-0.6.0.tgz",

diff --git a/packages/web-extension/CHANGELOG.md b/packages/web-extension/CHANGELOG.md
@@ -1,5 +1,13 @@
 # @rrweb/web-extension
 
+## 2.0.8
+
+### Patch Changes
+
+- Updated dependencies []:
+  - @saola.ai/[email protected]
+  - @saola.ai/[email protected]
+
 ## 2.0.7
 
 ### Patch Changes