Improve inline js formatting

packages/prettyprint/src/PrintContext.js

@@ -24,6 +24,7 @@ class PrintContext {
     this.singleQuote = options.singleQuote;
     this.markoCompiler = options.markoCompiler;
     this.CodeWriter = options.CodeWriter;
+    this.taglibLookup = options.taglibLookup;
   }
 
   get isConciseSyntax() {

packages/prettyprint/src/prettyPrintSource.js

@@ -28,6 +28,11 @@ module.exports = function prettyPrintSource(src, options) {
   options.CodeWriter =
     options.CodeWriter || requireMarkoFile(dirname, "compiler/CodeWriter");
 
-  var ast = markoCompiler.parse(src, filename, { raw: true });
+  var ast = markoCompiler.parse(src, filename, {
+    raw: true,
+    onContext(context) {
+      options.taglibLookup = context.taglibLookup;
+    }
+  });
   return prettyPrintAST(ast, options);
 };

packages/prettyprint/src/printHtmlElement.js

@@ -8,8 +8,8 @@ const Writer = require("./util/Writer");
 const formattingTags = require("./formatting-tags");
 
 const formatJS = require("./util/formatJS");
+const formatArgument = require("./util/formatArgument");
 const formatStyles = require("./util/formatStyles");
-const toCode = require("./util/toCode");
 
 const codeTags = {
   class: {
@@ -102,7 +102,7 @@ module.exports = function printHtmlElement(node, printContext, writer) {
   }
 
   var tagNameString = tagNameExpression
-    ? `\${${formatJS(tagNameExpression, printContext, undefined, true)}}`
+    ? `\${${formatJS(tagNameExpression, printContext, true)}}`
     : node.tagName;
 
   writer.write(tagNameString);
@@ -116,15 +116,13 @@ module.exports = function printHtmlElement(node, printContext, writer) {
       if (typeof className === "string") {
         writer.write("." + className);
       } else {
-        writer.write(
-          ".${" + toCode(className, printContext, undefined, true) + "}"
-        );
+        writer.write(".${" + formatJS(className, printContext, true) + "}");
       }
     });
   }
 
   if (node.argument != null) {
-    writer.write("(" + node.argument + ")");
+    writer.write(formatArgument(node, printContext));
   }
 
   var attrsWriter = new Writer(writer.col);
@@ -150,12 +148,7 @@ module.exports = function printHtmlElement(node, printContext, writer) {
   // append them to the output while avoiding putting too many attributes on one line.
   attrs.forEach(attr => {
     var attrStr = "";
-    var attrValueStr = toCode(
-      attr.value,
-      printContext,
-      printContext.depth + 1,
-      true
-    );
+    var attrValueStr = formatJS(attr.value, printContext, true);
 
     if (attr.name) {
       attrStr += attr.name;
@@ -166,10 +159,7 @@ module.exports = function printHtmlElement(node, printContext, writer) {
           attrStr += "=" + attrValueStr;
         }
       } else if (attr.argument != null) {
-        attrStr +=
-          "(" +
-          toCode(attr.argument, printContext, printContext.depth + 1, true) +
-          ")";
+        attrStr += formatArgument(attr, printContext);
       }
     } else if (attr.spread) {
       if (hasUnenclosedWhitespace(attr.value)) {

packages/prettyprint/src/printScriptlet.js

@@ -7,33 +7,34 @@ module.exports = function printScriptlet(node, printContext, writer) {
   const currentIndentString = printContext.currentIndentString;
   const indentString = printContext.indentString;
   const code = node.code;
-  let isBlock = node.block;
 
   if (node.tag) {
     writer.write("<%");
     writer.write(code);
     writer.write("%>");
   } else {
-    const output = formatJS(code, printContext, printContext.depth);
+    const output = formatJS(code, printContext);
+    const newLineCount = countNewLines(output);
+    const isInline =
+      newLineCount === 0 ||
+      (!node.block && newLineCount === countNewLines(code));
 
-    if (!isBlock && /[\r\n]/g.test(output)) {
-      isBlock = true;
-    }
-
-    if (isBlock) {
+    if (isInline) {
+      writer.write(`$ ${output}`);
+    } else {
       // Multi-line scriptlet
-
       writer.write(
-        currentIndentString +
-          "$ {\n" +
-          redent(output, printContext.depth + 1, indentString) +
-          "\n" +
-          currentIndentString +
-          "}"
+        `$ {\n${redent(
+          output,
+          printContext.depth + 1,
+          indentString
+        )}\n${currentIndentString}}`
       );
-    } else {
-      writer.write("$ ");
-      writer.write(output);
     }
   }
 };
+
+function countNewLines(str) {
+  const match = str.match(/[\r\n]/g);
+  return (match && match.length) || 0;
+}

packages/prettyprint/src/util/formatArgument.js

@@ -0,0 +1,57 @@
+const formatJS = require("./formatJS");
+const toCode = require("./toCode");
+const STATEMENTS = ["for", "while", "if"];
+
+module.exports = function(node, printContext) {
+  let code = node.argument;
+
+  if (!code) {
+    return "()";
+  }
+
+  code = `(${toCode(code, printContext)})`;
+
+  let statement;
+  let isParams = false;
+
+  if (node.type === "HTMLAttribute") {
+    statement = getStatementName(node.name);
+  } else {
+    const tagName = node.tagName;
+    const tagDef = tagName && printContext.taglibLookup.getTag(tagName);
+    const featureFlags = tagDef && tagDef.featureFlags;
+    isParams = featureFlags && featureFlags.includes("params");
+    statement = getStatementName(tagName);
+  }
+
+  try {
+    if (STATEMENTS.includes(statement)) {
+      return formatJS(`${statement + code};`, printContext).slice(
+        statement.length + 1,
+        -1
+      );
+    }
+
+    if (isParams) {
+      return formatJS(`${code}=>{}`, printContext, true).slice(0, -4);
+    }
+
+    return formatJS(`_${code}`, printContext, true).slice(1);
+  } catch (_) {
+    return code;
+  }
+};
+
+function getStatementName(name) {
+  switch (name) {
+    case "if":
+    case "for":
+    case "while":
+      return name;
+    case "else-if":
+    case "until":
+      return "if";
+    default:
+      return;
+  }
+}

packages/prettyprint/src/util/formatJS.js

@@ -1,23 +1,33 @@
 const format = require("prettier").format;
 const redent = require("redent");
+const toCode = require("./toCode");
 
-module.exports = function(code, printContext, indent, expression) {
+module.exports = function(code, printContext, expression) {
+  if (!code) {
+    return "";
+  }
+
+  code = toCode(code, printContext);
+  const { indentString, depth } = printContext;
+  const tabWidth = indentString.length;
+  const isExpression = expression || /^class *?\{/.test(code);
+  const usedSpace = depth * tabWidth;
   const config = {
     semi: !printContext.noSemi,
-    printWidth: printContext.maxLen,
+    printWidth: Math.max(0, printContext.maxLen - usedSpace),
     singleQuote: printContext.singleQuote,
-    useTabs: printContext.indentString[0] === "\t",
-    tabWidth: printContext.indentString.length,
+    useTabs: indentString[0] === "\t",
+    tabWidth,
     parser: "babylon"
   };
 
-  const isExpression = expression || /^class *?\{/.test(code);
-
   if (isExpression) {
     code = "(" + code + ");";
   }
 
-  code = format(code, config).trim();
+  code = format(code, config)
+    .trim()
+    .replace(/__%ESCAPE%__/g, "\\");
 
   if (isExpression) {
     if (code[code.length - 1] === ";") {
@@ -29,8 +39,8 @@ module.exports = function(code, printContext, indent, expression) {
     }
   }
 
-  if (indent) {
-    code = redent(code, indent, printContext.indentString).trim();
+  if (depth) {
+    code = redent(code, depth, indentString).trim();
   }
 
   return code;

packages/prettyprint/src/util/getTextValue.js

@@ -1,14 +1,13 @@
-var toCode = require("./toCode");
+var formatJS = require("./formatJS");
 
 module.exports = function getTextValue(text, printContext) {
   return text.argument.type === "Literal"
     ? text.escape
       ? text.argument.value
       : text.argument.value.replace(/\\|\$!?{/g, m => "\\" + m)
-    : `$${text.escape ? "" : "!"}{${toCode(
+    : `$${text.escape ? "" : "!"}{${formatJS(
         text.argument,
         printContext,
-        undefined,
         true
       )}}`;
 };

packages/prettyprint/src/util/toCode.js

@@ -1,19 +1,11 @@
-const formatJS = require("./formatJS");
-
-module.exports = (node, printContext, indent, expression) => {
-  if (!node) {
-    return node;
-  }
-
+module.exports = (node, printContext) => {
   if (typeof node === "string") {
     return node;
   }
 
   const builder = printContext.markoCompiler.builder;
   const CodeWriter = printContext.CodeWriter;
-
   const writer = new CodeWriter({}, builder);
-
   const _writeLiteral = writer.writeLiteral;
   writer.writeLiteral = function(value) {
     if (typeof value === "string") {
@@ -26,13 +18,5 @@ module.exports = (node, printContext, indent, expression) => {
   };
   writer.write(node);
   writer.writeLiteral = _writeLiteral;
-
-  const formatted = formatJS(
-    writer.getCode(),
-    printContext,
-    indent,
-    expression
-  );
-
-  return formatted.replace(/__%ESCAPE%__/g, "\\");
+  return writer.getCode();
 };

packages/prettyprint/test/autotest/argument-attr/expected.marko

@@ -0,0 +1,21 @@
+<div foo()/>
+<div foo(
+    { aaaaaaaaaa: 1, bbbbbbbbbb: 2, cccccccccc: 3 },
+    aaaaaaaaaa,
+    bbbbbbbbbb,
+    cccccccccc
+)/>
+-- ${test}
+<div>${Hello}</div>
+~~~~~~~
+div foo()
+div [
+        foo(
+    { aaaaaaaaaa: 1, bbbbbbbbbb: 2, cccccccccc: 3 },
+    aaaaaaaaaa,
+    bbbbbbbbbb,
+    cccccccccc
+)
+    ]
+-- ${test}
+div -- ${Hello}

packages/prettyprint/test/autotest/argument-attr/template.marko

@@ -0,0 +1,5 @@
+<div foo()/>
+<div foo({ aaaaaaaaaa: 1, bbbbbbbbbb: 2, cccccccccc: 3 }, aaaaaaaaaa, bbbbbbbbbb, cccccccccc)/>
+-- ${test}
+
+<div>${Hello}</div>

packages/prettyprint/test/autotest/argument-tag/expected.marko

@@ -0,0 +1,15 @@
+<foo()/>
+<foo(
+    { aaaaaaaaaa: 1, bbbbbbbbbb: 2, cccccccccc: 3 },
+    aaaaaaaaaa,
+    bbbbbbbbbb,
+    cccccccccc
+)/>
+~~~~~~~
+foo()
+foo(
+    { aaaaaaaaaa: 1, bbbbbbbbbb: 2, cccccccccc: 3 },
+    aaaaaaaaaa,
+    bbbbbbbbbb,
+    cccccccccc
+)

packages/prettyprint/test/autotest/argument-tag/template.marko

@@ -0,0 +1,2 @@
+<foo()/>
+<foo({ aaaaaaaaaa: 1, bbbbbbbbbb: 2, cccccccccc: 3 }, aaaaaaaaaa, bbbbbbbbbb, cccccccccc)/>