Group HyperScript tag

src/language-js/printer-estree.js

@@ -257,6 +257,10 @@ function hasJsxIgnoreComment(path) {
   );
 }
 
+const isNull = node =>
+  node.type === "NullLiteral" ||
+  (node.type === "Literal" && node.value === null);
+
 /**
  * The following is the shared logic for
  * ternary operators, namely ConditionalExpression
@@ -330,10 +334,6 @@ function printTernaryOperator(path, options, print, operatorOptions) {
     // The only things we don't wrap are:
     // * Nested conditional expressions in alternates
     // * null
-    const isNull = node =>
-      node.type === "NullLiteral" ||
-      (node.type === "Literal" && node.value === null);
-
     parts.push(
       " ? ",
       isNull(consequentNode)
@@ -4173,9 +4173,21 @@ function printArgumentsList(path, options, print) {
     ]);
   }
 
+  const groupHyperScriptTag =
+    args.length > 2 &&
+    node.callee.name === "h" &&
+    group(
+      concat([
+        "(",
+        printedArguments.splice(0, 1)[0],
+        isNull(args[1]) && !args[1].comments
+          ? printedArguments.splice(0, 1)[0]
+          : ""
+      ])
+    );
   return group(
     concat([
-      "(",
+      groupHyperScriptTag || "(",
       indent(concat([softline, concat(printedArguments)])),
       ifBreak(maybeTrailingComma),
       softline,

tests/hyperscript/__snapshots__/jsfmt.spec.js.snap

@@ -0,0 +1,88 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`hyperscript.js 1`] = `
+====================================options=====================================
+parsers: ["flow"]
+printWidth: 80
+                                                                                | printWidth
+=====================================input======================================
+h(
+  "div",
+  { className: "whatever" },
+  h("button", null, "OK"),
+  h("button", null, "Cancel")
+);
+// Inline object would be nice to group too.
+
+h(
+  Fragment,
+  // No props.
+  null,
+  h("button", null, "OK"),
+  h("button", null, "Cancel")
+);
+
+h(
+  "div",
+  null,
+  h(
+    "button",
+    {
+      className: "whatever",
+      onClick: ev => {
+        ev.preventDefault();
+        console.log(ev.target);
+      }
+    },
+    "OK"
+  )
+);
+// Curly brace and props indent still irk me.
+
+h(
+  "How will this behave, I want to see a very long string here and test the result",
+  { className: "whatever" },
+  h("button", null, "OK"),
+  h("button", null, "Cancel")
+);
+// Well I tried.
+
+=====================================output=====================================
+h("div",
+  { className: "whatever" },
+  h("button", null, "OK"),
+  h("button", null, "Cancel")
+);
+// Inline object would be nice to group too.
+
+h(Fragment,
+  // No props.
+  null,
+  h("button", null, "OK"),
+  h("button", null, "Cancel")
+);
+
+h("div", null,
+  h("button",
+    {
+      className: "whatever",
+      onClick: ev => {
+        ev.preventDefault();
+        console.log(ev.target);
+      }
+    },
+    "OK"
+  )
+);
+// Curly brace and props indent still irk me.
+
+h("How will this behave, I want to see a very long string here and test the result",
+
+  { className: "whatever" },
+  h("button", null, "OK"),
+  h("button", null, "Cancel")
+);
+// Well I tried.
+
+================================================================================
+`;

tests/hyperscript/hyperscript.js

@@ -0,0 +1,40 @@
+h(
+  "div",
+  { className: "whatever" },
+  h("button", null, "OK"),
+  h("button", null, "Cancel")
+);
+// Inline object would be nice to group too.
+
+h(
+  Fragment,
+  // No props.
+  null,
+  h("button", null, "OK"),
+  h("button", null, "Cancel")
+);
+
+h(
+  "div",
+  null,
+  h(
+    "button",
+    {
+      className: "whatever",
+      onClick: ev => {
+        ev.preventDefault();
+        console.log(ev.target);
+      }
+    },
+    "OK"
+  )
+);
+// Curly brace and props indent still irk me.
+
+h(
+  "How will this behave, I want to see a very long string here and test the result",
+  { className: "whatever" },
+  h("button", null, "OK"),
+  h("button", null, "Cancel")
+);
+// Well I tried.

tests/hyperscript/jsfmt.spec.js

@@ -0,0 +1 @@
+run_spec(__dirname, ["flow"]);