xuguopeng/rrweb
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

add hooks API (#132)

Browse Source
This commit is contained in:
yz-yu
2019-09-17 23:33:38 +08:00
committed by GitHub
parent a5152de531
commit b64e1492ab
5 changed files with 150 additions and 69 deletions
Download Patch File Download Diff File Expand all files Collapse all files

136
src/record/index.ts
View File

@@ -34,6 +34,7 @@ function record(options: recordOptions = {}): listenerHandler | undefined {
ignoreClass = 'rr-ignore', ignoreClass = 'rr-ignore',
inlineStylesheet = true, inlineStylesheet = true,
maskAllInputs = false, maskAllInputs = false,
hooks,
} = options; } = options;
// runtime checks for user options // runtime checks for user options
if (!emit) { if (!emit) {
@@ -114,72 +115,75 @@ function record(options: recordOptions = {}): listenerHandler | undefined {
takeFullSnapshot(); takeFullSnapshot();
handlers.push( handlers.push(
initObservers({ initObservers(
mutationCb: m => {
wrappedEmit( mutationCb: m =>
wrapEvent({ wrappedEmit(
type: EventType.IncrementalSnapshot, wrapEvent({
data: { type: EventType.IncrementalSnapshot,
source: IncrementalSource.Mutation, data: {
...m, source: IncrementalSource.Mutation,
}, ...m,
}), },
), }),
mousemoveCb: (positions, source) => ),
wrappedEmit( mousemoveCb: (positions, source) =>
wrapEvent({ wrappedEmit(
type: EventType.IncrementalSnapshot, wrapEvent({
data: { type: EventType.IncrementalSnapshot,
source, data: {
positions, source,
}, positions,
}), },
), }),
mouseInteractionCb: d => ),
wrappedEmit( mouseInteractionCb: d =>
wrapEvent({ wrappedEmit(
type: EventType.IncrementalSnapshot, wrapEvent({
data: { type: EventType.IncrementalSnapshot,
source: IncrementalSource.MouseInteraction, data: {
...d, source: IncrementalSource.MouseInteraction,
}, ...d,
}), },
), }),
scrollCb: p => ),
wrappedEmit( scrollCb: p =>
wrapEvent({ wrappedEmit(
type: EventType.IncrementalSnapshot, wrapEvent({
data: { type: EventType.IncrementalSnapshot,
source: IncrementalSource.Scroll, data: {
...p, source: IncrementalSource.Scroll,
}, ...p,
}), },
), }),
viewportResizeCb: d => ),
wrappedEmit( viewportResizeCb: d =>
wrapEvent({ wrappedEmit(
type: EventType.IncrementalSnapshot, wrapEvent({
data: { type: EventType.IncrementalSnapshot,
source: IncrementalSource.ViewportResize, data: {
...d, source: IncrementalSource.ViewportResize,
}, ...d,
}), },
), }),
inputCb: v => ),
wrappedEmit( inputCb: v =>
wrapEvent({ wrappedEmit(
type: EventType.IncrementalSnapshot, wrapEvent({
data: { type: EventType.IncrementalSnapshot,
source: IncrementalSource.Input, data: {
...v, source: IncrementalSource.Input,
}, ...v,
}), },
), }),
blockClass, ),
ignoreClass, blockClass,
maskAllInputs, ignoreClass,
inlineStylesheet, maskAllInputs,
}), inlineStylesheet,
},
hooks,
),
); );
}; };
if ( if (

55
src/record/observer.ts
View File

@@ -29,6 +29,8 @@ import {
attributeCursor, attributeCursor,
blockClass, blockClass,
IncrementalSource, IncrementalSource,
hooksParam,
Arguments,
} from '../types'; } from '../types';
import { deepDelete, isParentRemoved, isAncestorInSet } from './collection'; import { deepDelete, isParentRemoved, isAncestorInSet } from './collection';
@@ -506,7 +508,58 @@ function initInputObserver(
}; };
} }
export default function initObservers(o: observerParam): listenerHandler { function mergeHooks(o: observerParam, hooks: hooksParam) {
const {
mutationCb,
mousemoveCb,
mouseInteractionCb,
scrollCb,
viewportResizeCb,
inputCb,
} = o;
o.mutationCb = (...p: Arguments<mutationCallBack>) => {
if (hooks.mutation) {
hooks.mutation(...p);
}
mutationCb(...p);
};
o.mousemoveCb = (...p: Arguments<mousemoveCallBack>) => {
if (hooks.mousemove) {
hooks.mousemove(...p);
}
mousemoveCb(...p);
};
o.mouseInteractionCb = (...p: Arguments<mouseInteractionCallBack>) => {
if (hooks.mouseInteraction) {
hooks.mouseInteraction(...p);
}
mouseInteractionCb(...p);
};
o.scrollCb = (...p: Arguments<scrollCallback>) => {
if (hooks.scroll) {
hooks.scroll(...p);
}
scrollCb(...p);
};
o.viewportResizeCb = (...p: Arguments<viewportResizeCallback>) => {
if (hooks.viewportResize) {
hooks.viewportResize(...p);
}
viewportResizeCb(...p);
};
o.inputCb = (...p: Arguments<inputCallback>) => {
if (hooks.input) {
hooks.input(...p);
}
inputCb(...p);
};
}
export default function initObservers(
o: observerParam,
hooks: hooksParam = {},
): listenerHandler {
mergeHooks(o, hooks);
const mutationObserver = initMutationObserver( const mutationObserver = initMutationObserver(
o.mutationCb, o.mutationCb,
o.blockClass, o.blockClass,

14
src/types.ts
View File

@@ -119,6 +119,7 @@ export type recordOptions = {
ignoreClass?: string; ignoreClass?: string;
maskAllInputs?: boolean; maskAllInputs?: boolean;
inlineStylesheet?: boolean; inlineStylesheet?: boolean;
hooks?: hooksParam;
}; };
export type observerParam = { export type observerParam = {
@@ -134,6 +135,15 @@ export type observerParam = {
inlineStylesheet: boolean; inlineStylesheet: boolean;
}; };
export type hooksParam = {
mutation?: mutationCallBack;
mousemove?: mousemoveCallBack;
mouseInteraction?: mouseInteractionCallBack;
scroll?: scrollCallback;
viewportResize?: viewportResizeCallback;
input?: inputCallback;
};
export type textCursor = { export type textCursor = {
node: Node; node: Node;
value: string | null; value: string | null;
@@ -285,6 +295,10 @@ export type Emitter = {
emit(type: string, event?: unknown): void; emit(type: string, event?: unknown): void;
}; };
export type Arguments<T> = T extends (...payload: infer U) => unknown
? U
: unknown;
export enum ReplayerEvents { export enum ReplayerEvents {
Start = 'start', Start = 'start',
Pause = 'pause', Pause = 'pause',

4
typings/record/observer.d.ts vendored
View File

@@ -1,2 +1,2 @@
import { observerParam, listenerHandler } from '../types'; import { observerParam, listenerHandler, hooksParam } from '../types';
export default function initObservers(o: observerParam): listenerHandler; export default function initObservers(o: observerParam, hooks?: hooksParam): listenerHandler;

10
typings/types.d.ts vendored
View File

@@ -88,6 +88,7 @@ export declare type recordOptions = {
ignoreClass?: string; ignoreClass?: string;
maskAllInputs?: boolean; maskAllInputs?: boolean;
inlineStylesheet?: boolean; inlineStylesheet?: boolean;
hooks?: hooksParam;
}; };
export declare type observerParam = { export declare type observerParam = {
mutationCb: mutationCallBack; mutationCb: mutationCallBack;
@@ -101,6 +102,14 @@ export declare type observerParam = {
maskAllInputs: boolean; maskAllInputs: boolean;
inlineStylesheet: boolean; inlineStylesheet: boolean;
}; };
export declare type hooksParam = {
mutation?: mutationCallBack;
mousemove?: mousemoveCallBack;
mouseInteraction?: mouseInteractionCallBack;
scroll?: scrollCallback;
viewportResize?: viewportResizeCallback;
input?: inputCallback;
};
export declare type textCursor = { export declare type textCursor = {
node: Node; node: Node;
value: string | null; value: string | null;
@@ -225,6 +234,7 @@ export declare type Emitter = {
on(type: string, handler: Handler): void; on(type: string, handler: Handler): void;
emit(type: string, event?: unknown): void; emit(type: string, event?: unknown): void;
}; };
export declare type Arguments<T> = T extends (...payload: infer U) => unknown ? U : unknown;
export declare enum ReplayerEvents { export declare enum ReplayerEvents {
Start = "start", Start = "start",
Pause = "pause", Pause = "pause",