npm - @openreplay/tracker - Versions diffs - 5.0.2-beta → 5.0.2 - Mend

@openreplay/tracker 5.0.2-beta → 5.0.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (135) hide show

package/cjs/app/guards.d.ts +21 -0
package/cjs/app/guards.js +37 -0
package/cjs/app/index.d.ts +118 -0
package/cjs/app/index.js +438 -0
package/cjs/app/logger.d.ts +26 -0
package/cjs/app/logger.js +45 -0
package/cjs/app/messages.gen.d.ts +63 -0
package/cjs/app/messages.gen.js +551 -0
package/cjs/app/nodes.d.ts +18 -0
package/cjs/app/nodes.js +82 -0
package/cjs/app/observer/iframe_observer.d.ts +4 -0
package/cjs/app/observer/iframe_observer.js +23 -0
package/cjs/app/observer/iframe_offsets.d.ts +8 -0
package/cjs/app/observer/iframe_offsets.js +59 -0
package/cjs/app/observer/observer.d.ts +23 -0
package/cjs/app/observer/observer.js +340 -0
package/cjs/app/observer/shadow_root_observer.d.ts +4 -0
package/cjs/app/observer/shadow_root_observer.js +21 -0
package/cjs/app/observer/top_observer.d.ts +24 -0
package/cjs/app/observer/top_observer.js +113 -0
package/cjs/app/sanitizer.d.ts +24 -0
package/cjs/app/sanitizer.js +76 -0
package/cjs/app/session.d.ts +38 -0
package/cjs/app/session.js +114 -0
package/cjs/app/ticker.d.ts +12 -0
package/cjs/app/ticker.js +42 -0
package/cjs/common/interaction.d.ts +24 -0
package/cjs/common/interaction.js +2 -0
package/cjs/common/messages.gen.d.ts +427 -0
package/cjs/common/messages.gen.js +4 -0
package/cjs/index.d.ts +47 -0
package/cjs/index.js +254 -0
package/cjs/modules/connection.d.ts +2 -0
package/cjs/modules/connection.js +15 -0
package/cjs/modules/console.d.ts +6 -0
package/cjs/modules/console.js +119 -0
package/cjs/modules/constructedStyleSheets.d.ts +4 -0
package/cjs/modules/constructedStyleSheets.js +131 -0
package/cjs/modules/cssrules.d.ts +2 -0
package/cjs/modules/cssrules.js +99 -0
package/cjs/modules/exception.d.ts +16 -0
package/cjs/modules/exception.js +77 -0
package/cjs/modules/focus.d.ts +2 -0
package/cjs/modules/focus.js +45 -0
package/cjs/modules/fonts.d.ts +2 -0
package/cjs/modules/fonts.js +57 -0
package/cjs/modules/img.d.ts +2 -0
package/cjs/modules/img.js +110 -0
package/cjs/modules/input.d.ts +16 -0
package/cjs/modules/input.js +163 -0
package/cjs/modules/mouse.d.ts +2 -0
package/cjs/modules/mouse.js +148 -0
package/cjs/modules/network.d.ts +28 -0
package/cjs/modules/network.js +203 -0
package/cjs/modules/performance.d.ts +7 -0
package/cjs/modules/performance.js +53 -0
package/cjs/modules/scroll.d.ts +2 -0
package/cjs/modules/scroll.js +79 -0
package/cjs/modules/timing.d.ts +7 -0
package/cjs/modules/timing.js +160 -0
package/cjs/modules/viewport.d.ts +2 -0
package/cjs/modules/viewport.js +43 -0
package/cjs/package.json +1 -0
package/cjs/utils.d.ts +13 -0
package/cjs/utils.js +71 -0
package/cjs/vendors/finder/finder.d.ts +12 -0
package/cjs/vendors/finder/finder.js +352 -0
package/lib/app/guards.d.ts +21 -0
package/lib/app/guards.js +26 -0
package/lib/app/index.d.ts +118 -0
package/lib/app/index.js +434 -0
package/lib/app/logger.d.ts +26 -0
package/lib/app/logger.js +41 -0
package/lib/app/messages.gen.d.ts +63 -0
package/lib/app/messages.gen.js +486 -0
package/lib/app/nodes.d.ts +18 -0
package/lib/app/nodes.js +79 -0
package/lib/app/observer/iframe_observer.d.ts +4 -0
package/lib/app/observer/iframe_observer.js +20 -0
package/lib/app/observer/iframe_offsets.d.ts +8 -0
package/lib/app/observer/iframe_offsets.js +56 -0
package/lib/app/observer/observer.d.ts +23 -0
package/lib/app/observer/observer.js +337 -0
package/lib/app/observer/shadow_root_observer.d.ts +4 -0
package/lib/app/observer/shadow_root_observer.js +18 -0
package/lib/app/observer/top_observer.d.ts +24 -0
package/lib/app/observer/top_observer.js +110 -0
package/lib/app/sanitizer.d.ts +24 -0
package/lib/app/sanitizer.js +72 -0
package/lib/app/session.d.ts +38 -0
package/lib/app/session.js +111 -0
package/lib/app/ticker.d.ts +12 -0
package/lib/app/ticker.js +39 -0
package/lib/common/interaction.d.ts +24 -0
package/lib/common/interaction.js +1 -0
package/lib/common/messages.gen.d.ts +427 -0
package/lib/common/messages.gen.js +3 -0
package/lib/common/tsconfig.tsbuildinfo +1 -0
package/lib/index.d.ts +47 -0
package/lib/index.js +248 -0
package/lib/modules/connection.d.ts +2 -0
package/lib/modules/connection.js +12 -0
package/lib/modules/console.d.ts +6 -0
package/lib/modules/console.js +116 -0
package/lib/modules/constructedStyleSheets.d.ts +4 -0
package/lib/modules/constructedStyleSheets.js +126 -0
package/lib/modules/cssrules.d.ts +2 -0
package/lib/modules/cssrules.js +97 -0
package/lib/modules/exception.d.ts +16 -0
package/lib/modules/exception.js +71 -0
package/lib/modules/focus.d.ts +2 -0
package/lib/modules/focus.js +42 -0
package/lib/modules/fonts.d.ts +2 -0
package/lib/modules/fonts.js +54 -0
package/lib/modules/img.d.ts +2 -0
package/lib/modules/img.js +107 -0
package/lib/modules/input.d.ts +16 -0
package/lib/modules/input.js +158 -0
package/lib/modules/mouse.d.ts +2 -0
package/lib/modules/mouse.js +145 -0
package/lib/modules/network.d.ts +28 -0
package/lib/modules/network.js +200 -0
package/lib/modules/performance.d.ts +7 -0
package/lib/modules/performance.js +49 -0
package/lib/modules/scroll.d.ts +2 -0
package/lib/modules/scroll.js +76 -0
package/lib/modules/timing.d.ts +7 -0
package/lib/modules/timing.js +157 -0
package/lib/modules/viewport.d.ts +2 -0
package/lib/modules/viewport.js +40 -0
package/lib/utils.d.ts +13 -0
package/lib/utils.js +61 -0
package/lib/vendors/finder/finder.d.ts +12 -0
package/lib/vendors/finder/finder.js +348 -0
package/package.json +1 -1

