fix #62 accept RegExp type block class config

package.json

@@ -58,7 +58,7 @@
   "dependencies": {
     "@types/smoothscroll-polyfill": "^0.3.0",
     "mitt": "^1.1.3",
-    "rrweb-snapshot": "^0.7.6",
+    "rrweb-snapshot": "^0.7.8",
     "smoothscroll-polyfill": "^0.4.3"
   }
 }

src/record/observer.ts

@@ -26,6 +26,7 @@ import {
   hookResetter,
   textCursor,
   attributeCursor,
+  blockClass,
 } from '../types';
 import { deepDelete, isParentRemoved, isParentDropped } from './collection';
 
@@ -48,7 +49,7 @@ import { deepDelete, isParentRemoved, isParentDropped } from './collection';
  */
 function initMutationObserver(
   cb: mutationCallBack,
-  blockClass: string,
+  blockClass: blockClass,
 ): MutationObserver {
   const observer = new MutationObserver(mutations => {
     const texts: textCursor[] = [];
@@ -242,7 +243,7 @@ function initMousemoveObserver(cb: mousemoveCallBack): listenerHandler {
 
 function initMouseInteractionObserver(
   cb: mouseInteractionCallBack,
-  blockClass: string,
+  blockClass: blockClass,
 ): listenerHandler {
   const handlers: listenerHandler[] = [];
   const getHandler = (eventKey: keyof typeof MouseInteractions) => {
@@ -274,7 +275,7 @@ function initMouseInteractionObserver(
 
 function initScrollObserver(
   cb: scrollCallback,
-  blockClass: string,
+  blockClass: blockClass,
 ): listenerHandler {
   const updatePosition = throttle<UIEvent>(evt => {
     if (!evt.target || isBlocked(evt.target as Node, blockClass)) {
@@ -317,7 +318,7 @@ const INPUT_TAGS = ['INPUT', 'TEXTAREA', 'SELECT'];
 const lastInputValueMap: WeakMap<EventTarget, inputValue> = new WeakMap();
 function initInputObserver(
   cb: inputCallback,
-  blockClass: string,
+  blockClass: blockClass,
   ignoreClass: string,
 ): listenerHandler {
   function eventHandler(event: Event) {

src/types.ts

@@ -98,11 +98,13 @@ export type eventWithTime = event & {
   delay?: number;
 };
 
+export type blockClass = string | RegExp;
+
 export type recordOptions = {
   emit?: (e: eventWithTime, isCheckout?: boolean) => void;
   checkoutEveryNth?: number;
   checkoutEveryNms?: number;
-  blockClass?: string;
+  blockClass?: blockClass;
   ignoreClass?: string;
 };
 
@@ -113,7 +115,7 @@ export type observerParam = {
   scrollCb: scrollCallback;
   viewportResizeCb: viewportResizeCallback;
   inputCb: inputCallback;
-  blockClass: string;
+  blockClass: blockClass;
   ignoreClass: string;
 };
 

src/utils.ts

@@ -3,6 +3,7 @@ import {
   throttleOptions,
   listenerHandler,
   hookResetter,
+  blockClass,
 } from './types';
 import { INode } from 'rrweb-snapshot';
 
@@ -113,15 +114,22 @@ export function getWindowWidth(): number {
   );
 }
 
-export function isBlocked(node: Node | null, blockClass: string): boolean {
+export function isBlocked(node: Node | null, blockClass: blockClass): boolean {
   if (!node) {
     return false;
   }
   if (node.nodeType === node.ELEMENT_NODE) {
-    return (
-      (node as HTMLElement).classList.contains(blockClass) ||
-      isBlocked(node.parentNode, blockClass)
-    );
+    let needBlock = false;
+    if (typeof blockClass === 'string') {
+      needBlock = (node as HTMLElement).classList.contains(blockClass);
+    } else {
+      (node as HTMLElement).classList.forEach(className => {
+        if (blockClass.test(className)) {
+          needBlock = true;
+        }
+      });
+    }
+    return needBlock || isBlocked(node.parentNode, blockClass);
   }
   return isBlocked(node.parentNode, blockClass);
 }

typings/types.d.ts

@@ -70,11 +70,12 @@ export declare type eventWithTime = event & {
     timestamp: number;
     delay?: number;
 };
+export declare type blockClass = string | RegExp;
 export declare type recordOptions = {
     emit?: (e: eventWithTime, isCheckout?: boolean) => void;
     checkoutEveryNth?: number;
     checkoutEveryNms?: number;
-    blockClass?: string;
+    blockClass?: blockClass;
     ignoreClass?: string;
 };
 export declare type observerParam = {
@@ -84,7 +85,7 @@ export declare type observerParam = {
     scrollCb: scrollCallback;
     viewportResizeCb: viewportResizeCallback;
     inputCb: inputCallback;
-    blockClass: string;
+    blockClass: blockClass;
     ignoreClass: string;
 };
 export declare type textCursor = {

typings/utils.d.ts

@@ -1,4 +1,4 @@
-import { Mirror, throttleOptions, listenerHandler, hookResetter } from './types';
+import { Mirror, throttleOptions, listenerHandler, hookResetter, blockClass } from './types';
 import { INode } from 'rrweb-snapshot';
 export declare function on(type: string, fn: EventListenerOrEventListenerObject, target?: Document | Window): listenerHandler;
 export declare const mirror: Mirror;
@@ -6,5 +6,5 @@ export declare function throttle<T>(func: (arg: T) => void, wait: number, option
 export declare function hookSetter<T>(target: T, key: string | number | symbol, d: PropertyDescriptor): hookResetter;
 export declare function getWindowHeight(): number;
 export declare function getWindowWidth(): number;
-export declare function isBlocked(node: Node | null, blockClass: string): boolean;
+export declare function isBlocked(node: Node | null, blockClass: blockClass): boolean;
 export declare function isAncestorRemoved(target: INode): boolean;