SvelteKit migration?

[ByteMyBriefs]

Hi all,

Does anyone have any experience migrating a Svelte kit project to wxt? I know that wxt has templates for vanilla Svelte, but I cannot find much guidance on how things should be adapted with a Svelte kit project specifically.

My biggest questions are:

1. How do I migrate to using the entrypoints folder when SvelteKit expects the files to be in the src/routes folder?
2. When doing the above, do I move all my src/* files to the root level of the entrypoints folder (e.g., app.html, hooks.client.ts, etc.)?

If any one has any guidance on these issues, please let me know. A screenshot of my src/ folder is copied below.

Thanks!

[aklinker1]

I'm not familiar with svelte/svelte kit, but you can customize the directories to match your existing project.

export default defineConfig({
  srcDir: "src",
  entrypointsDir: "pages", // resolved relative to `srcDir`, so this would be "src/pages"
});

However, WXT requires HTML files for entrypoints, so you probably need to keep entrypointsDir: "entrypoints", then create multiple HTML files that link to the relative pages. That said, you probably want a single HTML file, and use the routes as components... I don't know how to do that with Svelte.

Maybe you could use this library? https://github.com/mefechoel/svelte-navigator/tree/main/example/custom-hash-history

The important difference with SPA in extensions is that you can't use path based routing, because you can only load a single HTML file, and you can't change the actual URL. So usually you need to use hash-based routing, where the path is apart of the hash instead of the URL's path.

Here's a real extension's URL, this is 1password.