Merge branch 'master' into jb/perf/replay

rrweb-io · Aug 17, 2023 · bc2c8f2 · bc2c8f2
2 parents eed46b0 + 58c9104
commit bc2c8f2
Show file tree

Hide file tree

Showing 36 changed files with 472 additions and 216 deletions.
diff --git a/.changeset/cuddly-readers-warn.md b/.changeset/cuddly-readers-warn.md
@@ -0,0 +1,2 @@
+---
+---
diff --git a/.changeset/curvy-apples-lay.md b/.changeset/curvy-apples-lay.md
@@ -0,0 +1,6 @@
+---
+'rrweb-snapshot': patch
+'rrweb': patch
+---
+
+Extend to run fixBrowserCompatibilityIssuesInCSS over inline stylesheets
diff --git a/.changeset/itchy-dryers-double.md b/.changeset/itchy-dryers-double.md
@@ -0,0 +1,8 @@
+---
+'rrweb-player': patch
+'rrweb-snapshot': patch
+'rrweb': patch
+'@rrweb/types': patch
+---
+
+Upgrade all projects to typescript 4.9.5
diff --git a/.changeset/nervous-mirrors-perform.md b/.changeset/nervous-mirrors-perform.md
@@ -0,0 +1,6 @@
+---
+'rrweb-snapshot': patch
+'rrweb': patch
+---
+
+Perf: Avoid creation of intermediary array when iterating over style rules
diff --git a/.changeset/pre.json b/.changeset/pre.json
@@ -20,6 +20,7 @@
     "clean-shrimps-lay",
     "cold-eyes-hunt",
     "controller-finish-flag",
+    "curvy-apples-lay",
     "date-now-guard",
     "eight-terms-hunt",
     "empty-bikes-cheer",
@@ -32,6 +33,8 @@
     "fresh-spoons-drive",
     "gold-terms-look",
     "grumpy-ways-own",
+    "itchy-dryers-double",
+    "khaki-dots-bathe",
     "large-ants-prove",
     "lazy-toes-confess",
     "little-radios-thank",
@@ -53,6 +56,7 @@
     "real-masks-explode",
     "real-trains-switch",
     "rich-crews-protect",
+    "rich-jars-remember",
     "serious-ants-juggle",
     "sixty-impalas-laugh",
     "small-olives-arrive",

diff --git a/.changeset/rich-jars-remember.md b/.changeset/rich-jars-remember.md
@@ -0,0 +1,5 @@
+---
+'rrweb-snapshot': patch
+---
+
+Add workaround for Chrome/Edge CSS `@import` escaping bug: https://bugs.chromium.org/p/chromium/issues/detail?id=1472259
diff --git a/.github/workflows/style-check.yml b/.github/workflows/style-check.yml
@@ -65,7 +65,7 @@ jobs:
           node-version: 16
           cache: 'yarn'
       - name: Install Dependencies
-        run: yarn
+        run: yarn install --frozen-lockfile
       - name: Prettier Check
         run: yarn prettier --check '**/*.{ts,md}'
 
@@ -85,7 +85,7 @@ jobs:
           node-version: 16
           cache: 'yarn'
       - name: Install Dependencies
-        run: yarn
+        run: yarn install --frozen-lockfile
       - name: Prettify Code
         run: yarn prettier --write '**/*.{ts,md}'
       - name: Commit Changes

diff --git a/package.json b/package.json
@@ -33,7 +33,7 @@
     "markdownlint-cli": "^0.31.1",
     "prettier": "2.8.4",
     "turbo": "^1.2.4",
