Make dispatchEvent fire for camelCased event props

src/crank.ts

@@ -1935,12 +1935,27 @@ export class Context<T = any, TResult = any> implements EventTarget {
 			{
 				setEventProperty(ev, "eventPhase", AT_TARGET);
 				setEventProperty(ev, "currentTarget", ctx.owner);
-				const propCallback = ctx.ret.el.props["on" + ev.type] as unknown;
+
+				// dispatchEvent calls the prop callback if it exists
+				let propCallback = ctx.ret.el.props["on" + ev.type] as unknown;
 				if (typeof propCallback === "function") {
 					propCallback(ev);
 					if (immediateCancelBubble || ev.cancelBubble) {
 						return true;
 					}
+				} else {
+					// Checks for camel-cased event props
+					for (const propName in ctx.ret.el.props) {
+						if (propName.toLowerCase() === "on" + ev.type.toLowerCase()) {
+							propCallback = ctx.ret.el.props[propName] as unknown;
+							if (typeof propCallback === "function") {
+								propCallback(ev);
+								if (immediateCancelBubble || ev.cancelBubble) {
+									return true;
+								}
+							}
+						}
+					}
 				}
 
 				const listeners = listenersMap.get(ctx);

test/events.tsx

@@ -337,6 +337,19 @@ test("event props", () => {
 	Assert.is(mock.callCount, 1);
 });
 
+test("event props camelCased", () => {
+	let ctx!: Context;
+	function Component(this: Context, _props: {onFoo: (ev: Event) => any}) {
+		ctx = this;
+		return <span>Hello</span>;
+	}
+
+	const mock = Sinon.fake();
+	renderer.render(<Component onFoo={mock} />, document.body);
+	ctx.dispatchEvent(new Event("foo"));
+	Assert.is(mock.callCount, 1);
+});
+
 test("error thrown in listener", () => {
 	let ctx!: Context;
 	function Component(this: Context) {