Improve Svelte README (#5923)

* First stylistic pass

* Rework for x/o instead of and

* fix typo

Co-authored-by: Sarah Rainsberger <sarah@rainsberger.ca>

* Add changeset

Co-authored-by: Sarah Rainsberger <sarah@rainsberger.ca>
This commit is contained in:
Chris Swithinbank 2023-01-21 10:55:19 +01:00 committed by GitHub
parent f27bb3d79f
commit f32bf07c19
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
2 changed files with 15 additions and 11 deletions

View file

@ -0,0 +1,5 @@
---
"@astrojs/svelte": patch
---
Improve README

View file

@ -74,11 +74,11 @@ This package is maintained by Astro's Core team. You're welcome to submit an iss
## Options
This integration is powered by `@sveltejs/vite-plugin-svelte`. To customize the Svelte compiler, options can be provided to the integration. See the `@sveltejs/vite-plugin-svelte` [docs](https://github.com/sveltejs/vite-plugin-svelte/blob/HEAD/docs/config.md) for more details.
This integration is powered by `@sveltejs/vite-plugin-svelte`. To customize the Svelte compiler, options can be provided to the integration. See the [`@sveltejs/vite-plugin-svelte` docs](https://github.com/sveltejs/vite-plugin-svelte/blob/HEAD/docs/config.md) for more details.
### Default options
A few of the default options passed to the Svelte compiler are required to build properly for Astro and cannot be overridden.
This integration passes the following default options to the Svelte compiler:
```js
const defaultOptions = {
@ -88,12 +88,14 @@ const defaultOptions = {
};
```
The `emitCss`, `compilerOptions.dev`, and `compilerOptions.hydratable` cannot be overridden.
These `emitCss`, `compilerOptions.dev`, and `compilerOptions.hydratable` values are required to build properly for Astro and cannot be overridden.
Providing your own `preprocess` options **will** override the defaults - make sure to enable the preprocessor flags needed for your project. For example,
Providing your own `preprocess` options **will** override the [`vitePreprocess()`](https://github.com/sveltejs/vite-plugin-svelte/blob/HEAD/docs/preprocess.md) default. Make sure to enable the preprocessor flags needed for your project.
You can set options either by passing them to the `svelte` integration in `astro.config.mjs` or in `svelte.config.js`. Either of these would override the default `preprocess` setting:
```js
// astro.config.js
// astro.config.mjs
import svelte from '@astrojs/svelte';
export default {
@ -101,8 +103,6 @@ export default {
};
```
and
```js
// svelte.config.js
export default {
@ -110,13 +110,12 @@ export default {
};
```
Will override the default `preprocess` option. You can read the [`vitePreprocess` docs](https://github.com/sveltejs/vite-plugin-svelte/blob/HEAD/docs/preprocess.md) for more information of how it works.
## Intellisense for TypeScript
If you're using a preprocessor like TypeScript or SCSS in your Svelte files, you can create a `svelte.config.js` file with:
If you're using a preprocessor like TypeScript or SCSS in your Svelte files, you can create a `svelte.config.js` file so that the Svelte IDE extension can correctly parse the Svelte files.
```js
// svelte.config.js
import { vitePreprocess } from '@astrojs/svelte';
export default {
@ -124,4 +123,4 @@ export default {
};
```
So the Svelte IDE extension can correctly parse the Svelte files. This config file is added by default when you run `astro add svelte`.
This config file will be automatically added for you when you run `astro add svelte`.