Skip to content

Commit 81f8f0d

Browse files
jrmajordummdidumm
andauthored
chore: drop support for svelte 3 and 4 (#461)
* drop support for svelte <5 * Update README.md * Update README.md * update readme * Update README.md --------- Co-authored-by: Simon H <[email protected]>
1 parent 7177a94 commit 81f8f0d

File tree

5 files changed

+131
-210
lines changed

5 files changed

+131
-210
lines changed

README.md

Lines changed: 8 additions & 48 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,5 @@
1+
> This documentation is for `prettier-plugin-svelte` version 4 which only works with Svelte 5. See [this branch](https://github.com/sveltejs/prettier-plugin-svelte/tree/version-3) for documentation of previous versions.
2+
13
# Prettier for Svelte components
24

35
Format your Svelte components using Prettier.
@@ -26,6 +28,7 @@ Installing the plugin as a package allows:
2628

2729
### Compatibility
2830

31+
- `prettier-plugin-svelte@4` only works with `prettier@3`
2932
- `prettier-plugin-svelte@3` only works with `prettier@3`
3033
- `prettier-plugin-svelte@2` only works with `prettier@2`
3134

@@ -56,8 +59,7 @@ If you want to customize some formatting behavior, see section [Options](#option
5659
Format your code using the Prettier CLI.
5760

5861
```bash
59-
npx prettier --write . # v3
60-
npx prettier --write --plugin prettier-plugin-svelte . # v2
62+
npx prettier --write .
6163
```
6264

6365
As part of your scripts in `package.json`:
@@ -67,8 +69,7 @@ As part of your scripts in `package.json`:
6769
{
6870
// ..
6971
"scripts": {
70-
"format": "prettier --write .", // v3
71-
"format": "prettier --write --plugin prettier-plugin-svelte ." // v2
72+
"format": "prettier --write ."
7273
}
7374
}
7475
```
@@ -105,9 +106,7 @@ Example:
105106

106107
<!-- prettier-ignore -->
107108
```html
108-
<!-- svelteStrictMode: true (Svelte 3 and 4) -->
109-
<div foo="{bar}"></div>
110-
<!-- svelteStrictMode: true (Svelte 5) -->
109+
<!-- svelteStrictMode: true -->
111110
<div foo={bar}></div>
112111

113112
<!-- svelteStrictMode: false -->
@@ -230,36 +229,9 @@ Usage in the browser is semi-supported. You can import the plugin from `prettier
230229

231230
## Migration
232231

233-
```diff
234-
# package.json
235-
- "format": "prettier --plugin-search-dir . --write ."
236-
+ "format": "prettier --write ."
237-
```
238-
239-
```diff
240-
# package.json
241-
- "prettier": "^2.8.8",
242-
+ "prettier": "^3.1.0",
243-
- "prettier-plugin-svelte": "^2.10.1",
244-
+ "prettier-plugin-svelte": "^3.1.0",
245-
```
246-
247-
```diff
248-
# .prettierrc
249-
- "pluginSearchDirs": ["."],
250-
+ "plugins": ["prettier-plugin-svelte"]
251-
```
252-
253-
Version 3 contains the following breaking changes:
232+
> For migration to `prettier-plugin-svelte@3` [see here](https://github.com/sveltejs/prettier-plugin-svelte/tree/version-3?tab=readme-ov-file#migration).
254233
255-
- Whether or not empty elements/components should self-close is now left to the user - in other words, if you write `<div />` or `<Component />` that stays as is, and so does `<div></div>`/`<Component></Component>`. If `svelteStrictMode` is turned on, it will still only allow `<div></div>` notation for elements (but it will leave your components alone)
256-
- `svelteAllowShorthand` now takes precedence over `svelteStrictMode`, which no longer has any effect on that behavior. Set `svelteAllowShorthand` to `false` to get back the v2 behavior
257-
- Some deprecated `svelteSortOrder` options were removed, see the the options section above for which values are valid for that options
258-
259-
Version 3 of this plugin only works with Prettier version 3. Prettier version 3 contains some changes to how it loads plugins which may require you to adjust your configuration file:
260-
261-
- Prettier no longer searches for plugins in the directory automatically, you need to tell Prettier specifically which plugins to use. This means you need to add `"plugins": ["prettier-plugin-svelte"]` to your config if you haven't already. Also remove the deprecated option `pluginSearchDirs`.
262-
- Prettier loads plugins from the plugin array differently. If you have used `require.resolve("prettier-plugin-svelte")` in your `.prettierrc.cjs` to tell Prettier where to find the plugin, you may need to remove that and just write `"prettier-plugin-svelte"` instead
234+
Upgrade to Svelte 5 before upgrading to `prettier-plugin-svelte@4`, as it doesn't support older Svelte versions.
263235

264236
## FAQ
265237

@@ -283,15 +255,3 @@ becomes this
283255
```
284256

285257
it's because of whitespace sensitivity. For inline elements (`span`, `a`, etc) it makes a difference when rendered if there's a space (or newline) between them. Since we don't know if your slot inside your Svelte component is surrounded by inline elements, Svelte components are treated as such, too. You can adjust this whitespace sensitivity through [this setting](https://prettier.io/docs/en/options.html#html-whitespace-sensitivity). You can read more about HTML whitespace sensitivity [here](https://prettier.io/blog/2018/11/07/1.15.0.html#whitespace-sensitive-formatting).
286-
287-
### Version 2 does not work in `pnpm`
288-
289-
You may need to use a `.prettierrc.cjs` file instead to point Prettier to the exact location of the plugin using `require.resolve`:
290-
291-
```js
292-
module.exports = {
293-
pluginSearchDirs: false,
294-
plugins: [require('prettier-plugin-svelte')],
295-
overrides: [{ files: '*.svelte', options: { parser: 'svelte' } }],
296-
};
297-
```

0 commit comments

Comments
 (0)