Remove INode (node.__sn) and use Mirror as source of truth (#868)

* Move ids to weakmap

* Fix typo

* Move from INode to storing serialized data in mirror

* Update packages/rrweb-snapshot/src/rebuild.ts

Co-authored-by: Yun Feng <yun.feng@anu.edu.au>

* Remove unnessisary `as Node` typecastings

Fixes: https://github.com/rrweb-io/rrweb/pull/868#discussion_r842240758

* Remove unnessisary `as unknown as ...`

* Remove unnessisary `as unknown as ...`

* Reset mirror when recording starts

Solves: https://github.com/rrweb-io/rrweb/pull/868#discussion_r842249599

* API has changed for snapshot, change test to reflect that

* Allow for es5 compatibility

* Remove unnessisary as unknown as ... and change test to reflect the API change

* Refactor mirror to remove `nodeIdMap`

Fixes: https://github.com/rrweb-io/rrweb/pull/868#discussion_r842732696

Co-authored-by: Yun Feng <yun.feng@anu.edu.au>
This commit is contained in:
Justin Halsall
2026-04-01 12:00:00 +08:00
committed by GitHub
parent 65237a5ee9
commit d4f5d8dc48
36 changed files with 442 additions and 382 deletions

View File

@@ -131,8 +131,8 @@ describe('integration tests', function (this: ISuite) {
const rebuildHtml = (
await page.evaluate(`${code}
const x = new XMLSerializer();
const [snap] = rrweb.snapshot(document);
let out = x.serializeToString(rrweb.rebuild(snap, { doc: document })[0]);
const snap = rrweb.snapshot(document);
let out = x.serializeToString(rrweb.rebuild(snap, { doc: document }));
if (document.querySelector('html').getAttribute('xmlns') !== 'http://www.w3.org/1999/xhtml') {
// this is just an artefact of serializeToString
out = out.replace(' xmlns=\"http://www.w3.org/1999/xhtml\"', '');
@@ -168,7 +168,7 @@ describe('integration tests', function (this: ISuite) {
`pre-check: images will be rendered ~326px high in BackCompat mode, and ~588px in CSS1Compat mode; getting: ${renderedHeight}px`,
);
const rebuildRenderedHeight = await page.evaluate(`${code}
const [snap] = rrweb.snapshot(document);
const snap = rrweb.snapshot(document);
const iframe = document.createElement('iframe');
iframe.setAttribute('width', document.body.clientWidth)
iframe.setAttribute('height', document.body.clientHeight)
@@ -205,9 +205,7 @@ iframe.contentDocument.querySelector('center').clientHeight
inlineStylesheet: false
})`);
await page.waitFor(100);
const snapshot = await page.evaluate(
'JSON.stringify(snapshot[0], null, 2);',
);
const snapshot = await page.evaluate('JSON.stringify(snapshot, null, 2);');
assert(snapshot.includes('"rr_dataURL"'));
assert(snapshot.includes('data:image/webp;base64,'));
});
@@ -253,7 +251,7 @@ describe('iframe integration tests', function (this: ISuite) {
});
const snapshotResult = JSON.stringify(
await page.evaluate(`${code};
rrweb.snapshot(document)[0];
rrweb.snapshot(document);
`),
null,
2,
@@ -302,7 +300,7 @@ describe('shadow DOM integration tests', function (this: ISuite) {
});
const snapshotResult = JSON.stringify(
await page.evaluate(`${code};
rrweb.snapshot(document)[0];
rrweb.snapshot(document);
`),
null,
2,