rrweb-snapshot
Advanced tools
Comparing version 2.0.0-alpha.15 to 2.0.0-alpha.16
@@ -271,3 +271,3 @@ export declare function adaptCssForReplay(cssText: string, cache: BuildCache): string; | ||
maskTextFn?: MaskTextFn; | ||
maskInputFn?: MaskTextFn; | ||
maskInputFn?: MaskInputFn; | ||
slimDOM?: 'all' | boolean | SlimDOMOptions; | ||
@@ -274,0 +274,0 @@ dataURLOptions?: DataURLOptions; |
var __defProp = Object.defineProperty; | ||
var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value; | ||
var __publicField = (obj, key, value) => { | ||
__defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value); | ||
return value; | ||
}; | ||
var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value); | ||
var NodeType = /* @__PURE__ */ ((NodeType2) => { | ||
@@ -37,4 +34,3 @@ NodeType2[NodeType2["Document"] = 0] = "Document"; | ||
const { cssText } = rule; | ||
if (cssText.split('"').length < 3) | ||
return cssText; | ||
if (cssText.split('"').length < 3) return cssText; | ||
const statement = ["@import", `url(${JSON.stringify(rule.href)})`]; | ||
@@ -96,4 +92,3 @@ if (rule.layerName === "") { | ||
var _a; | ||
if (!n) | ||
return -1; | ||
if (!n) return -1; | ||
const id = (_a = this.getMeta(n)) == null ? void 0 : _a.id; | ||
@@ -137,4 +132,3 @@ return id ?? -1; | ||
const meta = this.nodeMetaMap.get(oldNode); | ||
if (meta) | ||
this.nodeMetaMap.set(n, meta); | ||
if (meta) this.nodeMetaMap.set(n, meta); | ||
} | ||
@@ -176,4 +170,3 @@ this.idNodeMap.set(id, n); | ||
const ctx = canvas.getContext("2d"); | ||
if (!ctx) | ||
return true; | ||
if (!ctx) return true; | ||
const chunkSize = 50; | ||
@@ -194,4 +187,3 @@ for (let x = 0; x < canvas.width; x += chunkSize) { | ||
); | ||
if (pixelBuffer.some((pixel) => pixel !== 0)) | ||
return false; | ||
if (pixelBuffer.some((pixel) => pixel !== 0)) return false; | ||
} | ||
@@ -202,4 +194,3 @@ } | ||
function isNodeMetaEqual(a, b) { | ||
if (!a || !b || a.type !== b.type) | ||
return false; | ||
if (!a || !b || a.type !== b.type) return false; | ||
if (a.type === NodeType.Document) | ||
@@ -423,7 +414,5 @@ return a.compatMode === b.compatMode; | ||
function classMatchesRegex(node, regex, checkAncestors) { | ||
if (!node) | ||
return false; | ||
if (!node) return false; | ||
if (node.nodeType !== node.ELEMENT_NODE) { | ||
if (!checkAncestors) | ||
return false; | ||
if (!checkAncestors) return false; | ||
return classMatchesRegex(node.parentNode, regex, checkAncestors); | ||
@@ -437,30 +426,32 @@ } | ||
} | ||
if (!checkAncestors) | ||
return false; | ||
if (!checkAncestors) return false; | ||
return classMatchesRegex(node.parentNode, regex, checkAncestors); | ||
} | ||
function needMaskingText(node, maskTextClass, maskTextSelector, checkAncestors) { | ||
let el; | ||
if (isElement(node)) { | ||
el = node; | ||
if (!el.childNodes.length) { | ||
return false; | ||
} | ||
} else if (node.parentElement === null) { | ||
return false; | ||
} else { | ||
el = node.parentElement; | ||
} | ||
try { | ||
const el = node.nodeType === node.ELEMENT_NODE ? node : node.parentElement; | ||
if (el === null) | ||
return false; | ||
if (typeof maskTextClass === "string") { | ||
if (checkAncestors) { | ||
if (el.closest(`.${maskTextClass}`)) | ||
return true; | ||
if (el.closest(`.${maskTextClass}`)) return true; | ||
} else { | ||
if (el.classList.contains(maskTextClass)) | ||
return true; | ||
if (el.classList.contains(maskTextClass)) return true; | ||
} | ||
} else { | ||
if (classMatchesRegex(el, maskTextClass, checkAncestors)) | ||
return true; | ||
if (classMatchesRegex(el, maskTextClass, checkAncestors)) return true; | ||
} | ||
if (maskTextSelector) { | ||
if (checkAncestors) { | ||
if (el.closest(maskTextSelector)) | ||
return true; | ||
if (el.closest(maskTextSelector)) return true; | ||
} else { | ||
if (el.matches(maskTextSelector)) | ||
return true; | ||
if (el.matches(maskTextSelector)) return true; | ||
} | ||
@@ -513,4 +504,3 @@ } | ||
} | ||
if (styleSheetLoaded) | ||
return; | ||
if (styleSheetLoaded) return; | ||
const timer = setTimeout(() => { | ||
@@ -608,4 +598,3 @@ if (!fired) { | ||
function getRootId(doc, mirror) { | ||
if (!mirror.hasNode(doc)) | ||
return void 0; | ||
if (!mirror.hasNode(doc)) return void 0; | ||
const docId = mirror.getId(doc); | ||
@@ -667,3 +656,3 @@ return docId === 1 ? void 0 : docId; | ||
const tagName = getValidTagName(n); | ||
let attributes2 = {}; | ||
let attributes = {}; | ||
const len = n.attributes.length; | ||
@@ -673,3 +662,3 @@ for (let i = 0; i < len; i++) { | ||
if (!ignoreAttribute(tagName, attr.name, attr.value)) { | ||
attributes2[attr.name] = transformAttribute( | ||
attributes[attr.name] = transformAttribute( | ||
doc, | ||
@@ -691,5 +680,5 @@ tagName, | ||
if (cssText) { | ||
delete attributes2.rel; | ||
delete attributes2.href; | ||
attributes2._cssText = absoluteToStylesheet(cssText, stylesheet.href); | ||
delete attributes.rel; | ||
delete attributes.href; | ||
attributes._cssText = absoluteToStylesheet(cssText, stylesheet.href); | ||
} | ||
@@ -703,3 +692,3 @@ } | ||
if (cssText) { | ||
attributes2._cssText = absoluteToStylesheet(cssText, getHref(doc)); | ||
attributes._cssText = absoluteToStylesheet(cssText, getHref(doc)); | ||
} | ||
@@ -710,4 +699,4 @@ } | ||
const checked = n.checked; | ||
if (attributes2.type !== "radio" && attributes2.type !== "checkbox" && attributes2.type !== "submit" && attributes2.type !== "button" && value) { | ||
attributes2.value = maskInputValue({ | ||
if (attributes.type !== "radio" && attributes.type !== "checkbox" && attributes.type !== "submit" && attributes.type !== "button" && value) { | ||
attributes.value = maskInputValue({ | ||
element: n, | ||
@@ -721,3 +710,3 @@ type: getInputType(n), | ||
} else if (checked) { | ||
attributes2.checked = checked; | ||
attributes.checked = checked; | ||
} | ||
@@ -727,5 +716,5 @@ } | ||
if (n.selected && !maskInputOptions["select"]) { | ||
attributes2.selected = true; | ||
attributes.selected = true; | ||
} else { | ||
delete attributes2.selected; | ||
delete attributes.selected; | ||
} | ||
@@ -736,3 +725,3 @@ } | ||
if (!is2DCanvasBlank(n)) { | ||
attributes2.rr_dataURL = n.toDataURL( | ||
attributes.rr_dataURL = n.toDataURL( | ||
dataURLOptions.type, | ||
@@ -755,3 +744,3 @@ dataURLOptions.quality | ||
if (canvasDataURL !== blankCanvasDataURL) { | ||
attributes2.rr_dataURL = canvasDataURL; | ||
attributes.rr_dataURL = canvasDataURL; | ||
} | ||
@@ -774,3 +763,3 @@ } | ||
canvasCtx.drawImage(image, 0, 0); | ||
attributes2.rr_dataURL = canvasService.toDataURL( | ||
attributes.rr_dataURL = canvasService.toDataURL( | ||
dataURLOptions.type, | ||
@@ -784,4 +773,3 @@ dataURLOptions.quality | ||
recordInlineImage(); | ||
else | ||
image.addEventListener("load", recordInlineImage); | ||
else image.addEventListener("load", recordInlineImage); | ||
return; | ||
@@ -795,12 +783,10 @@ } else { | ||
if (image.crossOrigin === "anonymous") { | ||
priorCrossOrigin ? attributes2.crossOrigin = priorCrossOrigin : image.removeAttribute("crossorigin"); | ||
priorCrossOrigin ? attributes.crossOrigin = priorCrossOrigin : image.removeAttribute("crossorigin"); | ||
} | ||
}; | ||
if (image.complete && image.naturalWidth !== 0) | ||
recordInlineImage(); | ||
else | ||
image.addEventListener("load", recordInlineImage); | ||
if (image.complete && image.naturalWidth !== 0) recordInlineImage(); | ||
else image.addEventListener("load", recordInlineImage); | ||
} | ||
if (tagName === "audio" || tagName === "video") { | ||
const mediaAttributes = attributes2; | ||
const mediaAttributes = attributes; | ||
mediaAttributes.rr_mediaState = n.paused ? "paused" : "played"; | ||
@@ -815,6 +801,6 @@ mediaAttributes.rr_mediaCurrentTime = n.currentTime; | ||
if (n.scrollLeft) { | ||
attributes2.rr_scrollLeft = n.scrollLeft; | ||
attributes.rr_scrollLeft = n.scrollLeft; | ||
} | ||
if (n.scrollTop) { | ||
attributes2.rr_scrollTop = n.scrollTop; | ||
attributes.rr_scrollTop = n.scrollTop; | ||
} | ||
@@ -824,4 +810,4 @@ } | ||
const { width, height } = n.getBoundingClientRect(); | ||
attributes2 = { | ||
class: attributes2.class, | ||
attributes = { | ||
class: attributes.class, | ||
rr_width: `${width}px`, | ||
@@ -831,12 +817,11 @@ rr_height: `${height}px` | ||
} | ||
if (tagName === "iframe" && !keepIframeSrcFn(attributes2.src)) { | ||
if (tagName === "iframe" && !keepIframeSrcFn(attributes.src)) { | ||
if (!n.contentDocument) { | ||
attributes2.rr_src = attributes2.src; | ||
attributes.rr_src = attributes.src; | ||
} | ||
delete attributes2.src; | ||
delete attributes.src; | ||
} | ||
let isCustomElement; | ||
try { | ||
if (customElements.get(tagName)) | ||
isCustomElement = true; | ||
if (customElements.get(tagName)) isCustomElement = true; | ||
} catch (e) { | ||
@@ -847,3 +832,3 @@ } | ||
tagName, | ||
attributes: attributes2, | ||
attributes, | ||
childNodes: [], | ||
@@ -922,3 +907,3 @@ isSVG: isSVGElement(n) || void 0, | ||
let { preserveWhiteSpace = true } = options; | ||
if (!needsMask && n.childNodes) { | ||
if (!needsMask) { | ||
const checkAncestors = needsMask === void 0; | ||
@@ -960,4 +945,4 @@ needsMask = needMaskingText( | ||
} | ||
const serializedNode2 = Object.assign(_serializedNode, { id }); | ||
mirror.add(n, serializedNode2); | ||
const serializedNode = Object.assign(_serializedNode, { id }); | ||
mirror.add(n, serializedNode); | ||
if (id === IGNORED_NODE) { | ||
@@ -970,11 +955,11 @@ return null; | ||
let recordChild = !skipChild; | ||
if (serializedNode2.type === NodeType.Element) { | ||
recordChild = recordChild && !serializedNode2.needBlock; | ||
delete serializedNode2.needBlock; | ||
if (serializedNode.type === NodeType.Element) { | ||
recordChild = recordChild && !serializedNode.needBlock; | ||
delete serializedNode.needBlock; | ||
const shadowRoot = n.shadowRoot; | ||
if (shadowRoot && isNativeShadowDom(shadowRoot)) | ||
serializedNode2.isShadowHost = true; | ||
serializedNode.isShadowHost = true; | ||
} | ||
if ((serializedNode2.type === NodeType.Document || serializedNode2.type === NodeType.Element) && recordChild) { | ||
if (slimDOMOptions.headWhitespace && serializedNode2.type === NodeType.Element && serializedNode2.tagName === "head") { | ||
if ((serializedNode.type === NodeType.Document || serializedNode.type === NodeType.Element) && recordChild) { | ||
if (slimDOMOptions.headWhitespace && serializedNode.type === NodeType.Element && serializedNode.tagName === "head") { | ||
preserveWhiteSpace = false; | ||
@@ -1007,4 +992,3 @@ } | ||
}; | ||
if (serializedNode2.type === NodeType.Element && serializedNode2.tagName === "textarea" && serializedNode2.attributes.value !== void 0) | ||
; | ||
if (serializedNode.type === NodeType.Element && serializedNode.tagName === "textarea" && serializedNode.attributes.value !== void 0) ; | ||
else { | ||
@@ -1014,3 +998,3 @@ for (const childN of Array.from(n.childNodes)) { | ||
if (serializedChildNode) { | ||
serializedNode2.childNodes.push(serializedChildNode); | ||
serializedNode.childNodes.push(serializedChildNode); | ||
} | ||
@@ -1024,3 +1008,3 @@ } | ||
isNativeShadowDom(n.shadowRoot) && (serializedChildNode.isShadow = true); | ||
serializedNode2.childNodes.push(serializedChildNode); | ||
serializedNode.childNodes.push(serializedChildNode); | ||
} | ||
@@ -1031,5 +1015,5 @@ } | ||
if (n.parentNode && isShadowRoot(n.parentNode) && isNativeShadowDom(n.parentNode)) { | ||
serializedNode2.isShadow = true; | ||
serializedNode.isShadow = true; | ||
} | ||
if (serializedNode2.type === NodeType.Element && serializedNode2.tagName === "iframe") { | ||
if (serializedNode.type === NodeType.Element && serializedNode.tagName === "iframe") { | ||
onceIframeLoaded( | ||
@@ -1076,3 +1060,3 @@ n, | ||
} | ||
if (serializedNode2.type === NodeType.Element && serializedNode2.tagName === "link" && typeof serializedNode2.attributes.rel === "string" && (serializedNode2.attributes.rel === "stylesheet" || serializedNode2.attributes.rel === "preload" && typeof serializedNode2.attributes.href === "string" && extractFileExtension(serializedNode2.attributes.href) === "css")) { | ||
if (serializedNode.type === NodeType.Element && serializedNode.tagName === "link" && typeof serializedNode.attributes.rel === "string" && (serializedNode.attributes.rel === "stylesheet" || serializedNode.attributes.rel === "preload" && typeof serializedNode.attributes.href === "string" && extractFileExtension(serializedNode.attributes.href) === "css")) { | ||
onceStylesheetLoaded( | ||
@@ -1118,3 +1102,3 @@ n, | ||
} | ||
return serializedNode2; | ||
return serializedNode; | ||
} | ||
@@ -1760,4 +1744,3 @@ function snapshot(n, options) { | ||
const cachedStyle = cache == null ? void 0 : cache.stylesWithHoverClass.get(cssText); | ||
if (cachedStyle) | ||
return cachedStyle; | ||
if (cachedStyle) return cachedStyle; | ||
const ast = parse(cssText, { | ||
@@ -1866,4 +1849,3 @@ silent: true | ||
} | ||
if (value === true) | ||
value = ""; | ||
if (value === true) value = ""; | ||
if (name.startsWith("rr_")) { | ||
@@ -1991,4 +1973,3 @@ specialAttributes[name] = value; | ||
const meta = mirror.getMeta(nodeInMirror); | ||
if (isNodeMetaEqual(meta, n)) | ||
return mirror.getNode(n.id); | ||
if (isNodeMetaEqual(meta, n)) return mirror.getNode(n.id); | ||
} | ||
@@ -2039,4 +2020,3 @@ let node = buildNode(n, { doc, hackCss, cache }); | ||
htmlElement.childNodes.forEach((child) => { | ||
if (child.nodeName === "BODY") | ||
body = child; | ||
if (child.nodeName === "BODY") body = child; | ||
}); | ||
@@ -2043,0 +2023,0 @@ if (body) { |
{ | ||
"name": "rrweb-snapshot", | ||
"version": "2.0.0-alpha.15", | ||
"version": "2.0.0-alpha.16", | ||
"description": "rrweb's component to take a snapshot of DOM, aka DOM serializer", | ||
@@ -8,10 +8,11 @@ "scripts": { | ||
"prepack": "npm run build", | ||
"retest": "jest", | ||
"test": "vitest run", | ||
"retest": "vitest run", | ||
"test": "yarn build && vitest run", | ||
"test:watch": "vitest watch", | ||
"test:update": "vitest run --update", | ||
"retest:update": "vitest run --update", | ||
"test:update": "yarn build && vitest run --update", | ||
"dev": "vite build --watch", | ||
"build": "yarn check-types && vite build", | ||
"build": "yarn turbo prepublish -F rrweb-snapshot", | ||
"check-types": "tsc --noEmit", | ||
"prepublish": "npm run build", | ||
"prepublish": "yarn check-types && vite build", | ||
"lint": "yarn eslint src" | ||
@@ -59,11 +60,10 @@ }, | ||
"@types/puppeteer": "^5.4.4", | ||
"cross-env": "^5.2.0", | ||
"puppeteer": "^17.1.3", | ||
"ts-node": "^7.0.1", | ||
"tslib": "^1.9.3", | ||
"typescript": "^4.7.3", | ||
"vite": "^5.2.8", | ||
"vite-plugin-dts": "^3.8.1", | ||
"typescript": "^5.4.5", | ||
"vite": "^5.3.1", | ||
"vite-plugin-dts": "^3.9.1", | ||
"vitest": "^1.4.0" | ||
} | ||
} |
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Major refactor
Supply chain riskPackage has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.
Found 1 instance in 1 package
797620
10
0
6703