From dfb7c1f5ca69a528ae665790ffd449f77fe8709a Mon Sep 17 00:00:00 2001 From: Sam Mason Date: Sun, 30 Dec 2018 21:25:32 +0000 Subject: [PATCH 1/2] Add in option for ignore classname --- src/record/index.ts | 129 +++++++++++++++++++++-------------------- src/record/observer.ts | 16 +++-- src/types.ts | 2 + 3 files changed, 79 insertions(+), 68 deletions(-) diff --git a/src/record/index.ts b/src/record/index.ts index c2ec8e5a5c..f8fd3aee67 100644 --- a/src/record/index.ts +++ b/src/record/index.ts @@ -18,7 +18,7 @@ function wrapEvent(e: event): eventWithTime { } function record(options: recordOptions = {}): listenerHandler | undefined { - const { emit } = options; + const { emit, blockClass, ignoreClass } = options; // runtime checks for user options if (!emit) { throw new Error('emit function is required'); @@ -64,68 +64,71 @@ function record(options: recordOptions = {}): listenerHandler | undefined { }), ); handlers.push( - initObservers({ - mutationCb: m => - emit( - wrapEvent({ - type: EventType.IncrementalSnapshot, - data: { - source: IncrementalSource.Mutation, - ...m, - }, - }), - ), - mousemoveCb: positions => - emit( - wrapEvent({ - type: EventType.IncrementalSnapshot, - data: { - source: IncrementalSource.MouseMove, - positions, - }, - }), - ), - mouseInteractionCb: d => - emit( - wrapEvent({ - type: EventType.IncrementalSnapshot, - data: { - source: IncrementalSource.MouseInteraction, - ...d, - }, - }), - ), - scrollCb: p => - emit( - wrapEvent({ - type: EventType.IncrementalSnapshot, - data: { - source: IncrementalSource.Scroll, - ...p, - }, - }), - ), - viewportResizeCb: d => - emit( - wrapEvent({ - type: EventType.IncrementalSnapshot, - data: { - source: IncrementalSource.ViewportResize, - ...d, - }, - }), - ), - inputCb: v => - emit( - wrapEvent({ - type: EventType.IncrementalSnapshot, - data: { - source: IncrementalSource.Input, - ...v, - }, - }), - ), - }), + initObservers( + { + mutationCb: m => + emit( + wrapEvent({ + type: EventType.IncrementalSnapshot, + data: { + source: IncrementalSource.Mutation, + ...m, + }, + }), + ), + mousemoveCb: positions => + emit( + wrapEvent({ + type: EventType.IncrementalSnapshot, + data: { + source: IncrementalSource.MouseMove, + positions, + }, + }), + ), + mouseInteractionCb: d => + emit( + wrapEvent({ + type: EventType.IncrementalSnapshot, + data: { + source: IncrementalSource.MouseInteraction, + ...d, + }, + }), + ), + scrollCb: p => + emit( + wrapEvent({ + type: EventType.IncrementalSnapshot, + data: { + source: IncrementalSource.Scroll, + ...p, + }, + }), + ), + viewportResizeCb: d => + emit( + wrapEvent({ + type: EventType.IncrementalSnapshot, + data: { + source: IncrementalSource.ViewportResize, + ...d, + }, + }), + ), + inputCb: v => + emit( + wrapEvent({ + type: EventType.IncrementalSnapshot, + data: { + source: IncrementalSource.Input, + ...v, + }, + }), + ), + }, + ignoreClass, + ), ); }; if ( diff --git a/src/record/observer.ts b/src/record/observer.ts index c31125329f..2eb5140b85 100644 --- a/src/record/observer.ts +++ b/src/record/observer.ts @@ -331,9 +331,12 @@ const HOOK_PROPERTIES: Array<[HTMLElement, string]> = [ [HTMLSelectElement.prototype, 'value'], [HTMLTextAreaElement.prototype, 'value'], ]; -const IGNORE_CLASS = 'rr-ignore'; + const lastInputValueMap: WeakMap = new WeakMap(); -function initInputObserver(cb: inputCallback): listenerHandler { +function initInputObserver( + cb: inputCallback, + ignoreClass = 'rr-ignore', +): listenerHandler { function eventHandler(event: Event) { const { target } = event; if ( @@ -347,7 +350,7 @@ function initInputObserver(cb: inputCallback): listenerHandler { const type: string | undefined = (target as HTMLInputElement).type; if ( type === 'password' || - (target as HTMLElement).classList.contains(IGNORE_CLASS) + (target as HTMLElement).classList.contains(ignoreClass) ) { return; } @@ -413,7 +416,10 @@ function initInputObserver(cb: inputCallback): listenerHandler { }; } -export default function initObservers(o: observerParam): listenerHandler { +export default function initObservers( + o: observerParam, + ignoreClass?: string, +): listenerHandler { const mutationObserver = initMutationObserver(o.mutationCb); const mousemoveHandler = initMousemoveObserver(o.mousemoveCb); const mouseInteractionHandler = initMouseInteractionObserver( @@ -421,7 +427,7 @@ export default function initObservers(o: observerParam): listenerHandler { ); const scrollHandler = initScrollObserver(o.scrollCb); const viewportResizeHandler = initViewportResizeObserver(o.viewportResizeCb); - const inputHandler = initInputObserver(o.inputCb); + const inputHandler = initInputObserver(o.inputCb, ignoreClass); return () => { mutationObserver.disconnect(); mousemoveHandler(); diff --git a/src/types.ts b/src/types.ts index 86ffb8f035..08324092c4 100644 --- a/src/types.ts +++ b/src/types.ts @@ -100,6 +100,8 @@ export type eventWithTime = event & { export type recordOptions = { emit?: (e: eventWithTime) => void; + blockClass?: string; + ignoreClass?: string; }; export type observerParam = { From bc47eb6f66e577dce376c4bfa0dd7a1ed30a1db0 Mon Sep 17 00:00:00 2001 From: Sam Mason Date: Sun, 30 Dec 2018 21:54:58 +0000 Subject: [PATCH 2/2] Add block class configuration --- src/record/index.ts | 3 ++- src/record/observer.ts | 10 +++++++--- 2 files changed, 9 insertions(+), 4 deletions(-) diff --git a/src/record/index.ts b/src/record/index.ts index f8fd3aee67..d581cea09c 100644 --- a/src/record/index.ts +++ b/src/record/index.ts @@ -46,7 +46,7 @@ function record(options: recordOptions = {}): listenerHandler | undefined { }, }), ); - const [node, idNodeMap] = snapshot(document); + const [node, idNodeMap] = snapshot(document, blockClass); if (!node) { return console.warn('Failed to snapshot the document'); } @@ -128,6 +128,7 @@ function record(options: recordOptions = {}): listenerHandler | undefined { ), }, ignoreClass, + blockClass, ), ); }; diff --git a/src/record/observer.ts b/src/record/observer.ts index 2eb5140b85..cd617e18fd 100644 --- a/src/record/observer.ts +++ b/src/record/observer.ts @@ -44,7 +44,10 @@ import { * which means all the id related calculation should be lazy too. * @param cb mutationCallBack */ -function initMutationObserver(cb: mutationCallBack): MutationObserver { +function initMutationObserver( + cb: mutationCallBack, + blockClass: string, +): MutationObserver { const observer = new MutationObserver(mutations => { const texts: textCursor[] = []; const attributes: attributeCursor[] = []; @@ -172,7 +175,7 @@ function initMutationObserver(cb: mutationCallBack): MutationObserver { nextId: !n.nextSibling ? n.nextSibling : mirror.getId(n.nextSibling as INode), - node: serializeNodeWithId(n, document, mirror.map, true)!, + node: serializeNodeWithId(n, document, mirror.map, blockClass, true)!, }); } else { dropped.push(n); @@ -419,8 +422,9 @@ function initInputObserver( export default function initObservers( o: observerParam, ignoreClass?: string, + blockClass?: string, ): listenerHandler { - const mutationObserver = initMutationObserver(o.mutationCb); + const mutationObserver = initMutationObserver(o.mutationCb, blockClass); const mousemoveHandler = initMousemoveObserver(o.mousemoveCb); const mouseInteractionHandler = initMouseInteractionObserver( o.mouseInteractionCb,