Handle JSX Fragment sytax for jsx-wrap-multiline.

Add tests to verify positive and negative cases. Upgrade ts devDependency to 2.6.2.
palantir · Dec 13, 2017 · 85c6931 · 85c6931
1 parent ac4295b
commit 85c6931
Show file tree

Hide file tree

Showing 5 changed files with 45 additions and 12 deletions.
diff --git a/package.json b/package.json
@@ -34,6 +34,6 @@
     "path": "^0.12.7",
     "tslint": "^5.5.0",
     "tslint-language-service": "^0.9.6",
-    "typescript": "~2.4.2"
+    "typescript": "~2.6.2"
   }
 }
diff --git a/src/rules/jsxAlignmentRule.ts b/src/rules/jsxAlignmentRule.ts
@@ -68,20 +68,21 @@ function walk(ctx: Lint.WalkContext<void>) {
     function checkElement(
         elementOpen: ts.LineAndCharacter,
         attributes: Array<ts.JsxAttribute | ts.JsxSpreadAttribute> // TS <=2.2
-            | { properties: Array<ts.JsxAttribute | ts.JsxSpreadAttribute> }, // TS 2.3
+            | { properties: Array<ts.JsxAttribute | ts.JsxSpreadAttribute> } // TS 2.3
+            | ts.JsxAttributes, // TS 2.6
         elementClose: ts.LineAndCharacter,
         closingTag?: ts.JsxClosingElement,
     ) {
-        attributes = Array.isArray(attributes) ? attributes : attributes.properties;
-        if (attributes.length === 0) {
+        const attrs = Array.isArray(attributes) ? attributes : attributes.properties;
+        if (attrs.length === 0) {
             return;
         }
 
         // in a line like "const element = <Foo",
         // we want the initial indent to be the start of "const" instead of the start of "<Foo"
         const initialIndent = getFirstNonWhitespaceCharacter(elementOpen.line);
 
-        const firstAttr = attributes[0];
+        const firstAttr = attrs[0];
         const firstAttrCharacter = getCharacter(firstAttr);
 
         // ensure that first attribute is not on the same line as the start of the tag
@@ -90,7 +91,7 @@ function walk(ctx: Lint.WalkContext<void>) {
         }
 
         let lastSeenLine = -1;
-        for (const attr of attributes) {
+        for (const attr of attrs) {
             const character = getCharacter(attr);
 
             // ensure each attribute is indented further than the start of the tag

diff --git a/src/rules/jsxWrapMultilineRule.ts b/src/rules/jsxWrapMultilineRule.ts
@@ -49,7 +49,7 @@ class JsxWrapMultilineWalker extends Lint.AbstractWalker<void> {
 
     public walk(sourceFile: ts.SourceFile) {
         const cb = (node: ts.Node): void => {
-            if (isJsxElement(node) || isJsxSelfClosingElement(node)) {
+            if (isJsxElement(node) || isJsxSelfClosingElement(node) || this.isJSXFragment(node)) {
                 this.checkNode(node, sourceFile);
             } else {
                 return ts.forEachChild(node, cb);
@@ -59,7 +59,7 @@ class JsxWrapMultilineWalker extends Lint.AbstractWalker<void> {
         return ts.forEachChild(sourceFile, cb);
     }
 
-    private checkNode(node: ts.JsxElement | ts.JsxSelfClosingElement, sourceFile: ts.SourceFile) {
+    private checkNode(node: ts.JsxElement | ts.JsxSelfClosingElement | ts.JsxFragment, sourceFile: ts.SourceFile) {
         const startLine = this.getLine(node.getStart(this.sourceFile));
         const endLine = this.getLine(node.getEnd());
 
@@ -72,7 +72,7 @@ class JsxWrapMultilineWalker extends Lint.AbstractWalker<void> {
             return;
         }
 
-        if (node.parent.kind === ts.SyntaxKind.JsxElement) {
+        if (isJsxElement(node.parent) || this.isJSXFragment(node.parent)) {
             return;
         }
 
@@ -105,6 +105,10 @@ class JsxWrapMultilineWalker extends Lint.AbstractWalker<void> {
         }
     }
 
+    private isJSXFragment(node: ts.Node): node is ts.JsxFragment {
+        return node.kind === ts.SyntaxKind.JsxFragment;
+    }
+
     private getScanner(sourceFile: ts.SourceFile): ts.Scanner {
         if (this.scanner === undefined) {
             this.scanner = ts.createScanner(ts.ScriptTarget.ES5, false, ts.LanguageVariant.Standard, sourceFile.text);

diff --git a/test/rules/jsx-wrap-multiline/test.tsx.lint b/test/rules/jsx-wrap-multiline/test.tsx.lint
@@ -74,6 +74,34 @@ const goodFunctionWrap = mount<ITestComponentProps, {}>(
     />
 );
 
+const goodMultilineWithFragments = (
+    <>
+        <div
+            className="my-class"
+            tabIndex={-1}
+        >
+            {children}
+        </div>
+    </>
+);
+
+const badMultilineWithFragments = <>
+                                  ~~~
+        <div
+~~~~~~~~~~~~~
+            className="my-class"
+~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
+            tabIndex={-1}
+~~~~~~~~~~~~~~~~~~~~~~~~~~
+        >
+~~~~~~~~~~
+        {children}
+~~~~~~~~~~~~~~~~~~~
+    </div>
+~~~~~~~~~~~
+</>;
+~~~   [Multiline JSX elements must be wrapped in parentheses]
+
 shallowRender(
     <TestComponent2 />
 );

diff --git a/yarn.lock b/yarn.lock
@@ -485,9 +485,9 @@ tsutils@^2.7.1, tsutils@^2.8.0:
   dependencies:
     tslib "^1.7.1"
 
-typescript@~2.4.2:
-  version "2.4.2"
-  resolved "https://registry.yarnpkg.com/typescript/-/typescript-2.4.2.tgz#f8395f85d459276067c988aa41837a8f82870844"
+typescript@~2.6.2:
+  version "2.6.2"
+  resolved "https://registry.yarnpkg.com/typescript/-/typescript-2.6.2.tgz#3c5b6fd7f6de0914269027f03c0946758f7673a4"
 
 util@^0.10.3:
   version "0.10.3"