-    "typescript": "^4.7.3"
+    "typescript": "^4.9.5"
   },
   "scripts": {
     "build:all": "NODE_OPTIONS='--max-old-space-size=4096' yarn run concurrently --success=all -r -m=1 'yarn workspaces-to-typescript-project-references' 'yarn turbo run prepublish'",
@@ -49,7 +49,8 @@
     "release": "yarn build:all && changeset publish"
   },
   "resolutions": {
-    "**/jsdom/cssom": "https://registry.npmjs.org/rrweb-cssom/-/rrweb-cssom-0.6.0.tgz"
+    "**/jsdom/cssom": "https://registry.npmjs.org/rrweb-cssom/-/rrweb-cssom-0.6.0.tgz",
+    "**/@types/dom-webcodecs": "0.1.5"
   },
   "browserslist": [
     "defaults",

diff --git a/packages/rrdom-nodejs/CHANGELOG.md b/packages/rrdom-nodejs/CHANGELOG.md
@@ -1,5 +1,13 @@
 # rrdom-nodejs
 
+## 2.0.0-alpha.11
+
+### Patch Changes
+
+- Updated dependencies [[`11f6567`](https://github.com/rrweb-io/rrweb/commit/11f6567fd81ef9ed0f954a7b6d5e39653f56004f), [`efdc167`](https://github.com/rrweb-io/rrweb/commit/efdc167ca6c039d04af83612e3d92498bb9b41a7), [`efdc167`](https://github.com/rrweb-io/rrweb/commit/efdc167ca6c039d04af83612e3d92498bb9b41a7)]:
+  - rrweb-snapshot@2.0.0-alpha.11
+  - rrdom@2.0.0-alpha.11
+
 ## 2.0.0-alpha.10
 
 ### Patch Changes

diff --git a/packages/rrdom-nodejs/package.json b/packages/rrdom-nodejs/package.json
@@ -1,6 +1,6 @@
 {
   "name": "rrdom-nodejs",
-  "version": "2.0.0-alpha.10",
+  "version": "2.0.0-alpha.11",
   "scripts": {
     "dev": "rollup -c -w",
     "bundle": "rollup --config",
@@ -48,8 +48,8 @@
     "cssom": "^0.5.0",
     "cssstyle": "^2.3.0",
     "nwsapi": "^2.2.0",
-    "rrdom": "^2.0.0-alpha.10",
-    "rrweb-snapshot": "^2.0.0-alpha.10"
+    "rrdom": "^2.0.0-alpha.11",
+    "rrweb-snapshot": "^2.0.0-alpha.11"
   },
   "browserslist": [
     "supports es6-class"

diff --git a/packages/rrdom/CHANGELOG.md b/packages/rrdom/CHANGELOG.md
@@ -1,5 +1,12 @@
 # rrdom
 
+## 2.0.0-alpha.11
+
+### Patch Changes
+
+- Updated dependencies [[`11f6567`](https://github.com/rrweb-io/rrweb/commit/11f6567fd81ef9ed0f954a7b6d5e39653f56004f), [`efdc167`](https://github.com/rrweb-io/rrweb/commit/efdc167ca6c039d04af83612e3d92498bb9b41a7), [`efdc167`](https://github.com/rrweb-io/rrweb/commit/efdc167ca6c039d04af83612e3d92498bb9b41a7)]:
+  - rrweb-snapshot@2.0.0-alpha.11
+
 ## 2.0.0-alpha.10
 
 ### Patch Changes

diff --git a/packages/rrdom/package.json b/packages/rrdom/package.json
@@ -1,6 +1,6 @@
 {
   "name": "rrdom",
-  "version": "2.0.0-alpha.10",
+  "version": "2.0.0-alpha.11",
   "homepage": "https://github.com/rrweb-io/rrweb/tree/main/packages/rrdom#readme",
   "license": "MIT",
   "main": "lib/rrdom.cjs",
@@ -32,7 +32,7 @@
   },
   "devDependencies": {
     "@rollup/plugin-commonjs": "^20.0.0",
-    "@rrweb/types": "^2.0.0-alpha.10",
+    "@rrweb/types": "^2.0.0-alpha.11",
     "@types/jest": "^27.4.1",
     "@types/puppeteer": "^5.4.4",
     "@typescript-eslint/eslint-plugin": "^5.23.0",
@@ -47,6 +47,6 @@
     "ts-jest": "^27.1.3"
   },
   "dependencies": {
-    "rrweb-snapshot": "^2.0.0-alpha.10"
+    "rrweb-snapshot": "^2.0.0-alpha.11"
   }
 }
diff --git a/packages/rrvideo/CHANGELOG.md b/packages/rrvideo/CHANGELOG.md
@@ -1,5 +1,12 @@
 # rrvideo
 
+## 2.0.0-alpha.11
+
+### Patch Changes
+
+- Updated dependencies [[`efdc167`](https://github.com/rrweb-io/rrweb/commit/efdc167ca6c039d04af83612e3d92498bb9b41a7)]:
+  - rrweb-player@2.0.0-alpha.11
+
 ## 2.0.0-alpha.10
 
 ### Patch Changes

diff --git a/packages/rrvideo/package.json b/packages/rrvideo/package.json
@@ -1,6 +1,6 @@
 {
   "name": "rrvideo",
-  "version": "2.0.0-alpha.10",
+  "version": "2.0.0-alpha.11",
   "description": "transform rrweb session into video",
   "main": "build/index.js",
   "bin": {
@@ -26,13 +26,13 @@
     "@types/node": "^18.15.11",
     "jest": "^27.5.1",
     "ts-jest": "^27.1.3",
-    "@rrweb/types": "^2.0.0-alpha.10"
+    "@rrweb/types": "^2.0.0-alpha.11"
   },
   "dependencies": {
     "@open-tech-world/cli-progress-bar": "^2.0.2",
     "fs-extra": "^11.1.1",
     "minimist": "^1.2.5",
     "playwright": "^1.32.1",
-    "rrweb-player": "^2.0.0-alpha.10"
+    "rrweb-player": "^2.0.0-alpha.11"
   }
 }
diff --git a/packages/rrweb-player/CHANGELOG.md b/packages/rrweb-player/CHANGELOG.md
@@ -1,5 +1,14 @@
 # rrweb-player
 
+## 2.0.0-alpha.11
+
+### Patch Changes
+
+- [#1287](https://github.com/rrweb-io/rrweb/pull/1287) [`efdc167`](https://github.com/rrweb-io/rrweb/commit/efdc167ca6c039d04af83612e3d92498bb9b41a7) Thanks [@Juice10](https://github.com/Juice10)! - Upgrade all projects to typescript 4.9.5
+
+- Updated dependencies [[`11f6567`](https://github.com/rrweb-io/rrweb/commit/11f6567fd81ef9ed0f954a7b6d5e39653f56004f), [`efdc167`](https://github.com/rrweb-io/rrweb/commit/efdc167ca6c039d04af83612e3d92498bb9b41a7)]:
+  - rrweb@2.0.0-alpha.11
+
 ## 2.0.0-alpha.10
 
 ### Patch Changes

diff --git a/packages/rrweb-player/package.json b/packages/rrweb-player/package.json
@@ -1,10 +1,10 @@
 {
   "name": "rrweb-player",
-  "version": "2.0.0-alpha.10",
+  "version": "2.0.0-alpha.11",
   "devDependencies": {
     "@rollup/plugin-commonjs": "^22.0.0",
     "@rollup/plugin-node-resolve": "^13.2.1",
-    "@rrweb/types": "^2.0.0-alpha.10",
+    "@rrweb/types": "^2.0.0-alpha.11",
     "@types/offscreencanvas": "^2019.6.4",
     "eslint-config-google": "^0.14.0",
     "eslint-plugin-svelte3": "^4.0.0",
@@ -17,14 +17,14 @@
     "rollup-plugin-typescript2": "^0.31.2",
     "rollup-plugin-web-worker-loader": "^1.6.1",
     "sirv-cli": "^0.4.4",
-    "svelte": "^3.2.0",
-    "svelte-check": "^1.4.0",
-    "svelte-preprocess": "^4.0.0",
+    "svelte": "^3.59.2",
+    "svelte-check": "^3.0.1",
+    "svelte-preprocess": "^5.0.0",
     "tslib": "^2.0.0"
   },
   "dependencies": {
     "@tsconfig/svelte": "^1.0.0",
-    "rrweb": "^2.0.0-alpha.10"
+    "rrweb": "^2.0.0-alpha.11"
   },
   "scripts": {
     "build": "rollup -c",

diff --git a/packages/rrweb-snapshot/CHANGELOG.md b/packages/rrweb-snapshot/CHANGELOG.md
@@ -1,5 +1,15 @@
 # rrweb-snapshot
 
+## 2.0.0-alpha.11
+
+### Patch Changes
+
+- [#1279](https://github.com/rrweb-io/rrweb/pull/1279) [`11f6567`](https://github.com/rrweb-io/rrweb/commit/11f6567fd81ef9ed0f954a7b6d5e39653f56004f) Thanks [@eoghanmurray](https://github.com/eoghanmurray)! - Extend to run fixBrowserCompatibilityIssuesInCSS over inline stylesheets
+
+- [#1287](https://github.com/rrweb-io/rrweb/pull/1287) [`efdc167`](https://github.com/rrweb-io/rrweb/commit/efdc167ca6c039d04af83612e3d92498bb9b41a7) Thanks [@Juice10](https://github.com/Juice10)! - Upgrade all projects to typescript 4.9.5
+
+- [#1287](https://github.com/rrweb-io/rrweb/pull/1287) [`efdc167`](https://github.com/rrweb-io/rrweb/commit/efdc167ca6c039d04af83612e3d92498bb9b41a7) Thanks [@Juice10](https://github.com/Juice10)! - Add workaround for Chrome/Edge CSS `@import` escaping bug: https://bugs.chromium.org/p/chromium/issues/detail?id=1472259
+
 ## 2.0.0-alpha.10
 
 ### Patch Changes

diff --git a/packages/rrweb-snapshot/package.json b/packages/rrweb-snapshot/package.json
@@ -1,6 +1,6 @@
 {
   "name": "rrweb-snapshot",
-  "version": "2.0.0-alpha.10",
+  "version": "2.0.0-alpha.11",
   "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/css.ts b/packages/rrweb-snapshot/src/css.ts
@@ -345,7 +345,7 @@ export function parse(css: string, options: ParserOptions = {}) {
     whitespace();
     comments(rules);
     while (css.length && css.charAt(0) !== '}' && (node = atrule() || rule())) {
-      if (node !== false) {
+      if (node) {
         rules.push(node);
         comments(rules);
       }
@@ -383,7 +383,7 @@ export function parse(css: string, options: ParserOptions = {}) {
   function comments(rules: Rule[] = []) {
     let c: Comment | void;
     while ((c = comment())) {
-      if (c !== false) {
+      if (c) {
         rules.push(c);
       }
       c = comment();

diff --git a/packages/rrweb-snapshot/src/snapshot.ts b/packages/rrweb-snapshot/src/snapshot.ts
@@ -19,10 +19,9 @@ import {
   isShadowRoot,
   maskInputValue,
   isNativeShadowDom,
-  getCssRulesString,
+  stringifyStylesheet,
   getInputType,
   toLowerCase,
-  validateStringifiedCssRule,
 } from './utils';
 
 let _id = 1;
@@ -51,20 +50,6 @@ function getValidTagName(element: HTMLElement): Lowercase<string> {
   return processedTagName;
 }
 
-function stringifyStyleSheet(sheet: CSSStyleSheet): string {
-  if (sheet.cssRules.length === 0) {
-    return '';
-  }
-
-  const buffer: string[] = new Array<string>(sheet.cssRules.length);
-
-  for (let i = 0; i < sheet.cssRules.length; i++) {
-    const rule = sheet.cssRules[i];
-    buffer[i] = rule.cssText ? validateStringifiedCssRule(rule.cssText) : '';
-  }
-  return buffer.join('');
-}
-
 function extractOrigin(url: string): string {
   let origin = '';
   if (url.indexOf('//') > -1) {
@@ -576,7 +561,7 @@ function serializeTextNode(
         // to _only_ include the current rule(s) added by the text node.
         // So we'll be conservative and keep textContent as-is.
       } else if ((n.parentNode as HTMLStyleElement).sheet?.cssRules) {
-        textContent = stringifyStyleSheet(
+        textContent = stringifyStylesheet(
           (n.parentNode as HTMLStyleElement).sheet!,
         );
       }
@@ -673,7 +658,7 @@ function serializeElementNode(
     });
     let cssText: string | null = null;
     if (stylesheet) {
-      cssText = getCssRulesString(stylesheet);
+      cssText = stringifyStylesheet(stylesheet);
     }
     if (cssText) {
       delete attributes.rel;
@@ -688,7 +673,7 @@ function serializeElementNode(
     // TODO: Currently we only try to get dynamic stylesheet when it is an empty style element
     !(n.innerText || n.textContent || '').trim().length
   ) {
-    const cssText = getCssRulesString(
+    const cssText = stringifyStylesheet(
       (n as HTMLStyleElement).sheet as CSSStyleSheet,
     );
     if (cssText) {