change on: handlers to reflect svelte 5 updates

[vexkiddy]

In svelte 5 on: handlers have been depreciated, it would be great if the package could be updated to use the new syntax :D

[isaacHagoel]

Not sure I follow. What is the new syntax? Passing callbacks instead of listening on events? I haven't used svelte 5 beyond playing with it so I might be missing something

…

On Tue, Jan 7, 2025, 07:42 Vexkiddy ***@***.***> wrote: In svelte 5 on: handlers have been depreciated, it would be great if the package could be updated to use the new syntax :D — Reply to this email directly, view it on GitHub <#624>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AE4OZC2PS3YP5FOCBOOCCU32JLTC3AVCNFSM6AAAAABUWKYVYCVHI2DSMVQWIX3LMV43ASLTON2WKOZSG43TCNBRGIZTIMI> . You are receiving this because you are subscribed to this thread.Message ID: ***@***.***>

[vexkiddy]

hiya, thanks for getting back to me! I guess it really depends if you want to update the entire project to svelte 5 or not. It's a lot cleaner to deal with all the state in svelte 5 and they have changed the way that you emit events to parents. So on:EventHandler is now deprecated, it's more like the below:

Child.svelte

<script>
  let { onYes, onNo } = $props();
</script>

<button onclick={onYes}>YES</button>
<button onclick={onNo}>NO</button>

Parent.svelte

<script>
  import AnswerButton from "./AnswerButton.svelte";
  let isHappy = $state(true);
  
function onAnswerNo() {
    isHappy = false;
  }

  function onAnswerYes() {
    isHappy = true;
  }
</script>

<p>Are you happy?</p>
<AnswerButton onYes={onAnswerYes} onNo={onAnswerNo} />
<p style="font-size: 50px;">{isHappy ? "😀" : "😥"}</p>

[isaacHagoel]

Yeah that's what I meant by callbacks. You can do this with svelte 3 and 4 as well. If I remove the events from the lib it and introduce callbacks as props it would be a breaking change.

…

On Tue, Jan 7, 2025, 22:03 Vexkiddy ***@***.***> wrote: hiya, thanks for getting back to me! I guess it really depends if you want to update the entire project to svelte 5 or not. It's a lot cleaner to deal with all the state in svelte 5 and they have changed the way that you emit events to parents. So *on:EventHandler* is now deprecated, it's more like the below: *Child.svelte* <script> let { onYes, onNo } = $props(); </script> <button onclick={onYes}>YES</button> <button onclick={onNo}>NO</button> *Parent.svelte* <script> import AnswerButton from "./AnswerButton.svelte"; let isHappy = $state(true); function onAnswerNo() { isHappy = false; } function onAnswerYes() { isHappy = true; } </script> <p>Are you happy?</p> <AnswerButton onYes={onAnswerYes} onNo={onAnswerNo} /> <p style="font-size: 50px;">{isHappy ? "😀" : "😥"}</p> — Reply to this email directly, view it on GitHub <#624 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AE4OZC3RHBZFO6SAS7XX6SL2JOYBFAVCNFSM6AAAAABUWKYVYCVHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMZDKNZVGAYDENBWGE> . You are receiving this because you commented.Message ID: ***@***.***>

[vexkiddy]

ah ok, not to worry then, though just out of interest, do you have any plans to port the repo to svelte 5 in the future ?

[isaacHagoel]

The lib works with svelte 5. Do you mean the examples?

…

On Tue, Jan 7, 2025, 22:31 Vexkiddy ***@***.***> wrote: ah ok, not to worry then, though just out of interest, do you have any plans to port the repo to svelte 5 in the future ? — Reply to this email directly, view it on GitHub <#624 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AE4OZCYTFPJBTB53AUCTIDL2JO3HZAVCNFSM6AAAAABUWKYVYCVHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMZDKNZVGA2TMNRTGI> . You are receiving this because you commented.Message ID: ***@***.***>

[vexkiddy]

It's just currently IDE's will complain as the syntax is not svelte 5. You also have much better state management in svelte 5 than you do in previous versions, allowing you to have state in normal js files using the .svelte.js file extension.

[isaacHagoel]

Ah, so using onconsider instead of on:consider just works?

…

On Wed, Jan 8, 2025, 08:42 Vexkiddy ***@***.***> wrote: It's just currently IDE's will complain as the syntax is not svelte 5. You also have much better state management in svelte 5 than you do in previous versions, allowing you to have state in normal js files using the .svelte.js file extension. ***@***.*** (view on web) <https://github.com/user-attachments/assets/67325875-e187-4429-bdb9-860954d52794> — Reply to this email directly, view it on GitHub <#624 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AE4OZC6NZE5BXWZL4CLC5R32JRC4VAVCNFSM6AAAAABUWKYVYCVHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMZDKNZWGI3TKNBYGE> . You are receiving this because you commented.Message ID: ***@***.***>

[vexkiddy]

no, you'll still need to send it from the child. I'd really recommend having a proper look at all the new svelte 5 stuff. Either way, as you say it works with older projects, its just the IDE will complain if you're in strict runes mode.

[isaacHagoel]

Got it. I figured but the IDE suggestion in your screenshot threw me off

…

On Wed, Jan 8, 2025, 20:33 Vexkiddy ***@***.***> wrote: no, you'll still need to send it from the child. I'd really recommend having a proper look at all the new svelte 5 stuff. Either way, as you say it works with older projects, its just the IDE will complain if you're in strict runes mode. — Reply to this email directly, view it on GitHub <#624 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AE4OZC5GUFM2MSGUG3BJVD32JTWHJAVCNFSM6AAAAABUWKYVYCVHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMZDKNZXGIYDMMJVGQ> . You are receiving this because you commented.Message ID: ***@***.***>

[digitalit]

So is it okay to start using this in svelte 5 or should i wait?

[isaacHagoel]

It's okay. It will work fine

…

On Sun, Jan 12, 2025, 19:38 Peter Carlsson ***@***.***> wrote: So is it okay to start using this in svelte 5 or should i wait? — Reply to this email directly, view it on GitHub <#624 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AE4OZC3QFIQF3EBVX2OID7D2KISYVAVCNFSM6AAAAABUWKYVYCVHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMZDKOBVGY2DEOJQHA> . You are receiving this because you commented.Message ID: ***@***.***>

[digitalit]

It's okay. It will work fine
…
On Sun, Jan 12, 2025, 19:38 Peter Carlsson @.> wrote: So is it okay to start using this in svelte 5 or should i wait? — Reply to this email directly, view it on GitHub <#624 (comment)>, or unsubscribe https://github.com/notifications/unsubscribe-auth/AE4OZC3QFIQF3EBVX2OID7D2KISYVAVCNFSM6AAAAABUWKYVYCVHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMZDKOBVGY2DEOJQHA . You are receiving this because you commented.Message ID: @.>

Sweet. Wow, fastest issue respons ever :)