@openreplay/tracker 3.5.12 → 3.5.14

package/lib/modules/cssrules.js

@@ -1,4 +1,5 @@
 import { CSSInsertRuleURLBased, CSSDeleteRule, TechnicalInfo } from "../common/messages.js";
+import { hasTag } from "../app/guards.js";
 export default function (app) {
     if (app === null) {
         return;
@@ -30,10 +31,7 @@ export default function (app) {
         return deleteRule.call(this, index);
     };
     app.nodes.attachNodeCallback((node) => {
-        if (!(node instanceof HTMLStyleElement)) {
-            return;
-        }
-        if (!(node.sheet instanceof CSSStyleSheet)) {
+        if (!hasTag(node, "STYLE") || !node.sheet) {
             return;
         }
         if (node.textContent !== null && node.textContent.trim().length > 0) {

package/lib/modules/exception.d.ts

@@ -1,5 +1,5 @@
+import type App from "../app/index.js";
 import type Message from "../common/messages.js";
-import App from "../app/index.js";
 export interface Options {
     captureExceptions: boolean;
 }

package/lib/modules/img.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/modules/img.js

@@ -1,5 +1,6 @@
 import { timestamp, isURL } from "../utils.js";
 import { ResourceTiming, SetNodeAttributeURLBased, SetNodeAttribute } from "../common/messages.js";
+import { hasTag } from "../app/guards.js";
 const PLACEHOLDER_SRC = "https://static.openreplay.com/tracker/placeholder.jpeg";
 export default function (app) {
     function sendPlaceholder(id, node) {
@@ -17,7 +18,7 @@ export default function (app) {
         if (id === undefined) {
             return;
         }
-        const { src, complete, naturalWidth, naturalHeight } = this;
+        const { src, complete, naturalWidth, naturalHeight, srcset } = this;
         if (!complete) {
             return;
         }
@@ -31,28 +32,35 @@ export default function (app) {
         }
         else {
             app.send(new SetNodeAttributeURLBased(id, 'src', src, app.getBaseHref()));
+            srcset && app.send(new 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 SetNodeAttributeURLBased(id, 'src', src, app.getBaseHref()));
+                if (mutation.attributeName === "src") {
+                    const src = target.src;
+                    app.send(new SetNodeAttributeURLBased(id, 'src', src, app.getBaseHref()));
+                }
+                if (mutation.attributeName === "srcset") {
+                    const srcset = target.srcset;
+                    app.send(new SetNodeAttribute(id, 'srcset', srcset));
+                }
             }
         }
     });
     app.nodes.attachNodeCallback((node) => {
-        if (!(node instanceof HTMLImageElement)) {
+        if (!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"] });
     });
 }

package/lib/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/lib/modules/input.js

@@ -1,22 +1,18 @@
 import { normSpaces, IN_BROWSER, getLabelAttribute, hasOpenreplayAttribute, } from "../utils.js";
+import { hasTag } from "../app/guards.js";
 import { SetInputTarget, SetInputValue, SetInputChecked } from "../common/messages.js";
+const INPUT_TYPES = ['text', 'password', 'email', 'search', 'number', 'range', 'date'];
 function isTextEditable(node) {
-    if (node instanceof HTMLTextAreaElement) {
+    if (hasTag(node, "TEXTAREA")) {
         return true;
     }
-    if (!(node instanceof HTMLInputElement)) {
+    if (!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 (!hasTag(node, "INPUT")) {
         return false;
     }
     const type = node.type;
@@ -26,7 +22,7 @@ const labelElementFor = IN_BROWSER && 'labels' in HTMLInputElement.prototype
     ? (node) => {
         let p = node;
         while ((p = p.parentNode) !== null) {
-            if (p instanceof HTMLLabelElement) {
+            if (hasTag(p, "LABEL")) {
                 return p;
             }
         }
@@ -38,7 +34,7 @@ const labelElementFor = IN_BROWSER && 'labels' in HTMLInputElement.prototype
     : (node) => {
         let p = node;
         while ((p = p.parentNode) !== null) {
-            if (p instanceof HTMLLabelElement) {
+            if (hasTag(p, "LABEL")) {
                 return p;
             }
         }
@@ -67,7 +63,8 @@ export default function (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);
@@ -79,22 +76,23 @@ export default function (app, opts) {
         let value = node.value;
         let inputMode = options.defaultInputMode;
         if (node.type === 'password' || hasOpenreplayAttribute(node, 'hidden')) {
-            inputMode = 2 /* Hidden */;
+            inputMode = 2 /* InputMode.Hidden */;
         }
         else if (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;
@@ -144,7 +142,7 @@ export default function (app, opts) {
             return;
         }
         // TODO: support multiple select (?): use selectedOptions; Need send target?
-        if (node instanceof HTMLSelectElement) {
+        if (hasTag(node, "SELECT")) {
             sendInputValue(id, node);
             app.attachEventListener(node, "change", () => {
                 sendInputValue(id, node);

package/lib/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/lib/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/lib/modules/mouse.js

@@ -1,3 +1,4 @@
+import { hasTag, isSVGElement } from "../app/guards.js";
 import { normSpaces, hasOpenreplayAttribute, getLabelAttribute, } from "../utils.js";
 import { MouseMove, MouseClick } from "../common/messages.js";
 import { getInputLabel } from "./input.js";
@@ -47,7 +48,7 @@ function _getTarget(target) {
         }
         element = element.parentElement;
     }
-    if (target instanceof SVGElement) {
+    if (isSVGElement(target)) {
         let owner = target.ownerSVGElement;
         while (owner !== null) {
             target = owner;
@@ -77,7 +78,7 @@ export default function (app) {
         if (dl !== null) {
             return dl;
         }
-        if (target instanceof HTMLInputElement) {
+        if (hasTag(target, "INPUT")) {
             return getInputLabel(target);
         }
         if (isClickable(target)) {

package/lib/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/lib/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/lib/modules/scroll.js

@@ -1,4 +1,5 @@
 import { SetViewportScroll, SetNodeScroll } from "../common/messages.js";
+import { isElementNode } from "../app/guards.js";
 export default function (app) {
     let documentScroll = false;
     const nodeScroll = new Map();
@@ -20,8 +21,8 @@ export default function (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 && isElementNode(node) && node.scrollLeft + node.scrollTop > 0) {
             nodeScroll.set(node, [node.scrollLeft, node.scrollTop]);
         }
     });

package/lib/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/lib/modules/timing.js

@@ -1,3 +1,4 @@
+import { hasTag } from "../app/guards.js";
 import { isURL } from "../utils.js";
 import { ResourceTiming, PageLoadTiming, PageRenderTiming } from "../common/messages.js";
 function getPaintBlocks(resources) {
@@ -7,7 +8,7 @@ function getPaintBlocks(resources) {
     for (let i = 0; i < elements.length; i++) {
         const element = elements[i];
         let src = '';
-        if (element instanceof HTMLImageElement) {
+        if (hasTag(element, "IMG")) {
             src = element.currentSrc || element.src;
         }
         if (!src) {

package/lib/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/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@openreplay/tracker",
   "description": "The OpenReplay tracker main package",
-  "version": "3.5.12",
+  "version": "3.5.14",
   "keywords": [
     "logging",
     "replay"
@@ -25,11 +25,11 @@
   "devDependencies": {
     "@babel/core": "^7.10.2",
     "@rollup/plugin-babel": "^5.0.3",
-    "@rollup/plugin-node-resolve": "^8.0.1",
-    "@typescript-eslint/eslint-plugin": "^2.34.0",
-    "@typescript-eslint/parser": "^2.34.0",
-    "eslint": "^6.8.0",
-    "eslint-plugin-prettier": "^3.1.4",
+    "@rollup/plugin-node-resolve": "^10.0.0",
+    "@typescript-eslint/eslint-plugin": "^4.33.0",
+    "@typescript-eslint/parser": "^4.33.0",
+    "eslint": "^7.8.0",
+    "eslint-plugin-prettier": "^4.1.4",
     "prettier": "^2.0.0",
     "replace-in-files": "^2.0.3",
     "rollup": "^2.17.0",
@@ -41,6 +41,6 @@
     "error-stack-parser": "^2.0.6"
   },
   "engines": {
-    "node": ">=12"
+    "node": ">=14.15"
   }
 }

package/cjs/app/context.d.ts

@@ -1,18 +0,0 @@
-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 declare function inDocument(node: Node): boolean;
-export {};

package/cjs/app/context.js

@@ -1,73 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.inDocument = exports.isInstance = void 0;
-// 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)
-// TODO: most efficient and common way
-// Problem: on YouTube there is context[constr.name] undefined for constr=ShadowDom due to some minimisations
-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 !== window) {
-        // @ts-ignore
-        if (context[constr.name] && node instanceof context[constr.name]) {
-            return true;
-        }
-        // @ts-ignore
-        context = context.parent || window;
-    }
-    // @ts-ignore
-    return context[constr.name] ? node instanceof context[constr.name] : node instanceof constr;
-}
-exports.isInstance = isInstance;
-// TODO: ensure 1. it works in every cases (iframes/detached nodes) and 2. the most efficient
-function inDocument(node) {
-    const doc = node.ownerDocument;
-    if (!doc) {
-        return true;
-    } // Document
-    let current = node;
-    while (current) {
-        if (current === doc) {
-            return true;
-        }
-        else if (isInstance(current, ShadowRoot)) {
-            current = current.host;
-        }
-        else {
-            current = current.parentNode;
-        }
-    }
-    return false;
-}
-exports.inDocument = inDocument;
-// export function inDocument(node: Node): boolean {
-//   // @ts-ignore compatability
-//   if (node.getRootNode) {
-//     let root: Node
-//     while ((root = node.getRootNode()) !== node) {
-//        ////
-//     }
-//   }
-//   const doc = node.ownerDocument
-//   if (!doc) { return false }
-//   if (doc.contains(node)) { return true }
-//   let context: Window = 
-//     // @ts-ignore (for EI, Safary)
-//     doc.parentWindow || 
-//     doc.defaultView;
-//   while(context.parent && context.parent !== context) {
-//     if (context.document.contains(node)) {
-//       return true
-//     }
-//     // @ts-ignore
-//     context = context.parent
-//   }
-//   return false;
-// }

package/lib/app/context.d.ts

@@ -1,18 +0,0 @@
-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 declare function inDocument(node: Node): boolean;
-export {};

package/lib/app/context.js

@@ -1,68 +0,0 @@
-// 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)
-// TODO: most efficient and common way
-// Problem: on YouTube there is context[constr.name] undefined for constr=ShadowDom due to some minimisations
-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 !== window) {
-        // @ts-ignore
-        if (context[constr.name] && node instanceof context[constr.name]) {
-            return true;
-        }
-        // @ts-ignore
-        context = context.parent || window;
-    }
-    // @ts-ignore
-    return context[constr.name] ? node instanceof context[constr.name] : node instanceof constr;
-}
-// TODO: ensure 1. it works in every cases (iframes/detached nodes) and 2. the most efficient
-export function inDocument(node) {
-    const doc = node.ownerDocument;
-    if (!doc) {
-        return true;
-    } // Document
-    let current = node;
-    while (current) {
-        if (current === doc) {
-            return true;
-        }
-        else if (isInstance(current, ShadowRoot)) {
-            current = current.host;
-        }
-        else {
-            current = current.parentNode;
-        }
-    }
-    return false;
-}
-// export function inDocument(node: Node): boolean {
-//   // @ts-ignore compatability
-//   if (node.getRootNode) {
-//     let root: Node
-//     while ((root = node.getRootNode()) !== node) {
-//        ////
-//     }
-//   }
-//   const doc = node.ownerDocument
-//   if (!doc) { return false }
-//   if (doc.contains(node)) { return true }
-//   let context: Window = 
-//     // @ts-ignore (for EI, Safary)
-//     doc.parentWindow || 
-//     doc.defaultView;
-//   while(context.parent && context.parent !== context) {
-//     if (context.document.contains(node)) {
-//       return true
-//     }
-//     // @ts-ignore
-//     context = context.parent
-//   }
-//   return false;
-// }