(breaking) update to prettier v3 (#335)

Removes concat, applies some needed changes to the print/embed machinery

---------

Co-authored-by: Simon H <5968653+dummdidumm@users.noreply.github.com>
Co-authored-by: Christopher Carman <carmanchris31@gmail.com>
Co-authored-by: Rolaka <hyperion.neil@gmail.com>

Author: 3 people

.github/workflows/main.yml

@@ -6,8 +6,8 @@ jobs:
     runs-on: ubuntu-latest
 
     steps:
-      - uses: actions/checkout@v2
-      - uses: actions/setup-node@v1
+      - uses: actions/checkout@v3
+      - uses: actions/setup-node@v3
         with:
           cache: npm
 

CHANGELOG.md

@@ -1,5 +1,10 @@
 # prettier-plugin-svelte changelog
 
+## 3.0.0 (Unreleased)
+
+-   (breaking) requires `prettier` version 3
+-   (breaking) requires node version 14 or higher
+
 ## 2.10.1
 
 -   (chore) mark as compatible with Svelte 4

package-lock.json

@@ -28,22 +28,20 @@
     },
     "homepage": "https://github.com/sveltejs/prettier-plugin-svelte#readme",
     "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"
     }
 }

package.json

@@ -1,77 +1,158 @@
-import { Doc, doc, FastPath, ParserOptions } from 'prettier';
+import { Doc, doc, FastPath, Options } from 'prettier';
 import { getText } from './lib/getText';
 import { snippedTagContentAttribute } from './lib/snipTagContent';
-import { isBracketSameLine } from './options';
+import { isBracketSameLine, ParserOptions } from './options';
 import { PrintFn } from './print';
 import { isLine, removeParentheses, trimRight } from './print/doc-helpers';
-import { groupConcat, printWithPrependedAttributeLine } from './print/helpers';
+import { isASTNode, printWithPrependedAttributeLine } from './print/helpers';
 import {
+    assignCommentsToNodes,
     getAttributeTextValue,
     getLeadingComment,
     isIgnoreDirective,
+    isInsideQuotedAttribute,
     isNodeSupportedLanguage,
     isPugTemplate,
     isTypeScript,
     printRaw,
 } from './print/node-helpers';
 import { CommentNode, ElementNode, Node, ScriptNode, StyleNode } from './print/nodes';
+import { extractAttributes } from './lib/extractAttributes';
 
 const {
-    builders: { concat, hardline, softline, indent, dedent, literalline },
+    builders: { group, hardline, softline, indent, dedent, literalline },
     utils: { removeLines },
 } = doc;
 
