diff --git a/package.json b/package.json index d67f286d..e9478e86 100644 --- a/package.json +++ b/package.json @@ -36,12 +36,12 @@ "@types/chai": "^4.1.4", "@types/mocha": "^5.2.5", "@types/node": "^10.11.3", - "@types/puppeteer": "^1.8.0", + "@types/puppeteer": "^1.12.4", "chai": "^4.1.2", "cross-env": "^5.2.0", "jest-snapshot": "^23.6.0", "mocha": "^5.2.0", - "puppeteer": "^1.10.0", + "puppeteer": "^1.15.0", "rollup": "^0.66.4", "rollup-plugin-terser": "^3.0.0", "rollup-plugin-typescript": "^1.0.0", diff --git a/src/snapshot.ts b/src/snapshot.ts index 1be1b6a4..5a56d65a 100644 --- a/src/snapshot.ts +++ b/src/snapshot.ts @@ -21,7 +21,10 @@ function getCssRulesString(s: CSSStyleSheet): string | null { try { const rules = s.rules || s.cssRules; return rules - ? Array.from(rules).reduce((prev, cur) => prev + getCssRuleString(cur), '') + ? Array.from(rules).reduce( + (prev, cur) => prev + getCssRuleString(cur), + '', + ) : null; } catch (error) { return null; @@ -29,7 +32,9 @@ function getCssRulesString(s: CSSStyleSheet): string | null { } function getCssRuleString(rule: CSSRule): string { - return isCSSImportRule(rule) ? getCssRulesString(rule.styleSheet) || '' : rule.cssText; + return isCSSImportRule(rule) + ? getCssRulesString(rule.styleSheet) || '' + : rule.cssText; } function isCSSImportRule(rule: CSSRule): rule is CSSImportRule { @@ -98,6 +103,7 @@ function serializeNode( n: Node, doc: Document, blockClass: string | RegExp, + inlineStylesheet: boolean, ): serializedNode | false { switch (n.nodeType) { case n.DOCUMENT_NODE: @@ -136,7 +142,7 @@ function serializeNode( } } // remote css - if (tagName === 'link') { + if (tagName === 'link' && inlineStylesheet) { const stylesheet = Array.from(doc.styleSheets).find(s => { return s.href === (n as HTMLLinkElement).href; }); @@ -238,8 +244,9 @@ export function serializeNodeWithId( map: idNodeMap, blockClass: string | RegExp, skipChild = false, + inlineStylesheet = true, ): serializedNodeWithId | null { - const _serializedNode = serializeNode(n, doc, blockClass); + const _serializedNode = serializeNode(n, doc, blockClass, inlineStylesheet); if (!_serializedNode) { // TODO: dev only console.warn(n, 'not serialized'); @@ -279,10 +286,14 @@ export function serializeNodeWithId( function snapshot( n: Document, blockClass: string | RegExp = 'rr-block', + inlineStylesheet = true, ): [serializedNodeWithId | null, idNodeMap] { resetId(); const idNodeMap: idNodeMap = {}; - return [serializeNodeWithId(n, n, idNodeMap, blockClass), idNodeMap]; + return [ + serializeNodeWithId(n, n, idNodeMap, blockClass, false, inlineStylesheet), + idNodeMap, + ]; } export default snapshot; diff --git a/test/integration.ts b/test/integration.ts index 8edcebee..c0fdf2af 100644 --- a/test/integration.ts +++ b/test/integration.ts @@ -104,7 +104,9 @@ describe('integration tests', function(this: ISuite) { // 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); + await page.setContent(html.src, { + waitUntil: 'load', + }); const rebuildHtml = (await page.evaluate(`${this.code} const x = new XMLSerializer(); const [snap] = rrweb.snapshot(document); diff --git a/typings/snapshot.d.ts b/typings/snapshot.d.ts index 7de5fb4c..61ed5163 100644 --- a/typings/snapshot.d.ts +++ b/typings/snapshot.d.ts @@ -1,6 +1,6 @@ import { serializedNodeWithId, idNodeMap } from './types'; export declare function resetId(): void; export declare function absoluteToStylesheet(cssText: string, href: string): string; -export declare function serializeNodeWithId(n: Node, doc: Document, map: idNodeMap, blockClass: string | RegExp, skipChild?: boolean): serializedNodeWithId | null; -declare function snapshot(n: Document, blockClass?: string | RegExp): [serializedNodeWithId | null, idNodeMap]; +export declare function serializeNodeWithId(n: Node, doc: Document, map: idNodeMap, blockClass: string | RegExp, skipChild?: boolean, inlineStylesheet?: boolean): serializedNodeWithId | null; +declare function snapshot(n: Document, blockClass?: string | RegExp, inlineStylesheet?: boolean): [serializedNodeWithId | null, idNodeMap]; export default snapshot;