Reduce verbosity/redundancy of new pointerType attribute (rrweb-io#1206)

* Reduce verbosity/redundancy of output of new pointerType attribute by confining it only to clicks (and to a MouseDown/MouseUp from a PointerTypes.Pen, as these don't yet have a dedicated PendDown/PenUp) * Update how the changeset will read for the next release based on the trimming in this PR * Prefer triple equals * The assignment to the outer `pointerType` variable in an anonymous function was somehow missed by the `typings` check * Apply formatting changes * Update packages/rrweb/src/record/observer.ts * Update packages/rrweb/src/record/observer.ts --------- Co-authored-by: Yun Feng <yun.feng0817@gmail.com>
eoghanmurray · Aug 8, 2023 · 0593bb0 · 0593bb0
1 parent 6dab739
commit 0593bb0
Show file tree

Hide file tree

Showing 4 changed files with 64 additions and 94 deletions.
diff --git a/.changeset/little-suits-leave.md b/.changeset/little-suits-leave.md
@@ -3,4 +3,4 @@
 '@rrweb/types': minor
 ---
 
-click events (as well as mousedown/mouseup/touchstart/touchend events) now include a `.pointerType` attribute which distinguishes between ['pen', 'mouse' and 'touch' events](https://developer.mozilla.org/en-US/docs/Web/API/PointerEvent/pointerType)
+click events now include a `.pointerType` attribute which distinguishes between ['pen', 'mouse' and 'touch' events](https://developer.mozilla.org/en-US/docs/Web/API/PointerEvent/pointerType). There is no new PenDown/PenUp events, but these can be detected with a MouseDown/MouseUp + pointerType=pen
diff --git a/packages/rrweb/src/record/observer.ts b/packages/rrweb/src/record/observer.ts
@@ -244,14 +244,17 @@ function initMouseInteractionObserver({
       let pointerType: PointerTypes | null = null;
       let thisEventKey = eventKey;
       if ('pointerType' in event) {
-        Object.keys(PointerTypes).forEach(
-          (pointerKey: keyof typeof PointerTypes) => {
-            if (event.pointerType === pointerKey.toLowerCase()) {
-              pointerType = PointerTypes[pointerKey];
-              return;
-            }
-          },
-        );
+        switch (event.pointerType) {
+          case 'mouse':
+            pointerType = PointerTypes.Mouse;
+            break;
+          case 'touch':
+            pointerType = PointerTypes.Touch;
+            break;
+          case 'pen':
+            pointerType = PointerTypes.Pen;
+            break;
+        }
         if (pointerType === PointerTypes.Touch) {
           if (MouseInteractions[eventKey] === MouseInteractions.MouseDown) {
             // we are actually listening on 'pointerdown'
@@ -262,14 +265,23 @@ function initMouseInteractionObserver({
             // we are actually listening on 'pointerup'
             thisEventKey = 'TouchEnd';
           }
-        } else if (pointerType == PointerTypes.Pen) {
+        } else if (pointerType === PointerTypes.Pen) {
           // TODO: these will get incorrectly emitted as MouseDown/MouseUp
         }
       } else if (legacy_isTouchEvent(event)) {
         pointerType = PointerTypes.Touch;
       }
       if (pointerType !== null) {
         currentPointerType = pointerType;
+        if (
+          (thisEventKey.startsWith('Touch') &&
+            pointerType === PointerTypes.Touch) ||
+          (thisEventKey.startsWith('Mouse') &&
+            pointerType === PointerTypes.Mouse)
+        ) {
+          // don't output redundant info
+          pointerType = null;
+        }
       } else if (MouseInteractions[eventKey] === MouseInteractions.Click) {
         pointerType = currentPointerType;
         currentPointerType = null; // cleanup as we've used it