Merge pull request #4646 from Microsoft/formattingJsxAttributes

handle jsx identifiers correctly, indent content of JsxSelfClosingEle…

Author: vladima

src/services/formatting/formattingScanner.ts

@@ -17,7 +17,8 @@ namespace ts.formatting {
         Scan,
         RescanGreaterThanToken,
         RescanSlashToken,
-        RescanTemplateToken
+        RescanTemplateToken,
+        RescanJsxIdentifier
     }
 
     export function getFormattingScanner(sourceFile: SourceFile, startPos: number, endPos: number): FormattingScanner {
@@ -108,6 +109,20 @@ namespace ts.formatting {
 
             return false;
         }
+        
+        function shouldRescanJsxIdentifier(node: Node): boolean {
+            if (node.parent) {
+                switch(node.parent.kind) {
+                    case SyntaxKind.JsxAttribute:
+                    case SyntaxKind.JsxOpeningElement:
+                    case SyntaxKind.JsxClosingElement:
+                    case SyntaxKind.JsxSelfClosingElement:
+                        return node.kind === SyntaxKind.Identifier;
+                }
+            }
+            
+            return false;
+        }
 
         function shouldRescanSlashToken(container: Node): boolean {
             return container.kind === SyntaxKind.RegularExpressionLiteral;
@@ -141,7 +156,9 @@ namespace ts.formatting {
                     ? ScanAction.RescanSlashToken 
                     : shouldRescanTemplateToken(n)
                         ? ScanAction.RescanTemplateToken
-                        : ScanAction.Scan
+                        : shouldRescanJsxIdentifier(n)
+                            ? ScanAction.RescanJsxIdentifier 
+                            : ScanAction.Scan
 
             if (lastTokenInfo && expectedScanAction === lastScanAction) {
                 // readTokenInfo was called before with the same expected scan action.
@@ -176,6 +193,10 @@ namespace ts.formatting {
                 currentToken = scanner.reScanTemplateToken();
                 lastScanAction = ScanAction.RescanTemplateToken;
             }
+            else if (expectedScanAction === ScanAction.RescanJsxIdentifier && currentToken === SyntaxKind.Identifier) {
+                currentToken = scanner.scanJsxIdentifier();
+                lastScanAction = ScanAction.RescanJsxIdentifier;
+            }
             else {
                 lastScanAction = ScanAction.Scan;
             }

src/services/formatting/smartIndenter.ts

@@ -431,6 +431,7 @@ namespace ts.formatting {
                 case SyntaxKind.ArrayBindingPattern:
                 case SyntaxKind.ObjectBindingPattern:
                 case SyntaxKind.JsxElement:
+                case SyntaxKind.JsxSelfClosingElement:
                 case SyntaxKind.MethodSignature:
                 case SyntaxKind.CallSignature:
                 case SyntaxKind.ConstructSignature:

tests/cases/fourslash/formattingJsxElements.ts

@@ -1,7 +1,7 @@
 /// <reference path='fourslash.ts' />
 
 //@Filename: file.tsx
-////function () {
+////function foo0() {
 ////    return (
 ////        <div className="commentBox" >
 ////Hello, World!/*autoformat*/
@@ -10,10 +10,76 @@
 ////    )
 ////}
 ////
+////function foo1() {
+////    return (
+////        <div className="commentBox" data-id="test">
+////Hello, World!/*autoformat1*/
+/////*indent1*/
+////        </div>
+////    )
+////}
+////
+////function foo2() {
+////    return (
+////        <div data-name="commentBox"
+////class1= {/*1*/
+////}>/*2*/
+////Hello, World!/*autoformat2*/
+/////*indent2*/
+////        </div>
+////    )
+////}
+////function foo3() {
+////    return (
+////        <jsx-element className="commentBox"
+////            class2= {/*3*/
+////            }>/*4*/
+////            Hello, World!/*autoformat3*/
+////        /*indent3*/
+////        </jsx-element>
+////    )
+////}
+////function foo4() {
+////    return (
+////        <jsx-element className="commentBox"
+////            class3= {/*5*/
+////            }/>/*6*/
+////    )
+////}
 
 
 format.document();
 goTo.marker("autoformat");
 verify.currentLineContentIs('            Hello, World!');
 goTo.marker("indent");
-verify.indentationIs(12);
+verify.indentationIs(12);
+
+goTo.marker("autoformat1");
+verify.currentLineContentIs('            Hello, World!');
+goTo.marker("indent1");
+verify.indentationIs(12);
+
+goTo.marker("1");
+verify.currentLineContentIs('            class1= {');
+goTo.marker("2");
+verify.currentLineContentIs('            }>');
+
+goTo.marker("autoformat2");
+verify.currentLineContentIs('            Hello, World!');
+goTo.marker("indent2");
+verify.indentationIs(12);
+
+goTo.marker("3");
+verify.currentLineContentIs('            class2= {');
+goTo.marker("4");
+verify.currentLineContentIs('            }>');
+
+goTo.marker("autoformat3");
+verify.currentLineContentIs('            Hello, World!');
+goTo.marker("indent3");
+verify.indentationIs(12);
+
+goTo.marker("5");
+verify.currentLineContentIs('            class3= {');
+goTo.marker("6");
+verify.currentLineContentIs('            }/>');