breaking: new options, deprecate svelteStrictMode

- add `svelteSelfCloseComponents` and `svelteSelfCloseElements` to specify whether or not empty elements/components should self-close. `svelteStrictMode` no longer has any effect on this behavior
- `svelteAllowShorthand` now takes precedence over `svelteStrictMode`, which no longer has any effect on that behavior
- `svelteStrictMode` is deprecated as future Svelte versions might coerce numbers coming from mustache tags inside strings into strings

closes #348
closes #284
closes #279
closes #238
related to #377

Author: dummdidumm

CHANGELOG.md

@@ -4,6 +4,8 @@
 
 -   (breaking) requires `prettier` version 3
 -   (breaking) requires node version 14 or higher
+-   (breaking) add `svelteSelfCloseComponents` and `svelteSelfCloseElements` to specify whether or not empty elements/components should self-close. `svelteStrictMode` no longer has any effect on this behavior
+-   (breaking) `svelteAllowShorthand` now takes precedence over `svelteStrictMode`, which no longer has any effect on that behavior
 
 ## 2.10.1
 

README.md

@@ -30,11 +30,13 @@ Install `prettier` and `prettier-plugin-svelte` as dev dependencies in your proj
 Then format your code using Prettier CLI. You may need to add `--plugin-search-dir=.`
 
 As a one-time run:
+
 ```
 npx prettier --write --plugin-search-dir=. ./**/*.html
 ```
 
 As part of your scripts in `package.json`:
+
 ```
 "format": "prettier --write --plugin-search-dir=. ./**/*.html"
 ```
@@ -43,7 +45,7 @@ If you want to customize some formatting behavior, see section "Options" below.
 
 ## Options
 
-``Configurations are optional``
+`Configurations are optional`
 
 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.
 
@@ -61,10 +63,15 @@ Format: join the keywords `options`, `scripts`, `markup`, `styles` with a `-` in
 
 ### Svelte Strict Mode
 
-More strict HTML syntax: less self-closed tags, quotes in attributes, no attribute shorthand (overrules `svelteAllowShorthand`).
+> Deprecated since 3.0.0. This option may be removed entirely in the future as quotes around mustache tags might be seen as coercing the value into a string in a future version of Svelte.
+
+More strict HTML syntax: Quotes in attributes.
+
+> In version 2 this overruled `svelteAllowShorthand`, which is no longer the case
 
 Example:
 
+<!-- prettier-ignore -->
 ```html
 <!-- svelteStrictMode: true -->
 <div foo="{bar}"></div>
@@ -83,6 +90,7 @@ Option to enable/disable component attribute shorthand if attribute name and exp
 
 Example:
 
+<!-- prettier-ignore -->
 ```html
 <!-- allowShorthand: true -->
 <input type="text" {value} />
@@ -95,6 +103,44 @@ Example:
 | ------- | --------------------------------- | ------------------------------ |
 | `true`  | `--svelte-allow-shorthand <bool>` | `svelteAllowShorthand: <bool>` |
 
