Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Support JSX Fragment syntax for jsx-wrap-multiline. #130

Merged
merged 3 commits into from
Dec 20, 2017
Merged

Support JSX Fragment syntax for jsx-wrap-multiline. #130

Show file tree
Hide file tree
Changes from 2 commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
20ed872
Handle JSX Fragment sytax for jsx-wrap-multiline.
Dec 13, 2017
4a63031
Merge branch 'master' into jsx-wrap-multiline-fragments
adidahiya Dec 20, 2017
f1d55f3
Merge branch 'master' into jsx-wrap-multiline-fragments
adidahiya Dec 20, 2017
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 2 additions & 2 deletions package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,7 @@
"verify": "run-s build lint test"
},
"dependencies": {
"tsutils": "^2.8.0"
"tsutils": "^2.13.1"
},
"peerDependencies": {
"tslint": "^5.1.0",
Expand All @@ -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"
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

👍

},
"repository": {
"type": "git",
Expand Down
11 changes: 6 additions & 5 deletions src/rules/jsxAlignmentRule.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

TS 2.6.2 did not like the reassignment of attributes. Setting to a new variable and adding the typing resolved the type checks.

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
Expand All @@ -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
Expand Down
8 changes: 4 additions & 4 deletions src/rules/jsxWrapMultilineRule.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 {
Expand Down Expand Up @@ -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);
Expand All @@ -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());

Expand All @@ -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;
}

Expand Down
28 changes: 28 additions & 0 deletions test/rules/jsx-wrap-multiline/test.tsx.lint
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 />
);
Expand Down
20 changes: 10 additions & 10 deletions yarn.lock
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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"
Expand All @@ -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"
Expand Down