changes in rrweb based on ue-sdk

.changeset/eighty-teachers-smash.md

@@ -0,0 +1,8 @@
+---
+"@rrweb/rrweb-plugin-canvas-webrtc-replay": patch
+"@rrweb/rrweb-plugin-sequential-id-replay": patch
+"@rrweb/rrweb-plugin-console-replay": patch
+"rrweb": patch
+---
+
+Export `ReplayPlugin` from rrweb directly. Previously we had to do `import type { ReplayPlugin } from 'rrweb/dist/types';` now we can do `import type { ReplayPlugin } from 'rrweb';`

.changeset/kind-kids-design.md

@@ -0,0 +1,5 @@
+---
+"rrweb": patch
+---
+
+Optimize performance of isParentRemoved by converting it to an iterative procedure

.changeset/no-neg-lookbehind.md

@@ -0,0 +1,6 @@
+---
+"rrweb-snapshot": patch
+"rrweb": patch
+---
+
+Replay: Replace negative lookbehind in regexes from css parser as it causes issues with Safari 16

.changeset/proud-clocks-hope.md

@@ -0,0 +1,5 @@
+---
+"rrweb-snapshot": patch
+---
+
+(when `recordCanvas: true`): ensure we use doc.createElement instead of document.createElement to allow use in non-browser e.g. jsdom environments

.changeset/shadow-dom-unbusify.md

@@ -0,0 +1,5 @@
+---
+"rrweb": patch
+---
+
+Refactor to preclude the need for a continuous raf loop running in the background which is related to shadowDom

.changeset/silent-plants-perform.md

@@ -1,5 +1,5 @@
 ---
-'rrweb': patch
+"rrweb": patch
 ---
 
 Return early for child same origin frames

.eslintignore

@@ -0,0 +1,13 @@
+.DS_Store
+node_modules
+/build
+/dist
+/package
+.env
+.env.*
+!.env.example
+
+# Ignore files for PNPM, NPM and YARN
+pnpm-lock.yaml
+package-lock.json
+yarn.lock

.eslintrc.js

