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
2018-10-16 15:18:07 +08:00
parent 0eedab53eb
commit e461136f71
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: case NodeType.Element:
const tagName = getTagName(n); const tagName = getTagName(n);
const node = document.createElement(tagName); const node = document.createElement(tagName);
const extraChildIndexes: number[] = [];
for (const name in n.attributes) { for (const name in n.attributes) {
if (n.attributes.hasOwnProperty(name)) { if (n.attributes.hasOwnProperty(name)) {
let value = n.attributes[name]; let value = n.attributes[name];
@@ -32,6 +33,8 @@ function buildNode(n: serializedNodeWithId): Node | null {
const isRemoteCss = tagName === 'style' && name === '_cssText'; const isRemoteCss = tagName === 'style' && name === '_cssText';
if (isTextarea || isRemoteCss) { if (isTextarea || isRemoteCss) {
const child = document.createTextNode(value); const child = document.createTextNode(value);
// identify the extra child DOM we added when rebuild
extraChildIndexes.push(node.childNodes.length);
node.appendChild(child); node.appendChild(child);
continue; 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; return node;
case NodeType.Text: case NodeType.Text:
return document.createTextNode(n.textContent); 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)) { if (!RELATIVE_PATH.test(attributeValue)) {
return attributeValue; return attributeValue;
} }
const a: HTMLAnchorElement = document.createElement('a'); const a: HTMLAnchorElement = doc.createElement('a');
a.href = attributeValue; a.href = attributeValue;
return a.href; return a.href;
} }
@@ -130,7 +130,7 @@ function serializeNode(n: Node, doc: Document): serializedNode | false {
n.parentNode && (n.parentNode as HTMLElement).tagName; n.parentNode && (n.parentNode as HTMLElement).tagName;
let textContent = (n as Text).textContent; let textContent = (n as Text).textContent;
if (parentTagName === 'SCRIPT') { if (parentTagName === 'SCRIPT') {
textContent = ''; textContent = 'SCRIPT_PLACEHOLDER';
} }
return { return {
type: NodeType.Text, 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\\" /> <input type=\\"checkbox\\" checked=\\"\\" data-rrid=\\"32\\" />
</label> </label>
<label for=\\"textarea\\" data-rrid=\\"35\\"> <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>
<label for=\\"select\\" data-rrid=\\"40\\"> <label for=\\"select\\" data-rrid=\\"40\\">
<select name=\\"\\" id=\\"\\" value=\\"2\\" data-rrid=\\"42\\"> <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> <option value=\\"2\\" selected=\\"\\" data-rrid=\\"47\\">2</option>
</select> </select>
</label> </label>
</form><noscript data-rrid=\\"53\\"></noscript> </form><noscript data-rrid=\\"53\\">SCRIPT_PLACEHOLDER</noscript>
</body></html>" </body></html>"
`; `;
@@ -130,7 +130,7 @@ exports[`[html file]: with-script.html 1`] = `
<title data-rrid=\\"12\\">with script</title> <title data-rrid=\\"12\\">with script</title>
</head><body data-rrid=\\"16\\"> </head><body data-rrid=\\"16\\">
<noscript src=\\"http://localhost:3030/js/a.js\\" data-rrid=\\"18\\"></noscript> <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`] = ` 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 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\\" /> <meta http-equiv=\\"X-UA-Compatible\\" content=\\"ie=edge\\" data-rrid=\\"10\\" />
<title data-rrid=\\"12\\">with style sheet</title> <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\\"> </head><body data-rrid=\\"18\\">
</body></html>" </body></html>"
`; `;