Update to Svelte 4

[aniplayIt]

Just a reminder to update the peer dependency to Svelte 4 to avoid incompatibility issues with the latest version

[stratosgear]

Yes, even the latest 1.0.4 release of svelte-french-toast (released just 9 hrs ago) still has a dependency on <4.0.0 svelte.

I get:

npm ERR! Could not resolve dependency:
npm ERR! peer svelte@"^3.57.0" from svelte-french-toast@1.0.4

when I try it with the latest svelte@4.0.0.

To be fair Svelte 4 was only released, today? yesterday? so let's not go crazy here.... :)

[kbrgl]

Noted. Thanks for the issue!

[kbrgl]

Not super sure what the protocol is re: bumping Svelte version. Does this mean Svelte French Toast also needs a (minor/major) version upgrade?

[lucasnad27]

This YouTube clip from the svelte society speaks about this very issue, as a maintainer of a library.

tldr; you should be able to support 4.0 without doing a major version bump, especially if none of the breaking changes affect your library.

Personally -- my usage of toast is quite simple, so I'm planning on upgrading to 4.0, ignoring the unmet dependency warnings. I'll complete a couple of smoke tests where I'm using toast. If I notice anything wonky with 4.x I'll be sure to file an issue, but I'm not expecting any issues to arise.

[lucasnad27]

FYI - I just upgraded my app to svelte4. FWIW, after a brief smoke test, my implementation of svelte-french-toast had no problems. I was primarily concerned about the breaking change re: global & local transitions.

[kbrgl]

@lucasnad27 Wonderful. Thank you—I will upgrade the major version.

[kbrgl]

Just published 1.1.0 onto NPM. Let me know if you face issues. Going to leave this issue open for a bit for discussion.

[aniplayIt]

Hi @kbrgl, after upgrading everyting to the latest version (and switching from eslint-plugin-svelte3 to eslint-plugin-svelte) now I get this error from svelte-check. I'm using a custom toast here, other "standard" toasts work fine:

Argument of type 'typeof WebSocketToaster__SvelteComponent_' is not assignable to parameter of type 'Renderable'.
  Type 'typeof WebSocketToaster__SvelteComponent_' is not assignable to type 'typeof SvelteComponent'.
    Types of construct signatures are incompatible.
      Type 'new (options: ComponentConstructorOptions<{ toast: any; }>) => WebSocketToaster__SvelteComponent_' is not assignable to type 'new <Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any>(options: ComponentConstructorOptions<Props>) => SvelteComponent<...>'.
        Types of parameters 'options' and 'options' are incompatible.
          Type 'ComponentConstructorOptions<Props>' is not assignable to type 'ComponentConstructorOptions<{ toast: any; }>'.
            Type 'Props' is not assignable to type '{ toast: any; }'.
              Property 'toast' is missing in type 'Record<string, any>' but required in type '{ toast: any; }'. 
        if (webSocketMessage.action !== WebSocketAction.IGNORE) {
                toast(WebSocketToaster);
        }

[aniplayIt]

Also having this warning [vite-plugin-svelte] /node_modules/svelte-french-toast/dist/components/Toaster.svelte:23:0 A11y: <div> with mouseenter, mouseleave handlers must have an ARIA role

[knd775]

Also having this warning [vite-plugin-svelte] /node_modules/svelte-french-toast/dist/components/Toaster.svelte:23:0 A11y: <div> with mouseenter, mouseleave handlers must have an ARIA role

Yep, this a11y issue needs to be addressed in order to claim svelte 4 support

[kbrgl]

Missed that, my apologies. Feel free to downgrade for now. I’ll work on fixing these over the weekend.

[kbrgl]

Both issues are now fixed on the kabir/fixes branch. I’ll publish a canary soon.

[aniplayIt]

Hello @kbrgl any update about the npm release? Sorry for bothering you but this is the last piece blocking me from upgrading to svelte 4 :D

[juslin03]

We're waiting for the update.

[alanxp]

waiting for the update bro

[kbrgl]

It’s out! You can now update to v1.2.0. Please file an issue if you have any problems using it.