angular-debug-recorder 1.0.3 → 1.1.1

package/lib/services/recorder.service.d.ts

@@ -1,6 +1,31 @@
 import { NgZone } from '@angular/core';
 import { RecordingSession } from '../models/recorded-action.model';
 import * as i0 from "@angular/core";
+/**
+ * Performance notes
+ * ─────────────────
+ * All DOM event listeners are registered **outside Angular's NgZone**
+ * (zone.runOutsideAngular). This means a click, input, or scroll never
+ * triggers Angular Change Detection by itself.
+ *
+ * Recorded actions are batched in a plain array and flushed once per
+ * animation frame via requestAnimationFrame. Only the RAF callback runs
+ * inside zone.run() → at most one CD cycle per frame, regardless of how
+ * many events fired.
+ *
+ * Why this matters for OnPush host apps
+ * ──────────────────────────────────────
+ * When this recorder is embedded in a library used inside an OnPush app,
+ * the old zone.run()-per-event approach caused the host app's CD to run
+ * on every user interaction. With this implementation the host app is
+ * completely unaffected — only the recorder's own signals trigger CD.
+ *
+ * F5 / page-reload survival
+ * ─────────────────────────
+ * The active recording session is written to sessionStorage on
+ * beforeunload and restored in the constructor. If the user accidentally
+ * refreshes mid-recording, no actions are lost.
+ */
 export declare class RecorderService {
     private zone;
     private _isRecording;
@@ -12,8 +37,12 @@ export declare class RecorderService {
     currentSession: import("@angular/core").Signal<RecordingSession | null>;
     sessions: import("@angular/core").Signal<RecordingSession[]>;
     actionCount: import("@angular/core").Signal<number>;
+    private pendingActions;
+    private rafId?;
     private listeners;
-    private mutationObserver?;
+    private lastScrollTime;
+    private static readonly SESSION_KEY;
+    private static readonly SESSIONS_KEY;
     constructor(zone: NgZone);
     startRecording(name?: string, description?: string): void;
     stopRecording(): RecordingSession | null;
@@ -23,6 +52,12 @@ export declare class RecorderService {
     addNote(actionId: string, note: string): void;
     deleteSession(sessionId: string): void;
     loadSession(session: RecordingSession): void;
+    /**
+     * Schedule one signal update at the next animation frame.
+     * Multiple events within a single frame are coalesced → one CD cycle.
+     */
+    private scheduleFlush;
+    private flushPending;
     private attachListeners;
     private detachListeners;
     private handleClick;
@@ -30,7 +65,6 @@ export declare class RecorderService {
     private handleInput;
     private handleChange;
     private handleSubmit;
-    private lastScrollTime;
     private handleScroll;
     private handleKeydown;
     private recordNavigation;
@@ -40,6 +74,8 @@ export declare class RecorderService {
     private describeElement;
     private shouldRecord;
     private addAction;
+    private persistToStorage;
+    private restoreFromStorage;
     private generateId;
     static ɵfac: i0.ɵɵFactoryDeclaration<RecorderService, never>;
     static ɵprov: i0.ɵɵInjectableDeclaration<RecorderService>;

package/lib/session-replay/session-replay.component.d.ts

@@ -6,11 +6,14 @@ export declare class SessionReplayComponent implements OnDestroy {
     rrweb: RrwebRecorderService;
     overlayOpen: import("@angular/core").WritableSignal<boolean>;
     isPlaying: import("@angular/core").WritableSignal<boolean>;
+    importError: import("@angular/core").WritableSignal<string | null>;
+    importedFilename: import("@angular/core").WritableSignal<string | null>;
     openOverlay(): Promise<void>;
     closeOverlay(): void;
     pauseResume(): Promise<void>;
     restart(): Promise<void>;
     exportSession(): void;
+    onFileSelected(event: Event): void;
     private startPlay;
     private scaleReplayer;
     ngOnDestroy(): void;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "angular-debug-recorder",
-  "version": "1.0.3",
+  "version": "1.1.1",
   "description": "Floating debug panel that records UI interactions and generates Cypress tests via AI",
   "keywords": [
     "angular",