-export function embed(
-    path: FastPath,
-    print: PrintFn,
-    textToDoc: (text: string, options: object) => Doc,
-    options: ParserOptions,
-): Doc | null {
+// Embed works like this in Prettier v3:
+// - do depth first traversal of all node properties
+// - deepest property is calling embed first
+// - if embed returns a function, it will be called after the traversal in a second pass, in the same order (deepest first)
+// For performance reasons we try to only return functions when we're sure we need to transform something.
+export function embed(path: FastPath, _options: Options) {
     const node: Node = path.getNode();
+    const options = _options as ParserOptions;
+    if (!options.locStart || !options.locEnd || !options.originalText) {
+        throw new Error('Missing required options');
+    }
+
+    if (isASTNode(node)) {
+        assignCommentsToNodes(node);
+        if (node.module) {
+            node.module.type = 'Script';
+            node.module.attributes = extractAttributes(getText(node.module, options));
+        }
+        if (node.instance) {
+            node.instance.type = 'Script';
+            node.instance.attributes = extractAttributes(getText(node.instance, options));
+        }
+        if (node.css) {
+            node.css.type = 'Style';
+            node.css.content.type = 'StyleProgram';
+        }
+        return null;
+    }
+
+    // embed does depth first traversal with deepest node called first, therefore we need to
+    // check the parent to see if we are inside an expression that should be embedded.
+    const parent = path.getParentNode();
+    const printJsExpression = () =>
+        (parent as any).expression
+            ? printJS(parent, options.svelteStrictMode ?? false, false, false, 'expression')
+            : undefined;
+    const printSvelteBlockJS = (name: string) => printJS(parent, false, true, false, name);
+
+    switch (parent.type) {
+        case 'IfBlock':
+        case 'ElseBlock':
+        case 'AwaitBlock':
+        case 'KeyBlock':
+            printSvelteBlockJS('expression');
+            break;
+        case 'EachBlock':
+            printSvelteBlockJS('expression');
+            printSvelteBlockJS('key');
+            break;
+        case 'Element':
+            printJS(parent, options.svelteStrictMode ?? false, false, false, 'tag');
+            break;
+        case 'MustacheTag':
+            printJS(parent, isInsideQuotedAttribute(path, options), false, false, 'expression');
+            break;
+        case 'RawMustacheTag':
+            printJS(parent, false, false, false, 'expression');
+            break;
+        case 'Spread':
+            printJS(parent, false, false, false, 'expression');
+            break;
+        case 'ConstTag':
+            printJS(parent, false, false, true, 'expression');
+            break;
+        case 'EventHandler':
+        case 'Binding':
+        case 'Class':
+        case 'Let':
+        case 'Transition':
+        case 'Action':
+        case 'Animation':
+        case 'InlineComponent':
+            printJsExpression();
+            break;
+    }
 
     if (node.isJS) {
-        try {
-            const embeddedOptions: any = {
-                parser: expressionParser,
-            };
-            if (node.forceSingleQuote) {
-                embeddedOptions.singleQuote = true;
-            }
+        return async (
+            textToDoc: (text: string, options: Options) => Promise<Doc>,
+        ): Promise<Doc> => {
+            try {
+                const embeddedOptions = {
+                    // Prettier only allows string references as parsers from v3 onwards,
+                    // so we need to have another public parser and defer to that
+                    parser: 'svelteExpressionParser',
+                    singleQuote: node.forceSingleQuote ? true : options.singleQuote,
+                };
 
-            let docs = textToDoc(
-                forceIntoExpression(
-                    // If we have snipped content, it was done wrongly and we need to unsnip it.
-                    // This happens for example for {@html `<script>{foo}</script>`}
-                    getText(node, options, true),
-                ),
-                embeddedOptions,
-            );
-            if (node.forceSingleLine) {
-                docs = removeLines(docs);
-            }
-            if (node.removeParentheses) {
-                docs = removeParentheses(docs);
+                let docs = await textToDoc(
+                    forceIntoExpression(
+                        // If we have snipped content, it was done wrongly and we need to unsnip it.
+                        // This happens for example for {@html `<script>{foo}</script>`}
+                        getText(node, options, true),
+                    ),
+                    embeddedOptions,
+                );
+                if (node.forceSingleLine) {
+                    docs = removeLines(docs);
+                }
+                if (node.removeParentheses) {
+                    docs = removeParentheses(docs);
+                }
+                return docs;
+            } catch (e) {
+                return getText(node, options, true);
             }
-            return docs;
-        } catch (e) {
-            return getText(node, options, true);
-        }
+        };
     }
 
     const embedType = (
         tag: 'script' | 'style' | 'template',
         parser: 'typescript' | 'babel-ts' | 'css' | 'pug',
         isTopLevel: boolean,
-    ) =>
-        embedTag(
-            tag,
-            options.originalText,
-            path,
-            (content) => formatBodyContent(content, parser, textToDoc, options),
-            print,
-            isTopLevel,
-            options,
-        );
+    ) => {
+        return async (
+            textToDoc: (text: string, options: Options) => Promise<Doc>,
+            print: PrintFn,
+        ): Promise<Doc> => {
+            return embedTag(
+                tag,
+                options.originalText,
+                path,
+                (content) => formatBodyContent(content, parser, textToDoc, options),
+                print,
+                isTopLevel,
+                options,
+            );
+        };
+    };
 
     const embedScript = (isTopLevel: boolean) =>
         embedType(
@@ -111,19 +192,17 @@ function forceIntoExpression(statement: string) {
     return `(${statement}\n)`;
 }
 
-function expressionParser(text: string, parsers: any, options: any) {
-    const ast = parsers.babel(text, parsers, options);
-
-    return { ...ast, program: ast.program.body[0].expression };
-}
-
 function preformattedBody(str: string): Doc {
+    if (!str) {
+        return '';
+    }
+
     const firstNewline = /^[\t\f\r ]*\n/;
     const lastNewline = /\n[\t\f\r ]*$/;
 
     // If we do not start with a new line prettier might try to break the opening tag
     // to keep it together with the string. Use a literal line to skip indentation.
-    return concat([literalline, str.replace(firstNewline, '').replace(lastNewline, ''), hardline]);
+    return [literalline, str.replace(firstNewline, '').replace(lastNewline, ''), hardline];
 }
 
 function getSnippedContent(node: Node) {
@@ -136,14 +215,14 @@ function getSnippedContent(node: Node) {
     }
 }
 
-function formatBodyContent(
+async function formatBodyContent(
     content: string,
     parser: 'typescript' | 'babel-ts' | 'css' | 'pug',
-    textToDoc: (text: string, options: object) => Doc,
+    textToDoc: (text: string, options: object) => Promise<Doc>,
     options: ParserOptions & { pugTabWidth?: number },
 ) {
     try {
-        const body = textToDoc(content, { parser });
+        const body = await textToDoc(content, { parser });
 
         if (parser === 'pug' && typeof body === 'string') {
             // Pug returns no docs but a final string.
@@ -159,13 +238,13 @@ function formatBodyContent(
                 .split('\n')
                 .map((line) => (line ? whitespace + line : line))
                 .join('\n');
-            return concat([hardline, pugBody]);
+            return [hardline, pugBody];
         }
 
         const indentIfDesired = (doc: Doc) =>
             options.svelteIndentScriptAndStyle ? indent(doc) : doc;
         trimRight([body], isLine);
-        return concat([indentIfDesired(concat([hardline, body])), hardline]);
+        return [indentIfDesired([hardline, body]), hardline];
     } catch (error) {
         if (process.env.PRETTIER_DEBUG) {
             throw error;
@@ -181,11 +260,11 @@ function formatBodyContent(
     }
 }
 
-function embedTag(
+async function embedTag(
     tag: 'script' | 'style' | 'template',
     text: string,
     path: FastPath,
-    formatBodyContent: (content: string) => Doc,
+    formatBodyContent: (content: string) => Promise<Doc>,
     print: PrintFn,
     isTopLevel: boolean,
     options: ParserOptions,
@@ -209,24 +288,24 @@ function embedTag(
             ));
     const body: Doc = canFormat
         ? content.trim() !== ''
-            ? formatBodyContent(content)
+            ? await formatBodyContent(content)
             : content === ''
             ? ''
             : hardline
         : preformattedBody(content);
 
-    const openingTag = groupConcat([
+    const openingTag = group([
         '<',
         tag,
         indent(
-            groupConcat([
+            group([
                 ...path.map(printWithPrependedAttributeLine(node, options, print), 'attributes'),
                 isBracketSameLine(options) ? '' : dedent(softline),
             ]),
         ),
         '>',
     ]);
-    let result = groupConcat([openingTag, body, '</', tag, '>']);
+    let result: Doc = group([openingTag, body, '</', tag, '>']);
 
     const comments = [];
     for (const comment of previousComments) {
@@ -241,8 +320,24 @@ function embedTag(
         // top level embedded nodes have been moved from their normal position in the
         // node tree. if there is a comment referring to it, it must be recreated at
         // the new position.
-        return concat([...comments, result, hardline]);
+        return [...comments, result, hardline];
     } else {
-        return comments.length ? concat([...comments, result]) : result;
+        return comments.length ? [...comments, result] : result;
+    }
+}
+
+function printJS(
+    node: any,
+    forceSingleQuote: boolean,
+    forceSingleLine: boolean,
+    removeParentheses: boolean,
+    name: string,
+) {
+    if (!node[name]) {
+        return;
     }
+    node[name].isJS = true;
+    node[name].forceSingleQuote = forceSingleQuote;
+    node[name].forceSingleLine = forceSingleLine;
+    node[name].removeParentheses = removeParentheses;
 }