@openreplay/tracker 14.0.10-beta.1 → 14.0.10-beta.2

package/cjs/app/index.d.ts

@@ -18,6 +18,12 @@ export interface StartOptions {
     forceNew?: boolean;
     sessionHash?: string;
     assistOnly?: boolean;
+    /**
+     * @deprecated We strongly advise to use .start().then instead.
+     *
+     * This method is kept for snippet compatibility only
+     * */
+    startCallback?: (result: StartPromiseReturn) => void;
 }
 interface OnStartInfo {
     sessionID: string;
@@ -100,6 +106,12 @@ type AppOptions = {
         parentDomain?: string;
     };
     network?: NetworkOptions;
+    /**
+     * use this flag if you're using Angular
+     * basically goes around window.Zone api changes to mutation observer
+     * and event listeners
+     * */
+    angularMode?: boolean;
 } & WebworkerOptions & SessOptions;
 export type Options = AppOptions & ObserverOptions & SanitizerOptions;
 export declare const DEFAULT_INGEST_POINT = "https://api.openreplay.com/ingest";
@@ -146,16 +158,24 @@ export default class App {
     private rootId;
     private pageFrames;
     private frameOderNumber;
-    private readonly initialHostName;
     private features;
     constructor(projectKey: string, sessionToken: string | undefined, options: Partial<Options>, signalError: (error: string, apis: string[]) => void, insideIframe: boolean);
     /** used by child iframes for crossdomain only */
     parentActive: boolean;
     checkStatus: () => boolean;
     parentCrossDomainFrameListener: (event: MessageEvent) => void;
-    trackedFrames: number[];
+    /**
+     * context ids for iframes,
+     * order is not so important as long as its consistent
+     * */
+    trackedFrames: string[];
     crossDomainIframeListener: (event: MessageEvent) => void;
-    pollingQueue: string[];
+    /**
+     * { command : [remaining iframes] }
+     * + order of commands
+     **/
+    pollingQueue: Record<string, any>;
+    private readonly addCommand;
     bootChildrenFrames: () => Promise<void>;
     killChildrenFrames: () => void;
     signalIframeTracker: () => void;

package/cjs/app/index.js

@@ -96,7 +96,7 @@ class App {
         this.stopCallbacks = [];
         this.commitCallbacks = [];
         this.activityState = ActivityState.NotActive;
-        this.version = '14.0.10-beta.1'; // TODO: version compatability check inside each plugin.
+        this.version = '14.0.10-beta.2'; // TODO: version compatability check inside each plugin.
         this.socketMode = false;
         this.compressionThreshold = 24 * 1000;
         this.bc = null;
@@ -106,7 +106,6 @@ class App {
         this.rootId = null;
         this.pageFrames = [];
         this.frameOderNumber = 0;
-        this.initialHostName = location.hostname;
         this.features = {
             'feature-flags': true,
             'usability-test': true,
@@ -141,7 +140,6 @@ class App {
                 this.frameOderNumber = data.frameOrderNumber;
                 this.debug.log('starting iframe tracking', data);
                 this.allowAppStart();
-                this.delay = data.frameTimeOffset;
             }
             if (data.line === proto.killIframe) {
                 if (this.active()) {
@@ -149,6 +147,10 @@ class App {
                 }
             }
         };
+        /**
+         * context ids for iframes,
+         * order is not so important as long as its consistent
+         * */
         this.trackedFrames = [];
         this.crossDomainIframeListener = (event) => {
             if (!this.active() || event.source === window)
@@ -159,25 +161,30 @@ class App {
             if (data.line === proto.iframeSignal) {
                 // @ts-ignore
                 event.source?.postMessage({ ping: true, line: proto.parentAlive }, '*');
-                const childIframeDomain = data.domain;
                 const pageIframes = Array.from(document.querySelectorAll('iframe'));
                 this.pageFrames = pageIframes;
                 const signalId = async () => {
-                    const id = await this.checkNodeId(pageIframes, childIframeDomain);
-                    if (id && !this.trackedFrames.includes(id)) {
+                    if (event.source === null) {
+                        return console.error('Couldnt connect to event.source for child iframe tracking');
+                    }
+                    const id = await this.checkNodeId(pageIframes, event.source);
+                    if (id && !this.trackedFrames.includes(data.context)) {
                         try {
-                            this.trackedFrames.push(id);
+                            this.trackedFrames.push(data.context);
                             await this.waitStarted();
                             const token = this.session.getSessionToken();
+                            const order = this.trackedFrames.findIndex((f) => f === data.context) + 1;
+                            if (order === 0) {
+                                this.debug.error('Couldnt get order number for iframe', data.context, this.trackedFrames);
+                            }
                             const iframeData = {
                                 line: proto.iframeId,
-                                context: this.contextId,
-                                domain: childIframeDomain,
                                 id,
                                 token,
-                                frameOrderNumber: this.trackedFrames.length,
-                                frameTimeOffset: this.timestamp(),
+                                // since indexes go from 0 we +1
+                                frameOrderNumber: order,
                             };
+                            this.debug.log('Got child frame signal; nodeId', id, event.source, iframeData);
                             // @ts-ignore
                             event.source?.postMessage(iframeData, '*');
                         }
@@ -185,6 +192,9 @@ class App {
                             console.error(e);
                         }
                     }
+                    else {
+                        this.debug.log('Couldnt get node id for iframe', event.source, pageIframes);
+                    }
                 };
                 void signalId();
             }
@@ -198,7 +208,7 @@ class App {
                     if (msg[0] === 20 /* MType.MouseMove */) {
                         let fixedMessage = msg;
                         this.pageFrames.forEach((frame) => {
-                            if (frame.dataset.domain === event.data.domain) {
+                            if (frame.contentWindow === event.source) {
                                 const [type, x, y] = msg;
                                 const { left, top } = frame.getBoundingClientRect();
                                 fixedMessage = [type, x + left, y + top];
@@ -209,7 +219,7 @@ class App {
                     if (msg[0] === 68 /* MType.MouseClick */) {
                         let fixedMessage = msg;
                         this.pageFrames.forEach((frame) => {
-                            if (frame.dataset.domain === event.data.domain) {
+                            if (frame.contentWindow === event.source) {
                                 const [type, id, hesitationTime, label, selector, normX, normY] = msg;
                                 const { left, top, width, height } = frame.getBoundingClientRect();
                                 const contentWidth = document.documentElement.scrollWidth;
@@ -237,34 +247,47 @@ class App {
                 this.messages.push(...mappedMessages);
             }
             if (data.line === proto.polling) {
-                if (!this.pollingQueue.length) {
+                if (!this.pollingQueue.order.length) {
                     return;
                 }
-                while (this.pollingQueue.length) {
-                    const msg = this.pollingQueue.shift();
+                const nextCommand = this.pollingQueue.order[0];
+                if (this.pollingQueue[nextCommand].includes(data.context)) {
+                    this.pollingQueue[nextCommand] = this.pollingQueue[nextCommand].filter((c) => c !== data.context);
                     // @ts-ignore
-                    event.source?.postMessage({ line: msg }, '*');
+                    event.source?.postMessage({ line: nextCommand }, '*');
+                    if (this.pollingQueue[nextCommand].length === 0) {
+                        this.pollingQueue.order.shift();
+                    }
                 }
             }
         };
-        this.pollingQueue = [];
+        /**
+         * { command : [remaining iframes] }
+         * + order of commands
+         **/
+        this.pollingQueue = {
+            order: [],
+        };
+        this.addCommand = (cmd) => {
+            this.pollingQueue.order.push(cmd);
+            this.pollingQueue[cmd] = [...this.trackedFrames];
+        };
         this.bootChildrenFrames = async () => {
             await this.waitStarted();
-            this.pollingQueue.push(proto.startIframe);
+            this.addCommand(proto.startIframe);
         };
         this.killChildrenFrames = () => {
-            this.pollingQueue.push(proto.killIframe);
+            this.addCommand(proto.killIframe);
         };
         this.signalIframeTracker = () => {
-            const domain = this.initialHostName;
             const thisTab = this.session.getTabId();
             const signalToParent = (n) => {
                 window.parent.postMessage({
                     line: proto.iframeSignal,
                     source: thisTab,
                     context: this.contextId,
-                    domain,
                 }, this.options.crossdomain?.parentDomain ?? '*');
+                console.log('trying to signal to parent', n);
                 setTimeout(() => {
                     if (!this.checkStatus() && n < 100) {
                         void signalToParent(n + 1);
@@ -292,8 +315,12 @@ class App {
             if (useSafe) {
                 listener = this.safe(listener);
             }
-            const createListener = () => target ? (0, utils_js_1.createEventListener)(target, type, listener, useCapture) : null;
-            const deleteListener = () => target ? (0, utils_js_1.deleteEventListener)(target, type, listener, useCapture) : null;
+            const createListener = () => target
+                ? (0, utils_js_1.createEventListener)(target, type, listener, useCapture, this.options.angularMode)
+                : null;
+            const deleteListener = () => target
+                ? (0, utils_js_1.deleteEventListener)(target, type, listener, useCapture, this.options.angularMode)
+                : null;
             this.attachStartCallback(createListener, useSafe);
             this.attachStopCallback(deleteListener, useSafe);
         };
@@ -373,6 +400,7 @@ class App {
                 __save_canvas_locally: false,
                 useAnimationFrame: false,
             },
+            angularMode: false,
         };
         this.options = (0, utils_js_1.simpleMerge)(defaultOptions, options);
         if (!this.insideIframe &&
@@ -386,7 +414,7 @@ class App {
         this.localStorage = this.options.localStorage ?? window.localStorage;
         this.sessionStorage = this.options.sessionStorage ?? window.sessionStorage;
         this.sanitizer = new sanitizer_js_1.default(this, options);
-        this.nodes = new nodes_js_1.default(this.options.node_id);
+        this.nodes = new nodes_js_1.default(this.options.node_id, Boolean(options.angularMode));
         this.observer = new top_observer_js_1.default(this, options);
         this.ticker = new ticker_js_1.default(this);
         this.ticker.attach(() => this.commit());
@@ -410,24 +438,25 @@ class App {
         if (sessionToken != null) {
             this.session.applySessionHash(sessionToken);
         }
-        this.initWorker();
         const thisTab = this.session.getTabId();
-        /**
-         * listen for messages from parent window, so we can signal that we're alive
-         * */
         if (this.insideIframe) {
+            /**
+             * listen for messages from parent window, so we can signal that we're alive
+             * */
             window.addEventListener('message', this.parentCrossDomainFrameListener);
             setInterval(() => {
                 window.parent.postMessage({
                     line: proto.polling,
+                    context: this.contextId,
                 }, '*');
             }, 250);
         }
-        /**
-         * if we get a signal from child iframes, we check for their node_id and send it back,
-         * so they can act as if it was just a same-domain iframe
-         * */
-        if (!this.insideIframe) {
+        else {
+            this.initWorker();
+            /**
+             * if we get a signal from child iframes, we check for their node_id and send it back,
+             * so they can act as if it was just a same-domain iframe
+             * */
             window.addEventListener('message', this.crossDomainIframeListener);
         }
         if (this.bc !== null) {
@@ -475,9 +504,9 @@ class App {
             this.startTimeout = null;
         }
     }
-    async checkNodeId(iframes, domain) {
+    async checkNodeId(iframes, source) {
         for (const iframe of iframes) {
-            if (iframe.dataset.domain === domain) {
+            if (iframe.contentWindow && iframe.contentWindow === source) {
                 /**
                  * Here we're trying to get node id from the iframe (which is kept in observer)
                  * because of async nature of dom initialization, we give 100 retries with 100ms delay each
@@ -614,19 +643,18 @@ class App {
             this.messages.length = 0;
             return;
         }
-        if (this.worker === undefined || !this.messages.length) {
-            return;
-        }
         if (this.insideIframe) {
             window.parent.postMessage({
                 line: proto.iframeBatch,
                 messages: this.messages,
-                domain: this.initialHostName,
             }, this.options.crossdomain?.parentDomain ?? '*');
             this.commitCallbacks.forEach((cb) => cb(this.messages));
             this.messages.length = 0;
             return;
         }
+        if (this.worker === undefined || !this.messages.length) {
+            return;
+        }
         try {
             (0, utils_js_1.requestIdleCb)(() => {
                 this.messages.unshift((0, messages_gen_js_1.TabData)(this.session.getTabId()));
@@ -1018,7 +1046,7 @@ class App {
         if (isColdStart && this.coldInterval) {
             clearInterval(this.coldInterval);
         }
-        if (!this.worker) {
+        if (!this.worker && !this.insideIframe) {
             const reason = 'No worker found: perhaps, CSP is not set.';
             this.signalError(reason, []);
             return Promise.resolve(UnsuccessfulStart(reason));
@@ -1045,7 +1073,7 @@ class App {
             metadata: startOpts.metadata,
         });
         const timestamp = (0, utils_js_1.now)();
-        this.worker.postMessage({
+        this.worker?.postMessage({
             type: 'start',
             pageNo: this.session.incPageNo(),
             ingestPoint: this.options.ingestPoint,
@@ -1086,7 +1114,7 @@ class App {
                 const reason = error === CANCELED ? CANCELED : `Server error: ${r.status}. ${error}`;
                 return UnsuccessfulStart(reason);
             }
-            if (!this.worker) {
+            if (!this.worker && !this.insideIframe) {
                 const reason = 'no worker found after start request (this should not happen in real world)';
                 this.signalError(reason, []);
                 return UnsuccessfulStart(reason);
@@ -1124,10 +1152,10 @@ class App {
             });
             if (socketOnly) {
                 this.socketMode = true;
-                this.worker.postMessage('stop');
+                this.worker?.postMessage('stop');
             }
             else {
-                this.worker.postMessage({
+                this.worker?.postMessage({
                     type: 'auth',
                     token,
                     beaconSizeLimit,
@@ -1146,6 +1174,9 @@ class App {
             // TODO: start as early as possible (before receiving the token)
             /** after start */
             this.startCallbacks.forEach((cb) => cb(onStartInfo)); // MBTODO: callbacks after DOM "mounted" (observed)
+            if (startOpts.startCallback) {
+                startOpts.startCallback(SuccessfulStart(onStartInfo));
+            }
             if (this.features['feature-flags']) {
                 void this.featureFlags.reloadFlags();
             }

package/cjs/app/nodes.d.ts

@@ -1,16 +1,17 @@
 type NodeCallback = (node: Node, isStart: boolean) => void;
 export default class Nodes {
     private readonly node_id;
+    private readonly angularMode;
     private nodes;
     private totalNodeAmount;
     private readonly nodeCallbacks;
     private readonly elementListeners;
     private nextNodeId;
-    constructor(node_id: string);
+    constructor(node_id: string, angularMode: boolean);
     syntheticMode(frameOrder: number): void;
     attachNodeCallback(nodeCallback: NodeCallback): void;
     scanTree: (cb: (node: Node | void) => void) => void;
-    attachNodeListener(node: Node, type: string, listener: EventListener, useCapture?: boolean): void;
+    attachNodeListener: (node: Node, type: string, listener: EventListener, useCapture?: boolean) => void;
     registerNode(node: Node): [/*id:*/ number, /*isNew:*/ boolean];
     unregisterNode(node: Node): number | undefined;
     cleanTree(): void;

package/cjs/app/nodes.js

@@ -2,8 +2,9 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 const utils_js_1 = require("../utils.js");
 class Nodes {
-    constructor(node_id) {
+    constructor(node_id, angularMode) {
         this.node_id = node_id;
+        this.angularMode = angularMode;
         this.nodes = [];
         this.totalNodeAmount = 0;
         this.nodeCallbacks = [];
@@ -12,9 +13,22 @@ class Nodes {
         this.scanTree = (cb) => {
             this.nodes.forEach((node) => cb(node));
         };
+        this.attachNodeListener = (node, type, listener, useCapture = true) => {
+            const id = this.getID(node);
+            if (id === undefined) {
+                return;
+            }
+            (0, utils_js_1.createEventListener)(node, type, listener, useCapture, this.angularMode);
+            let listeners = this.elementListeners.get(id);
+            if (listeners === undefined) {
+                listeners = [];
+                this.elementListeners.set(id, listeners);
+            }
+            listeners.push([type, listener, useCapture]);
+        };
     }
     syntheticMode(frameOrder) {
-        const maxSafeNumber = 9007199254740900;
+        const maxSafeNumber = Number.MAX_SAFE_INTEGER;
         const placeholderSize = 99999999;
         const nextFrameId = placeholderSize * frameOrder;
         // I highly doubt that this will ever happen,
@@ -28,19 +42,6 @@ class Nodes {
     attachNodeCallback(nodeCallback) {
         this.nodeCallbacks.push(nodeCallback);
     }
-    attachNodeListener(node, type, listener, useCapture = true) {
-        const id = this.getID(node);
-        if (id === undefined) {
-            return;
-        }
-        (0, utils_js_1.createEventListener)(node, 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;
@@ -63,7 +64,7 @@ class Nodes {
             const listeners = this.elementListeners.get(id);
             if (listeners !== undefined) {
                 this.elementListeners.delete(id);
-                listeners.forEach((listener) => (0, utils_js_1.deleteEventListener)(node, listener[0], listener[1], listener[2]));
+                listeners.forEach((listener) => (0, utils_js_1.deleteEventListener)(node, listener[0], listener[1], listener[2], this.angularMode));
             }
             this.totalNodeAmount--;
         }

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

@@ -1,5 +1,5 @@
 import Observer from './observer.js';
 export default class IFrameObserver extends Observer {
     observe(iframe: HTMLIFrameElement): void;
-    syntheticObserve(selfId: number, doc: Document): void;
+    syntheticObserve(rootNodeId: number, doc: Document): void;
 }

package/cjs/app/observer/iframe_observer.js

@@ -22,13 +22,13 @@ class IFrameObserver extends observer_js_1.default {
             this.app.send((0, messages_gen_js_1.CreateIFrameDocument)(hostID, docID));
         });
     }
-    syntheticObserve(selfId, doc) {
+    syntheticObserve(rootNodeId, doc) {
         this.observeRoot(doc, (docID) => {
             if (docID === undefined) {
                 this.app.debug.log('OpenReplay: Iframe document not bound');
                 return;
             }
-            this.app.send((0, messages_gen_js_1.CreateIFrameDocument)(selfId, docID));
+            this.app.send((0, messages_gen_js_1.CreateIFrameDocument)(rootNodeId, docID));
         });
     }
 }

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

@@ -10,6 +10,10 @@ export default abstract class Observer {
     private readonly textSet;
     constructor(app: App, isTopContext?: boolean);
     private clear;
+    /**
+     * Unbinds the removed nodes in case of iframe src change.
+     */
+    private handleIframeSrcChange;
     private sendNodeAttribute;
     private sendNodeData;
     private bindNode;

package/cjs/app/observer/observer.js

@@ -57,7 +57,6 @@ class Observer {
                 }
                 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]);
                         }
@@ -79,6 +78,9 @@ class Observer {
                     if (name === null) {
                         continue;
                     }
+                    if (target instanceof HTMLIFrameElement && name === 'src') {
+                        this.handleIframeSrcChange(target);
+                    }
                     let attr = this.attributesMap.get(id);
                     if (attr === undefined) {
                         this.attributesMap.set(id, (attr = new Set()));
@@ -88,11 +90,10 @@ class Observer {
                 }
                 if (type === 'characterData') {
                     this.textSet.add(id);
-                    continue;
                 }
             }
             this.commitNodes();
-        }));
+        }), this.app.options.angularMode);
     }
     clear() {
         this.commited.length = 0;
@@ -101,10 +102,40 @@ class Observer {
         this.attributesMap.clear();
         this.textSet.clear();
     }
+    /**
+     * Unbinds the removed nodes in case of iframe src change.
+     */
+    handleIframeSrcChange(iframe) {
+        const oldContentDocument = iframe.contentDocument;
+        if (oldContentDocument) {
+            const id = this.app.nodes.getID(oldContentDocument);
+            if (id !== undefined) {
+                const walker = document.createTreeWalker(oldContentDocument, 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);
+                let removed = 0;
+                const totalBeforeRemove = this.app.nodes.getNodeCount();
+                while (walker.nextNode()) {
+                    if (!iframe.contentDocument.contains(walker.currentNode)) {
+                        removed += 1;
+                        this.app.nodes.unregisterNode(walker.currentNode);
+                    }
+                }
+                const removedPercent = Math.floor((removed / totalBeforeRemove) * 100);
+                if (removedPercent > 30) {
+                    this.app.send((0, messages_gen_js_1.UnbindNodes)(removedPercent));
+                }
+            }
+        }
+    }
     sendNodeAttribute(id, node, name, value) {
         if ((0, guards_js_1.isSVGElement)(node)) {
-            if (name.substr(0, 6) === 'xlink:') {
-                name = name.substr(6);
+            if (name.substring(0, 6) === 'xlink:') {
+                name = name.substring(6);
             }
             if (value === null) {
                 this.app.send((0, messages_gen_js_1.RemoveNodeAttribute)(id, name));
@@ -125,7 +156,7 @@ class Observer {
             name === 'integrity' ||
             name === 'crossorigin' ||
             name === 'autocomplete' ||
-            name.substr(0, 2) === 'on') {
+            name.substring(0, 2) === 'on') {
             return;
         }
         if (name === 'value' &&

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

@@ -19,7 +19,7 @@ export default class TopObserver extends Observer {
     private shadowRootObservers;
     private handleShadowRoot;
     observe(): void;
-    crossdomainObserve(selfId: number, frameOder: number): void;
+    crossdomainObserve(rootNodeId: number, frameOder: number): void;
     disconnect(): void;
 }
 export {};

package/cjs/app/observer/top_observer.js

@@ -107,7 +107,7 @@ class TopObserver extends observer_js_1.default {
             this.app.nodes.callNodeCallbacks(document, true);
         }, window.document.documentElement);
     }
-    crossdomainObserve(selfId, frameOder) {
+    crossdomainObserve(rootNodeId, frameOder) {
         const observer = this;
         Element.prototype.attachShadow = function () {
             // eslint-disable-next-line
@@ -119,7 +119,7 @@ class TopObserver extends observer_js_1.default {
         this.app.nodes.syntheticMode(frameOder);
         const iframeObserver = new iframe_observer_js_1.default(this.app);
         this.iframeObservers.push(iframeObserver);
-        iframeObserver.syntheticObserve(selfId, window.document);
+        iframeObserver.syntheticObserve(rootNodeId, window.document);
     }
     disconnect() {
         this.iframeOffsets.clear();

package/cjs/index.js

@@ -98,7 +98,7 @@ class API {
             const orig = this.options.ingestPoint || index_js_1.DEFAULT_INGEST_POINT;
             req.open('POST', orig + '/v1/web/not-started');
             req.send(JSON.stringify({
-                trackerVersion: '14.0.10-beta.1',
+                trackerVersion: '14.0.10-beta.2',
                 projectKey: this.options.projectKey,
                 doNotTrack,
                 reason: missingApi.length ? `missing api: ${missingApi.join(',')}` : reason,

package/cjs/modules/img.js

@@ -93,7 +93,7 @@ function default_1(app) {
                 }
             }
         }
-    }));
+    }), app.options.angularMode);
     app.attachStopCallback(() => {
         observer.disconnect();
     });

package/cjs/utils.d.ts

@@ -22,8 +22,8 @@ export declare function inIframe(): boolean | null;
  * we need to use this to achieve safe behavior
  * */
 export declare function ngSafeBrowserMethod(method: string): string;
-export declare function createMutationObserver(cb: MutationCallback): MutationObserver;
-export declare function createEventListener(target: EventTarget, event: string, cb: EventListenerOrEventListenerObject, capture?: boolean): void;
-export declare function deleteEventListener(target: EventTarget, event: string, cb: EventListenerOrEventListenerObject, capture?: boolean): void;
+export declare function createMutationObserver(cb: MutationCallback, angularMode?: boolean): MutationObserver;
+export declare function createEventListener(target: EventTarget, event: string, cb: EventListenerOrEventListenerObject, capture?: boolean, angularMode?: boolean): void;
+export declare function deleteEventListener(target: EventTarget, event: string, cb: EventListenerOrEventListenerObject, capture?: boolean, angularMode?: boolean): void;
 export declare function requestIdleCb(callback: () => void): void;
 export declare function simpleMerge<T>(defaultObj: T, givenObj: Partial<T>): T;