@openreplay/tracker 14.0.10-beta.1 → 14.0.10

package/lib/modules/userTesting/styles.js

@@ -1,263 +0,0 @@
-export const 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"`,
-};
-export const containerStyle = {
-    display: 'flex',
-    flexDirection: 'column',
-    gap: '2rem',
-    alignItems: 'center',
-    padding: '1.5rem',
-    borderRadius: '2px',
-    border: '1px solid #D9D9D9',
-    background: '#FFF',
-    width: '22rem',
-};
-export const 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',
-};
-export const titleStyle = {
-    fontFamily: 'Verdana, sans-serif',
-    fontSize: '1.25rem',
-    fontStyle: 'normal',
-    fontWeight: '500',
-    lineHeight: '1.75rem',
-    color: 'rgba(0, 0, 0, 0.85)',
-};
-export const 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',
-};
-export const noticeStyle = {
-    color: 'rgba(0, 0, 0, 0.85)',
-    fontFamily: 'Verdana, sans-serif',
-    fontSize: '0.875rem',
-    fontStyle: 'normal',
-    fontWeight: '400',
-    lineHeight: '1.375rem',
-};
-export const 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',
-};
-export const sectionTitleStyle = {
-    fontFamily: 'Verdana, sans-serif',
-    fontSize: '13px',
-    fontWeight: '500',
-    lineHeight: 'auto',
-    display: 'flex',
-    justifyContent: 'space-between',
-    width: '100%',
-    cursor: 'pointer',
-};
-export const contentStyle = {
-    display: 'flex',
-    flexDirection: 'column',
-    alignItems: 'flex-start',
-    gap: '0.625rem',
-    fontSize: '13px',
-    lineHeight: 'auto',
-};
-// New widget styles
-export const 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',
-};
-export const 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',
-};
-export const endSectionStyle = {
-    ...descriptionWidgetStyle,
-    display: 'flex',
-    flexDirection: 'column',
-    alignItems: 'center',
-    gap: '0.625rem',
-};
-export const symbolIcon = {
-    fontSize: '1.25rem',
-    fontWeight: '500',
-    cursor: 'pointer',
-    color: '#394EFF',
-};
-export const 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',
-};
-export const stopWidgetStyle = {
-    marginTop: '1rem',
-    marginBottom: '1rem',
-    cursor: 'pointer',
-    display: 'block',
-    fontWeight: '500',
-    fontSize: '13px!important',
-    lineHeight: 'auto',
-};
-export const paginationStyle = {
-    display: 'flex',
-    justifyContent: 'space-between',
-    alignItems: 'center',
-    gap: '1rem',
-    padding: '0.5rem',
-    width: '100%',
-    boxSizing: 'border-box',
-};
-export const taskNumberActive = {
-    display: 'flex',
-    flexDirection: 'column',
-    alignItems: 'center',
-    justifyContent: 'center',
-    borderRadius: '6.25em',
-    outline: '1px solid #394EFF',
-    fontSize: '13px',
-    height: '24px',
-    width: '24px',
-};
-export const 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',
-};
-export const 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',
-};
-export const taskTextStyle = {
-    fontWeight: 'bold',
-};
-export const taskDescriptionStyle = {
-    fontSize: '13px',
-    lineHeight: 'auto',
-};
-export const taskButtonStyle = {
-    marginRight: '0.5rem',
-    cursor: 'pointer',
-    color: '#394EFF',
-    textAlign: 'center',
-    fontFamily: 'Verdana, sans-serif',
-    fontSize: '13px',
-    fontStyle: 'normal',
-    fontWeight: '500',
-    lineHeight: 'auto',
-};
-export const taskButtonBorderedStyle = {
-    ...taskButtonStyle,
-    display: 'flex',
-    padding: '0.25rem 0.9375rem',
-    justifyContent: 'center',
-    alignItems: 'center',
-    gap: '0.5rem',
-    borderRadius: '0.25rem',
-    border: '1px solid #394EFF',
-};
-export const taskButtonsRow = {
-    display: 'flex',
-    justifyContent: 'space-between',
-    alignItems: 'center',
-    width: '100%',
-    boxSizing: 'border-box',
-};
-export const 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/lib/modules/userTesting/utils.js

@@ -1,79 +0,0 @@
-import { spinnerStyles } from './styles.js';
-export 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;
-}
-export 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;
-}
-export 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);
-}
-export function createSpinner() {
-    addKeyframes();
-    const spinner = document.createElement('div');
-    spinner.classList.add('spinner');
-    Object.assign(spinner.style, spinnerStyles);
-    return spinner;
-}
-export 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;
-}
-export const TEST_START = 'or_uxt_test_start';
-export const TASK_IND = 'or_uxt_task_index';
-export const SESSION_ID = 'or_uxt_session_id';
-export const TEST_ID = 'or_uxt_test_id';

package/lib/modules/viewport.js

