@openreplay/tracker 3.5.11 → 3.5.13

package/cjs/modules/img.js

@@ -2,6 +2,7 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 const utils_js_1 = require("../utils.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) {
@@ -19,7 +20,7 @@ function default_1(app) {
         if (id === undefined) {
             return;
         }
-        const { src, complete, naturalWidth, naturalHeight } = this;
+        const { src, complete, naturalWidth, naturalHeight, srcset } = this;
         if (!complete) {
             return;
         }
@@ -33,29 +34,36 @@ function default_1(app) {
         }
         else {
             app.send(new messages_js_1.SetNodeAttributeURLBased(id, 'src', src, app.getBaseHref()));
+            srcset && app.send(new messages_js_1.SetNodeAttribute(id, 'srcset', srcset));
         }
     });
     const observer = new MutationObserver((mutations) => {
         for (const mutation of mutations) {
-            if (mutation.type === "attributes" && mutation.attributeName === "src") {
+            if (mutation.type === "attributes") {
                 const target = mutation.target;
                 const id = app.nodes.getID(target);
                 if (id === undefined) {
                     return;
                 }
-                const src = target.src;
-                app.send(new messages_js_1.SetNodeAttributeURLBased(id, 'src', src, app.getBaseHref()));
+                if (mutation.attributeName === "src") {
+                    const src = target.src;
+                    app.send(new messages_js_1.SetNodeAttributeURLBased(id, 'src', src, app.getBaseHref()));
+                }
+                if (mutation.attributeName === "srcset") {
+                    const srcset = target.srcset;
+                    app.send(new messages_js_1.SetNodeAttribute(id, 'srcset', srcset));
+                }
             }
         }
     });
     app.nodes.attachNodeCallback((node) => {
-        if (!(node instanceof HTMLImageElement)) {
+        if (!(0, guards_js_1.hasTag)(node, "IMG")) {
             return;
         }
         app.nodes.attachElementListener('error', node, sendImgSrc);
         app.nodes.attachElementListener('load', node, sendImgSrc);
         sendImgSrc.call(node);
-        observer.observe(node, { attributes: true });
+        observer.observe(node, { attributes: true, attributeFilter: ["src", "srcset"] });
     });
 }
 exports.default = default_1;

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 {
@@ -10,6 +10,7 @@ export interface Options {
     obscureInputNumbers: boolean;
     obscureInputEmails: boolean;
     defaultInputMode: InputMode;
+    obscureInputDates: boolean;
 }
 export default function (app: App, opts: Partial<Options>): void;
 export {};

package/cjs/modules/input.js

@@ -2,24 +2,20 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.getInputLabel = void 0;
 const utils_js_1 = require("../utils.js");
+const guards_js_1 = require("../app/guards.js");
 const messages_js_1 = require("../common/messages.js");
+const INPUT_TYPES = ['text', 'password', 'email', 'search', 'number', 'range', 'date'];
 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;
-    return (type === 'text' ||
-        type === 'password' ||
-        type === 'email' ||
-        type === 'search' ||
-        type === 'number' ||
-        type === 'range');
+    return INPUT_TYPES.includes(node.type);
 }
 function isCheckable(node) {
-    if (!(node instanceof HTMLInputElement)) {
+    if (!(0, guards_js_1.hasTag)(node, "INPUT")) {
         return false;
     }
     const type = node.type;
@@ -29,7 +25,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 +37,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,7 +67,8 @@ function default_1(app, opts) {
     const options = Object.assign({
         obscureInputNumbers: true,
         obscureInputEmails: true,
-        defaultInputMode: 0 /* Plain */,
+        defaultInputMode: 0 /* InputMode.Plain */,
+        obscureInputDates: false,
     }, opts);
     function sendInputTarget(id, node) {
         const label = getInputLabel(node);
@@ -83,22 +80,23 @@ function default_1(app, opts) {
         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 */ &&
-                ((options.obscureInputNumbers && /\d\d\d\d/.test(value)) ||
+            (inputMode === 0 /* InputMode.Plain */ &&
+                ((options.obscureInputNumbers && node.type !== 'date' && /\d\d\d\d/.test(value)) ||
+                    (options.obscureInputDates && node.type === 'date') ||
                     (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;
@@ -148,7 +146,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);

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/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,5 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
+const guards_js_1 = require("../app/guards.js");
 const utils_js_1 = require("../utils.js");
 const messages_js_1 = require("../common/messages.js");
 const input_js_1 = require("./input.js");
@@ -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)) {

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/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,6 +1,7 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 const messages_js_1 = require("../common/messages.js");
+const guards_js_1 = require("../app/guards.js");
 function default_1(app) {
     let documentScroll = false;
     const nodeScroll = new Map();
@@ -22,8 +23,8 @@ function default_1(app) {
         documentScroll = false;
         nodeScroll.clear();
     });
-    app.nodes.attachNodeCallback(node => {
-        if (node instanceof Element && node.scrollLeft + node.scrollTop > 0) {
+    app.nodes.attachNodeCallback((node, isStart) => {
+        if (isStart && (0, guards_js_1.isElementNode)(node) && node.scrollLeft + node.scrollTop > 0) {
             nodeScroll.set(node, [node.scrollLeft, node.scrollTop]);
         }
     });

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,5 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
+const guards_js_1 = require("../app/guards.js");
 const utils_js_1 = require("../utils.js");
 const messages_js_1 = require("../common/messages.js");
 function getPaintBlocks(resources) {
@@ -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) {

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/lib/app/guards.d.ts

@@ -0,0 +1,18 @@
+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;
+    style: 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 === tagName;
+}

package/lib/app/index.d.ts

@@ -13,11 +13,22 @@ export interface StartOptions {
     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>;
-    stop(): void;
+    start(options?: StartOptions): Promise<StartPromiseReturn>;
+    stop(calledFromAPI?: boolean): void;
 }
 export {};