@openreplay/tracker 18.1.0 → 18.1.2

package/dist/cjs/main/app/guards.d.ts

@@ -19,6 +19,7 @@ type TagTypeMap = {
     link: HTMLLinkElement;
     canvas: HTMLCanvasElement;
     slot: HTMLSlotElement;
+    dialog: HTMLDialogElement;
 };
 export declare function hasTag<T extends keyof TagTypeMap>(el: Node, tagName: T): el is TagTypeMap[typeof tagName];
 export {};

package/dist/cjs/main/app/index.d.ts

@@ -319,6 +319,10 @@ export default class App {
     coldStartTs: number;
     singleBuffer: boolean;
     private getSessionVersionHash;
+    private get sessionVersionKey();
+    private storeSessionVersion;
+    /** a tab adopting a session over BroadcastChannel inherits its version too */
+    private adoptSessionVersion;
     private checkSessionToken;
     /**
      * start buffering messages without starting the actual session, which gives

package/dist/cjs/main/app/observer/top_observer.d.ts

@@ -46,6 +46,10 @@ export default class TopObserver extends Observer {
     private shadowRootObservers;
     private handleShadowRoot;
     observe(): void;
+    private colorSchemeMQL;
+    private colorSchemeListener;
+    /** Send resolved used color-scheme ('dark'|'light'|'normal') for the player to force on replay. */
+    private sendColorScheme;
     crossdomainObserve(rootNodeId: number, frameOder: number, frameLevel: number): void;
     disconnect(): void;
 }

package/dist/lib/entry.js

@@ -3308,6 +3308,25 @@ class Observer {
             }
             return;
         }
