#534@minor: Adds support for the Node.onEvent properties on all Node …

…types. This will solve the problem of React believing that Happy DOM is a legacy browser which caused an error where it could not find the method detachEvent().
capricorn86 · Oct 7, 2022 · d7ef939 · d7ef939
1 parent 0dbfa42
commit d7ef939
Show file tree

Hide file tree

Showing 35 changed files with 4,281 additions and 29,071 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/packages/happy-dom/package-lock.json b/packages/happy-dom/package-lock.json
diff --git a/packages/happy-dom/src/event/EventTarget.ts b/packages/happy-dom/src/event/EventTarget.ts
@@ -77,7 +77,8 @@ export default abstract class EventTarget implements IEventTarget {
 	/**
 	 * Adds an event listener.
 	 *
-	 * This is only supported by IE8- and Opera, but for some reason React uses it and calls it, so therefore we will keep support for it until they stop using it.
+	 * TODO:
+	 * Was used by with IE8- and Opera. React believed Happy DOM was a legacy browser and used them, but that is no longer the case, so we should remove this method after that this is verified.
 	 *
 	 * @deprecated
 	 * @param type Event type.
@@ -90,7 +91,8 @@ export default abstract class EventTarget implements IEventTarget {
 	/**
 	 * Removes an event listener.
 	 *
-	 * This is only supported by IE8- and Opera, but for some reason React uses it and calls it, so therefore we will keep support for it until they stop using it.
+	 * TODO:
+	 * Was used by IE8- and Opera. React believed Happy DOM was a legacy browser and used them, but that is no longer the case, so we should remove this method after that this is verified.
 	 *
 	 * @deprecated
 	 * @param type Event type.

diff --git a/packages/happy-dom/src/event/NonImplementedEventTypes.ts b/packages/happy-dom/src/event/NonImplementedEventTypes.ts
@@ -40,5 +40,6 @@ export default [
 	'TrackEvent',
 	'TransitionEvent',
 	'UserProximityEvent',
-	'WebGLContextEvent'
+	'WebGLContextEvent',
+	'TextEvent'
 ];
diff --git a/packages/happy-dom/src/nodes/document/Document.ts b/packages/happy-dom/src/nodes/document/Document.ts
@@ -51,7 +51,6 @@ const PROCESSING_INSTRUCTION_TARGET_REGEXP = /^[a-z][a-z0-9-]+$/;
  */
 export default class Document extends Node implements IDocument {
 	public static _defaultView: IWindow = null;
-	public onreadystatechange: (event: Event) => void = null;
 	public nodeType = Node.DOCUMENT_NODE;
 	public adoptedStyleSheets: CSSStyleSheet[] = [];
 	public implementation: DOMImplementation;
@@ -66,6 +65,117 @@ export default class Document extends Node implements IDocument {
 	private _cookie = '';
 	private _selection: Selection = null;
 
+	// Events
+	public onreadystatechange: (event: Event) => void = null;
+	public onpointerlockchange: (event: Event) => void = null;
+	public onpointerlockerror: (event: Event) => void = null;
+	public onbeforecopy: (event: Event) => void = null;
+	public onbeforecut: (event: Event) => void = null;
+	public onbeforepaste: (event: Event) => void = null;
+	public onfreeze: (event: Event) => void = null;
+	public onresume: (event: Event) => void = null;
+	public onsearch: (event: Event) => void = null;
+	public onvisibilitychange: (event: Event) => void = null;
+	public onfullscreenchange: (event: Event) => void = null;
+	public onfullscreenerror: (event: Event) => void = null;
+	public onwebkitfullscreenchange: (event: Event) => void = null;
+	public onwebkitfullscreenerror: (event: Event) => void = null;
+	public onbeforexrselect: (event: Event) => void = null;
+	public onabort: (event: Event) => void = null;
+	public onbeforeinput: (event: Event) => void = null;
+	public onblur: (event: Event) => void = null;
+	public oncancel: (event: Event) => void = null;
+	public oncanplay: (event: Event) => void = null;
+	public oncanplaythrough: (event: Event) => void = null;
+	public onchange: (event: Event) => void = null;
+	public onclick: (event: Event) => void = null;
+	public onclose: (event: Event) => void = null;
+	public oncontextlost: (event: Event) => void = null;
+	public oncontextmenu: (event: Event) => void = null;
+	public oncontextrestored: (event: Event) => void = null;
+	public oncuechange: (event: Event) => void = null;
+	public ondblclick: (event: Event) => void = null;
+	public ondrag: (event: Event) => void = null;
+	public ondragend: (event: Event) => void = null;
+	public ondragenter: (event: Event) => void = null;
+	public ondragleave: (event: Event) => void = null;
+	public ondragover: (event: Event) => void = null;
+	public ondragstart: (event: Event) => void = null;
+	public ondrop: (event: Event) => void = null;
+	public ondurationchange: (event: Event) => void = null;
+	public onemptied: (event: Event) => void = null;
+	public onended: (event: Event) => void = null;
+	public onerror: (event: Event) => void = null;
+	public onfocus: (event: Event) => void = null;
+	public onformdata: (event: Event) => void = null;
+	public oninput: (event: Event) => void = null;
+	public oninvalid: (event: Event) => void = null;
+	public onkeydown: (event: Event) => void = null;
+	public onkeypress: (event: Event) => void = null;
+	public onkeyup: (event: Event) => void = null;
+	public onload: (event: Event) => void = null;
+	public onloadeddata: (event: Event) => void = null;
+	public onloadedmetadata: (event: Event) => void = null;
+	public onloadstart: (event: Event) => void = null;
+	public onmousedown: (event: Event) => void = null;
+	public onmouseenter: (event: Event) => void = null;
+	public onmouseleave: (event: Event) => void = null;
+	public onmousemove: (event: Event) => void = null;
+	public onmouseout: (event: Event) => void = null;
+	public onmouseover: (event: Event) => void = null;
+	public onmouseup: (event: Event) => void = null;
+	public onmousewheel: (event: Event) => void = null;
+	public onpause: (event: Event) => void = null;
+	public onplay: (event: Event) => void = null;
+	public onplaying: (event: Event) => void = null;
+	public onprogress: (event: Event) => void = null;
+	public onratechange: (event: Event) => void = null;
+	public onreset: (event: Event) => void = null;
+	public onresize: (event: Event) => void = null;
+	public onscroll: (event: Event) => void = null;
+	public onsecuritypolicyviolation: (event: Event) => void = null;
+	public onseeked: (event: Event) => void = null;
+	public onseeking: (event: Event) => void = null;
+	public onselect: (event: Event) => void = null;
+	public onslotchange: (event: Event) => void = null;
+	public onstalled: (event: Event) => void = null;
+	public onsubmit: (event: Event) => void = null;
+	public onsuspend: (event: Event) => void = null;
+	public ontimeupdate: (event: Event) => void = null;
+	public ontoggle: (event: Event) => void = null;
+	public onvolumechange: (event: Event) => void = null;
+	public onwaiting: (event: Event) => void = null;
+	public onwebkitanimationend: (event: Event) => void = null;
+	public onwebkitanimationiteration: (event: Event) => void = null;
+	public onwebkitanimationstart: (event: Event) => void = null;
+	public onwebkittransitionend: (event: Event) => void = null;
+	public onwheel: (event: Event) => void = null;
+	public onauxclick: (event: Event) => void = null;
+	public ongotpointercapture: (event: Event) => void = null;
+	public onlostpointercapture: (event: Event) => void = null;
+	public onpointerdown: (event: Event) => void = null;
+	public onpointermove: (event: Event) => void = null;
+	public onpointerrawupdate: (event: Event) => void = null;
+	public onpointerup: (event: Event) => void = null;
+	public onpointercancel: (event: Event) => void = null;
+	public onpointerover: (event: Event) => void = null;
+	public onpointerout: (event: Event) => void = null;
+	public onpointerenter: (event: Event) => void = null;
+	public onpointerleave: (event: Event) => void = null;
+	public onselectstart: (event: Event) => void = null;
+	public onselectionchange: (event: Event) => void = null;
+	public onanimationend: (event: Event) => void = null;
+	public onanimationiteration: (event: Event) => void = null;
+	public onanimationstart: (event: Event) => void = null;
+	public ontransitionrun: (event: Event) => void = null;
+	public ontransitionstart: (event: Event) => void = null;
+	public ontransitionend: (event: Event) => void = null;
+	public ontransitioncancel: (event: Event) => void = null;
+	public oncopy: (event: Event) => void = null;
+	public oncut: (event: Event) => void = null;
+	public onpaste: (event: Event) => void = null;
+	public onbeforematch: (event: Event) => void = null;
+
 	/**
 	 * Creates an instance of Document.
 	 *

diff --git a/packages/happy-dom/src/nodes/document/IDocument.ts b/packages/happy-dom/src/nodes/document/IDocument.ts
@@ -25,7 +25,6 @@ import IProcessingInstruction from '../processing-instruction/IProcessingInstruc
  * Document.
  */
 export default interface IDocument extends IParentNode {
-	onreadystatechange: (event: Event) => void;
 	readonly defaultView: IWindow;
 	readonly implementation: DOMImplementation;
 	readonly documentElement: IHTMLElement;
@@ -42,6 +41,117 @@ export default interface IDocument extends IParentNode {
 	readonly characterSet: string;
 	cookie: string;
 
+	// Events
+	onreadystatechange: (event: Event) => void;
+	onpointerlockchange: (event: Event) => void;
+	onpointerlockerror: (event: Event) => void;
+	onbeforecopy: (event: Event) => void;
+	onbeforecut: (event: Event) => void;
+	onbeforepaste: (event: Event) => void;
+	onfreeze: (event: Event) => void;
+	onresume: (event: Event) => void;
+	onsearch: (event: Event) => void;
+	onvisibilitychange: (event: Event) => void;
+	onfullscreenchange: (event: Event) => void;
+	onfullscreenerror: (event: Event) => void;
+	onwebkitfullscreenchange: (event: Event) => void;
+	onwebkitfullscreenerror: (event: Event) => void;
+	onbeforexrselect: (event: Event) => void;
+	onabort: (event: Event) => void;
+	onbeforeinput: (event: Event) => void;
+	onblur: (event: Event) => void;
+	oncancel: (event: Event) => void;
+	oncanplay: (event: Event) => void;
+	oncanplaythrough: (event: Event) => void;
+	onchange: (event: Event) => void;
+	onclick: (event: Event) => void;
+	onclose: (event: Event) => void;
+	oncontextlost: (event: Event) => void;
+	oncontextmenu: (event: Event) => void;
+	oncontextrestored: (event: Event) => void;
+	oncuechange: (event: Event) => void;
+	ondblclick: (event: Event) => void;
+	ondrag: (event: Event) => void;
+	ondragend: (event: Event) => void;
+	ondragenter: (event: Event) => void;
+	ondragleave: (event: Event) => void;
+	ondragover: (event: Event) => void;
+	ondragstart: (event: Event) => void;
+	ondrop: (event: Event) => void;
+	ondurationchange: (event: Event) => void;
+	onemptied: (event: Event) => void;
+	onended: (event: Event) => void;
+	onerror: (event: Event) => void;
+	onfocus: (event: Event) => void;
+	onformdata: (event: Event) => void;
+	oninput: (event: Event) => void;
+	oninvalid: (event: Event) => void;
+	onkeydown: (event: Event) => void;
+	onkeypress: (event: Event) => void;
+	onkeyup: (event: Event) => void;
+	onload: (event: Event) => void;
+	onloadeddata: (event: Event) => void;
+	onloadedmetadata: (event: Event) => void;
+	onloadstart: (event: Event) => void;
+	onmousedown: (event: Event) => void;
+	onmouseenter: (event: Event) => void;
+	onmouseleave: (event: Event) => void;
+	onmousemove: (event: Event) => void;
+	onmouseout: (event: Event) => void;
+	onmouseover: (event: Event) => void;
+	onmouseup: (event: Event) => void;
+	onmousewheel: (event: Event) => void;
+	onpause: (event: Event) => void;
+	onplay: (event: Event) => void;
+	onplaying: (event: Event) => void;
+	onprogress: (event: Event) => void;
+	onratechange: (event: Event) => void;
+	onreset: (event: Event) => void;
+	onresize: (event: Event) => void;
+	onscroll: (event: Event) => void;
+	onsecuritypolicyviolation: (event: Event) => void;
+	onseeked: (event: Event) => void;
+	onseeking: (event: Event) => void;
+	onselect: (event: Event) => void;
+	onslotchange: (event: Event) => void;
+	onstalled: (event: Event) => void;
+	onsubmit: (event: Event) => void;
+	onsuspend: (event: Event) => void;
+	ontimeupdate: (event: Event) => void;
+	ontoggle: (event: Event) => void;
+	onvolumechange: (event: Event) => void;
+	onwaiting: (event: Event) => void;
+	onwebkitanimationend: (event: Event) => void;
+	onwebkitanimationiteration: (event: Event) => void;
+	onwebkitanimationstart: (event: Event) => void;
+	onwebkittransitionend: (event: Event) => void;
+	onwheel: (event: Event) => void;
+	onauxclick: (event: Event) => void;
+	ongotpointercapture: (event: Event) => void;
+	onlostpointercapture: (event: Event) => void;
+	onpointerdown: (event: Event) => void;
+	onpointermove: (event: Event) => void;
+	onpointerrawupdate: (event: Event) => void;
+	onpointerup: (event: Event) => void;
+	onpointercancel: (event: Event) => void;
+	onpointerover: (event: Event) => void;
+	onpointerout: (event: Event) => void;
+	onpointerenter: (event: Event) => void;
+	onpointerleave: (event: Event) => void;
+	onselectstart: (event: Event) => void;
+	onselectionchange: (event: Event) => void;
+	onanimationend: (event: Event) => void;
+	onanimationiteration: (event: Event) => void;
+	onanimationstart: (event: Event) => void;
+	ontransitionrun: (event: Event) => void;
+	ontransitionstart: (event: Event) => void;
+	ontransitionend: (event: Event) => void;
+	ontransitioncancel: (event: Event) => void;
+	oncopy: (event: Event) => void;
+	oncut: (event: Event) => void;
+	onpaste: (event: Event) => void;
+	onbeforematch: (event: Event) => void;
+
 	/**
 	 * Replaces the document HTML with new HTML.
 	 *

diff --git a/packages/happy-dom/src/nodes/element/Element.ts b/packages/happy-dom/src/nodes/element/Element.ts
@@ -27,6 +27,7 @@ import IText from '../text/IText';
 import IDOMRectList from './IDOMRectList';
 import DOMRectListFactory from './DOMRectListFactory';
 import IAttr from '../attr/IAttr';
+import Event from '../../event/Event';
 
 /**
  * Element.
@@ -46,6 +47,42 @@ export default class Element extends Node implements IElement {
 	public children: IHTMLCollection<IElement> = HTMLCollectionFactory.create();
 	public readonly namespaceURI: string = null;
 
+	// Events
+	public oncancel: (event: Event) => void | null = null;
+	public onerror: (event: Event) => void | null = null;
+	public onscroll: (event: Event) => void | null = null;
+	public onselect: (event: Event) => void | null = null;
+	public onwheel: (event: Event) => void | null = null;
+	public oncopy: (event: Event) => void | null = null;
+	public oncut: (event: Event) => void | null = null;
+	public onpaste: (event: Event) => void | null = null;
+	public oncompositionend: (event: Event) => void | null = null;
+	public oncompositionstart: (event: Event) => void | null = null;
+	public oncompositionupdate: (event: Event) => void | null = null;
+	public onblur: (event: Event) => void | null = null;
+	public onfocus: (event: Event) => void | null = null;
+	public onfocusin: (event: Event) => void | null = null;
+	public onfocusout: (event: Event) => void | null = null;
+	public onfullscreenchange: (event: Event) => void | null = null;
+	public onfullscreenerror: (event: Event) => void | null = null;
+	public onkeydown: (event: Event) => void | null = null;
+	public onkeyup: (event: Event) => void | null = null;
+	public onauxclick: (event: Event) => void | null = null;
+	public onclick: (event: Event) => void | null = null;
+	public oncontextmenu: (event: Event) => void | null = null;
+	public ondblclick: (event: Event) => void | null = null;
+	public onmousedown: (event: Event) => void | null = null;
+	public onmouseenter: (event: Event) => void | null = null;
+	public onmouseleave: (event: Event) => void | null = null;
+	public onmousemove: (event: Event) => void | null = null;
+	public onmouseout: (event: Event) => void | null = null;
+	public onmouseover: (event: Event) => void | null = null;
+	public onmouseup: (event: Event) => void | null = null;
+	public ontouchcancel: (event: Event) => void | null = null;
+	public ontouchend: (event: Event) => void | null = null;
+	public ontouchmove: (event: Event) => void | null = null;
+	public ontouchstart: (event: Event) => void | null = null;
+
 	// Used for being able to access closed shadow roots
 	public _shadowRoot: IShadowRoot = null;
 	public _attributes: { [k: string]: IAttr } = {};

diff --git a/packages/happy-dom/src/nodes/element/IElement.ts b/packages/happy-dom/src/nodes/element/IElement.ts
@@ -7,6 +7,7 @@ import IChildNode from '../child-node/IChildNode';
 import IParentNode from '../parent-node/IParentNode';
 import INonDocumentTypeChildNode from '../child-node/INonDocumentTypeChildNode';
 import IDOMRectList from './IDOMRectList';
+import Event from '../../event/Event';
 
 export type TInsertAdjacentPositions = 'beforebegin' | 'afterbegin' | 'beforeend' | 'afterend';
 
@@ -30,6 +31,42 @@ export default interface IElement extends IChildNode, INonDocumentTypeChildNode,
 	readonly localName: string;
 	readonly attributes: { [k: string | number]: IAttr } & { length: number };
 
+	// Events
+	oncancel: (event: Event) => void | null;
+	onerror: (event: Event) => void | null;
+	onscroll: (event: Event) => void | null;
+	onselect: (event: Event) => void | null;
+	onwheel: (event: Event) => void | null;
+	oncopy: (event: Event) => void | null;
+	oncut: (event: Event) => void | null;
+	onpaste: (event: Event) => void | null;
+	oncompositionend: (event: Event) => void | null;
+	oncompositionstart: (event: Event) => void | null;
+	oncompositionupdate: (event: Event) => void | null;
+	onblur: (event: Event) => void | null;
+	onfocus: (event: Event) => void | null;
+	onfocusin: (event: Event) => void | null;
+	onfocusout: (event: Event) => void | null;
+	onfullscreenchange: (event: Event) => void | null;
+	onfullscreenerror: (event: Event) => void | null;
+	onkeydown: (event: Event) => void | null;
+	onkeyup: (event: Event) => void | null;
+	onauxclick: (event: Event) => void | null;
+	onclick: (event: Event) => void | null;
+	oncontextmenu: (event: Event) => void | null;
+	ondblclick: (event: Event) => void | null;
+	onmousedown: (event: Event) => void | null;
+	onmouseenter: (event: Event) => void | null;
+	onmouseleave: (event: Event) => void | null;
+	onmousemove: (event: Event) => void | null;
+	onmouseout: (event: Event) => void | null;
+	onmouseover: (event: Event) => void | null;
+	onmouseup: (event: Event) => void | null;
+	ontouchcancel: (event: Event) => void | null;
+	ontouchend: (event: Event) => void | null;
+	ontouchmove: (event: Event) => void | null;
+	ontouchstart: (event: Event) => void | null;
+
 	/**
 	 * Attribute changed callback.
 	 *

diff --git a/packages/happy-dom/src/nodes/html-dialog-element/HTMLDialogElement.ts b/packages/happy-dom/src/nodes/html-dialog-element/HTMLDialogElement.ts
@@ -11,6 +11,10 @@ import IHTMLDialogElement from './IHTMLDialogElement';
 export default class HTMLDialogElement extends HTMLElement implements IHTMLDialogElement {
 	public returnValue = '';
 
+	// Events
+	public oncancel: (event: Event) => void | null = null;
+	public onclose: (event: Event) => void | null = null;
+
 	/**
 	 * Returns open.
 	 *