How to use rrweb-snapshot - 6 common examples

const value = (target as HTMLElement).getAttribute(attributeName!);
          if (isBlocked(target, blockClass) || value === oldValue) {
            return;
          }
          let item: attributeCursor | undefined = attributes.find(
            a => a.node === target,
          );
          if (!item) {
            item = {
              node: target,
              attributes: {},
            };
            attributes.push(item);
          }
          // overwrite attribute if the mutations was triggered in same time
          item.attributes[attributeName!] = transformAttribute(
            document,
            attributeName!,
            value!,
          );
          break;
        }
        case 'childList': {
          addedNodes.forEach(n => genAdds(n, target));
          removedNodes.forEach(n => {
            const nodeId = mirror.getId(n as INode);
            const parentId = mirror.getId(target as INode);
            if (isBlocked(n, blockClass)) {
              return;
            }
            // removed node has not been serialized yet, just remove it from the Set
            if (addedSet.has(n)) {

s.data.adds.forEach(add => {
            if (
              add.node.type === NodeType.Element &&
              'style' in add.node.attributes &&
              typeof add.node.attributes.style === 'string' &&
              coordinatesReg.test(add.node.attributes.style)
            ) {
              delete add.node.attributes.style;
            }
          });
        }

private rebuildFullSnapshot(
    event: fullSnapshotEvent & { timestamp: number },
  ) {
    if (Object.keys(this.missingNodeRetryMap).length) {
      console.warn(
        'Found unresolved missing node map',
        this.missingNodeRetryMap,
      );
    }
    this.missingNodeRetryMap = {};
    mirror.map = rebuild(event.data.node, this.iframe.contentDocument!)[1];
    const styleEl = document.createElement('style');
    const { documentElement, head } = this.iframe.contentDocument!;
    documentElement!.insertBefore(styleEl, head);
    const injectStylesRules = getInjectStyleRules(
      this.config.blockClass,
    ).concat(this.config.insertStyleRules);
    for (let idx = 0; idx < injectStylesRules.length; idx++) {
      (styleEl.sheet! as CSSStyleSheet).insertRule(injectStylesRules[idx], idx);
    }
    this.emitter.emit(ReplayerEvents.FullsnapshotRebuilded);
    this.waitForStylesheetLoad();
  }

function takeFullSnapshot(isCheckout = false) {
    wrappedEmit(
      wrapEvent({
        type: EventType.Meta,
        data: {
          href: window.location.href,
          width: getWindowWidth(),
          height: getWindowHeight(),
        },
      }),
      isCheckout,
    );
    const [node, idNodeMap] = snapshot(
      document,
      blockClass,
      inlineStylesheet,
      maskAllInputs,
    );
    if (!node) {
      return console.warn('Failed to snapshot the document');
    }
    mirror.map = idNodeMap;
    wrappedEmit(
      wrapEvent({
        type: EventType.FullSnapshot,
        data: {
          node,
          initialOffset: {
            left: document.documentElement!.scrollLeft,

const pushAdd = (n: Node) => {
      const parentId = mirror.getId((n.parentNode as Node) as INode);
      if (parentId === -1) {
        return addQueue.push(n);
      }
      adds.push({
        parentId,
        previousId: !n.previousSibling
          ? n.previousSibling
          : mirror.getId(n.previousSibling as INode),
        nextId: !n.nextSibling
          ? n.nextSibling
          : mirror.getId((n.nextSibling as unknown) as INode),
        node: serializeNodeWithId(
          n,
          document,
          mirror.map,
          blockClass,
          true,
          inlineStylesheet,
          maskAllInputs,
        )!,
      });
    };

const appendNode = (mutation: addedNodeMutation) => {
          const parent = mirror.getNode(mutation.parentId);
          if (!parent) {
            return queue.push(mutation);
          }
          const target = buildNodeWithSN(
            mutation.node,
            this.iframe.contentDocument!,
            mirror.map,
            true,
          ) as Node;
          let previous: Node | null = null;
          let next: Node | null = null;
          if (mutation.previousId) {
            previous = mirror.getNode(mutation.previousId) as Node;
          }
          if (mutation.nextId) {
            next = mirror.getNode(mutation.nextId) as Node;
          }

          if (mutation.previousId === -1 || mutation.nextId === -1) {
            missingNodeMap[mutation.node.id] = {