fix(javascript): no regression for jsx in arrow function in jsx (#5343)

2018-11-06 15:38:30 +08:00 · 2018-11-06 15:38:30 +08:00 · b6691ba615
parent dbe86abc24
commit b6691ba615
3 changed files with 247 additions and 138 deletions
--- a/src/language-js/printer-estree.js
+++ b/src/language-js/printer-estree.js
@ -4874,11 +4874,9 @@ function printMemberChain(path, options, print) {
    printIndentedGroup(groups.slice(shouldMerge ? 2 : 1))
  ]);

-  const callExpressionCount = printedNodes.filter(
-    tuple =>
-      tuple.node.type === "CallExpression" ||
-      tuple.node.type === "OptionalCallExpression"
-  ).length;
+  const callExpressions = printedNodes
+    .map(({ node }) => node)
+    .filter(isCallOrOptionalCallExpression);

  // We don't want to print in one line if there's:
  //  * A comment.
@ -4887,8 +4885,21 @@ function printMemberChain(path, options, print) {
  // If the last group is a function it's okay to inline if it fits.
  if (
    hasComment ||
-    callExpressionCount >= 3 ||
-    printedGroups.slice(0, -1).some(willBreak)
+    callExpressions.length >= 3 ||
+    printedGroups.slice(0, -1).some(willBreak) ||
+    /**
+     *     scopes.filter(scope => scope.value !== '').map((scope, i) => {
+     *       // multi line content
+     *     })
+     */
+    (((lastGroupDoc, lastGroupNode) =>
+      isCallOrOptionalCallExpression(lastGroupNode) && willBreak(lastGroupDoc))(
+      getLast(printedGroups),
+      getLast(getLast(groups)).node
+    ) &&
+      callExpressions
+        .slice(0, -1)
+        .some(n => n.arguments.some(isFunctionOrArrowExpression)))
  ) {
    return group(expanded);
  }
@ -4902,6 +4913,12 @@ function printMemberChain(path, options, print) {
  ]);
 }

