@openreplay/tracker 14.0.10-beta.1 → 14.0.10

package/cjs/modules/userTesting/styles.js

@@ -1,266 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.spinnerStyles = exports.taskButtonsRow = exports.taskButtonBorderedStyle = exports.taskButtonStyle = exports.taskDescriptionStyle = exports.taskTextStyle = exports.taskDescriptionCard = exports.taskNumberDone = exports.taskNumberActive = exports.paginationStyle = exports.stopWidgetStyle = exports.buttonWidgetStyle = exports.symbolIcon = exports.endSectionStyle = exports.descriptionWidgetStyle = exports.titleWidgetStyle = exports.contentStyle = exports.sectionTitleStyle = exports.buttonStyle = exports.noticeStyle = exports.descriptionStyle = exports.titleStyle = exports.containerWidgetStyle = exports.containerStyle = exports.bgStyle = void 0;
-exports.bgStyle = {
-    position: 'fixed',
-    top: 0,
-    left: 0,
-    width: '100vw',
-    height: '100vh',
-    background: 'rgba(0, 0, 0, 0.40)',
-    display: 'flex',
-    alignItems: 'center',
-    justifyContent: 'center',
-    zIndex: 999999,
-    fontFamily: `-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"`,
-};
-exports.containerStyle = {
-    display: 'flex',
-    flexDirection: 'column',
-    gap: '2rem',
-    alignItems: 'center',
-    padding: '1.5rem',
-    borderRadius: '2px',
-    border: '1px solid #D9D9D9',
-    background: '#FFF',
-    width: '22rem',
-};
-exports.containerWidgetStyle = {
-    display: 'flex',
-    'flex-direction': 'column',
-    gap: 'unset',
-    'align-items': 'center',
-    padding: 'unset',
-    fontFamily: `-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"`,
-    'border-radius': '2px',
-    border: '1px solid #D9D9D9',
-    background: 'rgba(255, 255, 255, 0.75)',
-    width: '22rem',
-};
-exports.titleStyle = {
-    fontFamily: 'Verdana, sans-serif',
-    fontSize: '1.25rem',
-    fontStyle: 'normal',
-    fontWeight: '500',
-    lineHeight: '1.75rem',
-    color: 'rgba(0, 0, 0, 0.85)',
-};
-exports.descriptionStyle = {
-    borderTop: '1px solid rgba(0, 0, 0, 0.06)',
-    borderBottom: '1px solid rgba(0, 0, 0, 0.06)',
-    padding: '1.25rem 0rem',
-    color: 'rgba(0, 0, 0, 0.85)',
-    fontFamily: 'Verdana, sans-serif',
-    fontSize: '13px',
-    fontStyle: 'normal',
-    fontWeight: '400',
-    lineHeight: 'auto',
-    whiteSpace: 'pre-wrap',
-};
-exports.noticeStyle = {
-    color: 'rgba(0, 0, 0, 0.85)',
-    fontFamily: 'Verdana, sans-serif',
-    fontSize: '0.875rem',
-    fontStyle: 'normal',
-    fontWeight: '400',
-    lineHeight: '1.375rem',
-};
-exports.buttonStyle = {
-    display: 'flex',
-    padding: '0.4rem 0.9375rem',
-    justifyContent: 'center',
-    alignItems: 'center',
-    gap: '0.625rem',
-    borderRadius: '0.25rem',
-    border: '1px solid #394EFF',
-    background: '#394EFF',
-    boxShadow: '0px 2px 0px 0px rgba(0, 0, 0, 0.04)',
-    color: '#FFF',
-    textAlign: 'center',
-    fontFamily: 'Verdana, sans-serif',
-    fontSize: '1rem',
-    fontStyle: 'normal',
-    fontWeight: '500',
-    lineHeight: '1.5rem',
-    cursor: 'pointer',
-};
-exports.sectionTitleStyle = {
-    fontFamily: 'Verdana, sans-serif',
-    fontSize: '13px',
-    fontWeight: '500',
-    lineHeight: 'auto',
-    display: 'flex',
-    justifyContent: 'space-between',
-    width: '100%',
-    cursor: 'pointer',
-};
-exports.contentStyle = {
-    display: 'flex',
-    flexDirection: 'column',
-    alignItems: 'flex-start',
-    gap: '0.625rem',
-    fontSize: '13px',
-    lineHeight: 'auto',
-};
-// New widget styles
-exports.titleWidgetStyle = {
-    padding: '0.5rem',
-    gap: '0.5rem',
-    fontFamily: 'Verdana, sans-serif',
-    fontSize: '16px',
-    fontStyle: 'normal',
-    fontWeight: '500',
-    lineHeight: 'auto',
-    color: 'white',
-    display: 'flex',
-    alignItems: 'center',
-    width: '100%',
-    borderRadius: '2px',
-    background: 'rgba(0, 0, 0, 0.75)',
-    boxSizing: 'border-box',
-};
-exports.descriptionWidgetStyle = {
-    boxSizing: 'border-box',
-    display: 'block',
-    width: '100%',
-    borderBottom: '1px solid #D9D9D9',
-    background: '#FFF',
-    padding: '0.65rem',
-    alignSelf: 'stretch',
-    color: '#000',
-    fontFamily: 'Verdana, sans-serif',
-    // fontSize: '0.875rem',
-    fontStyle: 'normal',
-    fontWeight: '400',
-    // lineHeight: '1.375rem',
-};
-exports.endSectionStyle = {
-    ...exports.descriptionWidgetStyle,
-    display: 'flex',
-    flexDirection: 'column',
-    alignItems: 'center',
-    gap: '0.625rem',
-};
-exports.symbolIcon = {
-    fontSize: '1.25rem',
-    fontWeight: '500',
-    cursor: 'pointer',
-    color: '#394EFF',
-};
-exports.buttonWidgetStyle = {
-    display: 'flex',
-    padding: '0.4rem 0.9375rem',
-    justifyContent: 'center',
-    alignItems: 'center',
-    gap: '0.625rem',
-    borderRadius: '0.25rem',
-    border: '1px solid #394EFF',
-    background: '#394EFF',
-    boxShadow: '0px 2px 0px 0px rgba(0, 0, 0, 0.04)',
-    color: '#FFF',
-    textAlign: 'center',
-    fontFamily: 'Verdana, sans-serif',
-    fontSize: '1rem',
-    fontStyle: 'normal',
-    fontWeight: '500',
-    lineHeight: '1.5rem',
-    width: '100%',
-    boxSizing: 'border-box',
-    cursor: 'pointer',
-};
-exports.stopWidgetStyle = {
-    marginTop: '1rem',
-    marginBottom: '1rem',
-    cursor: 'pointer',
-    display: 'block',
-    fontWeight: '500',
-    fontSize: '13px!important',
-    lineHeight: 'auto',
-};
-exports.paginationStyle = {
-    display: 'flex',
-    justifyContent: 'space-between',
-    alignItems: 'center',
-    gap: '1rem',
-    padding: '0.5rem',
-    width: '100%',
-    boxSizing: 'border-box',
-};
-exports.taskNumberActive = {
-    display: 'flex',
-    flexDirection: 'column',
-    alignItems: 'center',
-    justifyContent: 'center',
-    borderRadius: '6.25em',
-    outline: '1px solid #394EFF',
-    fontSize: '13px',
-    height: '24px',
-    width: '24px',
-};
-exports.taskNumberDone = {
-    display: 'flex',
-    flexDirection: 'column',
-    alignItems: 'center',
-    justifyContent: 'center',
-    borderRadius: '6.25em',
-    outline: '1px solid #D2DFFF',
-    boxShadow: '0px 2px 0px 0px rgba(0, 0, 0, 0.04)',
-    background: '#D2DFFF',
-    fontSize: '13px',
-    height: '24px',
-    width: '24px',
-};
-exports.taskDescriptionCard = {
-    borderRadius: '0.375rem',
-    border: '1px solid rgba(0, 0, 0, 0.06)',
-    background: '#F5F7FF',
-    boxShadow: '0px 2px 0px 0px rgba(0, 0, 0, 0.04)',
-    display: 'flex',
-    flexDirection: 'column',
-    padding: '0.625rem 0.9375rem',
-    gap: '0.5rem',
-    alignSelf: 'stretch',
-};
-exports.taskTextStyle = {
-    fontWeight: 'bold',
-};
-exports.taskDescriptionStyle = {
-    fontSize: '13px',
-    lineHeight: 'auto',
-};
-exports.taskButtonStyle = {
-    marginRight: '0.5rem',
-    cursor: 'pointer',
-    color: '#394EFF',
-    textAlign: 'center',
-    fontFamily: 'Verdana, sans-serif',
-    fontSize: '13px',
-    fontStyle: 'normal',
-    fontWeight: '500',
-    lineHeight: 'auto',
-};
-exports.taskButtonBorderedStyle = {
-    ...exports.taskButtonStyle,
-    display: 'flex',
-    padding: '0.25rem 0.9375rem',
-    justifyContent: 'center',
-    alignItems: 'center',
-    gap: '0.5rem',
-    borderRadius: '0.25rem',
-    border: '1px solid #394EFF',
-};
-exports.taskButtonsRow = {
-    display: 'flex',
-    justifyContent: 'space-between',
-    alignItems: 'center',
-    width: '100%',
-    boxSizing: 'border-box',
-};
-exports.spinnerStyles = {
-    border: '4px solid rgba(255, 255, 255, 0.4)',
-    width: '16px',
-    height: '16px',
-    borderRadius: '50%',
-    borderLeftColor: '#fff',
-    animation: 'spin 0.5s linear infinite',
-};

