feat: trigger showModal from rrdom and rrweb

packages/rrdom/src/diff.ts

@@ -21,6 +21,7 @@ import type {
 } from './document';
 import type {
   RRCanvasElement,
+  RRDialogElement,
   RRElement,
   RRIFrameElement,
   RRMediaElement,
@@ -285,6 +286,24 @@ function diffAfterUpdatingChildren(
             );
           break;
         }
+        case 'DIALOG': {
+          const dialog = oldElement as HTMLDialogElement;
+          const rrDialog = newRRElement as unknown as RRDialogElement;
+          const wasOpen = dialog.open;
+          const wasModal = dialog.matches('dialog:modal');
+          const isOpen = rrDialog.open;
+          const { isModal } = rrDialog;
+
+          const modeChanged = (wasModal && !isModal) || (!wasModal && isModal);
+
+          if (wasOpen && modeChanged) dialog.close();
+          if ((wasOpen && modeChanged) || (isOpen && !wasOpen)) {
+            if (isModal) dialog.showModal();
+            else dialog.show();
+          }
+
+          break;
+        }
       }
       break;
     }
@@ -330,12 +349,25 @@ function diffProps(
         }
       };
     } else if (newTree.tagName === 'IFRAME' && name === 'srcdoc') continue;
-    else oldTree.setAttribute(name, newValue);
+    else if (
+      newTree.tagName === 'DIALOG' &&
+      (name === 'rr_open' || name === 'open')
+    ) {
+      const rrDialog = newTree as RRDialogElement;
+      const isModal = newAttributes.rr_open === 'modal';
+      const isOpen = isModal || newAttributes.open === '';
+      if (isModal) rrDialog.showModal();
+      else if (isOpen) rrDialog.show();
+      else rrDialog.close();
+      continue;
+    } else oldTree.setAttribute(name, newValue);
   }
 
-  for (const { name } of Array.from(oldAttributes))
+  for (const { name } of Array.from(oldAttributes)) {
+    if (newTree.tagName === 'DIALOG' && (name === 'rr_open' || name === 'open'))
+      continue; // attributes are handled in diffAfterUpdatingChildren for Dialog elements
     if (!(name in newAttributes)) oldTree.removeAttribute(name);
-
+  }
   newTree.scrollLeft && (oldTree.scrollLeft = newTree.scrollLeft);
   newTree.scrollTop && (oldTree.scrollTop = newTree.scrollTop);
 }

packages/rrdom/src/document.ts

@@ -547,6 +547,28 @@ export class BaseRRMediaElement extends BaseRRElement {
   }
 }
 
