@openreplay/tracker 3.4.10 → 3.4.11

package/cjs/app/index.d.ts

@@ -1,6 +1,6 @@
 import Message from "../messages/message.js";
 import Nodes from "./nodes.js";
-import Observer from "./observer/top_observer.js";
+import Observer from "./observer.js";
 import Ticker from "./ticker.js";
 import type { Options as ObserverOptions } from "./observer.js";
 import type { Options as WebworkerOptions } from "../messages/webworker.js";

package/cjs/app/index.js

@@ -4,7 +4,7 @@ exports.DEFAULT_INGEST_POINT = void 0;
 const utils_js_1 = require("../utils.js");
 const index_js_1 = require("../messages/index.js");
 const nodes_js_1 = require("./nodes.js");
-const top_observer_js_1 = require("./observer/top_observer.js");
+const observer_js_1 = require("./observer.js");
 const ticker_js_1 = require("./ticker.js");
 const performance_js_1 = require("../modules/performance.js");
 // TODO: use backendHost only
@@ -17,7 +17,7 @@ class App {
         this.commitCallbacks = [];
         this._sessionID = null;
         this.isActive = false;
-        this.version = '3.4.10';
+        this.version = '3.4.11';
         this.projectKey = projectKey;
         this.options = Object.assign({
             revID: '',
@@ -39,7 +39,7 @@ class App {
         }
         this.revID = this.options.revID;
         this.nodes = new nodes_js_1.default(this.options.node_id);
-        this.observer = new top_observer_js_1.default(this, this.options);
+        this.observer = new observer_js_1.default(this, this.options);
         this.ticker = new ticker_js_1.default(this);
         this.ticker.attach(() => this.commit());
         try {

package/cjs/index.js

@@ -115,7 +115,7 @@ class API {
             // no-cors issue only with text/plain or not-set Content-Type
             // req.setRequestHeader("Content-Type", "application/json;charset=UTF-8");
             req.send(JSON.stringify({
-                trackerVersion: '3.4.10',
+                trackerVersion: '3.4.11',
                 projectKey: options.projectKey,
                 doNotTrack,
                 // TODO: add precise reason (an exact API missing)

package/lib/app/index.d.ts

@@ -1,6 +1,6 @@
 import Message from "../messages/message.js";
 import Nodes from "./nodes.js";
-import Observer from "./observer/top_observer.js";
+import Observer from "./observer.js";
 import Ticker from "./ticker.js";
 import type { Options as ObserverOptions } from "./observer.js";
 import type { Options as WebworkerOptions } from "../messages/webworker.js";

package/lib/app/index.js

@@ -1,7 +1,7 @@
 import { timestamp, log, warn } from "../utils.js";
 import { Timestamp } from "../messages/index.js";
 import Nodes from "./nodes.js";
-import Observer from "./observer/top_observer.js";
+import Observer from "./observer.js";
 import Ticker from "./ticker.js";
 import { deviceMemory, jsHeapSizeLimit } from "../modules/performance.js";
 // TODO: use backendHost only
@@ -14,7 +14,7 @@ export default class App {
         this.commitCallbacks = [];
         this._sessionID = null;
         this.isActive = false;
-        this.version = '3.4.10';
+        this.version = '3.4.11';
         this.projectKey = projectKey;
         this.options = Object.assign({
             revID: '',

package/lib/index.js

@@ -111,7 +111,7 @@ export default class API {
             // no-cors issue only with text/plain or not-set Content-Type
             // req.setRequestHeader("Content-Type", "application/json;charset=UTF-8");
             req.send(JSON.stringify({
-                trackerVersion: '3.4.10',
+                trackerVersion: '3.4.11',
                 projectKey: options.projectKey,
                 doNotTrack,
                 // TODO: add precise reason (an exact API missing)

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@openreplay/tracker",
   "description": "The OpenReplay tracker main package",
-  "version": "3.4.10",
+  "version": "3.4.11",
   "keywords": [
     "logging",
     "replay"

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

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

package/cjs/app/observer/iframe_observer.js

@@ -1,22 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-const observer_js_1 = require("./observer.js");
-const index_js_1 = require("../../messages/index.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) => {
-            if (docID === undefined) {
-                console.log("OpenReplay: Iframe document not bound");
-                return;
-            }
-            this.app.send((0, index_js_1.CreateIFrameDocument)(hostID, docID));
-        });
-    }
-}
-exports.default = IFrameObserver;

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

@@ -1,49 +0,0 @@
-import App from "../index.js";
-export interface Window extends globalThis.Window {
-    HTMLInputElement: typeof HTMLInputElement;
-    HTMLLinkElement: typeof HTMLLinkElement;
-    HTMLStyleElement: typeof HTMLStyleElement;
-    SVGStyleElement: typeof SVGStyleElement;
-    HTMLIFrameElement: typeof HTMLIFrameElement;
-    Text: typeof Text;
-    Element: typeof Element;
-    ShadowRoot: typeof ShadowRoot;
-}
-declare type WindowConstructor = Document | Element | Text | ShadowRoot | HTMLInputElement | HTMLLinkElement | HTMLStyleElement | HTMLIFrameElement;
-declare type Constructor<T> = {
-    new (...args: any[]): T;
-    name: string;
-};
-export declare function isInstance<T extends WindowConstructor>(node: Node, constr: Constructor<T>): node is T;
-export interface Options {
-    obscureTextEmails: boolean;
-    obscureTextNumbers: boolean;
-}
-export default abstract class Observer<AdditionalOptions = {}> {
-    protected readonly app: App;
-    protected readonly context: Window;
-    private readonly observer;
-    private readonly commited;
-    private readonly recents;
-    private readonly indexes;
-    private readonly attributesList;
-    private readonly textSet;
-    private readonly textMasked;
-    protected readonly options: Options & AdditionalOptions;
-    private readonly inUpperContext;
-    constructor(app: App, options: Partial<Options> & AdditionalOptions, context?: Window);
-    private clear;
-    private sendNodeAttribute;
-    getInnerTextSecure(el: HTMLElement): string;
-    private checkObscure;
-    private sendNodeData;
-    private bindNode;
-    private bindTree;
-    private unbindNode;
-    private _commitNode;
-    private commitNode;
-    private commitNodes;
-    protected observeRoot(node: Node, beforeCommit: (id?: number) => unknown, nodeToBind?: Node): void;
-    disconnect(): void;
-}
-export {};

package/cjs/app/observer/observer.js

@@ -1,374 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.isInstance = void 0;
-const utils_js_1 = require("../../utils.js");
-const index_js_1 = require("../../messages/index.js");
-function isSVGElement(node) {
-    return node.namespaceURI === 'http://www.w3.org/2000/svg';
-}
-// TODO: we need a type expert here so we won't have to ignore the lines
-// TODO: use it everywhere (static function; export from which file? <-- global Window typing required)
-function isInstance(node, constr) {
-    const doc = node.ownerDocument;
-    if (!doc) { // null if Document
-        return constr.name === 'Document';
-    }
-    let context = 
-    // @ts-ignore (for EI, Safary)
-    doc.parentWindow ||
-        doc.defaultView; // TODO: smart global typing for Window object
-    while (context.parent && context.parent !== context) {
-        // @ts-ignore
-        if (node instanceof context[constr.name]) {
-            return true;
-        }
-        // @ts-ignore
-        context = context.parent;
-    }
-    // @ts-ignore
-    return node instanceof context[constr.name];
-}
-exports.isInstance = isInstance;
-function isIgnored(node) {
-    if (isInstance(node, Text)) {
-        return false;
-    }
-    if (!isInstance(node, Element)) {
-        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 isRootNode(node) {
-    return isInstance(node, Document) || isInstance(node, ShadowRoot);
-}
-function isObservable(node) {
-    if (isRootNode(node)) {
-        return true;
-    }
-    return !isIgnored(node);
-}
-class Observer {
-    constructor(app, options, context = window) {
-        this.app = app;
-        this.context = context;
-        this.options = Object.assign({
-            obscureTextEmails: true,
-            obscureTextNumbers: false,
-        }, options);
-        this.inUpperContext = context.parent === context;
-        this.observer = new MutationObserver(this.app.safe((mutations) => {
-            for (const mutation of mutations) {
-                const target = mutation.target;
-                const type = mutation.type;
-                // TODO TODO TODO: move to iframe_observer/remove??? (check if )
-                // Special case
-                // 'childList' on Document might happen in case of iframe. 
-                // TODO: generalize as much as possible
-                // if (isInstance(target, Document) // Also ShadowRoot can be here
-                //     && type === 'childList' 
-                //     //&& new Array(mutation.addedNodes).some(node => isInstance(node, HTMLHtmlElement))
-                // ) {
-                //   const parentFrame = target.defaultView?.frameElement
-                //   if (!parentFrame) { continue }
-                //   this.bindTree(target.documentElement)
-                //   const frameID = this.app.nodes.getID(parentFrame)
-                //   const docID = this.app.nodes.getID(target.documentElement)
-                //   if (frameID === undefined || docID === undefined) { continue }
-                //   this.app.send(CreateIFrameDocument(frameID, docID));
-                //   continue;
-                // }
-                if (!isObservable(target) || !context.document.contains(target)) {
-                    continue;
-                }
-                if (type === 'childList') {
-                    for (let i = 0; i < mutation.removedNodes.length; i++) {
-                        this.bindTree(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 (id >= this.recents.length) {
-                    this.recents[id] = undefined;
-                }
-                if (type === 'attributes') {
-                    const name = mutation.attributeName;
-                    if (name === null) {
-                        continue;
-                    }
-                    let attr = this.attributesList[id];
-                    if (attr === undefined) {
-                        this.attributesList[id] = attr = new Set();
-                    }
-                    attr.add(name);
-                    continue;
-                }
-                if (type === 'characterData') {
-                    this.textSet.add(id);
-                    continue;
-                }
-            }
-            this.commitNodes();
-        }));
-        this.commited = [];
-        this.recents = [];
-        this.indexes = [0];
-        this.attributesList = [];
-        this.textSet = new Set();
-        this.textMasked = new Set();
-    }
-    clear() {
-        this.commited.length = 0;
-        this.recents.length = 0;
-        this.indexes.length = 1;
-        this.attributesList.length = 0;
-        this.textSet.clear();
-        this.textMasked.clear();
-    }
-    sendNodeAttribute(id, node, name, value) {
-        if (isSVGElement(node)) {
-            if (name.substr(0, 6) === 'xlink:') {
-                name = name.substr(6);
-            }
-            if (value === null) {
-                this.app.send(new index_js_1.RemoveNodeAttribute(id, name));
-            }
-            else if (name === 'href') {
-                if (value.length > 1e5) {
-                    value = '';
-                }
-                this.app.send(new index_js_1.SetNodeAttributeURLBased(id, name, value, this.app.getBaseHref()));
-            }
-            else {
-                this.app.send(new index_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' &&
-            isInstance(node, HTMLInputElement) &&
-            node.type !== 'button' &&
-            node.type !== 'reset' &&
-            node.type !== 'submit') {
-            return;
-        }
-        if (value === null) {
-            this.app.send(new index_js_1.RemoveNodeAttribute(id, name));
-            return;
-        }
-        if (name === 'style' || name === 'href' && isInstance(node, HTMLLinkElement)) {
-            this.app.send(new index_js_1.SetNodeAttributeURLBased(id, name, value, this.app.getBaseHref()));
-            return;
-        }
-        if (name === 'href' || value.length > 1e5) {
-            value = '';
-        }
-        this.app.send(new index_js_1.SetNodeAttribute(id, name, value));
-    }
-    /* TODO:  abstract sanitation */
-    getInnerTextSecure(el) {
-        const id = this.app.nodes.getID(el);
-        if (!id) {
-            return '';
-        }
-        return this.checkObscure(id, el.innerText);
-    }
-    checkObscure(id, data) {
-        if (this.textMasked.has(id)) {
-            return data.replace(/[^\f\n\r\t\v\u00a0\u1680\u2000-\u200a\u2028\u2029\u202f\u205f\u3000\ufeff]/g, '█');
-        }
-        if (this.options.obscureTextNumbers) {
-            data = data.replace(/\d/g, '0');
-        }
-        if (this.options.obscureTextEmails) {
-            data = data.replace(/([^\s]+)@([^\s]+)\.([^\s]+)/g, (...f) => (0, utils_js_1.stars)(f[1]) + '@' + (0, utils_js_1.stars)(f[2]) + '.' + (0, utils_js_1.stars)(f[3]));
-        }
-        return data;
-    }
-    sendNodeData(id, parentElement, data) {
-        if (isInstance(parentElement, HTMLStyleElement) || isInstance(parentElement, SVGStyleElement)) {
-            this.app.send(new index_js_1.SetCSSDataURLBased(id, data, this.app.getBaseHref()));
-            return;
-        }
-        data = this.checkObscure(id, data);
-        this.app.send(new index_js_1.SetNodeData(id, data));
-    }
-    /* end TODO:  abstract sanitation */
-    bindNode(node) {
-        const r = this.app.nodes.registerNode(node);
-        const id = r[0];
-        this.recents[id] = r[1] || this.recents[id] || 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
-                ? NodeFilter.FILTER_REJECT
-                : NodeFilter.FILTER_ACCEPT,
-        }, 
-        // @ts-ignore
-        false);
-        while (walker.nextNode()) {
-            this.bindNode(walker.currentNode);
-        }
-    }
-    unbindNode(node) {
-        const id = this.app.nodes.unregisterNode(node);
-        if (id !== undefined && this.recents[id] === false) {
-            this.app.send(new index_js_1.RemoveNode(id));
-        }
-    }
-    _commitNode(id, node) {
-        if (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 (!isInstance(node, HTMLHtmlElement) || !this.inUpperContext) {
-            if (parent === null) {
-                this.unbindNode(node);
-                return false;
-            }
-            parentID = this.app.nodes.getID(parent);
-            if (parentID === undefined) {
-                this.unbindNode(node);
-                return false;
-            }
-            if (!this.commitNode(parentID)) {
-                this.unbindNode(node);
-                return false;
-            }
-            if (this.textMasked.has(parentID) ||
-                (isInstance(node, Element) && (0, utils_js_1.hasOpenreplayAttribute)(node, 'masked'))) {
-                this.textMasked.add(id);
-            }
-        }
-        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 isNew = this.recents[id];
-        const index = this.indexes[id];
-        if (index === undefined) {
-            throw 'commitNode: missing node index';
-        }
-        if (isNew === true) {
-            if (isInstance(node, Element)) {
-                if (parentID !== undefined) {
-                    this.app.send(new index_js_1.CreateElementNode(id, parentID, index, node.tagName, isSVGElement(node)));
-                }
-                for (let i = 0; i < node.attributes.length; i++) {
-                    const attr = node.attributes[i];
-                    this.sendNodeAttribute(id, node, attr.nodeName, attr.value);
-                }
-            }
-            else if (isInstance(node, Text)) {
-                // for text node id != 0, hence parentID !== undefined and parent is Element
-                this.app.send(new index_js_1.CreateTextNode(id, parentID, index));
-                this.sendNodeData(id, parent, node.data);
-            }
-            return true;
-        }
-        if (isNew === false && parentID !== undefined) {
-            this.app.send(new index_js_1.MoveNode(id, parentID, index));
-        }
-        const attr = this.attributesList[id];
-        if (attr !== undefined) {
-            if (!isInstance(node, Element)) {
-                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 (!isInstance(node, Text)) {
-                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() {
-        let node;
-        for (let id = 0; id < this.recents.length; id++) {
-            // TODO: take a look at recents/ commitNode logic. why wasn't this check here before commitNode? only because of committed check inside?
-            if (!this.recents[id]) {
-                continue;
-            }
-            this.commitNode(id);
-            if (node = this.app.nodes.getNode(id)) {
-                this.app.nodes.callNodeCallbacks(node);
-            }
-        }
-        this.clear();
-    }
-    // ISSSUE
-    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();
-    }
-    disconnect() {
-        this.observer.disconnect();
-        this.clear();
-    }
-}
-exports.default = Observer;

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

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

package/cjs/app/observer/shadow_root_observer.js

@@ -1,21 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-const observer_js_1 = require("./observer.js");
-const index_js_1 = require("../../messages/index.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, index_js_1.CreateIFrameDocument)(hostID, rootID));
-        });
-    }
-}
-exports.default = ShadowRootObserver;

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

@@ -1,15 +0,0 @@
-import Observer from "./observer.js";
-import type { Options as BaseOptions } from "./observer.js";
-import App from "../index.js";
-export interface Options extends Partial<BaseOptions> {
-    captureIFrames: boolean;
-}
-export default class TopObserver extends Observer<Options> {
-    constructor(app: App, options: Partial<Options>);
-    private iframeObservers;
-    private handleIframe;
-    private shadowRootObservers;
-    private handleShadowRoot;
-    observe(): void;
-    disconnect(): void;
-}

package/cjs/app/observer/top_observer.js

@@ -1,82 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-const observer_js_1 = require("./observer.js");
-const iframe_observer_js_1 = require("./iframe_observer.js");
-const shadow_root_observer_js_1 = require("./shadow_root_observer.js");
-const index_js_1 = require("../../messages/index.js");
-const attachShadowNativeFn = Element.prototype.attachShadow;
-class TopObserver extends observer_js_1.default {
-    constructor(app, options) {
-        super(app, Object.assign({
-            captureIFrames: false
-        }, options));
-        this.iframeObservers = [];
-        this.shadowRootObservers = [];
-        // IFrames
-        this.app.nodes.attachNodeCallback(node => {
-            if ((0, observer_js_1.isInstance)(node, HTMLIFrameElement) &&
-                (this.options.captureIFrames || node.getAttribute("data-openreplay-capture"))) {
-                this.handleIframe(node);
-            }
-        });
-        // ShadowDOM
-        this.app.nodes.attachNodeCallback(node => {
-            if ((0, observer_js_1.isInstance)(node, Element) && node.shadowRoot !== null) {
-                this.handleShadowRoot(node.shadowRoot);
-            }
-        });
-    }
-    handleIframe(iframe) {
-        let context = null;
-        const handle = this.app.safe(() => {
-            const id = this.app.nodes.getID(iframe);
-            if (id === undefined) {
-                return;
-            } //log
-            if (iframe.contentWindow === context) {
-                return;
-            } //Does this happen frequently?
-            context = iframe.contentWindow;
-            if (!context) {
-                return;
-            }
-            const observer = new iframe_observer_js_1.default(this.app, this.options, context);
-            this.iframeObservers.push(observer);
-            observer.observe(iframe);
-        });
-        this.app.attachEventListener(iframe, "load", handle);
-        handle();
-    }
-    handleShadowRoot(shRoot) {
-        const observer = new shadow_root_observer_js_1.default(this.app, this.options, this.context);
-        this.shadowRootObservers.push(observer);
-        observer.observe(shRoot.host);
-    }
-    observe() {
-        // Protection from several subsequent calls?
-        const observer = this;
-        Element.prototype.attachShadow = function () {
-            const shadow = attachShadowNativeFn.apply(this, arguments);
-            observer.handleShadowRoot(shadow);
-            return shadow;
-        };
-        // Can observe documentElement (<html>) here, because it is not supposed to be changing.
-        // However, it is possible in some exotic cases and may cause an ignorance of the newly created <html>
-        // In this case context.document have to be observed, but this will cause 
-        // the change in the re-player behaviour caused by CreateDocument message: 
-        //   the 0-node ("fRoot") will become #document rather than documentElement as it is now.
-        // Alternatively - observe(#document) then bindNode(documentElement)
-        this.observeRoot(this.context.document, () => {
-            this.app.send(new index_js_1.CreateDocument());
-        }, this.context.document.documentElement);
-    }
-    disconnect() {
-        Element.prototype.attachShadow = attachShadowNativeFn;
-        this.iframeObservers.forEach(o => o.disconnect());
-        this.iframeObservers = [];
-        this.shadowRootObservers.forEach(o => o.disconnect());
-        this.shadowRootObservers = [];
-        super.disconnect();
-    }
-}
-exports.default = TopObserver;

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

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

package/lib/app/observer/iframe_observer.js

@@ -1,19 +0,0 @@
-import Observer from "./observer.js";
-import { CreateIFrameDocument } from "../../messages/index.js";
-export default class IFrameObserver extends Observer {
-    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) => {
-            if (docID === undefined) {
-                console.log("OpenReplay: Iframe document not bound");
-                return;
-            }
-            this.app.send(CreateIFrameDocument(hostID, docID));
-        });
-    }
-}

package/lib/app/observer/observer.d.ts

@@ -1,49 +0,0 @@
-import App from "../index.js";
-export interface Window extends globalThis.Window {
-    HTMLInputElement: typeof HTMLInputElement;
-    HTMLLinkElement: typeof HTMLLinkElement;
-    HTMLStyleElement: typeof HTMLStyleElement;
-    SVGStyleElement: typeof SVGStyleElement;
-    HTMLIFrameElement: typeof HTMLIFrameElement;
-    Text: typeof Text;
-    Element: typeof Element;
-    ShadowRoot: typeof ShadowRoot;
-}
-declare type WindowConstructor = Document | Element | Text | ShadowRoot | HTMLInputElement | HTMLLinkElement | HTMLStyleElement | HTMLIFrameElement;
-declare type Constructor<T> = {
-    new (...args: any[]): T;
-    name: string;
-};
-export declare function isInstance<T extends WindowConstructor>(node: Node, constr: Constructor<T>): node is T;
-export interface Options {
-    obscureTextEmails: boolean;
-    obscureTextNumbers: boolean;
-}
-export default abstract class Observer<AdditionalOptions = {}> {
-    protected readonly app: App;
-    protected readonly context: Window;
-    private readonly observer;
-    private readonly commited;
-    private readonly recents;
-    private readonly indexes;
-    private readonly attributesList;
-    private readonly textSet;
-    private readonly textMasked;
-    protected readonly options: Options & AdditionalOptions;
-    private readonly inUpperContext;
-    constructor(app: App, options: Partial<Options> & AdditionalOptions, context?: Window);
-    private clear;
-    private sendNodeAttribute;
-    getInnerTextSecure(el: HTMLElement): string;
-    private checkObscure;
-    private sendNodeData;
-    private bindNode;
-    private bindTree;
-    private unbindNode;
-    private _commitNode;
-    private commitNode;
-    private commitNodes;
-    protected observeRoot(node: Node, beforeCommit: (id?: number) => unknown, nodeToBind?: Node): void;
-    disconnect(): void;
-}
-export {};

package/lib/app/observer/observer.js

@@ -1,369 +0,0 @@
-import { stars, hasOpenreplayAttribute } from "../../utils.js";
-import { RemoveNodeAttribute, SetNodeAttribute, SetNodeAttributeURLBased, SetCSSDataURLBased, SetNodeData, CreateTextNode, CreateElementNode, MoveNode, RemoveNode, } from "../../messages/index.js";
-function isSVGElement(node) {
-    return node.namespaceURI === 'http://www.w3.org/2000/svg';
-}
-// TODO: we need a type expert here so we won't have to ignore the lines
-// TODO: use it everywhere (static function; export from which file? <-- global Window typing required)
-export function isInstance(node, constr) {
-    const doc = node.ownerDocument;
-    if (!doc) { // null if Document
-        return constr.name === 'Document';
-    }
-    let context = 
-    // @ts-ignore (for EI, Safary)
-    doc.parentWindow ||
-        doc.defaultView; // TODO: smart global typing for Window object
-    while (context.parent && context.parent !== context) {
-        // @ts-ignore
-        if (node instanceof context[constr.name]) {
-            return true;
-        }
-        // @ts-ignore
-        context = context.parent;
-    }
-    // @ts-ignore
-    return node instanceof context[constr.name];
-}
-function isIgnored(node) {
-    if (isInstance(node, Text)) {
-        return false;
-    }
-    if (!isInstance(node, Element)) {
-        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 isRootNode(node) {
-    return isInstance(node, Document) || isInstance(node, ShadowRoot);
-}
-function isObservable(node) {
-    if (isRootNode(node)) {
-        return true;
-    }
-    return !isIgnored(node);
-}
-export default class Observer {
-    constructor(app, options, context = window) {
-        this.app = app;
-        this.context = context;
-        this.options = Object.assign({
-            obscureTextEmails: true,
-            obscureTextNumbers: false,
-        }, options);
-        this.inUpperContext = context.parent === context;
-        this.observer = new MutationObserver(this.app.safe((mutations) => {
-            for (const mutation of mutations) {
-                const target = mutation.target;
-                const type = mutation.type;
-                // TODO TODO TODO: move to iframe_observer/remove??? (check if )
-                // Special case
-                // 'childList' on Document might happen in case of iframe. 
-                // TODO: generalize as much as possible
-                // if (isInstance(target, Document) // Also ShadowRoot can be here
-                //     && type === 'childList' 
-                //     //&& new Array(mutation.addedNodes).some(node => isInstance(node, HTMLHtmlElement))
-                // ) {
-                //   const parentFrame = target.defaultView?.frameElement
-                //   if (!parentFrame) { continue }
-                //   this.bindTree(target.documentElement)
-                //   const frameID = this.app.nodes.getID(parentFrame)
-                //   const docID = this.app.nodes.getID(target.documentElement)
-                //   if (frameID === undefined || docID === undefined) { continue }
-                //   this.app.send(CreateIFrameDocument(frameID, docID));
-                //   continue;
-                // }
-                if (!isObservable(target) || !context.document.contains(target)) {
-                    continue;
-                }
-                if (type === 'childList') {
-                    for (let i = 0; i < mutation.removedNodes.length; i++) {
-                        this.bindTree(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 (id >= this.recents.length) {
-                    this.recents[id] = undefined;
-                }
-                if (type === 'attributes') {
-                    const name = mutation.attributeName;
-                    if (name === null) {
-                        continue;
-                    }
-                    let attr = this.attributesList[id];
-                    if (attr === undefined) {
-                        this.attributesList[id] = attr = new Set();
-                    }
-                    attr.add(name);
-                    continue;
-                }
-                if (type === 'characterData') {
-                    this.textSet.add(id);
-                    continue;
-                }
-            }
-            this.commitNodes();
-        }));
-        this.commited = [];
-        this.recents = [];
-        this.indexes = [0];
-        this.attributesList = [];
-        this.textSet = new Set();
-        this.textMasked = new Set();
-    }
-    clear() {
-        this.commited.length = 0;
-        this.recents.length = 0;
-        this.indexes.length = 1;
-        this.attributesList.length = 0;
-        this.textSet.clear();
-        this.textMasked.clear();
-    }
-    sendNodeAttribute(id, node, name, value) {
-        if (isSVGElement(node)) {
-            if (name.substr(0, 6) === 'xlink:') {
-                name = name.substr(6);
-            }
-            if (value === null) {
-                this.app.send(new RemoveNodeAttribute(id, name));
-            }
-            else if (name === 'href') {
-                if (value.length > 1e5) {
-                    value = '';
-                }
-                this.app.send(new SetNodeAttributeURLBased(id, name, value, this.app.getBaseHref()));
-            }
-            else {
-                this.app.send(new 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' &&
-            isInstance(node, HTMLInputElement) &&
-            node.type !== 'button' &&
-            node.type !== 'reset' &&
-            node.type !== 'submit') {
-            return;
-        }
-        if (value === null) {
-            this.app.send(new RemoveNodeAttribute(id, name));
-            return;
-        }
-        if (name === 'style' || name === 'href' && isInstance(node, HTMLLinkElement)) {
-            this.app.send(new SetNodeAttributeURLBased(id, name, value, this.app.getBaseHref()));
-            return;
-        }
-        if (name === 'href' || value.length > 1e5) {
-            value = '';
-        }
-        this.app.send(new SetNodeAttribute(id, name, value));
-    }
-    /* TODO:  abstract sanitation */
-    getInnerTextSecure(el) {
-        const id = this.app.nodes.getID(el);
-        if (!id) {
-            return '';
-        }
-        return this.checkObscure(id, el.innerText);
-    }
-    checkObscure(id, data) {
-        if (this.textMasked.has(id)) {
-            return data.replace(/[^\f\n\r\t\v\u00a0\u1680\u2000-\u200a\u2028\u2029\u202f\u205f\u3000\ufeff]/g, '█');
-        }
-        if (this.options.obscureTextNumbers) {
-            data = data.replace(/\d/g, '0');
-        }
-        if (this.options.obscureTextEmails) {
-            data = data.replace(/([^\s]+)@([^\s]+)\.([^\s]+)/g, (...f) => stars(f[1]) + '@' + stars(f[2]) + '.' + stars(f[3]));
-        }
-        return data;
-    }
-    sendNodeData(id, parentElement, data) {
-        if (isInstance(parentElement, HTMLStyleElement) || isInstance(parentElement, SVGStyleElement)) {
-            this.app.send(new SetCSSDataURLBased(id, data, this.app.getBaseHref()));
-            return;
-        }
-        data = this.checkObscure(id, data);
-        this.app.send(new SetNodeData(id, data));
-    }
-    /* end TODO:  abstract sanitation */
-    bindNode(node) {
-        const r = this.app.nodes.registerNode(node);
-        const id = r[0];
-        this.recents[id] = r[1] || this.recents[id] || 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
-                ? NodeFilter.FILTER_REJECT
-                : NodeFilter.FILTER_ACCEPT,
-        }, 
-        // @ts-ignore
-        false);
-        while (walker.nextNode()) {
-            this.bindNode(walker.currentNode);
-        }
-    }
-    unbindNode(node) {
-        const id = this.app.nodes.unregisterNode(node);
-        if (id !== undefined && this.recents[id] === false) {
-            this.app.send(new RemoveNode(id));
-        }
-    }
-    _commitNode(id, node) {
-        if (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 (!isInstance(node, HTMLHtmlElement) || !this.inUpperContext) {
-            if (parent === null) {
-                this.unbindNode(node);
-                return false;
-            }
-            parentID = this.app.nodes.getID(parent);
-            if (parentID === undefined) {
-                this.unbindNode(node);
-                return false;
-            }
-            if (!this.commitNode(parentID)) {
-                this.unbindNode(node);
-                return false;
-            }
-            if (this.textMasked.has(parentID) ||
-                (isInstance(node, Element) && hasOpenreplayAttribute(node, 'masked'))) {
-                this.textMasked.add(id);
-            }
-        }
-        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 isNew = this.recents[id];
-        const index = this.indexes[id];
-        if (index === undefined) {
-            throw 'commitNode: missing node index';
-        }
-        if (isNew === true) {
-            if (isInstance(node, Element)) {
-                if (parentID !== undefined) {
-                    this.app.send(new CreateElementNode(id, parentID, index, node.tagName, isSVGElement(node)));
-                }
-                for (let i = 0; i < node.attributes.length; i++) {
-                    const attr = node.attributes[i];
-                    this.sendNodeAttribute(id, node, attr.nodeName, attr.value);
-                }
-            }
-            else if (isInstance(node, Text)) {
-                // for text node id != 0, hence parentID !== undefined and parent is Element
-                this.app.send(new CreateTextNode(id, parentID, index));
-                this.sendNodeData(id, parent, node.data);
-            }
-            return true;
-        }
-        if (isNew === false && parentID !== undefined) {
-            this.app.send(new MoveNode(id, parentID, index));
-        }
-        const attr = this.attributesList[id];
-        if (attr !== undefined) {
-            if (!isInstance(node, Element)) {
-                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 (!isInstance(node, Text)) {
-                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() {
-        let node;
-        for (let id = 0; id < this.recents.length; id++) {
-            // TODO: take a look at recents/ commitNode logic. why wasn't this check here before commitNode? only because of committed check inside?
-            if (!this.recents[id]) {
-                continue;
-            }
-            this.commitNode(id);
-            if (node = this.app.nodes.getNode(id)) {
-                this.app.nodes.callNodeCallbacks(node);
-            }
-        }
-        this.clear();
-    }
-    // ISSSUE
-    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();
-    }
-    disconnect() {
-        this.observer.disconnect();
-        this.clear();
-    }
-}

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

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

package/lib/app/observer/shadow_root_observer.js

@@ -1,18 +0,0 @@
-import Observer from "./observer.js";
-import { CreateIFrameDocument } from "../../messages/index.js";
-export default class ShadowRootObserver extends Observer {
-    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(CreateIFrameDocument(hostID, rootID));
-        });
-    }
-}

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

@@ -1,15 +0,0 @@
-import Observer from "./observer.js";
-import type { Options as BaseOptions } from "./observer.js";
-import App from "../index.js";
-export interface Options extends Partial<BaseOptions> {
-    captureIFrames: boolean;
-}
-export default class TopObserver extends Observer<Options> {
-    constructor(app: App, options: Partial<Options>);
-    private iframeObservers;
-    private handleIframe;
-    private shadowRootObservers;
-    private handleShadowRoot;
-    observe(): void;
-    disconnect(): void;
-}

package/lib/app/observer/top_observer.js

@@ -1,79 +0,0 @@
-import Observer, { isInstance } from "./observer.js";
-import IFrameObserver from "./iframe_observer.js";
-import ShadowRootObserver from "./shadow_root_observer.js";
-import { CreateDocument } from "../../messages/index.js";
-const attachShadowNativeFn = Element.prototype.attachShadow;
-export default class TopObserver extends Observer {
-    constructor(app, options) {
-        super(app, Object.assign({
-            captureIFrames: false
-        }, options));
-        this.iframeObservers = [];
-        this.shadowRootObservers = [];
-        // IFrames
-        this.app.nodes.attachNodeCallback(node => {
-            if (isInstance(node, HTMLIFrameElement) &&
-                (this.options.captureIFrames || node.getAttribute("data-openreplay-capture"))) {
-                this.handleIframe(node);
-            }
-        });
-        // ShadowDOM
-        this.app.nodes.attachNodeCallback(node => {
-            if (isInstance(node, Element) && node.shadowRoot !== null) {
-                this.handleShadowRoot(node.shadowRoot);
-            }
-        });
-    }
-    handleIframe(iframe) {
-        let context = null;
-        const handle = this.app.safe(() => {
-            const id = this.app.nodes.getID(iframe);
-            if (id === undefined) {
-                return;
-            } //log
-            if (iframe.contentWindow === context) {
-                return;
-            } //Does this happen frequently?
-            context = iframe.contentWindow;
-            if (!context) {
-                return;
-            }
-            const observer = new IFrameObserver(this.app, this.options, context);
-            this.iframeObservers.push(observer);
-            observer.observe(iframe);
-        });
-        this.app.attachEventListener(iframe, "load", handle);
-        handle();
-    }
-    handleShadowRoot(shRoot) {
-        const observer = new ShadowRootObserver(this.app, this.options, this.context);
-        this.shadowRootObservers.push(observer);
-        observer.observe(shRoot.host);
-    }
-    observe() {
-        // Protection from several subsequent calls?
-        const observer = this;
-        Element.prototype.attachShadow = function () {
-            const shadow = attachShadowNativeFn.apply(this, arguments);
-            observer.handleShadowRoot(shadow);
-            return shadow;
-        };
-        // Can observe documentElement (<html>) here, because it is not supposed to be changing.
-        // However, it is possible in some exotic cases and may cause an ignorance of the newly created <html>
-        // In this case context.document have to be observed, but this will cause 
-        // the change in the re-player behaviour caused by CreateDocument message: 
-        //   the 0-node ("fRoot") will become #document rather than documentElement as it is now.
-        // Alternatively - observe(#document) then bindNode(documentElement)
-        this.observeRoot(this.context.document, () => {
-            this.app.send(new CreateDocument());
-        }, this.context.document.documentElement);
-    }
-    disconnect() {
-        Element.prototype.attachShadow = attachShadowNativeFn;
-        this.iframeObservers.forEach(o => o.disconnect());
-        this.iframeObservers = [];
-        this.shadowRootObservers.forEach(o => o.disconnect());
-        this.shadowRootObservers = [];
-        super.disconnect();
-    }
-}