From 1ddb0a334336e8337930a181f7e6c6916a2948b1 Mon Sep 17 00:00:00 2001 From: Yanzhen Yu Date: Fri, 12 Oct 2018 12:43:16 +0800 Subject: [PATCH] return id node map when rebuild --- index.d.ts | 2 +- src/rebuild.ts | 20 +++++++++++++++++--- test/css/style.css | 3 +++ test/html/with-style-sheet.html | 2 +- test/integration.ts | 2 +- 5 files changed, 23 insertions(+), 6 deletions(-) diff --git a/index.d.ts b/index.d.ts index 85dc9653..0bc43523 100644 --- a/index.d.ts +++ b/index.d.ts @@ -2,7 +2,7 @@ import { serializedNodeWithId, idNodeMap } from './src/types'; export * from './src/types'; export function snapshot(n: Document): [serializedNodeWithId | null, idNodeMap]; -export function rebuild(n: serializedNodeWithId): Node | null; +export function rebuild(n: serializedNodeWithId): [Node | null, idNodeMap]; export function serializeNodeWithId( n: Node, doc: Document, diff --git a/src/rebuild.ts b/src/rebuild.ts index fce1fb36..13029262 100644 --- a/src/rebuild.ts +++ b/src/rebuild.ts @@ -1,4 +1,11 @@ -import { serializedNodeWithId, NodeType, tagMap, elementNode } from './types'; +import { + serializedNodeWithId, + NodeType, + tagMap, + elementNode, + idNodeMap, + INode, +} from './types'; const tagMap: tagMap = { script: 'noscript', @@ -54,14 +61,16 @@ function buildNode(n: serializedNodeWithId): Node | null { } } -function rebuild(n: serializedNodeWithId): Node | null { +function _rebuild(n: serializedNodeWithId, map: idNodeMap): Node | null { const root = buildNode(n); if (!root) { return null; } + (root as INode).__sn = n; + map[n.id] = root as INode; if (n.type === NodeType.Document || n.type === NodeType.Element) { for (const childN of n.childNodes) { - const childNode = rebuild(childN); + const childNode = _rebuild(childN, map); if (!childNode) { console.warn('Failed to rebuild', childN); } else { @@ -72,4 +81,9 @@ function rebuild(n: serializedNodeWithId): Node | null { return root; } +function rebuild(n: serializedNodeWithId): [Node | null, idNodeMap] { + const idNodeMap: idNodeMap = {}; + return [_rebuild(n, idNodeMap), idNodeMap]; +} + export default rebuild; diff --git a/test/css/style.css b/test/css/style.css index 70b063e6..f1be9954 100644 --- a/test/css/style.css +++ b/test/css/style.css @@ -4,3 +4,6 @@ body { p { color: red; } +body > p { + color: yellow; +} diff --git a/test/html/with-style-sheet.html b/test/html/with-style-sheet.html index 9fc5bdad..9ba3c5e4 100644 --- a/test/html/with-style-sheet.html +++ b/test/html/with-style-sheet.html @@ -25,7 +25,7 @@ with style sheet - + diff --git a/test/integration.ts b/test/integration.ts index a6ed7da5..13647cc8 100644 --- a/test/integration.ts +++ b/test/integration.ts @@ -99,7 +99,7 @@ describe('integration tests', () => { const rebuildHtml = (await page.evaluate(`${this.code} const x = new XMLSerializer(); const [snap] = rrweb.snapshot(document); - x.serializeToString(rrweb.rebuild(snap)); + x.serializeToString(rrweb.rebuild(snap)[0]); `)).replace(/\n\n/g, ''); await page.goto(`http://localhost:3030/html`); await page.setContent(html.dest);