+export class BaseRRDialogElement extends BaseRRElement {
+  public readonly tagName = 'DIALOG' as const;
+  public readonly nodeName = 'DIALOG' as const;
+  public open: boolean = false;
+  private _isModal: boolean = false;
+  get isModal() {
+    return this._isModal;
+  }
+  public close() {
+    this.open = false;
+    this._isModal = false;
+  }
+  public show() {
+    this.open = true;
+    this._isModal = false;
+  }
+  public showModal() {
+    this.open = true;
+    this._isModal = true;
+  }
+}
+
 export class BaseRRText extends BaseRRNode implements IRRText {
   public readonly nodeType: number = NodeType.TEXT_NODE;
   public readonly nodeName = '#text' as const;

packages/rrdom/src/index.ts

@@ -31,6 +31,7 @@ import {
   type IRRDocumentType,
   type IRRText,
   type IRRComment,
+  BaseRRDialogElement,
 } from './document';
 
 export class RRDocument extends BaseRRDocument {
@@ -104,6 +105,9 @@ export class RRDocument extends BaseRRDocument {
       case 'STYLE':
         element = new RRStyleElement(upperTagName);
         break;
+      case 'DIALOG':
+        element = new RRDialogElement(upperTagName);
+        break;
       default:
         element = new RRElement(upperTagName);
         break;
@@ -151,6 +155,8 @@ export class RRElement extends BaseRRElement {
 
 export class RRMediaElement extends BaseRRMediaElement {}
 
+export class RRDialogElement extends BaseRRDialogElement {}
+
 export class RRCanvasElement extends RRElement implements IRRElement {
   public rr_dataURL: string | null = null;
   public canvasMutations: {

packages/rrdom/test/diff/dialog.test.ts

@@ -0,0 +1,112 @@
+/**
+ * @vitest-environment happy-dom
+ */
+import { vi, MockInstance } from 'vitest';
+import {
+  NodeType as RRNodeType,
+  createMirror,
+  Mirror as NodeMirror,
+  serializedNodeWithId,
+} from 'rrweb-snapshot';
+import { RRDocument } from '../../src';
+import { diff, ReplayerHandler } from '../../src/diff';
+
+describe('diff algorithm for rrdom', () => {
+  let mirror: NodeMirror;
+  let replayer: ReplayerHandler;
+  let warn: MockInstance;
+  let elementSn: serializedNodeWithId;
+  let elementSn2: serializedNodeWithId;
+
+  beforeEach(() => {
+    mirror = createMirror();
+    replayer = {
+      mirror,
+      applyCanvas: () => {},
+      applyInput: () => {},
+      applyScroll: () => {},
+      applyStyleSheetMutation: () => {},
+      afterAppend: () => {},
+    };
+    document.write('<!DOCTYPE html><html><head></head><body></body></html>');
+    // Mock the original console.warn function to make the test fail once console.warn is called.
+    warn = vi.spyOn(console, 'warn');
+
+    elementSn = {
+      type: RRNodeType.Element,
+      tagName: 'DIALOG',
+      attributes: {},
+      childNodes: [],
+      id: 1,
+    };
+
+    elementSn2 = {
+      ...elementSn,
+      attributes: {},
+    };
+  });
+
+  afterEach(() => {
+    // Check that warn was not called (fail on warning)
+    expect(warn).not.toBeCalled();
+    vi.resetAllMocks();
+  });
+  describe('diff dialog elements', () => {
+    vi.setConfig({ testTimeout: 60_000 });
+
+    it('should trigger `showModal` on rr_open:modal attributes', () => {
+      const tagName = 'DIALOG';
+      const node = document.createElement(tagName) as HTMLDialogElement;
+      vi.spyOn(node, 'matches').mockReturnValue(false); // matches is used to check if the dialog was opened with showModal
+      const showModalFn = vi.spyOn(node, 'showModal');
+
+      const rrDocument = new RRDocument();
+      const rrNode = rrDocument.createElement(tagName);
+      rrNode.attributes = { rr_open: 'modal' };
+
+      mirror.add(node, elementSn);
+      rrDocument.mirror.add(rrNode, elementSn);
+      diff(node, rrNode, replayer);
+
+      expect(showModalFn).toBeCalled();
+    });
+
+    it('should trigger `close` on rr_open removed', () => {
+      const tagName = 'DIALOG';
+      const node = document.createElement(tagName) as HTMLDialogElement;
+      node.showModal();
+      console.log('node', { x: node.getAttribute('open') });
+      vi.spyOn(node, 'matches').mockReturnValue(true); // matches is used to check if the dialog was opened with showModal
+      const closeFn = vi.spyOn(node, 'close');
+
+      const rrDocument = new RRDocument();
+      const rrNode = rrDocument.createElement(tagName);
+      rrNode.attributes = {};
+
+      mirror.add(node, elementSn);
+      rrDocument.mirror.add(rrNode, elementSn);
+      diff(node, rrNode, replayer);
+
+      expect(closeFn).toBeCalled();
+    });
+
+    it('should not trigger `close` on rr_open is kept', () => {
+      const tagName = 'DIALOG';
+      const node = document.createElement(tagName) as HTMLDialogElement;
+      node.setAttribute('rr_open', 'modal');
+      node.setAttribute('open', '');
+      const closeFn = vi.spyOn(node, 'close');
+
+      const rrDocument = new RRDocument();
+      const rrNode = rrDocument.createElement(tagName);
+      rrNode.attributes = { rr_open: 'modal' };
+
+      mirror.add(node, elementSn);
+      rrDocument.mirror.add(rrNode, elementSn);
+      diff(node, rrNode, replayer);
+
+      expect(closeFn).not.toBeCalled();
+      expect(node.open).toBe(true);
+    });
+  });
+});

packages/rrweb/src/replay/dialog/index.ts

@@ -0,0 +1,11 @@
+import { RRNode } from 'rrdom';
+
+export function triggerShowModalForModals(
+  node: HTMLDialogElement | Node | RRNode,
+) {
+  if (node.nodeName !== 'DIALOG' || node instanceof RRNode) return;
+  const dialog = node as HTMLDialogElement;
+  console.log('dialog', dialog.getAttribute('rr_open'));
+  if (dialog.getAttribute('rr_open') !== 'modal') return;
+  dialog.showModal();
+}

packages/rrweb/src/replay/index.ts

@@ -1791,6 +1791,14 @@ export class Replayer {
                   value,
                 );
               }
+
+              if (
+                attributeName === 'rr_open' &&
+                target.nodeName === 'DIALOG' &&
+                value === 'modal'
+              ) {
+                triggerShowModalForModals(target);
+              }
             } catch (error) {
               this.warn(
                 'An error occurred may due to the checkout feature.',

packages/rrweb/test/events/dialog-playback.ts

@@ -111,21 +111,57 @@ const events: eventWithTime[] = [
     },
     timestamp: 1900000136,
   },
+  // open dialog with .show()
   {
     type: 3,
     data: {
       source: IncrementalSource.Mutation,
       adds: [],
       removes: [],
+      texts: [],
       attributes: [
         {
           id: 27,
-          attributes: { rr_open: 'modal' },
+          attributes: { open: '' },
         },
       ],
     },
     timestamp: 1900001500,
   },
+  // close dialog with .close()
+  {
+    type: 3,
+    data: {
+      source: IncrementalSource.Mutation,
+      adds: [],
+      removes: [],
+      texts: [],
+      attributes: [
+        {
+          id: 27,
+          attributes: { open: null },
+        },
+      ],
+    },
+    timestamp: 1900002000,
+  },
+  // open dialog with .showModal()
+  {
+    type: 3,
+    data: {
+      source: IncrementalSource.Mutation,
+      adds: [],
+      removes: [],
+      texts: [],
+      attributes: [
+        {
+          id: 27,
+          attributes: { rr_open: 'modal' },
+        },
+      ],
+    },
+    timestamp: 1900002500,
+  },
 ];
 
 export default events;