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

add inline option which can bypass the inline stylesheet

Browse Source
This commit is contained in:
Yanzhen Yu
2019-05-12 16:04:14 +08:00
parent 78c8c11e6b
commit 724b67f166
4 changed files with 23 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
package.json
View File

@@ -36,12 +36,12 @@
"@types/chai": "^4.1.4", "@types/chai": "^4.1.4",
"@types/mocha": "^5.2.5", "@types/mocha": "^5.2.5",
"@types/node": "^10.11.3", "@types/node": "^10.11.3",
"@types/puppeteer": "^1.8.0", "@types/puppeteer": "^1.12.4",
"chai": "^4.1.2", "chai": "^4.1.2",
"cross-env": "^5.2.0", "cross-env": "^5.2.0",
"jest-snapshot": "^23.6.0", "jest-snapshot": "^23.6.0",
"mocha": "^5.2.0", "mocha": "^5.2.0",
"puppeteer": "^1.10.0", "puppeteer": "^1.15.0",
"rollup": "^0.66.4", "rollup": "^0.66.4",
"rollup-plugin-terser": "^3.0.0", "rollup-plugin-terser": "^3.0.0",
"rollup-plugin-typescript": "^1.0.0", "rollup-plugin-typescript": "^1.0.0",

21
src/snapshot.ts
View File

@@ -21,7 +21,10 @@ function getCssRulesString(s: CSSStyleSheet): string | null {
try { try {
const rules = s.rules || s.cssRules; const rules = s.rules || s.cssRules;
return rules return rules
? Array.from(rules).reduce((prev, cur) => prev + getCssRuleString(cur), '') ? Array.from(rules).reduce(
(prev, cur) => prev + getCssRuleString(cur),
'',
)
: null; : null;
} catch (error) { } catch (error) {
return null; return null;
@@ -29,7 +32,9 @@ function getCssRulesString(s: CSSStyleSheet): string | null {
} }
function getCssRuleString(rule: CSSRule): string { 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 { function isCSSImportRule(rule: CSSRule): rule is CSSImportRule {
@@ -98,6 +103,7 @@ function serializeNode(
n: Node, n: Node,
doc: Document, doc: Document,
blockClass: string | RegExp, blockClass: string | RegExp,
inlineStylesheet: boolean,
): serializedNode | false { ): serializedNode | false {
switch (n.nodeType) { switch (n.nodeType) {
case n.DOCUMENT_NODE: case n.DOCUMENT_NODE:
@@ -136,7 +142,7 @@ function serializeNode(
} }
} }
// remote css // remote css
if (tagName === 'link') { if (tagName === 'link' && inlineStylesheet) {
const stylesheet = Array.from(doc.styleSheets).find(s => { const stylesheet = Array.from(doc.styleSheets).find(s => {
return s.href === (n as HTMLLinkElement).href; return s.href === (n as HTMLLinkElement).href;
}); });
@@ -238,8 +244,9 @@ export function serializeNodeWithId(
map: idNodeMap, map: idNodeMap,
blockClass: string | RegExp, blockClass: string | RegExp,
skipChild = false, skipChild = false,
inlineStylesheet = true,
): serializedNodeWithId | null { ): serializedNodeWithId | null {
const _serializedNode = serializeNode(n, doc, blockClass); const _serializedNode = serializeNode(n, doc, blockClass, inlineStylesheet);
if (!_serializedNode) { if (!_serializedNode) {
// TODO: dev only // TODO: dev only
console.warn(n, 'not serialized'); console.warn(n, 'not serialized');
@@ -279,10 +286,14 @@ export function serializeNodeWithId(
function snapshot( function snapshot(
n: Document, n: Document,
blockClass: string | RegExp = 'rr-block', blockClass: string | RegExp = 'rr-block',
inlineStylesheet = true,
): [serializedNodeWithId | null, idNodeMap] { ): [serializedNodeWithId | null, idNodeMap] {
resetId(); resetId();
const idNodeMap: idNodeMap = {}; const idNodeMap: idNodeMap = {};
return [serializeNodeWithId(n, n, idNodeMap, blockClass), idNodeMap]; return [
serializeNodeWithId(n, n, idNodeMap, blockClass, false, inlineStylesheet),
idNodeMap,
];
} }
export default snapshot; export default snapshot;

4
test/integration.ts
View File

@@ -104,7 +104,9 @@ describe('integration tests', function(this: ISuite) {
// tslint:disable-next-line: no-console // tslint:disable-next-line: no-console
page.on('console', msg => console.log(msg.text())); page.on('console', msg => console.log(msg.text()));
await page.goto(`http://localhost:3030/html`); 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 rebuildHtml = (await page.evaluate(`${this.code}
const x = new XMLSerializer(); const x = new XMLSerializer();
const [snap] = rrweb.snapshot(document); const [snap] = rrweb.snapshot(document);

4
typings/snapshot.d.ts vendored
View File

@@ -1,6 +1,6 @@
import { serializedNodeWithId, idNodeMap } from './types'; import { serializedNodeWithId, idNodeMap } from './types';
export declare function resetId(): void; export declare function resetId(): void;
export declare function absoluteToStylesheet(cssText: string, href: string): string; 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; 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): [serializedNodeWithId | null, idNodeMap]; declare function snapshot(n: Document, blockClass?: string | RegExp, inlineStylesheet?: boolean): [serializedNodeWithId | null, idNodeMap];
export default snapshot; export default snapshot;