diff --git a/.cache/.gitkeep b/.cache/.gitkeep
new file mode 100644
index 0000000000..e69de29bb2
diff --git a/.changeset/beige-olives-roll.md b/.changeset/beige-olives-roll.md
new file mode 100644
index 0000000000..4707f55aca
--- /dev/null
+++ b/.changeset/beige-olives-roll.md
@@ -0,0 +1,6 @@
+---
+"rrweb-snapshot": patch
+"rrweb": patch
+---
+
+Fix that the optional `maskInputFn` was being accidentally ignored during the creation of the full snapshot
diff --git a/.changeset/bright-socks-clap.md b/.changeset/bright-socks-clap.md
new file mode 100644
index 0000000000..a845151cc8
--- /dev/null
+++ b/.changeset/bright-socks-clap.md
@@ -0,0 +1,2 @@
+---
+---
diff --git a/.changeset/config.json b/.changeset/config.json
index 962e9799b0..7906b2130c 100644
--- a/.changeset/config.json
+++ b/.changeset/config.json
@@ -9,9 +9,19 @@
"rrdom",
"rrdom-nodejs",
"rrweb-player",
+ "@rrweb/all",
+ "@rrweb/replay",
+ "@rrweb/record",
"@rrweb/types",
+ "@rrweb/packer",
"@rrweb/web-extension",
- "rrvideo"
+ "rrvideo",
+ "@rrweb/rrweb-plugin-console-record",
+ "@rrweb/rrweb-plugin-console-replay",
+ "@rrweb/rrweb-plugin-sequential-id-record",
+ "@rrweb/rrweb-plugin-sequential-id-replay",
+ "@rrweb/rrweb-plugin-canvas-webrtc-record",
+ "@rrweb/rrweb-plugin-canvas-webrtc-replay"
]
],
"linked": [],
diff --git a/.changeset/cool-horses-bow.md b/.changeset/cool-horses-bow.md
new file mode 100644
index 0000000000..220bb217a9
--- /dev/null
+++ b/.changeset/cool-horses-bow.md
@@ -0,0 +1,14 @@
+---
+"@rrweb/rrweb-plugin-canvas-webrtc-record": patch
+"@rrweb/rrweb-plugin-canvas-webrtc-replay": patch
+"@rrweb/rrweb-plugin-sequential-id-record": patch
+"@rrweb/rrweb-plugin-sequential-id-replay": patch
+"@rrweb/rrweb-plugin-console-record": patch
+"@rrweb/rrweb-plugin-console-replay": patch
+"@rrweb/packer": patch
+"@rrweb/record": patch
+"@rrweb/replay": patch
+"@rrweb/all": patch
+---
+
+Keep package version in sync with other packages
diff --git a/.changeset/cuddly-bikes-fail.md b/.changeset/cuddly-bikes-fail.md
new file mode 100644
index 0000000000..0c99160c9e
--- /dev/null
+++ b/.changeset/cuddly-bikes-fail.md
@@ -0,0 +1,6 @@
+---
+"rrweb-snapshot": patch
+"rrweb": patch
+---
+
+fix: duplicate textContent for style elements cause incremental style mutations to be invalid
diff --git a/.changeset/eighty-teachers-smash.md b/.changeset/eighty-teachers-smash.md
new file mode 100644
index 0000000000..e26a2157b4
--- /dev/null
+++ b/.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';`
diff --git a/.changeset/eleven-toys-vanish.md b/.changeset/eleven-toys-vanish.md
new file mode 100644
index 0000000000..a845151cc8
--- /dev/null
+++ b/.changeset/eleven-toys-vanish.md
@@ -0,0 +1,2 @@
+---
+---
diff --git a/.changeset/giant-rats-chew.md b/.changeset/giant-rats-chew.md
new file mode 100644
index 0000000000..8f28c5f7b4
--- /dev/null
+++ b/.changeset/giant-rats-chew.md
@@ -0,0 +1,5 @@
+---
+"rrweb": patch
+---
+
+Export takeFullSnapshot function for a recording process
diff --git a/.changeset/gold-experts-type.md b/.changeset/gold-experts-type.md
new file mode 100644
index 0000000000..1074e7e637
--- /dev/null
+++ b/.changeset/gold-experts-type.md
@@ -0,0 +1,5 @@
+---
+"@rrweb/rrweb-plugin-console-record": patch
+---
+
+corrects behaviour of console.assert logging to only capture logs when the provided assertion is falsey
diff --git a/.changeset/great-cows-camp.md b/.changeset/great-cows-camp.md
new file mode 100644
index 0000000000..88508ff6e0
--- /dev/null
+++ b/.changeset/great-cows-camp.md
@@ -0,0 +1,6 @@
+---
+"@rrweb/record": patch
+"rrweb": patch
+---
+
+Added support for deprecated addRule & removeRule methods
diff --git a/.changeset/inlineImage-maybeNot-crossOrigin.md b/.changeset/inlineImage-maybeNot-crossOrigin.md
new file mode 100644
index 0000000000..89eb7bb340
--- /dev/null
+++ b/.changeset/inlineImage-maybeNot-crossOrigin.md
@@ -0,0 +1,6 @@
+---
+"rrweb": patch
+"rrweb-snapshot": patch
+---
+
+inlineImages: during snapshot avoid adding an event listener for inlining of same-origin images (async listener mutates the snapshot which can be problematic)
diff --git a/.changeset/kind-kids-design.md b/.changeset/kind-kids-design.md
new file mode 100644
index 0000000000..764d3fde1c
--- /dev/null
+++ b/.changeset/kind-kids-design.md
@@ -0,0 +1,5 @@
+---
+"rrweb": patch
+---
+
+Optimize performance of isParentRemoved by converting it to an iterative procedure
diff --git a/.changeset/last-jest-to-vitest.md b/.changeset/last-jest-to-vitest.md
new file mode 100644
index 0000000000..a845151cc8
--- /dev/null
+++ b/.changeset/last-jest-to-vitest.md
@@ -0,0 +1,2 @@
+---
+---
diff --git a/.changeset/lovely-files-sparkle.md b/.changeset/lovely-files-sparkle.md
new file mode 100644
index 0000000000..a845151cc8
--- /dev/null
+++ b/.changeset/lovely-files-sparkle.md
@@ -0,0 +1,2 @@
+---
+---
diff --git a/.changeset/nasty-scissors-reply.md b/.changeset/nasty-scissors-reply.md
new file mode 100644
index 0000000000..a845151cc8
--- /dev/null
+++ b/.changeset/nasty-scissors-reply.md
@@ -0,0 +1,2 @@
+---
+---
diff --git a/.changeset/no-neg-lookbehind.md b/.changeset/no-neg-lookbehind.md
new file mode 100644
index 0000000000..f152328ed3
--- /dev/null
+++ b/.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
diff --git a/.changeset/perfect-bulldogs-punch.md b/.changeset/perfect-bulldogs-punch.md
new file mode 100644
index 0000000000..3311a7bf1b
--- /dev/null
+++ b/.changeset/perfect-bulldogs-punch.md
@@ -0,0 +1,12 @@
+---
+"@rrweb/rrweb-plugin-canvas-webrtc-record": major
+"@rrweb/rrweb-plugin-canvas-webrtc-replay": major
+"@rrweb/rrweb-plugin-sequential-id-record": major
+"@rrweb/rrweb-plugin-sequential-id-replay": major
+"@rrweb/rrweb-plugin-console-record": major
+"@rrweb/rrweb-plugin-console-replay": major
+"@rrweb/packer": major
+"rrweb": major
+---
+
+Split plugins out of rrweb and move them into their own packages: @rrweb/packer, @rrweb/rrweb-plugin-canvas-webrtc-record, @rrweb/rrweb-plugin-canvas-webrtc-replay, @rrweb/rrweb-plugin-sequential-id-record, @rrweb/rrweb-plugin-sequential-id-replay, @rrweb/rrweb-plugin-console-record, @rrweb/rrweb-plugin-console-replay. Check out the README of each package for more information or check out https://github.com/rrweb-io/rrweb/pull/1033 to see the changes.
diff --git a/.changeset/pre.json b/.changeset/pre.json
index f9b75dbbdf..8602aa29a1 100644
--- a/.changeset/pre.json
+++ b/.changeset/pre.json
@@ -9,13 +9,25 @@
"rrweb-snapshot": "2.0.0-alpha.4",
"@rrweb/types": "2.0.0-alpha.4",
"@rrweb/web-extension": "2.0.0-alpha.4",
- "rrvideo": "2.0.0-alpha.6"
+ "rrvideo": "2.0.0-alpha.6",
+ "@rrweb/all": "2.0.0-alpha.14",
+ "@rrweb/packer": "2.0.0-alpha.14",
+ "@rrweb/rrweb-plugin-canvas-webrtc-record": "2.0.0-alpha.14",
+ "@rrweb/rrweb-plugin-canvas-webrtc-replay": "2.0.0-alpha.14",
+ "@rrweb/rrweb-plugin-console-record": "2.0.0-alpha.14",
+ "@rrweb/rrweb-plugin-console-replay": "2.0.0-alpha.14",
+ "@rrweb/rrweb-plugin-sequential-id-record": "2.0.0-alpha.14",
+ "@rrweb/rrweb-plugin-sequential-id-replay": "2.0.0-alpha.14",
+ "@rrweb/record": "2.0.0-alpha.14",
+ "@rrweb/replay": "2.0.0-alpha.14"
},
"changesets": [
"attribute-text-reductions",
+ "beige-olives-roll",
"brave-numbers-joke",
"breezy-cats-heal",
"breezy-mice-breathe",
+ "bright-socks-clap",
"calm-bulldogs-speak",
"calm-oranges-sin",
"chatty-cherries-train",
@@ -31,7 +43,9 @@
"date-now-guard",
"dirty-rules-dress",
"eight-terms-hunt",
+ "eighty-teachers-smash",
"eleven-bobcats-peel",
+ "eleven-toys-vanish",
"empty-bikes-cheer",
"event-single-wrap",
"fair-dragons-greet",
@@ -52,9 +66,12 @@
"grumpy-ways-own",
"hip-worms-relax",
"hungry-dodos-taste",
+ "inlineImage-maybeNot-crossOrigin",
"itchy-dryers-double",
"khaki-dots-bathe",
+ "kind-kids-design",
"large-ants-prove",
+ "last-jest-to-vitest",
"lazy-squids-draw",
"lazy-toes-confess",
"lemon-lamps-switch",
@@ -62,6 +79,7 @@
"little-radios-thank",
"little-suits-leave",
"loud-seals-raise",
+ "lovely-files-sparkle",
"lovely-pears-cross",
"lovely-students-boil",
"mean-tips-impress",
@@ -70,6 +88,7 @@
"mighty-frogs-sparkle",
"modern-doors-watch",
"moody-dots-refuse",
+ "nasty-scissors-reply",
"nervous-buses-pump",
"nervous-kiwis-nail",
"nervous-mirrors-perform",
@@ -77,11 +96,16 @@
"nervous-tables-travel",
"new-snakes-call",
"nice-pugs-reply",
+ "no-neg-lookbehind",
"old-dryers-hide",
+ "perfect-bulldogs-punch",
"polite-olives-wave",
+ "pretty-meals-flash",
"pretty-plums-rescue",
"pretty-schools-remember",
+ "proud-clocks-hope",
"proud-experts-jam",
+ "purple-carrots-film",
"rare-adults-sneeze",
"real-masks-explode",
"real-trains-switch",
@@ -90,9 +114,15 @@
"rich-jars-remember",
"rotten-spies-enjoy",
"serious-ants-juggle",
+ "serious-eggs-greet",
+ "shadow-dom-unbusify",
+ "silent-plants-perform",
"silver-pots-sit",
"silver-windows-float",
"sixty-impalas-laugh",
+ "skip-mask-check-on-leaf-elements",
+ "slimy-eagles-grow",
+ "small-hats-kneel",
"small-olives-arrive",
"smart-ears-refuse",
"smart-geckos-cover",
@@ -110,12 +140,14 @@
"tiny-buckets-love",
"tiny-candles-whisper",
"tiny-chairs-build",
+ "title-deanimate-option",
"tricky-panthers-guess",
"twenty-goats-kneel",
"twenty-lies-switch",
"twenty-planets-repeat",
"violet-melons-itch",
"violet-zebras-cry",
+ "wicked-lions-return",
"wise-spiders-jog",
"witty-kids-talk",
"yellow-mails-cheat",
diff --git a/.changeset/pretty-meals-flash.md b/.changeset/pretty-meals-flash.md
new file mode 100644
index 0000000000..0a1b758674
--- /dev/null
+++ b/.changeset/pretty-meals-flash.md
@@ -0,0 +1,20 @@
+---
+"@rrweb/all": major
+"@rrweb/packer": major
+"@rrweb/rrweb-plugin-canvas-webrtc-record": major
+"@rrweb/rrweb-plugin-canvas-webrtc-replay": major
+"@rrweb/rrweb-plugin-console-record": major
+"@rrweb/rrweb-plugin-console-replay": major
+"@rrweb/rrweb-plugin-sequential-id-record": major
+"@rrweb/rrweb-plugin-sequential-id-replay": major
+"@rrweb/record": major
+"@rrweb/replay": major
+"rrdom": major
+"rrdom-nodejs": major
+"rrweb": major
+"rrweb-player": major
+"rrweb-snapshot": major
+"@rrweb/types": major
+---
+
+Distributed files have new filenames, paths and extensions. **Important: If you reference distributed files or types directly, you might have to update your paths/filenames. E.g. you import from `rrweb/typings/...` or `rrdom/es`. However you run `import rrweb from 'rrweb'` you won't notice a difference with this change.** If you include rrweb files directly in a script tag, you might have to update that path to include a the `.umd.cjs` files instead. All `.js` files now use ES modules which can be used in modern browsers, node.js and bundlers that support ES modules. All npm packages now also ship `.cjs` and `.umd.cjs` files. The `.umd.cjs` files are CommonJS modules that bundle all files together to make it easy to ship one file to browser environments (similar to the previous `.js` files). The `.cjs` files are CommonJS modules that can be used in older Node.js environments. Types should be better defined in `package.json` and if you need specific types they might be exported from new packages (for example `PlayerMachineState` and `SpeedMachineState` are now exported from `@rrweb/replay`). Check the `package.json`'s `main` and `exports` field for the available files.
diff --git a/.changeset/proud-clocks-hope.md b/.changeset/proud-clocks-hope.md
new file mode 100644
index 0000000000..692b2081d0
--- /dev/null
+++ b/.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
diff --git a/.changeset/purple-carrots-film.md b/.changeset/purple-carrots-film.md
new file mode 100644
index 0000000000..b5a9c9ed12
--- /dev/null
+++ b/.changeset/purple-carrots-film.md
@@ -0,0 +1,5 @@
+---
+"rrweb": patch
+---
+
+Fix: some nested cross-origin iframes can't be recorded
diff --git a/.changeset/serious-eggs-greet.md b/.changeset/serious-eggs-greet.md
new file mode 100644
index 0000000000..a845151cc8
--- /dev/null
+++ b/.changeset/serious-eggs-greet.md
@@ -0,0 +1,2 @@
+---
+---
diff --git a/.changeset/shadow-dom-unbusify.md b/.changeset/shadow-dom-unbusify.md
new file mode 100644
index 0000000000..ca84f9e55d
--- /dev/null
+++ b/.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
diff --git a/.changeset/silent-plants-perform.md b/.changeset/silent-plants-perform.md
new file mode 100644
index 0000000000..1b234ec2a0
--- /dev/null
+++ b/.changeset/silent-plants-perform.md
@@ -0,0 +1,5 @@
+---
+"rrweb": patch
+---
+
+Return early for child same origin frames
diff --git a/.changeset/six-llamas-brush.md b/.changeset/six-llamas-brush.md
new file mode 100644
index 0000000000..9aa1d08b7f
--- /dev/null
+++ b/.changeset/six-llamas-brush.md
@@ -0,0 +1,5 @@
+---
+"rrweb-snapshot": patch
+---
+
+Fix `url()` rewrite for nested stylesheets by rewriting during stringification instead of after
diff --git a/.changeset/skip-mask-check-on-leaf-elements.md b/.changeset/skip-mask-check-on-leaf-elements.md
new file mode 100644
index 0000000000..b54de0a4ba
--- /dev/null
+++ b/.changeset/skip-mask-check-on-leaf-elements.md
@@ -0,0 +1,6 @@
+---
+"rrweb-snapshot": patch
+"rrweb": patch
+---
+
+optimisation: skip mask check on leaf elements
diff --git a/.changeset/slimy-eagles-grow.md b/.changeset/slimy-eagles-grow.md
new file mode 100644
index 0000000000..a845151cc8
--- /dev/null
+++ b/.changeset/slimy-eagles-grow.md
@@ -0,0 +1,2 @@
+---
+---
diff --git a/.changeset/small-hats-kneel.md b/.changeset/small-hats-kneel.md
new file mode 100644
index 0000000000..3a3d6a2e07
--- /dev/null
+++ b/.changeset/small-hats-kneel.md
@@ -0,0 +1,8 @@
+---
+"@rrweb/all": major
+"@rrweb/record": major
+"@rrweb/replay": major
+"rrweb": major
+---
+
+Remove the rrweb-all.js, rrweb-record.js, and rrweb-replay.js files from `rrweb` package. Now you can use `@rrweb/all`, `@rrweb/record`, and `@rrweb/replay` packages instead. Check out the README of each package for more information or check out [PR #1033](https://github.com/rrweb-io/rrweb/pull/1033) to see the changes.
diff --git a/.changeset/title-deanimate-option.md b/.changeset/title-deanimate-option.md
new file mode 100644
index 0000000000..d568615f18
--- /dev/null
+++ b/.changeset/title-deanimate-option.md
@@ -0,0 +1,6 @@
+---
+"rrweb-snapshot": patch
+"rrweb": patch
+---
+
+Add slimDOM option to block animation on
tag; enabled when the 'all' value is used for slimDOM
diff --git a/.changeset/two-boats-boil.md b/.changeset/two-boats-boil.md
new file mode 100644
index 0000000000..a845151cc8
--- /dev/null
+++ b/.changeset/two-boats-boil.md
@@ -0,0 +1,2 @@
+---
+---
diff --git a/.changeset/wicked-lions-return.md b/.changeset/wicked-lions-return.md
new file mode 100644
index 0000000000..a845151cc8
--- /dev/null
+++ b/.changeset/wicked-lions-return.md
@@ -0,0 +1,2 @@
+---
+---
diff --git a/.eslintignore b/.eslintignore
new file mode 100644
index 0000000000..280cf719b8
--- /dev/null
+++ b/.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
diff --git a/.eslintrc.js b/.eslintrc.js
index 6172eedf77..16d975a68a 100644
--- a/.eslintrc.js
+++ b/.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: {
diff --git a/.github/workflows/ci-cd.yml b/.github/workflows/ci-cd.yml
index cf64ccca07..7fe6a4bd54 100644
--- a/.github/workflows/ci-cd.yml
+++ b/.github/workflows/ci-cd.yml
@@ -19,7 +19,7 @@ jobs:
uses: actions/setup-node@v3
with:
node-version: lts/*
-
+
- name: Install Dependencies
run: yarn install --frozen-lockfile
@@ -27,9 +27,10 @@ jobs:
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
diff --git a/.github/workflows/style-check.yml b/.github/workflows/style-check.yml
index 2f628ceea0..e47ee3c9c2 100644
--- a/.github/workflows/style-check.yml
+++ b/.github/workflows/style-check.yml
@@ -8,7 +8,7 @@ jobs:
name: ESLint Check and Report Upload
steps:
- - uses: actions/checkout@v3
+ - uses: actions/checkout@v4
with:
repository: ${{ github.event.pull_request.head.repo.full_name }}
ref: ${{ github.head_ref }}
@@ -93,3 +93,4 @@ jobs:
with:
commit_message: Apply formatting changes
branch: ${{ github.head_ref }}
+ file_pattern: ':!packages/rrweb-player/.svelte-kit/ambient.d.ts'
diff --git a/.gitignore b/.gitignore
index 97ae63a201..7384b1a8ab 100644
--- a/.gitignore
+++ b/.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
\ No newline at end of file
+.yarn/install-state.gz
+
+
+# for vite
+vite.config.js.timestamp-*
+vite.config.ts.timestamp-*
diff --git a/.prettierignore b/.prettierignore
index d380c1457f..4b17f7ece4 100644
--- a/.prettierignore
+++ b/.prettierignore
@@ -105,3 +105,8 @@
.changeset/witty-kids-talk.md
.changeset/yellow-mails-cheat.md
.changeset/young-timers-grow.md
+
+# files generated by svelte-kit
+packages/rrweb-player/.svelte-kit/generated/*
+packages/rrweb-player/.svelte-kit/ambient.d.ts
+packages/rrweb-player/.svelte-kit/non-ambient.d.ts
diff --git a/.puppeteerrc.cjs b/.puppeteerrc.cjs
new file mode 100644
index 0000000000..0831229fc5
--- /dev/null
+++ b/.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',
+};
diff --git a/.vscode/rrweb-monorepo.code-workspace b/.vscode/rrweb-monorepo.code-workspace
index ee31ea35ee..d10c5e621e 100644
--- a/.vscode/rrweb-monorepo.code-workspace
+++ b/.vscode/rrweb-monorepo.code-workspace
@@ -24,18 +24,77 @@
"name": "rrweb-snapshot (package)",
"path": "../packages/rrweb-snapshot"
},
+ {
+ "name": "@rrweb/all",
+ "path": "../packages/all"
+ },
+ {
+ "name": "@rrweb/record",
+ "path": "../packages/record"
+ },
+ {
+ "name": "@rrweb/replay",
+ "path": "../packages/replay"
+ },
+ {
+ "name": "@rrweb/types",
+ "path": "../packages/types"
+ },
+ {
+ "name": "@rrweb/packer",
+ "path": "../packages/packer"
+ },
{
"name": "web-extension (package)",
"path": "../packages/web-extension"
},
{ "name": "rrvideo (package)", "path": "../packages/rrvideo" },
- { "name": "@rrweb/types", "path": "../packages/types" }
+ {
+ "name": "@rrweb/rrweb-plugin-console-record",
+ "path": "../packages/plugins/rrweb-plugin-console-record"
+ },
+ {
+ "name": "@rrweb/rrweb-plugin-console-replay",
+ "path": "../packages/plugins/rrweb-plugin-console-replay"
+ },
+ {
+ "name": "@rrweb/rrweb-plugin-sequential-id-record",
+ "path": "../packages/plugins/rrweb-plugin-sequential-id-record"
+ },
+ {
+ "name": "@rrweb/rrweb-plugin-sequential-id-replay",
+ "path": "../packages/plugins/rrweb-plugin-sequential-id-replay"
+ },
+ {
+ "name": "@rrweb/rrweb-plugin-canvas-webrtc-record",
+ "path": "../packages/plugins/rrweb-plugin-canvas-webrtc-record"
+ },
+ {
+ "name": "@rrweb/rrweb-plugin-canvas-webrtc-replay",
+ "path": "../packages/plugins/rrweb-plugin-canvas-webrtc-replay"
+ }
],
"settings": {
+ "vitest.workspaceConfig": "../vitest.workspace.ts",
+ "vitest.commandLine": "yarn vitest",
"jest.disabledWorkspaceFolders": [
" rrweb monorepo",
+ "rrweb (package)",
"rrweb-player (package)",
- "@rrweb/types"
- ]
+ "rrweb-snapshot (package)",
+ "rrdom (package)",
+ "rrdom-nodejs (package)",
+ "@rrweb/all",
+ "@rrweb/record",
+ "@rrweb/replay",
+ "@rrweb/types",
+ "@rrweb/packer",
+ "@rrweb/rrweb-plugin-console-record",
+ "@rrweb/rrweb-plugin-console-replay",
+ "@rrweb/rrweb-plugin-sequential-id",
+ "@rrweb/rrweb-plugin-canvas-webrtc-record",
+ "@rrweb/rrweb-plugin-canvas-webrtc-replay"
+ ],
+ "typescript.tsdk": " rrweb monorepo/node_modules/typescript/lib"
}
}
diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md
index e6c87ea457..4883735bfe 100644
--- a/CONTRIBUTING.md
+++ b/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`
diff --git a/README.md b/README.md
index dc2ffef021..17e6b5591a 100644
--- a/README.md
+++ b/README.md
@@ -11,8 +11,8 @@
[![Join the chat at slack](https://img.shields.io/badge/slack-@rrweb-teal.svg?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
diff --git a/docs/recipes/canvas.md b/docs/recipes/canvas.md
index b8833b506e..d6676211af 100644
--- a/docs/recipes/canvas.md
+++ b/docs/recipes/canvas.md
@@ -40,5 +40,5 @@ replayer.play();
**Enable replaying Canvas will remove the sandbox, which may cause a potential security issue.**
-Alternatively you can stream canvas elements via webrtc with the canvas-webrtc plugin.
-For more information see [canvas-webrtc documentation](../../packages/rrweb/src/plugins/canvas-webrtc/Readme.md)
+Alternatively you can stream canvas elements via webrtc with the [rrweb-plugin-canvas-webrtc-record](../../packages/plugins/rrweb-plugin-canvas-webrtc-record/) & [rrweb-plugin-canvas-webrtc-replay](../../packages/plugins/rrweb-plugin-canvas-webrtc-replay) plugins.
+For more information see [canvas-webrtc documentation](../../packages/plugins/rrweb-plugin-canvas-webrtc-record/Readme.md)
diff --git a/docs/recipes/canvas.zh_CN.md b/docs/recipes/canvas.zh_CN.md
index 1f522c9bcf..ae8902a44b 100644
--- a/docs/recipes/canvas.zh_CN.md
+++ b/docs/recipes/canvas.zh_CN.md
@@ -40,5 +40,5 @@ replayer.play();
**回放 Canvas 将会关闭沙盒策略,导致一定风险**。
-另外,您可以使用 canvas-webrtc 插件通过 WEBRTC 流式传输 Canvas 元素。
-有关更多信息,请参考[canvas-webrtc 文档](../../packages/rrweb/src/plugins/canvas-webrtc/Readme.md)
+另外,您可以使用 [rrweb-plugin-canvas-webrtc-record](../../packages/plugins/rrweb-plugin-canvas-webrtc-record/) 和 [rrweb-plugin-canvas-webrtc-replay](../../packages/plugins/rrweb-plugin-canvas-webrtc-replay) 插件通过 WebRTC 流式传输 Canvas 元素。
+有关更多信息,请参考 [canvas-webrtc 文档](../../packages/plugins/rrweb-plugin-canvas-webrtc-record/Readme.md)。
diff --git a/docs/recipes/console.md b/docs/recipes/console.md
index ffeb55f18d..eb7b9a15e1 100644
--- a/docs/recipes/console.md
+++ b/docs/recipes/console.md
@@ -8,6 +8,9 @@ This feature aims to provide developers with more information about the bug scen
You can enable the logger using default option like this:
```js
+import rrweb from 'rrweb';
+import { getRecordConsolePlugin } from '@rrweb/rrweb-plugin-console-record';
+
rrweb.record({
emit: function emit(event) {
// you should use console.log in this way to avoid errors.
@@ -17,7 +20,7 @@ rrweb.record({
defaultLog(event);
},
// to use default record option
- plugins: [rrweb.getRecordConsolePlugin()],
+ plugins: [getRecordConsolePlugin()],
});
```
@@ -27,6 +30,9 @@ You should call console.log.\_\_rrweb_original\_\_() instead.
You can also customize the behavior of logger like this:
```js
+import rrweb from 'rrweb';
+import { getRecordConsolePlugin } from '@rrweb/rrweb-plugin-console-record';
+
rrweb.record({
emit: function emit(event) {
// you should use console.log in this way to avoid errors.
@@ -37,7 +43,7 @@ rrweb.record({
},
// customized options
plugins: [
- rrweb.getRecordConsolePlugin({
+ getRecordConsolePlugin({
level: ['info', 'log', 'warn', 'error'],
lengthThreshold: 10000,
stringifyOptions: {
@@ -64,9 +70,12 @@ All options are described below:
If recorded events include data of console log type, we will automatically play them.
```js
+import rrweb from 'rrweb';
+import { getReplayConsolePlugin } from '@rrweb/rrweb-plugin-console-replay';
+
const replayer = new rrweb.Replayer(events, {
plugins: [
- rrweb.getReplayConsolePlugin({
+ getReplayConsolePlugin({
level: ['info', 'log', 'warn', 'error'],
}),
],
diff --git a/docs/recipes/console.zh_CN.md b/docs/recipes/console.zh_CN.md
index 3171548427..42d0c08c92 100644
--- a/docs/recipes/console.zh_CN.md
+++ b/docs/recipes/console.zh_CN.md
@@ -7,7 +7,10 @@
可以通过如下代码使用默认的配置选项
```js
-rrweb.record({
+import rrweb from 'rrweb';
+import { getRecordConsolePlugin } from '@rrweb/rrweb-plugin-console-record';
+
+rweb.record({
emit: function emit(event) {
// 如果要使用console来输出信息,请使用如下的写法
const defaultLog = console.log['__rrweb_original__']
@@ -16,7 +19,7 @@ rrweb.record({
defaultLog(event);
},
// 使用默认的配置选项
- plugins: [rrweb.getRecordConsolePlugin()],
+ plugins: [getRecordConsolePlugin()],
});
```
@@ -26,6 +29,9 @@ rrweb.record({
你也可以定制录制 console 的选项
```js
+import rrweb from 'rrweb';
+import { getRecordConsolePlugin } from '@rrweb/rrweb-plugin-console-record';
+
rrweb.record({
emit: function emit(event) {
// 如果要使用console来输出信息,请使用如下的写法
@@ -36,7 +42,7 @@ rrweb.record({
},
// 定制的选项
plugins: [
- rrweb.getRecordConsolePlugin({
+ getRecordConsolePlugin({
level: ['info', 'log', 'warn', 'error'],
lengthThreshold: 10000,
stringifyOptions: {
@@ -63,9 +69,12 @@ rrweb.record({
如果 replayer 传入的 events 中包含了 console 类型的数据,我们将自动播放这些数据。
```js
+import rrweb from 'rrweb';
+import { getReplayConsolePlugin } from '@rrweb/rrweb-plugin-console-replay';
+
const replayer = new rrweb.Replayer(events, {
plugins: [
- rrweb.getReplayConsolePlugin({
+ getReplayConsolePlugin({
level: ['info', 'log', 'warn', 'error'],
}),
],
diff --git a/docs/recipes/customize-replayer.md b/docs/recipes/customize-replayer.md
index d30462326f..218ced2432 100644
--- a/docs/recipes/customize-replayer.md
+++ b/docs/recipes/customize-replayer.md
@@ -1,11 +1,11 @@
# Customize the Replayer
-When rrweb's Replayer and the rrweb-player UI do not fit your need, you can customize your replayer UI.
+When rrweb's Replayer and the [rrweb-player](../../packages/rrweb-player/) UI do not fit your need, you can customize your replayer UI.
There are several ways to do this:
-1. Use rrweb-player, and customize its CSS.
-2. Use rrweb-player, and set `showController: false` to hide the controller UI. With this config, you can implement your controller UI.
+1. Use [rrweb-player](../../packages/rrweb-player/), and customize its CSS.
+2. Use [rrweb-player](../../packages/rrweb-player/), and set `showController: false` to hide the controller UI. With this config, you can implement your controller UI.
3. Use the `insertStyleRules` options to inject some CSS into the replay iframe.
4. Develop a new replayer UI with rrweb's Replayer.
@@ -14,6 +14,8 @@ There are several ways to do this:
When using rrweb-player, you can hide its controller UI:
```js
+import rrwebPlayer from 'rrweb-player';
+
new rrwebPlayer({
target: document.body,
props: {
diff --git a/docs/recipes/customize-replayer.zh_CN.md b/docs/recipes/customize-replayer.zh_CN.md
index 58f6553fc0..70a297303f 100644
--- a/docs/recipes/customize-replayer.zh_CN.md
+++ b/docs/recipes/customize-replayer.zh_CN.md
@@ -1,11 +1,11 @@
# 自定义回放 UI
-当 rrweb Replayer 和 rrweb-player 的 UI 不能满足需求时,可以通过自定义回放 UI 制作属于你自己的回放器。
+当 rrweb Replayer 和 [rrweb-player](../../packages/rrweb-player/) 的 UI 不能满足需求时,可以通过自定义回放 UI 制作属于你自己的回放器。
你可以通过以下几种方式从不同角度自定义回放 UI:
-1. 使用 rrweb-player 时,通过覆盖 CSS 样式表定制 UI。
-2. 使用 rrweb-player 时,通过 `showController: false` 隐藏控制器 UI,重新实现控制器 UI。
+1. 使用 [rrweb-player](../../packages/rrweb-player/) 时,通过覆盖 CSS 样式表定制 UI。
+2. 使用 [rrweb-player](../../packages/rrweb-player/) 时,通过 `showController: false` 隐藏控制器 UI,重新实现控制器 UI。
3. 通过 `insertStyleRules` 在回放页面(iframe)内定制 CSS 样式。
4. 基于 rrweb Replayer 开发自己的回放器 UI。
@@ -14,6 +14,8 @@
使用 rrweb-player 时,可以隐藏其控制器 UI:
```js
+import rrwebPlayer from 'rrweb-player';
+
new rrwebPlayer({
target: document.body,
props: {
diff --git a/docs/recipes/optimize-storage.md b/docs/recipes/optimize-storage.md
index cd5152593a..a50118bf89 100644
--- a/docs/recipes/optimize-storage.md
+++ b/docs/recipes/optimize-storage.md
@@ -69,20 +69,24 @@ rrweb.record({
### Use packFn to compress every event
-rrweb provides an fflate-based simple compress function rrweb.pack.
+rrweb provides an fflate-based simple compress function in [@rrweb/packer](../../packages/packer/).
You can use it by passing it as the `packFn` in the recording.
```js
+import { pack } from '@rrweb/packer';
+
rrweb.record({
emit(event) {},
packFn: rrweb.pack,
});
```
-And you need to pass rrweb.unpack as the `unpackFn` in replaying.
+And you need to pass packer.unpack as the `unpackFn` in replaying.
```js
+import { unpack } from '@rrweb/packer';
+
const replayer = new rrweb.Replayer(events, {
unpackFn: rrweb.unpack,
});
diff --git a/docs/recipes/optimize-storage.zh_CN.md b/docs/recipes/optimize-storage.zh_CN.md
index c180d57ad5..92bbdbdbc1 100644
--- a/docs/recipes/optimize-storage.zh_CN.md
+++ b/docs/recipes/optimize-storage.zh_CN.md
@@ -69,18 +69,22 @@ rrweb.record({
### 基于 packFn 的单数据压缩
-rrweb 内包含了基于 fflate 的简单压缩 rrweb.pack,在录制时可以作为 `packFn` 传入。
+rrweb 提供了一个基于 fflate 的简单压缩函数,在 [@rrweb/packer](../../packages/packer/) 中可以作为 `packFn` 传入使用。
```js
+import { pack } from '@rrweb/packer';
+
rrweb.record({
emit(event) {},
packFn: rrweb.pack,
});
```
-回放时通用需要传入 rrweb.unpack 作为 `unpackFn` 传入。
+回放时通用需要传入 packer.unpack 作为 `unpackFn` 传入。
```js
+import { unpack } from '@rrweb/packer';
+
const replayer = new rrweb.Replayer(events, {
unpackFn: rrweb.unpack,
});
diff --git a/docs/recipes/plugin.md b/docs/recipes/plugin.md
index e4c6bfcae7..d322bc1eaf 100644
--- a/docs/recipes/plugin.md
+++ b/docs/recipes/plugin.md
@@ -4,7 +4,12 @@ The plugin API is designed to extend the function of rrweb without bump the size
# Available plugins
-- [console](./console.md)
+- [@rrweb/rrweb-plugin-console-record](packages/plugins/rrweb-plugin-console-record): A plugin for recording console logs.
+- [@rrweb/rrweb-plugin-console-replay](packages/plugins/rrweb-plugin-console-replay): A plugin for replaying console logs.
+- [@rrweb/rrweb-plugin-sequential-id-record](packages/plugins/rrweb-plugin-sequential-id-record): A plugin for recording sequential IDs.
+- [@rrweb/rrweb-plugin-sequential-id-replay](packages/plugins/rrweb-plugin-sequential-id-replay): A plugin for replaying sequential IDs.
+- [@rrweb/rrweb-plugin-canvas-webrtc-record](packages/plugins/rrweb-plugin-canvas-webrtc-record): A plugin for stream `