Improve Svelte use:inertia and <Link />

[pedroborges]

This PR brings a bunch of improvements to the use:inertia action and <Link /> component.

use:inertia

Simplify options merge logic (#9eb66f6)

Stop dispatching the click event (#640f690)

It was a mistake to dispatch the click event with createEventDispatcher from the action in first place. Its use is intended for components. We ran into an edge-case bug because of this in our own app.

The element where use:inertia is used on can still have an on:click handler or an event forwarder.

Dispatch Inertia events on the HTML node (#00a4fa2)

This allows you to listen to Inertia event callbacks the Svelte way when using use:inertia.

<button
  use:inertia={{ method: 'PUT', href: '/posts' }}
  type="button"
  on:start={({ detail }) => console.log(detail.visit)}
  on:finish={({ detail }) => console.log(detail.visit)}
>
  Create post
</button>

All event callbacks are supported: on:cancel-token, on:before, on:start, on:progress, on:finish, on:cancel, on:success, and on:error. They also receive the same detail parameters as the Inertia event callbacks.

<Link />

Add as prop (#7ff652a)

You can now specify which HTML element the <Link /> component should render.

<Link as="a" href="/home">Home</Link>
<Link as="button" href="/home">Home</Link>

The as prop defaults to the a HTML element.

Remove duplicated logic (#7ff652a)

Previously the <Link /> component and use:inertia action had a bunch of duplicated code. Now all this logic only exists on the action. The <Link /> component uses the action under the hood. This will make it easy to maintain both.

Forward all Inertia callback events (#85d6704)

<Link
  as="button"
  type="button"
  href="/posts"
  method="PUT"
  on:start={({ detail }) => console.log(detail.visit)}
  on:finish={({ detail }) => console.log(detail.visit)}
>
  Create post
</Link>

[FluffyDiscord]

Really nice Svelte-y PR

[reinink]

@pedroborges Thanks so much for this. Are there any breaking changes here?

[reinink]

@pedroborges Hey I tested this and it seems to work, so I merged in it lol. Would be good to know if there are any breaking changes here. Love that you were able to use <svelte:element>.

Also, for the Link event callbacks, do these still won't work with return values, like we discussed in #237? I just tested this out, and returning false doesn't seem to cancel the event when using on:start:

<Link href="/users" on:before={() => false}>Users</Link>

Or am I doing this wrong?

This does seem to work — just not quite as nice:

<a href="/users" use:inertia={{ onBefore: () => false }}>Users</a>

[pedroborges]

Thanks so much for this. Are there any breaking changes here?

None that I can think of.

Love that you were able to use svelte:element.

This Svelte feature was only released a while ago. I'm glad the Svelte adapter can now have the as prop just as the other adapters 😄

Also, for the Link event callbacks, do these still won't work with return values, like we discussed in #237? I just tested this out, and returning false doesn't seem to cancel the event when using on:start:

I think this is one downside of this approach, I'll play with it and see if there's any work-around for it.