Merge pull request #13092 from SaschaNaz/jsxdangling

Format JSX expression and closing token

Author: mhegazy

src/services/formatting/formatting.ts

@@ -494,14 +494,26 @@ namespace ts.formatting {
                         case SyntaxKind.WhileKeyword:
                         case SyntaxKind.AtToken:
                             return indentation;
+                        case SyntaxKind.SlashToken:
+                        case SyntaxKind.GreaterThanToken: {
+                            if (container.kind === SyntaxKind.JsxOpeningElement ||
+                                container.kind === SyntaxKind.JsxClosingElement ||
+                                container.kind === SyntaxKind.JsxSelfClosingElement
+                            ) {
+                                return indentation;
+                            }
+                            break;
+                        }
                         case SyntaxKind.OpenBracketToken:
-                        case SyntaxKind.CloseBracketToken:
-                            return (container.kind === SyntaxKind.MappedType) ?
-                                indentation + getEffectiveDelta(delta, container) : indentation;
-                        default:
-                            // if token line equals to the line of containing node (this is a first token in the node) - use node indentation
-                            return nodeStartLine !== line ? indentation + getEffectiveDelta(delta, container) : indentation;
+                        case SyntaxKind.CloseBracketToken: {
+                            if (container.kind !== SyntaxKind.MappedType) {
+                                return indentation;
+                            }
+                            break;
+                        }
                     }
+                    // if token line equals to the line of containing node (this is a first token in the node) - use node indentation
+                    return nodeStartLine !== line ? indentation + getEffectiveDelta(delta, container) : indentation;
                 },
                 getIndentation: () => indentation,
                 getDelta: child => getEffectiveDelta(delta, child),

src/services/formatting/rules.ts

@@ -710,11 +710,18 @@ namespace ts.formatting {
                 case SyntaxKind.ClassDeclaration:
                 case SyntaxKind.ModuleDeclaration:
                 case SyntaxKind.EnumDeclaration:
-                case SyntaxKind.Block:
                 case SyntaxKind.CatchClause:
                 case SyntaxKind.ModuleBlock:
                 case SyntaxKind.SwitchStatement:
                     return true;
+                case SyntaxKind.Block: {
+                    const blockParent = context.currentTokenParent.parent;
+                    if (blockParent.kind !== SyntaxKind.ArrowFunction &&
+                        blockParent.kind !== SyntaxKind.FunctionExpression
+                    ) {
+                        return true;
+                    }
+                }
             }
             return false;
         }

tests/cases/fourslash/formatVariableDeclarationList.ts

@@ -37,4 +37,4 @@ verify.currentLineContentIs("            x = 'Foo';");
 goTo.marker("11");
 verify.currentLineContentIs("        return fun;");
 goTo.marker("12");
-verify.currentLineContentIs("    } (fun1));");
+verify.currentLineContentIs("    }(fun1));");

tests/cases/fourslash/formattingJsxElements.ts

@@ -72,6 +72,8 @@
 ////<span>)   </span>;/*closingParenInJsxElement2*/
 ////<Router        routes      =        { 3 }   /      >;/*jsxExpressionSpaces*/
 ////<Router routes={                (3)    } />;/*jsxExpressionSpaces2*/
+////<Router routes={() => {}}/*jsxExpressionSpaces3*/
+/////>;/*jsxDanglingSelfClosingToken*/
 
 format.document();
 goTo.marker("autoformat");
@@ -120,8 +122,7 @@ goTo.marker("expressionIndent");
 verify.indentationIs(12);
 
 goTo.marker("danglingBracketAutoformat")
-// TODO: verify.currentLineContentIs("    >");
-verify.currentLineContentIs("        >");
+verify.currentLineContentIs("    >");
 goTo.marker("closingTagAutoformat");
 verify.currentLineContentIs("    </div>");
 
@@ -145,4 +146,8 @@ verify.currentLineContentIs("<span>)   </span>;");
 goTo.marker("jsxExpressionSpaces");
 verify.currentLineContentIs("<Router routes={3} />;");
 goTo.marker("jsxExpressionSpaces2");
-verify.currentLineContentIs("<Router routes={(3)} />;");
+verify.currentLineContentIs("<Router routes={(3)} />;");
+goTo.marker("jsxExpressionSpaces3");
+verify.currentLineContentIs("<Router routes={() => { }}");
+goTo.marker("jsxDanglingSelfClosingToken");
+verify.currentLineContentIs("/>;");