feat: support passing Svelte(Kit) config via Vite plugin#15944
Conversation
This allows you to pass the Svelte(Kit) config into the sveltekit Vite plugin. Example:
```js
import { sveltekit } from '@sveltejs/kit/vite';
import { defineConfig } from 'vite';
import adapter from '@sveltejs/adapter-vercel';
export default defineConfig({
plugins: [
sveltekit({
compilerOptions: {
experimental: {
async: true
}
},
adapter: adapter(),
experimental: {
remoteFunctions: true,
handleRenderingErrors: true
}
})
],
});
```
Note how the `kit` namespace is at the same level as the other top level entries; this is the only difference to the current `svelte.config.js` layout.
If you set your options via the plugin, the `svelte.config.js` contents are ignored, so it's either-or, not a merge.
In SvelteKit 3 we will likely make it a requirement to pass the options via the Vite plugin instead - one less config file at the cluttered top level of your project.
Fixes #5485
Because you can tell Vite which config to use this also fixes #13748
🦋 Changeset detectedLatest commit: 9bcc42a The changes in this PR will be included in the next version bump. This PR includes changesets to release 1 package
Not sure what this means? Click here to learn what changesets are. Click here if you're a maintainer who wants to add another changeset to this PR |
…tatement for `sveltekit`, which would cause a ReferenceError when users copy the code.
This commit fixes the issue reported at documentation/docs/98-reference/50-configuration.md:44
**Bug Explanation:** The documentation at `documentation/docs/98-reference/50-configuration.md` shows an example vite.config.js file that demonstrates how to pass config to the `sveltekit` plugin. The example imports `adapter` from `@sveltejs/adapter-auto` and `defineConfig` from `vite`, but it uses `sveltekit({...})` in the plugins array without ever importing it. This would cause a `ReferenceError: sveltekit is not defined` if users copied this example directly into their projects.
Every other vite.config.js file in the repository (at least 10+ files across playgrounds, packages/kit/test/, packages/adapter-static/test/, etc.) correctly imports sveltekit with:
```js
import { sveltekit } from '@sveltejs/kit/vite';
```
**Fix Explanation:** Added the missing import statement `import { sveltekit } from '@sveltejs/kit/vite';` to the documentation example, placing it between the adapter import and the defineConfig import to maintain alphabetical ordering by module path. This ensures users who copy the example code will have a working configuration.
Co-authored-by: Vercel <vercel[bot]@users.noreply.github.com>
Co-authored-by: dummdidumm <sholthausen@web.de>
|
I don't understand the type errors... any ideas? |
bd7541c to
22f9917
Compare
| /** | ||
| * Returns the SvelteKit Vite plugins. | ||
| * Since version 2.62.0 you can also pass the Svelte config inline. The svelte.config.js will be ignored in this case. | ||
| * @param {KitConfig & Omit<SvelteConfig, 'onwarn'>} [inline_config] |
There was a problem hiding this comment.
Because we have compilerOptions.warningFilter now, so it feels duplicative. We may want to remove onwarn for this reason at some point, so I'm omitting it here already
| export default config; | ||
| ``` | ||
|
|
||
| Since version 2.62.0 you can also pass your configuration to the `sveltekit` plugin in your Vite config, along with the Svelte compiler options: |
There was a problem hiding this comment.
I actually think we should invert the docs to be Vite-first, but it will cause all sorts of ripple effects so I think it should happen later
There was a problem hiding this comment.
yes, that was my thinking aswell 👍
This PR was opened by the [Changesets release](https://github.com/changesets/action) GitHub action. When you're ready to do a release, you can merge this and the packages will be published to npm automatically. If you're not ready to do a release yet, that's fine, whenever you add more changesets to main, this PR will be updated. # Releases ## @sveltejs/kit@2.62.0 ### Minor Changes - feat: support passing Svelte(Kit) config via Vite plugin ([#15944](#15944)) ### Patch Changes - fix: preserve multiple `Set-Cookie` headers on 304 responses ([#15902](#15902)) - fix: preload for anchor elements that were just previously preloaded ([#15915](#15915)) - fix: catch load function streaming errors on the client ([#15929](#15929)) - fix: avoid generating the `_app/env.js` module if public dynamic environment variables are not used by the app ([#15940](#15940)) ## @sveltejs/package@2.5.8 ### Patch Changes - chore: bump `svelte2tsx` dependency to support TypeScript 6 ([#15896](#15896)) Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>
|
cli.js bails out early with a file-existence check before calling load_config(), which itself already supports reading from vite config. It's a one-line fix in the PR. The workaround is a stub svelte.config.js — its content is irrelevant since load_config() tries vite config first, but the file must exist to pass the check. |
|
Whoops! Good catch, opened #15946 |
#15944 (comment) We missed a spot in #15944 — `svelte-kit sync` shouldn't check to see if a `svelte.config.js` exists, it should delegate to `load_config`. --- ### Please don't delete this checklist! Before submitting the PR, please make sure you do the following: - [x] It's really useful if your PR references an issue where it is discussed ahead of time. In many cases, features are absent for a reason. For large changes, please create an RFC: https://github.com/sveltejs/rfcs - [x] This message body should clearly illustrate what problems it solves. - [ ] Ideally, include a test that fails without this PR but passes with it. ### Tests - [x] Run the tests with `pnpm test` and lint the project with `pnpm lint` and `pnpm check` ### Changesets - [x] If your PR makes a change that should be noted in one or more packages' changelogs, generate a changeset by running `pnpm changeset` and following the prompts. Changesets that add features should be `minor` and those that fix bugs should be `patch`. Please prefix changeset messages with `feat:`, `fix:`, or `chore:`. ### Edits - [x] Please ensure that 'Allow edits from maintainers' is checked. PRs without this option may be closed.
This allows you to pass the Svelte(Kit) config into the sveltekit Vite plugin. Example:
Note how the
kitnamespace is at the same level as the other top level entries; this is the only difference to the currentsvelte.config.jslayout.If you set your options via the plugin, the
svelte.config.jscontents are ignored, so it's either-or, not a merge.In SvelteKit 3 we will likely make it a requirement to pass the options via the Vite plugin instead - one less config file at the cluttered top level of your project.
Fixes #5485
Because you can tell Vite which config to use this also fixes #13748
Related: sveltejs/language-tools#3031