xuguopeng/rrweb
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

impl the extra child data attribute to align id map

Browse Source
This commit is contained in:
Yanzhen Yu
2026-04-01 12:00:00 +08:00
parent 99fa24f711
commit 875385552d
3 changed files with 15 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

9
src/rebuild.ts
View File

@@ -24,6 +24,7 @@ function buildNode(n: serializedNodeWithId): Node | null {
case NodeType.Element:
const tagName = getTagName(n);
const node = document.createElement(tagName);
const extraChildIndexes: number[] = [];
for (const name in n.attributes) {
if (n.attributes.hasOwnProperty(name)) {
let value = n.attributes[name];
@@ -32,6 +33,8 @@ function buildNode(n: serializedNodeWithId): Node | null {
const isRemoteCss = tagName === 'style' && name === '_cssText';
if (isTextarea || isRemoteCss) {
const child = document.createTextNode(value);
// identify the extra child DOM we added when rebuild
extraChildIndexes.push(node.childNodes.length);
node.appendChild(child);
continue;
}
@@ -42,6 +45,12 @@ function buildNode(n: serializedNodeWithId): Node | null {
}
}
}
if (extraChildIndexes.length) {
node.setAttribute(
'data-extra-child-index',
JSON.stringify(extraChildIndexes),
);
}
return node;
case NodeType.Text:
return document.createTextNode(n.textContent);

4
src/snapshot.ts
View File

@@ -52,7 +52,7 @@ function absoluteToDoc(doc: Document, attributeValue: string): string {
if (!RELATIVE_PATH.test(attributeValue)) {
return attributeValue;
}
const a: HTMLAnchorElement = document.createElement('a');
const a: HTMLAnchorElement = doc.createElement('a');
a.href = attributeValue;
return a.href;
}
@@ -130,7 +130,7 @@ function serializeNode(n: Node, doc: Document): serializedNode | false {
n.parentNode && (n.parentNode as HTMLElement).tagName;
let textContent = (n as Text).textContent;
if (parentTagName === 'SCRIPT') {
textContent = '';
textContent = 'SCRIPT_PLACEHOLDER';
}
return {
type: NodeType.Text,

8
test/__snapshots__/integration.ts.snap
View File

@@ -76,7 +76,7 @@ exports[`[html file]: form-fields.html 1`] = `
<input type=\\"checkbox\\" checked=\\"\\" data-rrid=\\"32\\" />
</label>
<label for=\\"textarea\\" data-rrid=\\"35\\">
<textarea name=\\"\\" id=\\"\\" cols=\\"30\\" rows=\\"10\\" data-rrid=\\"37\\">1234</textarea>
<textarea name=\\"\\" id=\\"\\" cols=\\"30\\" rows=\\"10\\" data-extra-child-index=\\"[0]\\" data-rrid=\\"37\\">1234</textarea>
</label>
<label for=\\"select\\" data-rrid=\\"40\\">
<select name=\\"\\" id=\\"\\" value=\\"2\\" data-rrid=\\"42\\">
@@ -84,7 +84,7 @@ exports[`[html file]: form-fields.html 1`] = `
<option value=\\"2\\" selected=\\"\\" data-rrid=\\"47\\">2</option>
</select>
</label>
</form><noscript data-rrid=\\"53\\"></noscript>
</form><noscript data-rrid=\\"53\\">SCRIPT_PLACEHOLDER</noscript>
</body></html>"
`;
@@ -130,7 +130,7 @@ exports[`[html file]: with-script.html 1`] = `
<title data-rrid=\\"12\\">with script</title>
</head><body data-rrid=\\"16\\">
<noscript src=\\"http://localhost:3030/js/a.js\\" data-rrid=\\"18\\"></noscript>
<noscript data-rrid=\\"20\\"></noscript></body></html>"
<noscript data-rrid=\\"20\\">SCRIPT_PLACEHOLDER</noscript></body></html>"
`;
exports[`[html file]: with-style-sheet.html 1`] = `
@@ -139,7 +139,7 @@ exports[`[html file]: with-style-sheet.html 1`] = `
<meta name=\\"viewport\\" content=\\"width=device-width, initial-scale=1.0\\" data-rrid=\\"8\\" />
<meta http-equiv=\\"X-UA-Compatible\\" content=\\"ie=edge\\" data-rrid=\\"10\\" />
<title data-rrid=\\"12\\">with style sheet</title>
<style data-rrid=\\"15\\">body { margin: 0px; background: url('http://localhost:3030/a.jpg'); }p { color: red; background: url('http://localhost:3030/css/b.jpg'); }body &gt; p { color: yellow; }</style>
<style data-extra-child-index=\\"[0]\\" data-rrid=\\"15\\">body { margin: 0px; background: url('http://localhost:3030/a.jpg'); }p { color: red; background: url('http://localhost:3030/css/b.jpg'); }body &gt; p { color: yellow; }</style>
</head><body data-rrid=\\"18\\">
</body></html>"
`;