package/cjs/app/nodes.js ADDED Viewed

@@ -0,0 +1,82 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+class Nodes {
+    constructor(node_id) {
+        this.node_id = node_id;
+        this.nodes = [];
+        this.nodeCallbacks = [];
+        this.elementListeners = new Map();
+    }
+    // Attached once per Tracker instance
+    attachNodeCallback(nodeCallback) {
+        this.nodeCallbacks.push(nodeCallback);
+    }
+    attachNodeListener(node, type, listener, useCapture = true) {
+        const id = this.getID(node);
+        if (id === undefined) {
+            return;
+        }
+        node.addEventListener(type, listener, useCapture);
+        let listeners = this.elementListeners.get(id);
+        if (listeners === undefined) {
+            listeners = [];
+            this.elementListeners.set(id, listeners);
+        }
+        listeners.push([type, listener, useCapture]);
+    }
+    registerNode(node) {
+        let id = node[this.node_id];
+        const isNew = id === undefined;
+        if (isNew) {
+            id = this.nodes.length;
+            this.nodes[id] = node;
+            node[this.node_id] = id;
+        }
+        return [id, isNew];
+    }
+    unregisterNode(node) {
+        const id = node[this.node_id];
+        if (id !== undefined) {
+            delete node[this.node_id];
+            delete this.nodes[id];
+            const listeners = this.elementListeners.get(id);
+            if (listeners !== undefined) {
+                this.elementListeners.delete(id);
+                listeners.forEach((listener) => node.removeEventListener(listener[0], listener[1], listener[2]));
+            }
+        }
+        return id;
+    }
+    cleanTree() {
+        // sadly we keep empty items in array here resulting in some memory still being used
+        // but its still better than keeping dead nodes or undef elements
+        // plus we keep our index positions for new/alive nodes
+        // performance test: 3ms for 30k nodes with 17k dead ones
+        for (let i = 0; i < this.nodes.length; i++) {
+            const node = this.nodes[i];
+            if (node && !document.contains(node)) {
+                this.unregisterNode(node);
+            }
+        }
+    }
+    callNodeCallbacks(node, isStart) {
+        this.nodeCallbacks.forEach((cb) => cb(node, isStart));
+    }
+    getID(node) {
+        return node[this.node_id];
+    }
+    getNode(id) {
+        return this.nodes[id];
+    }
+    clear() {
+        for (let id = 0; id < this.nodes.length; id++) {
+            const node = this.nodes[id];
+            if (node === undefined) {
+                continue;
+            }
+            this.unregisterNode(node);
+        }
+        this.nodes.length = 0;
+    }
+}
+exports.default = Nodes;

