@openreplay/tracker 3.5.16-beta.3 → 3.6.0-beta.0

package/cjs/app/messages.js

@@ -0,0 +1,235 @@
+"use strict";
+// Auto-generated, do not edit
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.CreateIFrameDocument = exports.MouseClick = exports.CSSInsertRuleURLBased = exports.CustomIssue = exports.TechnicalInfo = exports.SetCSSDataURLBased = exports.SetNodeAttributeURLBased = exports.LongTask = exports.SetPageVisibility = exports.ConnectionInformation = exports.ResourceTiming = exports.PerformanceTrack = exports.GraphQL = exports.NgRx = exports.MobX = exports.Vuex = exports.Redux = exports.StateAction = exports.OTable = exports.Profiler = exports.Fetch = exports.CSSDeleteRule = exports.CSSInsertRule = exports.Metadata = exports.UserAnonymousID = exports.UserID = exports.RawCustomEvent = exports.JSException = exports.PageRenderTiming = exports.PageLoadTiming = exports.ConsoleLog = exports.MouseMove = exports.SetInputChecked = exports.SetInputValue = exports.SetInputTarget = exports.SetNodeScroll = exports.SetNodeData = exports.RemoveNodeAttribute = exports.SetNodeAttribute = exports.RemoveNode = exports.MoveNode = exports.CreateTextNode = exports.CreateElementNode = exports.CreateDocument = exports.SetViewportScroll = exports.SetViewportSize = exports.SetPageLocation = exports.Timestamp = exports.PartitionedMessage = exports.BatchMetadata = void 0;
+const Messages = require("../common/messages.gen.js");
+function BatchMetadata(version, pageNo, firstIndex, timestamp, location) {
+    return [Messages.Type.BatchMetadata, version, pageNo, firstIndex, timestamp, location];
+}
+exports.BatchMetadata = BatchMetadata;
+function PartitionedMessage(partNo, partTotal) {
+    return [Messages.Type.PartitionedMessage, partNo, partTotal];
+}
+exports.PartitionedMessage = PartitionedMessage;
+function Timestamp(timestamp) {
+    return [Messages.Type.Timestamp, timestamp];
+}
+exports.Timestamp = Timestamp;
+function SetPageLocation(url, referrer, navigationStart) {
+    return [Messages.Type.SetPageLocation, url, referrer, navigationStart];
+}
+exports.SetPageLocation = SetPageLocation;
+function SetViewportSize(width, height) {
+    return [Messages.Type.SetViewportSize, width, height];
+}
+exports.SetViewportSize = SetViewportSize;
+function SetViewportScroll(x, y) {
+    return [Messages.Type.SetViewportScroll, x, y];
+}
+exports.SetViewportScroll = SetViewportScroll;
+function CreateDocument() {
+    return [Messages.Type.CreateDocument];
+}
+exports.CreateDocument = CreateDocument;
+function CreateElementNode(id, parentID, index, tag, svg) {
+    return [Messages.Type.CreateElementNode, id, parentID, index, tag, svg];
+}
+exports.CreateElementNode = CreateElementNode;
+function CreateTextNode(id, parentID, index) {
+    return [Messages.Type.CreateTextNode, id, parentID, index];
+}
+exports.CreateTextNode = CreateTextNode;
+function MoveNode(id, parentID, index) {
+    return [Messages.Type.MoveNode, id, parentID, index];
+}
+exports.MoveNode = MoveNode;
+function RemoveNode(id) {
+    return [Messages.Type.RemoveNode, id];
+}
+exports.RemoveNode = RemoveNode;
+function SetNodeAttribute(id, name, value) {
+    return [Messages.Type.SetNodeAttribute, id, name, value];
+}
+exports.SetNodeAttribute = SetNodeAttribute;
+function RemoveNodeAttribute(id, name) {
+    return [Messages.Type.RemoveNodeAttribute, id, name];
+}
+exports.RemoveNodeAttribute = RemoveNodeAttribute;
+function SetNodeData(id, data) {
+    return [Messages.Type.SetNodeData, id, data];
+}
+exports.SetNodeData = SetNodeData;
+function SetNodeScroll(id, x, y) {
+    return [Messages.Type.SetNodeScroll, id, x, y];
+}
+exports.SetNodeScroll = SetNodeScroll;
+function SetInputTarget(id, label) {
+    return [Messages.Type.SetInputTarget, id, label];
+}
+exports.SetInputTarget = SetInputTarget;
+function SetInputValue(id, value, mask) {
+    return [Messages.Type.SetInputValue, id, value, mask];
+}
+exports.SetInputValue = SetInputValue;
+function SetInputChecked(id, checked) {
+    return [Messages.Type.SetInputChecked, id, checked];
+}
+exports.SetInputChecked = SetInputChecked;
+function MouseMove(x, y) {
+    return [Messages.Type.MouseMove, x, y];
+}
+exports.MouseMove = MouseMove;
+function ConsoleLog(level, value) {
+    return [Messages.Type.ConsoleLog, level, value];
+}
+exports.ConsoleLog = ConsoleLog;
+function PageLoadTiming(requestStart, responseStart, responseEnd, domContentLoadedEventStart, domContentLoadedEventEnd, loadEventStart, loadEventEnd, firstPaint, firstContentfulPaint) {
+    return [
+        Messages.Type.PageLoadTiming,
+        requestStart,
+        responseStart,
+        responseEnd,
+        domContentLoadedEventStart,
+        domContentLoadedEventEnd,
+        loadEventStart,
+        loadEventEnd,
+        firstPaint,
+        firstContentfulPaint,
+    ];
+}
+exports.PageLoadTiming = PageLoadTiming;
+function PageRenderTiming(speedIndex, visuallyComplete, timeToInteractive) {
+    return [Messages.Type.PageRenderTiming, speedIndex, visuallyComplete, timeToInteractive];
+}
+exports.PageRenderTiming = PageRenderTiming;
+function JSException(name, message, payload) {
+    return [Messages.Type.JSException, name, message, payload];
+}
+exports.JSException = JSException;
+function RawCustomEvent(name, payload) {
+    return [Messages.Type.RawCustomEvent, name, payload];
+}
+exports.RawCustomEvent = RawCustomEvent;
+function UserID(id) {
+    return [Messages.Type.UserID, id];
+}
+exports.UserID = UserID;
+function UserAnonymousID(id) {
+    return [Messages.Type.UserAnonymousID, id];
+}
+exports.UserAnonymousID = UserAnonymousID;
+function Metadata(key, value) {
+    return [Messages.Type.Metadata, key, value];
+}
+exports.Metadata = Metadata;
+function CSSInsertRule(id, rule, index) {
+    return [Messages.Type.CSSInsertRule, id, rule, index];
+}
+exports.CSSInsertRule = CSSInsertRule;
+function CSSDeleteRule(id, index) {
+    return [Messages.Type.CSSDeleteRule, id, index];
+}
+exports.CSSDeleteRule = CSSDeleteRule;
+function Fetch(method, url, request, response, status, timestamp, duration) {
+    return [Messages.Type.Fetch, method, url, request, response, status, timestamp, duration];
+}
+exports.Fetch = Fetch;
+function Profiler(name, duration, args, result) {
+    return [Messages.Type.Profiler, name, duration, args, result];
+}
+exports.Profiler = Profiler;
+function OTable(key, value) {
+    return [Messages.Type.OTable, key, value];
+}
+exports.OTable = OTable;
+function StateAction(type) {
+    return [Messages.Type.StateAction, type];
+}
+exports.StateAction = StateAction;
+function Redux(action, state, duration) {
+    return [Messages.Type.Redux, action, state, duration];
+}
+exports.Redux = Redux;
+function Vuex(mutation, state) {
+    return [Messages.Type.Vuex, mutation, state];
+}
+exports.Vuex = Vuex;
+function MobX(type, payload) {
+    return [Messages.Type.MobX, type, payload];
+}
+exports.MobX = MobX;
+function NgRx(action, state, duration) {
+    return [Messages.Type.NgRx, action, state, duration];
+}
+exports.NgRx = NgRx;
+function GraphQL(operationKind, operationName, variables, response) {
+    return [Messages.Type.GraphQL, operationKind, operationName, variables, response];
+}
+exports.GraphQL = GraphQL;
+function PerformanceTrack(frames, ticks, totalJSHeapSize, usedJSHeapSize) {
+    return [Messages.Type.PerformanceTrack, frames, ticks, totalJSHeapSize, usedJSHeapSize];
+}
+exports.PerformanceTrack = PerformanceTrack;
+function ResourceTiming(timestamp, duration, ttfb, headerSize, encodedBodySize, decodedBodySize, url, initiator) {
+    return [
+        Messages.Type.ResourceTiming,
+        timestamp,
+        duration,
+        ttfb,
+        headerSize,
+        encodedBodySize,
+        decodedBodySize,
+        url,
+        initiator,
+    ];
+}
+exports.ResourceTiming = ResourceTiming;
+function ConnectionInformation(downlink, type) {
+    return [Messages.Type.ConnectionInformation, downlink, type];
+}
+exports.ConnectionInformation = ConnectionInformation;
+function SetPageVisibility(hidden) {
+    return [Messages.Type.SetPageVisibility, hidden];
+}
+exports.SetPageVisibility = SetPageVisibility;
+function LongTask(timestamp, duration, context, containerType, containerSrc, containerId, containerName) {
+    return [
+        Messages.Type.LongTask,
+        timestamp,
+        duration,
+        context,
+        containerType,
+        containerSrc,
+        containerId,
+        containerName,
+    ];
+}
+exports.LongTask = LongTask;
+function SetNodeAttributeURLBased(id, name, value, baseURL) {
+    return [Messages.Type.SetNodeAttributeURLBased, id, name, value, baseURL];
+}
+exports.SetNodeAttributeURLBased = SetNodeAttributeURLBased;
+function SetCSSDataURLBased(id, data, baseURL) {
+    return [Messages.Type.SetCSSDataURLBased, id, data, baseURL];
+}
+exports.SetCSSDataURLBased = SetCSSDataURLBased;
+function TechnicalInfo(type, value) {
+    return [Messages.Type.TechnicalInfo, type, value];
+}
+exports.TechnicalInfo = TechnicalInfo;
+function CustomIssue(name, payload) {
+    return [Messages.Type.CustomIssue, name, payload];
+}
+exports.CustomIssue = CustomIssue;
+function CSSInsertRuleURLBased(id, rule, index, baseURL) {
+    return [Messages.Type.CSSInsertRuleURLBased, id, rule, index, baseURL];
+}
+exports.CSSInsertRuleURLBased = CSSInsertRuleURLBased;
+function MouseClick(id, hesitationTime, label, selector) {
+    return [Messages.Type.MouseClick, id, hesitationTime, label, selector];
+}
+exports.MouseClick = MouseClick;
+function CreateIFrameDocument(frameID, id) {
+    return [Messages.Type.CreateIFrameDocument, frameID, id];
+}
+exports.CreateIFrameDocument = CreateIFrameDocument;

