Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

inlineImages: Setting of image.crossOrigin is not always necessary #1468

Merged
merged 13 commits into from
May 23, 2024

Conversation

eoghanmurray
Copy link
Contributor

Setting of image.crossOrigin is not necessary for same origin images, and causes an immediate image reload necessitating the load event listener (albeit from cache)

Changeset:
"inlineImages: during snapshot avoid adding an event listener for inlining of same-origin images (async listener mutates the snapshot which can be problematic)"

@eoghanmurray eoghanmurray requested a review from YunFeng0817 May 3, 2024 15:13
Copy link

changeset-bot bot commented May 3, 2024

🦋 Changeset detected

Latest commit: ba7ca2d

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 8 packages
Name Type
rrweb Patch
rrweb-snapshot Patch
rrdom Patch
rrdom-nodejs Patch
rrweb-player Patch
@rrweb/types Patch
@rrweb/web-extension Patch
rrvideo Patch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

@eoghanmurray eoghanmurray changed the title inlineImags: Setting of image.crossOrigin is not always necessary inlineImages: Setting of image.crossOrigin is not always necessary May 3, 2024
@croqaz
Copy link
Contributor

croqaz commented May 7, 2024

Hi, thanks for the PR! I didn't use this project anymore, so I won't test the code on my own.
But I understand the problem you're trying to solve and I can confirm that setting the crossOrigin triggers a browser request.
This fix looks great!
I would test it with some pages that have images stored in a CDN which is different than the website host, from what I remember this is what triggers the crossOrigin request. This would be just to make sure the feature is not broken. You could make a static HTML page and inject some random images from random domains and record that page to see that it works.

@eoghanmurray
Copy link
Contributor Author

I would test it with some pages that have images stored in a CDN which is different than the website host, from what I remember this is what triggers the crossOrigin request. This would be just to make sure the feature is not broken.

Thank you so much for suggesting this; in fact the new code had a bug not present in the prior version which I've fixed here: 236cd54

@eoghanmurray eoghanmurray requested a review from Yuyz0112 May 8, 2024 15:41
<source type="image/webp" srcset="assets/img/characters/robot.webp" />
<img src="assets/img/characters/robot.png" />
</picture>
<img src="/images/robot.png" alt="This is a robot" />
<img src="https://avatars.githubusercontent.com/u/43396833?s=20&v=4" alt="CORS restricted but has access-control-allow-origin: *" />
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I was also thinking of using https://www.rrweb.io/favicon.png here but that isn't served with the requisite access-control-allow-origin: *@Yuyz0112 if you wish to add that header I can update the test to point to our own resource

Copy link
Contributor

@Juice10 Juice10 May 22, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

You could also check out how we do cross origin tests and do it in a similar fashion:

<iframe src="{SERVER_URL}/html/form.html" style="width: 400px; height: 400px;"></iframe>

This uses {SERVER_URL} to which gets replaced with a locally hosted server, and since about:blank is a different origin than that server you get your cross origin image

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

ah that's good

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I'll check if I can get our test server to set the access-control headers.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

That's done in d2df9bb
I can't believe it but it worked first time.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I didn't explicitly set or check that the access-control-origin header is actually being set; but I verified that failing to set the crossorigin="anonymous" on the <img> causes the test to fail

