prettier-plugin-svelte - npm Package Compare versions

Comparing version 2.10.1 to 3.0.0

package.json

 {
     "name": "prettier-plugin-svelte",
-    "version": "2.10.1",
+    "version": "3.0.0",
     "description": "Svelte plugin for prettier",
@@ -8,4 +8,12 @@ "main": "plugin.js",
         "plugin.js",
-        "plugin.js.map"
+        "plugin.js.map",
+        "index.d.ts"
     ],
+    "types": "./index.d.ts",
+    "exports": {
+        ".": {
+            "types": "./index.d.ts",
+            "default": "./plugin.js"
+        }
+    },
     "scripts": {
@@ -32,20 +40,18 @@ "build": "rollup -c",
     "devDependencies": {
-        "@prettier/plugin-pug": "^1.16.0",
         "@rollup/plugin-commonjs": "14.0.0",
         "@rollup/plugin-node-resolve": "11.0.1",
-        "@types/node": "^10.12.18",
-        "@types/prettier": "^2.4.1",
+        "@types/node": "^14.0.0",
         "ava": "3.15.0",
-        "prettier": "^2.7.1",
+        "prettier": "^3.0.0",
         "rollup": "2.36.0",
         "rollup-plugin-typescript": "1.0.1",
         "svelte": "^3.57.0",
-        "ts-node": "^9.1.1",
-        "tslib": "^2.0.3",
-        "typescript": "4.1.3"
+        "ts-node": "^10.1.1",
+        "tslib": "^2.6.0",
+        "typescript": "5.1.3"
     },
     "peerDependencies": {
-        "prettier": "^1.16.4 || ^2.0.0",
+        "prettier": "^3.0.0",
         "svelte": "^3.2.0 || ^4.0.0-next.0"
     }
 }

README.md

@@ -12,8 +12,15 @@ # Prettier for Svelte 3 components
 
-## How to use in VS Code and Atom
+## How to use in your IDE
 
