Prep for Svelte 5

[dustypomerleau]

Thanks to Mark, and everyone helping make Clerk work well with Sveltekit.

I was hoping to create a tracking issue and figure out what needs to happen to make clerk-sveltekit work with Svelte 5. When I tried Svelte 5 in my own project, components that wrap ClerkLoaded were no longer present. The code for ClerkLoaded is just:

{#if $clerk}
    <slot clerk={$clerk} />
{/if}

so it seems like the if is evaluating to false and the slot is not shown.

Since Svelte 5 is introducing the $state rune, presumably we would need to hold the Clerk instance in $state, rather than a Writable store. Based on the docs, I expected Svelte 5 not to break Svelte 4 code, but stores might be an exception.

Anyone have ideas?

[markjaquith]

Interesting! I've only just started tentatively using Svelte 5 for some new projects. I do believe that Svelte 4 is meant to work in Svelte 5, so it might be worth investigating this problem and filing an issue with Svelte with the findings.

[dustypomerleau]

Ah, I think we're getting closer. The issue is not the store, but the fact that <slot> is deprecated in Svelte 5. It looks like we need to replace the <slot> with a combination of #snippet + @render tags (snippet docs). I'll try to work on it in a fork when I get some time.

[markjaquith]

As a first step, I've allowed Svelte 5 as a peer dependency: f0d832f

I really thought that <slot /> would continue to work in Svelte 5 for components that aren't in Runes mode... I'll have to play with that to figure out what's going on.

[dustypomerleau]

sveltejs/svelte#11348 landed yesterday. I think it's definitely relevant, as I was seeing that error from $$props assignment in clerk-sveltekit. Next release might help.

[markjaquith]

I just did this and it worked fine. Integration tests passed.

diff --git a/package.json b/package.json
index 9d6d9c5..29984a2 100644
--- a/package.json
+++ b/package.json
@@ -186,7 +186,7 @@
     "prettier-plugin-svelte": "^2.8.0",
     "prettier-plugin-tailwindcss": "^0.5.6",
     "publint": "^0.2.4",
-    "svelte": "^4.0.0",
+    "svelte": "5.0.0-next.120",
     "svelte-check": "^3.5.2",
     "tailwindcss": "^3.3.5",
     "tslib": "^2.6.2",

[dustypomerleau]

That's great news! Hopefully it was the $$props assignments and will be smooth sailing now. I'll close this until Svelte 5 is released formally, as it looks like a full migration to S5 is a moving target at the moment. Thanks for putting some time into this.