Handle JSX Fragment sytax for jsx-wrap-multiline. (#130)

Add tests to verify positive and negative cases. Upgrade ts devDependency to 2.6.2.

package.json

@@ -12,7 +12,7 @@
     "verify": "run-s build lint test"
   },
   "dependencies": {
-    "tsutils": "^2.8.0"
+    "tsutils": "^2.13.1"
   },
   "peerDependencies": {
     "tslint": "^5.1.0",
@@ -28,7 +28,7 @@
     "path": "^0.12.7",
     "tslint": "^5.5.0",
     "tslint-language-service": "^0.9.6",
-    "typescript": "~2.4.2"
+    "typescript": "~2.6.2"
   },
   "repository": {
     "type": "git",

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

src/rules/jsxWrapMultilineRule.ts

@@ -16,7 +16,7 @@
  */
 
 import * as Lint from "tslint";
-import { isJsxElement, isJsxSelfClosingElement } from "tsutils";
+import { isJsxElement, isJsxFragment, isJsxSelfClosingElement } from "tsutils";
 import * as ts from "typescript";
 
 export class Rule extends Lint.Rules.AbstractRule {
@@ -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) || 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) || isJsxFragment(node.parent)) {
             return;
         }
 

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 />
 );

yarn.lock

@@ -456,9 +456,9 @@ through@2, through@~2.3, through@~2.3.1:
   version "2.3.8"
   resolved "https://registry.yarnpkg.com/through/-/through-2.3.8.tgz#0dd4c9ffaabc357960b1b724115d7e0e86a2e1f5"
 
-tslib@^1.7.1:
-  version "1.7.1"
-  resolved "https://registry.yarnpkg.com/tslib/-/tslib-1.7.1.tgz#bc8004164691923a79fe8378bbeb3da2017538ec"
+tslib@^1.7.1, tslib@^1.8.0:
+  version "1.8.1"
+  resolved "https://registry.yarnpkg.com/tslib/-/tslib-1.8.1.tgz#6946af2d1d651a7b1863b531d6e5afa41aa44eac"
 
 tslint-language-service@^0.9.6:
   version "0.9.6"
@@ -479,15 +479,15 @@ tslint@^5.5.0:
     tslib "^1.7.1"
     tsutils "^2.7.1"
 
-tsutils@^2.7.1, tsutils@^2.8.0:
-  version "2.8.0"
-  resolved "https://registry.yarnpkg.com/tsutils/-/tsutils-2.8.0.tgz#0160173729b3bf138628dd14a1537e00851d814a"
+tsutils@^2.13.1, tsutils@^2.7.1:
+  version "2.13.1"
+  resolved "https://registry.yarnpkg.com/tsutils/-/tsutils-2.13.1.tgz#d6d1cc0f7c04cf9fb3b28a292973cffb9cfbe09a"
   dependencies:
-    tslib "^1.7.1"
+    tslib "^1.8.0"
 
-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"