Svelte 5: $on doesn't work

[eunukasiko]

Describe the bug

Binding event via $on doesn't work like it used to in Svelte 4.

Reproduction

Svelte 4: https://svelte.dev/repl/b5e67c0bad914d569b149f972b22a04c?version=4.2.10
Svelte 5: https://svelte-5-preview.vercel.app/#H4sIAAAAAAAAE41SQW6kMBD8SsuKBEhkJnvIhQWkKNkPzHXJgbENtGJsZDezGyH-vjIYZlZJpBx86HJ1VXfZE2tQScey3xPTdS9Zxp6GgaWM3gdfuItUJFnKnBkt90juuMWBykpXhP1gLMFJCmis6SE6HE9SHNam6GelPUlJgjNqgbr1CPlzlwE2EAc4gWm5IF_v4EKeVw1utCPgtVLnmr9BAXECRbm1-Vuj5EGZNo42Euo2ShaJ3bUZNSc0Gv7zuTVH3R7ujI4jN557pCjdPfdx8uM1AJ371X1jRh26YgoaMxxLlrLeCGxQCpaRHeWc7hGfpPhexAAh4gm4lTXJXxep6QXdUBPvpIU5BH8bOcAalwg0KD5vjpOPyRj9rJC_xcmn2fpt7zdOFNpp89lT-yIrgZfl11y_iK_y80i0OGfcyxZT0J_BB1RUbCVUrFzl8-MKlF4_aOrc0buSi7zAyzb8HxTUZfDj4WH4G4btJLYdZfB4hfzzttaMWtxzo4zNwEpxs8Ki_PE5X-d_-ymu0z0DAAA=

You can see 'callbacking' is not printed in Svelte 5.

Logs

No response

System Info

repl

Severity

blocking an upgrade

[brunnerh]

I don't think that kind of usage of $on was ever intended, you can just use on: on the component.

If you want to attach event handlers to a new component instance instantiated via the client side API, there are some breaking changes:

createRoot returns an object with a $set and $destroy method on it. It does not come with an $on method you may know from the class component API. Instead, pass them via the events property on the options argument.

[eunukasiko]

In the real code, I don't know in advance what the events will be, that's why I can't use on:.
Thanks for the link, I'll see if I can somehow make code that works in both versions.

[brunnerh]

I tried this but it looks non-functional 🤔.
events is declared as part of the type here:

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

Lines 2851 to 2863 in 623340a

	* @template {Record<string, any>} Events
	* @param {import('../../main/public.js').ComponentType<import('../../main/public.js').SvelteComponent<Props, Events>>} component
	* @param {{
	* target: Node;
	* props?: Props;
	* events?: Events;
	* context?: Map<any, any>;
	* intro?: boolean;
	* recover?: false;
	* }} options
	* @returns {[Exports, () => void]}
	*/
	export function mount(component, options) {

But it does not appear to be used at all.

Edit: Should be fixed by #10553.

[brunnerh]

The legacy createClassComponent appears to work.

REPL

[dummdidumm]

This is noted in the breaking changes. That said, we have a legacy.componentApi setting which we could expand to return $on and $set from.