From 51629ec7bd4aeaa3cf165db2a2841ebafd0bd118 Mon Sep 17 00:00:00 2001 From: Scott Wu Date: Wed, 1 Apr 2026 01:05:52 +0800 Subject: [PATCH] docs: update references to `vite-plugin-svelte` (#18027) ### Before submitting the PR, please make sure you do the following - [ ] 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 - [ ] Prefix your PR title with `feat:`, `fix:`, `chore:`, or `docs:`. - [ ] This message body should clearly illustrate what problems it solves. - [ ] Ideally, include a test that fails without this PR but passes with it. - [ ] If this PR changes code within `packages/svelte/src`, add a changeset (`npx changeset`). ### Tests and linting - [ ] Run the tests with `pnpm test` and lint the project with `pnpm lint` --------- Co-authored-by: Rich Harris Co-authored-by: Rich Harris --- documentation/docs/07-misc/03-typescript.md | 30 +++++---------------- 1 file changed, 7 insertions(+), 23 deletions(-) diff --git a/documentation/docs/07-misc/03-typescript.md b/documentation/docs/07-misc/03-typescript.md index 899849473c..b7f49f9c6f 100644 --- a/documentation/docs/07-misc/03-typescript.md +++ b/documentation/docs/07-misc/03-typescript.md @@ -40,22 +40,9 @@ If you want to use one of these features, you need to setup up a `script` prepro To use non-type-only TypeScript features within Svelte components, you need to add a preprocessor that will turn TypeScript into JavaScript. -```ts -/// file: svelte.config.js -// @noErrors -import { vitePreprocess } from '@sveltejs/vite-plugin-svelte'; +### Using Vite -const config = { - // Note the additional `{ script: true }` - preprocess: vitePreprocess({ script: true }) -}; - -export default config; -``` - -### Using SvelteKit or Vite - -The easiest way to get started is scaffolding a new SvelteKit project by typing `npx sv create`, following the prompts and choosing the TypeScript option. +If you're using SvelteKit, or Vite _without_ SvelteKit, you can use `vitePreprocess` from `@sveltejs/vite-plugin-svelte` in your config file: ```ts /// file: svelte.config.js @@ -63,19 +50,16 @@ The easiest way to get started is scaffolding a new SvelteKit project by typing import { vitePreprocess } from '@sveltejs/vite-plugin-svelte'; const config = { - preprocess: vitePreprocess() + // Note the additional `{ script: true }` + preprocess: vitePreprocess({ script: true }) }; export default config; ``` -If you don't need or want all the features SvelteKit has to offer, you can scaffold a Svelte-flavoured Vite project instead by typing `npm create vite@latest` and selecting the `svelte-ts` option. - -In both cases, a `svelte.config.js` with `vitePreprocess` will be added. Vite/SvelteKit will read from this config file. - -### Other build tools +### Using other build tools -If you're using tools like Rollup or Webpack instead, install their respective Svelte plugins. For Rollup that's [rollup-plugin-svelte](https://github.com/sveltejs/rollup-plugin-svelte) and for Webpack that's [svelte-loader](https://github.com/sveltejs/svelte-loader). For both, you need to install `typescript` and `svelte-preprocess` and add the preprocessor to the plugin config (see the respective READMEs for more info). +If you're using tools like Rollup (via [rollup-plugin-svelte](https://github.com/sveltejs/rollup-plugin-svelte)) or Webpack (via [svelte-loader](https://github.com/sveltejs/svelte-loader)) instead, install `typescript` and `svelte-preprocess` and add the preprocessor to the plugin config. See the respective plugin READMEs for more info. > [!NOTE] If you're starting a new project, we recommend using SvelteKit or Vite instead @@ -85,7 +69,7 @@ When using TypeScript, make sure your `tsconfig.json` is setup correctly. - Use a [`target`](https://www.typescriptlang.org/tsconfig/#target) of at least `ES2015` so classes are not compiled to functions - Set [`verbatimModuleSyntax`](https://www.typescriptlang.org/tsconfig/#verbatimModuleSyntax) to `true` so that imports are left as-is -- Set [`isolatedModules`](https://www.typescriptlang.org/tsconfig/#isolatedModules) to `true` so that each file is looked at in isolation. TypeScript has a few features which require cross-file analysis and compilation, which the Svelte compiler and tooling like Vite don't do. +- Set [`isolatedModules`](https://www.typescriptlang.org/tsconfig/#isolatedModules) to `true` so that each file is looked at in isolation. TypeScript has a few features which require cross-file analysis and compilation, which the Svelte compiler and tooling like Vite don't do. ## Typing `$props`