package/cjs/app/observer/iframe_observer.d.ts ADDED Viewed

@@ -0,0 +1,4 @@
+import Observer from './observer.js';
+export default class IFrameObserver extends Observer {
+    observe(iframe: HTMLIFrameElement): void;
+}

package/cjs/app/observer/iframe_observer.js ADDED Viewed

@@ -0,0 +1,23 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const observer_js_1 = require("./observer.js");
+const messages_gen_js_1 = require("../messages.gen.js");
+class IFrameObserver extends observer_js_1.default {
+    observe(iframe) {
+        const doc = iframe.contentDocument;
+        const hostID = this.app.nodes.getID(iframe);
+        if (!doc || hostID === undefined) {
+            return;
+        } //log TODO common app.logger
+        // Have to observe document, because the inner <html> might be changed
+        this.observeRoot(doc, (docID) => {
+            //MBTODO: do not send if empty (send on load? it might be in-place iframe, like our replayer, which does not get loaded)
+            if (docID === undefined) {
+                console.log('OpenReplay: Iframe document not bound');
+                return;
+            }
+            this.app.send((0, messages_gen_js_1.CreateIFrameDocument)(hostID, docID));
+        });
+    }
+}
+exports.default = IFrameObserver;

package/cjs/app/observer/iframe_offsets.d.ts ADDED Viewed

@@ -0,0 +1,8 @@
+export type Offset = [/*left:*/ number, /*top: */ number];
+export default class IFrameOffsets {
+    private readonly states;
+    private calcOffset;
+    getDocumentOffset(doc: Document): Offset;
+    observe(iFrame: HTMLIFrameElement): void;
+    clear(): void;
+}

package/cjs/app/observer/iframe_offsets.js ADDED Viewed

@@ -0,0 +1,59 @@
+"use strict";
+// Le truc - for defining an absolute offset for (nested) iframe documents. (To track mouse movments)
+Object.defineProperty(exports, "__esModule", { value: true });
+class IFrameOffsets {
+    constructor() {
+        this.states = new Map();
+    }
+    calcOffset(state) {
+        let parLeft = 0, parTop = 0;
+        if (state.parent) {
+            ;
+            [parLeft, parTop] = this.calcOffset(state.parent);
+        }
+        if (!state.offset) {
+            const { left, top } = state.iFrame.getBoundingClientRect();
+            state.offset = [left, top];
+        }
+        const [left, top] = state.offset;
+        return [parLeft + left, parTop + top]; // TODO: store absolute sum, invalidate whole subtree. Otherwise it is summated on each mousemove
+    }
+    getDocumentOffset(doc) {
+        const state = this.states.get(doc);
+        if (!state) {
+            return [0, 0];
+        } // topmost doc
+        return this.calcOffset(state);
+    }
+    observe(iFrame) {
+        var _a;
+        const doc = iFrame.contentDocument;
+        if (!doc) {
+            return;
+        }
+        const parentDoc = iFrame.ownerDocument;
+        const parentState = this.states.get(parentDoc);
+        const state = {
+            offset: null,
+            iFrame,
+            parent: parentState || null,
+            clear: () => {
+                var _a;
+                parentDoc.removeEventListener('scroll', invalidateOffset);
+                (_a = parentDoc.defaultView) === null || _a === void 0 ? void 0 : _a.removeEventListener('resize', invalidateOffset);
+            },
+        };
+        const invalidateOffset = () => {
+            state.offset = null;
+        };
+        // anything more reliable? This does not cover all cases (layout changes are ignored, for ex.)
+        parentDoc.addEventListener('scroll', invalidateOffset);
+        (_a = parentDoc.defaultView) === null || _a === void 0 ? void 0 : _a.addEventListener('resize', invalidateOffset);
+        this.states.set(doc, state);
+    }
+    clear() {
+        this.states.forEach((s) => s.clear());
+        this.states.clear();
+    }
+}
+exports.default = IFrameOffsets;