package/cjs/modules/userTesting/utils.js

@@ -1,87 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.TEST_ID = exports.SESSION_ID = exports.TASK_IND = exports.TEST_START = exports.createElement = exports.createSpinner = exports.addKeyframes = exports.generateChevron = exports.generateGrid = void 0;
-const styles_js_1 = require("./styles.js");
-function generateGrid() {
-    const grid = document.createElement('div');
-    grid.className = 'grid';
-    for (let i = 0; i < 16; i++) {
-        const cell = document.createElement('div');
-        Object.assign(cell.style, {
-            width: '2px',
-            height: '2px',
-            borderRadius: '10px',
-            background: 'white',
-        });
-        cell.className = 'cell';
-        grid.appendChild(cell);
-    }
-    Object.assign(grid.style, {
-        display: 'grid',
-        gridTemplateColumns: 'repeat(4, 1fr)',
-        gridTemplateRows: 'repeat(4, 1fr)',
-        gap: '2px',
-        cursor: 'grab',
-    });
-    return grid;
-}
-exports.generateGrid = generateGrid;
-function generateChevron() {
-    const triangle = document.createElement('div');
-    Object.assign(triangle.style, {
-        width: '0',
-        height: '0',
-        borderLeft: '7px solid transparent',
-        borderRight: '7px solid transparent',
-        borderBottom: '7px solid white',
-    });
-    const container = document.createElement('div');
-    container.appendChild(triangle);
-    Object.assign(container.style, {
-        display: 'flex',
-        alignItems: 'center',
-        justifyContent: 'center',
-        width: '16px',
-        height: '16px',
-        cursor: 'pointer',
-        marginLeft: 'auto',
-        transform: 'rotate(180deg)',
-    });
-    return container;
-}
-exports.generateChevron = generateChevron;
-function addKeyframes() {
-    const styleSheet = document.createElement('style');
-    styleSheet.type = 'text/css';
-    styleSheet.innerText = `@keyframes spin {
-        0% { transform: rotate(0deg); }
-        100% { transform: rotate(360deg); }
-    }`;
-    document.head.appendChild(styleSheet);
-}
-exports.addKeyframes = addKeyframes;
-function createSpinner() {
-    addKeyframes();
-    const spinner = document.createElement('div');
-    spinner.classList.add('spinner');
-    Object.assign(spinner.style, styles_js_1.spinnerStyles);
-    return spinner;
-}
-exports.createSpinner = createSpinner;
-function createElement(tag, className, styles, textContent, id) {
-    const element = document.createElement(tag);
-    element.className = className;
-    Object.assign(element.style, styles);
-    if (textContent) {
-        element.textContent = textContent;
-    }
-    if (id) {
-        element.id = id;
-    }
-    return element;
-}
-exports.createElement = createElement;
-exports.TEST_START = 'or_uxt_test_start';
-exports.TASK_IND = 'or_uxt_task_index';
-exports.SESSION_ID = 'or_uxt_session_id';
-exports.TEST_ID = 'or_uxt_test_id';

