@highlight-run/rrweb 2.0.0-lambda.7 → 2.0.0-lambda.8

package/dist/rrweb.d.cts

@@ -9,6 +9,7 @@ import { Emitter } from '../../../../node_modules/@highlight-run/rrweb-types/dis
 import { EventType } from '../../../node_modules/@highlight-run/rrweb-types/dist/rrweb-types.js';
 import { eventWithTime } from '../../../node_modules/@highlight-run/rrweb-types/dist/rrweb-types.js';
 import { eventWithTime as eventWithTime_2 } from '../../../../node_modules/@highlight-run/rrweb-types/dist/rrweb-types.js';
+import { eventWithTime as eventWithTime_3 } from '../../../../../node_modules/@highlight-run/rrweb-types/dist/rrweb-types.js';
 import { Handler } from '../../../../node_modules/@highlight-run/rrweb-types/dist/rrweb-types.js';
 import { hookResetter } from '../../../node_modules/@highlight-run/rrweb-types/dist/rrweb-types.js';
 import { hooksParam } from '../../../node_modules/@highlight-run/rrweb-types/dist/rrweb-types.js';
@@ -29,6 +30,7 @@ import { MouseInteractions } from '../../../node_modules/@highlight-run/rrweb-ty
 import { nowTimestamp } from '../../../node_modules/@highlight-run/rrweb-utils/dist/rrweb-utils.js';
 import { PackFn } from '../../../node_modules/@highlight-run/rrweb-types/dist/rrweb-types.js';
 import { playerMetaData } from '../../../../node_modules/@highlight-run/rrweb-types/dist/rrweb-types.js';
+import { playerMetaData as playerMetaData_2 } from '../../../../../node_modules/@highlight-run/rrweb-types/dist/rrweb-types.js';
 import { RecordPlugin } from '../../../node_modules/@highlight-run/rrweb-types/dist/rrweb-types.js';
 import { ReplayerEvents } from '../../../node_modules/@highlight-run/rrweb-types/dist/rrweb-types.js';
 import { RRDocument } from '../../../../node_modules/@highlight-run/rrdom/dist/rrdom.js';
@@ -36,6 +38,7 @@ import { RRIFrameElement } from '../../../node_modules/@highlight-run/rrdom/dist
 import { RRNode } from '../../../node_modules/@highlight-run/rrdom/dist/rrdom.js';
 import { SamplingStrategy } from '../../../node_modules/@highlight-run/rrweb-types/dist/rrweb-types.js';
 import { SessionInterval } from '../../../../node_modules/@highlight-run/rrweb-types/dist/rrweb-types.js';
+import { SessionInterval as SessionInterval_2 } from '../../../../../node_modules/@highlight-run/rrweb-types/dist/rrweb-types.js';
 import { SlimDOMOptions } from '../../../node_modules/@highlight-run/rrweb-snapshot/dist/rrweb-snapshot.js';
 import { StateMachine } from '@xstate/fsm';
 import { textMutation } from '../../../node_modules/@highlight-run/rrweb-types/dist/rrweb-types.js';
@@ -49,6 +52,8 @@ declare type AppendedIframe = {
     builtNode: HTMLIFrameElement | RRIFrameElement;
 };
 
