breaking: remove svelteStrictMode option (#462)

Svelte 5 no longer needs this option:
- quoting is decided by prettier completely as there's no two ways of doing the same anymore
- more strict closing tag behavior will mean we also have no two way of doing the same here, too, soon

Author: jrmajor

README.md

@@ -94,29 +94,6 @@ Format: join the keywords `options`, `scripts`, `markup`, `styles` with a `-` in
 
 > The `options` order option only exists since version 2. If you use version 1 of `prettier-plugin-svelte`, omit that option (so for example only write `scripts-markup-styles`).
 
-### Svelte Strict Mode
-
-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.
-
-> In Svelte 5, attributes are never quoted, because this will mean "stringify this attribute value" in a future Svelte version
-
-Example:
-
-<!-- prettier-ignore -->
-```html
-<!-- svelteStrictMode: true -->
-<div foo={bar}></div>
-
-<!-- svelteStrictMode: false -->
-<div foo={bar} />
-```
-
-| Default | CLI Override                  | API Override               |
-| ------- | ----------------------------- | -------------------------- |
-| `false` | `--svelte-strict-mode <bool>` | `svelteStrictMode: <bool>` |
-
 ### Svelte Allow Shorthand
 
 Option to enable/disable component attribute shorthand if attribute name and expression are same.
@@ -190,7 +167,6 @@ 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
@@ -233,6 +209,8 @@ Usage in the browser is semi-supported. You can import the plugin from `prettier
 
 Upgrade to Svelte 5 before upgrading to `prettier-plugin-svelte@4`, as it doesn't support older Svelte versions.
 
+`svelteStrictMode` option has been removed. Attributes are now never quoted, because this will mean "stringify this attribute value" in a future Svelte version.
+
 ## FAQ
 
 ### Why is the closing or opening tag (`>` or `<`) hugging the inner tag or text?

index.d.ts

@@ -2,7 +2,6 @@ import { Config } from 'prettier';
 
 export interface PluginConfig {
     svelteSortOrder?: SortOrder;
-    svelteStrictMode?: boolean;
     svelteBracketNewLine?: boolean;
     svelteAllowShorthand?: boolean;
     svelteIndentScriptAndStyle?: boolean;

src/embed.ts

@@ -77,15 +77,7 @@ export function embed(path: AstPath, _options: Options) {
     // check the parent to see if we are inside an expression that should be embedded.
     const parent: Node = path.getParentNode();
     const printJsExpression = () =>
-        (parent as any).expression
-            ? printJS(
-                  parent,
-                  (options.svelteStrictMode && !options._svelte_is5Plus) ?? false,
-                  false,
-                  false,
-                  'expression',
-              )
-            : undefined;
+        (parent as any).expression ? printJS(parent, false, false, false, 'expression') : undefined;
     const printSvelteBlockJS = (name: string) => printJS(parent, false, true, false, name);
 
     switch (parent.type) {
@@ -116,13 +108,7 @@ export function embed(path: AstPath, _options: Options) {
             }
             break;
         case 'Element':
-            printJS(
-                parent,
-                (options.svelteStrictMode && !options._svelte_is5Plus) ?? false,
-                false,
-                false,
-                'tag',
-            );
+            printJS(parent, false, false, false, 'tag');
             break;
         case 'MustacheTag':
             printJS(parent, isInsideQuotedAttribute(path, options), false, false, 'expression');

src/index.ts

@@ -9,7 +9,6 @@ import { ParserOptions } from './options';
 
 const babelParser = prettierPluginBabel.parsers.babel;
 const typescriptParser = prettierPluginBabel.parsers['babel-ts']; // TODO use TypeScript parser in next major?
-const isSvelte5Plus = Number(VERSION.split('.')[0]) >= 5;
 
 function locStart(node: any) {
     return node.start;
@@ -56,9 +55,7 @@ export const parsers: Record<string, Parser> = {
             // inside markdown), the originalText is not updated after preprocessing.
             // Therefore we do it ourselves here.
             options.originalText = text;
-            // Only Svelte 5 can have TS in the template
-            options._svelte_ts = isSvelte5Plus && result.isTypescript;
-            options._svelte_is5Plus = isSvelte5Plus;
+            options._svelte_ts = result.isTypescript;
             return text;
         },
         locStart,

src/options.ts

@@ -4,14 +4,6 @@ import { SortOrder, PluginConfig } from '..';
 export interface ParserOptions<T = any> extends PrettierParserOptions<T>, Partial<PluginConfig> {
     _svelte_ts?: boolean;
     _svelte_asFunction?: boolean;
-    /**
-     * Used for
-     * - deciding what quote behavior to use in the printer:
-     *   A future version of Svelte treats quoted expressions as strings, so never use quotes in that case.
-     *   Since Svelte 5 does still treat them equally, it's safer to remove quotes in all cases and in a future
-     *   version of this plugin instead leave it up to the user to decide.
-     */
-    _svelte_is5Plus?: boolean;
 }
 
 function makeChoice(choice: string) {
@@ -53,13 +45,6 @@ export const options: Record<keyof PluginConfig, SupportOption> = {
         ],
     },
     // todo: remove in v4
-    svelteStrictMode: {
-        category: 'Svelte',
-        type: 'boolean',
-        default: false,
-        description: 'More strict HTML syntax: Quotes in attributes, no self-closing DOM tags',
-    },
-    // todo: remove in v4
     svelteBracketNewLine: {
         category: 'Svelte',
         type: 'boolean',

src/print/index.ts

@@ -88,8 +88,7 @@ export function print(path: AstPath, options: ParserOptions, print: PrintFn): Do
         return printTopLevelParts(n, options, path, print);
     }
 
-    const [open, close] =
-        options.svelteStrictMode && !options._svelte_is5Plus ? ['"{', '}"'] : ['{', '}'];
+    const [open, close] = ['{', '}'];
     const printJsExpression = () => [open, printJS(path, print, 'expression'), close];
     const node = n as Node;
 
@@ -212,7 +211,7 @@ export function print(path: AstPath, options: ParserOptions, print: PrintFn): Do
 
             const isSelfClosingTag =
                 isEmpty &&
-                ((((node.type === 'Element' && !options.svelteStrictMode) ||
+                (((node.type === 'Element' ||
                     node.type === 'Head' ||
                     node.type === 'InlineComponent' ||
                     node.type === 'Slot' ||
@@ -446,9 +445,7 @@ export function print(path: AstPath, options: ParserOptions, print: PrintFn): Do
                     return [node.name];
                 }
 
-                const quotes =
-                    !isLoneMustacheTag(node.value) ||
-                    ((options.svelteStrictMode && !options._svelte_is5Plus) ?? false);
+                const quotes = !isLoneMustacheTag(node.value);
                 const attrNodeValue = printAttributeNodeValue(path, print, quotes, node);
                 if (quotes) {
                     return [node.name, '=', '"', attrNodeValue, '"'];
@@ -605,7 +602,6 @@ export function print(path: AstPath, options: ParserOptions, print: PrintFn): Do
         case 'PendingBlock':
         case 'CatchBlock':
             return printSvelteBlockChildren(path, print, options);
-        // Svelte 5 only
         case 'SnippetBlock': {
             const snippet = ['{#snippet ', printJS(path, print, 'expression')];
             snippet.push('}', printSvelteBlockChildren(path, print, options), '{/snippet}');
@@ -652,9 +648,7 @@ export function print(path: AstPath, options: ParserOptions, print: PrintFn): Do
                     return [...prefix, `=${open}`, node.name, close];
                 }
             } else {
-                const quotes =
-                    !isLoneMustacheTag(node.value) ||
-                    ((options.svelteStrictMode && !options._svelte_is5Plus) ?? false);
+                const quotes = !isLoneMustacheTag(node.value);
                 const attrNodeValue = printAttributeNodeValue(path, print, quotes, node);
                 if (quotes) {
                     return [...prefix, '=', '"', attrNodeValue, '"'];
@@ -721,7 +715,6 @@ export function print(path: AstPath, options: ParserOptions, print: PrintFn): Do
             return ['animate:', node.name, node.expression ? ['=', ...printJsExpression()] : ''];
         case 'RawMustacheTag':
             return ['{@html ', printJS(path, print, 'expression'), '}'];
-        // Svelte 5 only
         case 'RenderTag': {
             const render = ['{@render ', printJS(path, print, 'expression'), '}'];
             return render;

src/print/node-helpers.ts

@@ -535,8 +535,7 @@ export function isInsideQuotedAttribute(path: AstPath, options: ParserOptions):
     return stack.some(
         (node) =>
             (node.type === 'Attribute' || node.type === 'StyleDirective') &&
-            (!isLoneMustacheTag(node.value) ||
-                (options.svelteStrictMode && !options._svelte_is5Plus)),
+            !isLoneMustacheTag(node.value),
     );
 }
 

test/formatting/index.ts

@@ -4,8 +4,6 @@ import { format } from 'prettier';
 import { VERSION } from 'svelte/compiler';
 import * as SveltePlugin from '../../src';
 
-const isSvelte5Plus = Number(VERSION.split('.')[0]) >= 5;
-
 let dirs = readdirSync('test/formatting/samples');
 const printerFilesHaveOnly = readdirSync('test/printer/samples').some(
     (f) => f.endsWith('.only.html') || f.endsWith('.only.md'),
@@ -29,9 +27,6 @@ for (const dir of dirs) {
     ).replace(/\r?\n/g, '\n');
     const options = readOptions(`test/formatting/samples/${dir}/options.json`);
 
-    // Tests attribute quoting changes, which are different in Svelte 5
-    if (dir.endsWith('strict-mode-true') && isSvelte5Plus) continue;
-
     test(`formatting: ${dir}`, async (t) => {
         let onTestCompleted;
 

test/printer/samples/attribute-quoted.html renamed to test/formatting/samples/attribute-remove-quotes/input.html

@@ -1,21 +1,25 @@
-<svelte:component this="{foo}" />
+<input value="{foo}" />
+<input value={foo} />
+<input bind:value="{foo}" />
+<input bind:value={foo} />
+<input class:value="{foo}" />
+<input class:value={foo} />
+<input style:value="{foo}" />
+<input style:value={foo} />
 
+<svelte:component this="{foo}" />
 <div style="width: {width}px"></div>
-
 <div class:awesome="{isOk}"></div>
-
 <div class="asd {otherclass + 'b'}"></div>
-
 <input bind:value="{fooValue}" on:change="{onChange}" />
-
 <a use:link="{linkValues + 'asd'}">Link</a>
-
 <a href="{linkValues + 'asd'}">Link</a>
-
 <button on:click="{() => console.log('hi')}">hi</button>
-
 <div in:asd="{foo + 'bar'}" out:asd="{foo + 'bar'}"></div>
-
 <div transistion:asd="{foo + 'bar'}"></div>
-
 <div animate:asd="{foo + 'bar'}"></div>
+
+<div />
+<div></div>
+<Component />
+<Component></Component>

test/formatting/samples/attribute-remove-quotes/output.html

@@ -0,0 +1,25 @@
+<input value={foo} />
+<input value={foo} />
+<input bind:value={foo} />
+<input bind:value={foo} />
+<input class:value={foo} />
+<input class:value={foo} />
+<input style:value={foo} />
+<input style:value={foo} />
+
+<svelte:component this={foo} />
+<div style="width: {width}px"></div>
+<div class:awesome={isOk}></div>
+<div class="asd {otherclass + 'b'}"></div>
+<input bind:value={fooValue} on:change={onChange} />
+<a use:link={linkValues + "asd"}>Link</a>
+<a href={linkValues + "asd"}>Link</a>
+<button on:click={() => console.log("hi")}>hi</button>
+<div in:asd={foo + "bar"} out:asd={foo + "bar"}></div>
+<div transistion:asd={foo + "bar"}></div>
+<div animate:asd={foo + "bar"}></div>
+
+<div />
+<div></div>
+<Component />
+<Component></Component>

test/formatting/samples/strict-mode-false/input.html renamed to test/formatting/samples/attribute-shorthand/input.html

@@ -12,17 +12,3 @@
 <input style:value />
 <input style:value={value} />
 <input style:value="{value}" />
-
-<input value="{foo}" />
-<input value={foo} />
-<input bind:value="{foo}" />
-<input bind:value={foo} />
-<input class:value="{foo}" />
-<input class:value={foo} />
-<input style:value="{foo}" />
-<input style:value={foo} />
-
-<div />
-<div></div>
-<Component />
-<Component></Component>

test/formatting/samples/strict-mode-false/output.html renamed to test/formatting/samples/attribute-shorthand/output.html

@@ -12,17 +12,3 @@
 <input style:value />
 <input style:value />
 <input style:value />
-
-<input value={foo} />
-<input value={foo} />
-<input bind:value={foo} />
-<input bind:value={foo} />
-<input class:value={foo} />
-<input class:value={foo} />
-<input style:value={foo} />
-<input style:value={foo} />
-
-<div />
-<div></div>
-<Component />
-<Component></Component>

test/formatting/samples/strict-mode-true/input.html

@@ -4,8 +4,6 @@ import { format } from 'prettier';
 import { VERSION } from 'svelte/compiler';
 import * as SveltePlugin from '../../src';
 
-const isSvelte5Plus = Number(VERSION.split('.')[0]) >= 5;
-
 let files = readdirSync('test/printer/samples').filter(
     (name) => name.endsWith('.html') || name.endsWith('.md'),
 );
@@ -27,9 +25,6 @@ for (const file of files) {
         `test/printer/samples/${file.replace('.only', '').replace(`.${ending}`, '.options.json')}`,
     );
 
-    // Tests attribute quoting changes, which are different in Svelte 5
-    if (file.endsWith('attribute-quoted.html') && isSvelte5Plus) continue;
-
     test(`printer: ${file.slice(0, file.length - `.${ending}`.length)}`, async (t) => {
         const actualOutput = await format(input, {
             parser: ending === 'html' ? 'svelte' : 'markdown',