Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Update Svelte integration v6 docs #10002

Merged
merged 2 commits into from
Nov 15, 2024
Merged

Update Svelte integration v6 docs #10002

Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
a048d52
Update Svelte integration v6 docs
bluwy Nov 13, 2024
8c1011f
Merge branch 'main' into svelte-v6
sarah11918 Nov 15, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
32 changes: 8 additions & 24 deletions src/content/docs/en/guides/integrations-guide/svelte.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,7 @@ i18nReady: true
import PackageManagerTabs from '~/components/tabs/PackageManagerTabs.astro';
import Since from '~/components/Since.astro';

This **[Astro integration][astro-integration]** enables server-side rendering and client-side hydration for your [Svelte](https://svelte.dev/) components. It supports Svelte 3, 4, and 5 (experimental).
This **[Astro integration][astro-integration]** enables server-side rendering and client-side hydration for your [Svelte](https://svelte.dev/) 5 components. For Svelte 3 and 4 support, install `@astrojs/svelte@5` instead.
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

For Svelte 3 and 4 support, install @astrojs/svelte@5 instead

Just calling attention to it because it looks weird. Svelte 5 is the default. If you want 3 and install svelte@**5** -- just checking this isn't a typo or something!

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

It's referring to install @astrojs/svelte, which is an integration. And @astrojs/svelte v5 supports Svelte 3 and 4 only.

Svelte 5 support is added on @astrojs/svelte v6, which I didn't mention v6 here since it will be the latest.

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yup, figured this out in the other PR. What a pain, but understood!

Would be much nicer if our numbers aligned with theirs!

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Would be much nicer if our numbers aligned with theirs!

Easy, just don't ship @astrojs/svelte v6 and update v5 until Svelte v6 drops. :trollface:


## Installation

Expand Down Expand Up @@ -103,44 +103,28 @@ To use your first Svelte component in Astro, head to our [UI framework documenta

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
Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Note there are now no default options set by Astro. It falls back to the behaviour in @sveltejs/vite-plugin-svelte by default now.

Which means the notes about vitePreprocess are no longer relevant, the user will have to always add that themselves if they use scss/stylus etc. Since astro add svelte has been adding those for users by default for a long time, I don't think this will break a lot of folks. I've noted this in the core PR changeset

You can set options either by passing them to the `svelte` integration in `astro.config.mjs` or in `svelte.config.js`. The options in `astro.config.mjs` will take precedence over the options in `svelte.config.js` if both are present:

This integration passes the following default options to the Svelte compiler:

```js
const defaultOptions = {
emitCss: true,
compilerOptions: { dev: isDev, hydratable: true },
preprocess: vitePreprocess(),
};
```

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 [`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 title="astro.config.mjs" "preprocess: []"
```js title="astro.config.mjs" "extensions: ['.svelte']"
import { defineConfig } from 'astro/config';
import svelte from '@astrojs/svelte';

export default defineConfig({
integrations: [svelte({ preprocess: [] })],
integrations: [svelte({ extensions: ['.svelte'] })],
});
```

```js title="svelte.config.js"
export default {
preprocess: [],
extensions: ['.svelte'],
};
```

## Intellisense for TypeScript
## Preprocessors

<Since v="2.0.0" pkg="@astrojs/svelte" />

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.
If you're using SCSS or Stylus in your Svelte files, you can create a `svelte.config.js` file so that they are preprocessed by Svelte, and the Svelte IDE extension can correctly parse the Svelte files.
Comment on lines -143 to +127
Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I removed references to TypeScript here as Svelte 5 now handles TypeScript by default even without vitePreprocess.


```js title="svelte.config.js"
import { vitePreprocess } from '@astrojs/svelte';
Expand All @@ -150,7 +134,7 @@ export default {
};
```

This config file will be automatically added for you when you run `astro add svelte`.
This config file will be automatically added for you when you run `astro add svelte`. See the [`@sveltejs/vite-plugin-svelte` docs](https://github.com/sveltejs/vite-plugin-svelte/blob/HEAD/docs/preprocess.md) for more details about `vitePreprocess`.

[astro-integration]: /en/guides/integrations-guide/

Expand Down
Loading