diff --git a/src/language-js/printer-estree.js b/src/language-js/printer-estree.js index 81fc2f852dc1..96019523ac22 100644 --- 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 index 196c17df4f92..ca9195dcaeef 100644 --- 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 new file mode 100644 index 000000000000..8400ca7967cd --- /dev/null +++ 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]) +} +