@eoghanmurray eoghanmurray force-pushed the inlineImages-crossOrigin branch from 61f3115 to f8cbf9c Compare May 22, 2024 21:46
@eoghanmurray eoghanmurray merged commit 4014305 into rrweb-io:master May 23, 2024
6 checks passed
Juice10 pushed a commit that referenced this pull request May 28, 2024
…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
Juice10 pushed a commit that referenced this pull request May 28, 2024
…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
Juice10 pushed a commit that referenced this pull request May 28, 2024
…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
vincent-psarga added a commit to Smartesting/rrweb that referenced this pull request Jun 5, 2024
jeffdnguyen pushed a commit to pendo-io/rrweb that referenced this pull request Jul 29, 2024
…rweb-io#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
jeffdnguyen pushed a commit to pendo-io/rrweb that referenced this pull request Jul 29, 2024
…rweb-io#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
Juice10 added a commit that referenced this pull request Aug 2, 2024
* 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:
https://github.com/rrweb-io/rrweb/blame/cfd686d488a9b88dba6b6f8880b5e4375dd8062c/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>
billyvg pushed a commit to getsentry/rrweb that referenced this pull request Sep 17, 2024
…rweb-io#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
jxiwang pushed a commit to amplitude/rrweb that referenced this pull request Oct 17, 2024
…rweb-io#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
jxiwang pushed a commit to amplitude/rrweb that referenced this pull request Oct 17, 2024
…rweb-io#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
jxiwang pushed a commit to amplitude/rrweb that referenced this pull request Oct 22, 2024
* Get around monkey patched Nodes

