Bring `@sveltejs/kit/experimental/vite` out of experimental

[benmccann]

Describe the problem

Right now SvelteKit asks users to pass Vite configuration via the kit.vite option in svelte.config.js. This was originally nice because it means less config files and gives SvelteKit a bit more control. However, it's also non-standard. Tools like Vitest and Storybook look for a vite.config.js to read configuration from and it would be nice to support those tools out-of-the-box

Describe the proposed solution

#5094 creates a SvelteKit plugin that can be imported in a vite.config.js. If a vite.config.js is created, it is expected that Vite config is no longer specified in svelte.config.js, but in vite.config.js.

This new feature can be used like:

// vite.config.js
import { sveltekit } from '@sveltejs/kit/experimental/vite';

/** @type {import('vite').UserConfig} */
const config = {
  plugins: [sveltekit()]
};

export default config;

Cleanup items

If we decide that we like this approach (and I think we probably will) then it would make sense to make some changes:

• Make vite.config.js mandatory
• Add it to project templates
• Get rid of config.kit.vite
• Move @sveltejs/kit/experimental/vite to @sveltejs/kit/vite or @sveltejs/vite-plugin-sveltekit
• Update contributing guide with new code locations
• Add vitest option to create-svelte
• More controversially, we might want to get rid of svelte-kit dev/build/preview in favour of using vite dev/build/preview. This would mean that SvelteKit itself would no longer have a dependency on Vite, other than in the plugin; apps themselves would need to have a devDependency on vite
  • Consequently, figure out how to handle versions. It's likely that SvelteKit will expect a particular version of Vite, which might mean it needs to become a peerDependency if it's no longer a dependency (though if it's possible to avoid depending on a specific version, that would be ideal)

Alternatives considered

No response

Importance

nice to have

Additional Information

CC people who might be interested in this: @nickbreaton @JessicaSachs @IanVS @brittneypostma

Please feel free to share with others. I haven't used Storybook, Vitest, Histoire, etc. before so would love any help in testing! And would love tips on things we might want to document for the community to setup these tools. Whether there's something that needs to be improved or everything works, I'd love to hear about it either way!

[brittneypostma]

I think the storybook config is more of a pain because of Webpack config, not vite and SvelteKit. I can check this out though. Thanks for letting us know.

[dummdidumm]

Does this mean that svelte.config.js is no longer used/required then? Asking because of the implications for language tools

[IanVS]

Storybook looks for a vite.config.js file when it is being bootstrapped into a project, to determine whether it should default to the webpack or vite builder. I've been trying to find a good way to detect sveltekit projects and default to the vite builder, since svelte.config.js is not a reliable indicator, I'm told. The vite builder itself doesn't read from any config file by default, so this change shouldn't cause any issues for us.

I think the storybook config is more of a pain because of Webpack config...

@brittneypostma can you explain a bit more what you mean by this?

[benmccann]

Does this mean that svelte.config.js is no longer used/required then? Asking because of the implications for language tools

svelte.config.js will still be used and required. It just won't hold the Vite config. You'll also need a vite.config.js alongside it

I've been trying to find a good way to detect sveltekit projects and default to the vite builder, since svelte.config.js is not a reliable indicator, I'm told

svelte.config.js could be used by a Svelte project that is not a SvelteKit project. You could load the file and look for kit to be contained within the first-level configuration. However, that would not be as good as this solution because you'd be missing Vite config that SvelteKit sets up automatically such as path aliases. This changes moves that setup to occur within Vite plugins so that configuration will be made available by using the vite.config.js whereas it's not easy to get at today

[brittneypostma]

Storybook looks for a vite.config.js file when it is being bootstrapped into a project, to determine whether it should default to the webpack or vite builder. I've been trying to find a good way to detect sveltekit projects and default to the vite builder, since svelte.config.js is not a reliable indicator, I'm told. The vite builder itself doesn't read from any config file by default, so this change shouldn't cause any issues for us.

I think the storybook config is more of a pain because of Webpack config...

@brittneypostma can you explain a bit more what you mean by this?

When installing storybook it uses Webpack and has it's own config file that needs to be set up and configured. That was the biggest pain for me in setting it up.

[IanVS]

When installing storybook it uses Webpack

Cool, yeah that's what we could avoid if sveltekit projects required a vite.config.js file as described here. Or if I implement another strategy as recommended above.

[benmccann]

@sveltejs/kit/experimental/vite has been released in @sveltejs/kit version 1.0.0-next.353.

I tested with a simple Vitest project, but would love to have it tested in real projects as well as with other tools in the ecosystem like Storybook, etc.