+### 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
 
 > Deprecated since 2.5.0. Use Prettier 2.4.0 and [bracketSameLine](https://prettier.io/docs/en/options.html#bracket-line) instead.
@@ -103,6 +149,7 @@ Put the `>` of a multiline element on a new line. Roughly the Svelte equivalent
 
 Example:
 
+<!-- prettier-ignore -->
 ```html
 <!-- before formatting -->
 <span><div>foo</div><span>bar</span></span>
@@ -147,11 +194,11 @@ Whether or not to indent the code inside `<script>` and `<style>` tags in Svelte
 
 ```json
 {
-  "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
 }
 ```
 
@@ -162,12 +209,12 @@ There is a [Tailwind Prettier Plugin](https://github.com/tailwindlabs/prettier-p
 ```json5
 // .prettierrc
 {
-  // ..
-  "plugins": [
-    "prettier-plugin-svelte",
-    "prettier-plugin-tailwindcss" // MUST come last
-  ],
-  "pluginSearchDirs": false
+    // ..
+    plugins: [
+        'prettier-plugin-svelte',
+        'prettier-plugin-tailwindcss', // MUST come last
+    ],
+    pluginSearchDirs: false,
 }
 ```
 
@@ -178,8 +225,8 @@ Since we are using configuration overrides to handle svelte files, you might als
 ```json5
 // settings.json
 {
-  // ..
-  "prettier.documentSelectors": ["**/*.svelte"],
+    // ..
+    'prettier.documentSelectors': ['**/*.svelte'],
 }
 ```
 
@@ -189,12 +236,14 @@ Since we are using configuration overrides to handle svelte files, you might als
 
 If you are wondering why this code
 
+<!-- prettier-ignore -->
 ```html
 <span><span>assume very long text</span></span>
 ```
 
 becomes this
 
+<!-- prettier-ignore -->
 ```html
 <span
       ><span>assume very long text</span

src/options.ts

@@ -1,14 +1,15 @@
 import { ParserOptions as PrettierParserOptions, SupportOption } from 'prettier';
 
-export interface ParserOptions<T = any> extends PrettierParserOptions<T>, Partial<PluginOptions> {
-}
+export interface ParserOptions<T = any> extends PrettierParserOptions<T>, Partial<PluginOptions> {}
 
 export interface PluginOptions {
     svelteSortOrder: SortOrder;
     svelteStrictMode: boolean;
     svelteBracketNewLine: boolean;
     svelteAllowShorthand: boolean;
     svelteIndentScriptAndStyle: boolean;
+    svelteSelfCloseElements: SelfClose;
+    svelteSelfCloseComponents: SelfClose;
 }
 
 function makeChoice(choice: string) {
@@ -56,11 +57,32 @@ export const options: Record<keyof PluginOptions, SupportOption> = {
             makeChoice('styles-scripts-markup'),
         ],
     },
+    svelteSelfCloseElements: {
+        category: 'Svelte',
+        type: 'choice',
+        default: 'never',
+        description: 'Whether or not to self-close empty elements',
+        choices: [
+            { value: 'always', description: 'Always self-close empty elements' },
+            { value: 'never', description: 'Never self-close elements' },
+        ],
+    },
+    svelteSelfCloseComponents: {
+        category: 'Svelte',
+        type: 'choice',
+        default: 'always',
+        description: 'Whether or not to self-close empty components',
+        choices: [
+            { value: 'always', description: 'Always self-close empty components' },
+            { value: 'never', description: 'Never self-close components' },
+        ],
+    },
     svelteStrictMode: {
         category: 'Svelte',
         type: 'boolean',
         default: false,
-        description: 'More strict HTML syntax: self-closed tags, quotes in attributes',
+        description: 'More strict HTML syntax: Quotes in attributes',
+        deprecated: '3.0.0',
     },
     svelteBracketNewLine: {
         category: 'Svelte',
@@ -84,6 +106,8 @@ export const options: Record<keyof PluginOptions, SupportOption> = {
     },
 };
 
+export type SelfClose = 'auto' | 'always' | 'never';
+
 export type SortOrder =
     | 'options-scripts-markup-styles'
     | 'options-scripts-styles-markup'
@@ -124,7 +148,9 @@ export type SortOrderPart = 'scripts' | 'markup' | 'styles' | 'options';
 
 const sortOrderSeparator = '-';
 
-export function parseSortOrder(sortOrder: SortOrder = 'options-scripts-markup-styles'): SortOrderPart[] {
+export function parseSortOrder(
+    sortOrder: SortOrder = 'options-scripts-markup-styles',
+): SortOrderPart[] {
     if (sortOrder === 'none') {
         return [];
     }

src/print/helpers.ts

@@ -17,7 +17,7 @@ import {
     SlotTemplateNode,
     StyleNode,
     TitleNode,
-    WindowNode
+    WindowNode,
 } from './nodes';
 import { ParserOptions } from '../options';
 

src/print/index.ts

@@ -212,8 +212,15 @@ export function print(path: FastPath, options: ParserOptions, print: PrintFn): D
 
             const isSelfClosingTag =
                 isEmpty &&
-                (!options.svelteStrictMode ||
-                    node.type !== 'Element' ||
+                ((node.type === 'InlineComponent' &&
+                    options.svelteSelfCloseComponents === 'always') ||
+                    ((node.type === 'Element' ||
+                        node.type === 'Head' ||
+                        node.type === 'SlotTemplate' ||
+                        node.type === 'Title') &&
+                        options.svelteSelfCloseElements === 'always') ||
+                    node.type === 'Slot' ||
+                    node.type === 'Window' ||
                     selfClosingTags.indexOf(node.name) !== -1 ||
                     isDoctypeTag);
 
@@ -290,7 +297,7 @@ export function print(path: FastPath, options: ParserOptions, print: PrintFn): D
                     group([
                         possibleThisBinding,
                         ...attributes,
-                        hugStart
+                        hugStart && !isEmpty
                             ? ''
                             : !bracketSameLine && !isPreTagContent(path)
                             ? dedent(softline)
@@ -430,10 +437,10 @@ export function print(path: FastPath, options: ParserOptions, print: PrintFn): D
         }
         case 'Attribute': {
             if (isOrCanBeConvertedToShorthand(node)) {
-                if (options.svelteStrictMode) {
-                    return [node.name, '="{', node.name, '}"'];
-                } else if (options.svelteAllowShorthand) {
+                if (options.svelteAllowShorthand) {
                     return ['{', node.name, '}'];
+                } else if (options.svelteStrictMode) {
+                    return [node.name, '="{', node.name, '}"'];
                 } else {
                     return [node.name, '={', node.name, '}'];
                 }
@@ -613,8 +620,7 @@ export function print(path: FastPath, options: ParserOptions, print: PrintFn): D
                 node.name,
                 node.expression.type === 'Identifier' &&
                 node.expression.name === node.name &&
-                options.svelteAllowShorthand &&
-                !options.svelteStrictMode
+                options.svelteAllowShorthand
                     ? ''
                     : ['=', ...printJsExpression()],
             ];
@@ -624,8 +630,7 @@ export function print(path: FastPath, options: ParserOptions, print: PrintFn): D
                 node.name,
                 node.expression.type === 'Identifier' &&
                 node.expression.name === node.name &&
-                options.svelteAllowShorthand &&
-                !options.svelteStrictMode
+                options.svelteAllowShorthand
                     ? ''
                     : ['=', ...printJsExpression()],
             ];
@@ -637,10 +642,10 @@ export function print(path: FastPath, options: ParserOptions, print: PrintFn): D
             ];
 
             if (isOrCanBeConvertedToShorthand(node) || node.value === true) {
-                if (options.svelteStrictMode) {
-                    return [...prefix, '="{', node.name, '}"'];
-                } else if (options.svelteAllowShorthand) {
+                if (options.svelteAllowShorthand) {
                     return [...prefix];
+                } else if (options.svelteStrictMode) {
+                    return [...prefix, '="{', node.name, '}"'];
                 } else {
                     return [...prefix, '={', node.name, '}'];
                 }

test/formatting/index.ts

@@ -1,7 +1,7 @@
 import test from 'ava';
 import { readdirSync, readFileSync, existsSync } from 'fs';
 import { format } from 'prettier';
-import * as SveltePlugin from '../../src'
+import * as SveltePlugin from '../../src';
 
 let dirs = readdirSync('test/formatting/samples');
 const endsWithOnly = (f: string): boolean => f.endsWith('.only');

test/formatting/samples/attribute-with-linebreaks/input.html

@@ -5,4 +5,4 @@
     data-value={array.map((item) => {
         return item + 1
     })}
-/>
+></div>

test/formatting/samples/attribute-with-linebreaks/output.html

@@ -5,4 +5,4 @@
     data-value={array.map((item) => {
         return item + 1;
     })}
-/>
+></div>

test/formatting/samples/attribute-wrap-several/input.html

@@ -1 +1 @@
-<div id="x" class="y" title="A really long title" hidden on:click={do_something} draggable="false" data-my-prop />
+<div id="x" class="y" title="A really long title" hidden on:click={do_something} draggable="false" data-my-prop></div>

test/formatting/samples/attribute-wrap-several/output.html

@@ -6,4 +6,4 @@
     on:click={do_something}
     draggable="false"
     data-my-prop
-/>
+></div>

test/formatting/samples/collapse-attribute-shortand/input.html

@@ -1 +1 @@
-<div foo={foo} />
+<div foo={foo}></div>

test/formatting/samples/collapse-attribute-shortand/output.html

@@ -1 +1 @@
-<div {foo} />
+<div {foo}></div>

test/formatting/samples/empty-component-no-selfclose/input.html

@@ -0,0 +1 @@
+<Comp />

test/formatting/samples/empty-component-no-selfclose/options.json

@@ -0,0 +1,3 @@
+{
+    "svelteSelfCloseComponents": "never"
+}

test/formatting/samples/empty-component-no-selfclose/output.html

@@ -0,0 +1 @@
+<Comp></Comp>

test/formatting/samples/empty-element-selfclose/input.html

@@ -0,0 +1 @@
+<div></div>

test/formatting/samples/empty-element-selfclose/options.json

@@ -0,0 +1,3 @@
+{
+    "svelteSelfCloseElements": "always"
+}

test/formatting/samples/empty-element-selfclose/output.html

@@ -0,0 +1 @@
+<div />

test/formatting/samples/empty-element-whitespace/output.html

@@ -1 +1 @@
-<div />
+<div></div>

test/formatting/samples/empty-element/output.html

@@ -1 +1 @@
-<div />
+<div></div>

test/formatting/samples/prettier-ignore/output.html

@@ -9,4 +9,4 @@
     on:click={do_something}
     draggable="false"
     data-my-prop
-/>
+></div>