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

return stopper function as the result of record

Browse Source
This commit is contained in:
Yanzhen Yu
2026-04-01 12:00:00 +08:00
parent efa7a8fa1b
commit 09f30d2a81
3 changed files with 105 additions and 93 deletions
Download Patch File Download Diff File Expand all files Collapse all files

177
src/record/index.ts
View File

@@ -7,6 +7,7 @@ import {
eventWithTime, eventWithTime,
recordOptions, recordOptions,
IncrementalSource, IncrementalSource,
listenerHandler,
} from '../types'; } from '../types';
function wrapEvent(e: event): eventWithTime { function wrapEvent(e: event): eventWithTime {
@@ -16,21 +17,24 @@ function wrapEvent(e: event): eventWithTime {
}; };
} }
function record(options: recordOptions = {}) { function record(options: recordOptions = {}): listenerHandler | undefined {
const { emit } = options; const { emit } = options;
// runtime checks for user options // runtime checks for user options
if (!emit) { if (!emit) {
throw new Error('emit function is required'); throw new Error('emit function is required');
} }
try { try {
on('DOMContentLoaded', () => { const handlers: listenerHandler[] = [];
emit( handlers.push(
wrapEvent({ on('DOMContentLoaded', () => {
type: EventType.DomContentLoaded, emit(
data: {}, wrapEvent({
}), type: EventType.DomContentLoaded,
); data: {},
}); }),
);
}),
);
const init = () => { const init = () => {
emit( emit(
wrapEvent({ wrapEvent({
@@ -59,68 +63,70 @@ function record(options: recordOptions = {}) {
}, },
}), }),
); );
initObservers({ handlers.push(
mutationCb: m => initObservers({
emit( mutationCb: m =>
wrapEvent({ emit(
type: EventType.IncrementalSnapshot, wrapEvent({
data: { type: EventType.IncrementalSnapshot,
source: IncrementalSource.Mutation, data: {
...m, source: IncrementalSource.Mutation,
}, ...m,
}), },
), }),
mousemoveCb: positions => ),
emit( mousemoveCb: positions =>
wrapEvent({ emit(
type: EventType.IncrementalSnapshot, wrapEvent({
data: { type: EventType.IncrementalSnapshot,
source: IncrementalSource.MouseMove, data: {
positions, source: IncrementalSource.MouseMove,
}, positions,
}), },
), }),
mouseInteractionCb: d => ),
emit( mouseInteractionCb: d =>
wrapEvent({ emit(
type: EventType.IncrementalSnapshot, wrapEvent({
data: { type: EventType.IncrementalSnapshot,
source: IncrementalSource.MouseInteraction, data: {
...d, source: IncrementalSource.MouseInteraction,
}, ...d,
}), },
), }),
scrollCb: p => ),
emit( scrollCb: p =>
wrapEvent({ emit(
type: EventType.IncrementalSnapshot, wrapEvent({
data: { type: EventType.IncrementalSnapshot,
source: IncrementalSource.Scroll, data: {
...p, source: IncrementalSource.Scroll,
}, ...p,
}), },
), }),
viewportResizeCb: d => ),
emit( viewportResizeCb: d =>
wrapEvent({ emit(
type: EventType.IncrementalSnapshot, wrapEvent({
data: { type: EventType.IncrementalSnapshot,
source: IncrementalSource.ViewportResize, data: {
...d, source: IncrementalSource.ViewportResize,
}, ...d,
}), },
), }),
inputCb: v => ),
emit( inputCb: v =>
wrapEvent({ emit(
type: EventType.IncrementalSnapshot, wrapEvent({
data: { type: EventType.IncrementalSnapshot,
source: IncrementalSource.Input, data: {
...v, source: IncrementalSource.Input,
}, ...v,
}), },
), }),
}); ),
}),
);
}; };
if ( if (
document.readyState === 'interactive' || document.readyState === 'interactive' ||
@@ -128,20 +134,25 @@ function record(options: recordOptions = {}) {
) { ) {
init(); init();
} else { } else {
on( handlers.push(
'load', on(
() => { 'load',
emit( () => {
wrapEvent({ emit(
type: EventType.Load, wrapEvent({
data: {}, type: EventType.Load,
}), data: {},
); }),
init(); );
}, init();
window, },
window,
),
); );
} }
return () => {
handlers.forEach(h => h());
};
} catch (error) { } catch (error) {
// TODO: handle internal error // TODO: handle internal error
console.warn(error); console.warn(error);

16
src/record/observer.ts
View File

@@ -365,7 +365,7 @@ function initInputObserver(cb: inputCallback): listenerHandler {
}; };
} }
export default function initObservers(o: observerParam) { export default function initObservers(o: observerParam): listenerHandler {
const mutationObserver = initMutationObserver(o.mutationCb); const mutationObserver = initMutationObserver(o.mutationCb);
const mousemoveHandler = initMousemoveObserver(o.mousemoveCb); const mousemoveHandler = initMousemoveObserver(o.mousemoveCb);
const mouseInteractionHandler = initMouseInteractionObserver( const mouseInteractionHandler = initMouseInteractionObserver(
@@ -374,12 +374,12 @@ export default function initObservers(o: observerParam) {
const scrollHandler = initScrollObserver(o.scrollCb); const scrollHandler = initScrollObserver(o.scrollCb);
const viewportResizeHandler = initViewportResizeObserver(o.viewportResizeCb); const viewportResizeHandler = initViewportResizeObserver(o.viewportResizeCb);
const inputHandler = initInputObserver(o.inputCb); const inputHandler = initInputObserver(o.inputCb);
return { return () => {
mutationObserver, mutationObserver.disconnect();
mousemoveHandler, mousemoveHandler();
mouseInteractionHandler, mouseInteractionHandler();
scrollHandler, scrollHandler();
viewportResizeHandler, viewportResizeHandler();
inputHandler, inputHandler();
}; };
} }

5
src/utils.ts
View File

@@ -11,8 +11,9 @@ export function on(
fn: EventListenerOrEventListenerObject, fn: EventListenerOrEventListenerObject,
target: Document | Window = document, target: Document | Window = document,
): listenerHandler { ): listenerHandler {
target.addEventListener(type, fn, { capture: true, passive: true }); const options = { capture: true, passive: true };
return () => target.removeEventListener(type, fn); target.addEventListener(type, fn, options);
return () => target.removeEventListener(type, fn, options);
} }
export const mirror: Mirror = { export const mirror: Mirror = {