@openreplay/tracker 16.1.4 → 16.2.1

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

@@ -13,6 +13,7 @@ import type { Options as SessOptions } from './session.js';
 import Session from './session.js';
 import Ticker from './ticker.js';
 import { MaintainerOptions } from './nodes/maintainer.js';
+export { InlineCssMode } from './observer/top_observer.js';
 export interface StartOptions {
     userID?: string;
     metadata?: Record<string, string>;
@@ -63,18 +64,12 @@ type AppOptions = {
     __is_snippet: boolean;
     __debug_report_edp: string | null;
     __debug__?: ILogLevel;
-    /** @deprecated see canvas prop */
-    __save_canvas_locally?: boolean;
-    /** @deprecated see canvas prop */
-    fixedCanvasScaling?: boolean;
     localStorage: Storage | null;
     sessionStorage: Storage | null;
     forceSingleTab?: boolean;
     /** Sometimes helps to prevent session breaking due to dict reset */
     disableStringDict?: boolean;
     assistSocketHost?: string;
-    /** @deprecated see canvas prop */
-    disableCanvas?: boolean;
     canvas: {
         disableCanvas?: boolean;
         /**
@@ -150,7 +145,7 @@ export default class App {
     private readonly startCallbacks;
     private readonly stopCallbacks;
     private readonly commitCallbacks;
-    readonly options: AppOptions;
+    readonly options: Options;
     readonly networkOptions?: NetworkOptions;
     private readonly revID;
     private activityState;
@@ -198,7 +193,7 @@ export default class App {
     private initWorker;
     private handleWorkerMsg;
     private _debug;
-    send(message: Message, urgent?: boolean): void;
+    send: (message: Message, urgent?: boolean) => void;
     /**
      * Normal workflow: add timestamp and tab data to batch, then commit it
      * every ~30ms
@@ -320,4 +315,3 @@ export default class App {
     trackWs(channelName: string): (msgType: string, data: string, dir: 'up' | 'down') => void;
     stop(stopWorker?: boolean): void;
 }
-export {};

package/dist/lib/main/app/observer/cssInliner.d.ts

@@ -0,0 +1 @@
+export declare function inlineRemoteCss(node: HTMLLinkElement, id: number, baseHref: string, getNextID: () => number, insertRule: (id: number, cssText: string, index: number, baseHref: string) => any[], addOwner: (sheetId: number, ownerId: number) => any[], forceFetch?: boolean, sendPlain?: boolean, onPlain?: (cssText: string, id: number) => void): void;

package/dist/lib/main/app/observer/observer.d.ts

@@ -1,4 +1,12 @@
 import App from '../index.js';
+interface Options {
+    disableSprites?: boolean;
+    inlineRemoteCss?: boolean;
+    inlinerOptions?: {
+        forceFetch?: boolean;
+        forcePlain?: boolean;
+    };
+}
 export default abstract class Observer {
     protected readonly app: App;
     protected readonly isTopContext: boolean;
@@ -9,10 +17,15 @@ export default abstract class Observer {
     private readonly attributesMap;
     private readonly textSet;
     private readonly disableSprites;
+    /**
+     * this option means that, instead of using link element with href to load css,
+     * we will try to parse the css text instead and send it as css rules set
+     * can (and will) affect performance
+     * */
+    private readonly inlineRemoteCss;
+    private readonly inlinerOptions;
     private readonly domParser;
-    constructor(app: App, isTopContext?: boolean, options?: {
-        disableSprites: boolean;
-    });
+    constructor(app: App, isTopContext?: boolean, options?: Options);
     private clear;
     /**
      * EXPERIMENTAL: Unbinds the removed nodes in case of iframe src change.
@@ -31,3 +44,4 @@ export default abstract class Observer {
     protected observeRoot(node: Node, beforeCommit: (id?: number) => unknown, nodeToBind?: Node): void;
     disconnect(): void;
 }
+export {};

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

@@ -1,9 +1,27 @@
 import Observer from './observer.js';
 import { Offset } from './iframe_offsets.js';
 import App from '../index.js';
+export declare enum InlineCssMode {
+    /** default behavior -- will parse and cache the css file on backend */
+    Disabled = 0,
+    /** will attempt to record the linked css file as AdoptedStyleSheet object */
+    Inline = 1,
+    /** will fetch the file, then simulated AdoptedStyleSheets behavior programmaticaly for the replay */
+    InlineFetched = 2,
+    /** will fetch the file, then save it as plain css inside <style> node */
+    PlainFetched = 3
+}
 export interface Options {
     captureIFrames: boolean;
     disableSprites: boolean;
+    /**
+     * with this option instead of using link element with href to load css,
+     * we will try to parse the css text instead and send it as css rules set
+     * can (and probably will) affect performance to certain degree,
+     * especially if the css itself is crossdomain
+     * @default InlineCssMode.None = 0
+     * */
+    inlineCss: InlineCssMode;
 }
 type Context = Window & typeof globalThis;
 type ContextCallback = (context: Context) => void;

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

@@ -13,6 +13,7 @@ import type { Options as SessOptions } from './session.js';
 import Session from './session.js';
 import Ticker from './ticker.js';
 import { MaintainerOptions } from './nodes/maintainer.js';
+export { InlineCssMode } from './observer/top_observer.js';
 export interface StartOptions {
     userID?: string;
     metadata?: Record<string, string>;
@@ -63,18 +64,12 @@ type AppOptions = {
     __is_snippet: boolean;
     __debug_report_edp: string | null;
     __debug__?: ILogLevel;
-    /** @deprecated see canvas prop */
-    __save_canvas_locally?: boolean;
-    /** @deprecated see canvas prop */
-    fixedCanvasScaling?: boolean;
     localStorage: Storage | null;
     sessionStorage: Storage | null;
     forceSingleTab?: boolean;
     /** Sometimes helps to prevent session breaking due to dict reset */
     disableStringDict?: boolean;
     assistSocketHost?: string;
-    /** @deprecated see canvas prop */
-    disableCanvas?: boolean;
     canvas: {
         disableCanvas?: boolean;
         /**
@@ -150,7 +145,7 @@ export default class App {
     private readonly startCallbacks;
     private readonly stopCallbacks;
     private readonly commitCallbacks;
-    readonly options: AppOptions;
+    readonly options: Options;
     readonly networkOptions?: NetworkOptions;
     private readonly revID;
     private activityState;
@@ -198,7 +193,7 @@ export default class App {
     private initWorker;
     private handleWorkerMsg;
     private _debug;
-    send(message: Message, urgent?: boolean): void;
+    send: (message: Message, urgent?: boolean) => void;
     /**
      * Normal workflow: add timestamp and tab data to batch, then commit it
      * every ~30ms
@@ -320,4 +315,3 @@ export default class App {
     trackWs(channelName: string): (msgType: string, data: string, dir: 'up' | 'down') => void;
     stop(stopWorker?: boolean): void;
 }
-export {};

package/dist/types/main/app/observer/cssInliner.d.ts

@@ -0,0 +1 @@
+export declare function inlineRemoteCss(node: HTMLLinkElement, id: number, baseHref: string, getNextID: () => number, insertRule: (id: number, cssText: string, index: number, baseHref: string) => any[], addOwner: (sheetId: number, ownerId: number) => any[], forceFetch?: boolean, sendPlain?: boolean, onPlain?: (cssText: string, id: number) => void): void;

package/dist/types/main/app/observer/observer.d.ts

@@ -1,4 +1,12 @@
 import App from '../index.js';
+interface Options {
+    disableSprites?: boolean;
+    inlineRemoteCss?: boolean;
+    inlinerOptions?: {
+        forceFetch?: boolean;
+        forcePlain?: boolean;
+    };
+}
 export default abstract class Observer {
     protected readonly app: App;
     protected readonly isTopContext: boolean;
@@ -9,10 +17,15 @@ export default abstract class Observer {
     private readonly attributesMap;
     private readonly textSet;
     private readonly disableSprites;
+    /**
+     * this option means that, instead of using link element with href to load css,
+     * we will try to parse the css text instead and send it as css rules set
+     * can (and will) affect performance
+     * */
+    private readonly inlineRemoteCss;
+    private readonly inlinerOptions;
     private readonly domParser;
-    constructor(app: App, isTopContext?: boolean, options?: {
-        disableSprites: boolean;
-    });
+    constructor(app: App, isTopContext?: boolean, options?: Options);
     private clear;
     /**
      * EXPERIMENTAL: Unbinds the removed nodes in case of iframe src change.
@@ -31,3 +44,4 @@ export default abstract class Observer {
     protected observeRoot(node: Node, beforeCommit: (id?: number) => unknown, nodeToBind?: Node): void;
     disconnect(): void;
 }
+export {};

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

@@ -1,9 +1,27 @@
 import Observer from './observer.js';
 import { Offset } from './iframe_offsets.js';
 import App from '../index.js';
+export declare enum InlineCssMode {
+    /** default behavior -- will parse and cache the css file on backend */
+    Disabled = 0,
+    /** will attempt to record the linked css file as AdoptedStyleSheet object */
+    Inline = 1,
+    /** will fetch the file, then simulated AdoptedStyleSheets behavior programmaticaly for the replay */
+    InlineFetched = 2,
+    /** will fetch the file, then save it as plain css inside <style> node */
+    PlainFetched = 3
+}
 export interface Options {
     captureIFrames: boolean;
     disableSprites: boolean;
+    /**
+     * with this option instead of using link element with href to load css,
+     * we will try to parse the css text instead and send it as css rules set
+     * can (and probably will) affect performance to certain degree,
+     * especially if the css itself is crossdomain
+     * @default InlineCssMode.None = 0
+     * */
+    inlineCss: InlineCssMode;
 }
 type Context = Window & typeof globalThis;
 type ContextCallback = (context: Context) => void;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@openreplay/tracker",
   "description": "The OpenReplay tracker main package",
-  "version": "16.1.4",
+  "version": "16.2.1",
   "keywords": [
     "logging",
     "replay"