package/cjs/app/nodes.d.ts

@@ -12,7 +12,7 @@ export default class Nodes {
     cleanTree(): void;
     callNodeCallbacks(node: Node, isStart: boolean): void;
     getID(node: Node): number | undefined;
-    getNode(id: number): Node | undefined;
+    getNode(id: number): void | Node;
     clear(): void;
 }
 export {};

package/cjs/app/nodes.js

@@ -7,9 +7,11 @@ class Nodes {
         this.nodeCallbacks = [];
         this.elementListeners = new Map();
     }
+    // Attached once per Tracker instance
     attachNodeCallback(nodeCallback) {
         this.nodeCallbacks.push(nodeCallback);
     }
+    // TODO: what is the difference with app.attachEventListener. can we use only one of those?
     attachElementListener(type, node, elementListener) {
         const id = this.getID(node);
         if (id === undefined) {
@@ -38,7 +40,7 @@ class Nodes {
         const id = node[this.node_id];
         if (id !== undefined) {
             delete node[this.node_id];
-            this.nodes[id] = undefined;
+            delete this.nodes[id];
             const listeners = this.elementListeners.get(id);
             if (listeners !== undefined) {
                 this.elementListeners.delete(id);
@@ -54,13 +56,8 @@ class 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 === undefined) {
-                delete this.nodes[i];
-                continue;
-            }
-            if (!document.contains(node)) {
+            if (node && !document.contains(node)) {
                 this.unregisterNode(node);
-                delete this.nodes[i];
             }
         }
     }

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

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

package/cjs/app/observer/iframe_observer.js

@@ -1,7 +1,7 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 const observer_js_1 = require("./observer.js");
-const messages_js_1 = require("../../common/messages.js");
+const messages_gen_js_1 = require("../messages.gen.js");
 class IFrameObserver extends observer_js_1.default {
     observe(iframe) {
         const doc = iframe.contentDocument;
@@ -12,10 +12,10 @@ class IFrameObserver extends observer_js_1.default {
         // Have to observe document, because the inner <html> might be changed
         this.observeRoot(doc, (docID) => {
             if (docID === undefined) {
-                console.log("OpenReplay: Iframe document not bound");
+                console.log('OpenReplay: Iframe document not bound');
                 return;
             }
-            this.app.send((0, messages_js_1.CreateIFrameDocument)(hostID, docID));
+            this.app.send((0, messages_gen_js_1.CreateIFrameDocument)(hostID, docID));
         });
     }
 }

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

@@ -1,4 +1,4 @@
-import App from "../index.js";
+import App from '../index.js';
 export default abstract class Observer {
     protected readonly app: App;
     protected readonly isTopContext: boolean;
@@ -14,7 +14,7 @@ export default abstract class Observer {
     private sendNodeData;
     private bindNode;
     private bindTree;
-    private unbindNode;
+    private unbindTree;
     private _commitNode;
     private commitNode;
     private commitNodes;

package/cjs/app/observer/observer.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-const messages_js_1 = require("../../common/messages.js");
+const messages_gen_js_1 = require("../messages.gen.js");
 const guards_js_1 = require("../guards.js");
 function isIgnored(node) {
     if ((0, guards_js_1.isTextNode)(node)) {
@@ -13,13 +13,9 @@ function isIgnored(node) {
     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 !((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');
+    return (tag === 'SCRIPT' || tag === 'NOSCRIPT' || tag === 'META' || tag === 'TITLE' || tag === 'BASE');
 }
 function isObservable(node) {
     if ((0, guards_js_1.isRootNode)(node)) {
@@ -32,17 +28,11 @@ function isObservable(node) {
     - 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)
 */
-/*
-  Nikita:
-    - rn we only send unbind event for parent (all child nodes will be cut in the live replay anyways)
-      to prevent sending 1k+ unbinds for child nodes and making replay file bigger than it should be
-*/
 var RecentsType;
 (function (RecentsType) {
     RecentsType[RecentsType["New"] = 0] = "New";
     RecentsType[RecentsType["Removed"] = 1] = "Removed";
     RecentsType[RecentsType["Changed"] = 2] = "Changed";
-    RecentsType[RecentsType["RemovedChild"] = 3] = "RemovedChild";
 })(RecentsType || (RecentsType = {}));
 class Observer {
     constructor(app, isTopContext = false) {
@@ -54,7 +44,8 @@ class Observer {
         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
+            for (const mutation of mutations) {
+                // mutations order is sequential
                 const target = mutation.target;
                 const type = mutation.type;
                 if (!isObservable(target)) {
@@ -62,7 +53,10 @@ class Observer {
                 }
                 if (type === 'childList') {
                     for (let i = 0; i < mutation.removedNodes.length; i++) {
-                        this.bindTree(mutation.removedNodes[i], true);
+                        // 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]);
@@ -83,7 +77,7 @@ class Observer {
                     }
                     let attr = this.attributesMap.get(id);
                     if (attr === undefined) {
-                        this.attributesMap.set(id, attr = new Set());
+                        this.attributesMap.set(id, (attr = new Set()));
                     }
                     attr.add(name);
                     continue;
@@ -109,16 +103,16 @@ class Observer {
                 name = name.substr(6);
             }
             if (value === null) {
-                this.app.send(new messages_js_1.RemoveNodeAttribute(id, name));
+                this.app.send((0, messages_gen_js_1.RemoveNodeAttribute)(id, name));
             }
             else if (name === 'href') {
                 if (value.length > 1e5) {
                     value = '';
                 }
-                this.app.send(new messages_js_1.SetNodeAttributeURLBased(id, name, value, this.app.getBaseHref()));
+                this.app.send((0, messages_gen_js_1.SetNodeAttributeURLBased)(id, name, value, this.app.getBaseHref()));
             }
             else {
-                this.app.send(new messages_js_1.SetNodeAttribute(id, name, value));
+                this.app.send((0, messages_gen_js_1.SetNodeAttribute)(id, name, value));
             }
             return;
         }
@@ -131,65 +125,76 @@ class Observer {
             return;
         }
         if (name === 'value' &&
-            (0, guards_js_1.hasTag)(node, "INPUT") &&
+            (0, guards_js_1.hasTag)(node, 'INPUT') &&
             node.type !== 'button' &&
             node.type !== 'reset' &&
             node.type !== 'submit') {
             return;
         }
         if (value === null) {
-            this.app.send(new messages_js_1.RemoveNodeAttribute(id, name));
+            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(new messages_js_1.SetNodeAttributeURLBased(id, name, value, this.app.getBaseHref()));
+        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(new messages_js_1.SetNodeAttribute(id, name, 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") || (0, guards_js_1.hasTag)(parentElement, "style")) {
-            this.app.send(new messages_js_1.SetCSSDataURLBased(id, data, this.app.getBaseHref()));
+        if ((0, guards_js_1.hasTag)(parentElement, 'STYLE') || (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(new messages_js_1.SetNodeData(id, data));
+        this.app.send((0, messages_gen_js_1.SetNodeData)(id, data));
     }
-    bindNode(node, isRemove = false) {
+    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) { // can we do just `else` here?
-            this.recents.set(id, isRemove ? RecentsType.RemovedChild : RecentsType.Removed);
+        else if (this.recents.get(id) !== RecentsType.New) {
+            this.recents.set(id, RecentsType.Removed);
         }
     }
-    bindTree(node, isRemove = false) {
+    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 && !isRemove)
+            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, isRemove);
+            this.bindNode(walker.currentNode);
         }
     }
-    unbindNode(node) {
+    unbindTree(node) {
         const id = this.app.nodes.unregisterNode(node);
         if (id !== undefined && this.recents.get(id) === RecentsType.Removed) {
-            this.app.send(new messages_js_1.RemoveNode(id));
+            // 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)
         }
-        return id;
     }
     // A top-consumption function on the infinite lists test. (~1% of performance resources)
     _commitNode(id, node) {
@@ -201,20 +206,20 @@ class Observer {
         // 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 (!(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? )
-                this.unbindNode(node);
+                // 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.unbindNode(node);
+                this.unbindTree(node);
                 return false;
             }
             if (!this.commitNode(parentID)) {
-                this.unbindNode(node);
+                this.unbindTree(node);
                 return false;
             }
             this.app.sanitizer.handleNode(id, parentID, node);
@@ -253,7 +258,7 @@ class Observer {
                         el.style.width = width + 'px';
                         el.style.height = height + 'px';
                     }
-                    this.app.send(new messages_js_1.CreateElementNode(id, parentID, index, el.tagName, (0, guards_js_1.isSVGElement)(node)));
+                    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];
@@ -262,13 +267,13 @@ class Observer {
             }
             else if ((0, guards_js_1.isTextNode)(node)) {
                 // for text node id != 0, hence parentID !== undefined and parent is Element
-                this.app.send(new messages_js_1.CreateTextNode(id, parentID, index));
+                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(new messages_js_1.MoveNode(id, parentID, index));
+            this.app.send((0, messages_gen_js_1.MoveNode)(id, parentID, index));
         }
         const attr = this.attributesMap.get(id);
         if (attr !== undefined) {
@@ -309,7 +314,8 @@ class Observer {
         });
         this.clear();
     }
-    // ISSSUE
+    // ISSSUE (nodeToBinde should be the same as node. 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,

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

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

package/cjs/app/observer/shadow_root_observer.js

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

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

@@ -1,11 +1,19 @@
-import Observer from "./observer.js";
-import App from "../index.js";
+import Observer from './observer.js';
+import App from '../index.js';
 export interface Options {
     captureIFrames: boolean;
 }
+declare type ContextCallback = (context: Window & typeof globalThis) => void;
+declare type Offset = {
+    top: number;
+    left: number;
+};
 export default class TopObserver extends Observer {
     private readonly options;
     constructor(app: App, options: Partial<Options>);
+    private readonly contextCallbacks;
+    attachContextCallback(cb: ContextCallback): void;
+    getDocumentOffset(doc: Document): Offset;
     private iframeObservers;
     private handleIframe;
     private shadowRootObservers;
@@ -13,3 +21,4 @@ export default class TopObserver extends Observer {
     observe(): void;
     disconnect(): void;
 }
+export {};