diff --git a/src/rebuild.ts b/src/rebuild.ts index f6be61ca..bcf1f681 100644 --- a/src/rebuild.ts +++ b/src/rebuild.ts @@ -1,4 +1,15 @@ -import { serializedNodeWithId, NodeType } from './types'; +import { serializedNodeWithId, NodeType, tagMap, elementNode } from './types'; + +const tagMap: tagMap = { + script: 'noscript', +}; +function getTagName(n: elementNode): string { + let tagName = tagMap[n.tagName] ? tagMap[n.tagName] : n.tagName; + if (tagName === 'link' && n.attributes._cssText) { + tagName = 'style'; + } + return tagName; +} function buildNode(n: serializedNodeWithId): Node | null { switch (n.type) { @@ -11,14 +22,15 @@ function buildNode(n: serializedNodeWithId): Node | null { n.systemId, ); case NodeType.Element: - const tagName = n.tagName === 'script' ? 'noscript' : n.tagName; + const tagName = getTagName(n); const node = document.createElement(tagName); for (const name in n.attributes) { if (n.attributes.hasOwnProperty(name)) { let value = n.attributes[name]; value = typeof value === 'boolean' ? '' : value; - // textarea hack - if (n.tagName === 'textarea' && name === 'value') { + const isTextarea = tagName === 'textarea' && name === 'value'; + const isRemoteCss = tagName === 'style' && name === '_cssText'; + if (isTextarea || isRemoteCss) { const child = document.createTextNode(value); node.appendChild(child); continue; diff --git a/src/snapshot.ts b/src/snapshot.ts index c6f4eb60..c5af9f58 100644 --- a/src/snapshot.ts +++ b/src/snapshot.ts @@ -15,7 +15,18 @@ function resetId() { _id = 1; } -function serializeNode(n: Node): serializedNode | false { +function getCssRulesString(s: CSSStyleSheet): string | null { + try { + const rules = s.rules || s.cssRules; + return rules + ? Array.from(rules).reduce((prev, cur) => (prev += cur.cssText), '') + : null; + } catch (error) { + return null; + } +} + +function serializeNode(n: Node, doc: Document): serializedNode | false { switch (n.nodeType) { case n.DOCUMENT_NODE: return { @@ -31,10 +42,23 @@ function serializeNode(n: Node): serializedNode | false { }; case n.ELEMENT_NODE: const tagName = (n as HTMLElement).tagName.toLowerCase(); - const attributes: attributes = {}; + let attributes: attributes = {}; for (const { name, value } of Array.from((n as HTMLElement).attributes)) { attributes[name] = value; } + // remote css + if (tagName === 'link' && attributes.hasOwnProperty('href')) { + const stylesheet = Array.from(doc.styleSheets).find( + s => s.href === attributes.href, + ); + const cssText = getCssRulesString(stylesheet as CSSStyleSheet); + if (cssText) { + attributes = { + _cssText: cssText, + }; + } + } + // form fields if ( tagName === 'input' || tagName === 'textarea' || @@ -91,8 +115,8 @@ function serializeNode(n: Node): serializedNode | false { } } -function _snapshot(n: Node): serializedNodeWithId | null { - const _serializedNode = serializeNode(n); +function _snapshot(n: Node, doc: Document): serializedNodeWithId | null { + const _serializedNode = serializeNode(n, doc); if (!_serializedNode) { // TODO: dev only console.warn(n, 'not serialized'); @@ -106,15 +130,15 @@ function _snapshot(n: Node): serializedNodeWithId | null { serializedNode.type === NodeType.Element ) { for (const childN of Array.from(n.childNodes)) { - serializedNode.childNodes.push(_snapshot(childN)); + serializedNode.childNodes.push(_snapshot(childN, doc)); } } return serializedNode; } -function snapshot(n: Node): serializedNodeWithId | null { +function snapshot(n: Document): serializedNodeWithId | null { resetId(); - return _snapshot(n); + return _snapshot(n, n); } export default snapshot; diff --git a/src/types.ts b/src/types.ts index 17fc0e42..ea19a198 100644 --- a/src/types.ts +++ b/src/types.ts @@ -53,3 +53,7 @@ export type serializedNode = | commentNode; export type serializedNodeWithId = serializedNode & { id: number }; + +export type tagMap = { + [key: string]: string; +}; diff --git a/test/html/cors-style-sheet.html b/test/html/cors-style-sheet.html new file mode 100644 index 00000000..06dddaa2 --- /dev/null +++ b/test/html/cors-style-sheet.html @@ -0,0 +1,16 @@ + + + + + + + + with style sheet + + + + + + + + \ No newline at end of file diff --git a/test/html/with-style-sheet.html b/test/html/with-style-sheet.html index 43e0cb01..14f09d38 100644 --- a/test/html/with-style-sheet.html +++ b/test/html/with-style-sheet.html @@ -13,4 +13,23 @@ + + + + + + + + + + + + with style sheet + + + + + + + \ No newline at end of file diff --git a/test/integration.ts b/test/integration.ts index cdd4139f..40f9cc03 100644 --- a/test/integration.ts +++ b/test/integration.ts @@ -64,7 +64,7 @@ describe('integration tests', () => { before(async () => { this.server = await server(); this.browser = await puppeteer.launch({ - headless: false, + // headless: false, executablePath: '/home/yanzhen/Desktop/chrome-linux/chrome', }); @@ -79,33 +79,35 @@ describe('integration tests', () => { this.code = code; }); - after(() => { - this.browser.close(); - this.server.close(); + after(async () => { + await this.browser.close(); + await this.server.close(); }); - for (const html of htmls) { + for (const html of htmls.slice(0, 10)) { it('[html file]: ' + html.filePath, async () => { const page: puppeteer.Page = await this.browser.newPage(); - await page.goto(`http://localhost:3030/html/${html.filePath}`); + // console for debug + // tslint:disable-next-line: no-console + page.on('console', msg => console.log(msg.text())); + await page.goto(`http://localhost:3030/html`); await page.setContent(html.src); - page.once('load', async () => { - await page.evaluate(() => { - const x = new XMLSerializer(); - return x.serializeToString(document); - }); - const rebuildHtml = (await page.evaluate(`${this.code} - const x = new XMLSerializer(); - const snap = rrweb.snapshot(document); - x.serializeToString(rrweb.rebuild(snap)); - `)).replace(/\n\n/g, ''); - await page.goto(`data:text/html,${html.dest}`); - const destHtml = (await page.evaluate(() => { - const x = new XMLSerializer(); - return x.serializeToString(document); - })).replace(/\n\n/g, ''); - expect(rebuildHtml).to.equal(destHtml); + await page.evaluate(() => { + const x = new XMLSerializer(); + return x.serializeToString(document); }); + const rebuildHtml = (await page.evaluate(`${this.code} + const x = new XMLSerializer(); + const snap = rrweb.snapshot(document); + x.serializeToString(rrweb.rebuild(snap)); + `)).replace(/\n\n/g, ''); + await page.goto(`http://localhost:3030/html`); + await page.setContent(html.dest); + const destHtml = (await page.evaluate(() => { + const x = new XMLSerializer(); + return x.serializeToString(document); + })).replace(/\n\n/g, ''); + expect(rebuildHtml).to.equal(destHtml); }).timeout(5000); } });