Add support for the React useEffect hook (#5608)

* Add support for the React `useEffect` hook * Format * Format * [Refactor] remove unnecessary condition `canHaveTrailingComma` is defined as `I(lastElem && ...)`, which will always be true when `lastElem === null`. * Use a hacky method to allow the array to break * Revert "[Refactor] remove unnecessary condition" This reverts commit 91906ba. * Add tests for `React.useEffect` form
prettier · Dec 10, 2018 · fa7eafa · fa7eafa
1 parent 98680a4
commit fa7eafa
Show file tree

Hide file tree

Showing 3 changed files with 106 additions and 0 deletions.
diff --git a/src/language-js/printer-estree.js b/src/language-js/printer-estree.js
@@ -3873,6 +3873,23 @@ function printArgumentsList(path, options, print) {
     ]);
   }
 
+  // useEffect(() => { ... }, [foo, bar, baz])
+  if (
+    args.length === 2 &&
+    args[0].type === "ArrowFunctionExpression" &&
+    args[0].body.type === "BlockStatement" &&
+    args[1].type === "ArrayExpression" &&
+    !args.find(arg => arg.leadingComments || arg.trailingComments)
+  ) {
+    return concat([
+      "(",
+      path.call(print, "arguments", 0),
+      ", ",
+      path.call(print, "arguments", 1),
+      ")"
+    ]);
+  }
+
   let anyArgEmptyLine = false;
   let hasEmptyLineFollowingFirstArg = false;
   const lastArgIndex = args.length - 1;

diff --git a/tests/break-calls/__snapshots__/jsfmt.spec.js.snap b/tests/break-calls/__snapshots__/jsfmt.spec.js.snap
@@ -116,3 +116,74 @@ runtimeAgent.getProperties(
 
 ================================================================================
 `;
+
+exports[`react.js 1`] = `
+====================================options=====================================
+parsers: ["flow", "typescript"]
+printWidth: 80
+                                                                                | printWidth
+=====================================input======================================
+function helloWorld() {
+  useEffect(() => {
+    // do something
+  }, [props.value])
+  useEffect(() => {
+    // do something
+  }, [props.value, props.value, props.value, props.value, props.value, props.value, props.value, props.value, props.value, props.value, props.value])
+}
+
+function helloWorldWithReact() {
+  React.useEffect(() => {
+    // do something
+  }, [props.value])
+  React.useEffect(() => {
+    // do something
+  }, [props.value, props.value, props.value, props.value, props.value, props.value, props.value, props.value, props.value, props.value, props.value])
+}
+
+
+=====================================output=====================================
+function helloWorld() {
+  useEffect(() => {
+    // do something
+  }, [props.value]);
+  useEffect(() => {
+    // do something
+  }, [
+    props.value,
+    props.value,
+    props.value,
+    props.value,
+    props.value,
+    props.value,
+    props.value,
+    props.value,
+    props.value,
+    props.value,
+    props.value
+  ]);
+}
+
+function helloWorldWithReact() {
+  React.useEffect(() => {
+    // do something
+  }, [props.value]);
+  React.useEffect(() => {
+    // do something
+  }, [
+    props.value,
+    props.value,
+    props.value,
+    props.value,
+    props.value,
+    props.value,
+    props.value,
+    props.value,
+    props.value,
+    props.value,
+    props.value
+  ]);
+}
+
+================================================================================
+`;
diff --git a/tests/break-calls/react.js b/tests/break-calls/react.js
@@ -0,0 +1,18 @@
+function helloWorld() {
+  useEffect(() => {
+    // do something
+  }, [props.value])
+  useEffect(() => {
+    // do something
+  }, [props.value, props.value, props.value, props.value, props.value, props.value, props.value, props.value, props.value, props.value, props.value])
+}
+
+function helloWorldWithReact() {
+  React.useEffect(() => {
+    // do something
+  }, [props.value])
+  React.useEffect(() => {
+    // do something
+  }, [props.value, props.value, props.value, props.value, props.value, props.value, props.value, props.value, props.value, props.value, props.value])
+}
+