* inlineImages: Setting of `image.crossOrigin` is not always necessary (rrweb-io#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:
https://github.com/rrweb-io/rrweb/blame/cfd686d488a9b88dba6b6f8880b5e4375dd8062c/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>
ShayMalchi added a commit to SaolaAI/rrweb that referenced this pull request Nov 6, 2024
* Skip mask check on leaf elements (rrweb-io#1512)

* Minor fixup for rrweb-io#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 rrweb-io#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.

* Assuming all jest should have been removed in rrweb-io#1033 (rrweb-io#1511)

* all references to jest should have been removed in rrweb-io#1033
* clarify that `cross-env` is used to ensure that environmental variables get applied on Windows (previous usage of cross-env was removed in rrweb-io#1033)

* Fix async assertions in test files (rrweb-io#1510)

* fix: await assertSnapshot in test files for async assertions

* Fix maskInputFn is ignored during the creation of the full snapshot (rrweb-io#1386)

Fix that the optional `maskInputFn` was being accidentally ignored during the creation of the full snapshot

* Improve development tooling (rrweb-io#1516)

- 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`

* Version Packages (alpha) (rrweb-io#1513)

Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>

* Keep all packages in sync

* feat: add new css parser - postcss (rrweb-io#1458)

* 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>

* fix: console assert only logs when arg 0 is falsy (rrweb-io#1530)

* fix: console assert only logs when arg 0 is falsy

* [Feature] Include takeFullSnapshot function in rrweb (rrweb-io#1527)

* export takeFullSnapshot function in rrweb

* chore: reduce flakey test due to '[vite] connected' message (rrweb-io#1525)

* fix: duplicate textContent for style element cause incremental style mutation invalid (rrweb-io#1417)

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>

* Added support for deprecated addRule & removeRule methods (rrweb-io#1515)

* Added support for deprecated addRule & removeRule methods

* Respect addRule default value

* fix: nested stylesheets should have absolute URLs (rrweb-io#1533)

* 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>

* Support top-layer <dialog> recording & replay (rrweb-io#1503)

* 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
rrweb-io#1503 (comment)

* 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>

* Added session downloader for chrome extension (rrweb-io#1522)

* Added session downloader for chrome extension

- The session list now has a button to download sessions as .json files for use with rrweb-player
- Improved styling for the delete and download buttons

* Reverse monkey patch built in methods to support LWC (rrweb-io#1509)

* Get around monkey patched Nodes

* inlineImages: Setting of `image.crossOrigin` is not always necessary (rrweb-io#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:
https://github.com/rrweb-io/rrweb/blame/cfd686d488a9b88dba6b6f8880b5e4375dd8062c/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>

* Version Packages (alpha) (rrweb-io#1526)

Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>

* Single style capture (rrweb-io#1437)

Support a contrived/rare case where a <style> element has multiple text node children (this is usually only possible to recreate via javascript append) ... this PR fixes cases where there are subsequent text mutations to these nodes; previously these would have been lost

* In this scenario, a new CSS comment may now be inserted into the captured `_cssText` for a <style> element to show where it should be broken up into text elements upon replay: `/* rr_split */`
* The new 'can record and replay style mutations' test is the principal way to the problematic scenarios, and is a detailed 'catch-all' test with many checks to cover most of the ways things can fail
* There are new tests for splitting/rebuilding the css using the rr_split marker
* The prior 'dynamic stylesheet' route is now the main route for serializing a stylesheet; dynamic stylesheet were missed out in rrweb-io#1533 but that case is now covered with this PR

This PR was originally extracted from rrweb-io#1475 so the  initial motivation was to change the approach on stringifying <style> elements to do so in a single place.  This is also the motivating factor for always serializing <style> elements via the `_cssText` attribute rather than in it's childNodes; in rrweb-io#1475 we will be delaying populating `_cssText` for performance and instead recorrding them as assets.

Thanks for the detailed review to  Justin Halsall <Juice10@users.noreply.github.com> & Yun Feng <https://github.com/YunFeng0817>

* Simplify the hover replacement function (rrweb-io#1535)

Simplify the hover replacement function, which has been borrowed from postcss-pseudo-classes

Note: 'parses nested commas in selectors correctly' was failing after this PR, however I don't think that the previous behaviour was desirable, so have added a new test to formalize this expectation

* fix some typos in optimize-storage.md (rrweb-io#1565)

* fix some typos in optimize-storage.md

* Update docs/recipes/optimize-storage.md

* Create metal-mugs-mate.md

---------

Co-authored-by: Justin Halsall <Juice10@users.noreply.github.com>

* fix(rrdom): Ignore invalid DOM attributes when diffing (rrweb-io#1561)

* fix(rrdom): Ignore invalid DOM attributes when diffing (rrweb-io#213)

We encountered an issue where replays with invalid attributes (e.g.
`@click`) would break rendering the replay after seeking. The exception
bubbles up to
[here](https://github.com/rrweb-io/rrweb/blob/62093d4385a09eb0980c2ac02d97eea5ce2882be/packages/rrweb/src/replay/index.ts#L270-L279),
which means the replay will continue to play, but the replay mirror will
be incomplete.

Closes https://github.com/getsentry/team-replay/issues/458

* add changeset

* fix(snapshot): dimensions for blocked element not being applied (rrweb-io#1331)

fix for replay of a blocked element when using 'fast forward' (rrdom)

 - Dimensions were not being properly applied when you seek to a position in the replay. Need to use `setProperty` rather than trying to set the width/height directly

* ref: isParentRemoved to cache subtree (rrweb-io#1543)

* ref: isParentRemoved to cache subtree
* ref: cache at insertion too
* ref: remove wrapper function

---------

Co-authored-by: Justin Halsall <Juice10@users.noreply.github.com>

* changeset to 2.0.13

* fix snapshot build

---------

Co-authored-by: Eoghan Murray <eoghan@getthere.ie>
Co-authored-by: Justin Halsall <Juice10@users.noreply.github.com>
Co-authored-by: Alexey Babik <alexey.babik@gmail.com>
Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>
Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>
Co-authored-by: David Newell <david@posthog.com>
Co-authored-by: Paul D'Ambra <paul@posthog.com>
Co-authored-by: Christopher Arredondo <arredgroup@gmail.com>
Co-authored-by: Yun Feng <yun.feng0817@gmail.com>
Co-authored-by: minja malešević <33005827+okejminja@users.noreply.github.com>
Co-authored-by: Jeff Nguyen <jeffduy@gmail.com>
Co-authored-by: eoghanmurray <eoghanmurray@users.noreply.github.com>
Co-authored-by: Arun Kunigiri <kirankunigiri@gmail.com>
Co-authored-by: Riadh Mouamnia <85134557+riadhmouamnia@users.noreply.github.com>
Co-authored-by: Billy Vong <billyvg@users.noreply.github.com>
Co-authored-by: Jonas <jonas@badalic.com>
Co-authored-by: Shay Malchi <shay@saola.ai>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants