Implement #2: simulate hover event

package.json

@@ -47,6 +47,6 @@
   },
   "dependencies": {
     "mitt": "^1.1.3",
-    "rrweb-snapshot": "0.5.3"
+    "rrweb-snapshot": "^0.5.6"
   }
 }

src/record/observer.ts

@@ -199,13 +199,14 @@ function initMousemoveObserver(cb: mousemoveCallBack): listenerHandler {
   }, 500);
   const updatePosition = throttle<MouseEvent>(
     evt => {
-      const { clientX, clientY } = evt;
+      const { clientX, clientY, target } = evt;
       if (!timeBaseline) {
         timeBaseline = Date.now();
       }
       positions.push({
         x: clientX,
         y: clientY,
+        id: mirror.getId(target as INode),
         timeOffset: Date.now() - timeBaseline,
       });
       wrappedCb();

src/replay/index.ts

@@ -31,11 +31,11 @@ export class Replayer {
 
   private iframe: HTMLIFrameElement;
   private mouse: HTMLDivElement;
-  private baselineTime: number = 0;
 
   private timerIds: number[] = [];
   private emitter: mitt.Emitter = mitt();
 
+  private baselineTime: number = 0;
   // record last played event timestamp when paused
   private lastPlayedEvent: eventWithTime;
 
@@ -260,6 +260,10 @@ export class Replayer {
             this.later(() => {
               this.mouse.style.left = `${p.x}px`;
               this.mouse.style.top = `${p.y}px`;
+              const target = mirror.getNode(p.id);
+              if (target) {
+                this.hoverElements((target as Node) as Element);
+              }
             }, p.timeOffset);
           });
         }
@@ -308,4 +312,17 @@ export class Replayer {
       default:
     }
   }
+
+  private hoverElements(el: Element) {
+    this.iframe
+      .contentDocument!.querySelectorAll('.\\:hover')
+      .forEach(hoveredEl => {
+        hoveredEl.classList.remove(':hover');
+      });
+    let currentEl: Element | null = el;
+    while (currentEl) {
+      currentEl.classList.add(':hover');
+      currentEl = currentEl.parentElement;
+    }
+  }
 }

src/types.ts

@@ -159,6 +159,7 @@ export type mousemoveCallBack = (p: mousePosition[]) => void;
 export type mousePosition = {
   x: number;
   y: number;
+  id: number;
   timeOffset: number;
 };