From 7fd431715f15bf76ded9822eb4f9f80eed8580f3 Mon Sep 17 00:00:00 2001 From: Jed Fox Date: Fri, 7 Dec 2018 18:54:56 +0000 Subject: [PATCH 1/7] Add support for React `useEffect` hook --- src/language-js/printer-estree.js | 2 +- .../__snapshots__/jsfmt.spec.js.snap | 22 +++++++++++++++++++ tests/break-calls/react.js | 5 +++++ 3 files changed, 28 insertions(+), 1 deletion(-) create mode 100644 tests/break-calls/react.js diff --git a/src/language-js/printer-estree.js b/src/language-js/printer-estree.js index 6e094890b046..e0308534f77e 100644 --- a/src/language-js/printer-estree.js +++ b/src/language-js/printer-estree.js @@ -3802,7 +3802,7 @@ function shouldGroupFirstArg(args) { secondArg.type !== "FunctionExpression" && secondArg.type !== "ArrowFunctionExpression" && secondArg.type !== "ConditionalExpression" && - !couldGroupArg(secondArg) + (!couldGroupArg(secondArg) || (secondArg.type === 'ArrayExpression' && !secondArg.comments)) ); } diff --git a/tests/break-calls/__snapshots__/jsfmt.spec.js.snap b/tests/break-calls/__snapshots__/jsfmt.spec.js.snap index 196c17df4f92..88528066186a 100644 --- a/tests/break-calls/__snapshots__/jsfmt.spec.js.snap +++ b/tests/break-calls/__snapshots__/jsfmt.spec.js.snap @@ -116,3 +116,25 @@ runtimeAgent.getProperties( ================================================================================ `; + +exports[`react.js 1`] = ` +====================================options===================================== +parsers: ["flow", "typescript"] +printWidth: 80 + | printWidth +=====================================input====================================== +function helloWorld() { + useEffect(() => { + // do something + }, [props.value]) +} + +=====================================output===================================== +function helloWorld() { + useEffect(() => { + // do something + }, [props.value]); +} + +================================================================================ +`; diff --git a/tests/break-calls/react.js b/tests/break-calls/react.js new file mode 100644 index 000000000000..c013805f772c --- /dev/null +++ b/tests/break-calls/react.js @@ -0,0 +1,5 @@ +function helloWorld() { + useEffect(() => { + // do something + }, [props.value]) +} From e9cffa5f1151f57c88ab485631a0e829f36f002e Mon Sep 17 00:00:00 2001 From: Jed Fox Date: Fri, 7 Dec 2018 14:19:54 -0500 Subject: [PATCH 2/7] Format --- src/language-js/printer-estree.js | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/src/language-js/printer-estree.js b/src/language-js/printer-estree.js index e0308534f77e..6200966d1bf9 100644 --- a/src/language-js/printer-estree.js +++ b/src/language-js/printer-estree.js @@ -3802,7 +3802,8 @@ function shouldGroupFirstArg(args) { secondArg.type !== "FunctionExpression" && secondArg.type !== "ArrowFunctionExpression" && secondArg.type !== "ConditionalExpression" && - (!couldGroupArg(secondArg) || (secondArg.type === 'ArrayExpression' && !secondArg.comments)) + (!couldGroupArg(secondArg) || + (secondArg.type === 'ArrayExpression' && !secondArg.comments)) ); } From 526998099353b34a09c4f5d564360120e793ff1e Mon Sep 17 00:00:00 2001 From: Jed Fox Date: Fri, 7 Dec 2018 14:38:54 -0500 Subject: [PATCH 3/7] Format --- src/language-js/printer-estree.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/language-js/printer-estree.js b/src/language-js/printer-estree.js index 6200966d1bf9..ea2c591c4ca9 100644 --- a/src/language-js/printer-estree.js +++ b/src/language-js/printer-estree.js @@ -3803,7 +3803,7 @@ function shouldGroupFirstArg(args) { secondArg.type !== "ArrowFunctionExpression" && secondArg.type !== "ConditionalExpression" && (!couldGroupArg(secondArg) || - (secondArg.type === 'ArrayExpression' && !secondArg.comments)) + (secondArg.type === "ArrayExpression" && !secondArg.comments)) ); } From 91906ba22438afa0fe5e10c64a1fcf3cfa484ff3 Mon Sep 17 00:00:00 2001 From: Jed Fox Date: Sat, 8 Dec 2018 07:37:51 -0500 Subject: [PATCH 4/7] [Refactor] remove unnecessary condition `canHaveTrailingComma` is defined as `I(lastElem && ...)`, which will always be true when `lastElem === null`. --- src/language-js/printer-estree.js | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/src/language-js/printer-estree.js b/src/language-js/printer-estree.js index ea2c591c4ca9..9c631b5c1441 100644 --- a/src/language-js/printer-estree.js +++ b/src/language-js/printer-estree.js @@ -1518,8 +1518,7 @@ function printPathNoParens(path, options, print, args) { // // Note that getLast returns null if the array is empty, but // we already check for an empty array just above so we are safe - const needsForcedTrailingComma = - canHaveTrailingComma && lastElem === null; + const needsForcedTrailingComma = lastElem === null; parts.push( group( From 38c82a5f1d18c96998fdcd6c7c293d2991beaac6 Mon Sep 17 00:00:00 2001 From: Jed Fox Date: Sat, 8 Dec 2018 18:08:17 -0500 Subject: [PATCH 5/7] Use a hacky method to allow the array to break --- src/language-js/printer-estree.js | 20 +++++++++++++-- .../__snapshots__/jsfmt.spec.js.snap | 25 +++++++++++++++++++ tests/break-calls/react.js | 7 ++++++ 3 files changed, 50 insertions(+), 2 deletions(-) diff --git a/src/language-js/printer-estree.js b/src/language-js/printer-estree.js index 9c631b5c1441..afb53b9be8c4 100644 --- a/src/language-js/printer-estree.js +++ b/src/language-js/printer-estree.js @@ -3801,8 +3801,7 @@ function shouldGroupFirstArg(args) { secondArg.type !== "FunctionExpression" && secondArg.type !== "ArrowFunctionExpression" && secondArg.type !== "ConditionalExpression" && - (!couldGroupArg(secondArg) || - (secondArg.type === "ArrayExpression" && !secondArg.comments)) + !couldGroupArg(secondArg) ); } @@ -3870,6 +3869,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 index 88528066186a..eeaa0e037a39 100644 --- a/tests/break-calls/__snapshots__/jsfmt.spec.js.snap +++ b/tests/break-calls/__snapshots__/jsfmt.spec.js.snap @@ -129,6 +129,13 @@ function helloWorld() { }, [props.value]) } +function helloWorld() { + 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(() => { @@ -136,5 +143,23 @@ function helloWorld() { }, [props.value]); } +function helloWorld() { + 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 index c013805f772c..361234be153a 100644 --- a/tests/break-calls/react.js +++ b/tests/break-calls/react.js @@ -3,3 +3,10 @@ function helloWorld() { // do something }, [props.value]) } + +function helloWorld() { + 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]) +} + From d5b7d2dfe44270f03e433bb3d97df263176d828e Mon Sep 17 00:00:00 2001 From: Jed Fox Date: Sun, 9 Dec 2018 12:12:15 -0500 Subject: [PATCH 6/7] Revert "[Refactor] remove unnecessary condition" This reverts commit 91906ba22438afa0fe5e10c64a1fcf3cfa484ff3. --- src/language-js/printer-estree.js | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/src/language-js/printer-estree.js b/src/language-js/printer-estree.js index afb53b9be8c4..c01f4cd5627c 100644 --- a/src/language-js/printer-estree.js +++ b/src/language-js/printer-estree.js @@ -1518,7 +1518,8 @@ function printPathNoParens(path, options, print, args) { // // Note that getLast returns null if the array is empty, but // we already check for an empty array just above so we are safe - const needsForcedTrailingComma = lastElem === null; + const needsForcedTrailingComma = + canHaveTrailingComma && lastElem === null; parts.push( group( From 89365cd725433635e95d519956ab16ecff82cb4d Mon Sep 17 00:00:00 2001 From: Jed Fox Date: Sun, 9 Dec 2018 12:17:24 -0500 Subject: [PATCH 7/7] Add tests for `React.useEffect` form --- .../__snapshots__/jsfmt.spec.js.snap | 32 ++++++++++++++++--- tests/break-calls/react.js | 10 ++++-- 2 files changed, 36 insertions(+), 6 deletions(-) diff --git a/tests/break-calls/__snapshots__/jsfmt.spec.js.snap b/tests/break-calls/__snapshots__/jsfmt.spec.js.snap index eeaa0e037a39..ca9195dcaeef 100644 --- a/tests/break-calls/__snapshots__/jsfmt.spec.js.snap +++ b/tests/break-calls/__snapshots__/jsfmt.spec.js.snap @@ -127,10 +127,16 @@ 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 helloWorld() { - useEffect(() => { +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]) } @@ -141,10 +147,28 @@ 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 helloWorld() { - useEffect(() => { +function helloWorldWithReact() { + React.useEffect(() => { + // do something + }, [props.value]); + React.useEffect(() => { // do something }, [ props.value, diff --git a/tests/break-calls/react.js b/tests/break-calls/react.js index 361234be153a..8400ca7967cd 100644 --- a/tests/break-calls/react.js +++ b/tests/break-calls/react.js @@ -2,10 +2,16 @@ 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 helloWorld() { - useEffect(() => { +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]) }