package/cjs/modules/viewport.js

@@ -1,43 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-const utils_js_1 = require("../utils.js");
-const messages_gen_js_1 = require("../app/messages.gen.js");
-function default_1(app) {
-    let url, width, height;
-    let navigationStart;
-    let referrer = document.referrer;
-    const sendSetPageLocation = app.safe(() => {
-        const { URL } = document;
-        if (URL !== url) {
-            url = URL;
-            app.send((0, messages_gen_js_1.SetPageLocation)(url, referrer, navigationStart, document.title));
-            navigationStart = 0;
-            referrer = url;
-        }
-    });
-    const sendSetViewportSize = app.safe(() => {
-        const { innerWidth, innerHeight } = window;
-        if (innerWidth !== width || innerHeight !== height) {
-            width = innerWidth;
-            height = innerHeight;
-            app.send((0, messages_gen_js_1.SetViewportSize)(width, height));
-        }
-    });
-    const sendSetPageVisibility = document.hidden === undefined
-        ? Function.prototype
-        : app.safe(() => app.send((0, messages_gen_js_1.SetPageVisibility)(document.hidden)));
-    app.attachStartCallback(() => {
-        url = null;
-        navigationStart = (0, utils_js_1.getTimeOrigin)();
-        width = height = -1;
-        sendSetPageLocation();
-        sendSetViewportSize();
-        sendSetPageVisibility();
-    });
-    if (document.hidden !== undefined) {
-        app.attachEventListener(document, 'visibilitychange', sendSetPageVisibility, false, false);
-    }
-    app.ticker.attach(sendSetPageLocation, 1, false);
-    app.ticker.attach(sendSetViewportSize, 5, false);
-}
-exports.default = default_1;

