Add Svelte TypeScript support

[punyflash]

This PR adds complete TypeScript support for Svelte adapter. Been tested by me on multiple projects and contributors from @westacks/inertia-svelte. Works perfectly for Svelte 3 and 4.

TypeScript support based on #1614, however:

• Adapter bundled using SvelteKit to compile types for Svelte TS components (required if you don't use TS in your project)
• There is no cjs files, since Svelte compiler requires ESM modules anyway.

Also includes fixes to SSR CSS rendering to prevent yanking on initial page load: #1761 (will not be needed in Svelte 5)

[punyflash]

I wrote about this in PR description. Refer to #1760, #1761. This will need to be reworked on release of Svelte 5

[james-em]

@reinink Appears to be well though and working fine. Any chance to have this merged soon?

This will also fix these 2 issues : #1760, #1761.

[reinink]

@punyflash Thanks so much for putting this together! Going to do my best to get this reviewed myself and by @pedroborges (he knows more about Svelte than I and has helped with this adapter in the past).

@jakobbouchard would love your 👀 on this one too if you have time, no pressure though!

@james-em thanks for reviewing already 👍

[punyflash]

Ok, I'll try to keep it up to date, but hopefully it not get staled as well

[jamesst20]

@pedroborges @jakobbouchard

Any news about this? I would hate to see this stale again :(

I have generated d.ts files that can be imported in any project from this branch in the mean time.
(Only edit I made was adding export type VisitOptions = VisitOptions to useForm.d.ts because I needed it.

inertia-types.zip

I have been using it for the past week without any issue.

[punyflash]

@jamesst20, as for now, you may use package @westacks/inertia-svelte instead of @inertiajs/svelte. I've been using and maintaining it a few months for now and works perfectly. There is also Svelte 5 support in next release branch. As soon as it gets merged, I'll work on Svelte 5 support there as well

[jamesst20]

@jamesst20, as for now, you may use package @westacks/inertia-svelte instead of @inertiajs/svelte. I've been using and maintaining it a few months for now and works perfectly. There is also Svelte 5 support in next release branch. As soon as it gets merged, I'll work on Svelte 5 support there as well

Thanks, I agree it appears the official repository is not well maintained when we take a look at how many valid issues/prs are being issued and just left in the dark. It's a shame considering how great it could get over time with active development.

However it seems @westacks/inertia-svelte wasn't forked from this repository which is a bummer for us as an organization as we can't tell how far behind/ahead it is from the official repository. It's likely only ahead but there is no way to tell. By the way @james-em is my organization account. I didn't realize I was signed on this account at the time.

[jakobbouchard]

I didn't have any time to test it, but from going through the diffs, it seems to be fine! I wish I could've helped more, but I no longer work in web development, so I don't really have my environments setup anymore and not a lot of free time either.

[reinink]

@punyflash Hey just did a bunch of testing on this PR, and things seem to work well! I also made a bunch of small formatting tweaks.

Still waiting on @pedroborges to have a look at this PR, but if he doesn't have a chance within the next couple days I think I'll just merge it in.

Thanks again for all your work on this!

[reinink]

@jakobbouchard Hey I noticed that your original PR didn't use SvelteKit to compile types — was there any particular reason for that?

[jamesst20]

We can improve a little the typing here using the same types that React uses.
See here https://github.com/jamesst20/inertia/blob/main/packages/svelte5/src/lib/useForm.svelte.ts#L19

I also was able to get rid of all ts-ignore

[jamesst20]

I believe setStore should not include the attributes or methods of the form. Should be typed to the data.
In my branch I did

  setStore(data: TForm): void
  setStore(key: keyof TForm, value?: FormDataConvertible): void
  defaults(): this
  defaults(fields: Partial<TForm>): this
  defaults(field?: keyof TForm, value?: FormDataConvertible): this

[jamesst20]

Looking internally, it appears event can be undefined too

[jamesst20]

@jakobbouchard Hey I noticed that your original PR didn't use SvelteKit to compile types — was there any particular reason for that?

It seems he wrote a an ESBuild script by hand https://github.com/inertiajs/inertia/pull/1614/files#diff-e1d807461eb96d0bbba189479a9a91e7fa45dad230985c34563619bcb6d19e01R1 instead of using Sveltekit which is the documented approach. When you run npm create svelte you can pick the option to build a library and it setups Sveltekit.

He probably did that to follow what was done in other adapters like react https://github.com/inertiajs/inertia/blob/master/packages/react/build.js

Doing so is more likely to cause pain later. SvelteKit is recommending to bundle ESM instead of CJS

[reinink]

@james-em Hey! Just merged this PR in, but before we tag the release would you mind submitting your recommended changes as a new PR (or multiple PRs if that makes more sense)?

@punyflash Huge thanks for all your efforts here! 💪

[jamesst20]

@james-em Hey! Just merged this PR in, but before we tag the release would you mind submitting your recommended changes as a new PR (or multiple PRs if that makes more sense)?

@punyflash Huge thanks for all your efforts here! 💪

Will do as quickly as possible! Thanks!

[reinink]

@james-em Thanks buddy!