allow nullish values for component event handlers (#7863)

src/runtime/internal/Component.ts

@@ -212,6 +212,9 @@ if (typeof HTMLElement === 'function') {
 
 		$on(type, callback) {
 			// TODO should this delegate to addEventListener?
+			if (!is_function(callback)) {
+				return noop;
+			}
 			const callbacks = (this.$$.callbacks[type] || (this.$$.callbacks[type] = []));
 			callbacks.push(callback);
 
@@ -244,6 +247,9 @@ export class SvelteComponent {
 	}
 
 	$on(type, callback) {
+		if (!is_function(callback)) {
+			return noop;
+		}
 		const callbacks = (this.$$.callbacks[type] || (this.$$.callbacks[type] = []));
 		callbacks.push(callback);
 

test/runtime/samples/component-events-nullish/Widget.svelte

@@ -0,0 +1,14 @@
+<script>
+	import { createEventDispatcher } from 'svelte';
+	const dispatch = createEventDispatcher();
+	export let logs;
+
+	function click() {
+		try {
+			dispatch('click');
+		} catch (error) {
+			logs.push(error);
+		}
+	}
+</script>
+<button on:click={click} />

test/runtime/samples/component-events-nullish/_config.js

@@ -0,0 +1,9 @@
+export default {
+	async test({ assert, component, window, target }) {
+		const event = new window.MouseEvent('click');
+		const button = target.querySelector('button');
+		
+		await button.dispatchEvent(event);
+		assert.equal(component.logs.length, 0);
+	}
+};

test/runtime/samples/component-events-nullish/main.svelte

@@ -0,0 +1,6 @@
+<script>
+	import Widget from './Widget.svelte';
+	export let logs = [];
+</script>
+
+<Widget on:click={null} {logs} />