Merge branch 'main' into chore/internal-types

Author: rschristian

src/constants.js

@@ -10,6 +10,10 @@ export const MATCHED = 1 << 17;
 /** Reset all mode flags */
 export const RESET_MODE = ~(MODE_HYDRATE | MODE_SUSPENDED);
 
+export const SVG_NAMESPACE = 'http://www.w3.org/2000/svg';
+export const XHTML_NAMESPACE = 'http://www.w3.org/1999/xhtml';
+export const MATH_NAMESPACE = 'http://www.w3.org/1998/Math/MathML';
+
 export const UNDEFINED = undefined;
 export const EMPTY_OBJ = /** @type {any} */ ({});
 export const EMPTY_ARR = [];

src/diff/index.js

@@ -1,9 +1,12 @@
 import {
 	EMPTY_OBJ,
+	MATH_NAMESPACE,
 	MODE_HYDRATE,
 	MODE_SUSPENDED,
 	RESET_MODE,
-	UNDEFINED
+	SVG_NAMESPACE,
+	UNDEFINED,
+	XHTML_NAMESPACE
 } from '../constants';
 import { BaseComponent, getDomSibling } from '../component';
 import { Fragment } from '../create-element';
@@ -402,10 +405,9 @@ function diffElementNodes(
 	let checked;
 
 	// Tracks entering and exiting namespaces when descending through the tree.
-	if (nodeType === 'svg') namespace = 'http://www.w3.org/2000/svg';
-	else if (nodeType === 'math')
-		namespace = 'http://www.w3.org/1998/Math/MathML';
-	else if (!namespace) namespace = 'http://www.w3.org/1999/xhtml';
+	if (nodeType === 'svg') namespace = SVG_NAMESPACE;
+	else if (nodeType === 'math') namespace = MATH_NAMESPACE;
+	else if (!namespace) namespace = XHTML_NAMESPACE;
 
 	if (excessDomChildren != null) {
 		for (i = 0; i < excessDomChildren.length; i++) {
@@ -528,9 +530,7 @@ function diffElementNodes(
 				newVNode,
 				oldVNode,
 				globalContext,
-				nodeType === 'foreignObject'
-					? 'http://www.w3.org/1999/xhtml'
-					: namespace,
+				nodeType === 'foreignObject' ? XHTML_NAMESPACE : namespace,
 				excessDomChildren,
 				commitQueue,
 				excessDomChildren

src/diff/props.js

@@ -1,4 +1,4 @@
-import { IS_NON_DIMENSIONAL } from '../constants';
+import { IS_NON_DIMENSIONAL, SVG_NAMESPACE } from '../constants';
 import options from '../options';
 
 function setStyle(style, key, value) {
@@ -13,6 +13,8 @@ function setStyle(style, key, value) {
 	}
 }
 
+const CAPTURE_REGEX = /(PointerCapture)$|Capture$/i;
+
 // A logical clock to solve issues like https://github.com/preactjs/preact/issues/3927.
 // When the DOM performs an event it leaves micro-ticks in between bubbling up which means that
 // an event can trigger on a newly reated DOM-node while the event bubbles up.
@@ -64,8 +66,7 @@ export function setProperty(dom, name, value, oldValue, namespace) {
 	}
 	// Benchmark for comparison: https://esbench.com/bench/574c954bdb965b9a00965ac6
 	else if (name[0] === 'o' && name[1] === 'n') {
-		useCapture =
-			name !== (name = name.replace(/(PointerCapture)$|Capture$/i, '$1'));
+		useCapture = name !== (name = name.replace(CAPTURE_REGEX, '$1'));
 
 		// Infer correct casing for DOM built-in events:
 		if (
@@ -98,7 +99,7 @@ export function setProperty(dom, name, value, oldValue, namespace) {
 			);
 		}
 	} else {
-		if (namespace == 'http://www.w3.org/2000/svg') {
+		if (namespace == SVG_NAMESPACE) {
 			// Normalize incorrect prop usage for SVG:
 			// - xlink:href / xlinkHref --> href (xlink:href was removed from SVG and isn't needed)
 			// - className --> class
@@ -166,8 +167,7 @@ function createEventProxy(useCapture) {
 			} else if (e._dispatched < eventHandler._attached) {
 				return;
 			}
-			if (options.event) e = options.event(e);
-			return "handleEvent" in eventHandler ? eventHandler.handleEvent(e) : eventHandler(e);
+			return eventHandler(options.event ? options.event(e) : e);
 		}
 	};
 }

src/jsx.d.ts

@@ -521,15 +521,9 @@ export namespace JSXInternal {
 	export type TargetedPictureInPictureEvent<Target extends EventTarget> =
 		TargetedEvent<Target, PictureInPictureEvent>;
 
-	export type EventHandlerObject<E extends TargetedEvent> = {
-		handleEvent(e: E): unknown;
-	};
-
-	export type EventHandler<E extends TargetedEvent> =
-		| {
-				bivarianceHack(event: E): void;
-		  }['bivarianceHack']
-		| EventHandlerObject<E>;
+	export type EventHandler<E extends TargetedEvent> = {
+		bivarianceHack(event: E): void;
+	}['bivarianceHack'];
 
 	export type AnimationEventHandler<Target extends EventTarget> = EventHandler<
 		TargetedAnimationEvent<Target>

test/browser/events.test.js

@@ -235,52 +235,4 @@ describe('event handling', () => {
 			.to.have.been.calledTwice.and.to.have.been.calledWith('focusin')
 			.and.calledWith('focusout');
 	});
-
-	it('should register EventListenerObject as handler', () => {
-		let handler = { handleEvent() {} }
-
-		render(<div onClick={handler} />, scratch);
-
-		expect(scratch.childNodes[0].attributes.length).to.equal(0);
-
-		expect(proto.addEventListener).to.have.been.calledOnce;
-	});
-
-	it('should call registered EventListenerObject through the .handleEvent() method', () => {
-		let onclick = sinon.spy();
-
-		let handler = {
-			onclick,
-			handleEvent() {
-				this.onclick()
-			}
-		}
-
-		render(<div onClick={handler} />, scratch);
-
-		fireEvent(scratch.childNodes[0], 'click');
-
-		expect(onclick).to.have.been.calledOnce;
-	});
-
-	it('should keep the registered EventListenerObject referentially identical when calling', () => {
-		let onclick = sinon.spy();
-
-		// if the handler object was destructured or otherwise copied, this will fail
-		let handler = new class {
-			onclick = onclick
-			#onClick() {
-				this.onclick()
-			}
-			handleEvent() {
-				this.#onClick()
-			}
-		}
-
-		render(<div onClick={handler} />, scratch);
-
-		fireEvent(scratch.childNodes[0], 'click');
-
-		expect(onclick).to.have.been.calledOnce;
-	});
 });

test/ts/preact.tsx

@@ -6,7 +6,8 @@ import {
 	FunctionalComponent,
 	AnyComponent,
 	h,
-	createRef
+	createRef,
+	JSX
 } from '../../';
 
 interface DummyProps {
@@ -381,3 +382,14 @@ h('form', { onSubmit: onSubmit });
 
 h('option', { value: 'foo' });
 createElement('option', { value: 'foo' });
+
+function Checkbox({ onChange }: JSX.HTMLAttributes<HTMLInputElement>) {
+	function handleChange(
+		this: void,
+		event: JSX.TargetedEvent<HTMLInputElement>
+	) {
+		onChange?.call(this, event);
+	}
+
+	return <input onChange={handleChange} />;
+}