package/cjs/package.json

@@ -1 +0,0 @@
-{ "type": "commonjs" }

package/cjs/utils.js

@@ -1,230 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.simpleMerge = exports.requestIdleCb = exports.deleteEventListener = exports.createEventListener = exports.createMutationObserver = exports.ngSafeBrowserMethod = exports.inIframe = exports.generateRandomId = exports.canAccessIframe = exports.hasOpenreplayAttribute = exports.getLabelAttribute = exports.deprecationWarn = exports.DOCS_HOST = exports.isURL = exports.normSpaces = exports.stars = exports.now = exports.getTimeOrigin = exports.adjustTimeOrigin = exports.MAX_STR_LEN = exports.IS_FIREFOX = exports.IN_BROWSER = void 0;
-const DEPRECATED_ATTRS = { htmlmasked: 'hidden', masked: 'obscured' };
-exports.IN_BROWSER = !(typeof window === 'undefined');
-exports.IS_FIREFOX = exports.IN_BROWSER && navigator.userAgent.match(/firefox|fxios/i);
-exports.MAX_STR_LEN = 1e5;
-// Buggy to use `performance.timeOrigin || performance.timing.navigationStart`
-// https://github.com/mdn/content/issues/4713
-// Maybe move to timer/ticker
-let timeOrigin = exports.IN_BROWSER ? Date.now() - performance.now() : 0;
-function adjustTimeOrigin() {
-    timeOrigin = Date.now() - performance.now();
-}
-exports.adjustTimeOrigin = adjustTimeOrigin;
-function getTimeOrigin() {
-    return timeOrigin;
-}
-exports.getTimeOrigin = getTimeOrigin;
-exports.now = exports.IN_BROWSER && !!performance.now
-    ? () => Math.round(performance.now() + timeOrigin)
-    : () => Date.now();
-exports.stars = 'repeat' in String.prototype
-    ? (str) => '*'.repeat(str.length)
-    : (str) => str.replace(/./g, '*');
-function normSpaces(str) {
-    return str.trim().replace(/\s+/g, ' ');
-}
-exports.normSpaces = normSpaces;
-// isAbsoluteUrl regexp:  /^([a-z][a-z\d\+\-\.]*:)?\/\//i.test(url)
-function isURL(s) {
-    return s.startsWith('https://') || s.startsWith('http://');
-}
-exports.isURL = isURL;
-// TODO: JOIN IT WITH LOGGER somehow (use logging decorators?); Don't forget about index.js loggin when there is no logger instance.
-exports.DOCS_HOST = 'https://docs.openreplay.com';
-const warnedFeatures = {};
-function deprecationWarn(nameOfFeature, useInstead, docsPath = '/') {
-    if (warnedFeatures[nameOfFeature]) {
-        return;
-    }
-    console.warn(`OpenReplay: ${nameOfFeature} is deprecated. ${useInstead ? `Please, use ${useInstead} instead.` : ''} Visit ${exports.DOCS_HOST}${docsPath} for more information.`);
-    warnedFeatures[nameOfFeature] = true;
-}
-exports.deprecationWarn = deprecationWarn;
-function getLabelAttribute(e) {
-    let value = e.getAttribute('data-openreplay-label');
-    if (value !== null) {
-        return value;
-    }
-    value = e.getAttribute('data-asayer-label');
-    if (value !== null) {
-        deprecationWarn('"data-asayer-label" attribute', '"data-openreplay-label" attribute', '/');
-    }
-    return value;
-}
-exports.getLabelAttribute = getLabelAttribute;
-function hasOpenreplayAttribute(e, attr) {
-    const newName = `data-openreplay-${attr}`;
-    if (e.hasAttribute(newName)) {
-        // @ts-ignore
-        if (DEPRECATED_ATTRS[attr]) {
-            deprecationWarn(`"${newName}" attribute`, 
-            // @ts-ignore
-            `"${DEPRECATED_ATTRS[attr]}" attribute`, '/installation/sanitize-data');
-        }
-        return true;
-    }
-    return false;
-}
-exports.hasOpenreplayAttribute = hasOpenreplayAttribute;
-/**
- * checks if iframe is accessible
- **/
-function canAccessIframe(iframe) {
-    try {
-        return Boolean(iframe.contentDocument);
-    }
-    catch (e) {
-        return false;
-    }
-}
-exports.canAccessIframe = canAccessIframe;
-function dec2hex(dec) {
-    return dec.toString(16).padStart(2, '0');
-}
-function generateRandomId(len) {
-    const arr = new Uint8Array((len || 40) / 2);
-    // msCrypto = IE11
-    // @ts-ignore
-    const safeCrypto = window.crypto || window.msCrypto;
-    if (safeCrypto) {
-        safeCrypto.getRandomValues(arr);
-        return Array.from(arr, dec2hex).join('');
-    }
-    else {
-        return Array.from({ length: len || 40 }, () => dec2hex(Math.floor(Math.random() * 16))).join('');
-    }
-}
-exports.generateRandomId = generateRandomId;
-function inIframe() {
-    try {
-        return window.self && window.top && window.self !== window.top;
-    }
-    catch (e) {
-        return true;
-    }
-}
-exports.inIframe = inIframe;
-/**
- * Because angular devs decided that its a good idea to override a browser apis
- * we need to use this to achieve safe behavior
- * */
-function ngSafeBrowserMethod(method) {
-    // @ts-ignore
-    return window.Zone && '__symbol__' in window.Zone
-        ? // @ts-ignore
-            window['Zone']['__symbol__'](method)
-        : method;
-}
-exports.ngSafeBrowserMethod = ngSafeBrowserMethod;
-function createMutationObserver(cb) {
-    const mObserver = ngSafeBrowserMethod('MutationObserver');
-    return new window[mObserver](cb);
-}
-exports.createMutationObserver = createMutationObserver;
-function createEventListener(target, event, cb, capture) {
-    const safeAddEventListener = ngSafeBrowserMethod('addEventListener');
-    try {
-        target[safeAddEventListener](event, cb, capture);
-    }
-    catch (e) {
-        const msg = e.message;
-        console.error(
-        // eslint-disable-next-line @typescript-eslint/restrict-template-expressions
-        `Openreplay: ${msg}; if this error is caused by an IframeObserver, ignore it`, event);
-    }
-}
-exports.createEventListener = createEventListener;
-function deleteEventListener(target, event, cb, capture) {
-    const safeRemoveEventListener = ngSafeBrowserMethod('removeEventListener');
-    try {
-        target[safeRemoveEventListener](event, cb, capture);
-    }
-    catch (e) {
-        const msg = e.message;
-        console.error(
-        // eslint-disable-next-line @typescript-eslint/restrict-template-expressions
-        `Openreplay: ${msg}; if this error is caused by an IframeObserver, ignore it`, event);
-    }
-}
-exports.deleteEventListener = deleteEventListener;
-class FIFOTaskScheduler {
-    constructor() {
-        this.taskQueue = [];
-        this.isRunning = false;
-    }
-    // Adds a task to the queue
-    addTask(task) {
-        this.taskQueue.push(task);
-        this.runTasks();
-    }
-    // Runs tasks from the queue
-    runTasks() {
-        if (this.isRunning || this.taskQueue.length === 0) {
-            return;
-        }
-        this.isRunning = true;
-        const executeNextTask = () => {
-            if (this.taskQueue.length === 0) {
-                this.isRunning = false;
-                return;
-            }
-            // Get the next task and execute it
-            const nextTask = this.taskQueue.shift();
-            Promise.resolve(nextTask()).then(() => {
-                requestAnimationFrame(() => executeNextTask());
-            });
-        };
-        executeNextTask();
-    }
-}
-const scheduler = new FIFOTaskScheduler();
-function requestIdleCb(callback) {
-    // performance improvement experiment;
-    scheduler.addTask(callback);
-    /**
-     * This is a brief polyfill that suits our needs
-     * I took inspiration from Microsoft Clarity polyfill on this one
-     * then adapted it a little bit
-     *
-     * I'm very grateful for their bright idea
-     * */
-    // const taskTimeout = 3000
-    // if (window.requestIdleCallback) {
-    //   return window.requestIdleCallback(callback, { timeout: taskTimeout })
-    // } else {
-    //   const channel = new MessageChannel()
-    //   const incoming = channel.port1
-    //   const outgoing = channel.port2
-    //
-    //   incoming.onmessage = (): void => {
-    //     callback()
-    //   }
-    //   requestAnimationFrame((): void => {
-    //     outgoing.postMessage(1)
-    //   })
-    // }
-}
-exports.requestIdleCb = requestIdleCb;
-function simpleMerge(defaultObj, givenObj) {
-    const result = { ...defaultObj };
-    for (const key in givenObj) {
-        // eslint-disable-next-line no-prototype-builtins
-        if (givenObj.hasOwnProperty(key)) {
-            const userOptionValue = givenObj[key];
-            const defaultOptionValue = defaultObj[key];
-            if (typeof userOptionValue === 'object' &&
-                !Array.isArray(userOptionValue) &&
-                userOptionValue !== null) {
-                result[key] = simpleMerge(defaultOptionValue || {}, userOptionValue);
-            }
-            else {
-                result[key] = userOptionValue;
-            }
-        }
-    }
-    return result;
-}
-exports.simpleMerge = simpleMerge;