Skip to content

docs(vitePreprocess): ts is no longer preprocessed by default #974

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.

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

Merged
merged 3 commits into from
Sep 3, 2024
Merged
Changes from 2 commits
Commits
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
35 changes: 24 additions & 11 deletions docs/preprocess.md
Original file line number Diff line number Diff line change
Expand Up @@ -2,14 +2,14 @@

`vite-plugin-svelte` also exports Vite preprocessors to preprocess Svelte components using Vite's built-in transformers.

Compared to [`svelte-preprocess`](https://github.com/sveltejs/svelte-preprocess), Vite preprocessors share the same CSS configuration from the Vite config so you don't have to configure them twice. [`esbuild`](http://esbuild.github.io) is also used to transform TypeScript by default.
Compared to [`svelte-preprocess`](https://github.com/sveltejs/svelte-preprocess), Vite preprocessors share the same CSS configuration from the Vite config so you don't have to configure them twice. [`esbuild`](http://esbuild.github.io) can also be used to transform TypeScript.

However, `svelte-preprocess` does provide extra functionalities not available with Vite preprocessors, such as [template tag](https://github.com/sveltejs/svelte-preprocess#template-tag), [external files](https://github.com/sveltejs/svelte-preprocess#external-files), and [global styles](https://github.com/sveltejs/svelte-preprocess#global-style) ([though it's recommended to use import instead](./faq.md#where-should-i-put-my-global-styles)). If those features are required, you can still use `svelte-preprocess`, but make sure to turn off it's script and style preprocessing options.

## vitePreprocess

- **Type:** `{ script?: boolean, style?: boolean | InlineConfig | ResolvedConfig }`
- **Default:** `{ script: true, style: true }`
- **Default:** `{ script: false, style: true }`

A Svelte preprocessor that supports transforming TypeScript, PostCSS, SCSS, Less, Stylus, and SugarSS. These are transformed when the script or style tags have the respective `lang` attribute.

Expand All @@ -20,16 +20,29 @@ However, `svelte-preprocess` does provide extra functionalities not available wi
- SugarSS: `<style lang="sss">`

By default, PostCSS or LightningCSS ([if configured in Vite](https://vitejs.dev/config/shared-options.html#css-transformer)) is applied to all `<style>` tags.
If required, you can style transforming off by setting the `style` option to `false`. The `style` option also accepts Vite's `InlineConfig` and `ResolvedConfig` types for advanced usage.

If required, you can turn script or style transforming off by setting the `script` or `style` option to `false`. The `style` option also accepts Vite's `InlineConfig` and `ResolvedConfig` types for advanced usage.
> TypeScript is no longer preprocessed by default as Svelte 5 understands most syntax natively.
> If you use TypeScript features that emit code like enum, using , decorators or class declarations with visibility modifiers, you have to enable the script preprocessor manually.

**Example:**
### Examples

```js
// svelte.config.js
import { vitePreprocess } from '@sveltejs/vite-plugin-svelte';
#### default

export default {
preprocess: [vitePreprocess()]
};
```
```js
// svelte.config.js
import { vitePreprocess } from '@sveltejs/vite-plugin-svelte';
export default {
preprocess: [vitePreprocess()]
};
```

#### enable script preprocessing for advanced TypeScript syntax use

```js
// svelte.config.js
import { vitePreprocess } from '@sveltejs/vite-plugin-svelte';
export default {
preprocess: [vitePreprocess({ script: true })]
};
```