@openreplay/tracker 3.5.10 → 3.5.13-beta.0

package/cjs/modules/img.js

@@ -1,17 +1,18 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 const utils_js_1 = require("../utils.js");
-const index_js_1 = require("../messages/index.js");
+const messages_js_1 = require("../common/messages.js");
+const guards_js_1 = require("../app/guards.js");
 const PLACEHOLDER_SRC = "https://static.openreplay.com/tracker/placeholder.jpeg";
 function default_1(app) {
     function sendPlaceholder(id, node) {
-        app.send(new index_js_1.SetNodeAttribute(id, "src", PLACEHOLDER_SRC));
+        app.send(new messages_js_1.SetNodeAttribute(id, "src", PLACEHOLDER_SRC));
         const { width, height } = node.getBoundingClientRect();
         if (!node.hasAttribute("width")) {
-            app.send(new index_js_1.SetNodeAttribute(id, "width", String(width)));
+            app.send(new messages_js_1.SetNodeAttribute(id, "width", String(width)));
         }
         if (!node.hasAttribute("height")) {
-            app.send(new index_js_1.SetNodeAttribute(id, "height", String(height)));
+            app.send(new messages_js_1.SetNodeAttribute(id, "height", String(height)));
         }
     }
     const sendImgSrc = app.safe(function () {
@@ -25,14 +26,14 @@ function default_1(app) {
         }
         if (naturalWidth === 0 && naturalHeight === 0) {
             if (src != null && (0, utils_js_1.isURL)(src)) { // TODO: How about relative urls ? Src type is null sometimes.
-                app.send(new index_js_1.ResourceTiming((0, utils_js_1.timestamp)(), 0, 0, 0, 0, 0, src, 'img'));
+                app.send(new messages_js_1.ResourceTiming((0, utils_js_1.timestamp)(), 0, 0, 0, 0, 0, src, 'img'));
             }
         }
         else if (src.length >= 1e5 || app.sanitizer.isMasked(id)) {
             sendPlaceholder(id, this);
         }
         else {
-            app.send(new index_js_1.SetNodeAttributeURLBased(id, 'src', src, app.getBaseHref()));
+            app.send(new messages_js_1.SetNodeAttributeURLBased(id, 'src', src, app.getBaseHref()));
         }
     });
     const observer = new MutationObserver((mutations) => {
@@ -44,12 +45,12 @@ function default_1(app) {
                     return;
                 }
                 const src = target.src;
-                app.send(new index_js_1.SetNodeAttributeURLBased(id, 'src', src, app.getBaseHref()));
+                app.send(new messages_js_1.SetNodeAttributeURLBased(id, 'src', src, app.getBaseHref()));
             }
         }
     });
     app.nodes.attachNodeCallback((node) => {
-        if (!(node instanceof HTMLImageElement)) {
+        if (!(0, guards_js_1.hasTag)(node, "IMG")) {
             return;
         }
         app.nodes.attachElementListener('error', node, sendImgSrc);

package/cjs/modules/input.d.ts

@@ -1,4 +1,4 @@
-import App from "../app/index.js";
+import type App from "../app/index.js";
 declare type TextEditableElement = HTMLInputElement | HTMLTextAreaElement;
 export declare function getInputLabel(node: TextEditableElement): string;
 export declare const enum InputMode {

package/cjs/modules/input.js

@@ -2,12 +2,13 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.getInputLabel = void 0;
 const utils_js_1 = require("../utils.js");
-const index_js_1 = require("../messages/index.js");
+const guards_js_1 = require("../app/guards.js");
+const messages_js_1 = require("../common/messages.js");
 function isTextEditable(node) {
-    if (node instanceof HTMLTextAreaElement) {
+    if ((0, guards_js_1.hasTag)(node, "TEXTAREA")) {
         return true;
     }
-    if (!(node instanceof HTMLInputElement)) {
+    if (!(0, guards_js_1.hasTag)(node, "INPUT")) {
         return false;
     }
     const type = node.type;
@@ -19,7 +20,7 @@ function isTextEditable(node) {
         type === 'range');
 }
 function isCheckable(node) {
-    if (!(node instanceof HTMLInputElement)) {
+    if (!(0, guards_js_1.hasTag)(node, "INPUT")) {
         return false;
     }
     const type = node.type;
@@ -29,7 +30,7 @@ const labelElementFor = utils_js_1.IN_BROWSER && 'labels' in HTMLInputElement.pr
     ? (node) => {
         let p = node;
         while ((p = p.parentNode) !== null) {
-            if (p instanceof HTMLLabelElement) {
+            if ((0, guards_js_1.hasTag)(p, "LABEL")) {
                 return p;
             }
         }
@@ -41,7 +42,7 @@ const labelElementFor = utils_js_1.IN_BROWSER && 'labels' in HTMLInputElement.pr
     : (node) => {
         let p = node;
         while ((p = p.parentNode) !== null) {
-            if (p instanceof HTMLLabelElement) {
+            if ((0, guards_js_1.hasTag)(p, "LABEL")) {
                 return p;
             }
         }
@@ -71,39 +72,39 @@ function default_1(app, opts) {
     const options = Object.assign({
         obscureInputNumbers: true,
         obscureInputEmails: true,
-        defaultInputMode: 0 /* Plain */,
+        defaultInputMode: 0 /* InputMode.Plain */,
     }, opts);
     function sendInputTarget(id, node) {
         const label = getInputLabel(node);
         if (label !== '') {
-            app.send(new index_js_1.SetInputTarget(id, label));
+            app.send(new messages_js_1.SetInputTarget(id, label));
         }
     }
     function sendInputValue(id, node) {
         let value = node.value;
         let inputMode = options.defaultInputMode;
         if (node.type === 'password' || (0, utils_js_1.hasOpenreplayAttribute)(node, 'hidden')) {
-            inputMode = 2 /* Hidden */;
+            inputMode = 2 /* InputMode.Hidden */;
         }
         else if ((0, utils_js_1.hasOpenreplayAttribute)(node, 'obscured') ||
-            (inputMode === 0 /* Plain */ &&
+            (inputMode === 0 /* InputMode.Plain */ &&
                 ((options.obscureInputNumbers && /\d\d\d\d/.test(value)) ||
                     (options.obscureInputEmails &&
                         (node.type === 'email' || !!~value.indexOf('@')))))) {
-            inputMode = 1 /* Obscured */;
+            inputMode = 1 /* InputMode.Obscured */;
         }
         let mask = 0;
         switch (inputMode) {
-            case 2 /* Hidden */:
+            case 2 /* InputMode.Hidden */:
                 mask = -1;
                 value = '';
                 break;
-            case 1 /* Obscured */:
+            case 1 /* InputMode.Obscured */:
                 mask = value.length;
                 value = '';
                 break;
         }
-        app.send(new index_js_1.SetInputValue(id, value, mask));
+        app.send(new messages_js_1.SetInputValue(id, value, mask));
     }
     const inputValues = new Map();
     const checkableValues = new Map();
@@ -137,7 +138,7 @@ function default_1(app, opts) {
             }
             if (checked !== node.checked) {
                 checkableValues.set(id, node.checked);
-                app.send(new index_js_1.SetInputChecked(id, node.checked));
+                app.send(new messages_js_1.SetInputChecked(id, node.checked));
             }
         });
     });
@@ -148,7 +149,7 @@ function default_1(app, opts) {
             return;
         }
         // TODO: support multiple select (?): use selectedOptions; Need send target?
-        if (node instanceof HTMLSelectElement) {
+        if ((0, guards_js_1.hasTag)(node, "SELECT")) {
             sendInputValue(id, node);
             app.attachEventListener(node, "change", () => {
                 sendInputValue(id, node);
@@ -161,7 +162,7 @@ function default_1(app, opts) {
         }
         if (isCheckable(node)) {
             checkableValues.set(id, node.checked);
-            app.send(new index_js_1.SetInputChecked(id, node.checked));
+            app.send(new messages_js_1.SetInputChecked(id, node.checked));
             return;
         }
     }));

package/cjs/modules/longtasks.d.ts

@@ -1,2 +1,2 @@
-import App from "../app/index.js";
+import type App from "../app/index.js";
 export default function (app: App): void;

package/cjs/modules/longtasks.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-const index_js_1 = require("../messages/index.js");
+const messages_js_1 = require("../common/messages.js");
 ;
 ;
 function default_1(app) {
@@ -18,7 +18,7 @@ function default_1(app) {
             id = container.containerId;
             src = container.containerSrc;
         }
-        app.send(new index_js_1.LongTask(entry.startTime + performance.timing.navigationStart, entry.duration, Math.max(contexts.indexOf(entry.name), 0), Math.max(containerTypes.indexOf(type), 0), name, id, src));
+        app.send(new messages_js_1.LongTask(entry.startTime + performance.timing.navigationStart, entry.duration, Math.max(contexts.indexOf(entry.name), 0), Math.max(containerTypes.indexOf(type), 0), name, id, src));
     }
     const observer = new PerformanceObserver((list) => list.getEntries().forEach(longTask));
     observer.observe({ entryTypes: ['longtask'] });

package/cjs/modules/mouse.d.ts

@@ -1,2 +1,2 @@
-import App from "../app/index.js";
+import type App from "../app/index.js";
 export default function (app: App): void;

package/cjs/modules/mouse.js

@@ -1,7 +1,8 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
+const guards_js_1 = require("../app/guards.js");
 const utils_js_1 = require("../utils.js");
-const index_js_1 = require("../messages/index.js");
+const messages_js_1 = require("../common/messages.js");
 const input_js_1 = require("./input.js");
 function _getSelector(target) {
     let el = target;
@@ -49,7 +50,7 @@ function _getTarget(target) {
         }
         element = element.parentElement;
     }
-    if (target instanceof SVGElement) {
+    if ((0, guards_js_1.isSVGElement)(target)) {
         let owner = target.ownerSVGElement;
         while (owner !== null) {
             target = owner;
@@ -79,7 +80,7 @@ function default_1(app) {
         if (dl !== null) {
             return dl;
         }
-        if (target instanceof HTMLInputElement) {
+        if ((0, guards_js_1.hasTag)(target, "INPUT")) {
             return (0, input_js_1.getInputLabel)(target);
         }
         if (isClickable(target)) {
@@ -105,7 +106,7 @@ function default_1(app) {
     });
     const sendMouseMove = () => {
         if (mousePositionChanged) {
-            app.send(new index_js_1.MouseMove(mousePositionX, mousePositionY));
+            app.send(new messages_js_1.MouseMove(mousePositionX, mousePositionY));
             mousePositionChanged = false;
         }
     };
@@ -133,7 +134,7 @@ function default_1(app) {
         const id = app.nodes.getID(target);
         if (id !== undefined) {
             sendMouseMove();
-            app.send(new index_js_1.MouseClick(id, mouseTarget === target
+            app.send(new messages_js_1.MouseClick(id, mouseTarget === target
                 ? Math.round(performance.now() - mouseTargetTime)
                 : 0, getTargetLabel(target), getSelector(id, target)), true);
         }

package/cjs/modules/performance.d.ts

@@ -1,4 +1,4 @@
-import App from "../app/index.js";
+import type App from "../app/index.js";
 export declare const deviceMemory: number;
 export declare const jsHeapSizeLimit: number;
 export interface Options {

package/cjs/modules/performance.js

@@ -2,7 +2,7 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.jsHeapSizeLimit = exports.deviceMemory = void 0;
 const utils_js_1 = require("../utils.js");
-const index_js_1 = require("../messages/index.js");
+const messages_js_1 = require("../common/messages.js");
 const perf = utils_js_1.IN_BROWSER && 'performance' in window && 'memory' in performance // works in Chrome only
     ? performance
     : { memory: {} };
@@ -34,7 +34,7 @@ function default_1(app, opts) {
         if (frames === undefined || ticks === undefined) {
             return;
         }
-        app.send(new index_js_1.PerformanceTrack(frames, ticks, perf.memory.totalJSHeapSize || 0, perf.memory.usedJSHeapSize || 0));
+        app.send(new messages_js_1.PerformanceTrack(frames, ticks, perf.memory.totalJSHeapSize || 0, perf.memory.usedJSHeapSize || 0));
         ticks = frames = document.hidden ? -1 : 0;
     };
     app.attachStartCallback(() => {

package/cjs/modules/scroll.d.ts

@@ -1,2 +1,2 @@
-import App from "../app/index.js";
+import type App from "../app/index.js";
 export default function (app: App): void;

package/cjs/modules/scroll.js

@@ -1,10 +1,10 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-const index_js_1 = require("../messages/index.js");
+const messages_js_1 = require("../common/messages.js");
 function default_1(app) {
     let documentScroll = false;
     const nodeScroll = new Map();
-    const sendSetViewportScroll = app.safe(() => app.send(new index_js_1.SetViewportScroll(window.pageXOffset ||
+    const sendSetViewportScroll = app.safe(() => app.send(new messages_js_1.SetViewportScroll(window.pageXOffset ||
         (document.documentElement && document.documentElement.scrollLeft) ||
         (document.body && document.body.scrollLeft) ||
         0, window.pageYOffset ||
@@ -14,7 +14,7 @@ function default_1(app) {
     const sendSetNodeScroll = app.safe((s, node) => {
         const id = app.nodes.getID(node);
         if (id !== undefined) {
-            app.send(new index_js_1.SetNodeScroll(id, s[0], s[1]));
+            app.send(new messages_js_1.SetNodeScroll(id, s[0], s[1]));
         }
     });
     app.attachStartCallback(sendSetViewportScroll);
@@ -22,11 +22,11 @@ function default_1(app) {
         documentScroll = false;
         nodeScroll.clear();
     });
-    app.nodes.attachNodeCallback(node => {
-        if (node instanceof Element && node.scrollLeft + node.scrollTop > 0) {
-            nodeScroll.set(node, [node.scrollLeft, node.scrollTop]);
-        }
-    });
+    // app.nodes.attachNodeCallback(node => {
+    //   if (isElementNode(node) && node.scrollLeft + node.scrollTop > 0) {
+    //     nodeScroll.set(node, [node.scrollLeft, node.scrollTop]);
+    //   }
+    // })
     app.attachEventListener(window, 'scroll', (e) => {
         const target = e.target;
         if (target === document) {

package/cjs/modules/timing.d.ts

@@ -1,4 +1,4 @@
-import App from "../app/index.js";
+import type App from "../app/index.js";
 export interface Options {
     captureResourceTimings: boolean;
     capturePageLoadTimings: boolean;

package/cjs/modules/timing.js

@@ -1,7 +1,8 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
+const guards_js_1 = require("../app/guards.js");
 const utils_js_1 = require("../utils.js");
-const index_js_1 = require("../messages/index.js");
+const messages_js_1 = require("../common/messages.js");
 function getPaintBlocks(resources) {
     const paintBlocks = [];
     const elements = document.getElementsByTagName('*');
@@ -9,7 +10,7 @@ function getPaintBlocks(resources) {
     for (let i = 0; i < elements.length; i++) {
         const element = elements[i];
         let src = '';
-        if (element instanceof HTMLImageElement) {
+        if ((0, guards_js_1.hasTag)(element, "IMG")) {
             src = element.currentSrc || element.src;
         }
         if (!src) {
@@ -77,7 +78,7 @@ function default_1(app, opts) {
         if (resources !== null) {
             resources[entry.name] = entry.startTime + entry.duration;
         }
-        app.send(new index_js_1.ResourceTiming(entry.startTime + performance.timing.navigationStart, entry.duration, entry.responseStart && entry.startTime
+        app.send(new messages_js_1.ResourceTiming(entry.startTime + performance.timing.navigationStart, entry.duration, entry.responseStart && entry.startTime
             ? entry.responseStart - entry.startTime
             : 0, entry.transferSize > entry.encodedBodySize
             ? entry.transferSize - entry.encodedBodySize
@@ -120,7 +121,7 @@ function default_1(app, opts) {
             if (performance.timing.loadEventEnd || performance.now() > 30000) {
                 pageLoadTimingSent = true;
                 const { navigationStart, requestStart, responseStart, responseEnd, domContentLoadedEventStart, domContentLoadedEventEnd, loadEventStart, loadEventEnd, } = performance.timing;
-                app.send(new index_js_1.PageLoadTiming(requestStart - navigationStart || 0, responseStart - navigationStart || 0, responseEnd - navigationStart || 0, domContentLoadedEventStart - navigationStart || 0, domContentLoadedEventEnd - navigationStart || 0, loadEventStart - navigationStart || 0, loadEventEnd - navigationStart || 0, firstPaint, firstContentfulPaint));
+                app.send(new messages_js_1.PageLoadTiming(requestStart - navigationStart || 0, responseStart - navigationStart || 0, responseEnd - navigationStart || 0, domContentLoadedEventStart - navigationStart || 0, domContentLoadedEventEnd - navigationStart || 0, loadEventStart - navigationStart || 0, loadEventEnd - navigationStart || 0, firstPaint, firstContentfulPaint));
             }
         }, 30);
     }
@@ -157,7 +158,7 @@ function default_1(app, opts) {
                     ? Math.max(interactiveWindowStartTime, firstContentfulPaint, performance.timing.domContentLoadedEventEnd -
                         performance.timing.navigationStart || 0)
                     : 0;
-                app.send(new index_js_1.PageRenderTiming(speedIndex, firstContentfulPaint > visuallyComplete
+                app.send(new messages_js_1.PageRenderTiming(speedIndex, firstContentfulPaint > visuallyComplete
                     ? firstContentfulPaint
                     : visuallyComplete, timeToInteractive));
             }

package/cjs/modules/viewport.d.ts

@@ -1,2 +1,2 @@
-import App from "../app/index.js";
+import type App from "../app/index.js";
 export default function (app: App): void;

package/cjs/modules/viewport.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-const index_js_1 = require("../messages/index.js");
+const messages_js_1 = require("../common/messages.js");
 function default_1(app) {
     let url, width, height;
     let navigationStart = performance.timing.navigationStart;
@@ -8,7 +8,7 @@ function default_1(app) {
         const { URL } = document;
         if (URL !== url) {
             url = URL;
-            app.send(new index_js_1.SetPageLocation(url, document.referrer, navigationStart));
+            app.send(new messages_js_1.SetPageLocation(url, document.referrer, navigationStart));
             navigationStart = 0;
         }
     });
@@ -17,12 +17,12 @@ function default_1(app) {
         if (innerWidth !== width || innerHeight !== height) {
             width = innerWidth;
             height = innerHeight;
-            app.send(new index_js_1.SetViewportSize(width, height));
+            app.send(new messages_js_1.SetViewportSize(width, height));
         }
     });
     const sendSetPageVisibility = document.hidden === undefined
         ? Function.prototype
-        : app.safe(() => app.send(new index_js_1.SetPageVisibility(document.hidden)));
+        : app.safe(() => app.send(new messages_js_1.SetPageVisibility(document.hidden)));
     app.attachStartCallback(() => {
         url = '';
         width = height = -1;

package/lib/app/guards.d.ts

@@ -0,0 +1,17 @@
+export declare function isSVGElement(node: Element): node is SVGElement;
+export declare function isElementNode(node: Node): node is Element;
+export declare function isTextNode(node: Node): node is Text;
+export declare function isRootNode(node: Node): boolean;
+declare type TagTypeMap = {
+    HTML: HTMLHtmlElement;
+    IMG: HTMLImageElement;
+    INPUT: HTMLInputElement;
+    TEXTAREA: HTMLTextAreaElement;
+    SELECT: HTMLSelectElement;
+    LABEL: HTMLLabelElement;
+    IFRAME: HTMLIFrameElement;
+    STYLE: HTMLStyleElement | SVGStyleElement;
+    LINK: HTMLLinkElement;
+};
+export declare function hasTag<T extends keyof TagTypeMap>(el: Node, tagName: T): el is TagTypeMap[typeof tagName];
+export {};

package/lib/app/guards.js

@@ -0,0 +1,16 @@
+export function isSVGElement(node) {
+    return node.namespaceURI === 'http://www.w3.org/2000/svg';
+}
+export function isElementNode(node) {
+    return node.nodeType === Node.ELEMENT_NODE;
+}
+export function isTextNode(node) {
+    return node.nodeType === Node.TEXT_NODE;
+}
+export function isRootNode(node) {
+    return node.nodeType === Node.DOCUMENT_NODE ||
+        node.nodeType === Node.DOCUMENT_FRAGMENT_NODE;
+}
+export function hasTag(el, tagName) {
+    return el.nodeName.toUpperCase() === tagName;
+}

package/lib/app/index.d.ts

@@ -1,4 +1,4 @@
-import Message from "../messages/message.js";
+import type Message from "../common/messages.js";
 import Nodes from "./nodes.js";
 import Sanitizer from "./sanitizer.js";
 import Ticker from "./ticker.js";
@@ -7,17 +7,28 @@ import Session from "./session.js";
 import type { Options as ObserverOptions } from "./observer/top_observer.js";
 import type { Options as SanitizerOptions } from "./sanitizer.js";
 import type { Options as LoggerOptions } from "./logger.js";
-import type { Options as WebworkerOptions } from "../../webworker/types.js";
+import type { Options as WebworkerOptions } from "../common/webworker.js";
 export interface StartOptions {
     userID?: string;
     metadata?: Record<string, string>;
     forceNew?: boolean;
 }
-export interface OnStartInfo {
+interface OnStartInfo {
     sessionID: string;
     sessionToken: string;
     userUUID: string;
 }
+declare const CANCELED: "canceled";
+declare type SuccessfulStart = OnStartInfo & {
+    success: true;
+};
+declare type UnsuccessfulStart = {
+    reason: typeof CANCELED | string;
+    success: false;
+};
+declare const UnsuccessfulStart: (reason: string) => UnsuccessfulStart;
+declare const SuccessfulStart: (body: OnStartInfo) => SuccessfulStart;
+export declare type StartPromiseReturn = SuccessfulStart | UnsuccessfulStart;
 declare type StartCallback = (i: OnStartInfo) => void;
 declare type CommitCallback = (messages: Array<Message>) => void;
 declare type AppOptions = {
@@ -33,10 +44,11 @@ declare type AppOptions = {
     __is_snippet: boolean;
     __debug_report_edp: string | null;
     __debug__?: LoggerOptions;
+    localStorage: Storage;
+    sessionStorage: Storage;
     onStart?: StartCallback;
 } & WebworkerOptions;
 export declare type Options = AppOptions & ObserverOptions & SanitizerOptions;
-export declare const CANCELED = "canceled";
 export declare const DEFAULT_INGEST_POINT = "https://api.openreplay.com/ingest";
 export default class App {
     readonly nodes: Nodes;
@@ -46,6 +58,8 @@ export default class App {
     readonly debug: Logger;
     readonly notify: Logger;
     readonly session: Session;
+    readonly localStorage: Storage;
+    readonly sessionStorage: Storage;
     private readonly messages;
     private readonly observer;
     private readonly startCallbacks;
@@ -88,7 +102,7 @@ export default class App {
     active(): boolean;
     resetNextPageSession(flag: boolean): void;
     private _start;
-    start(options?: StartOptions): Promise<OnStartInfo>;
+    start(options?: StartOptions): Promise<StartPromiseReturn>;
     stop(): void;
 }
 export {};