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

Support top-layer <dialog> recording & replay (#1503)

Browse Source 
* chore: its important to run `yarn build:all` before running `yarn dev`

* feat: trigger showModal from rrdom and rrweb

* feat: Add support for replaying modal and non modal dialog elements

* chore: Update dev script to remove CLEAR_DIST_DIR flag

* Get modal recording and replay working

* DRY up dialog test and dedupe snapshot images

* feat: Refactor dialog test to use updated attribute name

* feat: Update dialog test to include rr_open attribute

* chore: Add npm dependency happy-dom@14.12.0

* Add more test cases for dialog

* Clean up naming

* Refactor dialog open code

* Revert changed code that doesn't do anything

* Add documentation for unimplemented type

* chore: Remove unnecessary comments in dialog.test.ts

* rename rr_open to rr_openMode

* Replace todo with a skipped test

* Add better logging for CI

* Rename rr_openMode to rr_open_mode

rrdom downcases all attribute names which made `rr_openMode` tricky to deal with

* Remove unused images

* Move after iframe append based on @YunFeng0817's comment
https://github.com/rrweb-io/rrweb/pull/1503#discussion_r1666363931

* Remove redundant dialog handling from rrdom.

rrdom already handles dialog element creation it's self

* Rename variables for dialog handling in rrweb replay module

* Update packages/rrdom/src/document.ts

---------

Co-authored-by: Eoghan Murray <eoghan@getthere.ie>
This commit is contained in:
Justin Halsall
2024-08-02 09:53:05 +02:00
committed by GitHub
parent d350da8552
commit 335639af9b
38 changed files with 1902 additions and 75 deletions
Download Patch File Download Diff File Expand all files Collapse all files

27
packages/rrdom/src/document.ts
View File

@@ -474,7 +474,8 @@ export class BaseRRElement extends BaseRRNode implements IRRElement {
}
public getAttribute(name: string): string | null {
return this.attributes[name] || null;
if (this.attributes[name] === undefined) return null;
return this.attributes[name];
}
public setAttribute(name: string, attribute: string) {
@@ -547,6 +548,30 @@ export class BaseRRMediaElement extends BaseRRElement {
}
}
export class BaseRRDialogElement extends BaseRRElement {
public readonly tagName = 'DIALOG' as const;
public readonly nodeName = 'DIALOG' as const;
get isModal() {
return this.getAttribute('rr_open_mode') === 'modal';
}
get open() {
return this.getAttribute('open') !== null;
}
public close() {
this.removeAttribute('open');
this.removeAttribute('rr_open_mode');
}
public show() {
this.setAttribute('open', '');
this.setAttribute('rr_open_mode', 'non-modal');
}
public showModal() {
this.setAttribute('open', '');
this.setAttribute('rr_open_mode', 'modal');
}
}
export class BaseRRText extends BaseRRNode implements IRRText {
public readonly nodeType: number = NodeType.TEXT_NODE;
public readonly nodeName = '#text' as const;