import snapshot rebuilder into replayer

This commit is contained in:
Yanzhen Yu
2026-04-01 12:00:00 +08:00
parent 4446e27899
commit 9fda4c0809
3 changed files with 66 additions and 1 deletions

View File

@@ -1,3 +1,4 @@
import record from './record';
import replay from './replay';
export { record };
export { record, replay };

2
src/replay/events.ts Normal file

File diff suppressed because one or more lines are too long

62
src/replay/index.ts Normal file
View File

@@ -0,0 +1,62 @@
import { rebuild } from 'rrweb-snapshot';
import { mirror } from '../utils';
import { event, EventType, incrementalData, IncrementalSource } from '../types';
import eventsStr from './events';
const events: event[] = JSON.parse(eventsStr);
function applyIncremental(d: incrementalData) {
switch (d.source) {
case IncrementalSource.Mutation:
case IncrementalSource.MouseMove:
case IncrementalSource.MouseInteraction:
break;
case IncrementalSource.Scroll:
// TODO: maybe element
window.scrollTo({
top: d.y,
left: d.x,
behavior: 'smooth',
});
break;
case IncrementalSource.ViewportResize:
case IncrementalSource.Input:
default:
}
}
function replay() {
const iframe = document.createElement('iframe');
for (const event of events) {
switch (event.type) {
case EventType.DomContentLoaded:
break;
case EventType.Load:
iframe.width = `${event.data.width}px`;
iframe.height = `${event.data.height}px`;
break;
case EventType.FullSnapshot:
const [doc, map] = rebuild(event.data.node);
mirror.map = map;
if (doc) {
document.body.appendChild(iframe);
iframe.contentDocument!.open();
// https://developer.mozilla.org/en-US/docs/Web/API/Element/innerHTML
iframe.contentDocument!.write(
(doc as Document).documentElement.outerHTML
.replace(/&/g, '&')
.replace(/&lt;/g, '<')
.replace(/&gt;/g, '>'),
);
iframe.contentDocument!.close();
}
break;
case EventType.IncrementalSnapshot:
applyIncremental(event.data);
break;
default:
}
}
}
export default replay;