+export declare function buildHostDocument(options: HostDocumentOptions): string;
+
 export declare function canvasMutation({ event, mutation, target, imageMap, canvasEventMap, errorHandler, }: {
     event: Parameters<Replayer['applyIncremental']>[0];
     mutation: canvasMutationData;
@@ -64,6 +69,84 @@ declare function createPlayerService(context: PlayerContext, { getCastFn, applyE
 
 declare function createSpeedService(context: SpeedContext): StateMachine.Service<SpeedContext, SpeedEvent, SpeedState>;
 
+export declare class EmbeddedReplayerClient {
+    private readonly iframe;
+    private readonly hostOrigin;
+    private readonly listeners;
+    private metadata;
+    private activityIntervals;
+    private dimensions;
+    private lastCurrentTime;
+    private ready;
+    private readyResolvers;
+    private disposed;
+    private pending;
+    constructor(iframe: HTMLIFrameElement, options?: EmbeddedReplayerClientOptions);
+    whenReady(): Promise<void>;
+    init(events: eventWithTime_3[], config?: SerializableReplayerConfig, autoplay?: boolean): void;
+    play(timeOffset?: number): void;
+    pause(timeOffset?: number): void;
+    resume(timeOffset?: number): void;
+    setConfig(config: SerializableReplayerConfig): void;
+    setLayout(scale: number, anchor?: ReplayAnchor): void;
+    replaceEvents(events: eventWithTime_3[]): void;
+    addEvent(event: eventWithTime_3): void;
+    enableInteract(): void;
+    disableInteract(): void;
+    destroy(): void;
+    on(event: string, listener: Listener): void;
+    off(event: string, listener: Listener): void;
+    getCurrentTime(): number;
+    getMetaData(): playerMetaData_2 | null;
+    getActivityIntervals(): SessionInterval_2[];
+    getDimensions(): ReplayDimensions | null;
+    private send;
+    private postToHost;
+    private flushPending;
+    private probe;
+    private onMessage;
+    private handle;
+    private emit;
+}
+
+export declare interface EmbeddedReplayerClientOptions {
+    hostOrigin?: string;
+}
+
+export declare class EmbeddedReplayerHost {
+    private readonly root;
+    private readonly parentWindow;
+    private readonly timeUpdateIntervalMs;
+    private readonly expectedParentOrigin;
+    private replayer;
+    private playing;
+    private timer;
+    private started;
+    private layout;
+    constructor(options?: EmbeddedReplayerHostOptions);
+    start(): void;
+    stop(): void;
+    private onMessage;
+    private handle;
+    private init;
+    private applyLayout;
+    private postDimensions;
+    private postInitialized;
+    private wireEvents;
+    private setPlaying;
+    private startTimePump;
+    private postTime;
+    private stopTimePump;
+    private post;
+}
+
+export declare interface EmbeddedReplayerHostOptions {
+    expectedParentOrigin?: string;
+    root?: HTMLElement;
+    parentWindow?: Window;
+    timeUpdateIntervalMs?: number;
+}
+
 declare type ErrorHandler = (error: unknown) => void | boolean;
 
 export { EventType }
@@ -100,6 +183,73 @@ declare function hasShadowRoot<T extends Node | RRNode>(n: T): n is T & {
 
 declare function hookSetter<T>(target: T, key: string | number | symbol, d: PropertyDescriptor, isRevoked?: boolean, win?: Window & typeof globalThis): hookResetter;
 
+export declare type HostCommand = {
+    type: 'ping';
+} | {
+    type: 'init';
+    events: eventWithTime_3[];
+    config?: SerializableReplayerConfig;
+    autoplay?: boolean;
+} | {
+    type: 'setLayout';
+    scale: number;
+    anchor?: ReplayAnchor;
+} | {
+    type: 'play';
+    timeOffset?: number;
+} | {
+    type: 'pause';
+    timeOffset?: number;
+} | {
+    type: 'resume';
+    timeOffset?: number;
+} | {
+    type: 'setConfig';
+    config: SerializableReplayerConfig;
+} | {
+    type: 'replaceEvents';
+    events: eventWithTime_3[];
+} | {
+    type: 'addEvent';
+    event: eventWithTime_3;
+} | {
+    type: 'enableInteract';
+} | {
+    type: 'disableInteract';
+} | {
+    type: 'destroy';
+};
+
+export declare interface HostDocumentOptions {
+    scriptUrl: string;
+    styleUrl?: string;
+    extraStyleSources?: string[];
+}
+
+export declare type HostMessage = {
+    type: 'ready';
+} | {
+    type: 'initialized';
+    metadata: playerMetaData_2;
+    activityIntervals: SessionInterval_2[];
+} | {
+    type: 'replayer-event';
+    event: string;
+    payload?: unknown;
+} | {
+    type: 'time';
+    currentTime: number;
+} | {
+    type: 'dimensions';
+    width: number;
+    height: number;
+    top: number;
+    left: number;
+} | {
+    type: 'error';
+    message: string;
+};
+
 export { IncrementalSource }
 
 declare function inDom(n: Node): boolean;
@@ -122,12 +272,16 @@ declare function iterateResolveTree(tree: ResolveTree, cb: (mutation: addedNodeM
 
 declare function legacy_isTouchEvent(event: MouseEvent | TouchEvent | PointerEvent): event is TouchEvent;
 
+declare type Listener = (payload?: unknown) => void;
+
 export declare let mirror: DeprecatedMirror;
 
 export { MouseInteractions }
 
 declare function on(type: string, fn: EventListenerOrEventListenerObject, target?: Document | IWindow): listenerHandler_2;
 
+export declare function pickSerializableConfig(config: unknown): SerializableReplayerConfig;
+
 declare type PlayerAssets = {
     emitter: Emitter;
     applyEventsSynchronously(events: Array<eventWithTime_2>): void;
@@ -275,6 +429,15 @@ export declare type recordOptions<T> = {
     };
 };
 
+export declare type ReplayAnchor = 'top' | 'center';
+
+export declare interface ReplayDimensions {
+    width: number;
+    height: number;
+    top: number;
+    left: number;
+}
+
 export declare class Replayer {
     wrapper: HTMLDivElement;
     iframe: HTMLIFrameElement;
@@ -383,6 +546,16 @@ declare type ResolveTree = {
     parent: ResolveTree | null;
 };
 
+export declare const RRWEB_EMBEDDED_CHANNEL: "rrweb-embedded";
+
+export declare const RRWEB_EMBEDDED_PROTOCOL_VERSION: 1;
+
+declare const SERIALIZABLE_CONFIG_KEYS: readonly ["speed", "maxSpeed", "loadTimeout", "skipInactive", "inactivePeriodThreshold", "showWarning", "showDebug", "blockClass", "liveMode", "insertStyleRules", "triggerFocus", "UNSAFE_replayCanvas", "cspContent", "pauseAnimation", "mouseTail", "useVirtualDom", "inactiveThreshold", "inactiveSkipTime"];
+
+declare type SerializableConfigKey = (typeof SERIALIZABLE_CONFIG_KEYS)[number];
+
+export declare type SerializableReplayerConfig = Partial<Pick<playerConfig, SerializableConfigKey>>;
+
 declare function shadowHostInDom(n: Node): boolean;
 
 declare type SpeedContext = {
@@ -414,6 +587,8 @@ declare type SpeedState = {
     context: SpeedContext;
 };
 
+export declare function startEmbeddedReplayerHost(options?: EmbeddedReplayerHostOptions): EmbeddedReplayerHost;
+
 declare class StyleSheetMirror {
     private id;
     private styleIDMap;

package/dist/rrweb.d.ts

@@ -9,6 +9,7 @@ import { Emitter } from '../../../../node_modules/@highlight-run/rrweb-types/dis
 import { EventType } from '../../../node_modules/@highlight-run/rrweb-types/dist/rrweb-types.js';
 import { eventWithTime } from '../../../node_modules/@highlight-run/rrweb-types/dist/rrweb-types.js';
 import { eventWithTime as eventWithTime_2 } from '../../../../node_modules/@highlight-run/rrweb-types/dist/rrweb-types.js';
+import { eventWithTime as eventWithTime_3 } from '../../../../../node_modules/@highlight-run/rrweb-types/dist/rrweb-types.js';
 import { Handler } from '../../../../node_modules/@highlight-run/rrweb-types/dist/rrweb-types.js';
 import { hookResetter } from '../../../node_modules/@highlight-run/rrweb-types/dist/rrweb-types.js';
 import { hooksParam } from '../../../node_modules/@highlight-run/rrweb-types/dist/rrweb-types.js';
@@ -29,6 +30,7 @@ import { MouseInteractions } from '../../../node_modules/@highlight-run/rrweb-ty
 import { nowTimestamp } from '../../../node_modules/@highlight-run/rrweb-utils/dist/rrweb-utils.js';
 import { PackFn } from '../../../node_modules/@highlight-run/rrweb-types/dist/rrweb-types.js';
 import { playerMetaData } from '../../../../node_modules/@highlight-run/rrweb-types/dist/rrweb-types.js';
+import { playerMetaData as playerMetaData_2 } from '../../../../../node_modules/@highlight-run/rrweb-types/dist/rrweb-types.js';
 import { RecordPlugin } from '../../../node_modules/@highlight-run/rrweb-types/dist/rrweb-types.js';
 import { ReplayerEvents } from '../../../node_modules/@highlight-run/rrweb-types/dist/rrweb-types.js';
 import { RRDocument } from '../../../../node_modules/@highlight-run/rrdom/dist/rrdom.js';
@@ -36,6 +38,7 @@ import { RRIFrameElement } from '../../../node_modules/@highlight-run/rrdom/dist
 import { RRNode } from '../../../node_modules/@highlight-run/rrdom/dist/rrdom.js';
 import { SamplingStrategy } from '../../../node_modules/@highlight-run/rrweb-types/dist/rrweb-types.js';
 import { SessionInterval } from '../../../../node_modules/@highlight-run/rrweb-types/dist/rrweb-types.js';
+import { SessionInterval as SessionInterval_2 } from '../../../../../node_modules/@highlight-run/rrweb-types/dist/rrweb-types.js';
 import { SlimDOMOptions } from '../../../node_modules/@highlight-run/rrweb-snapshot/dist/rrweb-snapshot.js';
 import { StateMachine } from '@xstate/fsm';
 import { textMutation } from '../../../node_modules/@highlight-run/rrweb-types/dist/rrweb-types.js';
@@ -49,6 +52,8 @@ declare type AppendedIframe = {
     builtNode: HTMLIFrameElement | RRIFrameElement;
 };
 
+export declare function buildHostDocument(options: HostDocumentOptions): string;
+
 export declare function canvasMutation({ event, mutation, target, imageMap, canvasEventMap, errorHandler, }: {
     event: Parameters<Replayer['applyIncremental']>[0];
     mutation: canvasMutationData;
@@ -64,6 +69,84 @@ declare function createPlayerService(context: PlayerContext, { getCastFn, applyE
 
 declare function createSpeedService(context: SpeedContext): StateMachine.Service<SpeedContext, SpeedEvent, SpeedState>;
 
+export declare class EmbeddedReplayerClient {
+    private readonly iframe;
+    private readonly hostOrigin;
+    private readonly listeners;
+    private metadata;
+    private activityIntervals;
+    private dimensions;
+    private lastCurrentTime;
+    private ready;
+    private readyResolvers;
+    private disposed;
+    private pending;
+    constructor(iframe: HTMLIFrameElement, options?: EmbeddedReplayerClientOptions);
+    whenReady(): Promise<void>;
+    init(events: eventWithTime_3[], config?: SerializableReplayerConfig, autoplay?: boolean): void;
+    play(timeOffset?: number): void;
+    pause(timeOffset?: number): void;
+    resume(timeOffset?: number): void;
+    setConfig(config: SerializableReplayerConfig): void;
+    setLayout(scale: number, anchor?: ReplayAnchor): void;
+    replaceEvents(events: eventWithTime_3[]): void;
+    addEvent(event: eventWithTime_3): void;
+    enableInteract(): void;
+    disableInteract(): void;
+    destroy(): void;
+    on(event: string, listener: Listener): void;
+    off(event: string, listener: Listener): void;
+    getCurrentTime(): number;
+    getMetaData(): playerMetaData_2 | null;
+    getActivityIntervals(): SessionInterval_2[];
+    getDimensions(): ReplayDimensions | null;
+    private send;
+    private postToHost;
+    private flushPending;
+    private probe;
+    private onMessage;
+    private handle;
+    private emit;
+}
+
+export declare interface EmbeddedReplayerClientOptions {
+    hostOrigin?: string;
+}
+
+export declare class EmbeddedReplayerHost {
+    private readonly root;
+    private readonly parentWindow;
+    private readonly timeUpdateIntervalMs;
+    private readonly expectedParentOrigin;
+    private replayer;
+    private playing;
+    private timer;
+    private started;
+    private layout;
+    constructor(options?: EmbeddedReplayerHostOptions);
+    start(): void;
+    stop(): void;
+    private onMessage;
+    private handle;
+    private init;
+    private applyLayout;
+    private postDimensions;
+    private postInitialized;
+    private wireEvents;
+    private setPlaying;
+    private startTimePump;
+    private postTime;
+    private stopTimePump;
+    private post;
+}
+
+export declare interface EmbeddedReplayerHostOptions {
+    expectedParentOrigin?: string;
+    root?: HTMLElement;
+    parentWindow?: Window;
+    timeUpdateIntervalMs?: number;
+}
+
 declare type ErrorHandler = (error: unknown) => void | boolean;
 
 export { EventType }
@@ -100,6 +183,73 @@ declare function hasShadowRoot<T extends Node | RRNode>(n: T): n is T & {
 
 declare function hookSetter<T>(target: T, key: string | number | symbol, d: PropertyDescriptor, isRevoked?: boolean, win?: Window & typeof globalThis): hookResetter;
 
+export declare type HostCommand = {
+    type: 'ping';
+} | {
+    type: 'init';
+    events: eventWithTime_3[];
+    config?: SerializableReplayerConfig;
+    autoplay?: boolean;
+} | {
+    type: 'setLayout';
+    scale: number;
+    anchor?: ReplayAnchor;
+} | {
+    type: 'play';
+    timeOffset?: number;
+} | {
+    type: 'pause';
+    timeOffset?: number;
+} | {
+    type: 'resume';
+    timeOffset?: number;
+} | {
+    type: 'setConfig';
+    config: SerializableReplayerConfig;
+} | {
+    type: 'replaceEvents';
+    events: eventWithTime_3[];
+} | {
+    type: 'addEvent';
+    event: eventWithTime_3;
+} | {
+    type: 'enableInteract';
+} | {
+    type: 'disableInteract';
+} | {
+    type: 'destroy';
+};
+
+export declare interface HostDocumentOptions {
+    scriptUrl: string;
+    styleUrl?: string;
+    extraStyleSources?: string[];
+}
+
+export declare type HostMessage = {
+    type: 'ready';
+} | {
+    type: 'initialized';
+    metadata: playerMetaData_2;
+    activityIntervals: SessionInterval_2[];
+} | {
+    type: 'replayer-event';
+    event: string;
+    payload?: unknown;
+} | {
+    type: 'time';
+    currentTime: number;
+} | {
+    type: 'dimensions';
+    width: number;
+    height: number;
+    top: number;
+    left: number;
+} | {
+    type: 'error';
+    message: string;
+};
+
 export { IncrementalSource }
 
 declare function inDom(n: Node): boolean;
@@ -122,12 +272,16 @@ declare function iterateResolveTree(tree: ResolveTree, cb: (mutation: addedNodeM
 
 declare function legacy_isTouchEvent(event: MouseEvent | TouchEvent | PointerEvent): event is TouchEvent;
 
+declare type Listener = (payload?: unknown) => void;
+
 export declare let mirror: DeprecatedMirror;
 
 export { MouseInteractions }
 
 declare function on(type: string, fn: EventListenerOrEventListenerObject, target?: Document | IWindow): listenerHandler_2;
 
+export declare function pickSerializableConfig(config: unknown): SerializableReplayerConfig;
+
 declare type PlayerAssets = {
     emitter: Emitter;
     applyEventsSynchronously(events: Array<eventWithTime_2>): void;
@@ -275,6 +429,15 @@ export declare type recordOptions<T> = {
     };
 };
 
+export declare type ReplayAnchor = 'top' | 'center';
+
+export declare interface ReplayDimensions {
+    width: number;
+    height: number;
+    top: number;
+    left: number;
+}
+
 export declare class Replayer {
     wrapper: HTMLDivElement;
     iframe: HTMLIFrameElement;
@@ -383,6 +546,16 @@ declare type ResolveTree = {
     parent: ResolveTree | null;
 };
 
+export declare const RRWEB_EMBEDDED_CHANNEL: "rrweb-embedded";
+
+export declare const RRWEB_EMBEDDED_PROTOCOL_VERSION: 1;
+
+declare const SERIALIZABLE_CONFIG_KEYS: readonly ["speed", "maxSpeed", "loadTimeout", "skipInactive", "inactivePeriodThreshold", "showWarning", "showDebug", "blockClass", "liveMode", "insertStyleRules", "triggerFocus", "UNSAFE_replayCanvas", "cspContent", "pauseAnimation", "mouseTail", "useVirtualDom", "inactiveThreshold", "inactiveSkipTime"];
+
+declare type SerializableConfigKey = (typeof SERIALIZABLE_CONFIG_KEYS)[number];
+
+export declare type SerializableReplayerConfig = Partial<Pick<playerConfig, SerializableConfigKey>>;
+
 declare function shadowHostInDom(n: Node): boolean;
 
 declare type SpeedContext = {
@@ -414,6 +587,8 @@ declare type SpeedState = {
     context: SpeedContext;
 };
 
+export declare function startEmbeddedReplayerHost(options?: EmbeddedReplayerHostOptions): EmbeddedReplayerHost;
+
 declare class StyleSheetMirror {
     private id;
     private styleIDMap;