From 20ed8721bd8f5418b3fe1e5ff9cb8f18b6cfc1b3 Mon Sep 17 00:00:00 2001 From: Douglas Miller Date: Wed, 13 Dec 2017 17:04:51 -0500 Subject: [PATCH] Handle JSX Fragment sytax for jsx-wrap-multiline. Add tests to verify positive and negative cases. Upgrade ts devDependency to 2.6.2. --- package.json | 4 +-- src/rules/jsxAlignmentRule.ts | 11 ++++---- src/rules/jsxWrapMultilineRule.ts | 8 +++--- test/rules/jsx-wrap-multiline/test.tsx.lint | 28 +++++++++++++++++++++ yarn.lock | 20 +++++++-------- 5 files changed, 50 insertions(+), 21 deletions(-) diff --git a/package.json b/package.json index c0a2ee0..5ec5fc9 100644 --- a/package.json +++ b/package.json @@ -18,7 +18,7 @@ "verify": "npm-run-all build lint test" }, "dependencies": { - "tsutils": "^2.8.0" + "tsutils": "^2.13.1" }, "peerDependencies": { "tslint": "^5.1.0", @@ -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 index dd7269f..45aefde 100644 --- a/src/rules/jsxAlignmentRule.ts +++ b/src/rules/jsxAlignmentRule.ts @@ -68,12 +68,13 @@ function walk(ctx: Lint.WalkContext) { function checkElement( elementOpen: ts.LineAndCharacter, attributes: Array // TS <=2.2 - | { properties: Array }, // TS 2.3 + | { properties: Array } // 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; } @@ -81,7 +82,7 @@ function walk(ctx: Lint.WalkContext) { // we want the initial indent to be the start of "const" instead of the start of ") { } 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 index a267d0a..a1a0594 100644 --- a/src/rules/jsxWrapMultilineRule.ts +++ b/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 { 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 { 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 { return; } - if (node.parent.kind === ts.SyntaxKind.JsxElement) { + if (isJsxElement(node.parent) || isJsxFragment(node.parent)) { return; } diff --git a/test/rules/jsx-wrap-multiline/test.tsx.lint b/test/rules/jsx-wrap-multiline/test.tsx.lint index 55ac05d..d970068 100644 --- 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( /> ); +const goodMultilineWithFragments = ( + <> +
+ {children} +
+ +); + +const badMultilineWithFragments = <> + ~~~ +
+~~~~~~~~~~ + {children} +~~~~~~~~~~~~~~~~~~~ +
+~~~~~~~~~~~ +; +~~~ [Multiline JSX elements must be wrapped in parentheses] + shallowRender( ); diff --git a/yarn.lock b/yarn.lock index 2730d91..6e5abf8 100644 --- a/yarn.lock +++ b/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"