+function isCallOrOptionalCallExpression(node) {
+  return (
+    node.type === "CallExpression" || node.type === "OptionalCallExpression"
+  );
+}
+
 function isJSXNode(node) {
  return (
    node.type === "JSXElement" ||
@ -5443,12 +5460,11 @@ function maybeWrapJSXElementInParens(path, elem) {
    return elem;
  }

-  const shouldBreak =
-    matchAncestorTypes(path, [
-      "ArrowFunctionExpression",
-      "CallExpression",
-      "JSXExpressionContainer"
-    ]) && isMemberExpressionChain(path.getParentNode(1).callee);
+  const shouldBreak = matchAncestorTypes(path, [
+    "ArrowFunctionExpression",
+    "CallExpression",
+    "JSXExpressionContainer"
+  ]);

  return group(
    concat([
@ -6144,7 +6160,7 @@ function isTestCall(n, parent) {
  }
  if (n.arguments.length === 1) {
    if (isAngularTestWrapper(n) && parent && isTestCall(parent)) {
-      return isFunctionOrArrowExpression(n.arguments[0].type);
+      return isFunctionOrArrowExpression(n.arguments[0]);
    }

    if (isUnitTestSetUp(n)) {
@ -6161,7 +6177,7 @@ function isTestCall(n, parent) {
        return false;
      }
      return (
-        (isFunctionOrArrowExpression(n.arguments[1].type) &&
+        (isFunctionOrArrowExpression(n.arguments[1]) &&
          n.arguments[1].params.length <= 1) ||
        isAngularTestWrapper(n.arguments[1])
      );
@ -6199,8 +6215,11 @@ function isAngularTestWrapper(node) {
  );
 }

-function isFunctionOrArrowExpression(type) {
-  return type === "FunctionExpression" || type === "ArrowFunctionExpression";
+function isFunctionOrArrowExpression(node) {
+  return (
+    node.type === "FunctionExpression" ||
+    node.type === "ArrowFunctionExpression"
+  );
 }

 function isUnitTestSetUp(n) {
--- a/tests/jsx/snapshots/jsfmt.spec.js.snap
+++ b/tests/jsx/snapshots/jsfmt.spec.js.snap
@ -1782,6 +1782,16 @@ exports[`expression.js - flow-verify 1`] = `
    });
  }}
 </Component>;
+
+<SuspendyTree>
+  <div style={{ height: 200, overflow: "scroll" }}>
+    {Array(20)
+      .fill()
+      .map((_, i) => (
+        <h2 key={i}>{i + 1}</h2>
+      ))}
+  </div>
+</SuspendyTree>;
 ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
 <View
  style={{
@ -1917,6 +1927,16 @@ exports[`expression.js - flow-verify 1`] = `
  }}
 </Component>;

+<SuspendyTree>
+  <div style={{ height: 200, overflow: "scroll" }}>
+    {Array(20)
+      .fill()
+      .map((_, i) => (
+        <h2 key={i}>{i + 1}</h2>
+      ))}
+  </div>
+</SuspendyTree>;
+
 `;

 exports[`expression.js - flow-verify 2`] = `
@ -2041,6 +2061,16 @@ exports[`expression.js - flow-verify 2`] = `
    });
  }}
 </Component>;
+
+<SuspendyTree>
+  <div style={{ height: 200, overflow: "scroll" }}>
+    {Array(20)
+      .fill()
+      .map((_, i) => (
+        <h2 key={i}>{i + 1}</h2>
+      ))}
+  </div>
+</SuspendyTree>;
 ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
 <View
  style={{
@ -2176,6 +2206,16 @@ exports[`expression.js - flow-verify 2`] = `
  }}
 </Component>;

+<SuspendyTree>
+  <div style={{ height: 200, overflow: "scroll" }}>
+    {Array(20)
+      .fill()
+      .map((_, i) => (
+        <h2 key={i}>{i + 1}</h2>
+      ))}
+  </div>
+</SuspendyTree>;
+
 `;

 exports[`expression.js - flow-verify 3`] = `
@ -2300,6 +2340,16 @@ exports[`expression.js - flow-verify 3`] = `
    });
  }}
 </Component>;
+
+<SuspendyTree>
+  <div style={{ height: 200, overflow: "scroll" }}>
+    {Array(20)
+      .fill()
+      .map((_, i) => (
+        <h2 key={i}>{i + 1}</h2>
+      ))}
+  </div>
+</SuspendyTree>;
 ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
 <View
  style={{
@ -2435,6 +2485,16 @@ exports[`expression.js - flow-verify 3`] = `
  }}
 </Component>;

+<SuspendyTree>
+  <div style={{ height: 200, overflow: 'scroll' }}>
+    {Array(20)
+      .fill()
+      .map((_, i) => (
+        <h2 key={i}>{i + 1}</h2>
+      ))}
+  </div>
+</SuspendyTree>;
+
 `;

 exports[`expression.js - flow-verify 4`] = `
@ -2559,6 +2619,16 @@ exports[`expression.js - flow-verify 4`] = `
    });
  }}
 </Component>;
+
+<SuspendyTree>
+  <div style={{ height: 200, overflow: "scroll" }}>
+    {Array(20)
+      .fill()
+      .map((_, i) => (
+        <h2 key={i}>{i + 1}</h2>
+      ))}
+  </div>
+</SuspendyTree>;
 ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
 <View
  style={{
@ -2694,6 +2764,16 @@ exports[`expression.js - flow-verify 4`] = `
  }}
 </Component>;

+<SuspendyTree>
+  <div style={{ height: 200, overflow: 'scroll' }}>
+    {Array(20)
+      .fill()
+      .map((_, i) => (
+        <h2 key={i}>{i + 1}</h2>
+      ))}
+  </div>
+</SuspendyTree>;
+
 `;

 exports[`flow_fix_me.js - flow-verify 1`] = `
--- a/tests/jsx/expression.js
+++ b/tests/jsx/expression.js
@ -1,121 +1,131 @@
-<View
-  style={
-    {
-      someVeryLongStyle1: "true",
-      someVeryLongStyle2: "true",
-      someVeryLongStyle3: "true",
-      someVeryLongStyle4: "true"
-    }
-  }
-/>;
-
-<View
-  style={
-    [
-      {
-        someVeryLongStyle1: "true",
-        someVeryLongStyle2: "true",
-        someVeryLongStyle3: "true",
-        someVeryLongStyle4: "true"
-      }
-    ]
-  }
-/>;
-
-<Something>
-  {() => (
-    <SomethingElse>
-      <span />
-    </SomethingElse>
-  )}
-</Something>;
-
-<Something>
-  {items.map(item => (
-    <SomethingElse>
-      <span />
-    </SomethingElse>
-  ))}
-</Something>;
-
-<Something>
-  {function() {
-    return (
-      <SomethingElse>
-        <span />
-      </SomethingElse>
-    );
-  }}
-</Something>;
-
-<RadioListItem
-  key={option}
-  imageSource={this.props.veryBigItemImageSourceFunc &&
-    this.props.veryBigItemImageSourceFunc(option)}
-  imageSize={this.props.veryBigItemImageSize}
-  imageView={this.props.veryBigItemImageViewFunc &&
-    this.props.veryBigItemImageViewFunc(option)}
-  heading={this.props.displayTextFunc(option)}
-  value={option}
-/>;
-
-<ParentComponent prop={
-  <Child>
-    test
-  </Child>
-}/>;
-
-<BookingIntroPanel
-  prop="long_string_make_to_force_break"
-  logClick={data => doLogClick("short", "short", data)}
-/>;
-
-<BookingIntroPanel
-  logClick={data =>
-    doLogClick("long_name_long_name_long_name", "long_name_long_name_long_name", data)
-  }
-/>;
-
-<BookingIntroPanel
-  logClick={data => {
-    doLogClick("long_name_long_name_long_name", "long_name_long_name_long_name", data)
-  }}
-/>;
-
-<Component
-  onChange={(
-    key: "possible_key_1" | "possible_key_2" | "possible_key_3",
-    value: string | Immutable.List<string>,
-  ) => {
-    this.setState({
-      updatedTask: this.state.updatedTask.set(key, value)
-    });
-  }}
-/>;
-
-<BookingIntroPanel>
-  {data => doLogClick("short", "short", data)}
-</BookingIntroPanel>;
-
-<BookingIntroPanel>
-  {data =>
-    doLogClick("long_name_long_name_long_name", "long_name_long_name_long_name", data)
-  }
-</BookingIntroPanel>;
-
-<BookingIntroPanel>
-  {data => {
-    doLogClick("long_name_long_name_long_name", "long_name_long_name_long_name", data)
-  }}
-</BookingIntroPanel>;
-
-<Component>
-  {(
-    key: "possible_key_1" | "possible_key_2" | "possible_key_3",
-    value: string | Immutable.List<string>,
-  ) => {
-    this.setState({
-      updatedTask: this.state.updatedTask.set(key, value)
-    });
-  }}
-</Component>;
+<View
+  style={
+    {
+      someVeryLongStyle1: "true",
+      someVeryLongStyle2: "true",
+      someVeryLongStyle3: "true",
+      someVeryLongStyle4: "true"
+    }
+  }
+/>;
+
+<View
+  style={
+    [
+      {
+        someVeryLongStyle1: "true",
+        someVeryLongStyle2: "true",
+        someVeryLongStyle3: "true",
+        someVeryLongStyle4: "true"
+      }
+    ]
+  }
+/>;
+
+<Something>
+  {() => (
+    <SomethingElse>
+      <span />
+    </SomethingElse>
+  )}
+</Something>;
+
+<Something>
+  {items.map(item => (
+    <SomethingElse>
+      <span />
+    </SomethingElse>
+  ))}
+</Something>;
+
+<Something>
+  {function() {
+    return (
+      <SomethingElse>
+        <span />
+      </SomethingElse>
+    );
+  }}
+</Something>;
+
+<RadioListItem
+  key={option}
+  imageSource={this.props.veryBigItemImageSourceFunc &&
+    this.props.veryBigItemImageSourceFunc(option)}
+  imageSize={this.props.veryBigItemImageSize}
+  imageView={this.props.veryBigItemImageViewFunc &&
+    this.props.veryBigItemImageViewFunc(option)}
+  heading={this.props.displayTextFunc(option)}
+  value={option}
+/>;
+
+<ParentComponent prop={
+  <Child>
+    test
+  </Child>
+}/>;
+
+<BookingIntroPanel
+  prop="long_string_make_to_force_break"
+  logClick={data => doLogClick("short", "short", data)}
+/>;
+
+<BookingIntroPanel
+  logClick={data =>
+    doLogClick("long_name_long_name_long_name", "long_name_long_name_long_name", data)
+  }
+/>;
+
+<BookingIntroPanel
+  logClick={data => {
+    doLogClick("long_name_long_name_long_name", "long_name_long_name_long_name", data)
+  }}
+/>;
+
+<Component
+  onChange={(
+    key: "possible_key_1" | "possible_key_2" | "possible_key_3",
+    value: string | Immutable.List<string>,
+  ) => {
+    this.setState({
+      updatedTask: this.state.updatedTask.set(key, value)
+    });
+  }}
+/>;
+
+<BookingIntroPanel>
+  {data => doLogClick("short", "short", data)}
+</BookingIntroPanel>;
+
+<BookingIntroPanel>
+  {data =>
+    doLogClick("long_name_long_name_long_name", "long_name_long_name_long_name", data)
+  }
+</BookingIntroPanel>;
+
+<BookingIntroPanel>
+  {data => {
+    doLogClick("long_name_long_name_long_name", "long_name_long_name_long_name", data)
+  }}
+</BookingIntroPanel>;
+
+<Component>
+  {(
+    key: "possible_key_1" | "possible_key_2" | "possible_key_3",
+    value: string | Immutable.List<string>,
+  ) => {
+    this.setState({
+      updatedTask: this.state.updatedTask.set(key, value)
+    });
+  }}
+</Component>;
+
+<SuspendyTree>
+  <div style={{ height: 200, overflow: "scroll" }}>
+    {Array(20)
+      .fill()
+      .map((_, i) => (
+        <h2 key={i}>{i + 1}</h2>
+      ))}
+  </div>
+</SuspendyTree>;