(feat) support const tag (#273)

Fixes #272

Also update package-lock.json for npm 8

Author: dummdidumm

CHANGELOG.md

@@ -1,5 +1,9 @@
 # prettier-plugin-svelte changelog
 
+## 2.6.0 (Unreleased)
+
+* (feat) Support `@const` tag ([#272](https://github.com/sveltejs/prettier-plugin-svelte/issues/272))
+
 ## 2.5.1
 
 * (fix) Better handling of destructured values with defaults in `{#each}` and `{#await}` blocks ([#269](https://github.com/sveltejs/prettier-plugin-svelte/issues/269))

package-lock.json

@@ -37,7 +37,7 @@
         "prettier": "^2.4.1",
         "rollup": "2.36.0",
         "rollup-plugin-typescript": "1.0.1",
-        "svelte": "^3.38.2",
+        "svelte": "^3.46.0",
         "ts-node": "^9.1.1",
         "tslib": "^2.0.3",
         "typescript": "4.1.3"

package.json

@@ -2,7 +2,7 @@ import { Doc, doc, FastPath, ParserOptions } from 'prettier';
 import { getText } from './lib/getText';
 import { snippedTagContentAttribute } from './lib/snipTagContent';
 import { PrintFn } from './print';
-import { isLine, trimRight } from './print/doc-helpers';
+import { isLine, removeParentheses, trimRight } from './print/doc-helpers';
 import {
     getAttributeTextValue,
     getLeadingComment,
@@ -36,8 +36,14 @@ export function embed(
                 embeddedOptions.singleQuote = true;
             }
 
-            const docs = textToDoc(forceIntoExpression(getText(node, options)), embeddedOptions);
-            return node.forceSingleLine ? removeLines(docs) : docs;
+            let docs = textToDoc(forceIntoExpression(getText(node, options)), embeddedOptions);
+            if (node.forceSingleLine) {
+                docs = removeLines(docs);
+            }
+            if (node.removeParentheses) {
+                docs = removeParentheses(docs);
+            }
+            return docs;
         } catch (e) {
             return getText(node, options);
         }

src/embed.ts

@@ -158,3 +158,10 @@ function getParts(doc: Doc): Doc[] | undefined {
         }
     }
 }
+
+/**
+ * `(foo = bar)` => `foo = bar`
+ */
+export function removeParentheses(doc: Doc): Doc {
+    return trim([doc], (_doc: Doc) => _doc === '(' || _doc === ')')[0];
+}

src/print/doc-helpers.ts

@@ -96,7 +96,7 @@ export function print(path: FastPath, options: ParserOptions, print: PrintFn): D
     const [open, close] = options.svelteStrictMode ? ['"{', '}"'] : ['{', '}'];
     const printJsExpression = () => [
         open,
-        printJS(path, print, options.svelteStrictMode, false, 'expression'),
+        printJS(path, print, options.svelteStrictMode, false, false, 'expression'),
         close,
     ];
     const node = n as Node;
@@ -399,7 +399,14 @@ export function print(path: FastPath, options: ParserOptions, print: PrintFn): D
         case 'MustacheTag':
             return concat([
                 '{',
-                printJS(path, print, isInsideQuotedAttribute(path, options), false, 'expression'),
+                printJS(
+                    path,
+                    print,
+                    isInsideQuotedAttribute(path, options),
+                    false,
+                    false,
+                    'expression',
+                ),
                 '}',
             ]);
         case 'IfBlock': {
@@ -637,9 +644,24 @@ export function print(path: FastPath, options: ParserOptions, print: PrintFn): D
                 node.expression ? concat(['=', ...printJsExpression()]) : '',
             ]);
         case 'RawMustacheTag':
-            return concat(['{@html ', printJS(path, print, false, false, 'expression'), '}']);
+            return concat([
+                '{@html ',
+                printJS(path, print, false, false, false, 'expression'),
+                '}',
+            ]);
         case 'Spread':
-            return concat([line, '{...', printJS(path, print, false, false, 'expression'), '}']);
+            return concat([
+                line,
+                '{...',
+                printJS(path, print, false, false, false, 'expression'),
+                '}',
+            ]);
+        case 'ConstTag':
+            return concat([
+                '{@const ',
+                printJS(path, print, false, false, true, 'expression'),
+                '}',
+            ]);
     }
 
     console.error(JSON.stringify(node, null, 4));
@@ -1051,19 +1073,21 @@ function splitTextToDocs(node: TextNode): Doc[] {
 }
 
 function printSvelteBlockJS(path: FastPath, print: PrintFn, name: string) {
-    return printJS(path, print, false, true, name);
+    return printJS(path, print, false, true, false, name);
 }
 
 function printJS(
     path: FastPath,
     print: PrintFn,
     forceSingleQuote: boolean,
     forceSingleLine: boolean,
+    removeParentheses: boolean,
     name: string,
 ) {
     path.getValue()[name].isJS = true;
     path.getValue()[name].forceSingleQuote = forceSingleQuote;
     path.getValue()[name].forceSingleLine = forceSingleLine;
+    path.getValue()[name].removeParentheses = removeParentheses;
     return path.call(print, name);
 }
 

src/print/index.ts

@@ -4,6 +4,7 @@ export interface BaseNode {
     isJS?: boolean;
     forceSingleQuote?: boolean;
     forceSingleLine?: boolean;
+    removeParentheses?: boolean;
 }
 
 export interface FragmentNode extends BaseNode {
@@ -260,6 +261,11 @@ export interface SlotTemplateNode extends BaseNode {
     children: Node[];
 }
 
+export interface ConstTagNode extends BaseNode {
+    type: 'ConstTag';
+    expression: Node;
+}
+
 export type Node =
     | FragmentNode
     | ElementNode
@@ -301,7 +307,8 @@ export type Node =
     | ModuleScriptNode
     | BodyNode
     | OptionsNode
-    | SlotTemplateNode;
+    | SlotTemplateNode
+    | ConstTagNode;
 
 /**
  * The Svelte AST root node

src/print/nodes.ts

@@ -0,0 +1,9 @@
+{#each [1, 2] as foo}
+    {@const bar =
+        foo}
+    {foo}{bar}
+{/each}
+
+{#await aPromise then result}
+    {@const bar = result ? 'some super long text which will force the ternary to break' : 'etc etc'}
+{/await}

test/formatting/samples/const/input.html

@@ -0,0 +1,10 @@
+{#each [1, 2] as foo}
+    {@const bar = foo}
+    {foo}{bar}
+{/each}
+
+{#await aPromise then result}
+    {@const bar = result
+        ? "some super long text which will force the ternary to break"
+        : "etc etc"}
+{/await}

test/formatting/samples/const/output.html

@@ -0,0 +1,8 @@
+{#each [1, 2] as foo}
+    {@const bar = foo}
+    {foo}{bar}
+{/each}
+
+{#await aPromise then result}
+    {@const bar = result}
+{/await}