package/cjs/app/observer/observer.d.ts ADDED Viewed

@@ -0,0 +1,23 @@
+import App from '../index.js';
+export default abstract class Observer {
+    protected readonly app: App;
+    protected readonly isTopContext: boolean;
+    private readonly observer;
+    private readonly commited;
+    private readonly recents;
+    private readonly indexes;
+    private readonly attributesMap;
+    private readonly textSet;
+    constructor(app: App, isTopContext?: boolean);
+    private clear;
+    private sendNodeAttribute;
+    private sendNodeData;
+    private bindNode;
+    private bindTree;
+    private unbindTree;
+    private _commitNode;
+    private commitNode;
+    private commitNodes;
+    protected observeRoot(node: Node, beforeCommit: (id?: number) => unknown, nodeToBind?: Node): void;
+    disconnect(): void;
+}

package/cjs/app/observer/observer.js ADDED Viewed

@@ -0,0 +1,340 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const messages_gen_js_1 = require("../messages.gen.js");
+const guards_js_1 = require("../guards.js");
+function isIgnored(node) {
+    if ((0, guards_js_1.isCommentNode)(node)) {
+        return true;
+    }
+    if ((0, guards_js_1.isTextNode)(node)) {
+        return false;
+    }
+    if (!(0, guards_js_1.isElementNode)(node)) {
+        return true;
+    }
+    const tag = node.tagName.toUpperCase();
+    if (tag === 'LINK') {
+        const rel = node.getAttribute('rel');
+        const as = node.getAttribute('as');
+        return !((rel === null || rel === void 0 ? void 0 : rel.includes('stylesheet')) || as === 'style' || as === 'font');
+    }
+    return (tag === 'SCRIPT' || tag === 'NOSCRIPT' || tag === 'META' || tag === 'TITLE' || tag === 'BASE');
+}
+function isObservable(node) {
+    if ((0, guards_js_1.isRootNode)(node)) {
+        return true;
+    }
+    return !isIgnored(node);
+}
+/*
+  TODO:
+    - fix unbinding logic + send all removals first (ensure sequence is correct)
+    - use document as a 0-node in the upper context (should be updated in player at first)
+*/
+var RecentsType;
+(function (RecentsType) {
+    RecentsType[RecentsType["New"] = 0] = "New";
+    RecentsType[RecentsType["Removed"] = 1] = "Removed";
+    RecentsType[RecentsType["Changed"] = 2] = "Changed";
+})(RecentsType || (RecentsType = {}));
+class Observer {
+    constructor(app, isTopContext = false) {
+        this.app = app;
+        this.isTopContext = isTopContext;
+        this.commited = [];
+        this.recents = new Map();
+        this.indexes = [];
+        this.attributesMap = new Map();
+        this.textSet = new Set();
+        this.observer = new MutationObserver(this.app.safe((mutations) => {
+            for (const mutation of mutations) {
+                // mutations order is sequential
+                const target = mutation.target;
+                const type = mutation.type;
+                if (!isObservable(target)) {
+                    continue;
+                }
+                if (type === 'childList') {
+                    for (let i = 0; i < mutation.removedNodes.length; i++) {
+                        // Should be the same as bindTree(mutation.removedNodes[i]), but logic needs to be be untied
+                        if (isObservable(mutation.removedNodes[i])) {
+                            this.bindNode(mutation.removedNodes[i]);
+                        }
+                    }
+                    for (let i = 0; i < mutation.addedNodes.length; i++) {
+                        this.bindTree(mutation.addedNodes[i]);
+                    }
+                    continue;
+                }
+                const id = this.app.nodes.getID(target);
+                if (id === undefined) {
+                    continue;
+                }
+                if (!this.recents.has(id)) {
+                    this.recents.set(id, RecentsType.Changed); // TODO only when altered
+                }
+                if (type === 'attributes') {
+                    const name = mutation.attributeName;
+                    if (name === null) {
+                        continue;
+                    }
+                    let attr = this.attributesMap.get(id);
+                    if (attr === undefined) {
+                        this.attributesMap.set(id, (attr = new Set()));
+                    }
+                    attr.add(name);
+                    continue;
+                }
+                if (type === 'characterData') {
+                    this.textSet.add(id);
+                    continue;
+                }
+            }
+            this.commitNodes();
+        }));
+    }
+    clear() {
+        this.commited.length = 0;
+        this.recents.clear();
+        this.indexes.length = 1;
+        this.attributesMap.clear();
+        this.textSet.clear();
+    }
+    sendNodeAttribute(id, node, name, value) {
+        if ((0, guards_js_1.isSVGElement)(node)) {
+            if (name.substr(0, 6) === 'xlink:') {
+                name = name.substr(6);
+            }
+            if (value === null) {
+                this.app.send((0, messages_gen_js_1.RemoveNodeAttribute)(id, name));
+            }
+            else if (name === 'href') {
+                if (value.length > 1e5) {
+                    value = '';
+                }
+                this.app.send((0, messages_gen_js_1.SetNodeAttributeURLBased)(id, name, value, this.app.getBaseHref()));
+            }
+            else {
+                this.app.send((0, messages_gen_js_1.SetNodeAttribute)(id, name, value));
+            }
+            return;
+        }
+        if (name === 'src' ||
+            name === 'srcset' ||
+            name === 'integrity' ||
+            name === 'crossorigin' ||
+            name === 'autocomplete' ||
+            name.substr(0, 2) === 'on') {
+            return;
+        }
+        if (name === 'value' &&
+            (0, guards_js_1.hasTag)(node, 'input') &&
+            node.type !== 'button' &&
+            node.type !== 'reset' &&
+            node.type !== 'submit') {
+            return;
+        }
+        if (value === null) {
+            this.app.send((0, messages_gen_js_1.RemoveNodeAttribute)(id, name));
+            return;
+        }
+        if (name === 'style' || (name === 'href' && (0, guards_js_1.hasTag)(node, 'link'))) {
+            this.app.send((0, messages_gen_js_1.SetNodeAttributeURLBased)(id, name, value, this.app.getBaseHref()));
+            return;
+        }
+        if (name === 'href' || value.length > 1e5) {
+            value = '';
+        }
+        this.app.send((0, messages_gen_js_1.SetNodeAttribute)(id, name, value));
+    }
+    sendNodeData(id, parentElement, data) {
+        if ((0, guards_js_1.hasTag)(parentElement, 'style')) {
+            this.app.send((0, messages_gen_js_1.SetCSSDataURLBased)(id, data, this.app.getBaseHref()));
+            return;
+        }
+        data = this.app.sanitizer.sanitize(id, data);
+        this.app.send((0, messages_gen_js_1.SetNodeData)(id, data));
+    }
+    bindNode(node) {
+        const [id, isNew] = this.app.nodes.registerNode(node);
+        if (isNew) {
+            this.recents.set(id, RecentsType.New);
+        }
+        else if (this.recents.get(id) !== RecentsType.New) {
+            this.recents.set(id, RecentsType.Removed);
+        }
+    }
+    bindTree(node) {
+        if (!isObservable(node)) {
+            return;
+        }
+        this.bindNode(node);
+        const walker = document.createTreeWalker(node, NodeFilter.SHOW_ELEMENT + NodeFilter.SHOW_TEXT, {
+            acceptNode: (node) => isIgnored(node) || this.app.nodes.getID(node) !== undefined
+                ? NodeFilter.FILTER_REJECT
+                : NodeFilter.FILTER_ACCEPT,
+        },
+        // @ts-ignore
+        false);
+        while (walker.nextNode()) {
+            this.bindNode(walker.currentNode);
+        }
+    }
+    unbindTree(node) {
+        const id = this.app.nodes.unregisterNode(node);
+        if (id !== undefined && this.recents.get(id) === RecentsType.Removed) {
+            // Sending RemoveNode only for parent to maintain
+            this.app.send((0, messages_gen_js_1.RemoveNode)(id));
+            // Unregistering all the children in order to clear the memory
+            const walker = document.createTreeWalker(node, NodeFilter.SHOW_ELEMENT + NodeFilter.SHOW_TEXT, {
+                acceptNode: (node) => isIgnored(node) || this.app.nodes.getID(node) === undefined
+                    ? NodeFilter.FILTER_REJECT
+                    : NodeFilter.FILTER_ACCEPT,
+            },
+            // @ts-ignore
+            false);
+            while (walker.nextNode()) {
+                this.app.nodes.unregisterNode(walker.currentNode);
+            }
+            // MBTODO: count and send RemovedNodesCount (for the page crash detection in heuristics)
+        }
+    }
+    // A top-consumption function on the infinite lists test. (~1% of performance resources)
+    _commitNode(id, node) {
+        if ((0, guards_js_1.isRootNode)(node)) {
+            return true;
+        }
+        const parent = node.parentNode;
+        let parentID;
+        // Disable parent check for the upper context HTMLHtmlElement, because it is root there... (before)
+        // TODO: get rid of "special" cases (there is an issue with CreateDocument altered behaviour though)
+        // TODO: Clean the logic (though now it workd fine)
+        if (!(0, guards_js_1.hasTag)(node, 'html') || !this.isTopContext) {
+            if (parent === null) {
+                // Sometimes one observation contains attribute mutations for the removimg node, which gets ignored here.
+                // That shouldn't affect the visual rendering ( should it? maybe when transition applied? )
+                this.unbindTree(node);
+                return false;
+            }
+            parentID = this.app.nodes.getID(parent);
+            if (parentID === undefined) {
+                this.unbindTree(node);
+                return false;
+            }
+            if (!this.commitNode(parentID)) {
+                this.unbindTree(node);
+                return false;
+            }
+            this.app.sanitizer.handleNode(id, parentID, node);
+            if (this.app.sanitizer.isHidden(parentID)) {
+                return false;
+            }
+        }
+        // From here parentID === undefined if node is top context HTML node
+        let sibling = node.previousSibling;
+        while (sibling !== null) {
+            const siblingID = this.app.nodes.getID(sibling);
+            if (siblingID !== undefined) {
+                this.commitNode(siblingID);
+                this.indexes[id] = this.indexes[siblingID] + 1;
+                break;
+            }
+            sibling = sibling.previousSibling;
+        }
+        if (sibling === null) {
+            this.indexes[id] = 0;
+        }
+        const recentsType = this.recents.get(id);
+        const isNew = recentsType === RecentsType.New;
+        const index = this.indexes[id];
+        if (index === undefined) {
+            throw 'commitNode: missing node index';
+        }
+        if (isNew) {
+            if ((0, guards_js_1.isElementNode)(node)) {
+                let el = node;
+                if (parentID !== undefined) {
+                    if (this.app.sanitizer.isHidden(id)) {
+                        const width = el.clientWidth;
+                        const height = el.clientHeight;
+                        el = node.cloneNode();
+                        el.style.width = `${width}px`;
+                        el.style.height = `${height}px`;
+                    }
+                    this.app.send((0, messages_gen_js_1.CreateElementNode)(id, parentID, index, el.tagName, (0, guards_js_1.isSVGElement)(node)));
+                }
+                for (let i = 0; i < el.attributes.length; i++) {
+                    const attr = el.attributes[i];
+                    this.sendNodeAttribute(id, el, attr.nodeName, attr.value);
+                }
+            }
+            else if ((0, guards_js_1.isTextNode)(node)) {
+                // for text node id != 0, hence parentID !== undefined and parent is Element
+                this.app.send((0, messages_gen_js_1.CreateTextNode)(id, parentID, index));
+                this.sendNodeData(id, parent, node.data);
+            }
+            return true;
+        }
+        if (recentsType === RecentsType.Removed && parentID !== undefined) {
+            this.app.send((0, messages_gen_js_1.MoveNode)(id, parentID, index));
+        }
+        const attr = this.attributesMap.get(id);
+        if (attr !== undefined) {
+            if (!(0, guards_js_1.isElementNode)(node)) {
+                throw 'commitNode: node is not an element';
+            }
+            for (const name of attr) {
+                this.sendNodeAttribute(id, node, name, node.getAttribute(name));
+            }
+        }
+        if (this.textSet.has(id)) {
+            if (!(0, guards_js_1.isTextNode)(node)) {
+                throw 'commitNode: node is not a text';
+            }
+            // for text node id != 0, hence parent is Element
+            this.sendNodeData(id, parent, node.data);
+        }
+        return true;
+    }
+    commitNode(id) {
+        const node = this.app.nodes.getNode(id);
+        if (node === undefined) {
+            return false;
+        }
+        const cmt = this.commited[id];
+        if (cmt !== undefined) {
+            return cmt;
+        }
+        return (this.commited[id] = this._commitNode(id, node));
+    }
+    commitNodes(isStart = false) {
+        let node;
+        this.recents.forEach((type, id) => {
+            this.commitNode(id);
+            if (type === RecentsType.New && (node = this.app.nodes.getNode(id))) {
+                this.app.nodes.callNodeCallbacks(node, isStart);
+            }
+        });
+        this.clear();
+    }
+    // ISSSUE (nodeToBinde should be the same as node in all cases. Look at the comment about 0-node at the beginning of the file.)
+    // TODO: use one observer instance for all iframes/shadowRoots (composition instiad of inheritance)
+    observeRoot(node, beforeCommit, nodeToBind = node) {
+        this.observer.observe(node, {
+            childList: true,
+            attributes: true,
+            characterData: true,
+            subtree: true,
+            attributeOldValue: false,
+            characterDataOldValue: false,
+        });
+        this.bindTree(nodeToBind);
+        beforeCommit(this.app.nodes.getID(node));
+        this.commitNodes(true);
+    }
+    disconnect() {
+        this.observer.disconnect();
+        this.clear();
+    }
+}
+exports.default = Observer;

