Feat/svelte Add support for svelte and sveltekit

[mmailaender]

Add support for svelte and sveltekit

• there is a README that explains how to use the SvelteKit version
• all playwright tests passed for test-sveltekit
• updated routeMatcher to use newest version of path-to-regexp (affected also nextjs) e.g. createRouteMatcher(["/product(.*)"]) becomes createRouteMatcher(["/product{*rest}"])

I have tested the SvelteKit version as part of the test-sveltekit project, and it's working there. I also want to test it as part of my real project to find more edge cases and test the Svelte version more thoroughly. But I want to create the pull request now because I think it's in a good state for a discussion, and you can share your thoughts.
I especially think it makes sense to discuss the API as it's not a 100% match, and it is also influenced by the fact that convex-svelte already diverges from the React client API.
Also, I noticed that it could make sense to invest some time in deduplicating code for shared code used by React and Svelte (Mutex, routeMatcher, Playwright, etc.).

And one small question: During debugging, I recognized that I must create the client with verbose: true to activate verbose logging. Did you intend to do it via a prop rather than an env variable? I experience the env variable as quite useful for activating and deactivating verbose logging quite easily, especially if I want to activate it for a short period on deployed instances.

Happy to hear your thoughts and feedback!

---

Solves convex-auth for svelte/sveltekit #89

---

By submitting this pull request, I confirm that you can use, modify, copy, and redistribute this contribution, under the terms of your choice.

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Updated (UTC)
convex-auth-docs	✅ Ready (Inspect)	Visit Preview	May 12, 2025 1:55pm

[mmailaender]

@thomasballinger, could you please review and share your feedback? 🙂

[thomasballinger]

Whoa, great work here! This will take a bit to review, but it's a good direction. I'll get back to you by tomorrow night with direction here.

Have you tried this in one of your own projects yet?

[mmailaender]

Whoa, great work here! This will take a bit to review, but it's a good direction. I'll get back to you by tomorrow night with direction here.

Have you tried this in one of your own projects yet?

Yes, I've embedded it in my SvelteKit app, and it works well so far.
(But it's currently installed only via symlink (@convex-dev/auth": "file:../../convex-auth") as installing it as a tarball ("@convex-dev/auth": "file:node_modules_local/convex-dev-auth-0.0.82.tgz") created some problems for me that I was not yet able to resolve - maybe you know what to do?). => Have identified the issue and working on a solution (The import paths are not correctly resolving while packaging)

I also have a Figma plugin that runs as a plain Svelte app, and I plan to integrate it there soon.

[mmailaender]

Packaging and installing seem to be a bigger problem.

Current Error:

Sveltekit specific imports in the sveltekit package

import { invalidateAll, replaceState } from "$app/navigation";
import { env } from "$env/dynamic/private"

throwing errors after being packaged into a tarball and installed.

But if I install the library via a Symlink, it works fine. As far as I have researched, the problem appears to be that if we bundle our .svelte.ts files into .js, then importing '$app/' and '$env/' will break, because these modules only exist within the SvelteKit build pipeline.
One solution seems to be to keep .svelte and .ts files as sources in the published package and let the bundler handle the job on the user side. The src folder is already included in the package, but it appears we also need to make some adjustments to the package.json and the tsconfig.json / tsconfig.svelte.json / tsconfig.sveltekit.json files, to get it working. Unfortunately, I'm not particularly fond of bundlers, and the last hours haven't yielded success. Do you have any knowledge that might help on this side? @thomasballinger

[thomasballinger]

Yes I can manage this bit! This matches my understanding, that .svelte code can't be bundled. That's fine, it's alright that the packaging process will look different for the svelte-specific bits here. We'll want this to be a separate entry point anyway.

It may be easiest to create a new package for the Svelte auth stuff (which we can package more traditionally for a Svelte library, more similar to https://github.com/get-convex/convex-svelte with lib etc.) and we expose the parts of convex-auth that are necessary in that code. I haven't had a change to look into this yet, hoping to by tomorrow morning. But without looking at the bundling issues specifically that's my bet for the smoothest path forward: using Convex Auth with Svelte would require installing two packages, @convex-dev/auth and @convex-dev/svelte-auth.