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: https://github.com/sveltejs/svelte/blob/623340a1de45a44b4d9ffe002f71586ca50f109c/packages/svelte/src/internal/client/render.js#L2851-L2863

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.