fix: improve script tag formatting

marko-js · Dec 11, 2024 · 35d5b75 · 35d5b75
1 parent 54885fd
commit 35d5b75
Show file tree

Hide file tree

Showing 9 changed files with 475 additions and 825 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -5,13 +5,13 @@
   "author": "Dylan Piercey <dpiercey@ebay.com>",
   "bugs": "https://github.com/marko-js/prettier/issues",
   "devDependencies": {
-    "@babel/generator": "^7.26.2",
+    "@babel/generator": "^7.26.3",
     "@commitlint/cli": "^17.7.2",
     "@commitlint/config-conventional": "^17.7.0",
     "@istanbuljs/nyc-config-typescript": "^1.0.2",
     "@types/babel__generator": "^7.6.8",
-    "@types/mocha": "^10.0.7",
-    "@types/node": "^22.5.1",
+    "@types/mocha": "^10.0.10",
+    "@types/node": "^22.10.2",
     "@typescript-eslint/eslint-plugin": "^6.7.5",
     "@typescript-eslint/parser": "^6.7.5",
     "esbuild": "^0.24.0",
@@ -22,13 +22,13 @@
     "fixpack": "^4.0.0",
     "husky": "^8.0.3",
     "lint-staged": "^14.0.1",
-    "marko": "^5.35.32",
+    "marko": "^5.36.3",
     "mocha": "^10.7.3",
     "mocha-snap": "^5.0.0",
     "nyc": "^15.1.0",
-    "prettier": "^3.3.3",
+    "prettier": "^3.4.2",
     "semantic-release": "^22.0.5",
-    "typescript": "^5.5.4"
+    "typescript": "^5.7.2"
   },
   "exports": {
     ".": {

diff --git a/src/__tests__/__snapshots__/script-value-attribute.expected/auto.marko b/src/__tests__/__snapshots__/script-value-attribute.expected/auto.marko
@@ -0,0 +1,5 @@
+<script>
+  console.log("Foo");
+  if (test) {
+  }
+</script>
diff --git a/src/__tests__/__snapshots__/script-value-attribute.expected/concise.marko b/src/__tests__/__snapshots__/script-value-attribute.expected/concise.marko
@@ -0,0 +1,6 @@
+script
+  --
+  console.log("Foo");
+  if (test) {
+  }
+  --
diff --git a/src/__tests__/__snapshots__/script-value-attribute.expected/html.marko b/src/__tests__/__snapshots__/script-value-attribute.expected/html.marko
@@ -0,0 +1,5 @@
+<script>
+  console.log("Foo");
+  if (test) {
+  }
+</script>
diff --git a/src/__tests__/__snapshots__/script-value-attribute.expected/with-parens.marko b/src/__tests__/__snapshots__/script-value-attribute.expected/with-parens.marko
@@ -0,0 +1,5 @@
+<script>
+  console.log("Foo");
+  if (test) {
+  }
+</script>
diff --git a/src/__tests__/fixtures/script-value-attribute.marko b/src/__tests__/fixtures/script-value-attribute.marko
@@ -0,0 +1,6 @@
+<script() {
+    console.log('Foo');
+    if (test) {
+
+    }
+}/>
diff --git a/src/index.ts b/src/index.ts
@@ -664,12 +664,32 @@ export const printers: Record<string, Printer<types.Node>> = {
                     );
                   }
 
+                  let bodyOverrideCode: string | undefined;
+
                   if (node.attributes.length) {
                     const attrsDoc: Doc[] = [];
 
                     path.each((attrPath) => {
                       const attrNode = attrPath.getNode() as types.Node;
-                      if ((attrNode as types.MarkoAttribute).default) {
+                      if (
+                        attrNode.type === "MarkoAttribute" &&
+                        attrNode.name === "value" &&
+                        !node.body.body.length &&
+                        attrNode.value.type === "FunctionExpression" &&
+                        !(
+                          attrNode.value.async ||
+                          attrNode.value.generator ||
+                          attrNode.value.returnType ||
+                          attrNode.value.typeParameters
+                        )
+                      ) {
+                        bodyOverrideCode = getOriginalCodeForNode(
+                          opts as ParserOptions<types.Node>,
+                          attrNode.value.body,
+                        )
+                          .replace(/^\s*{\s*/, "")
+                          .replace(/\s*}\s*$/, "");
+                      } else if ((attrNode as types.MarkoAttribute).default) {
                         doc.push(print(attrPath));
                       } else {
                         attrsDoc.push(print(attrPath));
@@ -695,21 +715,29 @@ export const printers: Record<string, Printer<types.Node>> = {
                     }
                   }
 
-                  if (node.body.body.length) {
+                  const bodyOverride =
+                    bodyOverrideCode !== undefined &&
+                    (await toDoc(bodyOverrideCode, {
+                      parser,
+                    }).catch(() => asLiteralTextContent(bodyOverrideCode!)));
+
+                  if (bodyOverride || node.body.body.length) {
                     const wrapSep =
                       opts.markoSyntax === "html" &&
                       (node.var ||
                         node.body.params.length ||
                         node.arguments?.length ||
                         node.attributes.length ||
-                        node.body.body.some(
-                          (child) => !isTextLike(child, node),
-                        ))
+                        (!bodyOverride &&
+                          node.body.body.some(
+                            (child) => !isTextLike(child, node),
+                          )))
                         ? b.hardline
                         : opts.markoSyntax === "concise" ||
-                            node.body.body.some(
-                              (child) => child.type === "MarkoScriptlet",
-                            )
+                            (!bodyOverride &&
+                              node.body.body.some(
+                                (child) => child.type === "MarkoScriptlet",
+                              ))
                           ? b.hardline
                           : b.softline;
 
@@ -718,35 +746,38 @@ export const printers: Record<string, Printer<types.Node>> = {
                     }
 
                     let embeddedCode = "";
-                    path.each(
-                      (childPath) => {
-                        const childNode = childPath.getNode() as types.Node;
-                        if (childNode.type === "MarkoText") {
-                          embeddedCode += childNode.value;
-                        } else {
-                          embeddedCode += `__EMBEDDED_PLACEHOLDER_${placeholderId++}__`;
-                          placeholders.push(print(childPath));
-                        }
-                      },
-                      "body",
-                      "body",
-                    );
+                    if (!bodyOverride) {
+                      path.each(
+                        (childPath) => {
+                          const childNode = childPath.getNode() as types.Node;
+                          if (childNode.type === "MarkoText") {
+                            embeddedCode += childNode.value;
+                          } else {
+                            embeddedCode += `__EMBEDDED_PLACEHOLDER_${placeholderId++}__`;
+                            placeholders.push(print(childPath));
+                          }
+                        },
+                        "body",
+                        "body",
+                      );
+                    }
 
                     const bodyDoc = b.group([
                       opts.markoSyntax === "html"
                         ? ""
                         : b.ifBreak("--", " --", { groupId }),
                       opts.markoSyntax === "html" ? "" : b.line,
-                      replaceEmbeddedPlaceholders(
-                        parser === false
-                          ? asLiteralTextContent(embeddedCode.trim())
-                          : await toDoc(embeddedCode, {
-                              parser,
-                            }).catch(() =>
-                              asLiteralTextContent(embeddedCode.trim()),
-                            ),
-                        placeholders,
-                      ),
+                      bodyOverride ||
+                        replaceEmbeddedPlaceholders(
+                          parser === false
+                            ? asLiteralTextContent(embeddedCode.trim())
+                            : await toDoc(embeddedCode, {
+                                parser,
+                              }).catch(() =>
+                                asLiteralTextContent(embeddedCode.trim()),
+                              ),
+                          placeholders,
+                        ),
                       opts.markoSyntax === "html"
                         ? ""
                         : b.ifBreak([b.softline, "--"]),

diff --git a/src/utils/get-original-code.ts b/src/utils/get-original-code.ts
@@ -7,7 +7,7 @@ const generate = (babelGenerator as any).default || babelGenerator;
 export function getOriginalCodeForNode(
   opts: ParserOptions<t.Node>,
   node: t.Node,
-) {
+): string {
   const hasLeadingComments = node.leadingComments?.length;
   const hasTrailingComments = node.trailingComments?.length;