@openreplay/tracker 3.5.17-beta.0 → 3.6.0-beta.0

package/lib/modules/adoptedStyleSheets.js

@@ -0,0 +1,124 @@
+import { TechnicalInfo, AdoptedSSReplaceURLBased, AdoptedSSInsertRuleURLBased, AdoptedSSDeleteRule, AdoptedSSAddOwner, AdoptedSSRemoveOwner, } from '../app/messages.gen.js';
+import { isRootNode } from '../app/guards.js';
+function hasAdoptedSS(node) {
+    return (isRootNode(node) &&
+        // @ts-ignore
+        typeof node.adoptedStyleSheets !== 'undefined');
+}
+export default function (app) {
+    if (app === null) {
+        return;
+    }
+    if (!hasAdoptedSS(document)) {
+        app.attachStartCallback(() => {
+            // MBTODO: pre-start sendQueue app
+            app.send(TechnicalInfo('no_adopted_stylesheets', ''));
+        });
+        return;
+    }
+    let nextID = 0xf;
+    const styleSheetIDMap = new Map();
+    const adoptedStyleSheetsOwnings = new Map();
+    const updateAdoptedStyleSheets = (root) => {
+        let nodeID = app.nodes.getID(root);
+        if (root === document) {
+            nodeID = 0; // main document doesn't have nodeID. ID count starts from the documentElement
+        }
+        if (!nodeID) {
+            return;
+        }
+        let pastOwning = adoptedStyleSheetsOwnings.get(nodeID);
+        if (!pastOwning) {
+            pastOwning = [];
+        }
+        const nowOwning = [];
+        const styleSheets = root.adoptedStyleSheets;
+        for (const s of styleSheets) {
+            let sheetID = styleSheetIDMap.get(s);
+            const init = !sheetID;
+            if (!sheetID) {
+                sheetID = ++nextID;
+            }
+            nowOwning.push(sheetID);
+            if (!pastOwning.includes(sheetID)) {
+                app.send(AdoptedSSAddOwner(sheetID, nodeID));
+            }
+            if (init) {
+                const rules = s.cssRules;
+                for (let i = 0; i < rules.length; i++) {
+                    app.send(AdoptedSSInsertRuleURLBased(sheetID, rules[i].cssText, i, app.getBaseHref()));
+                }
+            }
+        }
+        for (const sheetID of pastOwning) {
+            if (!nowOwning.includes(sheetID)) {
+                app.send(AdoptedSSRemoveOwner(sheetID, nodeID));
+            }
+        }
+        adoptedStyleSheetsOwnings.set(nodeID, nowOwning);
+    };
+    function patchAdoptedStyleSheets(prototype) {
+        const nativeAdoptedStyleSheetsDescriptor = Object.getOwnPropertyDescriptor(prototype, 'adoptedStyleSheets');
+        if (nativeAdoptedStyleSheetsDescriptor) {
+            Object.defineProperty(prototype, 'adoptedStyleSheets', Object.assign(Object.assign({}, nativeAdoptedStyleSheetsDescriptor), { set: function (value) {
+                    // @ts-ignore
+                    const retVal = nativeAdoptedStyleSheetsDescriptor.set.call(this, value);
+                    updateAdoptedStyleSheets(this);
+                    return retVal;
+                } }));
+        }
+    }
+    const patchContext = (context) => {
+        patchAdoptedStyleSheets(context.Document.prototype);
+        patchAdoptedStyleSheets(context.ShadowRoot.prototype);
+        //@ts-ignore TODO: configure ts (use necessary lib)
+        const { insertRule, deleteRule, replace, replaceSync } = context.CSSStyleSheet.prototype;
+        //@ts-ignore
+        context.CSSStyleSheet.prototype.replace = function (text) {
+            return replace.call(this, text).then((sheet) => {
+                const sheetID = styleSheetIDMap.get(this);
+                if (sheetID) {
+                    app.send(AdoptedSSReplaceURLBased(sheetID, text, app.getBaseHref()));
+                }
+                return sheet;
+            });
+        };
+        //@ts-ignore
+        context.CSSStyleSheet.prototype.replaceSync = function (text) {
+            const sheetID = styleSheetIDMap.get(this);
+            if (sheetID) {
+                app.send(AdoptedSSReplaceURLBased(sheetID, text, app.getBaseHref()));
+            }
+            return replaceSync.call(this, text);
+        };
+        context.CSSStyleSheet.prototype.insertRule = function (rule, index = 0) {
+            const sheetID = styleSheetIDMap.get(this);
+            if (sheetID) {
+                app.send(AdoptedSSInsertRuleURLBased(sheetID, rule, index, app.getBaseHref()));
+            }
+            return insertRule.call(this, rule, index);
+        };
+        context.CSSStyleSheet.prototype.deleteRule = function (index) {
+            const sheetID = styleSheetIDMap.get(this);
+            if (sheetID) {
+                app.send(AdoptedSSDeleteRule(sheetID, index));
+            }
+            return deleteRule.call(this, index);
+        };
+    };
+    patchContext(window);
+    app.observer.attachContextCallback(patchContext);
+    app.attachStopCallback(() => {
+        styleSheetIDMap.clear();
+        adoptedStyleSheetsOwnings.clear();
+    });
+    // So far main Document is not triggered with nodeCallbacks
+    app.attachStartCallback(() => {
+        updateAdoptedStyleSheets(document);
+    });
+    app.nodes.attachNodeCallback((node) => {
+        if (hasAdoptedSS(node)) {
+            updateAdoptedStyleSheets(node);
+        }
+    });
+}

