change observed mutations into serializable records

src/record/index.ts

@@ -0,0 +1,70 @@
+import { snapshot } from 'rrweb-snapshot';
+import initObservers from './observer';
+import { mirror } from '../utils';
+import {
+  EventType,
+  event,
+  eventWithTime,
+  recordOptions,
+  IncrementalSource,
+} from '../types';
+
+function on(
+  type: string,
+  fn: EventListenerOrEventListenerObject,
+  target = document,
+) {
+  target.addEventListener(type, fn, { capture: true, passive: true });
+}
+
+function wrapEvent(e: event): eventWithTime {
+  return {
+    ...e,
+    timestamp: Date.now(),
+  };
+}
+
+function record(options: recordOptions) {
+  try {
+    const { emit } = options;
+    // runtime checks for user options
+    if (!emit) {
+      throw new Error('emit function is required');
+    }
+    on('DOMContentLoaded', () => {
+      emit(
+        wrapEvent({
+          type: EventType.DomContentLoaded,
+          data: {
+            href: window.location.href,
+          },
+        }),
+      );
+    });
+    on('load', () => {
+      emit(wrapEvent({ type: EventType.Load, data: {} }));
+      const [node, idNodeMap] = snapshot(document);
+      if (!node) {
+        return console.warn('Failed to snapshot the document');
+      }
+      mirror.map = idNodeMap;
+      emit(wrapEvent({ type: EventType.FullSnapshot, data: { node } }));
+      initObservers({
+        mutationCb: m =>
+          emit(
+            wrapEvent({
+              type: EventType.IncrementalSnapshot,
+              data: {
+                source: IncrementalSource.Mutation,
+                ...m,
+              },
+            }),
+          ),
+      });
+    });
+  } catch (error) {
+    // TODO: handle internal error
+  }
+}
+
+export default record;

src/record/observer.ts

@@ -0,0 +1,107 @@
+import { INode } from 'rrweb-snapshot';
+import { mirror } from '../utils';
+import {
+  mutationCallBack,
+  textMutation,
+  attributeMutation,
+  removedNodeMutation,
+  addedNodeMutation,
+  observerParam,
+} from '../types';
+
+function initMutationObserver(cb: mutationCallBack): MutationObserver {
+  const observer = new MutationObserver(mutations => {
+    const texts: textMutation[] = [];
+    const attributes: attributeMutation[] = [];
+    const removes: removedNodeMutation[] = [];
+    const adds: addedNodeMutation[] = [];
+    mutations.forEach(mutation => {
+      const {
+        type,
+        target,
+        oldValue,
+        addedNodes,
+        removedNodes,
+        attributeName,
+        nextSibling,
+        previousSibling,
+      } = mutation;
+      const id = mirror.getId(target as INode);
+      switch (type) {
+        case 'characterData': {
+          const value = target.textContent;
+          if (value !== oldValue) {
+            texts.push({
+              id,
+              value,
+            });
+          }
+          break;
+        }
+        case 'attributes': {
+          const value = (target as HTMLElement).getAttribute(attributeName!);
+          if (value === oldValue) {
+            return;
+          }
+          let item: attributeMutation | undefined = attributes.find(
+            a => a.id === id,
+          );
+          if (!item) {
+            item = {
+              id,
+              attributes: {},
+            };
+            attributes.push(item);
+          }
+          // overwrite attribute if the mutations was triggered in same time
+          item.attributes[attributeName!] = value;
+        }
+        case 'childList': {
+          removedNodes.forEach(n => {
+            removes.push({
+              parentId: id,
+              id: mirror.getId(n as INode),
+            });
+          });
+          addedNodes.forEach(n => {
+            adds.push({
+              parentId: id,
+              previousId: !previousSibling
+                ? previousSibling
+                : mirror.getId(previousSibling as INode),
+              nextId: !nextSibling
+                ? nextSibling
+                : mirror.getId(nextSibling as INode),
+              id: mirror.getId(n as INode),
+            });
+          });
+          break;
+        }
+        default:
+          break;
+      }
+    });
+    cb({
+      texts,
+      attributes,
+      removes,
+      adds,
+    });
+  });
+  observer.observe(document, {
+    attributes: true,
+    attributeOldValue: true,
+    characterData: true,
+    characterDataOldValue: true,
+    childList: true,
+    subtree: true,
+  });
+  return observer;
+}
+
+export default function initObservers(o: observerParam) {
+  const mutationObserver = initMutationObserver(o.mutationCb);
+  return {
+    mutationObserver,
+  };
+}