Merge pull request #109 from ony3000/dogfooding

Fix line wrapping in JSX mapped from object references that include optional chaining

Author: ony3000

src/core-parts/finder.ts

@@ -158,20 +158,22 @@ export function findTargetClassNameNodes(ast: AST, options: ResolvedOptions): Cl
         recursiveProps = ['left', 'right'];
         break;
       }
-      case 'CallExpression': {
+      case 'CallExpression':
+      case 'OptionalCallExpression': {
         recursiveProps = ['arguments'];
         break;
       }
-      case 'ConditionalExpression':
-      case 'IfStatement': {
-        recursiveProps = ['consequent', 'alternate'];
-        break;
-      }
+      case 'ChainExpression':
       case 'ExpressionStatement':
       case 'JSXExpressionContainer': {
         recursiveProps = ['expression'];
         break;
       }
+      case 'ConditionalExpression':
+      case 'IfStatement': {
+        recursiveProps = ['consequent', 'alternate'];
+        break;
+      }
       case 'ExportDefaultDeclaration':
       case 'ExportNamedDeclaration': {
         recursiveProps = ['declaration'];

tests/babel/others/absolute.test.ts

@@ -324,6 +324,42 @@ function Foo() {
   }
   return elem;
 }
+`,
+    options: {
+      printWidth: 80,
+    },
+  },
+  {
+    name: 'JSX mapped from object references including optional chaining',
+    input: `
+function Foo() {
+  return (
+    <div>
+      {foo?.data.map((_, index) => (
+        <div key={index} className="lorem ipsum dolor sit amet consectetur adipiscing elit proin ex massa hendrerit eu posuere eu volutpat id neque pellentesque">
+          content
+        </div>
+      ))}
+    </div>
+  );
+}
+`,
+    output: `function Foo() {
+  return (
+    <div>
+      {foo?.data.map((_, index) => (
+        <div
+          key={index}
+          className="lorem ipsum dolor sit amet consectetur adipiscing elit
+            proin ex massa hendrerit eu posuere eu volutpat id neque
+            pellentesque"
+        >
+          content
+        </div>
+      ))}
+    </div>
+  );
+}
 `,
     options: {
       printWidth: 80,

tests/babel/others/relative.test.ts

@@ -319,6 +319,41 @@ function Foo() {
   }
   return elem;
 }
+`,
+    options: {
+      printWidth: 80,
+    },
+  },
+  {
+    name: 'JSX mapped from object references including optional chaining',
+    input: `
+function Foo() {
+  return (
+    <div>
+      {foo?.data.map((_, index) => (
+        <div key={index} className="lorem ipsum dolor sit amet consectetur adipiscing elit proin ex massa hendrerit eu posuere eu volutpat id neque pellentesque">
+          content
+        </div>
+      ))}
+    </div>
+  );
+}
+`,
+    output: `function Foo() {
+  return (
+    <div>
+      {foo?.data.map((_, index) => (
+        <div
+          key={index}
+          className="lorem ipsum dolor sit amet consectetur adipiscing elit proin ex massa hendrerit
+            eu posuere eu volutpat id neque pellentesque"
+        >
+          content
+        </div>
+      ))}
+    </div>
+  );
+}
 `,
     options: {
       printWidth: 80,

tests/typescript/others/absolute.test.ts

@@ -324,6 +324,42 @@ function Foo() {
   }
   return elem;
 }
+`,
+    options: {
+      printWidth: 80,
+    },
+  },
+  {
+    name: 'JSX mapped from object references including optional chaining',
+    input: `
+function Foo() {
+  return (
+    <div>
+      {foo?.data.map((_, index) => (
+        <div key={index} className="lorem ipsum dolor sit amet consectetur adipiscing elit proin ex massa hendrerit eu posuere eu volutpat id neque pellentesque">
+          content
+        </div>
+      ))}
+    </div>
+  );
+}
+`,
+    output: `function Foo() {
+  return (
+    <div>
+      {foo?.data.map((_, index) => (
+        <div
+          key={index}
+          className="lorem ipsum dolor sit amet consectetur adipiscing elit
+            proin ex massa hendrerit eu posuere eu volutpat id neque
+            pellentesque"
+        >
+          content
+        </div>
+      ))}
+    </div>
+  );
+}
 `,
     options: {
       printWidth: 80,

tests/typescript/others/relative.test.ts

@@ -319,6 +319,41 @@ function Foo() {
   }
   return elem;
 }
+`,
+    options: {
+      printWidth: 80,
+    },
+  },
+  {
+    name: 'JSX mapped from object references including optional chaining',
+    input: `
+function Foo() {
+  return (
+    <div>
+      {foo?.data.map((_, index) => (
+        <div key={index} className="lorem ipsum dolor sit amet consectetur adipiscing elit proin ex massa hendrerit eu posuere eu volutpat id neque pellentesque">
+          content
+        </div>
+      ))}
+    </div>
+  );
+}
+`,
+    output: `function Foo() {
+  return (
+    <div>
+      {foo?.data.map((_, index) => (
+        <div
+          key={index}
+          className="lorem ipsum dolor sit amet consectetur adipiscing elit proin ex massa hendrerit
+            eu posuere eu volutpat id neque pellentesque"
+        >
+          content
+        </div>
+      ))}
+    </div>
+  );
+}
 `,
     options: {
       printWidth: 80,