package/lib/modules/connection.js

@@ -1,4 +1,4 @@
-import { ConnectionInformation } from '../common/messages.js';
+import { ConnectionInformation } from '../app/messages.gen.js';
 export default function (app) {
     const connection = navigator.connection ||
         navigator.mozConnection ||
@@ -6,7 +6,7 @@ export default function (app) {
     if (connection === undefined) {
         return;
     }
-    const sendConnectionInformation = () => app.send(new ConnectionInformation(Math.round(connection.downlink * 1000), connection.type || 'unknown'));
+    const sendConnectionInformation = () => app.send(ConnectionInformation(Math.round(connection.downlink * 1000), connection.type || 'unknown'));
     sendConnectionInformation();
     connection.addEventListener('change', sendConnectionInformation);
 }

package/lib/modules/console.js

@@ -1,6 +1,5 @@
-import { hasTag } from '../app/guards.js';
 import { IN_BROWSER } from '../utils.js';
-import { ConsoleLog } from '../common/messages.js';
+import { ConsoleLog } from '../app/messages.gen.js';
 const printError = IN_BROWSER && 'InstallTrigger' in window // detect Firefox
     ? (e) => e.message + '\n' + e.stack
     : (e) => e.stack || e.message;
@@ -90,7 +89,7 @@ export default function (app, opts) {
     if (!Array.isArray(options.consoleMethods) || options.consoleMethods.length === 0) {
         return;
     }
-    const sendConsoleLog = app.safe((level, args) => app.send(new ConsoleLog(level, printf(args))));
+    const sendConsoleLog = app.safe((level, args) => app.send(ConsoleLog(level, printf(args))));
     let n;
     const reset = () => {
         n = 0;
@@ -99,7 +98,7 @@ export default function (app, opts) {
     app.ticker.attach(reset, 33, false);
     const patchConsole = (console) => options.consoleMethods.forEach((method) => {
         if (consoleMethods.indexOf(method) === -1) {
-            console.error(`OpenReplay: unsupported console method "${method}"`);
+            app.debug.error(`OpenReplay: unsupported console method "${method}"`);
             return;
         }
         const fn = console[method];
@@ -111,20 +110,7 @@ export default function (app, opts) {
             sendConsoleLog(method, args);
         };
     });
-    patchConsole(window.console);
-    app.nodes.attachNodeCallback(app.safe((node) => {
-        if (hasTag(node, 'IFRAME')) {
-            // TODO: newContextCallback
-            let context = node.contentWindow;
-            if (context) {
-                patchConsole(context.console);
-            }
-            app.attachEventListener(node, 'load', () => {
-                if (node.contentWindow !== context) {
-                    context = node.contentWindow;
-                    patchConsole(context.console);
-                }
-            });
-        }
-    }));
+    const patchContext = app.safe((context) => patchConsole(context.console));
+    patchContext(window);
+    app.observer.attachContextCallback(patchContext);
 }

package/lib/modules/cssrules.js

@@ -1,17 +1,17 @@
-import { CSSInsertRuleURLBased, CSSDeleteRule, TechnicalInfo } from '../common/messages.js';
+import { CSSInsertRuleURLBased, CSSDeleteRule, TechnicalInfo } from '../app/messages.gen.js';
 import { hasTag } from '../app/guards.js';
 export default function (app) {
     if (app === null) {
         return;
     }
     if (!window.CSSStyleSheet) {
-        app.send(new TechnicalInfo('no_stylesheet_prototype_in_window', ''));
+        app.send(TechnicalInfo('no_stylesheet_prototype_in_window', ''));
         return;
     }
     const processOperation = app.safe((stylesheet, index, rule) => {
         const sendMessage = typeof rule === 'string'
-            ? (nodeID) => app.send(new CSSInsertRuleURLBased(nodeID, rule, index, app.getBaseHref()))
-            : (nodeID) => app.send(new CSSDeleteRule(nodeID, index));
+            ? (nodeID) => app.send(CSSInsertRuleURLBased(nodeID, rule, index, app.getBaseHref()))
+            : (nodeID) => app.send(CSSDeleteRule(nodeID, index));
         // TODO: Extend messages to maintain nested rules (CSSGroupingRule prototype, as well as CSSKeyframesRule)
         if (stylesheet.ownerNode == null) {
             throw new Error('Owner Node not found');
@@ -21,15 +21,19 @@ export default function (app) {
             sendMessage(nodeID);
         } // else error?
     });
-    const { insertRule, deleteRule } = CSSStyleSheet.prototype;
-    CSSStyleSheet.prototype.insertRule = function (rule, index = 0) {
-        processOperation(this, index, rule);
-        return insertRule.call(this, rule, index);
-    };
-    CSSStyleSheet.prototype.deleteRule = function (index) {
-        processOperation(this, index);
-        return deleteRule.call(this, index);
+    const patchContext = (context) => {
+        const { insertRule, deleteRule } = context.CSSStyleSheet.prototype;
+        context.CSSStyleSheet.prototype.insertRule = function (rule, index = 0) {
+            processOperation(this, index, rule);
+            return insertRule.call(this, rule, index);
+        };
+        context.CSSStyleSheet.prototype.deleteRule = function (index) {
+            processOperation(this, index);
+            return deleteRule.call(this, index);
+        };
     };
+    patchContext(window);
+    app.observer.attachContextCallback(patchContext);
     app.nodes.attachNodeCallback((node) => {
         if (!hasTag(node, 'STYLE') || !node.sheet) {
             return;

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 type Message from '../app/messages.gen.js';
 export interface Options {
     captureExceptions: boolean;
 }
@@ -11,6 +11,6 @@ interface StackFrame {
     source?: string;
 }
 export declare function getExceptionMessage(error: Error, fallbackStack: Array<StackFrame>): Message;
-export declare function getExceptionMessageFromEvent(e: ErrorEvent | PromiseRejectionEvent): Message | null;
+export declare function getExceptionMessageFromEvent(e: ErrorEvent | PromiseRejectionEvent, context?: typeof globalThis): Message | null;
 export default function (app: App, opts: Partial<Options>): void;
 export {};

package/lib/modules/exception.js

@@ -1,4 +1,4 @@
-import { JSException } from '../common/messages.js';
+import { JSException } from '../app/messages.gen.js';
 import ErrorStackParser from 'error-stack-parser';
 function getDefaultStack(e) {
     return [
@@ -17,9 +17,9 @@ export function getExceptionMessage(error, fallbackStack) {
         stack = ErrorStackParser.parse(error);
     }
     catch (e) { }
-    return new JSException(error.name, error.message, JSON.stringify(stack));
+    return JSException(error.name, error.message, JSON.stringify(stack));
 }
-export function getExceptionMessageFromEvent(e) {
+export function getExceptionMessageFromEvent(e, context = window) {
     if (e instanceof ErrorEvent) {
         if (e.error instanceof Error) {
             return getExceptionMessage(e.error, getDefaultStack(e));
@@ -30,10 +30,10 @@ export function getExceptionMessageFromEvent(e) {
                 name = 'Error';
                 message = e.message;
             }
-            return new JSException(name, message, JSON.stringify(getDefaultStack(e)));
+            return JSException(name, message, JSON.stringify(getDefaultStack(e)));
         }
     }
-    else if ('PromiseRejectionEvent' in window && e instanceof PromiseRejectionEvent) {
+    else if ('PromiseRejectionEvent' in context && e instanceof context.PromiseRejectionEvent) {
         if (e.reason instanceof Error) {
             return getExceptionMessage(e.reason, []);
         }
@@ -45,7 +45,7 @@ export function getExceptionMessageFromEvent(e) {
             catch (_) {
                 message = String(e.reason);
             }
-            return new JSException('Unhandled Promise Rejection', message, '[]');
+            return JSException('Unhandled Promise Rejection', message, '[]');
         }
     }
     return null;
@@ -55,13 +55,17 @@ export default function (app, opts) {
         captureExceptions: true,
     }, opts);
     if (options.captureExceptions) {
-        const handler = (e) => {
-            const msg = getExceptionMessageFromEvent(e);
-            if (msg != null) {
-                app.send(msg);
-            }
-        };
-        app.attachEventListener(window, 'unhandledrejection', (e) => handler(e));
-        app.attachEventListener(window, 'error', (e) => handler(e));
+        function patchContext(context) {
+            const handler = (e) => {
+                const msg = getExceptionMessageFromEvent(e, context);
+                if (msg != null) {
+                    app.send(msg);
+                }
+            };
+            app.attachEventListener(context, 'unhandledrejection', handler);
+            app.attachEventListener(context, 'error', handler);
+        }
+        app.observer.attachContextCallback(patchContext);
+        patchContext(window);
     }
 }

package/lib/modules/img.js

@@ -1,5 +1,5 @@
 import { timestamp, isURL } from '../utils.js';
-import { ResourceTiming, SetNodeAttributeURLBased, SetNodeAttribute, } from '../common/messages.js';
+import { ResourceTiming, SetNodeAttributeURLBased, SetNodeAttribute } from '../app/messages.gen.js';
 import { hasTag } from '../app/guards.js';
 function resolveURL(url, location = document.location) {
     url = url.trim();
@@ -19,16 +19,31 @@ function resolveURL(url, location = document.location) {
 const PLACEHOLDER_SRC = 'https://static.openreplay.com/tracker/placeholder.jpeg';
 export default function (app) {
     function sendPlaceholder(id, node) {
-        app.send(new SetNodeAttribute(id, 'src', PLACEHOLDER_SRC));
+        app.send(SetNodeAttribute(id, 'src', PLACEHOLDER_SRC));
         const { width, height } = node.getBoundingClientRect();
         if (!node.hasAttribute('width')) {
-            app.send(new SetNodeAttribute(id, 'width', String(width)));
+            app.send(SetNodeAttribute(id, 'width', String(width)));
         }
         if (!node.hasAttribute('height')) {
-            app.send(new SetNodeAttribute(id, 'height', String(height)));
+            app.send(SetNodeAttribute(id, 'height', String(height)));
         }
     }
-    const sendImgSrc = app.safe(function () {
+    const sendSrcset = function (id, img) {
+        const { srcset } = img;
+        if (!srcset) {
+            return;
+        }
+        const resolvedSrcset = srcset
+            .split(',')
+            .map((str) => resolveURL(str))
+            .join(',');
+        app.send(SetNodeAttribute(id, 'srcset', resolvedSrcset));
+    };
+    const sendSrc = function (id, img) {
+        const src = img.src;
+        app.send(SetNodeAttributeURLBased(id, 'src', src, app.getBaseHref()));
+    };
+    const sendImgAttrs = app.safe(function () {
         const id = app.nodes.getID(this);
         if (id === undefined) {
             return;
@@ -40,21 +55,15 @@ export default function (app) {
         const resolvedSrc = resolveURL(src || ''); // Src type is null sometimes. - is it true?
         if (naturalWidth === 0 && naturalHeight === 0) {
             if (isURL(resolvedSrc)) {
-                app.send(new ResourceTiming(timestamp(), 0, 0, 0, 0, 0, resolvedSrc, 'img'));
+                app.send(ResourceTiming(timestamp(), 0, 0, 0, 0, 0, resolvedSrc, 'img'));
             }
         }
         else if (resolvedSrc.length >= 1e5 || app.sanitizer.isMasked(id)) {
             sendPlaceholder(id, this);
         }
         else {
-            app.send(new SetNodeAttribute(id, 'src', resolvedSrc));
-            if (srcset) {
-                const resolvedSrcset = srcset
-                    .split(',')
-                    .map((str) => resolveURL(str))
-                    .join(',');
-                app.send(new SetNodeAttribute(id, 'srcset', resolvedSrcset));
-            }
+            sendSrc(id, this);
+            sendSrcset(id, this);
         }
     });
     const observer = new MutationObserver((mutations) => {
@@ -66,23 +75,24 @@ export default function (app) {
                     return;
                 }
                 if (mutation.attributeName === 'src') {
-                    const src = target.src;
-                    app.send(new SetNodeAttributeURLBased(id, 'src', src, app.getBaseHref()));
+                    sendSrc(id, target);
                 }
                 if (mutation.attributeName === 'srcset') {
-                    const srcset = target.srcset;
-                    app.send(new SetNodeAttribute(id, 'srcset', srcset));
+                    sendSrcset(id, target);
                 }
             }
         }
     });
+    app.attachStopCallback(() => {
+        observer.disconnect();
+    });
     app.nodes.attachNodeCallback((node) => {
         if (!hasTag(node, 'IMG')) {
             return;
         }
-        app.nodes.attachElementListener('error', node, sendImgSrc);
-        app.nodes.attachElementListener('load', node, sendImgSrc);
-        sendImgSrc.call(node);
+        app.nodes.attachElementListener('error', node, sendImgAttrs.bind(node));
+        app.nodes.attachElementListener('load', node, sendImgAttrs.bind(node));
+        sendImgAttrs.call(node);
         observer.observe(node, { attributes: true, attributeFilter: ['src', 'srcset'] });
     });
 }

package/lib/modules/input.js

@@ -1,6 +1,6 @@
 import { normSpaces, IN_BROWSER, getLabelAttribute, hasOpenreplayAttribute } from '../utils.js';
 import { hasTag } from '../app/guards.js';
-import { SetInputTarget, SetInputValue, SetInputChecked } from '../common/messages.js';
+import { SetInputTarget, SetInputValue, SetInputChecked } from '../app/messages.gen.js';
 const INPUT_TYPES = ['text', 'password', 'email', 'search', 'number', 'range', 'date'];
 function isTextEditable(node) {
     if (hasTag(node, 'TEXTAREA')) {
@@ -40,7 +40,7 @@ const labelElementFor = IN_BROWSER && 'labels' in HTMLInputElement.prototype
         }
         const id = node.id;
         if (id) {
-            const labels = document.querySelectorAll('label[for="' + id + '"]');
+            const labels = node.ownerDocument.querySelectorAll('label[for="' + id + '"]');
             if (labels !== null && labels.length === 1) {
                 return labels[0];
             }
@@ -70,7 +70,7 @@ export default function (app, opts) {
     function sendInputTarget(id, node) {
         const label = getInputLabel(node);
         if (label !== '') {
-            app.send(new SetInputTarget(id, label));
+            app.send(SetInputTarget(id, label));
         }
     }
     function sendInputValue(id, node) {
@@ -97,7 +97,7 @@ export default function (app, opts) {
                 value = '';
                 break;
         }
-        app.send(new SetInputValue(id, value, mask));
+        app.send(SetInputValue(id, value, mask));
     }
     const inputValues = new Map();
     const checkableValues = new Map();
@@ -135,7 +135,7 @@ export default function (app, opts) {
             }
             if (checked !== node.checked) {
                 checkableValues.set(id, node.checked);
-                app.send(new SetInputChecked(id, node.checked));
+                app.send(SetInputChecked(id, node.checked));
             }
         });
     });
@@ -159,7 +159,7 @@ export default function (app, opts) {
         }
         if (isCheckable(node)) {
             checkableValues.set(id, node.checked);
-            app.send(new SetInputChecked(id, node.checked));
+            app.send(SetInputChecked(id, node.checked));
             return;
         }
     }));

package/lib/modules/mouse.js

@@ -1,8 +1,8 @@
-import { hasTag, isSVGElement } from '../app/guards.js';
+import { hasTag, isSVGElement, isDocument } from '../app/guards.js';
 import { normSpaces, hasOpenreplayAttribute, getLabelAttribute } from '../utils.js';
-import { MouseMove, MouseClick } from '../common/messages.js';
+import { MouseMove, MouseClick } from '../app/messages.gen.js';
 import { getInputLabel } from './input.js';
-function _getSelector(target) {
+function _getSelector(target, document) {
     let el = target;
     let selector = null;
     do {
@@ -32,16 +32,16 @@ function isClickable(element) {
         element.onclick != null ||
         element.getAttribute('role') === 'button');
     //|| element.className.includes("btn")
-    // MBTODO: intersect addEventListener
+    // MBTODO: intersept addEventListener
 }
-//TODO: fix (typescript doesn't allow work when the guard is inside the function)
-function getTarget(target) {
+//TODO: fix (typescript is not sure about target variable after assignation of svg)
+function getTarget(target, document) {
     if (target instanceof Element) {
-        return _getTarget(target);
+        return _getTarget(target, document);
     }
     return null;
 }
-function _getTarget(target) {
+function _getTarget(target, document) {
     let element = target;
     while (element !== null && element !== document.documentElement) {
         if (hasOpenreplayAttribute(element, 'masked')) {
@@ -104,37 +104,46 @@ export default function (app) {
     });
     const sendMouseMove = () => {
         if (mousePositionChanged) {
-            app.send(new MouseMove(mousePositionX, mousePositionY));
+            app.send(MouseMove(mousePositionX, mousePositionY));
             mousePositionChanged = false;
         }
     };
-    const selectorMap = {};
-    function getSelector(id, target) {
-        return (selectorMap[id] = selectorMap[id] || _getSelector(target));
-    }
-    app.attachEventListener(document.documentElement, 'mouseover', (e) => {
-        const target = getTarget(e.target);
-        if (target !== mouseTarget) {
-            mouseTarget = target;
-            mouseTargetTime = performance.now();
-        }
-    });
-    app.attachEventListener(document, 'mousemove', (e) => {
-        mousePositionX = e.clientX;
-        mousePositionY = e.clientY;
-        mousePositionChanged = true;
-    }, false);
-    app.attachEventListener(document, 'click', (e) => {
-        const target = getTarget(e.target);
-        if ((!e.clientX && !e.clientY) || target === null) {
-            return;
+    const patchDocument = (document) => {
+        const selectorMap = {};
+        function getSelector(id, target) {
+            return (selectorMap[id] = selectorMap[id] || _getSelector(target, document));
         }
-        const id = app.nodes.getID(target);
-        if (id !== undefined) {
-            sendMouseMove();
-            app.send(new MouseClick(id, mouseTarget === target ? Math.round(performance.now() - mouseTargetTime) : 0, getTargetLabel(target), getSelector(id, target)), true);
+        app.attachEventListener(document.documentElement, 'mouseover', (e) => {
+            const target = getTarget(e.target, document);
+            if (target !== mouseTarget) {
+                mouseTarget = target;
+                mouseTargetTime = performance.now();
+            }
+        });
+        app.attachEventListener(document, 'mousemove', (e) => {
+            const { top, left } = app.observer.getDocumentOffset(document);
+            mousePositionX = e.clientX + left;
+            mousePositionY = e.clientY + top;
+            mousePositionChanged = true;
+        }, false);
+        app.attachEventListener(document, 'click', (e) => {
+            const target = getTarget(e.target, document);
+            if ((!e.clientX && !e.clientY) || target === null) {
+                return;
+            }
+            const id = app.nodes.getID(target);
+            if (id !== undefined) {
+                sendMouseMove();
+                app.send(MouseClick(id, mouseTarget === target ? Math.round(performance.now() - mouseTargetTime) : 0, getTargetLabel(target), getSelector(id, target)), true);
+            }
+            mouseTarget = null;
+        });
+    };
+    app.nodes.attachNodeCallback((node) => {
+        if (isDocument(node)) {
+            patchDocument(node);
         }
-        mouseTarget = null;
     });
+    patchDocument(document);
     app.ticker.attach(sendMouseMove, 10);
 }

package/lib/modules/performance.js

@@ -1,5 +1,5 @@
 import { IN_BROWSER } from '../utils.js';
-import { PerformanceTrack } from '../common/messages.js';
+import { PerformanceTrack } from '../app/messages.gen.js';
 const perf = IN_BROWSER && 'performance' in window && 'memory' in performance // works in Chrome only
     ? performance
     : { memory: {} };
@@ -31,7 +31,7 @@ export default function (app, opts) {
         if (frames === undefined || ticks === undefined) {
             return;
         }
-        app.send(new PerformanceTrack(frames, ticks, perf.memory.totalJSHeapSize || 0, perf.memory.usedJSHeapSize || 0));
+        app.send(PerformanceTrack(frames, ticks, perf.memory.totalJSHeapSize || 0, perf.memory.usedJSHeapSize || 0));
         ticks = frames = document.hidden ? -1 : 0;
     };
     app.attachStartCallback(() => {

package/lib/modules/scroll.js

@@ -1,9 +1,14 @@
-import { SetViewportScroll, SetNodeScroll } from '../common/messages.js';
-import { isElementNode } from '../app/guards.js';
+import { SetViewportScroll, SetNodeScroll } from '../app/messages.gen.js';
+import { isElementNode, isRootNode } from '../app/guards.js';
 export default function (app) {
     let documentScroll = false;
     const nodeScroll = new Map();
-    const sendSetViewportScroll = app.safe(() => app.send(new SetViewportScroll(window.pageXOffset ||
+    function setNodeScroll(target) {
+        if (target instanceof Element) {
+            nodeScroll.set(target, [target.scrollLeft, target.scrollTop]);
+        }
+    }
+    const sendSetViewportScroll = app.safe(() => app.send(SetViewportScroll(window.pageXOffset ||
         (document.documentElement && document.documentElement.scrollLeft) ||
         (document.body && document.body.scrollLeft) ||
         0, window.pageYOffset ||
@@ -13,7 +18,7 @@ export default function (app) {
     const sendSetNodeScroll = app.safe((s, node) => {
         const id = app.nodes.getID(node);
         if (id !== undefined) {
-            app.send(new SetNodeScroll(id, s[0], s[1]));
+            app.send(SetNodeScroll(id, s[0], s[1]));
         }
     });
     app.attachStartCallback(sendSetViewportScroll);
@@ -25,16 +30,20 @@ export default function (app) {
         if (isStart && isElementNode(node) && node.scrollLeft + node.scrollTop > 0) {
             nodeScroll.set(node, [node.scrollLeft, node.scrollTop]);
         }
+        else if (isRootNode(node)) {
+            // scroll is not-composed event (https://javascript.info/shadow-dom-events)
+            app.attachEventListener(node, 'scroll', (e) => {
+                setNodeScroll(e.target);
+            });
+        }
     });
-    app.attachEventListener(window, 'scroll', (e) => {
+    app.attachEventListener(document, 'scroll', (e) => {
         const target = e.target;
         if (target === document) {
             documentScroll = true;
             return;
         }
-        if (target instanceof Element) {
-            nodeScroll.set(target, [target.scrollLeft, target.scrollTop]);
-        }
+        setNodeScroll(target);
     });
     app.ticker.attach(() => {
         if (documentScroll) {