fix: wire up events in mount correctly and fix its types (#10553)

fixes #10551

.changeset/shaggy-cameras-live.md

@@ -0,0 +1,5 @@
+---
+"svelte": patch
+---
+
+fix: wire up `events` in `mount` correctly and fix its types

packages/svelte/src/internal/client/render.js

@@ -2432,7 +2432,7 @@ export function createRoot() {
  * @param {{
  * 		target: Node;
  * 		props?: Props;
- * 		events?: Events;
+ * 		events?: { [Property in keyof Events]: (e: Events[Property]) => any };
  *  	context?: Map<any, any>;
  * 		intro?: boolean;
  * 	}} options
@@ -2456,7 +2456,7 @@ export function mount(component, options) {
  * @param {{
  * 		target: Node;
  * 		props?: Props;
- * 		events?: Events;
+ * 		events?: { [Property in keyof Events]: (e: Events[Property]) => any };
  *  	context?: Map<any, any>;
  * 		intro?: boolean;
  * 		recover?: false;
@@ -2524,7 +2524,7 @@ export function hydrate(component, options) {
  * 		target: Node;
  * 		anchor: null | Text;
  * 		props?: Props;
- * 		events?: Events;
+ * 		events?: { [Property in keyof Events]: (e: Events[Property]) => any };
  *  	context?: Map<any, any>;
  * 		intro?: boolean;
  * 		recover?: false;
@@ -2547,8 +2547,16 @@ function _mount(Component, options) {
 				/** @type {import('../client/types.js').ComponentContext} */ (current_component_context).c =
 					options.context;
 			}
-			// @ts-expect-error the public typings are not what the actual function looks like
-			component = Component(options.anchor, options.props || {}) || {};
+			if (!options.props) {
+				options.props = /** @type {Props} */ ({});
+			}
+			if (options.events) {
+				// We can't spread the object or else we'd lose the state proxy stuff, if it is one
+				/** @type {any} */ (options.props).$$events = options.events;
+			}
+			component =
+				// @ts-expect-error the public typings are not what the actual function looks like
+				Component(options.anchor, options.props) || {};
 			if (options.context) {
 				pop();
 			}

packages/svelte/tests/runtime-runes/samples/manual-mount/_config.js

@@ -0,0 +1,21 @@
+import { tick } from 'svelte';
+import { test } from '../../test';
+
+export default test({
+	html: `<button>toggle</button><div></div>`,
+	async test({ assert, target }) {
+		const button = target.querySelector('button');
+
+		await button?.click();
+		assert.htmlEqual(target.innerHTML, `<button>toggle</button><div><button>0</button></div>`);
+
+		const inner_button = target.querySelector('div')?.querySelector('button');
+
+		inner_button?.click();
+		await tick();
+		assert.htmlEqual(target.innerHTML, `<button>toggle</button><div><button>2</button></div>`);
+
+		await button?.click();
+		assert.htmlEqual(target.innerHTML, `<button>toggle</button><div></div>`);
+	}
+});

packages/svelte/tests/runtime-runes/samples/manual-mount/inner.svelte

@@ -0,0 +1,11 @@
+<script>
+	import { createEventDispatcher, getContext } from "svelte";
+
+    let { count } = $props();
+    const multiply = getContext('multiply');
+
+    // Use legacy createEventDispatcher here to test that `events` property in `mount` works
+    const dispatch = createEventDispatcher();
+</script>
+
+<button onclick={() => dispatch('update', count + 1 * multiply)}>{count}</button>

packages/svelte/tests/runtime-runes/samples/manual-mount/main.svelte

@@ -0,0 +1,20 @@
+<script>
+	import { mount, unmount } from 'svelte';
+	import Inner from './inner.svelte';
+
+	let el;
+	let component;
+	let props = $state({count: 0});
+
+	function toggle() {
+		if (component) {
+			unmount(component);
+			component = null;
+		} else {
+			component = mount(Inner, { target: el, props, context: new Map([['multiply', 2]]), events: { update: (e) => props.count = e.detail } });
+		}
+	}
+</script>
+
+<button onclick={toggle}>toggle</button>
+<div bind:this={el}></div>

packages/svelte/tests/types/component.ts

@@ -112,7 +112,7 @@ mount(NewComponent, {
 		x: ''
 	},
 	events: {
-		event: new MouseEvent('click')
+		event: (e) => e.offsetX
 	},
 	immutable: true,
 	intro: false,
@@ -127,7 +127,9 @@ hydrate(NewComponent, {
 		x: ''
 	},
 	events: {
-		event: new MouseEvent('click')
+		event: (e) =>
+			// @ts-expect-error
+			e.doesNotExist
 	},
 	immutable: true,
 	intro: false,

packages/svelte/types/index.d.ts

@@ -334,7 +334,7 @@ declare module 'svelte' {
 	export function mount<Props extends Record<string, any>, Exports extends Record<string, any>, Events extends Record<string, any>>(component: ComponentType<SvelteComponent<Props, Events, any>>, options: {
 		target: Node;
 		props?: Props | undefined;
-		events?: Events | undefined;
+		events?: { [Property in keyof Events]: (e: Events[Property]) => any; } | undefined;
 		context?: Map<any, any> | undefined;
 		intro?: boolean | undefined;
 	}): Exports;
@@ -345,7 +345,7 @@ declare module 'svelte' {
 	export function hydrate<Props extends Record<string, any>, Exports extends Record<string, any>, Events extends Record<string, any>>(component: ComponentType<SvelteComponent<Props, Events, any>>, options: {
 		target: Node;
 		props?: Props | undefined;
-		events?: Events | undefined;
+		events?: { [Property in keyof Events]: (e: Events[Property]) => any; } | undefined;
 		context?: Map<any, any> | undefined;
 		intro?: boolean | undefined;
 		recover?: false | undefined;