From d414ec553fca36e0b6f315548c26a8ac3aa45bd4 Mon Sep 17 00:00:00 2001 From: Paul D'Ambra Date: Fri, 26 Jan 2024 14:29:58 +0000 Subject: [PATCH] feat: pnpm patch rrweb --- package.json | 7 +- patches/rrweb@2.0.0-alpha.11.patch | 1134 ++++++++++++++++++++++++++++ pnpm-lock.yaml | 10 +- 3 files changed, 1148 insertions(+), 3 deletions(-) create mode 100644 patches/rrweb@2.0.0-alpha.11.patch diff --git a/package.json b/package.json index b5d940897..7b400b940 100644 --- a/package.json +++ b/package.json @@ -102,5 +102,10 @@ }, "browserslist": [ "> 0.5%, last 2 versions, Firefox ESR, not dead, IE 11" - ] + ], + "pnpm": { + "patchedDependencies": { + "rrweb@2.0.0-alpha.11": "patches/rrweb@2.0.0-alpha.11.patch" + } + } } diff --git a/patches/rrweb@2.0.0-alpha.11.patch b/patches/rrweb@2.0.0-alpha.11.patch new file mode 100644 index 000000000..a91212f72 --- /dev/null +++ b/patches/rrweb@2.0.0-alpha.11.patch @@ -0,0 +1,1134 @@ +diff --git a/es/rrweb/packages/rrweb/src/record/mutation.js b/es/rrweb/packages/rrweb/src/record/mutation.js +index 81ad4520d1435d088752a85f9a55a68ad6e0f514..39d96af4f65eb32ba13eb7d5a81076e996c9df26 100644 +--- a/es/rrweb/packages/rrweb/src/record/mutation.js ++++ b/es/rrweb/packages/rrweb/src/record/mutation.js +@@ -1,563 +1,607 @@ +-import { isShadowRoot, isNativeShadowDom, getInputType, maskInputValue, ignoreAttribute, transformAttribute, toLowerCase, needMaskingText, IGNORED_NODE, serializeNodeWithId } from '../../../rrweb-snapshot/es/rrweb-snapshot.js'; +-import { isIgnored, isBlocked, isSerialized, isAncestorRemoved, hasShadowRoot, inDom, getShadowHost, isSerializedIframe, isSerializedStylesheet } from '../utils.js'; ++import { ++ isShadowRoot, ++ isNativeShadowDom, ++ getInputType, ++ maskInputValue, ++ ignoreAttribute, ++ transformAttribute, ++ toLowerCase, ++ needMaskingText, ++ IGNORED_NODE, ++ serializeNodeWithId, ++} from "../../../rrweb-snapshot/es/rrweb-snapshot.js"; ++import { ++ isIgnored, ++ isBlocked, ++ isSerialized, ++ isAncestorRemoved, ++ hasShadowRoot, ++ inDom, ++ getShadowHost, ++ isSerializedIframe, ++ isSerializedStylesheet, ++} from "../utils.js"; + + function isNodeInLinkedList(n) { +- return '__ln' in n; ++ return "__ln" in n; + } + class DoubleLinkedList { +- constructor() { +- this.length = 0; +- this.head = null; ++ constructor() { ++ this.length = 0; ++ this.head = null; ++ this.tail = null; ++ } ++ get(position) { ++ if (position >= this.length) { ++ throw new Error("Position outside of list range"); ++ } ++ let current = this.head; ++ for (let index = 0; index < position; index++) { ++ current = ++ (current === null || current === void 0 ? void 0 : current.next) || ++ null; ++ } ++ return current; ++ } ++ addNode(n) { ++ const node = { ++ value: n, ++ previous: null, ++ next: null, ++ }; ++ n.__ln = node; ++ if (n.previousSibling && isNodeInLinkedList(n.previousSibling)) { ++ const current = n.previousSibling.__ln.next; ++ node.next = current; ++ node.previous = n.previousSibling.__ln; ++ n.previousSibling.__ln.next = node; ++ if (current) { ++ current.previous = node; ++ } ++ } else if ( ++ n.nextSibling && ++ isNodeInLinkedList(n.nextSibling) && ++ n.nextSibling.__ln.previous ++ ) { ++ const current = n.nextSibling.__ln.previous; ++ node.previous = current; ++ node.next = n.nextSibling.__ln; ++ n.nextSibling.__ln.previous = node; ++ if (current) { ++ current.next = node; ++ } ++ } else { ++ if (this.head) { ++ this.head.previous = node; ++ } ++ node.next = this.head; ++ this.head = node; ++ } ++ if (node.next === null) { ++ this.tail = node; ++ } ++ this.length++; ++ } ++ removeNode(n) { ++ const current = n.__ln; ++ if (!this.head) { ++ return; ++ } ++ if (!current.previous) { ++ this.head = current.next; ++ if (this.head) { ++ this.head.previous = null; ++ } else { + this.tail = null; ++ } ++ } else { ++ current.previous.next = current.next; ++ if (current.next) { ++ current.next.previous = current.previous; ++ } else { ++ this.tail = current.previous; ++ } + } +- get(position) { +- if (position >= this.length) { +- throw new Error('Position outside of list range'); ++ if (n.__ln) { ++ delete n.__ln; ++ } ++ this.length--; ++ } ++} ++const moveKey = (id, parentId) => `${id}@${parentId}`; ++class MutationBuffer { ++ constructor() { ++ this.frozen = false; ++ this.locked = false; ++ this.texts = []; ++ this.attributes = []; ++ this.removes = []; ++ this.mapRemoves = []; ++ this.movedMap = {}; ++ this.addedSet = new Set(); ++ this.movedSet = new Set(); ++ this.droppedSet = new Set(); ++ this.unattachedDoc = null; ++ this.processMutations = (mutations) => { ++ mutations.forEach(this.processMutation); ++ this.emit(); ++ }; ++ this.emit = () => { ++ if (this.frozen || this.locked) { ++ return; ++ } ++ const adds = []; ++ const addedIds = new Set(); ++ const addList = new DoubleLinkedList(); ++ const getNextId = (n) => { ++ let ns = n; ++ let nextId = IGNORED_NODE; ++ while (nextId === IGNORED_NODE) { ++ ns = ns && ns.nextSibling; ++ nextId = ns && this.mirror.getId(ns); + } +- let current = this.head; +- for (let index = 0; index < position; index++) { +- current = (current === null || current === void 0 ? void 0 : current.next) || null; ++ return nextId; ++ }; ++ const pushAdd = (n) => { ++ if (!n.parentNode || !inDom(n)) { ++ return; + } +- return current; +- } +- addNode(n) { +- const node = { +- value: n, +- previous: null, +- next: null, +- }; +- n.__ln = node; +- if (n.previousSibling && isNodeInLinkedList(n.previousSibling)) { +- const current = n.previousSibling.__ln.next; +- node.next = current; +- node.previous = n.previousSibling.__ln; +- n.previousSibling.__ln.next = node; +- if (current) { +- current.previous = node; +- } ++ const parentId = isShadowRoot(n.parentNode) ++ ? this.mirror.getId(getShadowHost(n)) ++ : this.mirror.getId(n.parentNode); ++ const nextId = getNextId(n); ++ if (parentId === -1 || nextId === -1) { ++ return addList.addNode(n); + } +- else if (n.nextSibling && +- isNodeInLinkedList(n.nextSibling) && +- n.nextSibling.__ln.previous) { +- const current = n.nextSibling.__ln.previous; +- node.previous = current; +- node.next = n.nextSibling.__ln; +- n.nextSibling.__ln.previous = node; +- if (current) { +- current.next = node; ++ const sn = serializeNodeWithId(n, { ++ doc: this.doc, ++ mirror: this.mirror, ++ blockClass: this.blockClass, ++ blockSelector: this.blockSelector, ++ maskTextClass: this.maskTextClass, ++ maskTextSelector: this.maskTextSelector, ++ skipChild: true, ++ newlyAddedElement: true, ++ inlineStylesheet: this.inlineStylesheet, ++ maskInputOptions: this.maskInputOptions, ++ maskTextFn: this.maskTextFn, ++ maskInputFn: this.maskInputFn, ++ slimDOMOptions: this.slimDOMOptions, ++ dataURLOptions: this.dataURLOptions, ++ recordCanvas: this.recordCanvas, ++ inlineImages: this.inlineImages, ++ onSerialize: (currentN) => { ++ if (isSerializedIframe(currentN, this.mirror)) { ++ this.iframeManager.addIframe(currentN); + } +- } +- else { +- if (this.head) { +- this.head.previous = node; ++ if (isSerializedStylesheet(currentN, this.mirror)) { ++ this.stylesheetManager.trackLinkElement(currentN); ++ } ++ if (hasShadowRoot(n)) { ++ this.shadowDomManager.addShadowRoot(n.shadowRoot, this.doc); + } +- node.next = this.head; +- this.head = node; ++ }, ++ onIframeLoad: (iframe, childSn) => { ++ this.iframeManager.attachIframe(iframe, childSn); ++ this.shadowDomManager.observeAttachShadow(iframe); ++ }, ++ onStylesheetLoad: (link, childSn) => { ++ this.stylesheetManager.attachLinkElement(link, childSn); ++ }, ++ }); ++ if (sn) { ++ adds.push({ ++ parentId, ++ nextId, ++ node: sn, ++ }); ++ addedIds.add(sn.id); + } +- if (node.next === null) { +- this.tail = node; ++ }; ++ while (this.mapRemoves.length) { ++ this.mirror.removeNodeFromMap(this.mapRemoves.shift()); ++ } ++ for (const n of this.movedSet) { ++ if ( ++ isParentRemoved(this.removes, n, this.mirror) && ++ !this.movedSet.has(n.parentNode) ++ ) { ++ continue; + } +- this.length++; +- } +- removeNode(n) { +- const current = n.__ln; +- if (!this.head) { +- return; ++ pushAdd(n); ++ } ++ for (const n of this.addedSet) { ++ if ( ++ !isAncestorInSet(this.droppedSet, n) && ++ !isParentRemoved(this.removes, n, this.mirror) ++ ) { ++ pushAdd(n); ++ } else if (isAncestorInSet(this.movedSet, n)) { ++ pushAdd(n); ++ } else { ++ this.droppedSet.add(n); + } +- if (!current.previous) { +- this.head = current.next; +- if (this.head) { +- this.head.previous = null; +- } +- else { +- this.tail = null; +- } ++ } ++ let candidate = null; ++ while (addList.length) { ++ let node = null; ++ if (candidate) { ++ const parentId = this.mirror.getId(candidate.value.parentNode); ++ const nextId = getNextId(candidate.value); ++ if (parentId !== -1 && nextId !== -1) { ++ node = candidate; ++ } + } +- else { +- current.previous.next = current.next; +- if (current.next) { +- current.next.previous = current.previous; +- } +- else { +- this.tail = current.previous; ++ if (!node) { ++ let tailNode = addList.tail; ++ while (tailNode) { ++ const _node = tailNode; ++ tailNode = tailNode.previous; ++ if (_node) { ++ const parentId = this.mirror.getId(_node.value.parentNode); ++ const nextId = getNextId(_node.value); ++ if (nextId === -1) continue; ++ else if (parentId !== -1) { ++ node = _node; ++ break; ++ } else { ++ const unhandledNode = _node.value; ++ if ( ++ unhandledNode.parentNode && ++ unhandledNode.parentNode.nodeType === ++ Node.DOCUMENT_FRAGMENT_NODE ++ ) { ++ const shadowHost = unhandledNode.parentNode.host; ++ const parentId = this.mirror.getId(shadowHost); ++ if (parentId !== -1) { ++ node = _node; ++ break; ++ } ++ } ++ } + } ++ } + } +- if (n.__ln) { +- delete n.__ln; ++ if (!node) { ++ while (addList.head) { ++ addList.removeNode(addList.head.value); ++ } ++ break; + } +- this.length--; +- } +-} +-const moveKey = (id, parentId) => `${id}@${parentId}`; +-class MutationBuffer { +- constructor() { +- this.frozen = false; +- this.locked = false; +- this.texts = []; +- this.attributes = []; +- this.removes = []; +- this.mapRemoves = []; +- this.movedMap = {}; +- this.addedSet = new Set(); +- this.movedSet = new Set(); +- this.droppedSet = new Set(); +- this.processMutations = (mutations) => { +- mutations.forEach(this.processMutation); +- this.emit(); +- }; +- this.emit = () => { +- if (this.frozen || this.locked) { +- return; +- } +- const adds = []; +- const addedIds = new Set(); +- const addList = new DoubleLinkedList(); +- const getNextId = (n) => { +- let ns = n; +- let nextId = IGNORED_NODE; +- while (nextId === IGNORED_NODE) { +- ns = ns && ns.nextSibling; +- nextId = ns && this.mirror.getId(ns); +- } +- return nextId; +- }; +- const pushAdd = (n) => { +- if (!n.parentNode || !inDom(n)) { +- return; +- } +- const parentId = isShadowRoot(n.parentNode) +- ? this.mirror.getId(getShadowHost(n)) +- : this.mirror.getId(n.parentNode); +- const nextId = getNextId(n); +- if (parentId === -1 || nextId === -1) { +- return addList.addNode(n); +- } +- const sn = serializeNodeWithId(n, { +- doc: this.doc, +- mirror: this.mirror, +- blockClass: this.blockClass, +- blockSelector: this.blockSelector, +- maskTextClass: this.maskTextClass, +- maskTextSelector: this.maskTextSelector, +- skipChild: true, +- newlyAddedElement: true, +- inlineStylesheet: this.inlineStylesheet, +- maskInputOptions: this.maskInputOptions, +- maskTextFn: this.maskTextFn, +- maskInputFn: this.maskInputFn, +- slimDOMOptions: this.slimDOMOptions, +- dataURLOptions: this.dataURLOptions, +- recordCanvas: this.recordCanvas, +- inlineImages: this.inlineImages, +- onSerialize: (currentN) => { +- if (isSerializedIframe(currentN, this.mirror)) { +- this.iframeManager.addIframe(currentN); +- } +- if (isSerializedStylesheet(currentN, this.mirror)) { +- this.stylesheetManager.trackLinkElement(currentN); +- } +- if (hasShadowRoot(n)) { +- this.shadowDomManager.addShadowRoot(n.shadowRoot, this.doc); +- } +- }, +- onIframeLoad: (iframe, childSn) => { +- this.iframeManager.attachIframe(iframe, childSn); +- this.shadowDomManager.observeAttachShadow(iframe); +- }, +- onStylesheetLoad: (link, childSn) => { +- this.stylesheetManager.attachLinkElement(link, childSn); +- }, +- }); +- if (sn) { +- adds.push({ +- parentId, +- nextId, +- node: sn, +- }); +- addedIds.add(sn.id); +- } +- }; +- while (this.mapRemoves.length) { +- this.mirror.removeNodeFromMap(this.mapRemoves.shift()); +- } +- for (const n of this.movedSet) { +- if (isParentRemoved(this.removes, n, this.mirror) && +- !this.movedSet.has(n.parentNode)) { +- continue; +- } +- pushAdd(n); +- } +- for (const n of this.addedSet) { +- if (!isAncestorInSet(this.droppedSet, n) && +- !isParentRemoved(this.removes, n, this.mirror)) { +- pushAdd(n); +- } +- else if (isAncestorInSet(this.movedSet, n)) { +- pushAdd(n); +- } +- else { +- this.droppedSet.add(n); +- } +- } +- let candidate = null; +- while (addList.length) { +- let node = null; +- if (candidate) { +- const parentId = this.mirror.getId(candidate.value.parentNode); +- const nextId = getNextId(candidate.value); +- if (parentId !== -1 && nextId !== -1) { +- node = candidate; +- } +- } +- if (!node) { +- let tailNode = addList.tail; +- while (tailNode) { +- const _node = tailNode; +- tailNode = tailNode.previous; +- if (_node) { +- const parentId = this.mirror.getId(_node.value.parentNode); +- const nextId = getNextId(_node.value); +- if (nextId === -1) +- continue; +- else if (parentId !== -1) { +- node = _node; +- break; +- } +- else { +- const unhandledNode = _node.value; +- if (unhandledNode.parentNode && +- unhandledNode.parentNode.nodeType === +- Node.DOCUMENT_FRAGMENT_NODE) { +- const shadowHost = unhandledNode.parentNode +- .host; +- const parentId = this.mirror.getId(shadowHost); +- if (parentId !== -1) { +- node = _node; +- break; +- } +- } +- } +- } +- } ++ candidate = node.previous; ++ addList.removeNode(node.value); ++ pushAdd(node.value); ++ } ++ const payload = { ++ texts: this.texts ++ .map((text) => ({ ++ id: this.mirror.getId(text.node), ++ value: text.value, ++ })) ++ .filter((text) => !addedIds.has(text.id)) ++ .filter((text) => this.mirror.has(text.id)), ++ attributes: this.attributes ++ .map((attribute) => { ++ const { attributes } = attribute; ++ if (typeof attributes.style === "string") { ++ const diffAsStr = JSON.stringify(attribute.styleDiff); ++ const unchangedAsStr = JSON.stringify(attribute._unchangedStyles); ++ if (diffAsStr.length < attributes.style.length) { ++ if ( ++ (diffAsStr + unchangedAsStr).split("var(").length === ++ attributes.style.split("var(").length ++ ) { ++ attributes.style = attribute.styleDiff; + } +- if (!node) { +- while (addList.head) { +- addList.removeNode(addList.head.value); +- } +- break; +- } +- candidate = node.previous; +- addList.removeNode(node.value); +- pushAdd(node.value); ++ } + } +- const payload = { +- texts: this.texts +- .map((text) => ({ +- id: this.mirror.getId(text.node), +- value: text.value, +- })) +- .filter((text) => !addedIds.has(text.id)) +- .filter((text) => this.mirror.has(text.id)), +- attributes: this.attributes +- .map((attribute) => { +- const { attributes } = attribute; +- if (typeof attributes.style === 'string') { +- const diffAsStr = JSON.stringify(attribute.styleDiff); +- const unchangedAsStr = JSON.stringify(attribute._unchangedStyles); +- if (diffAsStr.length < attributes.style.length) { +- if ((diffAsStr + unchangedAsStr).split('var(').length === +- attributes.style.split('var(').length) { +- attributes.style = attribute.styleDiff; +- } +- } +- } +- return { +- id: this.mirror.getId(attribute.node), +- attributes: attributes, +- }; +- }) +- .filter((attribute) => !addedIds.has(attribute.id)) +- .filter((attribute) => this.mirror.has(attribute.id)), +- removes: this.removes, +- adds, ++ return { ++ id: this.mirror.getId(attribute.node), ++ attributes: attributes, + }; +- if (!payload.texts.length && +- !payload.attributes.length && +- !payload.removes.length && +- !payload.adds.length) { +- return; +- } +- this.texts = []; +- this.attributes = []; +- this.removes = []; +- this.addedSet = new Set(); +- this.movedSet = new Set(); +- this.droppedSet = new Set(); +- this.movedMap = {}; +- this.mutationCb(payload); +- }; +- this.processMutation = (m) => { +- if (isIgnored(m.target, this.mirror)) { +- return; +- } +- let unattachedDoc; +- try { +- unattachedDoc = document.implementation.createHTMLDocument(); +- } +- catch (e) { +- unattachedDoc = this.doc; +- } +- switch (m.type) { +- case 'characterData': { +- const value = m.target.textContent; +- if (!isBlocked(m.target, this.blockClass, this.blockSelector, false) && +- value !== m.oldValue) { +- this.texts.push({ +- value: needMaskingText(m.target, this.maskTextClass, this.maskTextSelector) && value +- ? this.maskTextFn +- ? this.maskTextFn(value) +- : value.replace(/[\S]/g, '*') +- : value, +- node: m.target, +- }); +- } +- break; +- } +- case 'attributes': { +- const target = m.target; +- let attributeName = m.attributeName; +- let value = m.target.getAttribute(attributeName); +- if (attributeName === 'value') { +- const type = getInputType(target); +- value = maskInputValue({ +- element: target, +- maskInputOptions: this.maskInputOptions, +- tagName: target.tagName, +- type, +- value, +- maskInputFn: this.maskInputFn, +- }); +- } +- if (isBlocked(m.target, this.blockClass, this.blockSelector, false) || +- value === m.oldValue) { +- return; +- } +- let item = this.attributes.find((a) => a.node === m.target); +- if (target.tagName === 'IFRAME' && +- attributeName === 'src' && +- !this.keepIframeSrcFn(value)) { +- if (!target.contentDocument) { +- attributeName = 'rr_src'; +- } +- else { +- return; +- } +- } +- if (!item) { +- item = { +- node: m.target, +- attributes: {}, +- styleDiff: {}, +- _unchangedStyles: {}, +- }; +- this.attributes.push(item); +- } +- if (attributeName === 'type' && +- target.tagName === 'INPUT' && +- (m.oldValue || '').toLowerCase() === 'password') { +- target.setAttribute('data-rr-is-password', 'true'); +- } +- if (!ignoreAttribute(target.tagName, attributeName)) { +- item.attributes[attributeName] = transformAttribute(this.doc, toLowerCase(target.tagName), toLowerCase(attributeName), value); +- if (attributeName === 'style') { +- const old = unattachedDoc.createElement('span'); +- if (m.oldValue) { +- old.setAttribute('style', m.oldValue); +- } +- for (const pname of Array.from(target.style)) { +- const newValue = target.style.getPropertyValue(pname); +- const newPriority = target.style.getPropertyPriority(pname); +- if (newValue !== old.style.getPropertyValue(pname) || +- newPriority !== old.style.getPropertyPriority(pname)) { +- if (newPriority === '') { +- item.styleDiff[pname] = newValue; +- } +- else { +- item.styleDiff[pname] = [newValue, newPriority]; +- } +- } +- else { +- item._unchangedStyles[pname] = [newValue, newPriority]; +- } +- } +- for (const pname of Array.from(old.style)) { +- if (target.style.getPropertyValue(pname) === '') { +- item.styleDiff[pname] = false; +- } +- } +- } +- } +- break; +- } +- case 'childList': { +- if (isBlocked(m.target, this.blockClass, this.blockSelector, true)) +- return; +- m.addedNodes.forEach((n) => this.genAdds(n, m.target)); +- m.removedNodes.forEach((n) => { +- const nodeId = this.mirror.getId(n); +- const parentId = isShadowRoot(m.target) +- ? this.mirror.getId(m.target.host) +- : this.mirror.getId(m.target); +- if (isBlocked(m.target, this.blockClass, this.blockSelector, false) || +- isIgnored(n, this.mirror) || +- !isSerialized(n, this.mirror)) { +- return; +- } +- if (this.addedSet.has(n)) { +- deepDelete(this.addedSet, n); +- this.droppedSet.add(n); +- } +- else if (this.addedSet.has(m.target) && nodeId === -1) ; +- else if (isAncestorRemoved(m.target, this.mirror)) ; +- else if (this.movedSet.has(n) && +- this.movedMap[moveKey(nodeId, parentId)]) { +- deepDelete(this.movedSet, n); +- } +- else { +- this.removes.push({ +- parentId, +- id: nodeId, +- isShadow: isShadowRoot(m.target) && isNativeShadowDom(m.target) +- ? true +- : undefined, +- }); +- } +- this.mapRemoves.push(n); +- }); +- break; +- } ++ }) ++ .filter((attribute) => !addedIds.has(attribute.id)) ++ .filter((attribute) => this.mirror.has(attribute.id)), ++ removes: this.removes, ++ adds, ++ }; ++ if ( ++ !payload.texts.length && ++ !payload.attributes.length && ++ !payload.removes.length && ++ !payload.adds.length ++ ) { ++ return; ++ } ++ this.texts = []; ++ this.attributes = []; ++ this.removes = []; ++ this.addedSet = new Set(); ++ this.movedSet = new Set(); ++ this.droppedSet = new Set(); ++ this.movedMap = {}; ++ this.mutationCb(payload); ++ }; ++ this.processMutation = (m) => { ++ if (isIgnored(m.target, this.mirror)) { ++ return; ++ } ++ switch (m.type) { ++ case "characterData": { ++ const value = m.target.textContent; ++ if ( ++ !isBlocked(m.target, this.blockClass, this.blockSelector, false) && ++ value !== m.oldValue ++ ) { ++ this.texts.push({ ++ value: ++ needMaskingText( ++ m.target, ++ this.maskTextClass, ++ this.maskTextSelector ++ ) && value ++ ? this.maskTextFn ++ ? this.maskTextFn(value) ++ : value.replace(/[\S]/g, "*") ++ : value, ++ node: m.target, ++ }); ++ } ++ break; ++ } ++ case "attributes": { ++ const target = m.target; ++ let attributeName = m.attributeName; ++ let value = m.target.getAttribute(attributeName); ++ if (attributeName === "value") { ++ const type = getInputType(target); ++ value = maskInputValue({ ++ element: target, ++ maskInputOptions: this.maskInputOptions, ++ tagName: target.tagName, ++ type, ++ value, ++ maskInputFn: this.maskInputFn, ++ }); ++ } ++ if ( ++ isBlocked(m.target, this.blockClass, this.blockSelector, false) || ++ value === m.oldValue ++ ) { ++ return; ++ } ++ let item = this.attributes.find((a) => a.node === m.target); ++ if ( ++ target.tagName === "IFRAME" && ++ attributeName === "src" && ++ !this.keepIframeSrcFn(value) ++ ) { ++ if (!target.contentDocument) { ++ attributeName = "rr_src"; ++ } else { ++ return; + } +- }; +- this.genAdds = (n, target) => { +- if (this.processedNodeManager.inOtherBuffer(n, this)) +- return; +- if (this.addedSet.has(n) || this.movedSet.has(n)) +- return; +- if (this.mirror.hasNode(n)) { +- if (isIgnored(n, this.mirror)) { +- return; ++ } ++ if (!item) { ++ item = { ++ node: m.target, ++ attributes: {}, ++ styleDiff: {}, ++ _unchangedStyles: {}, ++ }; ++ this.attributes.push(item); ++ } ++ if ( ++ attributeName === "type" && ++ target.tagName === "INPUT" && ++ (m.oldValue || "").toLowerCase() === "password" ++ ) { ++ target.setAttribute("data-rr-is-password", "true"); ++ } ++ if (!ignoreAttribute(target.tagName, attributeName)) { ++ item.attributes[attributeName] = transformAttribute( ++ this.doc, ++ toLowerCase(target.tagName), ++ toLowerCase(attributeName), ++ value ++ ); ++ if (attributeName === "style") { ++ if (!this.unattachedDoc) { ++ try { ++ // avoid upsetting original document from a Content Security point of view ++ this.unattachedDoc = ++ document.implementation.createHTMLDocument(); ++ } catch (e) { ++ // fallback to more direct method ++ this.unattachedDoc = this.doc; + } +- this.movedSet.add(n); +- let targetId = null; +- if (target && this.mirror.hasNode(target)) { +- targetId = this.mirror.getId(target); ++ } ++ const old = this.unattachedDoc.createElement("span"); ++ if (m.oldValue) { ++ old.setAttribute("style", m.oldValue); ++ } ++ for (const pname of Array.from(target.style)) { ++ const newValue = target.style.getPropertyValue(pname); ++ const newPriority = target.style.getPropertyPriority(pname); ++ if ( ++ newValue !== old.style.getPropertyValue(pname) || ++ newPriority !== old.style.getPropertyPriority(pname) ++ ) { ++ if (newPriority === "") { ++ item.styleDiff[pname] = newValue; ++ } else { ++ item.styleDiff[pname] = [newValue, newPriority]; ++ } ++ } else { ++ item._unchangedStyles[pname] = [newValue, newPriority]; + } +- if (targetId && targetId !== -1) { +- this.movedMap[moveKey(this.mirror.getId(n), targetId)] = true; ++ } ++ for (const pname of Array.from(old.style)) { ++ if (target.style.getPropertyValue(pname) === "") { ++ item.styleDiff[pname] = false; + } ++ } + } +- else { +- this.addedSet.add(n); +- this.droppedSet.delete(n); ++ } ++ break; ++ } ++ case "childList": { ++ if (isBlocked(m.target, this.blockClass, this.blockSelector, true)) ++ return; ++ m.addedNodes.forEach((n) => this.genAdds(n, m.target)); ++ m.removedNodes.forEach((n) => { ++ const nodeId = this.mirror.getId(n); ++ const parentId = isShadowRoot(m.target) ++ ? this.mirror.getId(m.target.host) ++ : this.mirror.getId(m.target); ++ if ( ++ isBlocked(m.target, this.blockClass, this.blockSelector, false) || ++ isIgnored(n, this.mirror) || ++ !isSerialized(n, this.mirror) ++ ) { ++ return; + } +- if (!isBlocked(n, this.blockClass, this.blockSelector, false)) { +- n.childNodes.forEach((childN) => this.genAdds(childN)); +- if (hasShadowRoot(n)) { +- n.shadowRoot.childNodes.forEach((childN) => { +- this.processedNodeManager.add(childN, this); +- this.genAdds(childN, n); +- }); +- } ++ if (this.addedSet.has(n)) { ++ deepDelete(this.addedSet, n); ++ this.droppedSet.add(n); ++ } else if (this.addedSet.has(m.target) && nodeId === -1); ++ else if (isAncestorRemoved(m.target, this.mirror)); ++ else if ( ++ this.movedSet.has(n) && ++ this.movedMap[moveKey(nodeId, parentId)] ++ ) { ++ deepDelete(this.movedSet, n); ++ } else { ++ this.removes.push({ ++ parentId, ++ id: nodeId, ++ isShadow: ++ isShadowRoot(m.target) && isNativeShadowDom(m.target) ++ ? true ++ : undefined, ++ }); + } +- }; +- } +- init(options) { +- [ +- 'mutationCb', +- 'blockClass', +- 'blockSelector', +- 'maskTextClass', +- 'maskTextSelector', +- 'inlineStylesheet', +- 'maskInputOptions', +- 'maskTextFn', +- 'maskInputFn', +- 'keepIframeSrcFn', +- 'recordCanvas', +- 'inlineImages', +- 'slimDOMOptions', +- 'dataURLOptions', +- 'doc', +- 'mirror', +- 'iframeManager', +- 'stylesheetManager', +- 'shadowDomManager', +- 'canvasManager', +- 'processedNodeManager', +- ].forEach((key) => { +- this[key] = options[key]; +- }); +- } +- freeze() { +- this.frozen = true; +- this.canvasManager.freeze(); +- } +- unfreeze() { +- this.frozen = false; +- this.canvasManager.unfreeze(); +- this.emit(); +- } +- isFrozen() { +- return this.frozen; +- } +- lock() { +- this.locked = true; +- this.canvasManager.lock(); +- } +- unlock() { +- this.locked = false; +- this.canvasManager.unlock(); +- this.emit(); +- } +- reset() { +- this.shadowDomManager.reset(); +- this.canvasManager.reset(); +- } ++ this.mapRemoves.push(n); ++ }); ++ break; ++ } ++ } ++ }; ++ this.genAdds = (n, target) => { ++ if (this.processedNodeManager.inOtherBuffer(n, this)) return; ++ if (this.addedSet.has(n) || this.movedSet.has(n)) return; ++ if (this.mirror.hasNode(n)) { ++ if (isIgnored(n, this.mirror)) { ++ return; ++ } ++ this.movedSet.add(n); ++ let targetId = null; ++ if (target && this.mirror.hasNode(target)) { ++ targetId = this.mirror.getId(target); ++ } ++ if (targetId && targetId !== -1) { ++ this.movedMap[moveKey(this.mirror.getId(n), targetId)] = true; ++ } ++ } else { ++ this.addedSet.add(n); ++ this.droppedSet.delete(n); ++ } ++ if (!isBlocked(n, this.blockClass, this.blockSelector, false)) { ++ n.childNodes.forEach((childN) => this.genAdds(childN)); ++ if (hasShadowRoot(n)) { ++ n.shadowRoot.childNodes.forEach((childN) => { ++ this.processedNodeManager.add(childN, this); ++ this.genAdds(childN, n); ++ }); ++ } ++ } ++ }; ++ } ++ init(options) { ++ [ ++ "mutationCb", ++ "blockClass", ++ "blockSelector", ++ "maskTextClass", ++ "maskTextSelector", ++ "inlineStylesheet", ++ "maskInputOptions", ++ "maskTextFn", ++ "maskInputFn", ++ "keepIframeSrcFn", ++ "recordCanvas", ++ "inlineImages", ++ "slimDOMOptions", ++ "dataURLOptions", ++ "doc", ++ "mirror", ++ "iframeManager", ++ "stylesheetManager", ++ "shadowDomManager", ++ "canvasManager", ++ "processedNodeManager", ++ ].forEach((key) => { ++ this[key] = options[key]; ++ }); ++ } ++ freeze() { ++ this.frozen = true; ++ this.canvasManager.freeze(); ++ } ++ unfreeze() { ++ this.frozen = false; ++ this.canvasManager.unfreeze(); ++ this.emit(); ++ } ++ isFrozen() { ++ return this.frozen; ++ } ++ lock() { ++ this.locked = true; ++ this.canvasManager.lock(); ++ } ++ unlock() { ++ this.locked = false; ++ this.canvasManager.unlock(); ++ this.emit(); ++ } ++ reset() { ++ this.shadowDomManager.reset(); ++ this.canvasManager.reset(); ++ } + } + function deepDelete(addsSet, n) { +- addsSet.delete(n); +- n.childNodes.forEach((childN) => deepDelete(addsSet, childN)); ++ addsSet.delete(n); ++ n.childNodes.forEach((childN) => deepDelete(addsSet, childN)); + } + function isParentRemoved(removes, n, mirror) { +- if (removes.length === 0) +- return false; +- return _isParentRemoved(removes, n, mirror); ++ if (removes.length === 0) return false; ++ return _isParentRemoved(removes, n, mirror); + } + function _isParentRemoved(removes, n, mirror) { +- const { parentNode } = n; +- if (!parentNode) { +- return false; +- } +- const parentId = mirror.getId(parentNode); +- if (removes.some((r) => r.id === parentId)) { +- return true; +- } +- return _isParentRemoved(removes, parentNode, mirror); ++ const { parentNode } = n; ++ if (!parentNode) { ++ return false; ++ } ++ const parentId = mirror.getId(parentNode); ++ if (removes.some((r) => r.id === parentId)) { ++ return true; ++ } ++ return _isParentRemoved(removes, parentNode, mirror); + } + function isAncestorInSet(set, n) { +- if (set.size === 0) +- return false; +- return _isAncestorInSet(set, n); ++ if (set.size === 0) return false; ++ return _isAncestorInSet(set, n); + } + function _isAncestorInSet(set, n) { +- const { parentNode } = n; +- if (!parentNode) { +- return false; +- } +- if (set.has(parentNode)) { +- return true; +- } +- return _isAncestorInSet(set, parentNode); ++ const { parentNode } = n; ++ if (!parentNode) { ++ return false; ++ } ++ if (set.has(parentNode)) { ++ return true; ++ } ++ return _isAncestorInSet(set, parentNode); + } + + export { MutationBuffer as default }; diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index b786c5e76..feb354a75 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -4,6 +4,11 @@ settings: autoInstallPeers: true excludeLinksFromLockfile: false +patchedDependencies: + rrweb@2.0.0-alpha.11: + hash: ehkxvj2dnc4d5fb4tq7odeskvu + path: patches/rrweb@2.0.0-alpha.11.patch + dependencies: fflate: specifier: ^0.4.8 @@ -159,7 +164,7 @@ devDependencies: version: 5.9.0(rollup@2.79.1) rrweb: specifier: 2.0.0-alpha.11 - version: 2.0.0-alpha.11 + version: 2.0.0-alpha.11(patch_hash=ehkxvj2dnc4d5fb4tq7odeskvu) rrweb-snapshot: specifier: 2.0.0-alpha.11 version: 2.0.0-alpha.11 @@ -9073,7 +9078,7 @@ packages: rrweb-snapshot: 1.1.14 dev: true - /rrweb@2.0.0-alpha.11: + /rrweb@2.0.0-alpha.11(patch_hash=ehkxvj2dnc4d5fb4tq7odeskvu): resolution: {integrity: sha512-vJ2gNvF+pUG9C2aaau7iSNqhWBSc4BwtUO4FpegOtDObuH4PIaxNJOlgHz82+WxKr9XPm93ER0LqmNpy0KYdKg==} dependencies: '@rrweb/types': 2.0.0-alpha.11 @@ -9085,6 +9090,7 @@ packages: rrdom: 2.0.0-alpha.11 rrweb-snapshot: 2.0.0-alpha.11 dev: true + patched: true /rsvp@4.8.5: resolution: {integrity: sha512-nfMOlASu9OnRJo1mbEk2cz0D56a1MBNrJ7orjRZQG10XDyuvwksKbuXNp6qa+kbn839HwjwhBzhFmdsaEAfauA==}