feature: @putout/printer: JSXElement: indent

Author: coderaiser

lib/tokenize/jsx/fixture/jsx-element-nested-with-attributes.js

@@ -7,4 +7,25 @@ function App(props) {
             />
         </section>
     );
+}
+
+function Login(props) {
+    return (
+        <form
+            onSubmit={submit}
+            className="block inline-block width"
+            action="/login"
+            method="post"
+        >
+            <input
+                required
+                autoCapitalize="off"
+                autoCorrect="off"
+                autoFocus
+                id="username"
+                name="username"
+                tabIndex="1"
+            />
+        </form>
+    );
 }

lib/tokenize/jsx/indent.js

@@ -3,16 +3,12 @@ import {createTypeChecker} from '#type-checker';
 
 const {isFunction} = types;
 
-export function isNeedIndent(path) {
-    if (hasComplexAttribute(path))
-        return false;
-    
-    const insideFn = path.parentPath.isArrowFunctionExpression();
-    const insideJSX = path.parentPath.isJSXElement();
-    const insideCall = path.parentPath.parentPath.isCallExpression();
-    
-    return insideJSX || insideFn && insideCall;
-}
+export const isNeedIndent = createTypeChecker([
+    ['-', hasComplexAttribute],
+    ['+: parentPath -> JSXElement'],
+    ['-: parentPath.parentPath -> !CallExpression'],
+    ['+: parentPath -> ArrowFunctionExpression'],
+]);
 
 const isComplexAttribute = createTypeChecker([
     ['+: -> JSXSpreadAttribute'],
@@ -24,6 +20,9 @@ const isComplexAttribute = createTypeChecker([
 function hasComplexAttribute(path) {
     const attributes = path.get('openingElement.attributes');
 
+    if (attributes.length > 4)
+        return true;
+    
     for (const attribute of attributes) {
         if (isComplexAttribute(attribute))
             return true;