moved rrweb-snapshot into packages/rrweb-snapshot
This commit is contained in:
Mark-fenng
909
packages/rrweb-snapshot/src/css.ts
Normal file
909
packages/rrweb-snapshot/src/css.ts
Normal file
@@ -0,0 +1,909 @@
|
||||
/**
|
||||
* This file is a fork of https://github.com/reworkcss/css/blob/master/lib/parse/index.js
|
||||
* I fork it because:
|
||||
* 1. The css library was built for node.js which does not have tree-shaking supports.
|
||||
* 2. Rewrites into typescript give us a better type interface.
|
||||
*/
|
||||
|
||||
/* tslint:disable no-conditional-assignment interface-name no-shadowed-variable */
|
||||
|
||||
export interface ParserOptions {
|
||||
/** Silently fail on parse errors */
|
||||
silent?: boolean;
|
||||
/**
|
||||
* The path to the file containing css.
|
||||
* Makes errors and source maps more helpful, by letting them know where code comes from.
|
||||
*/
|
||||
source?: string;
|
||||
}
|
||||
|
||||
/**
|
||||
* Error thrown during parsing.
|
||||
*/
|
||||
export interface ParserError {
|
||||
/** The full error message with the source position. */
|
||||
message?: string;
|
||||
/** The error message without position. */
|
||||
reason?: string;
|
||||
/** The value of options.source if passed to css.parse. Otherwise undefined. */
|
||||
filename?: string;
|
||||
line?: number;
|
||||
column?: number;
|
||||
/** The portion of code that couldn't be parsed. */
|
||||
source?: string;
|
||||
}
|
||||
|
||||
export interface Loc {
|
||||
line?: number;
|
||||
column?: number;
|
||||
}
|
||||
|
||||
/**
|
||||
* Base AST Tree Node.
|
||||
*/
|
||||
export interface Node {
|
||||
/** The possible values are the ones listed in the Types section on https://github.com/reworkcss/css page. */
|
||||
type?: string;
|
||||
/** A reference to the parent node, or null if the node has no parent. */
|
||||
parent?: Node;
|
||||
/** Information about the position in the source string that corresponds to the node. */
|
||||
position?: {
|
||||
start?: Loc;
|
||||
end?: Loc;
|
||||
/** The value of options.source if passed to css.parse. Otherwise undefined. */
|
||||
source?: string;
|
||||
/** The full source string passed to css.parse. */
|
||||
content?: string;
|
||||
};
|
||||
}
|
||||
|
||||
export interface Rule extends Node {
|
||||
/** The list of selectors of the rule, split on commas. Each selector is trimmed from whitespace and comments. */
|
||||
selectors?: string[];
|
||||
/** Array of nodes with the types declaration and comment. */
|
||||
declarations?: Array<Declaration | Comment>;
|
||||
}
|
||||
|
||||
export interface Declaration extends Node {
|
||||
/** The property name, trimmed from whitespace and comments. May not be empty. */
|
||||
property?: string;
|
||||
/** The value of the property, trimmed from whitespace and comments. Empty values are allowed. */
|
||||
value?: string;
|
||||
}
|
||||
|
||||
/**
|
||||
* A rule-level or declaration-level comment. Comments inside selectors, properties and values etc. are lost.
|
||||
*/
|
||||
export interface Comment extends Node {
|
||||
comment?: string;
|
||||
}
|
||||
|
||||
/**
|
||||
* The @charset at-rule.
|
||||
*/
|
||||
export interface Charset extends Node {
|
||||
/** The part following @charset. */
|
||||
charset?: string;
|
||||
}
|
||||
|
||||
/**
|
||||
* The @custom-media at-rule
|
||||
*/
|
||||
export interface CustomMedia extends Node {
|
||||
/** The ---prefixed name. */
|
||||
name?: string;
|
||||
/** The part following the name. */
|
||||
media?: string;
|
||||
}
|
||||
|
||||
/**
|
||||
* The @document at-rule.
|
||||
*/
|
||||
export interface Document extends Node {
|
||||
/** The part following @document. */
|
||||
document?: string;
|
||||
/** The vendor prefix in @document, or undefined if there is none. */
|
||||
vendor?: string;
|
||||
/** Array of nodes with the types rule, comment and any of the at-rule types. */
|
||||
rules?: Array<Rule | Comment | AtRule>;
|
||||
}
|
||||
|
||||
/**
|
||||
* The @font-face at-rule.
|
||||
*/
|
||||
export interface FontFace extends Node {
|
||||
/** Array of nodes with the types declaration and comment. */
|
||||
declarations?: Array<Declaration | Comment>;
|
||||
}
|
||||
|
||||
/**
|
||||
* The @host at-rule.
|
||||
*/
|
||||
export interface Host extends Node {
|
||||
/** Array of nodes with the types rule, comment and any of the at-rule types. */
|
||||
rules?: Array<Rule | Comment | AtRule>;
|
||||
}
|
||||
|
||||
/**
|
||||
* The @import at-rule.
|
||||
*/
|
||||
export interface Import extends Node {
|
||||
/** The part following @import. */
|
||||
import?: string;
|
||||
}
|
||||
|
||||
/**
|
||||
* The @keyframes at-rule.
|
||||
*/
|
||||
export interface KeyFrames extends Node {
|
||||
/** The name of the keyframes rule. */
|
||||
name?: string;
|
||||
/** The vendor prefix in @keyframes, or undefined if there is none. */
|
||||
vendor?: string;
|
||||
/** Array of nodes with the types keyframe and comment. */
|
||||
keyframes?: Array<KeyFrame | Comment>;
|
||||
}
|
||||
|
||||
export interface KeyFrame extends Node {
|
||||
/** The list of "selectors" of the keyframe rule, split on commas. Each “selector” is trimmed from whitespace. */
|
||||
values?: string[];
|
||||
/** Array of nodes with the types declaration and comment. */
|
||||
declarations?: Array<Declaration | Comment>;
|
||||
}
|
||||
|
||||
/**
|
||||
* The @media at-rule.
|
||||
*/
|
||||
export interface Media extends Node {
|
||||
/** The part following @media. */
|
||||
media?: string;
|
||||
/** Array of nodes with the types rule, comment and any of the at-rule types. */
|
||||
rules?: Array<Rule | Comment | AtRule>;
|
||||
}
|
||||
|
||||
/**
|
||||
* The @namespace at-rule.
|
||||
*/
|
||||
export interface Namespace extends Node {
|
||||
/** The part following @namespace. */
|
||||
namespace?: string;
|
||||
}
|
||||
|
||||
/**
|
||||
* The @page at-rule.
|
||||
*/
|
||||
export interface Page extends Node {
|
||||
/** The list of selectors of the rule, split on commas. Each selector is trimmed from whitespace and comments. */
|
||||
selectors?: string[];
|
||||
/** Array of nodes with the types declaration and comment. */
|
||||
declarations?: Array<Declaration | Comment>;
|
||||
}
|
||||
|
||||
/**
|
||||
* The @supports at-rule.
|
||||
*/
|
||||
export interface Supports extends Node {
|
||||
/** The part following @supports. */
|
||||
supports?: string;
|
||||
/** Array of nodes with the types rule, comment and any of the at-rule types. */
|
||||
rules?: Array<Rule | Comment | AtRule>;
|
||||
}
|
||||
|
||||
/** All at-rules. */
|
||||
export type AtRule =
|
||||
| Charset
|
||||
| CustomMedia
|
||||
| Document
|
||||
| FontFace
|
||||
| Host
|
||||
| Import
|
||||
| KeyFrames
|
||||
| Media
|
||||
| Namespace
|
||||
| Page
|
||||
| Supports;
|
||||
|
||||
/**
|
||||
* A collection of rules
|
||||
*/
|
||||
export interface StyleRules {
|
||||
source?: string;
|
||||
/** Array of nodes with the types rule, comment and any of the at-rule types. */
|
||||
rules: Array<Rule | Comment | AtRule>;
|
||||
/** Array of Errors. Errors collected during parsing when option silent is true. */
|
||||
parsingErrors?: ParserError[];
|
||||
}
|
||||
|
||||
/**
|
||||
* The root node returned by css.parse.
|
||||
*/
|
||||
export interface Stylesheet extends Node {
|
||||
stylesheet?: StyleRules;
|
||||
}
|
||||
|
||||
// http://www.w3.org/TR/CSS21/grammar.html
|
||||
// https://github.com/visionmedia/css-parse/pull/49#issuecomment-30088027
|
||||
const commentre = /\/\*[^*]*\*+([^/*][^*]*\*+)*\//g;
|
||||
|
||||
export function parse(css: string, options: ParserOptions = {}) {
|
||||
/**
|
||||
* Positional.
|
||||
*/
|
||||
|
||||
let lineno = 1;
|
||||
let column = 1;
|
||||
|
||||
/**
|
||||
* Update lineno and column based on `str`.
|
||||
*/
|
||||
|
||||
function updatePosition(str: string) {
|
||||
const lines = str.match(/\n/g);
|
||||
if (lines) {
|
||||
lineno += lines.length;
|
||||
}
|
||||
let i = str.lastIndexOf('\n');
|
||||
column = i === -1 ? column + str.length : str.length - i;
|
||||
}
|
||||
|
||||
/**
|
||||
* Mark position and patch `node.position`.
|
||||
*/
|
||||
|
||||
function position() {
|
||||
const start = { line: lineno, column };
|
||||
return (
|
||||
node: Rule | Declaration | Comment | AtRule | Stylesheet | KeyFrame,
|
||||
) => {
|
||||
node.position = new Position(start);
|
||||
whitespace();
|
||||
return node;
|
||||
};
|
||||
}
|
||||
|
||||
/**
|
||||
* Store position information for a node
|
||||
*/
|
||||
|
||||
class Position {
|
||||
public content!: string;
|
||||
public start!: Loc;
|
||||
public end!: Loc;
|
||||
public source?: string;
|
||||
|
||||
constructor(start: Loc) {
|
||||
this.start = start;
|
||||
this.end = { line: lineno, column };
|
||||
this.source = options.source;
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Non-enumerable source string
|
||||
*/
|
||||
|
||||
Position.prototype.content = css;
|
||||
|
||||
const errorsList: ParserError[] = [];
|
||||
|
||||
function error(msg: string) {
|
||||
const err = new Error(
|
||||
options.source + ':' + lineno + ':' + column + ': ' + msg,
|
||||
) as ParserError;
|
||||
err.reason = msg;
|
||||
err.filename = options.source;
|
||||
err.line = lineno;
|
||||
err.column = column;
|
||||
err.source = css;
|
||||
|
||||
if (options.silent) {
|
||||
errorsList.push(err);
|
||||
} else {
|
||||
throw err;
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Parse stylesheet.
|
||||
*/
|
||||
|
||||
function stylesheet(): Stylesheet {
|
||||
const rulesList = rules();
|
||||
|
||||
return {
|
||||
type: 'stylesheet',
|
||||
stylesheet: {
|
||||
source: options.source,
|
||||
rules: rulesList,
|
||||
parsingErrors: errorsList,
|
||||
},
|
||||
};
|
||||
}
|
||||
|
||||
/**
|
||||
* Opening brace.
|
||||
*/
|
||||
|
||||
function open() {
|
||||
return match(/^{\s*/);
|
||||
}
|
||||
|
||||
/**
|
||||
* Closing brace.
|
||||
*/
|
||||
|
||||
function close() {
|
||||
return match(/^}/);
|
||||
}
|
||||
|
||||
/**
|
||||
* Parse ruleset.
|
||||
*/
|
||||
|
||||
function rules() {
|
||||
let node: Rule | void;
|
||||
const rules: Rule[] = [];
|
||||
whitespace();
|
||||
comments(rules);
|
||||
while (css.length && css.charAt(0) !== '}' && (node = atrule() || rule())) {
|
||||
if (node !== false) {
|
||||
rules.push(node);
|
||||
comments(rules);
|
||||
}
|
||||
}
|
||||
return rules;
|
||||
}
|
||||
|
||||
/**
|
||||
* Match `re` and return captures.
|
||||
*/
|
||||
|
||||
function match(re: RegExp) {
|
||||
const m = re.exec(css);
|
||||
if (!m) {
|
||||
return;
|
||||
}
|
||||
const str = m[0];
|
||||
updatePosition(str);
|
||||
css = css.slice(str.length);
|
||||
return m;
|
||||
}
|
||||
|
||||
/**
|
||||
* Parse whitespace.
|
||||
*/
|
||||
|
||||
function whitespace() {
|
||||
match(/^\s*/);
|
||||
}
|
||||
|
||||
/**
|
||||
* Parse comments;
|
||||
*/
|
||||
|
||||
function comments(rules: Rule[] = []) {
|
||||
let c: Comment | void;
|
||||
while ((c = comment())) {
|
||||
if (c !== false) {
|
||||
rules.push(c);
|
||||
}
|
||||
c = comment();
|
||||
}
|
||||
return rules;
|
||||
}
|
||||
|
||||
/**
|
||||
* Parse comment.
|
||||
*/
|
||||
|
||||
function comment() {
|
||||
const pos = position();
|
||||
if ('/' !== css.charAt(0) || '*' !== css.charAt(1)) {
|
||||
return;
|
||||
}
|
||||
|
||||
let i = 2;
|
||||
while (
|
||||
'' !== css.charAt(i) &&
|
||||
('*' !== css.charAt(i) || '/' !== css.charAt(i + 1))
|
||||
) {
|
||||
++i;
|
||||
}
|
||||
i += 2;
|
||||
|
||||
if ('' === css.charAt(i - 1)) {
|
||||
return error('End of comment missing');
|
||||
}
|
||||
|
||||
const str = css.slice(2, i - 2);
|
||||
column += 2;
|
||||
updatePosition(str);
|
||||
css = css.slice(i);
|
||||
column += 2;
|
||||
|
||||
return pos({
|
||||
type: 'comment',
|
||||
comment: str,
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* Parse selector.
|
||||
*/
|
||||
|
||||
function selector() {
|
||||
const m = match(/^([^{]+)/);
|
||||
if (!m) {
|
||||
return;
|
||||
}
|
||||
/* @fix Remove all comments from selectors
|
||||
* http://ostermiller.org/findcomment.html */
|
||||
return trim(m[0])
|
||||
.replace(/\/\*([^*]|[\r\n]|(\*+([^*/]|[\r\n])))*\*\/+/g, '')
|
||||
.replace(/"(?:\\"|[^"])*"|'(?:\\'|[^'])*'/g, (m) => {
|
||||
return m.replace(/,/g, '\u200C');
|
||||
})
|
||||
.split(/\s*(?![^(]*\)),\s*/)
|
||||
.map((s) => {
|
||||
return s.replace(/\u200C/g, ',');
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* Parse declaration.
|
||||
*/
|
||||
|
||||
function declaration(): Declaration | void | never {
|
||||
const pos = position();
|
||||
|
||||
// prop
|
||||
let propMatch = match(/^(\*?[-#\/\*\\\w]+(\[[0-9a-z_-]+\])?)\s*/);
|
||||
if (!propMatch) {
|
||||
return;
|
||||
}
|
||||
const prop = trim(propMatch[0]);
|
||||
|
||||
// :
|
||||
if (!match(/^:\s*/)) {
|
||||
return error(`property missing ':'`);
|
||||
}
|
||||
|
||||
// val
|
||||
const val = match(/^((?:'(?:\\'|.)*?'|"(?:\\"|.)*?"|\([^\)]*?\)|[^};])+)/);
|
||||
|
||||
const ret = pos({
|
||||
type: 'declaration',
|
||||
property: prop.replace(commentre, ''),
|
||||
value: val ? trim(val[0]).replace(commentre, '') : '',
|
||||
});
|
||||
|
||||
// ;
|
||||
match(/^[;\s]*/);
|
||||
|
||||
return ret;
|
||||
}
|
||||
|
||||
/**
|
||||
* Parse declarations.
|
||||
*/
|
||||
|
||||
function declarations() {
|
||||
const decls: Array<object> = [];
|
||||
|
||||
if (!open()) {
|
||||
return error(`missing '{'`);
|
||||
}
|
||||
comments(decls);
|
||||
|
||||
// declarations
|
||||
let decl;
|
||||
while ((decl = declaration())) {
|
||||
if ((decl as unknown) !== false) {
|
||||
decls.push(decl);
|
||||
comments(decls);
|
||||
}
|
||||
decl = declaration();
|
||||
}
|
||||
|
||||
if (!close()) {
|
||||
return error(`missing '}'`);
|
||||
}
|
||||
return decls;
|
||||
}
|
||||
|
||||
/**
|
||||
* Parse keyframe.
|
||||
*/
|
||||
|
||||
function keyframe() {
|
||||
let m;
|
||||
const vals = [];
|
||||
const pos = position();
|
||||
|
||||
while ((m = match(/^((\d+\.\d+|\.\d+|\d+)%?|[a-z]+)\s*/))) {
|
||||
vals.push(m[1]);
|
||||
match(/^,\s*/);
|
||||
}
|
||||
|
||||
if (!vals.length) {
|
||||
return;
|
||||
}
|
||||
|
||||
return pos({
|
||||
type: 'keyframe',
|
||||
values: vals,
|
||||
declarations: declarations() as Declaration[],
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* Parse keyframes.
|
||||
*/
|
||||
|
||||
function atkeyframes() {
|
||||
const pos = position();
|
||||
let m = match(/^@([-\w]+)?keyframes\s*/);
|
||||
|
||||
if (!m) {
|
||||
return;
|
||||
}
|
||||
const vendor = m[1];
|
||||
|
||||
// identifier
|
||||
m = match(/^([-\w]+)\s*/);
|
||||
if (!m) {
|
||||
return error('@keyframes missing name');
|
||||
}
|
||||
const name = m[1];
|
||||
|
||||
if (!open()) {
|
||||
return error(`@keyframes missing '{'`);
|
||||
}
|
||||
|
||||
let frame;
|
||||
let frames = comments();
|
||||
while ((frame = keyframe())) {
|
||||
frames.push(frame);
|
||||
frames = frames.concat(comments());
|
||||
}
|
||||
|
||||
if (!close()) {
|
||||
return error(`@keyframes missing '}'`);
|
||||
}
|
||||
|
||||
return pos({
|
||||
type: 'keyframes',
|
||||
name,
|
||||
vendor,
|
||||
keyframes: frames,
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* Parse supports.
|
||||
*/
|
||||
|
||||
function atsupports() {
|
||||
const pos = position();
|
||||
const m = match(/^@supports *([^{]+)/);
|
||||
|
||||
if (!m) {
|
||||
return;
|
||||
}
|
||||
const supports = trim(m[1]);
|
||||
|
||||
if (!open()) {
|
||||
return error(`@supports missing '{'`);
|
||||
}
|
||||
|
||||
const style = comments().concat(rules());
|
||||
|
||||
if (!close()) {
|
||||
return error(`@supports missing '}'`);
|
||||
}
|
||||
|
||||
return pos({
|
||||
type: 'supports',
|
||||
supports,
|
||||
rules: style,
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* Parse host.
|
||||
*/
|
||||
|
||||
function athost() {
|
||||
const pos = position();
|
||||
const m = match(/^@host\s*/);
|
||||
|
||||
if (!m) {
|
||||
return;
|
||||
}
|
||||
|
||||
if (!open()) {
|
||||
return error(`@host missing '{'`);
|
||||
}
|
||||
|
||||
const style = comments().concat(rules());
|
||||
|
||||
if (!close()) {
|
||||
return error(`@host missing '}'`);
|
||||
}
|
||||
|
||||
return pos({
|
||||
type: 'host',
|
||||
rules: style,
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* Parse media.
|
||||
*/
|
||||
|
||||
function atmedia() {
|
||||
const pos = position();
|
||||
const m = match(/^@media *([^{]+)/);
|
||||
|
||||
if (!m) {
|
||||
return;
|
||||
}
|
||||
const media = trim(m[1]);
|
||||
|
||||
if (!open()) {
|
||||
return error(`@media missing '{'`);
|
||||
}
|
||||
|
||||
const style = comments().concat(rules());
|
||||
|
||||
if (!close()) {
|
||||
return error(`@media missing '}'`);
|
||||
}
|
||||
|
||||
return pos({
|
||||
type: 'media',
|
||||
media,
|
||||
rules: style,
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* Parse custom-media.
|
||||
*/
|
||||
|
||||
function atcustommedia() {
|
||||
const pos = position();
|
||||
const m = match(/^@custom-media\s+(--[^\s]+)\s*([^{;]+);/);
|
||||
if (!m) {
|
||||
return;
|
||||
}
|
||||
|
||||
return pos({
|
||||
type: 'custom-media',
|
||||
name: trim(m[1]),
|
||||
media: trim(m[2]),
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* Parse paged media.
|
||||
*/
|
||||
|
||||
function atpage() {
|
||||
const pos = position();
|
||||
const m = match(/^@page */);
|
||||
if (!m) {
|
||||
return;
|
||||
}
|
||||
|
||||
const sel = selector() || [];
|
||||
|
||||
if (!open()) {
|
||||
return error(`@page missing '{'`);
|
||||
}
|
||||
let decls = comments();
|
||||
|
||||
// declarations
|
||||
let decl;
|
||||
while ((decl = declaration())) {
|
||||
decls.push(decl);
|
||||
decls = decls.concat(comments());
|
||||
}
|
||||
|
||||
if (!close()) {
|
||||
return error(`@page missing '}'`);
|
||||
}
|
||||
|
||||
return pos({
|
||||
type: 'page',
|
||||
selectors: sel,
|
||||
declarations: decls,
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* Parse document.
|
||||
*/
|
||||
|
||||
function atdocument() {
|
||||
const pos = position();
|
||||
const m = match(/^@([-\w]+)?document *([^{]+)/);
|
||||
if (!m) {
|
||||
return;
|
||||
}
|
||||
|
||||
const vendor = trim(m[1]);
|
||||
const doc = trim(m[2]);
|
||||
|
||||
if (!open()) {
|
||||
return error(`@document missing '{'`);
|
||||
}
|
||||
|
||||
const style = comments().concat(rules());
|
||||
|
||||
if (!close()) {
|
||||
return error(`@document missing '}'`);
|
||||
}
|
||||
|
||||
return pos({
|
||||
type: 'document',
|
||||
document: doc,
|
||||
vendor,
|
||||
rules: style,
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* Parse font-face.
|
||||
*/
|
||||
|
||||
function atfontface() {
|
||||
const pos = position();
|
||||
const m = match(/^@font-face\s*/);
|
||||
if (!m) {
|
||||
return;
|
||||
}
|
||||
|
||||
if (!open()) {
|
||||
return error(`@font-face missing '{'`);
|
||||
}
|
||||
let decls = comments();
|
||||
|
||||
// declarations
|
||||
let decl;
|
||||
while ((decl = declaration())) {
|
||||
decls.push(decl);
|
||||
decls = decls.concat(comments());
|
||||
}
|
||||
|
||||
if (!close()) {
|
||||
return error(`@font-face missing '}'`);
|
||||
}
|
||||
|
||||
return pos({
|
||||
type: 'font-face',
|
||||
declarations: decls,
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* Parse import
|
||||
*/
|
||||
|
||||
const atimport = _compileAtrule('import');
|
||||
|
||||
/**
|
||||
* Parse charset
|
||||
*/
|
||||
|
||||
const atcharset = _compileAtrule('charset');
|
||||
|
||||
/**
|
||||
* Parse namespace
|
||||
*/
|
||||
|
||||
const atnamespace = _compileAtrule('namespace');
|
||||
|
||||
/**
|
||||
* Parse non-block at-rules
|
||||
*/
|
||||
|
||||
function _compileAtrule(name: string) {
|
||||
const re = new RegExp('^@' + name + '\\s*([^;]+);');
|
||||
return () => {
|
||||
const pos = position();
|
||||
const m = match(re);
|
||||
if (!m) {
|
||||
return;
|
||||
}
|
||||
const ret: Record<string, string> = { type: name };
|
||||
ret[name] = m[1].trim();
|
||||
return pos(ret);
|
||||
};
|
||||
}
|
||||
|
||||
/**
|
||||
* Parse at rule.
|
||||
*/
|
||||
|
||||
function atrule() {
|
||||
if (css[0] !== '@') {
|
||||
return;
|
||||
}
|
||||
|
||||
return (
|
||||
atkeyframes() ||
|
||||
atmedia() ||
|
||||
atcustommedia() ||
|
||||
atsupports() ||
|
||||
atimport() ||
|
||||
atcharset() ||
|
||||
atnamespace() ||
|
||||
atdocument() ||
|
||||
atpage() ||
|
||||
athost() ||
|
||||
atfontface()
|
||||
);
|
||||
}
|
||||
|
||||
/**
|
||||
* Parse rule.
|
||||
*/
|
||||
|
||||
function rule() {
|
||||
const pos = position();
|
||||
const sel = selector();
|
||||
|
||||
if (!sel) {
|
||||
return error('selector missing');
|
||||
}
|
||||
comments();
|
||||
|
||||
return pos({
|
||||
type: 'rule',
|
||||
selectors: sel,
|
||||
declarations: declarations() as Declaration[],
|
||||
});
|
||||
}
|
||||
|
||||
return addParent(stylesheet());
|
||||
}
|
||||
|
||||
/**
|
||||
* Trim `str`.
|
||||
*/
|
||||
|
||||
function trim(str: string) {
|
||||
return str ? str.replace(/^\s+|\s+$/g, '') : '';
|
||||
}
|
||||
|
||||
/**
|
||||
* Adds non-enumerable parent node reference to each node.
|
||||
*/
|
||||
|
||||
function addParent(obj: Stylesheet, parent?: Stylesheet) {
|
||||
const isNode = obj && typeof obj.type === 'string';
|
||||
const childParent = isNode ? obj : parent;
|
||||
|
||||
for (const k of Object.keys(obj)) {
|
||||
const value = obj[k as keyof Stylesheet];
|
||||
if (Array.isArray(value)) {
|
||||
value.forEach((v) => {
|
||||
addParent(v, childParent);
|
||||
});
|
||||
} else if (value && typeof value === 'object') {
|
||||
addParent((value as unknown) as Stylesheet, childParent);
|
||||
}
|
||||
}
|
||||
|
||||
if (isNode) {
|
||||
Object.defineProperty(obj, 'parent', {
|
||||
configurable: true,
|
||||
writable: true,
|
||||
enumerable: false,
|
||||
value: parent || null,
|
||||
});
|
||||
}
|
||||
|
||||
return obj;
|
||||
}
|
||||
24
packages/rrweb-snapshot/src/index.ts
Normal file
24
packages/rrweb-snapshot/src/index.ts
Normal file
@@ -0,0 +1,24 @@
|
||||
import snapshot, {
|
||||
serializeNodeWithId,
|
||||
transformAttribute,
|
||||
visitSnapshot,
|
||||
cleanupSnapshot,
|
||||
needMaskingText,
|
||||
IGNORED_NODE,
|
||||
} from './snapshot';
|
||||
import rebuild, { buildNodeWithSN, addHoverClass } from './rebuild';
|
||||
export * from './types';
|
||||
export * from './utils';
|
||||
|
||||
export {
|
||||
snapshot,
|
||||
serializeNodeWithId,
|
||||
rebuild,
|
||||
buildNodeWithSN,
|
||||
addHoverClass,
|
||||
transformAttribute,
|
||||
visitSnapshot,
|
||||
cleanupSnapshot,
|
||||
needMaskingText,
|
||||
IGNORED_NODE,
|
||||
};
|
||||
392
packages/rrweb-snapshot/src/rebuild.ts
Normal file
392
packages/rrweb-snapshot/src/rebuild.ts
Normal file
@@ -0,0 +1,392 @@
|
||||
import { parse } from './css';
|
||||
import {
|
||||
serializedNodeWithId,
|
||||
NodeType,
|
||||
tagMap,
|
||||
elementNode,
|
||||
idNodeMap,
|
||||
INode,
|
||||
} from './types';
|
||||
import { isElement } from './utils';
|
||||
|
||||
const tagMap: tagMap = {
|
||||
script: 'noscript',
|
||||
// camel case svg element tag names
|
||||
altglyph: 'altGlyph',
|
||||
altglyphdef: 'altGlyphDef',
|
||||
altglyphitem: 'altGlyphItem',
|
||||
animatecolor: 'animateColor',
|
||||
animatemotion: 'animateMotion',
|
||||
animatetransform: 'animateTransform',
|
||||
clippath: 'clipPath',
|
||||
feblend: 'feBlend',
|
||||
fecolormatrix: 'feColorMatrix',
|
||||
fecomponenttransfer: 'feComponentTransfer',
|
||||
fecomposite: 'feComposite',
|
||||
feconvolvematrix: 'feConvolveMatrix',
|
||||
fediffuselighting: 'feDiffuseLighting',
|
||||
fedisplacementmap: 'feDisplacementMap',
|
||||
fedistantlight: 'feDistantLight',
|
||||
fedropshadow: 'feDropShadow',
|
||||
feflood: 'feFlood',
|
||||
fefunca: 'feFuncA',
|
||||
fefuncb: 'feFuncB',
|
||||
fefuncg: 'feFuncG',
|
||||
fefuncr: 'feFuncR',
|
||||
fegaussianblur: 'feGaussianBlur',
|
||||
feimage: 'feImage',
|
||||
femerge: 'feMerge',
|
||||
femergenode: 'feMergeNode',
|
||||
femorphology: 'feMorphology',
|
||||
feoffset: 'feOffset',
|
||||
fepointlight: 'fePointLight',
|
||||
fespecularlighting: 'feSpecularLighting',
|
||||
fespotlight: 'feSpotLight',
|
||||
fetile: 'feTile',
|
||||
feturbulence: 'feTurbulence',
|
||||
foreignobject: 'foreignObject',
|
||||
glyphref: 'glyphRef',
|
||||
lineargradient: 'linearGradient',
|
||||
radialgradient: 'radialGradient',
|
||||
};
|
||||
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;
|
||||
}
|
||||
|
||||
// based on https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Regular_Expressions#escaping
|
||||
function escapeRegExp(str: string) {
|
||||
return str.replace(/[.*+?^${}()|[\]\\]/g, '\\$&'); // $& means the whole matched string
|
||||
}
|
||||
|
||||
const HOVER_SELECTOR = /([^\\]):hover/;
|
||||
const HOVER_SELECTOR_GLOBAL = new RegExp(HOVER_SELECTOR, 'g');
|
||||
export function addHoverClass(cssText: string): string {
|
||||
const ast = parse(cssText, {
|
||||
silent: true,
|
||||
});
|
||||
|
||||
if (!ast.stylesheet) {
|
||||
return cssText;
|
||||
}
|
||||
|
||||
const selectors: string[] = [];
|
||||
ast.stylesheet.rules.forEach((rule) => {
|
||||
if ('selectors' in rule) {
|
||||
(rule.selectors || []).forEach((selector: string) => {
|
||||
if (HOVER_SELECTOR.test(selector)) {
|
||||
selectors.push(selector);
|
||||
}
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
if (selectors.length === 0) {
|
||||
return cssText;
|
||||
}
|
||||
|
||||
const selectorMatcher = new RegExp(
|
||||
selectors
|
||||
.filter((selector, index) => selectors.indexOf(selector) === index)
|
||||
.sort((a, b) => b.length - a.length)
|
||||
.map((selector) => {
|
||||
return escapeRegExp(selector);
|
||||
})
|
||||
.join('|'),
|
||||
'g',
|
||||
);
|
||||
|
||||
return cssText.replace(selectorMatcher, (selector) => {
|
||||
const newSelector = selector.replace(HOVER_SELECTOR_GLOBAL, '$1.\\:hover');
|
||||
return `${selector}, ${newSelector}`;
|
||||
});
|
||||
}
|
||||
|
||||
function buildNode(
|
||||
n: serializedNodeWithId,
|
||||
options: {
|
||||
doc: Document;
|
||||
hackCss: boolean;
|
||||
},
|
||||
): Node | null {
|
||||
const { doc, hackCss } = options;
|
||||
switch (n.type) {
|
||||
case NodeType.Document:
|
||||
return doc.implementation.createDocument(null, '', null);
|
||||
case NodeType.DocumentType:
|
||||
return doc.implementation.createDocumentType(
|
||||
n.name || 'html',
|
||||
n.publicId,
|
||||
n.systemId,
|
||||
);
|
||||
case NodeType.Element:
|
||||
const tagName = getTagName(n);
|
||||
let node: Element;
|
||||
if (n.isSVG) {
|
||||
node = doc.createElementNS('http://www.w3.org/2000/svg', tagName);
|
||||
} else {
|
||||
node = doc.createElement(tagName);
|
||||
}
|
||||
for (const name in n.attributes) {
|
||||
if (!n.attributes.hasOwnProperty(name)) {
|
||||
continue;
|
||||
}
|
||||
let value = n.attributes[name];
|
||||
value =
|
||||
typeof value === 'boolean' || typeof value === 'number' ? '' : value;
|
||||
// attribute names start with rr_ are internal attributes added by rrweb
|
||||
if (!name.startsWith('rr_')) {
|
||||
const isTextarea = tagName === 'textarea' && name === 'value';
|
||||
const isRemoteOrDynamicCss =
|
||||
tagName === 'style' && name === '_cssText';
|
||||
if (isRemoteOrDynamicCss && hackCss) {
|
||||
value = addHoverClass(value);
|
||||
}
|
||||
if (isTextarea || isRemoteOrDynamicCss) {
|
||||
const child = doc.createTextNode(value);
|
||||
// https://github.com/rrweb-io/rrweb/issues/112
|
||||
for (const c of Array.from(node.childNodes)) {
|
||||
if (c.nodeType === node.TEXT_NODE) {
|
||||
node.removeChild(c);
|
||||
}
|
||||
}
|
||||
node.appendChild(child);
|
||||
continue;
|
||||
}
|
||||
|
||||
try {
|
||||
if (n.isSVG && name === 'xlink:href') {
|
||||
node.setAttributeNS('http://www.w3.org/1999/xlink', name, value);
|
||||
} else if (
|
||||
name === 'onload' ||
|
||||
name === 'onclick' ||
|
||||
name.substring(0, 7) === 'onmouse'
|
||||
) {
|
||||
// Rename some of the more common atttributes from https://www.w3schools.com/tags/ref_eventattributes.asp
|
||||
// as setting them triggers a console.error (which shows up despite the try/catch)
|
||||
// Assumption: these attributes are not used to css
|
||||
node.setAttribute('_' + name, value);
|
||||
} else if (
|
||||
tagName === 'meta' &&
|
||||
n.attributes['http-equiv'] === 'Content-Security-Policy' &&
|
||||
name === 'content'
|
||||
) {
|
||||
// If CSP contains style-src and inline-style is disabled, there will be an error "Refused to apply inline style because it violates the following Content Security Policy directive: style-src '*'".
|
||||
// And the function insertStyleRules in rrweb replayer will throw an error "Uncaught TypeError: Cannot read property 'insertRule' of null".
|
||||
node.setAttribute('csp-content', value);
|
||||
continue;
|
||||
} else if (
|
||||
tagName === 'link' &&
|
||||
n.attributes.rel === 'preload' &&
|
||||
n.attributes.as === 'script'
|
||||
) {
|
||||
// ignore
|
||||
} else if (
|
||||
tagName === 'link' &&
|
||||
n.attributes.rel === 'prefetch' &&
|
||||
typeof n.attributes.href === 'string' &&
|
||||
n.attributes.href.endsWith('.js')
|
||||
) {
|
||||
// ignore
|
||||
} else {
|
||||
node.setAttribute(name, value);
|
||||
}
|
||||
} catch (error) {
|
||||
// skip invalid attribute
|
||||
}
|
||||
} else {
|
||||
// handle internal attributes
|
||||
if (tagName === 'canvas' && name === 'rr_dataURL') {
|
||||
const image = document.createElement('img');
|
||||
image.src = value;
|
||||
image.onload = () => {
|
||||
const ctx = (node as HTMLCanvasElement).getContext('2d');
|
||||
if (ctx) {
|
||||
ctx.drawImage(image, 0, 0, image.width, image.height);
|
||||
}
|
||||
};
|
||||
}
|
||||
if (name === 'rr_width') {
|
||||
(node as HTMLElement).style.width = value;
|
||||
}
|
||||
if (name === 'rr_height') {
|
||||
(node as HTMLElement).style.height = value;
|
||||
}
|
||||
if (name === 'rr_mediaCurrentTime') {
|
||||
(node as HTMLMediaElement).currentTime = n.attributes
|
||||
.rr_mediaCurrentTime as number;
|
||||
}
|
||||
if (name === 'rr_mediaState') {
|
||||
switch (value) {
|
||||
case 'played':
|
||||
(node as HTMLMediaElement)
|
||||
.play()
|
||||
.catch((e) => console.warn('media playback error', e));
|
||||
break;
|
||||
case 'paused':
|
||||
(node as HTMLMediaElement).pause();
|
||||
break;
|
||||
default:
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
if (n.isShadowHost) {
|
||||
/**
|
||||
* Since node is newly rebuilt, it should be a normal element
|
||||
* without shadowRoot.
|
||||
* But if there are some weird situations that has defined
|
||||
* custom element in the scope before we rebuild node, it may
|
||||
* register the shadowRoot earlier.
|
||||
* The logic in the 'else' block is just a try-my-best solution
|
||||
* for the corner case, please let we know if it is wrong and
|
||||
* we can remove it.
|
||||
*/
|
||||
if (!node.shadowRoot) {
|
||||
node.attachShadow({ mode: 'open' });
|
||||
} else {
|
||||
while (node.shadowRoot.firstChild) {
|
||||
node.shadowRoot.removeChild(node.shadowRoot.firstChild);
|
||||
}
|
||||
}
|
||||
}
|
||||
return node;
|
||||
case NodeType.Text:
|
||||
return doc.createTextNode(
|
||||
n.isStyle && hackCss ? addHoverClass(n.textContent) : n.textContent,
|
||||
);
|
||||
case NodeType.CDATA:
|
||||
return doc.createCDATASection(n.textContent);
|
||||
case NodeType.Comment:
|
||||
return doc.createComment(n.textContent);
|
||||
default:
|
||||
return null;
|
||||
}
|
||||
}
|
||||
|
||||
export function buildNodeWithSN(
|
||||
n: serializedNodeWithId,
|
||||
options: {
|
||||
doc: Document;
|
||||
map: idNodeMap;
|
||||
skipChild?: boolean;
|
||||
hackCss: boolean;
|
||||
afterAppend?: (n: INode) => unknown;
|
||||
},
|
||||
): INode | null {
|
||||
const { doc, map, skipChild = false, hackCss = true, afterAppend } = options;
|
||||
let node = buildNode(n, { doc, hackCss });
|
||||
if (!node) {
|
||||
return null;
|
||||
}
|
||||
if (n.rootId) {
|
||||
console.assert(
|
||||
((map[n.rootId] as unknown) as Document) === doc,
|
||||
'Target document should has the same root id.',
|
||||
);
|
||||
}
|
||||
// use target document as root document
|
||||
if (n.type === NodeType.Document) {
|
||||
// close before open to make sure document was closed
|
||||
doc.close();
|
||||
doc.open();
|
||||
node = doc;
|
||||
}
|
||||
|
||||
(node as INode).__sn = n;
|
||||
map[n.id] = node as INode;
|
||||
|
||||
if (
|
||||
(n.type === NodeType.Document || n.type === NodeType.Element) &&
|
||||
!skipChild
|
||||
) {
|
||||
for (const childN of n.childNodes) {
|
||||
const childNode = buildNodeWithSN(childN, {
|
||||
doc,
|
||||
map,
|
||||
skipChild: false,
|
||||
hackCss,
|
||||
afterAppend,
|
||||
});
|
||||
if (!childNode) {
|
||||
console.warn('Failed to rebuild', childN);
|
||||
continue;
|
||||
}
|
||||
|
||||
if (childN.isShadow && isElement(node) && node.shadowRoot) {
|
||||
node.shadowRoot.appendChild(childNode);
|
||||
} else {
|
||||
node.appendChild(childNode);
|
||||
}
|
||||
if (afterAppend) {
|
||||
afterAppend(childNode);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
return node as INode;
|
||||
}
|
||||
|
||||
function visit(idNodeMap: idNodeMap, onVisit: (node: INode) => void) {
|
||||
function walk(node: INode) {
|
||||
onVisit(node);
|
||||
}
|
||||
|
||||
for (const key in idNodeMap) {
|
||||
if (idNodeMap[key]) {
|
||||
walk(idNodeMap[key]);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function handleScroll(node: INode) {
|
||||
const n = node.__sn;
|
||||
if (n.type !== NodeType.Element) {
|
||||
return;
|
||||
}
|
||||
const el = (node as Node) as HTMLElement;
|
||||
for (const name in n.attributes) {
|
||||
if (!(n.attributes.hasOwnProperty(name) && name.startsWith('rr_'))) {
|
||||
continue;
|
||||
}
|
||||
const value = n.attributes[name];
|
||||
if (name === 'rr_scrollLeft') {
|
||||
el.scrollLeft = value as number;
|
||||
}
|
||||
if (name === 'rr_scrollTop') {
|
||||
el.scrollTop = value as number;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function rebuild(
|
||||
n: serializedNodeWithId,
|
||||
options: {
|
||||
doc: Document;
|
||||
onVisit?: (node: INode) => unknown;
|
||||
hackCss?: boolean;
|
||||
afterAppend?: (n: INode) => unknown;
|
||||
},
|
||||
): [Node | null, idNodeMap] {
|
||||
const { doc, onVisit, hackCss = true, afterAppend } = options;
|
||||
const idNodeMap: idNodeMap = {};
|
||||
const node = buildNodeWithSN(n, {
|
||||
doc,
|
||||
map: idNodeMap,
|
||||
skipChild: false,
|
||||
hackCss,
|
||||
afterAppend,
|
||||
});
|
||||
visit(idNodeMap, (visitedNode) => {
|
||||
if (onVisit) {
|
||||
onVisit(visitedNode);
|
||||
}
|
||||
handleScroll(visitedNode);
|
||||
});
|
||||
return [node, idNodeMap];
|
||||
}
|
||||
|
||||
export default rebuild;
|
||||
970
packages/rrweb-snapshot/src/snapshot.ts
Normal file
970
packages/rrweb-snapshot/src/snapshot.ts
Normal file
@@ -0,0 +1,970 @@
|
||||
import {
|
||||
serializedNode,
|
||||
serializedNodeWithId,
|
||||
NodeType,
|
||||
attributes,
|
||||
INode,
|
||||
idNodeMap,
|
||||
MaskInputOptions,
|
||||
SlimDOMOptions,
|
||||
MaskTextFn,
|
||||
MaskInputFn,
|
||||
KeepIframeSrcFn,
|
||||
} from './types';
|
||||
import { isElement, isShadowRoot, maskInputValue } from './utils';
|
||||
|
||||
let _id = 1;
|
||||
const tagNameRegex = RegExp('[^a-z0-9-_:]');
|
||||
|
||||
export const IGNORED_NODE = -2;
|
||||
|
||||
function genId(): number {
|
||||
return _id++;
|
||||
}
|
||||
|
||||
function getValidTagName(element: HTMLElement): string {
|
||||
if (element instanceof HTMLFormElement) {
|
||||
return 'form';
|
||||
}
|
||||
|
||||
const processedTagName = element.tagName.toLowerCase().trim();
|
||||
|
||||
if (tagNameRegex.test(processedTagName)) {
|
||||
// if the tag name is odd and we cannot extract
|
||||
// anything from the string, then we return a
|
||||
// generic div
|
||||
return 'div';
|
||||
}
|
||||
|
||||
return processedTagName;
|
||||
}
|
||||
|
||||
function getCssRulesString(s: CSSStyleSheet): string | null {
|
||||
try {
|
||||
const rules = s.rules || s.cssRules;
|
||||
return rules ? Array.from(rules).map(getCssRuleString).join('') : null;
|
||||
} catch (error) {
|
||||
return null;
|
||||
}
|
||||
}
|
||||
|
||||
function getCssRuleString(rule: CSSRule): string {
|
||||
return isCSSImportRule(rule)
|
||||
? getCssRulesString(rule.styleSheet) || ''
|
||||
: rule.cssText;
|
||||
}
|
||||
|
||||
function isCSSImportRule(rule: CSSRule): rule is CSSImportRule {
|
||||
return 'styleSheet' in rule;
|
||||
}
|
||||
|
||||
function extractOrigin(url: string): string {
|
||||
let origin;
|
||||
if (url.indexOf('//') > -1) {
|
||||
origin = url.split('/').slice(0, 3).join('/');
|
||||
} else {
|
||||
origin = url.split('/')[0];
|
||||
}
|
||||
origin = origin.split('?')[0];
|
||||
return origin;
|
||||
}
|
||||
|
||||
const URL_IN_CSS_REF = /url\((?:(')([^']*)'|(")(.*?)"|([^)]*))\)/gm;
|
||||
const RELATIVE_PATH = /^(?!www\.|(?:http|ftp)s?:\/\/|[A-Za-z]:\\|\/\/|#).*/;
|
||||
const DATA_URI = /^(data:)([^,]*),(.*)/i;
|
||||
export function absoluteToStylesheet(
|
||||
cssText: string | null,
|
||||
href: string,
|
||||
): string {
|
||||
return (cssText || '').replace(
|
||||
URL_IN_CSS_REF,
|
||||
(origin, quote1, path1, quote2, path2, path3) => {
|
||||
const filePath = path1 || path2 || path3;
|
||||
const maybeQuote = quote1 || quote2 || '';
|
||||
if (!filePath) {
|
||||
return origin;
|
||||
}
|
||||
if (!RELATIVE_PATH.test(filePath)) {
|
||||
return `url(${maybeQuote}${filePath}${maybeQuote})`;
|
||||
}
|
||||
if (DATA_URI.test(filePath)) {
|
||||
return `url(${maybeQuote}${filePath}${maybeQuote})`;
|
||||
}
|
||||
if (filePath[0] === '/') {
|
||||
return `url(${maybeQuote}${
|
||||
extractOrigin(href) + filePath
|
||||
}${maybeQuote})`;
|
||||
}
|
||||
const stack = href.split('/');
|
||||
const parts = filePath.split('/');
|
||||
stack.pop();
|
||||
for (const part of parts) {
|
||||
if (part === '.') {
|
||||
continue;
|
||||
} else if (part === '..') {
|
||||
stack.pop();
|
||||
} else {
|
||||
stack.push(part);
|
||||
}
|
||||
}
|
||||
return `url(${maybeQuote}${stack.join('/')}${maybeQuote})`;
|
||||
},
|
||||
);
|
||||
}
|
||||
|
||||
const SRCSET_NOT_SPACES = /^[^ \t\n\r\u000c]+/; // Don't use \s, to avoid matching non-breaking space
|
||||
const SRCSET_COMMAS_OR_SPACES = /^[, \t\n\r\u000c]+/;
|
||||
function getAbsoluteSrcsetString(doc: Document, attributeValue: string) {
|
||||
/*
|
||||
run absoluteToDoc over every url in the srcset
|
||||
|
||||
this is adapted from https://github.com/albell/parse-srcset/
|
||||
without the parsing of the descriptors (we return these as-is)
|
||||
parce-srcset is in turn based on
|
||||
https://html.spec.whatwg.org/multipage/embedded-content.html#parse-a-srcset-attribute
|
||||
*/
|
||||
if (attributeValue.trim() === '') {
|
||||
return attributeValue;
|
||||
}
|
||||
|
||||
let pos = 0;
|
||||
|
||||
function collectCharacters(regEx: RegExp) {
|
||||
var chars,
|
||||
match = regEx.exec(attributeValue.substring(pos));
|
||||
if (match) {
|
||||
chars = match[0];
|
||||
pos += chars.length;
|
||||
return chars;
|
||||
}
|
||||
return '';
|
||||
}
|
||||
|
||||
let output = [];
|
||||
while (true) {
|
||||
collectCharacters(SRCSET_COMMAS_OR_SPACES);
|
||||
if (pos >= attributeValue.length) {
|
||||
break;
|
||||
}
|
||||
// don't split on commas within urls
|
||||
let url = collectCharacters(SRCSET_NOT_SPACES);
|
||||
if (url.slice(-1) === ',') {
|
||||
// aside: according to spec more than one comma at the end is a parse error, but we ignore that
|
||||
url = absoluteToDoc(doc, url.substring(0, url.length - 1));
|
||||
// the trailing comma splits the srcset, so the interpretion is that
|
||||
// another url will follow, and the descriptor is empty
|
||||
output.push(url);
|
||||
} else {
|
||||
let descriptorsStr = '';
|
||||
url = absoluteToDoc(doc, url);
|
||||
let inParens = false;
|
||||
while (true) {
|
||||
let c = attributeValue.charAt(pos);
|
||||
if (c === '') {
|
||||
output.push((url + descriptorsStr).trim());
|
||||
break;
|
||||
} else if (!inParens) {
|
||||
if (c === ',') {
|
||||
pos += 1;
|
||||
output.push((url + descriptorsStr).trim());
|
||||
break; // parse the next url
|
||||
} else if (c === '(') {
|
||||
inParens = true;
|
||||
}
|
||||
} else {
|
||||
// in parenthesis; ignore commas
|
||||
// (parenthesis may be supported by future additions to spec)
|
||||
if (c === ')') {
|
||||
inParens = false;
|
||||
}
|
||||
}
|
||||
descriptorsStr += c;
|
||||
pos += 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
return output.join(', ');
|
||||
}
|
||||
|
||||
export function absoluteToDoc(doc: Document, attributeValue: string): string {
|
||||
if (!attributeValue || attributeValue.trim() === '') {
|
||||
return attributeValue;
|
||||
}
|
||||
const a: HTMLAnchorElement = doc.createElement('a');
|
||||
a.href = attributeValue;
|
||||
return a.href;
|
||||
}
|
||||
|
||||
function isSVGElement(el: Element): boolean {
|
||||
return el.tagName === 'svg' || el instanceof SVGElement;
|
||||
}
|
||||
|
||||
function getHref() {
|
||||
// return a href without hash
|
||||
const a = document.createElement('a');
|
||||
a.href = '';
|
||||
return a.href;
|
||||
}
|
||||
|
||||
export function transformAttribute(
|
||||
doc: Document,
|
||||
tagName: string,
|
||||
name: string,
|
||||
value: string,
|
||||
): string {
|
||||
// relative path in attribute
|
||||
if (name === 'src' || ((name === 'href' || name === 'xlink:href') && value)) {
|
||||
return absoluteToDoc(doc, value);
|
||||
} else if (
|
||||
name === 'background' &&
|
||||
value &&
|
||||
(tagName === 'table' || tagName === 'td' || tagName === 'th')
|
||||
) {
|
||||
return absoluteToDoc(doc, value);
|
||||
} else if (name === 'srcset' && value) {
|
||||
return getAbsoluteSrcsetString(doc, value);
|
||||
} else if (name === 'style' && value) {
|
||||
return absoluteToStylesheet(value, getHref());
|
||||
} else {
|
||||
return value;
|
||||
}
|
||||
}
|
||||
|
||||
export function _isBlockedElement(
|
||||
element: HTMLElement,
|
||||
blockClass: string | RegExp,
|
||||
blockSelector: string | null,
|
||||
): boolean {
|
||||
if (typeof blockClass === 'string') {
|
||||
if (element.classList.contains(blockClass)) {
|
||||
return true;
|
||||
}
|
||||
} else {
|
||||
// tslint:disable-next-line: prefer-for-of
|
||||
for (let eIndex = 0; eIndex < element.classList.length; eIndex++) {
|
||||
const className = element.classList[eIndex];
|
||||
if (blockClass.test(className)) {
|
||||
return true;
|
||||
}
|
||||
}
|
||||
}
|
||||
if (blockSelector) {
|
||||
return element.matches(blockSelector);
|
||||
}
|
||||
|
||||
return false;
|
||||
}
|
||||
|
||||
export function needMaskingText(
|
||||
node: Node | null,
|
||||
maskTextClass: string | RegExp,
|
||||
maskTextSelector: string | null,
|
||||
): boolean {
|
||||
if (!node) {
|
||||
return false;
|
||||
}
|
||||
if (node.nodeType === node.ELEMENT_NODE) {
|
||||
if (typeof maskTextClass === 'string') {
|
||||
if ((node as HTMLElement).classList.contains(maskTextClass)) {
|
||||
return true;
|
||||
}
|
||||
} else {
|
||||
(node as HTMLElement).classList.forEach((className) => {
|
||||
if (maskTextClass.test(className)) {
|
||||
return true;
|
||||
}
|
||||
});
|
||||
}
|
||||
if (maskTextSelector) {
|
||||
if ((node as HTMLElement).matches(maskTextSelector)) {
|
||||
return true;
|
||||
}
|
||||
}
|
||||
return needMaskingText(node.parentNode, maskTextClass, maskTextSelector);
|
||||
}
|
||||
if (node.nodeType === node.TEXT_NODE) {
|
||||
// check parent node since text node do not have class name
|
||||
return needMaskingText(node.parentNode, maskTextClass, maskTextSelector);
|
||||
}
|
||||
return needMaskingText(node.parentNode, maskTextClass, maskTextSelector);
|
||||
}
|
||||
|
||||
// https://stackoverflow.com/a/36155560
|
||||
function onceIframeLoaded(
|
||||
iframeEl: HTMLIFrameElement,
|
||||
listener: () => unknown,
|
||||
iframeLoadTimeout: number,
|
||||
) {
|
||||
const win = iframeEl.contentWindow;
|
||||
if (!win) {
|
||||
return;
|
||||
}
|
||||
// document is loading
|
||||
let fired = false;
|
||||
|
||||
let readyState: DocumentReadyState;
|
||||
try {
|
||||
readyState = win.document.readyState;
|
||||
} catch (error) {
|
||||
return;
|
||||
}
|
||||
if (readyState !== 'complete') {
|
||||
const timer = setTimeout(() => {
|
||||
if (!fired) {
|
||||
listener();
|
||||
fired = true;
|
||||
}
|
||||
}, iframeLoadTimeout);
|
||||
iframeEl.addEventListener('load', () => {
|
||||
clearTimeout(timer);
|
||||
fired = true;
|
||||
listener();
|
||||
});
|
||||
return;
|
||||
}
|
||||
// check blank frame for Chrome
|
||||
const blankUrl = 'about:blank';
|
||||
if (
|
||||
win.location.href !== blankUrl ||
|
||||
iframeEl.src === blankUrl ||
|
||||
iframeEl.src === ''
|
||||
) {
|
||||
// iframe was already loaded, make sure we wait to trigger the listener
|
||||
// till _after_ the mutation that found this iframe has had time to process
|
||||
setTimeout(listener, 0);
|
||||
return;
|
||||
}
|
||||
// use default listener
|
||||
iframeEl.addEventListener('load', listener);
|
||||
}
|
||||
|
||||
function serializeNode(
|
||||
n: Node,
|
||||
options: {
|
||||
doc: Document;
|
||||
blockClass: string | RegExp;
|
||||
blockSelector: string | null;
|
||||
maskTextClass: string | RegExp;
|
||||
maskTextSelector: string | null;
|
||||
inlineStylesheet: boolean;
|
||||
maskInputOptions: MaskInputOptions;
|
||||
maskTextFn: MaskTextFn | undefined;
|
||||
maskInputFn: MaskInputFn | undefined;
|
||||
recordCanvas: boolean;
|
||||
keepIframeSrcFn: KeepIframeSrcFn;
|
||||
},
|
||||
): serializedNode | false {
|
||||
const {
|
||||
doc,
|
||||
blockClass,
|
||||
blockSelector,
|
||||
maskTextClass,
|
||||
maskTextSelector,
|
||||
inlineStylesheet,
|
||||
maskInputOptions = {},
|
||||
maskTextFn,
|
||||
maskInputFn,
|
||||
recordCanvas,
|
||||
keepIframeSrcFn,
|
||||
} = options;
|
||||
// Only record root id when document object is not the base document
|
||||
let rootId: number | undefined;
|
||||
if (((doc as unknown) as INode).__sn) {
|
||||
const docId = ((doc as unknown) as INode).__sn.id;
|
||||
rootId = docId === 1 ? undefined : docId;
|
||||
}
|
||||
switch (n.nodeType) {
|
||||
case n.DOCUMENT_NODE:
|
||||
return {
|
||||
type: NodeType.Document,
|
||||
childNodes: [],
|
||||
rootId,
|
||||
};
|
||||
case n.DOCUMENT_TYPE_NODE:
|
||||
return {
|
||||
type: NodeType.DocumentType,
|
||||
name: (n as DocumentType).name,
|
||||
publicId: (n as DocumentType).publicId,
|
||||
systemId: (n as DocumentType).systemId,
|
||||
rootId,
|
||||
};
|
||||
case n.ELEMENT_NODE:
|
||||
const needBlock = _isBlockedElement(
|
||||
n as HTMLElement,
|
||||
blockClass,
|
||||
blockSelector,
|
||||
);
|
||||
const tagName = getValidTagName(n as HTMLElement);
|
||||
let attributes: attributes = {};
|
||||
for (const { name, value } of Array.from((n as HTMLElement).attributes)) {
|
||||
attributes[name] = transformAttribute(doc, tagName, name, value);
|
||||
}
|
||||
// remote css
|
||||
if (tagName === 'link' && inlineStylesheet) {
|
||||
const stylesheet = Array.from(doc.styleSheets).find((s) => {
|
||||
return s.href === (n as HTMLLinkElement).href;
|
||||
});
|
||||
const cssText = getCssRulesString(stylesheet as CSSStyleSheet);
|
||||
if (cssText) {
|
||||
delete attributes.rel;
|
||||
delete attributes.href;
|
||||
attributes._cssText = absoluteToStylesheet(
|
||||
cssText,
|
||||
stylesheet!.href!,
|
||||
);
|
||||
}
|
||||
}
|
||||
// dynamic stylesheet
|
||||
if (
|
||||
tagName === 'style' &&
|
||||
(n as HTMLStyleElement).sheet &&
|
||||
// TODO: Currently we only try to get dynamic stylesheet when it is an empty style element
|
||||
!(
|
||||
(n as HTMLElement).innerText ||
|
||||
(n as HTMLElement).textContent ||
|
||||
''
|
||||
).trim().length
|
||||
) {
|
||||
const cssText = getCssRulesString(
|
||||
(n as HTMLStyleElement).sheet as CSSStyleSheet,
|
||||
);
|
||||
if (cssText) {
|
||||
attributes._cssText = absoluteToStylesheet(cssText, getHref());
|
||||
}
|
||||
}
|
||||
// form fields
|
||||
if (
|
||||
tagName === 'input' ||
|
||||
tagName === 'textarea' ||
|
||||
tagName === 'select'
|
||||
) {
|
||||
const value = (n as HTMLInputElement | HTMLTextAreaElement).value;
|
||||
if (
|
||||
attributes.type !== 'radio' &&
|
||||
attributes.type !== 'checkbox' &&
|
||||
attributes.type !== 'submit' &&
|
||||
attributes.type !== 'button' &&
|
||||
value
|
||||
) {
|
||||
attributes.value = maskInputValue({
|
||||
type: attributes.type,
|
||||
tagName,
|
||||
value,
|
||||
maskInputOptions,
|
||||
maskInputFn,
|
||||
});
|
||||
} else if ((n as HTMLInputElement).checked) {
|
||||
attributes.checked = (n as HTMLInputElement).checked;
|
||||
}
|
||||
}
|
||||
if (tagName === 'option') {
|
||||
const selectValue = (n as HTMLOptionElement).parentElement;
|
||||
if (attributes.value === (selectValue as HTMLSelectElement).value) {
|
||||
attributes.selected = (n as HTMLOptionElement).selected;
|
||||
}
|
||||
}
|
||||
// canvas image data
|
||||
if (tagName === 'canvas' && recordCanvas) {
|
||||
attributes.rr_dataURL = (n as HTMLCanvasElement).toDataURL();
|
||||
}
|
||||
// media elements
|
||||
if (tagName === 'audio' || tagName === 'video') {
|
||||
attributes.rr_mediaState = (n as HTMLMediaElement).paused
|
||||
? 'paused'
|
||||
: 'played';
|
||||
attributes.rr_mediaCurrentTime = (n as HTMLMediaElement).currentTime;
|
||||
}
|
||||
// scroll
|
||||
if ((n as HTMLElement).scrollLeft) {
|
||||
attributes.rr_scrollLeft = (n as HTMLElement).scrollLeft;
|
||||
}
|
||||
if ((n as HTMLElement).scrollTop) {
|
||||
attributes.rr_scrollTop = (n as HTMLElement).scrollTop;
|
||||
}
|
||||
// block element
|
||||
if (needBlock) {
|
||||
const { width, height } = (n as HTMLElement).getBoundingClientRect();
|
||||
attributes = {
|
||||
class: attributes.class,
|
||||
rr_width: `${width}px`,
|
||||
rr_height: `${height}px`,
|
||||
};
|
||||
}
|
||||
// iframe
|
||||
if (tagName === 'iframe' && !keepIframeSrcFn(attributes.src as string)) {
|
||||
delete attributes.src;
|
||||
}
|
||||
return {
|
||||
type: NodeType.Element,
|
||||
tagName,
|
||||
attributes,
|
||||
childNodes: [],
|
||||
isSVG: isSVGElement(n as Element) || undefined,
|
||||
needBlock,
|
||||
rootId,
|
||||
};
|
||||
case n.TEXT_NODE:
|
||||
// The parent node may not be a html element which has a tagName attribute.
|
||||
// So just let it be undefined which is ok in this use case.
|
||||
const parentTagName =
|
||||
n.parentNode && (n.parentNode as HTMLElement).tagName;
|
||||
let textContent = (n as Text).textContent;
|
||||
const isStyle = parentTagName === 'STYLE' ? true : undefined;
|
||||
const isScript = parentTagName === 'SCRIPT' ? true : undefined;
|
||||
if (isStyle && textContent) {
|
||||
textContent = absoluteToStylesheet(textContent, getHref());
|
||||
}
|
||||
if (isScript) {
|
||||
textContent = 'SCRIPT_PLACEHOLDER';
|
||||
}
|
||||
if (
|
||||
!isStyle &&
|
||||
!isScript &&
|
||||
needMaskingText(n, maskTextClass, maskTextSelector) &&
|
||||
textContent
|
||||
) {
|
||||
textContent = maskTextFn
|
||||
? maskTextFn(textContent)
|
||||
: textContent.replace(/[\S]/g, '*');
|
||||
}
|
||||
return {
|
||||
type: NodeType.Text,
|
||||
textContent: textContent || '',
|
||||
isStyle,
|
||||
rootId,
|
||||
};
|
||||
case n.CDATA_SECTION_NODE:
|
||||
return {
|
||||
type: NodeType.CDATA,
|
||||
textContent: '',
|
||||
rootId,
|
||||
};
|
||||
case n.COMMENT_NODE:
|
||||
return {
|
||||
type: NodeType.Comment,
|
||||
textContent: (n as Comment).textContent || '',
|
||||
rootId,
|
||||
};
|
||||
default:
|
||||
return false;
|
||||
}
|
||||
}
|
||||
|
||||
function lowerIfExists(maybeAttr: string | number | boolean): string {
|
||||
if (maybeAttr === undefined) {
|
||||
return '';
|
||||
} else {
|
||||
return (maybeAttr as string).toLowerCase();
|
||||
}
|
||||
}
|
||||
|
||||
function slimDOMExcluded(
|
||||
sn: serializedNode,
|
||||
slimDOMOptions: SlimDOMOptions,
|
||||
): boolean {
|
||||
if (slimDOMOptions.comment && sn.type === NodeType.Comment) {
|
||||
// TODO: convert IE conditional comments to real nodes
|
||||
return true;
|
||||
} else if (sn.type === NodeType.Element) {
|
||||
if (
|
||||
slimDOMOptions.script &&
|
||||
// script tag
|
||||
(sn.tagName === 'script' ||
|
||||
// preload link
|
||||
(sn.tagName === 'link' &&
|
||||
sn.attributes.rel === 'preload' &&
|
||||
sn.attributes.as === 'script') ||
|
||||
// prefetch link
|
||||
(sn.tagName === 'link' &&
|
||||
sn.attributes.rel === 'prefetch' &&
|
||||
typeof sn.attributes.href === 'string' &&
|
||||
sn.attributes.href.endsWith('.js')))
|
||||
) {
|
||||
return true;
|
||||
} else if (
|
||||
slimDOMOptions.headFavicon &&
|
||||
((sn.tagName === 'link' && sn.attributes.rel === 'shortcut icon') ||
|
||||
(sn.tagName === 'meta' &&
|
||||
(lowerIfExists(sn.attributes.name).match(
|
||||
/^msapplication-tile(image|color)$/,
|
||||
) ||
|
||||
lowerIfExists(sn.attributes.name) === 'application-name' ||
|
||||
lowerIfExists(sn.attributes.rel) === 'icon' ||
|
||||
lowerIfExists(sn.attributes.rel) === 'apple-touch-icon' ||
|
||||
lowerIfExists(sn.attributes.rel) === 'shortcut icon')))
|
||||
) {
|
||||
return true;
|
||||
} else if (sn.tagName === 'meta') {
|
||||
if (
|
||||
slimDOMOptions.headMetaDescKeywords &&
|
||||
lowerIfExists(sn.attributes.name).match(/^description|keywords$/)
|
||||
) {
|
||||
return true;
|
||||
} else if (
|
||||
slimDOMOptions.headMetaSocial &&
|
||||
(lowerIfExists(sn.attributes.property).match(/^(og|twitter|fb):/) || // og = opengraph (facebook)
|
||||
lowerIfExists(sn.attributes.name).match(/^(og|twitter):/) ||
|
||||
lowerIfExists(sn.attributes.name) === 'pinterest')
|
||||
) {
|
||||
return true;
|
||||
} else if (
|
||||
slimDOMOptions.headMetaRobots &&
|
||||
(lowerIfExists(sn.attributes.name) === 'robots' ||
|
||||
lowerIfExists(sn.attributes.name) === 'googlebot' ||
|
||||
lowerIfExists(sn.attributes.name) === 'bingbot')
|
||||
) {
|
||||
return true;
|
||||
} else if (
|
||||
slimDOMOptions.headMetaHttpEquiv &&
|
||||
sn.attributes['http-equiv'] !== undefined
|
||||
) {
|
||||
// e.g. X-UA-Compatible, Content-Type, Content-Language,
|
||||
// cache-control, X-Translated-By
|
||||
return true;
|
||||
} else if (
|
||||
slimDOMOptions.headMetaAuthorship &&
|
||||
(lowerIfExists(sn.attributes.name) === 'author' ||
|
||||
lowerIfExists(sn.attributes.name) === 'generator' ||
|
||||
lowerIfExists(sn.attributes.name) === 'framework' ||
|
||||
lowerIfExists(sn.attributes.name) === 'publisher' ||
|
||||
lowerIfExists(sn.attributes.name) === 'progid' ||
|
||||
lowerIfExists(sn.attributes.property).match(/^article:/) ||
|
||||
lowerIfExists(sn.attributes.property).match(/^product:/))
|
||||
) {
|
||||
return true;
|
||||
} else if (
|
||||
slimDOMOptions.headMetaVerification &&
|
||||
(lowerIfExists(sn.attributes.name) === 'google-site-verification' ||
|
||||
lowerIfExists(sn.attributes.name) === 'yandex-verification' ||
|
||||
lowerIfExists(sn.attributes.name) === 'csrf-token' ||
|
||||
lowerIfExists(sn.attributes.name) === 'p:domain_verify' ||
|
||||
lowerIfExists(sn.attributes.name) === 'verify-v1' ||
|
||||
lowerIfExists(sn.attributes.name) === 'verification' ||
|
||||
lowerIfExists(sn.attributes.name) === 'shopify-checkout-api-token')
|
||||
) {
|
||||
return true;
|
||||
}
|
||||
}
|
||||
}
|
||||
return false;
|
||||
}
|
||||
|
||||
export function serializeNodeWithId(
|
||||
n: Node | INode,
|
||||
options: {
|
||||
doc: Document;
|
||||
map: idNodeMap;
|
||||
blockClass: string | RegExp;
|
||||
blockSelector: string | null;
|
||||
maskTextClass: string | RegExp;
|
||||
maskTextSelector: string | null;
|
||||
skipChild: boolean;
|
||||
inlineStylesheet: boolean;
|
||||
maskInputOptions?: MaskInputOptions;
|
||||
maskTextFn: MaskTextFn | undefined;
|
||||
maskInputFn: MaskInputFn | undefined;
|
||||
slimDOMOptions: SlimDOMOptions;
|
||||
keepIframeSrcFn?: KeepIframeSrcFn;
|
||||
recordCanvas?: boolean;
|
||||
preserveWhiteSpace?: boolean;
|
||||
onSerialize?: (n: INode) => unknown;
|
||||
onIframeLoad?: (iframeINode: INode, node: serializedNodeWithId) => unknown;
|
||||
iframeLoadTimeout?: number;
|
||||
},
|
||||
): serializedNodeWithId | null {
|
||||
const {
|
||||
doc,
|
||||
map,
|
||||
blockClass,
|
||||
blockSelector,
|
||||
maskTextClass,
|
||||
maskTextSelector,
|
||||
skipChild = false,
|
||||
inlineStylesheet = true,
|
||||
maskInputOptions = {},
|
||||
maskTextFn,
|
||||
maskInputFn,
|
||||
slimDOMOptions,
|
||||
recordCanvas = false,
|
||||
onSerialize,
|
||||
onIframeLoad,
|
||||
iframeLoadTimeout = 5000,
|
||||
keepIframeSrcFn = () => false,
|
||||
} = options;
|
||||
let { preserveWhiteSpace = true } = options;
|
||||
const _serializedNode = serializeNode(n, {
|
||||
doc,
|
||||
blockClass,
|
||||
blockSelector,
|
||||
maskTextClass,
|
||||
maskTextSelector,
|
||||
inlineStylesheet,
|
||||
maskInputOptions,
|
||||
maskTextFn,
|
||||
maskInputFn,
|
||||
recordCanvas,
|
||||
keepIframeSrcFn,
|
||||
});
|
||||
if (!_serializedNode) {
|
||||
// TODO: dev only
|
||||
console.warn(n, 'not serialized');
|
||||
return null;
|
||||
}
|
||||
|
||||
let id;
|
||||
// Try to reuse the previous id
|
||||
if ('__sn' in n) {
|
||||
id = n.__sn.id;
|
||||
} else if (
|
||||
slimDOMExcluded(_serializedNode, slimDOMOptions) ||
|
||||
(!preserveWhiteSpace &&
|
||||
_serializedNode.type === NodeType.Text &&
|
||||
!_serializedNode.isStyle &&
|
||||
!_serializedNode.textContent.replace(/^\s+|\s+$/gm, '').length)
|
||||
) {
|
||||
id = IGNORED_NODE;
|
||||
} else {
|
||||
id = genId();
|
||||
}
|
||||
const serializedNode = Object.assign(_serializedNode, { id });
|
||||
(n as INode).__sn = serializedNode;
|
||||
if (id === IGNORED_NODE) {
|
||||
return null; // slimDOM
|
||||
}
|
||||
map[id] = n as INode;
|
||||
if (onSerialize) {
|
||||
onSerialize(n as INode);
|
||||
}
|
||||
let recordChild = !skipChild;
|
||||
if (serializedNode.type === NodeType.Element) {
|
||||
recordChild = recordChild && !serializedNode.needBlock;
|
||||
// this property was not needed in replay side
|
||||
delete serializedNode.needBlock;
|
||||
}
|
||||
if (
|
||||
(serializedNode.type === NodeType.Document ||
|
||||
serializedNode.type === NodeType.Element) &&
|
||||
recordChild
|
||||
) {
|
||||
if (
|
||||
slimDOMOptions.headWhitespace &&
|
||||
_serializedNode.type === NodeType.Element &&
|
||||
_serializedNode.tagName === 'head'
|
||||
// would impede performance: || getComputedStyle(n)['white-space'] === 'normal'
|
||||
) {
|
||||
preserveWhiteSpace = false;
|
||||
}
|
||||
const bypassOptions = {
|
||||
doc,
|
||||
map,
|
||||
blockClass,
|
||||
blockSelector,
|
||||
maskTextClass,
|
||||
maskTextSelector,
|
||||
skipChild,
|
||||
inlineStylesheet,
|
||||
maskInputOptions,
|
||||
maskTextFn,
|
||||
maskInputFn,
|
||||
slimDOMOptions,
|
||||
recordCanvas,
|
||||
preserveWhiteSpace,
|
||||
onSerialize,
|
||||
onIframeLoad,
|
||||
iframeLoadTimeout,
|
||||
keepIframeSrcFn,
|
||||
};
|
||||
for (const childN of Array.from(n.childNodes)) {
|
||||
const serializedChildNode = serializeNodeWithId(childN, bypassOptions);
|
||||
if (serializedChildNode) {
|
||||
serializedNode.childNodes.push(serializedChildNode);
|
||||
}
|
||||
}
|
||||
|
||||
if (isElement(n) && n.shadowRoot) {
|
||||
serializedNode.isShadowHost = true;
|
||||
for (const childN of Array.from(n.shadowRoot.childNodes)) {
|
||||
const serializedChildNode = serializeNodeWithId(childN, bypassOptions);
|
||||
if (serializedChildNode) {
|
||||
serializedChildNode.isShadow = true;
|
||||
serializedNode.childNodes.push(serializedChildNode);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
if (n.parentNode && isShadowRoot(n.parentNode)) {
|
||||
serializedNode.isShadow = true;
|
||||
}
|
||||
|
||||
if (
|
||||
serializedNode.type === NodeType.Element &&
|
||||
serializedNode.tagName === 'iframe'
|
||||
) {
|
||||
onceIframeLoaded(
|
||||
n as HTMLIFrameElement,
|
||||
() => {
|
||||
const iframeDoc = (n as HTMLIFrameElement).contentDocument;
|
||||
if (iframeDoc && onIframeLoad) {
|
||||
const serializedIframeNode = serializeNodeWithId(iframeDoc, {
|
||||
doc: iframeDoc,
|
||||
map,
|
||||
blockClass,
|
||||
blockSelector,
|
||||
maskTextClass,
|
||||
maskTextSelector,
|
||||
skipChild: false,
|
||||
inlineStylesheet,
|
||||
maskInputOptions,
|
||||
maskTextFn,
|
||||
maskInputFn,
|
||||
slimDOMOptions,
|
||||
recordCanvas,
|
||||
preserveWhiteSpace,
|
||||
onSerialize,
|
||||
onIframeLoad,
|
||||
iframeLoadTimeout,
|
||||
keepIframeSrcFn,
|
||||
});
|
||||
|
||||
if (serializedIframeNode) {
|
||||
onIframeLoad(n as INode, serializedIframeNode);
|
||||
}
|
||||
}
|
||||
},
|
||||
iframeLoadTimeout,
|
||||
);
|
||||
}
|
||||
|
||||
return serializedNode;
|
||||
}
|
||||
|
||||
function snapshot(
|
||||
n: Document,
|
||||
options?: {
|
||||
blockClass?: string | RegExp;
|
||||
blockSelector?: string | null;
|
||||
maskTextClass?: string | RegExp;
|
||||
maskTextSelector?: string | null;
|
||||
inlineStylesheet?: boolean;
|
||||
maskAllInputs?: boolean | MaskInputOptions;
|
||||
maskTextFn?: MaskTextFn;
|
||||
maskInputFn?: MaskTextFn;
|
||||
slimDOM?: boolean | SlimDOMOptions;
|
||||
recordCanvas?: boolean;
|
||||
preserveWhiteSpace?: boolean;
|
||||
onSerialize?: (n: INode) => unknown;
|
||||
onIframeLoad?: (iframeINode: INode, node: serializedNodeWithId) => unknown;
|
||||
iframeLoadTimeout?: number;
|
||||
keepIframeSrcFn?: KeepIframeSrcFn;
|
||||
},
|
||||
): [serializedNodeWithId | null, idNodeMap] {
|
||||
const {
|
||||
blockClass = 'rr-block',
|
||||
blockSelector = null,
|
||||
maskTextClass = 'rr-mask',
|
||||
maskTextSelector = null,
|
||||
inlineStylesheet = true,
|
||||
recordCanvas = false,
|
||||
maskAllInputs = false,
|
||||
maskTextFn,
|
||||
maskInputFn,
|
||||
slimDOM = false,
|
||||
preserveWhiteSpace,
|
||||
onSerialize,
|
||||
onIframeLoad,
|
||||
iframeLoadTimeout,
|
||||
keepIframeSrcFn = () => false,
|
||||
} = options || {};
|
||||
const idNodeMap: idNodeMap = {};
|
||||
const maskInputOptions: MaskInputOptions =
|
||||
maskAllInputs === true
|
||||
? {
|
||||
color: true,
|
||||
date: true,
|
||||
'datetime-local': true,
|
||||
email: true,
|
||||
month: true,
|
||||
number: true,
|
||||
range: true,
|
||||
search: true,
|
||||
tel: true,
|
||||
text: true,
|
||||
time: true,
|
||||
url: true,
|
||||
week: true,
|
||||
textarea: true,
|
||||
select: true,
|
||||
password: true,
|
||||
}
|
||||
: maskAllInputs === false
|
||||
? {
|
||||
password: true,
|
||||
}
|
||||
: maskAllInputs;
|
||||
const slimDOMOptions: SlimDOMOptions =
|
||||
slimDOM === true || slimDOM === 'all'
|
||||
? // if true: set of sensible options that should not throw away any information
|
||||
{
|
||||
script: true,
|
||||
comment: true,
|
||||
headFavicon: true,
|
||||
headWhitespace: true,
|
||||
headMetaDescKeywords: slimDOM === 'all', // destructive
|
||||
headMetaSocial: true,
|
||||
headMetaRobots: true,
|
||||
headMetaHttpEquiv: true,
|
||||
headMetaAuthorship: true,
|
||||
headMetaVerification: true,
|
||||
}
|
||||
: slimDOM === false
|
||||
? {}
|
||||
: slimDOM;
|
||||
return [
|
||||
serializeNodeWithId(n, {
|
||||
doc: n,
|
||||
map: idNodeMap,
|
||||
blockClass,
|
||||
blockSelector,
|
||||
maskTextClass,
|
||||
maskTextSelector,
|
||||
skipChild: false,
|
||||
inlineStylesheet,
|
||||
maskInputOptions,
|
||||
maskTextFn,
|
||||
maskInputFn,
|
||||
slimDOMOptions,
|
||||
recordCanvas,
|
||||
preserveWhiteSpace,
|
||||
onSerialize,
|
||||
onIframeLoad,
|
||||
iframeLoadTimeout,
|
||||
keepIframeSrcFn,
|
||||
}),
|
||||
idNodeMap,
|
||||
];
|
||||
}
|
||||
|
||||
export function visitSnapshot(
|
||||
node: serializedNodeWithId,
|
||||
onVisit: (node: serializedNodeWithId) => unknown,
|
||||
) {
|
||||
function walk(current: serializedNodeWithId) {
|
||||
onVisit(current);
|
||||
if (
|
||||
current.type === NodeType.Document ||
|
||||
current.type === NodeType.Element
|
||||
) {
|
||||
current.childNodes.forEach(walk);
|
||||
}
|
||||
}
|
||||
|
||||
walk(node);
|
||||
}
|
||||
|
||||
export function cleanupSnapshot() {
|
||||
// allow a new recording to start numbering nodes from scratch
|
||||
_id = 1;
|
||||
}
|
||||
|
||||
export default snapshot;
|
||||
113
packages/rrweb-snapshot/src/types.ts
Normal file
113
packages/rrweb-snapshot/src/types.ts
Normal file
@@ -0,0 +1,113 @@
|
||||
export enum NodeType {
|
||||
Document,
|
||||
DocumentType,
|
||||
Element,
|
||||
Text,
|
||||
CDATA,
|
||||
Comment,
|
||||
}
|
||||
|
||||
export type documentNode = {
|
||||
type: NodeType.Document;
|
||||
childNodes: serializedNodeWithId[];
|
||||
};
|
||||
|
||||
export type documentTypeNode = {
|
||||
type: NodeType.DocumentType;
|
||||
name: string;
|
||||
publicId: string;
|
||||
systemId: string;
|
||||
};
|
||||
|
||||
export type attributes = {
|
||||
[key: string]: string | number | boolean;
|
||||
};
|
||||
export type elementNode = {
|
||||
type: NodeType.Element;
|
||||
tagName: string;
|
||||
attributes: attributes;
|
||||
childNodes: serializedNodeWithId[];
|
||||
isSVG?: true;
|
||||
needBlock?: boolean;
|
||||
};
|
||||
|
||||
export type textNode = {
|
||||
type: NodeType.Text;
|
||||
textContent: string;
|
||||
isStyle?: true;
|
||||
};
|
||||
|
||||
export type cdataNode = {
|
||||
type: NodeType.CDATA;
|
||||
textContent: '';
|
||||
};
|
||||
|
||||
export type commentNode = {
|
||||
type: NodeType.Comment;
|
||||
textContent: string;
|
||||
};
|
||||
|
||||
export type serializedNode = (
|
||||
| documentNode
|
||||
| documentTypeNode
|
||||
| elementNode
|
||||
| textNode
|
||||
| cdataNode
|
||||
| commentNode
|
||||
) & {
|
||||
rootId?: number;
|
||||
isShadowHost?: boolean;
|
||||
isShadow?: boolean;
|
||||
};
|
||||
|
||||
export type serializedNodeWithId = serializedNode & { id: number };
|
||||
|
||||
export type tagMap = {
|
||||
[key: string]: string;
|
||||
};
|
||||
|
||||
export interface INode extends Node {
|
||||
__sn: serializedNodeWithId;
|
||||
}
|
||||
|
||||
export type idNodeMap = {
|
||||
[key: number]: INode;
|
||||
};
|
||||
|
||||
export type MaskInputOptions = Partial<{
|
||||
color: boolean;
|
||||
date: boolean;
|
||||
'datetime-local': boolean;
|
||||
email: boolean;
|
||||
month: boolean;
|
||||
number: boolean;
|
||||
range: boolean;
|
||||
search: boolean;
|
||||
tel: boolean;
|
||||
text: boolean;
|
||||
time: boolean;
|
||||
url: boolean;
|
||||
week: boolean;
|
||||
// unify textarea and select element with text input
|
||||
textarea: boolean;
|
||||
select: boolean;
|
||||
password: boolean;
|
||||
}>;
|
||||
|
||||
export type SlimDOMOptions = Partial<{
|
||||
script: boolean;
|
||||
comment: boolean;
|
||||
headFavicon: boolean;
|
||||
headWhitespace: boolean;
|
||||
headMetaDescKeywords: boolean;
|
||||
headMetaSocial: boolean;
|
||||
headMetaRobots: boolean;
|
||||
headMetaHttpEquiv: boolean;
|
||||
headMetaAuthorship: boolean;
|
||||
headMetaVerification: boolean;
|
||||
}>;
|
||||
|
||||
export type MaskTextFn = (text: string) => string;
|
||||
export type MaskInputFn = (text: string) => string;
|
||||
|
||||
export type KeepIframeSrcFn = (src: string) => boolean;
|
||||
37
packages/rrweb-snapshot/src/utils.ts
Normal file
37
packages/rrweb-snapshot/src/utils.ts
Normal file
@@ -0,0 +1,37 @@
|
||||
import { INode, MaskInputFn, MaskInputOptions } from './types';
|
||||
|
||||
export function isElement(n: Node | INode): n is Element {
|
||||
return n.nodeType === n.ELEMENT_NODE;
|
||||
}
|
||||
|
||||
export function isShadowRoot(n: Node): n is ShadowRoot {
|
||||
const host: Element | null = (n as ShadowRoot)?.host;
|
||||
return Boolean(host && host.shadowRoot && host.shadowRoot === n);
|
||||
}
|
||||
|
||||
export function maskInputValue({
|
||||
maskInputOptions,
|
||||
tagName,
|
||||
type,
|
||||
value,
|
||||
maskInputFn,
|
||||
}: {
|
||||
maskInputOptions: MaskInputOptions;
|
||||
tagName: string;
|
||||
type: string | number | boolean | null;
|
||||
value: string | null;
|
||||
maskInputFn?: MaskInputFn;
|
||||
}): string {
|
||||
let text = value || '';
|
||||
if (
|
||||
maskInputOptions[tagName.toLowerCase() as keyof MaskInputOptions] ||
|
||||
maskInputOptions[type as keyof MaskInputOptions]
|
||||
) {
|
||||
if (maskInputFn) {
|
||||
text = maskInputFn(text);
|
||||
} else {
|
||||
text = '*'.repeat(text.length);
|
||||
}
|
||||
}
|
||||
return text;
|
||||
}
|
||||
Reference in New Issue
Block a user