* Get around monkey patched Nodes
* inlineImages: Setting of `image.crossOrigin` is not always necessary (#1468)
Setting of the `crossorigin` attribute is not necessary for same-origin images, and causes an immediate image reload (albeit from cache) necessitating the use of a load event listener which subsequently mutates the snapshot. This change allows us to avoid the mutation of the snapshot for the same-origin case.
* Modify inlineImages test to remove delay and show that we can inline images without mutation
* Add an explicit test for when the `image.crossOrigin = 'anonymous';` method is necessary. Uses a combination of about:blank and our test server to simulate a cross-origin context
* Other test changes: there were some spurious rrweb mutations being generated by the addition of the crossorigin attribute that are now elimnated from the rrweb/__snapshots__/integration.test.ts.snap after this PR - this is good
* Move `childNodes` to @rrweb/utils
* Use non-monkey patched versions of the `childNodes`, `parentNode` `parentElement` `textContent` accessors
* Add getRootNode and contains, and add comprehensive todo list
* chore: Update turbo.json tasks for better build process
* Update caniuse-lite
* chore: Update eslint-plugin-compat to version 5.0.0
* chore: Bump @rrweb/utils version to 2.0.0-alpha.15
* delete unused yarn.lock files
* Set correct @rrweb/utils version in package.json
* Migrate over some accessors to reverse-monkey-patched version
* Add missing functions
* Fix illegal invocation error
* Revert closer to what it was.
This feels incorrect to me (Justin Halsall), but some of the tests break without it so I'm restoring this to be closer to its original here:
cfd686d488/packages/rrweb-snapshot/src/snapshot.ts (L1011)
* Reverse monkey patch all methods LWC hijacks
* Make tests more stable
* Safely handle rrdom nodes in hasShadowRoot
* Remove duplicated test
* Use variable `serverURL` in test
* Use monorepo default browserlist
* Fix typing issue for new typescript
* Remove unused package
* Remove unused code
* Add prefix to reverse-monkey-patched methods to make them more explicit
* Add default exports to @rrweb/utils
---------
Co-authored-by: Eoghan Murray <eoghan@getthere.ie>
* chore: its important to run `yarn build:all` before running `yarn dev`
* feat: trigger showModal from rrdom and rrweb
* feat: Add support for replaying modal and non modal dialog elements
* chore: Update dev script to remove CLEAR_DIST_DIR flag
* Get modal recording and replay working
* DRY up dialog test and dedupe snapshot images
* feat: Refactor dialog test to use updated attribute name
* feat: Update dialog test to include rr_open attribute
* chore: Add npm dependency happy-dom@14.12.0
* Add more test cases for dialog
* Clean up naming
* Refactor dialog open code
* Revert changed code that doesn't do anything
* Add documentation for unimplemented type
* chore: Remove unnecessary comments in dialog.test.ts
* rename rr_open to rr_openMode
* Replace todo with a skipped test
* Add better logging for CI
* Rename rr_openMode to rr_open_mode
rrdom downcases all attribute names which made `rr_openMode` tricky to deal with
* Remove unused images
* Move after iframe append based on @YunFeng0817's comment
https://github.com/rrweb-io/rrweb/pull/1503#discussion_r1666363931
* Remove redundant dialog handling from rrdom.
rrdom already handles dialog element creation it's self
* Rename variables for dialog handling in rrweb replay module
* Update packages/rrdom/src/document.ts
---------
Co-authored-by: Eoghan Murray <eoghan@getthere.ie>
* Replace relative URLs with absolute URLs when stringifying stylesheets
* Add test to show desired behavior for imported stylesheets from seperate directory
* Rename `absoluteToStylesheet` to `absolutifyURLs` and call it once after stringifying imported stylesheet
* Don't create the intermediary array of the spread operator
* Formalize that `stringifyRule` should expect a sheet href
* Ensure a <style> element can also import and gets it's url absolutized
* Handle case where non imported stylesheet has relative urls that need to be absolutified
* Clarify in test files where jpegs are expected to appear in absolutified urls
* Move absolutifyURLs call for import rules out of trycatch
* Add a benchmarking test for stringifyStylesheet
* Avoid the duplication on how to fall back
---------
Co-authored-by: Eoghan Murray <eoghan@getthere.ie>
Co-authored-by: eoghanmurray <eoghanmurray@users.noreply.github.com>
fix style element corner case
- historically we have recorded duplicated css content in certain cases (demonstrated by the attached replayer test). This fix ensures that the replayer doesn't doubly add the content, which can cause problems when further mutations occur
---------
Review and further tests contributed by: Eoghan Murray <eoghan@getthere.ie>
* feat: add new css parser
* make selectors change
* selectors and tests
* media changes
* remove old css references
* better variable name
* use postcss and port tests
* fix media test
* inline plugins
* fix failing multiline selector
* correct test result
* move tests to correct file
* cleanup all tests
* remove unused css-tree
* update bundle
* cleanup dependencies
* revert config files to master
* remove d.ts files
* update snapshot
* reset rebuilt test
* apply fuzzy css matching
* remove extra test
* Fix imports
* Newer versions of nswapi break rrdom-nodejs tests.
Example:
FAIL test/document-nodejs.test.ts > RRDocument for nodejs environment > RRDocument API > querySelectorAll
TypeError: e[api] is not a function
❯ byTag ../../node_modules/nwsapi/src/nwsapi.js:390:37
❯ Array.<anonymous> ../../node_modules/nwsapi/src/nwsapi.js:327:113
❯ collect ../../node_modules/nwsapi/src/nwsapi.js:1578:32
❯ Object._querySelectorAll [as select] ../../node_modules/nwsapi/src/nwsapi.js:1533:36
❯ RRDocument.querySelectorAll src/document-nodejs.ts:96:24
* Migrate from jest to vitest
* Order of selectors has changed with postcss
* Remove unused eslint
---------
Co-authored-by: Justin Halsall <Juice10@users.noreply.github.com>
- Running `yarn build` in a `packages/*/` directory will trigger build of all dependencies too, and cache them if possible.
- Fix for `yarn dev` breaking for `rrweb` package whenever changing files in `rrweb` package
- Update typescript, turbo, vite and vite-plugin-dts
- Require `workspaces-to-typescript-project-references` from `prepublish`
* all references to jest should have been removed in #1033
* clarify that `cross-env` is used to ensure that environmental variables get applied on Windows (previous usage of cross-env was removed in #1033)
* Minor fixup for #1349; the 'we can avoid the check on leaf elements' optimisation wasn't being applied as `n.childNodes` was always truthy even when there were no childNodes.
Changing it to `n.childNodes.length` directly there (see #1402) actually caused a bug as during a mutation, we serialize the text node directly, and need to jump to the parentElement to do the check.
This is why I've reimplemented this optimisation inside `needMaskingText` where we are already had an `isElement` test
Thanks to @Paulhejia (https://github.com/Paulhejia/rrweb/) for spotting that `Boolean(n.childNodes)` is aways true.
* Add option to block animation on <title> tag which can generate massive recordings on some websites (think scrolling title tag)
* Add new option to slimDOMOptions type with tsdoc as suggested by Justin
* Chore: Add move most types from rrweb to @rrweb/types package
* Split off type imports
* Split off type import to its own line
* Get vite to generate type definitions
* Apply formatting changes
* noEmit not allowed in tsconfig, moved it to build step
* Migrate rrdom-nodejs build to vite
* Apply formatting changes
* Migrate rrweb-snapshot to vite
* Unify configs
* Chore: Migrate rrdom to vite
Turns out what we where doing by overwriting `public textContent: string | undefined` as a getter in a subclass is something that isn't allowed in typescript. Because we where using `// @ts-ignore` to hide this error our bundler chose to allow the overwrite. Vite choses to disallow the overwrite making all subclasses' `textContent` undefined.
To mitigate this we're using an abstract class, which does allow sub classes to decide if they wan't to use getters or not.
* Chore: Migrate rrweb to vite WIP
* build:browser was removed (for now)
* BREAKING: moved rrweb-plugin-console to its own npm module
This removes console from rrweb-all.js
* Support cjs files in startServer
* Move canvas-webrtc plugin to its own package
* Chore: move sequential-id plugin to its own package
* Chore: Configure rrweb's vite bundling
* `Id` had lowercase `d` before, making it lowercase again
* Test: Move console tests to their own package
* remove unused utils from rrdom
* pull in latest version of master
something when wrong earlier when resolving merge conflicts, this should be correct
* Fix type casting issue in diff.ts
* Fix typo
* Fix duplicate entries in package.json and tsconfig.json
* Apply formatting changes
* Update dependencies in package.json files
* Update dependencies to use Vite 5.2.8 in package.json files
* Get tests passing for rrdom
`apply virtual style rules to node` tests need to be moved to rrweb to avoid circular dependencies
* Fix image loading issue in integration tests
* Move pack/unpack to its own @rrweb/packer module
* Get tests to work in rrdom-nodejs
* Port tests in rrweb-snapshot to vitest and fix them
* Fix tests for rrweb-plugin-console-record
* Add @rrweb/all package
* Fix publint and attw errors for rrdom and @rrweb/types
* Use shared vitest.config.ts in rrweb-snapshot package
* Fix publint and attw issues for rrweb-snapshot
* Export `ReplayPlugin` type directly from rrweb
* Fix publint and attw issues for packages
* Fix publint & attw issue.
I was bumping into this issue: 3729bc2a3c/docs/problems/NoResolution.md
And had to choose one of these three methods described here:
https://github.com/andrewbranch/example-subpath-exports-ts-compat?tab=readme-ov-file#typescript-friendly-strategies-for-packagejson-subpath-exports-compatibility
And I ended up going for the method described here:
1ffe3425b0/examples/node_modules/package-json-redirects (package-json-redirects)
The redirect method seemed the least invasive and most effective.
* Fix publint & attw issue.
I was bumping into this issue: 3729bc2a3c/docs/problems/NoResolution.md
And had to choose one of these three methods described here:
https://github.com/andrewbranch/example-subpath-exports-ts-compat?tab=readme-ov-file#typescript-friendly-strategies-for-packagejson-subpath-exports-compatibility
And I ended up going for the method described here:
1ffe3425b0/examples/node_modules/package-json-redirects (package-json-redirects)
The redirect method seemed the least invasive and most effective.
* move some rrdom tests that require rrweb to rrweb package
* Use pre-jest 29 syntax for snapshotting
* get rrweb passing publint and attw
* const enum does not work with isolated modules flag
* Fix script tag type in webgl.test.ts.snap and update rrweb.umd.cjs path in webgl.test.ts
* Fix paths
* Move tests for console record plugin and fix bundle path
* Fix tests for rrweb
* pack integration tests were moved to @rrweb/all
* Update rrweb bundle path in test files
* Fix flaky scroll emit from test
* Migrate rrweb's tests over to vitest and make them pass
* Make sure benchmarks & updating tests work
* Remove jest from rrweb
* Fix paths
* always use rrweb's own cssom
* Update tsconfig.json for rrweb-plugin-sequential-id-record
Fixes this error:
Error: @rrweb/rrweb-plugin-sequential-id-record:prepublish: tsconfig.json(9,5): error TS6377: Cannot write file '/home/runner/work/rrweb/rrweb/tsconfig.tsbuildinfo' because it will overwrite '.tsbuildinfo' file generated by referenced project '/home/runner/work/rrweb/rrweb/packages/rrweb'
* Add tsbuildinfo config to extended tsconfig files
* Move rrdom over to vitest
* Apply formatting changes
* Update rrweb imports to use the new package structure
* extend rrweb-snapshot's tsconfig from monorepo base config
* extend @rrweb/types's tsconfig from monorepo base config
* extend rrdom's tsconfig from monorepo base config
* extend rrdom-nodejs's tsconfig from monorepo base config
* extend web-extension's tsconfig from monorepo base config
* unify tsconfigs
* Continue when tests fail
* Add stricter type checking
* Add check-types global command
* remove jest
* Remove unused code
* Add check-types command to build script
* Fix linting issues
* Add setup Chrome action for CI/CD workflow
* Update puppeteer version in package.json for rrweb
* Update Chrome setup in CI/CD workflow
* Update Chrome setup in CI/CD workflow
* Add Chrome setup and test cache location
* Update CI/CD workflow to test chrome cache location
* Add chrome installation step to CI/CD workflow
* Update Puppeteer configuration for headless testing
* Update dependencies and workflow configuration
* Use same version of chrome on CI as is run locally
* Use version of chrome that seems to work with rrdom tests
* Try using puppeteerrc to define chrome version
* Add .cache directory to .gitignore
* Move global flag to vitest config
* Update puppeteer version to 20.9.0
* Update console log messages in rrweb-plugin-console-record for new puppeteer version
* Remove redundant Chrome setup from CI/CD workflow
* Add minification and umd for all built files
* Update import paths for rrweb dist files
* Add @rrweb/replay and @rrweb/record
* Add script to lint packages
* Apply formatting changes
* exclude styles export from typescript package type checking
* WIP Move rrweb-player over to vite
* Apply formatting changes
* chore: Update rrweb plugin import paths
* Remove rollup from rrweb-player
* Fix typing issues
* Fix typing issues
* chore: Update rrweb-player to use vite for build process
* Apply formatting changes
* chore: Export Player class in rrweb-player/src/main.ts
Makes attw happy
* Apply formatting changes
* Gets wiped by yarn workspaces-to-typescript-project-references
* Add .eslintignore and .eslintrc.cjs files for rrweb-player package
* Apply formatting changes
* Update dependencies in rrweb-player/package.json
* Apply formatting changes
* chore: Update eslint configuration for rrweb-player package
* Apply formatting changes
* chore: Remove unused files from rrweb-player package
* Apply formatting changes
* chore: Update rrweb-player import path to use rrweb-player.cjs
* chore: Update addEventListener signature in rrweb-player
* Apply formatting changes
* Add .eslintignore and update .gitignore files for to root
* Apply formatting changes
* Update documentation
* Update @rrweb/types package description
* Apply formatting changes
* Update build and run commands in CONTRIBUTING.md
* Apply formatting changes
* Update package versions to 2.0.0-alpha.13
* Apply formatting changes
* Apply formatting changes
* Fix import statement in media/index.ts
* Apply formatting changes
* chore: Update .gitignore to exclude build and dist directories
* Apply formatting changes
* Apply formatting changes
* Migrate setTimeout to vitest
* Apply formatting changes
* Apply formatting changes
* Fix isNativeShadowDom function signature in utils.ts
* try out jsr
* Apply formatting changes
* Update package versions to 2.0.0-alpha.14
* Apply formatting changes
* Fix name of rrwebSnapshot object
* Apply formatting changes
* Remove unused lock files
* Apply formatting changes
* Update rrweb bundle path to use umd.cjs format
* Apply formatting changes
* Trigger tests to run again
* Rename snapshots for vitest
* Apply formatting changes
* Ping CI
* Apply formatting changes
* Ping CI
* Apply formatting changes
* Ignore files generated by svelte-kit for prettier
* Correct Player object
fix for options `recordCanvas: true`:
* replace document.createElement with doc.createElement in rrweb-snapshot code
* Eoghan: add a regression test to prevent future accidental use of `document` instead of `doc`. This test can be excised if a new feature can only be run in the browser and not in the jsdom environment
Setting of the `crossorigin` attribute is not necessary for same-origin images, and causes an immediate image reload (albeit from cache) necessitating the use of a load event listener which subsequently mutates the snapshot. This change allows us to avoid the mutation of the snapshot for the same-origin case.
* Modify inlineImages test to remove delay and show that we can inline images without mutation
* Add an explicit test for when the `image.crossOrigin = 'anonymous';` method is necessary. Uses a combination of about:blank and our test server to simulate a cross-origin context
* Other test changes: there were some spurious rrweb mutations being generated by the addition of the crossorigin attribute that are now elimnated from the rrweb/__snapshots__/integration.test.ts.snap after this PR - this is good
* Fix and test for bug #1457 (Uncaught SyntaxError: Regular expression too large)
- see test case which is extracted from a real world css file; the selector regex was able to traverse the curly brace as when looking for quotes, it wasn't taking into account that the start quote could be escaped
* Apply formatting changes
* Create fair-ducks-clean.md
* Fix @import regex bit which was stopping consumption in the middle of a url - need to consume quotes.
Thanks dave.kindel@pendo.io for reporting and isolating this case
---------
Co-authored-by: eoghanmurray <eoghanmurray@users.noreply.github.com>
perf(snapshot): avoid costly generation of <a> element on each call to `getHref`, instead cache an anchor element and reuse it's href attributed
---------
Co-authored-by: Eoghan Murray <eoghan@getthere.ie>
* better splitting of selectors - overlapping with #1401
* Add test from example at https://github.com/PostHog/posthog/pull/21427
* ignore brackets inside selector strings
* Add another test as noticed that it's possible to escape strings
* Ensure we are ignoring commas within strings
Co-authored-by: Eoghan Murray <eoghan@getthere.ie>
* Add support for capturing media attributes in rrweb-snapshot
* Add loop to mediaInteractionParam
* Add support for loop in RRMediaElement
* Add support for recording loop attribute on media elements
* Update video playback and fix bugs
* Update cross-origin iframe media attributes and player state
* We weren't recursing into media queries (or @supports etc.) to rewrite hover pseudoclasses
* The early return meant that the stylesWithHoverClass cache wasn't being populated if there were no hover selectors on the stylesheet
- not committing the test, but modifying the existing 'add a hover class to a previously processed css string' as follows shows the problem:
--- a/packages/rrweb-snapshot/test/rebuild.test.ts
+++ b/packages/rrweb-snapshot/test/rebuild.test.ts
@@ -151,6 +185,7 @@ describe('rebuild', function () {
path.resolve(__dirname, './css/benchmark.css'),
'utf8',
);
+ cssText = cssText.replace(/:hover/g, '');
const start = process.hrtime();
addHoverClass(cssText, cache);
* Replace `min-device-width` and similar with `min-width` as the former looks out at the browser viewport whereas we need it to look at the replayer iframe viewport
* Add some tests to show how the hover replacement works against selector lists. I believe these were failing in a previous version of rrweb as I had some local patches that no longer seem to be needed to handle these cases
* Update name of function to reflect that 'addHoverClass' does more than just :hover. I believe this function is only exported for the purposes of use in the tests
* Apply formatting changes
* Create rotten-spies-enjoy.md
* Apply formatting changes
* Add correct typing on `getSelectors`
* Refactor CSS interfaces to include optional rules
* Change `rules` to be non optional
---------
Co-authored-by: eoghanmurray <eoghanmurray@users.noreply.github.com>
Co-authored-by: Justin Halsall <Juice10@users.noreply.github.com>
* Fix serialization and mutation of <textarea> elements taking account the duality that the value can be set in either the child node, or in the value _parameter_ (not attribute)
* Backwards compatibility: Bug fix and regression test for #112
- this is to fix up 'historical' recordings, as duplicate textarea content should no longer be being created at record time
- new test shows what the snapshot generated by previous versions of rrweb used to look like, hence 'bad'
- original 0efe23f04a fix either didn't work or no longer works due to childNodes being appended subsequent to this part of the code
- during review, we also verified that the `_cssText` case should still be handled okay, as there's currently no scenario where csstext is present with css child nodes of a <style>
* Masking: Fix that textarea values were being missed by the masking system if the value was recorded as a child node
- I didn't notice that form.html was used in other tests, so lucky that I noticed that those tests also should have the 'pre value' masked out
* Simplify by always storing the textarea value in the `.value` attribute (from it's DOM property) and not as a childNode. It should still be rebuilt as a childNode rather than a property
---------
Authored-by: eoghanmurray <eoghan@getthere.ie>
* masking performance: avoid the repeated calls to `closest` when recursing through the DOM
- needsMask===true means that an ancestor has tested positively for masking, and so this node and all descendents should be masked
- needsMask===false means that no ancestors have tested positively for masking, we should check each node encountered
- needsMask===undefined means that we don't know whether ancestors are masked or not (e.g. after a mutation) and should look up the tree
* Add tests including an explicit characterData mutation tests
* Further performance improvement: avoid calls to `el.matches` when on a leaf node, e.g. a `<br/>`
---------
Authored-by: eoghanmurray <eoghan@getthere.ie>
Based on initial PR #1338 by Alexey Babik <alexey.babik@noibu.com>
* Perf: don't run the regex replace unless the selectorText contains a colon (rules generally contain colons)
* Need to check type before querying selectorText property - also good as it means we only try to fix colons at the leaf level
---------
Authored-by: eoghan murray <eoghan@getthere.ie>
* Extend to run fixBrowserCompatibilityIssuesInCSS over styles in inline style sheets
* Apply formatting changes
---------
Co-authored-by: eoghanmurray <eoghanmurray@users.noreply.github.com>
* As per @Yun Feng: everyone has npm installed globally but maybe not yarn
* Add command to enable test result updating
* Default to running tests HEADLESS on rrweb
* Add command to build:all in a low memory environment
* Add a 'retest' command for when the code hasn't changed, but you are working on the test cases
* Add commands to reformat according to prettier. Named 'reformat' to indicate that we are doing a `--write`
* Update package.json
Co-authored-by: Yun Feng <yun.feng0817@gmail.com>
* Apply suggestions from code review
Co-authored-by: Yun Feng <yun.feng0817@gmail.com>
* Create few-turkeys-reflect.md
* Apply formatting changes
---------
Co-authored-by: Justin Halsall <Juice10@users.noreply.github.com>
Co-authored-by: Yun Feng <yun.feng0817@gmail.com>
* refactor rrvideo: use playwright rather than puppeteer
* add a progress bar for the tool
* add tests for cli.ts
* fix build error
* add change log
* update readme file
* Apply a scaling method to improve the resolution of the output video
* fix: change default value of input type from null to text
* Apply formatting changes
* add changeset
* add a comment related to the type of input element
* fix: Fix input.type check
Actually I noticed that `el.type` returns `text` when type is not explicitly set, so this is slightly incorrect.
* fix linting
* Apply formatting changes