@@ -1,40 +0,0 @@
-import { getTimeOrigin } from '../utils.js';
-import { SetPageLocation, SetViewportSize, SetPageVisibility } from '../app/messages.gen.js';
-export default function (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(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(SetViewportSize(width, height));
-        }
-    });
-    const sendSetPageVisibility = document.hidden === undefined
-        ? Function.prototype
-        : app.safe(() => app.send(SetPageVisibility(document.hidden)));
-    app.attachStartCallback(() => {
-        url = null;
-        navigationStart = 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);
-}

package/lib/utils.js

@@ -1,211 +0,0 @@
-const DEPRECATED_ATTRS = { htmlmasked: 'hidden', masked: 'obscured' };
-export const IN_BROWSER = !(typeof window === 'undefined');
-export const IS_FIREFOX = IN_BROWSER && navigator.userAgent.match(/firefox|fxios/i);
-export const 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 = IN_BROWSER ? Date.now() - performance.now() : 0;
-export function adjustTimeOrigin() {
-    timeOrigin = Date.now() - performance.now();
-}
-export function getTimeOrigin() {
-    return timeOrigin;
-}
-export const now = IN_BROWSER && !!performance.now
-    ? () => Math.round(performance.now() + timeOrigin)
-    : () => Date.now();
-export const stars = 'repeat' in String.prototype
-    ? (str) => '*'.repeat(str.length)
-    : (str) => str.replace(/./g, '*');
-export function normSpaces(str) {
-    return str.trim().replace(/\s+/g, ' ');
-}
-// isAbsoluteUrl regexp:  /^([a-z][a-z\d\+\-\.]*:)?\/\//i.test(url)
-export function isURL(s) {
-    return s.startsWith('https://') || s.startsWith('http://');
-}
-// TODO: JOIN IT WITH LOGGER somehow (use logging decorators?); Don't forget about index.js loggin when there is no logger instance.
-export const DOCS_HOST = 'https://docs.openreplay.com';
-const warnedFeatures = {};
-export function deprecationWarn(nameOfFeature, useInstead, docsPath = '/') {
-    if (warnedFeatures[nameOfFeature]) {
-        return;
-    }
-    console.warn(`OpenReplay: ${nameOfFeature} is deprecated. ${useInstead ? `Please, use ${useInstead} instead.` : ''} Visit ${DOCS_HOST}${docsPath} for more information.`);
-    warnedFeatures[nameOfFeature] = true;
-}
-export 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;
-}
-export 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;
-}
-/**
- * checks if iframe is accessible
- **/
-export function canAccessIframe(iframe) {
-    try {
-        return Boolean(iframe.contentDocument);
-    }
-    catch (e) {
-        return false;
-    }
-}
-function dec2hex(dec) {
-    return dec.toString(16).padStart(2, '0');
-}
-export 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('');
-    }
-}
-export function inIframe() {
-    try {
-        return window.self && window.top && window.self !== window.top;
-    }
-    catch (e) {
-        return true;
-    }
-}
-/**
- * Because angular devs decided that its a good idea to override a browser apis
- * we need to use this to achieve safe behavior
- * */
-export function ngSafeBrowserMethod(method) {
-    // @ts-ignore
-    return window.Zone && '__symbol__' in window.Zone
-        ? // @ts-ignore
-            window['Zone']['__symbol__'](method)
-        : method;
-}
-export function createMutationObserver(cb) {
-    const mObserver = ngSafeBrowserMethod('MutationObserver');
-    return new window[mObserver](cb);
-}
-export 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);
-    }
-}
-export 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);
-    }
-}
-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();
-export 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)
-    //   })
-    // }
-}
-export 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;
-}

package/rollup.config.js

@@ -1,12 +0,0 @@
-import resolve from '@rollup/plugin-node-resolve'
-import { babel } from '@rollup/plugin-babel'
-import { terser } from 'rollup-plugin-terser'
-
-export default {
-  input: 'build/webworker/index.js',
-  output: {
-    file: 'build/webworker.js',
-    format: 'cjs',
-  },
-  plugins: [resolve(), babel({ babelHelpers: 'bundled' }), terser({ mangle: { reserved: ['$'] } })],
-}

package/scripts/checkver.cjs

@@ -1,7 +0,0 @@
-const semver = require("semver");
-const { engines } = require("../package");
-const version = engines.node;
-if (!semver.satisfies(process.version, version)) {
-    console.error(`Required node version ${version}, got ${process.version}.`)
-    process.exit(1);
-}

package/tsconfig-base.json

@@ -1,16 +0,0 @@
-{
-  "compilerOptions": {
-    "rootDir": "src",
-    "outDir": "build",
-    "declaration": true,
-    "noImplicitAny": true,
-    "noImplicitThis": true,
-    "strictNullChecks": true,
-    "alwaysStrict": true,
-    "target": "es2020",
-    "module": "es6",
-    "moduleResolution":  "node",
-    "esModuleInterop": true,
-  },
-  "exclude": ["**/*.test.ts"]
-}