[Feat]: Adding updated onemblaInit naming for Svelte 5

[S1r-Lanzelot]

Per the new naming conventions of event handlers: https://svelte-5-preview.vercel.app/docs/event-handlers

This is necessary due to deprecation moving forward and because Mixing old and new syntaxes for event handling is not allowed. (mixed_event_handler_syntaxes) sveltejs/svelte#11295

leaving on:emblaInit because it will be backward compatible.

Thanks

[davidjerleke]

Hi @S1r-Lanzelot,

Thanks for your contribution 👍. I think this is a great initiative.

leaving on:emblaInit because it will be backward compatible.

Good thinking. Even though it's deprecated, on:emblaInit will continue to work with Svelte 5 so devs won't be forced to upgrade their Svelte version to 5 just to use the latest version of Embla.

Have you tested the carousel with Svelte 5? Does it work? If yes, I think we can include this in your PR:

• [Feat]: Make package available for svelte@next 5.0.0 #796 (comment)

Would you mind adding that to this PR?

Cheers!
David

[S1r-Lanzelot]

Yes I am using it now but to be honest not all the features. Nevertheless, since we are only concerned about ActionResult then my limited use should be sufficient. I can preemptively include the 5.0.0 so embla-carousel is ready when Svelte 5.0 is finally released. In the meantime I recommend using an override. Sounds good?

Let me bang on my use for another day and then I expand the peer dep in the PR 👍

"overrides": {
    "embla-carousel-svelte": {
      "svelte": "^5.0.0-next.1"
    }
  }

[S1r-Lanzelot]

Additionally, I have updated the docs. I was back and forth with which syntax to include as the default, let me know if this is "jumping the gun," I can default it to Svelte 4 syntax if preferred:

[davidjerleke]

@S1r-Lanzelot one thought. Should we make it lowercase for Svelte 5? Like so: onemblaInit --> onemblainit? Because it seems like that's convention for events but I'm not a seasoned Svelte dev by no means so let me know what you think.

Additionally, I have updated the docs. I was back and forth with which syntax to include as the default, let me know if this
is "jumping the gun," I can default it to Svelte 4 syntax if preferred:

@S1r-Lanzelot thanks. The admonition with the backward compatibility is a great idea I think 👍.

There are additional on:emblaInit code examples in the docs so if we're to change in one place I think we should replace all and also add the same admonition on all places. For example, the event handler is used here:

Methods

• https://www.embla-carousel.com/api/methods/#calling-methods
• https://www.embla-carousel.com/api/methods/#typescript

Events

• https://www.embla-carousel.com/api/events/#adding-event-listeners
• https://www.embla-carousel.com/api/events/#removing-event-listeners
• https://www.embla-carousel.com/api/events/#typescript

Plugins

• https://www.embla-carousel.com/api/plugins/#calling-methods
• https://www.embla-carousel.com/api/plugins/#adding-event-listeners

Thanks for your efforts!

[S1r-Lanzelot]

@davidjerleke - thanks for pointing out the additional references in the docs, I'll get these.

Should we make it lowercase for Svelte 5? Like so: onemblaInit --> onemblainit? Because it seems like that's convention for events but I'm not a seasoned Svelte dev by no means so let me know what you think.

It's a good question, especially now that onemblaInit isn't [visibly] following a clear naming convention. It probably should be all lowercase just to keep things consistent and because in some cases there is good reason for it.

However, I vote to leave it only because of the other changes I think it would require since events are case sensitive and a change would require an update here I believe. Although to be honest the change is quite minimal with simply dispatching two events instead of one (as to not introduce a breaking change), but not sure it's worth it in the end...

Let me know your thoughts, thanks.

[davidjerleke]

It's a good question, especially now that onemblaInit isn't [visibly] following a clear naming convention. It probably should be all lowercase just to keep things consistent and because in some cases there is good reason for it.

However, I vote to leave it only because of the other changes I think it would require since events are case sensitive and a change would require an update here I believe. Although to be honest the change is quite minimal with simply dispatching two events instead of one (as to not introduce a breaking change), but not sure it's worth it in the end...

@S1r-Lanzelot good point 👍. Of course, that's a breaking change so we need to wait until the next major release. I've added the task to the roadmap so we don't forget about it:

• [Feat]: ⭐ Roadmap #841

Left to do

• Update the additional references of on:emblaInit in the docs.
• Add Svelte 5 to package.json: "^3.49.0 || ^4.0.0" --> "^3.49.0 || ^4.0.0 || ^5.0.0".

[S1r-Lanzelot]

@davidjerleke thanks for all the feedback! Let me know if it needs anymore tweaking but I think we're good to go.

[davidjerleke]

@S1r-Lanzelot one last question: Do you know if this "^3.49.0 || ^4.0.0 || ^5.0.0" will accept Svelte 5 next versions as well (5.0.0-next.1 etc.)?

[S1r-Lanzelot]

No it won't unfortunately, it will still require an override in people's reference until Svelte 5 is officially released, Flowbite svelte does a similar approach and if people want to be on the bleeding edge then they can just override.

"overrides": {
    "embla-carousel-svelte": {
      "svelte": "^5.0.0-next.1"
    }
  }

[davidjerleke]

@S1r-Lanzelot thanks for your contributions! We're good to go then 👍.

[S1r-Lanzelot]

Sweet - thanks for the library!

[davidjerleke]

@S1r-Lanzelot I just released Svelte 5 support along with the documentation changes in v8.3.0. Thanks for your efforts 🎉!