5fbb904edb
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 #1533 but that case is now covered with this PR This PR was originally extracted from #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 #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>
rrweb-snapshot
Snapshot the DOM into a stateful and serializable data structure. Also, provide the ability to rebuild the DOM via snapshot.
API
This module export following methods:
snapshot
snapshot will traverse the DOM and return a stateful and serializable data structure which can represent the current DOM view.
There are several things will be done during snapshot:
- Inline some DOM states into HTML attributes, e.g, HTMLInputElement's value.
- Turn script tags into
noscripttags to avoid scripts being executed. - Try to inline stylesheets to make sure local stylesheets can be used.
- Make relative paths in href, src, CSS to be absolute paths.
- Give an id to each Node, and return the id node map when snapshot finished.
rebuild
rebuild will build the DOM according to the taken snapshot.
There are several things will be done during rebuild:
- Add data-rrid attribute if the Node is an Element.
- Create some extra DOM node like text node to place inline CSS and some states.
- Add data-extra-child-index attribute if Node has some extra child DOM.
serializeNodeWithId
serializeNodeWithId can serialize a node into snapshot format with id.
buildNodeWithSN
buildNodeWithSN will build DOM from serialized node and store serialized information in the mirror.getMeta(node).
Sponsors
Become a sponsor and get your logo on our README on Github with a link to your site.
Gold Sponsors 🥇
Silver Sponsors 🥈
Bronze Sponsors 🥉
Backers
Core Team Members
Yuyz0112 |
Yun Feng |
eoghanmurray |
Juice10 open for rrweb consulting |
Who's using rrweb?
|
|
|
|
|
|
|
|
|
|
|
|
|