Merge branch 'master' of https://github.com/rrweb-io/rrweb into asset…

…-event
rrweb-io · Nov 21, 2023 · 31bf5c2 · 31bf5c2
2 parents 4c59716 + 8aea5b0
commit 31bf5c2
Show file tree

Hide file tree

Showing 97 changed files with 4,337 additions and 622 deletions.
diff --git a/.changeset/attribute-text-reductions.md b/.changeset/attribute-text-reductions.md
@@ -0,0 +1,5 @@
+---
+'rrweb': patch
+---
+
+Don't include redundant data from text/attribute mutations on just-added nodes
diff --git a/.changeset/calm-oranges-sin.md b/.changeset/calm-oranges-sin.md
@@ -0,0 +1,5 @@
+---
+'rrweb': patch
+---
+
+fix: Fix checking for `patchTarget` in `initAdoptedStyleSheetObserver`
diff --git a/.changeset/clean-plants-play.md b/.changeset/clean-plants-play.md
@@ -0,0 +1,9 @@
+---
+'rrweb': patch
+'@rrweb/types': patch
+---
+
+Compact style mutation fixes and improvements
+
+- fixes when style updates contain a 'var()' on a shorthand property #1246
+- further ensures that style mutations are compact by reverting to string method if it is shorter
diff --git a/.changeset/clean-shrimps-lay.md b/.changeset/clean-shrimps-lay.md
@@ -0,0 +1,7 @@
+---
+'rrweb': patch
+---
+
+feat: Add `ignoreSelector` option
+
+Similar to ignoreClass, but accepts a CSS selector so that you can use any CSS selector.
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/fluffy-planes-retire.md b/.changeset/fluffy-planes-retire.md
@@ -0,0 +1,5 @@
+---
+'rrweb': patch
+---
+
+Feat: Add support for replaying :defined pseudo-class of custom elements
diff --git a/.changeset/gold-apples-joke.md b/.changeset/gold-apples-joke.md
@@ -0,0 +1,5 @@
+---
+'rrweb': patch
+---
+
+ref: Avoid unnecessary cloning of objects or arrays
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/khaki-dots-bathe.md b/.changeset/khaki-dots-bathe.md
@@ -0,0 +1,2 @@
+---
+---
diff --git a/.changeset/lemon-lamps-switch.md b/.changeset/lemon-lamps-switch.md
@@ -0,0 +1,5 @@
+---
+'rrweb': patch
+---
+
+export eventWithTime for consumption by typescript code
diff --git a/.changeset/mighty-bulldogs-begin.md b/.changeset/mighty-bulldogs-begin.md
@@ -0,0 +1,5 @@
+---
+'@rrweb/web-extension': patch
+---
+
+Update `vite.config.ts` to account for all potential entry types.
diff --git a/.changeset/moody-dots-refuse.md b/.changeset/moody-dots-refuse.md
@@ -0,0 +1,5 @@
+---
+'rrweb': patch
+---
+
+use WeakMap for faster attributeCursor lookup while processing attribute mutations
diff --git a/.changeset/nervous-buses-pump.md b/.changeset/nervous-buses-pump.md
@@ -0,0 +1,5 @@
+---
+'rrweb': patch
+---
+
+fix: Resize and MediaInteraction events repeat generated after the iframe appeared
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/polite-olives-wave.md b/.changeset/polite-olives-wave.md
@@ -0,0 +1,5 @@
+---
+'rrweb': patch
+---
+
+Add 'recordDOM' config option to turn off recording of DOM (making recordings unreplayable). Specialist use case e.g. only heatmap click/scroll recording
diff --git a/.changeset/pre.json b/.changeset/pre.json
@@ -12,21 +12,39 @@
     "rrvideo": "2.0.0-alpha.6"
   },
   "changesets": [
+    "attribute-text-reductions",
+    "brave-numbers-joke",
     "calm-bulldogs-speak",
     "chatty-cherries-train",
+    "clean-plants-play",
+    "clean-shrimps-lay",
+    "cold-eyes-hunt",
     "controller-finish-flag",
+    "curvy-apples-lay",
+    "date-now-guard",
     "eight-terms-hunt",
     "empty-bikes-cheer",
     "fair-dragons-greet",
     "fast-chefs-smell",
+    "few-turkeys-reflect",
     "five-peas-lay",
+    "forty-elephants-attack",
+    "fresh-cars-impress",
     "fresh-spoons-drive",
+    "gold-terms-look",
     "grumpy-ways-own",
+    "itchy-dryers-double",
+    "khaki-dots-bathe",
     "large-ants-prove",
+    "lazy-toes-confess",
+    "little-radios-thank",
     "little-suits-leave",
     "loud-seals-raise",
     "lovely-pears-cross",
+    "lovely-students-boil",
+    "mean-tips-impress",
     "mighty-frogs-sparkle",
+    "nervous-buses-pump",
     "nervous-poets-grin",
     "nervous-tables-travel",
     "new-snakes-call",
@@ -37,12 +55,18 @@
     "proud-experts-jam",
     "real-masks-explode",
     "real-trains-switch",
+    "rich-crews-protect",
+    "rich-jars-remember",
     "serious-ants-juggle",
     "sixty-impalas-laugh",
     "small-olives-arrive",
+    "smooth-poems-bake",
     "stupid-ghosts-help",
     "swift-peas-film",
+    "thirty-baboons-punch",
     "tidy-yaks-joke",
+    "tiny-buckets-love",
+    "tiny-chairs-build",
     "tricky-panthers-guess",
     "twenty-lies-switch",
     "twenty-planets-repeat",

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/.changeset/smart-ears-refuse.md b/.changeset/smart-ears-refuse.md
@@ -0,0 +1,7 @@
+---
+'rrweb-snapshot': patch
+---
+
+Feat: Add 'isCustom' flag to serialized elements.
+
+This flag is used to indicate whether the element is a custom element or not. This is useful for replaying the :defined pseudo-class of custom elements.
diff --git a/.changeset/smooth-poems-bake.md b/.changeset/smooth-poems-bake.md
@@ -0,0 +1,5 @@
+---
+'rrweb-player': patch
+---
+
+Fix `player.getMirror`, `player.playRange`, `player.$set` types in rrwebPlayer
diff --git a/.changeset/swift-dancers-rest.md b/.changeset/swift-dancers-rest.md
@@ -0,0 +1,6 @@
+---
+'rrweb-snapshot': minor
+'rrweb': minor
+---
+
+Extends maskTextFn to pass the HTMLElement to the deciding function
diff --git a/.changeset/thirty-baboons-punch.md b/.changeset/thirty-baboons-punch.md
@@ -0,0 +1,5 @@
+---
+'rrweb-snapshot': patch
+---
+
+Fix CSS rules captured in Safari
diff --git a/.changeset/tiny-buckets-love.md b/.changeset/tiny-buckets-love.md
@@ -0,0 +1,5 @@
+---
+'rrweb': patch
+---
+
+Handle case where `event` is null/undefined
diff --git a/.changeset/tiny-candles-whisper.md b/.changeset/tiny-candles-whisper.md
@@ -0,0 +1,5 @@
+---
+'@rrweb/web-extension': patch
+---
+
+🐞 fix(web-extension): typo
diff --git a/.changeset/tiny-chairs-build.md b/.changeset/tiny-chairs-build.md
@@ -0,0 +1,7 @@
+---
+'rrweb': patch
+---
+
+Canvas FPS recording: override `preserveDrawingBuffer: true` on canvas creation.
+Canvas replay: fix flickering canvas elemenrs.
+Canvas FPS recording: fix bug that wipes webgl(2) canvas backgrounds while recording.
diff --git a/.changeset/witty-kids-talk.md b/.changeset/witty-kids-talk.md
@@ -0,0 +1,5 @@
+---
+'@rrweb/web-extension': patch
+---
+
+🐞 fix(web-extension): beforeunload logic
diff --git a/.github/workflows/ci-cd.yml b/.github/workflows/ci-cd.yml
@@ -21,7 +21,7 @@ jobs:
           node-version: lts/*
 
       - name: Install Dependencies
-        run: yarn
+        run: yarn install --frozen-lockfile
 
       - name: Build Project
         run: NODE_OPTIONS='--max-old-space-size=4096' yarn build:all
@@ -37,5 +37,5 @@ jobs:
         if: failure()
         with:
           name: image-diff
-          path: packages/rrweb/test/e2e/__image_snapshots__/__diff_output__/*.png
+          path: packages/rrweb/test/*/__image_snapshots__/__diff_output__/*.png
           if-no-files-found: ignore
diff --git a/.github/workflows/release.yml b/.github/workflows/release.yml
@@ -21,15 +21,15 @@ jobs:
           node-version: lts/*
 
       - name: Install Dependencies
-        run: yarn
+        run: yarn install --frozen-lockfile
 
       - name: Create Release Pull Request or Publish to npm
         id: changesets
         uses: changesets/action@v1
         with:
           publish: yarn run release
         env:
-          NODE_OPTIONS: "--max-old-space-size=4096"
+          NODE_OPTIONS: '--max-old-space-size=4096'
           GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
           NPM_TOKEN: ${{ secrets.NPM_TOKEN }}
 

diff --git a/.github/workflows/style-check.yml b/.github/workflows/style-check.yml
@@ -18,7 +18,7 @@ jobs:
           node-version: 16
           cache: 'yarn'
       - name: Install Dependencies
-        run: yarn
+        run: yarn install --frozen-lockfile
       - name: Build Packages
         run: NODE_OPTIONS='--max-old-space-size=4096' yarn build:all
       - name: Eslint Check
@@ -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/README.md b/README.md
@@ -110,15 +110,15 @@ In addition to adding integration tests and unit tests, rrweb also provides a RE
 
 <div dir="auto">
 
-<a href="https://opencollective.com/rrweb/tiers/bronze-sponsor/0/website?requireActive=false" target="_blank"><img src="https://opencollective.com/rrweb/tiers/bronze-sponsor/0/avatar.svg?requireActive=false&avatarHeight=70" alt="sponsor"></a>
-<a href="https://opencollective.com/rrweb/tiers/bronze-sponsor/1/website?requireActive=false" target="_blank"><img src="https://opencollective.com/rrweb/tiers/bronze-sponsor/1/avatar.svg?requireActive=false&avatarHeight=70" alt="sponsor"></a>
-<a href="https://opencollective.com/rrweb/tiers/bronze-sponsor/2/website?requireActive=false" target="_blank"><img src="https://opencollective.com/rrweb/tiers/bronze-sponsor/2/avatar.svg?requireActive=false&avatarHeight=70" alt="sponsor"></a>
-<a href="https://opencollective.com/rrweb/tiers/bronze-sponsor/3/website?requireActive=false" target="_blank"><img src="https://opencollective.com/rrweb/tiers/bronze-sponsor/3/avatar.svg?requireActive=false&avatarHeight=70" alt="sponsor"></a>
-<a href="https://opencollective.com/rrweb/tiers/bronze-sponsor/4/website?requireActive=false" target="_blank"><img src="https://opencollective.com/rrweb/tiers/bronze-sponsor/4/avatar.svg?requireActive=false&avatarHeight=70" alt="sponsor"></a>
-<a href="https://opencollective.com/rrweb/tiers/bronze-sponsor/5/website?requireActive=false" target="_blank"><img src="https://opencollective.com/rrweb/tiers/bronze-sponsor/5/avatar.svg?requireActive=false&avatarHeight=70" alt="sponsor"></a>
-<a href="https://opencollective.com/rrweb/tiers/bronze-sponsor/6/website?requireActive=false" target="_blank"><img src="https://opencollective.com/rrweb/tiers/bronze-sponsor/6/avatar.svg?requireActive=false&avatarHeight=70" alt="sponsor"></a>
-<a href="https://opencollective.com/rrweb/tiers/bronze-sponsor/7/website?requireActive=false" target="_blank"><img src="https://opencollective.com/rrweb/tiers/bronze-sponsor/7/avatar.svg?requireActive=false&avatarHeight=70" alt="sponsor"></a>
-<a href="https://opencollective.com/rrweb/tiers/bronze-sponsor/8/website?requireActive=false" target="_blank"><img src="https://opencollective.com/rrweb/tiers/bronze-sponsor/8/avatar.svg?requireActive=false&avatarHeight=70" alt="sponsor"></a>
+<a href="https://opencollective.com/rrweb/tiers/sponsors/0/website?requireActive=false" target="_blank"><img src="https://opencollective.com/rrweb/tiers/sponsors/0/avatar.svg?requireActive=false&avatarHeight=70" alt="sponsor"></a>
+<a href="https://opencollective.com/rrweb/tiers/sponsors/1/website?requireActive=false" target="_blank"><img src="https://opencollective.com/rrweb/tiers/sponsors/1/avatar.svg?requireActive=false&avatarHeight=70" alt="sponsor"></a>
+<a href="https://opencollective.com/rrweb/tiers/sponsors/2/website?requireActive=false" target="_blank"><img src="https://opencollective.com/rrweb/tiers/sponsors/2/avatar.svg?requireActive=false&avatarHeight=70" alt="sponsor"></a>
+<a href="https://opencollective.com/rrweb/tiers/sponsors/3/website?requireActive=false" target="_blank"><img src="https://opencollective.com/rrweb/tiers/sponsors/3/avatar.svg?requireActive=false&avatarHeight=70" alt="sponsor"></a>
+<a href="https://opencollective.com/rrweb/tiers/sponsors/4/website?requireActive=false" target="_blank"><img src="https://opencollective.com/rrweb/tiers/sponsors/4/avatar.svg?requireActive=false&avatarHeight=70" alt="sponsor"></a>
+<a href="https://opencollective.com/rrweb/tiers/sponsors/5/website?requireActive=false" target="_blank"><img src="https://opencollective.com/rrweb/tiers/sponsors/5/avatar.svg?requireActive=false&avatarHeight=70" alt="sponsor"></a>
+<a href="https://opencollective.com/rrweb/tiers/sponsors/6/website?requireActive=false" target="_blank"><img src="https://opencollective.com/rrweb/tiers/sponsors/6/avatar.svg?requireActive=false&avatarHeight=70" alt="sponsor"></a>
+<a href="https://opencollective.com/rrweb/tiers/sponsors/7/website?requireActive=false" target="_blank"><img src="https://opencollective.com/rrweb/tiers/sponsors/7/avatar.svg?requireActive=false&avatarHeight=70" alt="sponsor"></a>
+<a href="https://opencollective.com/rrweb/tiers/sponsors/8/website?requireActive=false" target="_blank"><img src="https://opencollective.com/rrweb/tiers/sponsors/8/avatar.svg?requireActive=false&avatarHeight=70" alt="sponsor"></a>
 
 </div>
 
@@ -220,4 +220,16 @@ In addition to adding integration tests and unit tests, rrweb also provides a RE
       </a>
     </td>
   </tr>
+  <tr>
+    <td align="center">
+      <a href="https://requestly.io" target="_blank">
+        <img style="padding: 8px" alt="Intercept, Modify, Record & Replay HTTP Requests." width="195px" src="https://github.com/requestly/requestly/assets/16779465/652552db-c867-44cb-9bb5-94a2026e04ca">
+      </a>
+    </td>
+    <td align="center">
+      <a href="https://gleap.io" target="_blank">
+        <img style="padding: 8px" alt="In-app bug reporting & customer feedback platform." width="195px" src="https://assets-global.website-files.com/6506f3f29c68b1724807619d/6506f56010237164c6306591_GleapLogo.svg">
+      </a>
+    </td>
+  </tr>
 </table>
diff --git a/README.zh_CN.md b/README.zh_CN.md
@@ -119,17 +119,51 @@ rrweb 主要由 3 部分组成：
   <tr>
     <td align="center">
       <a href="http://www.smartx.com/" target="_blank">
-        <img width="260px" src="https://www.rrweb.io/logos/smartx.png">
+        <img width="195px" src="https://www.rrweb.io/logos/smartx.png">
       </a>
     </td>
     <td align="center">
       <a href="https://posthog.com?utm_source=rrweb&utm_medium=sponsorship&utm_campaign=open-source-sponsorship" target="_blank">
-        <img width="260px" src="https://www.rrweb.io/logos/posthog.png">
+        <img width="195px" src="https://www.rrweb.io/logos/posthog.png">
       </a>
     </td>
     <td align="center">
       <a href="https://statcounter.com/session-replay/" target="_blank">
-        <img width="260px" src="https://statcounter.com/images/logo-statcounter-arc-blue.svg">
+        <img width="195px" src="https://statcounter.com/images/logo-statcounter-arc-blue.svg">
+      </a>
+    </td>
+    <td align="center">
+      <a href="https://cux.io" target="_blank">
+        <img style="padding: 8px" alt="The first ever UX automation tool" width="195px" src="https://cux.io/cux-logo.svg">
+      </a>
+    </td>
+  </tr>
+    <tr>
+    <td align="center">
+      <a href="https://recordonce.com/" target="_blank">
+        <img width="195px" alt="Smart screen recording for SaaS" src="https://uploads-ssl.webflow.com/5f3d133183156245630d4446/5f3d1940abe8db8612c23521_Record-Once-logo-554x80px.svg">
+      </a>
+    </td>
+    <td align="center">
+      <a href="https://remsupp.com" target="_blank">
+        <img style="padding: 8px" alt="Remote Access & Co-Browsing" width="195px" src="https://remsupp.com/images/logo.png">
+      </a>
+    </td>
+    <td align="center">
+      <a href="https://highlight.io" target="_blank">
+        <img style="padding: 8px" alt="The open source, fullstack Monitoring Platform." width="195px" src="https://github.com/highlight/highlight/raw/main/highlight.io/public/images/logo.png">
+      </a>
+    </td>
+    <td align="center">
+      <a href="https://analyzee.io" target="_blank">
+        <img style="padding: 8px" alt="Comprehensive data analytics platform that empowers businesses to gain valuable insights and make data-driven decisions." width="195px" src="https://cdn.analyzee.io/assets/analyzee-logo.png">
+      </a>
+    </td>
+  </tr>
+  <tr>
+    <td align="center">
+      <a href="https://requestly.io" target="_blank">
+        <img style="padding: 8px" alt="Intercept, Modify, Record & Replay HTTP Requests." width="195px" src="https://github.com/requestly/requestly/assets/16779465/652552db-c867-44cb-9bb5-94a2026e04ca">
       </a>
     </td>
   </tr>

diff --git a/guide.md b/guide.md
@@ -143,6 +143,7 @@ The parameter of `rrweb.record` accepts the following options.
 | blockClass               | 'rr-block'                                         | Use a string or RegExp to configure which elements should be blocked, refer to the [privacy](#privacy) chapter                                                                                |
 | blockSelector            | null                                               | Use a string to configure which selector should be blocked, refer to the [privacy](#privacy) chapter                                                                                          |
 | ignoreClass              | 'rr-ignore'                                        | Use a string or RegExp to configure which elements should be ignored, refer to the [privacy](#privacy) chapter                                                                                |
+| ignoreSelector           | null                                               | Use a string to configure which selector should be ignored, refer to the [privacy](#privacy) chapter                                                                                          |
 | ignoreCSSAttributes      | null                                               | array of CSS attributes that should be ignored                                                                                                                                                |
 | maskTextClass            | 'rr-mask'                                          | Use a string or RegExp to configure which elements should be masked, refer to the [privacy](#privacy) chapter                                                                                 |
 | maskTextSelector         | null                                               | Use a string to configure which selector should be masked, refer to the [privacy](#privacy) chapter                                                                                           |