@@ -1,3 +1,4 @@
+// TODO: add .eslintignore. More info: https://bobbyhadz.com/blog/typescript-parseroptions-project-has-been-set-for
 module.exports = {
   env: {
     browser: true,
@@ -16,7 +17,7 @@ module.exports = {
     ecmaVersion: 'latest',
     sourceType: 'module',
     tsconfigRootDir: __dirname,
-    project: ['./tsconfig.eslint.json', './packages/*/tsconfig.json'],
+    project: ['./tsconfig.eslint.json', './packages/**/tsconfig.json'],
   },
   plugins: ['@typescript-eslint', 'eslint-plugin-tsdoc', 'jest', 'compat'],
   rules: {

.github/workflows/ci-cd.yml

@@ -19,17 +19,18 @@ jobs:
         uses: actions/setup-node@v3
         with:
           node-version: lts/*
-
+      
       - name: Install Dependencies
         run: yarn install --frozen-lockfile
 
       - name: Build Project
         run: NODE_OPTIONS='--max-old-space-size=4096' yarn build:all
 
       - name: Check types
-        run: yarn turbo run check-types
+        run: yarn check-types
 
       - name: Run tests
+        # run: PUPPETEER_EXECUTABLE_PATH=${{ steps.setup-chrome.outputs.chrome-path }} PUPPETEER_HEADLESS=true xvfb-run --server-args="-screen 0 1920x1080x24" yarn test
         run: PUPPETEER_HEADLESS=true xvfb-run --server-args="-screen 0 1920x1080x24" yarn test
 
       - name: Upload diff images to GitHub

.gitignore

@@ -13,14 +13,25 @@ temp
 
 .DS_Store
 
+# output of `yarn build`
 build
 dist
 
+# turbo cache
 .turbo
 
+# needed to store puppeteer binaries
+.cache/*
+!.gitkeep
+
 # emacs working files end in a tilde
 *~
 
 # `.yarn/install-state.gz` is an optimization file that you shouldn't ever have to commit. 
 # It simply stores the exact state of your project so that the next commands can boot without having to resolve your workspaces all over again.
-.yarn/install-state.gz
+.yarn/install-state.gz
+
+
+# for vite
+vite.config.js.timestamp-*
+vite.config.ts.timestamp-*

.puppeteerrc.cjs

@@ -0,0 +1,10 @@
+const { join } = require('path');
+
+/**
+ * @type {import("puppeteer").Configuration}
+ */
+module.exports = {
+  // Changes the cache location for Puppeteer.
+  cacheDirectory: join(__dirname, '.cache', 'puppeteer'),
+  browserRevision: '115.0.5763.0',
+};

CHANGELOG_UE.md

@@ -0,0 +1,52 @@
+# Changelog
+
+This objective of this document is to track the changes being made in the rrweb package files
+
+## v0.3.0
+
+### Features
+
+- Added image masking capability on img tags using class selector 'ue-mask'
+- Added masking capability on input tags using class selector 'ue-input-mask'
+
+### Changes
+
+/packages/rrweb-snapshot/src/snapshot.ts
+
+- added img masking logic in function serializeElementNode(n, options) on line 793
+
+/packages/rrweb/src/record/mutation.ts
+
+- added mutation logic for masking img in function processMutation on line 670
+
+/packages/rrweb/src/record/observer.ts
+
+- added masking logic for input tags in function eventHandler on line 470
+
+/packages/rrweb/src/record/index.ts
+
+- added property 'maskInputClass' on line number 76 and 530 inside record and observe functions.
+
+/packages/rrweb/src/types.ts
+
+- updated types recordOptions and observeParam, added maskTextClass property in both.
+
+## v0.3.4
+
+### Fix
+
+- Memory leak issues on IframeManager and observers
+
+### Changes
+
+/packages/rrweb/src/record/observer.ts
+
+- flushMutationBuffers() added to clear mutationBuffers
+
+/packages/rrweb/src/record/iframe-manager.ts
+
+- function to cleanup handleMessage() in eventListener
+
+/packages/rrweb/src/record/index.ts
+
+- calling flushMutationBuffers & IframeManger cleanup() in record()

CONTRIBUTING.md

@@ -27,8 +27,10 @@ clear and has sufficient instructions to be able to reproduce the issue.
 ## Run locally
 
 - Install dependencies: `yarn`
-- Run recorder on a website: `yarn repl`
-- Run a cobrowsing/mirroring session locally: `yarn live-stream`
+- Build all packages: (in `/`) `yarn build:all` or `yarn dev`
+- Run recorder on a website: (in `/packages/rrweb`) `yarn repl`
+- Run a cobrowsing/mirroring session locally: (in `/packages/rrweb`) `yarn live-stream`
+- Build individual packages: `yarn build` or `yarn dev`
 - Test: `yarn test` or `yarn test:watch`
 - Lint: `yarn lint`
 - Rewrite files with prettier: `yarn format` or `yarn format:head`

README.md

@@ -11,8 +11,8 @@
 
 [![Join the chat at slack](https://img.shields.io/badge/[email protected]?logo=slack)](https://join.slack.com/t/rrweb/shared_invite/zt-siwoc6hx-uWay3s2wyG8t5GpZVb8rWg)
 [![Twitter Follow](https://img.shields.io/badge/twitter-@rrweb__io-teal.svg?logo=twitter)](https://twitter.com/rrweb_io)
-![total gzip size](https://img.badgesize.io/https://cdn.jsdelivr.net/npm/rrweb@latest/dist/rrweb.min.js?compression=gzip&label=total%20gzip%20size)
-![recorder gzip size](https://img.badgesize.io/https://cdn.jsdelivr.net/npm/rrweb@latest/dist/record/rrweb-record.min.js?compression=gzip&label=recorder%20gzip%20size)
+![total gzip size](https://img.badgesize.io/https://cdn.jsdelivr.net/npm/rrweb@latest/dist/rrweb.min.cjs?compression=gzip&label=total%20gzip%20size)
+![recorder gzip size](https://img.badgesize.io/https://cdn.jsdelivr.net/npm/rrweb@latest/dist/record/rrweb-record.min.cjs?compression=gzip&label=recorder%20gzip%20size)
 [![](https://data.jsdelivr.com/v1/package/npm/rrweb/badge)](https://www.jsdelivr.com/package/npm/rrweb)
 
 [中文文档](./README.zh_CN.md)
@@ -39,9 +39,7 @@ rrweb is mainly composed of 3 parts:
 
 ## Roadmap
 
-- rrdom: an ad-hoc DOM for rrweb session data [#419](https://github.com/rrweb-io/rrweb/issues/419)
 - storage engine: do deduplication on a large number of rrweb sessions
-- more end-to-end tests
 - compact mutation data in common patterns
 - provide plugins via the new plugin API, including:
   - XHR plugin
@@ -166,7 +164,7 @@ In addition to adding integration tests and unit tests, rrweb also provides a RE
       </a>
     </td>
     <td align="center">
-      <a href="https://github.com/Juice10">
+      <a href="https://github.com/juice10">
         <img
           src="https://avatars.githubusercontent.com/u/4106?s=100"
           width="100px;"
@@ -199,15 +197,15 @@ In addition to adding integration tests and unit tests, rrweb also provides a RE
       </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 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>
   </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 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>
     <td align="center">