+        // `open` alone can't tell showModal() (modal/top-layer) from show()/`<dialog open>`
+        // (non-modal); emit the mode alongside it so the player replays the right call (see DOMManager).
+        if (name === 'open' && hasTag(node, 'dialog')) {
+            let mode;
+            if (value === null) {
+                mode = 'closed';
+            }
+            else {
+                let isModal = false;
+                try {
+                    isModal = node.matches('dialog:modal');
+                }
+                catch (e) {
+                    /* :modal pseudo-class unsupported on this browser */
+                }
+                mode = isModal ? 'modal' : 'nonmodal';
+            }
+            this.app.send(SetNodeAttribute(id, '__openreplay_dialog', mode));
+        }
         if (name === 'src' ||
             name === 'srcset' ||
             name === 'integrity' ||
@@ -3916,6 +3935,8 @@ class TopObserver extends Observer {
         this.iframeObservers = new WeakMap();
         this.docObservers = new WeakMap();
         this.shadowRootObservers = new WeakMap();
+        this.colorSchemeMQL = null;
+        this.colorSchemeListener = null;
         this.app = params.app;
         this.options = opts;
         // IFrames
@@ -4010,9 +4031,36 @@ class TopObserver extends Observer {
             // it has no node_id here
             this.app.nodes.callNodeCallbacks(document, true);
         }, window.document.documentElement);
+        // Send before `orloaded` so it lands in the initial visual batch (see sendColorScheme).
+        this.sendColorScheme();
         // "DOM parsed" signal: observeRoot sent the full initial tree synchronously above.
         // The worker keys on this attribute (BatchWriter) to finalize the visual batch.
         this.app.send(SetNodeAttribute(0, 'orloaded', 'true'));
+        if (IN_BROWSER && window.matchMedia) {
+            this.colorSchemeMQL = window.matchMedia('(prefers-color-scheme: dark)');
+            this.colorSchemeListener = this.app.safe(() => this.sendColorScheme());
+            this.colorSchemeMQL.addEventListener?.('change', this.colorSchemeListener);
+        }
+    }
+    /** Send resolved used color-scheme ('dark'|'light'|'normal') for the player to force on replay. */
+    sendColorScheme() {
+        if (!IN_BROWSER)
+            return;
+        const root = document.documentElement;
+        let declared = getComputedStyle(root).colorScheme;
+        if (!declared || declared === 'normal') {
+            const meta = document.querySelector('meta[name="color-scheme" i]');
+            const content = meta && meta.getAttribute('content');
+            if (content)
+                declared = content;
+        }
+        let used = 'normal';
+        if (declared && declared !== 'normal') {
+            const prefersDark = !!window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches;
+            // resolve declared support against OS preference into the concrete used scheme
+            used = declared.includes('dark') && (prefersDark || !declared.includes('light')) ? 'dark' : 'light';
+        }
+        this.app.send(SetNodeAttribute(0, '__openreplay_color_scheme', used));
     }
     crossdomainObserve(rootNodeId, frameOder, frameLevel) {
         const observer = this;
@@ -4032,6 +4080,11 @@ class TopObserver extends Observer {
         iframeObserver.syntheticObserve(rootNodeId, window.document);
     }
     disconnect() {
+        if (this.colorSchemeMQL && this.colorSchemeListener) {
+            this.colorSchemeMQL.removeEventListener?.('change', this.colorSchemeListener);
+        }
+        this.colorSchemeMQL = null;
+        this.colorSchemeListener = null;
         this.iframeOffsets.clear();
         Element.prototype.attachShadow = attachShadowNativeFn;
         this.iframeObserversArr.forEach((observer) => observer.disconnect());
@@ -4307,7 +4360,7 @@ class App {
         this.stopCallbacks = [];
         this.commitCallbacks = [];
         this.activityState = ActivityState.NotActive;
-        this.version = '18.1.0'; // TODO: version compatability check inside each plugin.
+        this.version = '18.1.2'; // TODO: version compatability check inside each plugin.
         this.socketMode = false;
         this.compressionThreshold = 24 * 1000;
         this.bc = null;
@@ -5062,12 +5115,14 @@ class App {
                 if (ev.data.line === proto.resp) {
                     const sessionToken = ev.data.token;
                     this.session.setSessionToken(sessionToken, this.projectKey);
+                    this.adoptSessionVersion(ev.data.version);
                     this.allowAppStart();
                 }
                 if (ev.data.line === proto.reg) {
                     const sessionToken = ev.data.token;
                     this.session.regenerateTabId();
                     this.session.setSessionToken(sessionToken, this.projectKey);
+                    this.adoptSessionVersion(ev.data.version);
                     this.allowAppStart();
                 }
                 if (ev.data.line === proto.ask) {
@@ -5076,6 +5131,7 @@ class App {
                         this.bc.postMessage({
                             line: ev.data.source === thisTab ? proto.reg : proto.resp,
                             token,
+                            version: this.getSessionVersionHash(),
                             source: thisTab,
                             context: this.contextId,
                             projectKey: this.projectKey,
@@ -5563,15 +5619,29 @@ class App {
         const PROTO_VERSION = '2';
         return `${PROTO_VERSION}x${this.version}`;
     }
+    get sessionVersionKey() {
+        return `${this.options.session_token_key}_version`;
+    }
+    storeSessionVersion(version) {
+        this.sessionStorage.setItem(this.sessionVersionKey, version);
+    }
+    /** a tab adopting a session over BroadcastChannel inherits its version too */
+    adoptSessionVersion(version) {
+        if (version) {
+            this.storeSessionVersion(version);
+        }
+    }
     checkSessionToken(forceNew) {
         const versionHash = this.getSessionVersionHash();
         const needReset = this.sessionStorage.getItem(this.options.session_reset_key) !== null;
-        let needNewSessionID = forceNew || needReset;
+        let needNewSessionID = Boolean(forceNew || needReset);
         const sessionToken = this.session.getSessionToken(this.projectKey);
         if (sessionToken) {
-            const storedVersion = this.sessionStorage.getItem(`${this.options.session_token_key}_version`);
-            needNewSessionID = !storedVersion || storedVersion !== versionHash;
-            this.sessionStorage.setItem(`${this.options.session_token_key}_version`, versionHash);
+            const storedVersion = this.sessionStorage.getItem(this.sessionVersionKey);
+            if (!storedVersion || storedVersion !== versionHash) {
+                needNewSessionID = true;
+            }
+            this.storeSessionVersion(versionHash);
         }
         return needNewSessionID || !sessionToken;
     }
@@ -5895,7 +5965,7 @@ class App {
             }
             this.delay = delay;
             this.session.setSessionToken(token, this.projectKey);
-            this.sessionStorage.setItem(`${this.options.session_token_key}_version`, this.getSessionVersionHash());
+            this.storeSessionVersion(this.getSessionVersionHash());
             if (sessionToken && sessionToken !== token) {
                 this.bc?.postMessage({
                     type: proto.reset,
@@ -9720,7 +9790,7 @@ class ConstantProperties {
             user_id: this.user_id,
             distinct_id: this.deviceId,
             sdk_edition: 'web',
-            sdk_version: '18.1.0',
+            sdk_version: '18.1.2',
             timezone: getUTCOffsetString(),
             search_engine: this.searchEngine,
         };
@@ -10461,7 +10531,7 @@ class API {
         this.signalStartIssue = (reason, missingApi) => {
             const doNotTrack = this.checkDoNotTrack();
             console.log("Tracker couldn't start due to:", JSON.stringify({
-                trackerVersion: '18.1.0',
+                trackerVersion: '18.1.2',
                 projectKey: this.options.projectKey,
                 doNotTrack,
                 reason: missingApi.length ? `missing api: ${missingApi.join(',')}` : reason,