-This plugin comes with [Svelte for VS Code](https://github.com/sveltejs/language-tools) and [Svelte for Atom](https://github.com/UnwrittenFun/svelte-atom) so just install the extension for your favorite editor and enjoy.
+This plugin comes bundled with the [Svelte for VS Code](https://github.com/sveltejs/language-tools). If you only format through the editor, you therefore don't need to do anything in addition.
 
-If you want to customize some formatting behavior, see section "Options" below.
+If you want to
 
+-   customize some formatting behavior
+-   use the official VS Code Prettier extension to format Svelte files instead
+-   use a different editor
+-   also want to use the command line to format
+
+then you need to install the plugin and setup a Prettier configuration file as described in the next section.
+
 Some of the extensions let you define options through extension-specific configuration. These settings are ignored however if there's any configuration file (`.prettierrc` for example) present.
@@ -23,2 +30,4 @@
 
+First install Prettier and the plugin as a dev depenendency:
+
 ```bash
@@ -28,18 +37,44 @@ npm i --save-dev prettier-plugin-svelte prettier
 
+Then create a `.prettierrc` file to tell Prettier about the plugin:
+
+```json
+{
+    "plugins": ["prettier-plugin-svelte"]
+}
+```
+
+If you're using `prettier-plugin-svelte` version 2 with `pnpm` and have problems getting it to work, you may need to use a `.prettierrc.cjs` file instead to point Prettier to the exact location of the plugin using `require.resolve`:
+
+```js
+module.exports = {
+    pluginSearchDirs: false, // you can omit this when using Prettier version 3
+    plugins: [require('prettier-plugin-svelte')],
+    overrides: [{ files: '*.svelte', options: { parser: 'svelte' } }],
+
+    // Other prettier options here
+};
+```
+
+> Do NOT use the above with version 3 of the plugin
+
+If you want to customize some formatting behavior, see section "Options" below.
+
 ## How to use (CLI)
 
-Install `prettier` and `prettier-plugin-svelte` as dev dependencies in your project.
+Format your code using Prettier CLI.
 
-Then format your code using Prettier CLI. You may need to add `--plugin-search-dir=.`
+As a one-time run:
 
-As a one-time run:
 ```
-npx prettier --write --plugin-search-dir=. ./**/*.html
+npx prettier --write --plugin prettier-plugin-svelte .
 ```
 
 As part of your scripts in `package.json`:
+
 ```
-"format": "prettier --write --plugin-search-dir=. ./**/*.html"
+"format": "prettier --write  --plugin prettier-plugin-svelte ."
 ```
 
+> There's currently [an issue with Prettier 3](https://github.com/prettier/prettier/issues/15079) which requires the seemingly redundant `--plugin` setting
+
 If you want to customize some formatting behavior, see section "Options" below.
@@ -49,3 +84,3 @@
 
-``Configurations are optional``
+`Configurations are optional`
 
@@ -68,6 +103,9 @@ Make a `.prettierrc` file in your project directory and add your preferred [options](https://prettier.io/docs/en/options.html) to [configure Prettier](https://prettier.io/docs/en/configuration.html). When using Prettier through the CLI, you can also pass options through CLI flags, but a `.prettierrc` file is recommended.
 
-More strict HTML syntax: less self-closed tags, quotes in attributes, no attribute shorthand (overrules `svelteAllowShorthand`).
+More strict HTML syntax: Quotes in attributes and no self-closing DOM elements (except void elements).
 
+> In version 2 this overruled `svelteAllowShorthand`, which is no longer the case.
+
 Example:
 
+<!-- prettier-ignore -->
 ```html
@@ -91,2 +129,3 @@ <!-- svelteStrictMode: true -->
 
+<!-- prettier-ignore -->
 ```html
@@ -104,2 +143,40 @@ <!-- allowShorthand: true -->
 
+### Svelte Self Closing Elements
+
+Whether or not empty elements (such as `div`s) should be self-closed or not.
+
+Example:
+
+<!-- prettier-ignore -->
+```html
+<!-- svelteSelfCloseElements: "always" -->
+<div />
+
+<!-- svelteSelfCloseElements: "never" -->
+<div></div>
+```
+
+| Default   | CLI Override                         | API Override                       |
+| --------- | ------------------------------------ | ---------------------------------- | -------- |
+| `"never"` | `--svelte-self-close-elements <str>` | `svelteSelfCloseElements: "always" | "never"` |
+
+### Svelte Self Closing Components
+
+Whether or not empty components should be self-closed or not.
+
+Example:
+
+<!-- prettier-ignore -->
+```html
+<!-- svelteSelfCloseComponents: "always" -->
+<Component />
+
+<!-- svelteSelfCloseComponents: "never" -->
+<Component></Component>
+```
+
+| Default    | CLI Override                           | API Override                         |
+| ---------- | -------------------------------------- | ------------------------------------ | -------- |
+| `"always"` | `--svelte-self-close-components <str>` | `svelteSelfCloseComponents: "always" | "never"` |
+
 ### Svelte Bracket New Line
@@ -113,2 +190,3 @@
 
+<!-- prettier-ignore -->
 ```html
@@ -158,7 +236,7 @@ <!-- before formatting -->
 {
-  "svelteSortOrder" : "options-styles-scripts-markup",
-  "svelteStrictMode": true,
-  "svelteBracketNewLine": false,
-  "svelteAllowShorthand": false,
-  "svelteIndentScriptAndStyle": false
+    "svelteSortOrder": "options-styles-scripts-markup",
+    "svelteStrictMode": true,
+    "svelteBracketNewLine": false,
+    "svelteAllowShorthand": false,
+    "svelteIndentScriptAndStyle": false
 }
@@ -174,8 +252,8 @@ ```
 {
-  // ..
-  "plugins": [
-    "prettier-plugin-svelte",
-    "prettier-plugin-tailwindcss" // MUST come last
-  ],
-  "pluginSearchDirs": false
+    // ..
+    plugins: [
+        'prettier-plugin-svelte',
+        'prettier-plugin-tailwindcss', // MUST come last
+    ],
+    pluginSearchDirs: false, // you can omit this when using Prettier version 3
 }
@@ -186,2 +264,12 @@ ```
 
+Since we are using configuration overrides to handle svelte files, you might also have to configure the [prettier.documentselectors](https://github.com/prettier/prettier-vscode#prettierdocumentselectors) in your VS Code `settings.json`, to tell Prettier extension to handle svelte files, like this:
+
+```json5
+// settings.json
+{
+    // ..
+    'prettier.documentSelectors': ['**/*.svelte'],
+}
+```
+
 ## FAQ
@@ -193,2 +281,3 @@
 
+<!-- prettier-ignore -->
 ```html
@@ -200,2 +289,3 @@ <span><span>assume very long text</span></span>
 
+<!-- prettier-ignore -->
 ```html
@@ -209,1 +299,19 @@ <span
 it's because of whitespsace 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).
+
+### Which versions are compatibly with which Prettier version?
+
+`prettier-plugin-svelte` v2 is compatible with Prettier v2 and incompatible with Prettier v3.
+`prettier-plugin-svelte` v3 is compatible with Prettier v3 and incompatible with lower Prettier versions.
+
+### How to migrate from version 2 to 3?
+
+Version 3 contains the following breaking changes:
+
+-   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)
+-   `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
+-   Some deprecated `svelteSortOrder` options were removed, see the the options section above for which values are valid for that options
+
+Version 3 of this plugin requires Prettier version 3, it won't work with lower versions. Prettier version 3 contains some changes to how it loads plugins which may require you to adjust your configuration file:
+
+-   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`. When invoking Prettier from the command line, you currently need to pass `--plugin prettier-plugin-svelte` in order to format Svelte files [due to a bug in Prettier](https://github.com/prettier/prettier/issues/15079)
+-   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

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

High entropy strings

Supply chain risk

Contains high entropy strings. This could be a sign of encrypted data, leaked secrets or obfuscated code.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

1393109

increased by419.78%

Dev dependency count

11

decreased by-15.38%

Number of package files

6

increased by20%

Lines of code

3452

increased by60.56%

Number of lines in readme file

304

increased by55.1%

Worsened metrics

Number of low supply chain risk alerts

4

increased by100%

No dependency changes