provide a general visit function to modify rebuilt id node map
This commit is contained in:
@@ -62,7 +62,7 @@ export function addHoverClass(cssText: string): string {
|
||||
if (!ast.stylesheet) {
|
||||
return cssText;
|
||||
}
|
||||
ast.stylesheet.rules.forEach(rule => {
|
||||
ast.stylesheet.rules.forEach((rule) => {
|
||||
if ('selectors' in rule) {
|
||||
(rule.selectors || []).forEach((selector: string) => {
|
||||
if (HOVER_SELECTOR.test(selector)) {
|
||||
@@ -102,7 +102,8 @@ function buildNode(
|
||||
continue;
|
||||
}
|
||||
let value = n.attributes[name];
|
||||
value = typeof value === 'boolean' || typeof value === 'number' ? '' : value;
|
||||
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';
|
||||
@@ -128,7 +129,11 @@ function buildNode(
|
||||
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') {
|
||||
} 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
|
||||
@@ -220,25 +225,34 @@ export function buildNodeWithSN(
|
||||
return node as INode;
|
||||
}
|
||||
|
||||
function sideEffects(idNodeMap: idNodeMap) {
|
||||
for(let id in idNodeMap) {
|
||||
const node = idNodeMap[id];
|
||||
const n = node.__sn;
|
||||
if (n.type !== NodeType.Element) {
|
||||
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 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;
|
||||
}
|
||||
const value = n.attributes[name];
|
||||
if (name === 'rr_scrollLeft') {
|
||||
el.scrollLeft = value as number;
|
||||
}
|
||||
if (name === 'rr_scrollTop') {
|
||||
el.scrollTop = value as number;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -246,6 +260,7 @@ function sideEffects(idNodeMap: idNodeMap) {
|
||||
function rebuild(
|
||||
n: serializedNodeWithId,
|
||||
doc: Document,
|
||||
onVisit?: (node: INode) => unknown,
|
||||
/**
|
||||
* This is not a public API yet, just for POC
|
||||
*/
|
||||
@@ -253,7 +268,12 @@ function rebuild(
|
||||
): [Node | null, idNodeMap] {
|
||||
const idNodeMap: idNodeMap = {};
|
||||
const node = buildNodeWithSN(n, doc, idNodeMap, false, HACK_CSS);
|
||||
sideEffects(idNodeMap);
|
||||
visit(idNodeMap, (visitedNode) => {
|
||||
if (onVisit) {
|
||||
onVisit(visitedNode);
|
||||
}
|
||||
handleScroll(visitedNode);
|
||||
});
|
||||
return [node, idNodeMap];
|
||||
}
|
||||
|
||||
|
||||
Reference in New Issue
Block a user