Skip to content

Commit

Permalink
docs(vitePreprocess): ts is no longer preprocessed by default (#974)
Browse files Browse the repository at this point in the history
* docs(vitePreprocess): change wording to show that script is no longer preprocessed by default

* docs(vitePreprocess): more details around new script default

* Apply suggestions from code review

Co-authored-by: Simon H <5968653+dummdidumm@users.noreply.github.com>

---------

Co-authored-by: Simon H <5968653+dummdidumm@users.noreply.github.com>
  • Loading branch information
dominikg and dummdidumm authored Sep 3, 2024
1 parent 18d53e3 commit f06beb3
Showing 1 changed file with 24 additions and 11 deletions.
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 turn 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`, `accessors`, decorators or class declarations with visibility modifiers), you have to enable the script preprocessor by setting the `script` option to `true`.

**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 })]
};
```

0 comments on commit f06beb3

Please sign in to comment.