package/cjs/app/observer/shadow_root_observer.d.ts ADDED Viewed

@@ -0,0 +1,4 @@
+import Observer from './observer.js';
+export default class ShadowRootObserver extends Observer {
+    observe(el: Element): void;
+}

package/cjs/app/observer/shadow_root_observer.js ADDED Viewed

@@ -0,0 +1,21 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const observer_js_1 = require("./observer.js");
+const messages_gen_js_1 = require("../messages.gen.js");
+class ShadowRootObserver extends observer_js_1.default {
+    observe(el) {
+        const shRoot = el.shadowRoot;
+        const hostID = this.app.nodes.getID(el);
+        if (!shRoot || hostID === undefined) {
+            return;
+        } // log
+        this.observeRoot(shRoot, (rootID) => {
+            if (rootID === undefined) {
+                console.log('OpenReplay: Shadow Root was not bound');
+                return;
+            }
+            this.app.send((0, messages_gen_js_1.CreateIFrameDocument)(hostID, rootID));
+        });
+    }
+}
+exports.default = ShadowRootObserver;

package/cjs/app/observer/top_observer.d.ts ADDED Viewed

@@ -0,0 +1,24 @@
+import Observer from './observer.js';
+import { Offset } from './iframe_offsets.js';
+import App from '../index.js';
+export interface Options {
+    captureIFrames: boolean;
+}
+type Context = Window & typeof globalThis;
+type ContextCallback = (context: Context) => void;
+export default class TopObserver extends Observer {
+    private readonly options;
+    private readonly iframeOffsets;
+    constructor(app: App, options: Partial<Options>);
+    private readonly contextCallbacks;
+    private readonly contextsSet;
+    attachContextCallback(cb: ContextCallback): void;
+    getDocumentOffset(doc: Document): Offset;
+    private iframeObservers;
+    private handleIframe;
+    private shadowRootObservers;
+    private handleShadowRoot;
+    observe(): void;
+    disconnect(): void;
+}
+export {};