Svelte access to API could be more idiomatic

[brunnerh]

Clear and concise description of the problem

Currently in Svelte access to the Swiper API is done via an event:

<script>
  let swiper;
</script>

<Swiper on:swiper={e => swiper = e.detail[0]}>...</Swiper>

Suggested solution

In Svelte this usually should be done via a property, which then can just be bound.

<script>
  let swiper;
</script>

<Swiper bind:swiper>...</Swiper>

An event could still be used in addition to this, though I would name it init instead.

Having the event is not strictly necessary as a reactive statement can be used like this:

let swiper;
$: if (swiper) {
  // Executed after the API becomes available
}

Alternative

The component could also export all API methods directly, then bind:this could be used instead.

Additional context

No response

Validations

• [X] Follow our Code of Conduct
• [X] Read the docs.
• [X] Check that there isn't already an issue that request the same feature to avoid creating a duplicate.

Would you like to open a PR for this feature?

• [ ] I'm willing to open a PR