From fba406683780aa9cc8d77aa6d27b119ec15f6e7a Mon Sep 17 00:00:00 2001 From: Sergei Dryganets Date: Tue, 9 Jan 2018 15:34:04 -0800 Subject: [PATCH 1/2] Added new jsx-ban-elements rule to ban jsx elements --- README.md | 2 + package.json | 2 +- src/rules/jsxBanElementsRule.ts | 76 +++++++++++++++++++++++ test/rules/jsx-ban-elements/test.tsx.lint | 8 +++ test/rules/jsx-ban-elements/tslint.json | 7 +++ 5 files changed, 94 insertions(+), 1 deletion(-) create mode 100644 src/rules/jsxBanElementsRule.ts create mode 100644 test/rules/jsx-ban-elements/test.tsx.lint create mode 100644 test/rules/jsx-ban-elements/tslint.json diff --git a/README.md b/README.md index ea528ef..fa42cd7 100644 --- a/README.md +++ b/README.md @@ -52,6 +52,8 @@ The built-in configuration preset you get with `"extends": "tslint-react"` is se size={size} /> ``` +- `jsx-ban-elements` (since v3.3.4) + - Allows blacklisting of JSX elements with an optional explanatory message in the reported failure. - `jsx-ban-props` (since v2.3.0) - Allows blacklisting of props in JSX with an optional explanatory message in the reported failure. - `jsx-boolean-value` (since v2.5.0) diff --git a/package.json b/package.json index 7c87780..89bf66f 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "tslint-react", - "version": "3.3.3", + "version": "3.3.4", "description": "Lint rules related to React & JSX for TSLint", "main": "tslint-react.json", "scripts": { diff --git a/src/rules/jsxBanElementsRule.ts b/src/rules/jsxBanElementsRule.ts new file mode 100644 index 0000000..3b10e21 --- /dev/null +++ b/src/rules/jsxBanElementsRule.ts @@ -0,0 +1,76 @@ +/** + * @license + * Copyright 2018 Palantir Technologies, Inc. + * + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ +import * as Lint from "tslint"; +import { isJsxOpeningElement, isJsxSelfClosingElement } from "tsutils"; +import * as ts from "typescript"; + +interface IOption { + pattern: RegExp; + message?: string; +} + +export class Rule extends Lint.Rules.AbstractRule { + /* tslint:disable:object-literal-sort-keys */ + public static metadata: Lint.IRuleMetadata = { + ruleName: "jsx-ban-elements", + description: Lint.Utils.dedent` + Bans specific jsx elements from being used.`, + options: { + type: "list", + listType: { + type: "array", + items: { type: "string" }, + minLength: 1, + maxLength: 2, + }, + }, + optionsDescription: Lint.Utils.dedent` + A list of \`["regex", "optional explanation here"]\`, which bans + types that match \`regex\``, + optionExamples: [[true, ["Object", "Use {} instead."], ["String"]]], + type: "typescript", + typescriptOnly: true, + }; + /* tslint:enable:object-literal-sort-keys */ + + public static FAILURE_STRING_FACTORY(elementName: string, messageAddition?: string) { + return `JSX element '${elementName}' is banned.${messageAddition !== undefined ? ` ${messageAddition}` : ""}`; + } + + public apply(sourceFile: ts.SourceFile): Lint.RuleFailure[] { + return this.applyWithFunction(sourceFile, walk, this.ruleArguments.map(parseOption)); + } +} + +function parseOption([pattern, message]: [string, string | undefined]): IOption { + return {message, pattern: new RegExp(`^${pattern}$`)}; +} + +function walk(ctx: Lint.WalkContext) { + return ts.forEachChild(ctx.sourceFile, function cb(node: ts.Node): void { + if (isJsxOpeningElement(node) || isJsxSelfClosingElement(node)) { + const typeName = node.tagName.getText(); + for (const ban of ctx.options) { + if (ban.pattern.test(typeName)) { + ctx.addFailureAtNode(node, Rule.FAILURE_STRING_FACTORY(typeName, ban.message)); + break; + } + } + } + return ts.forEachChild(node, cb); + }); +} diff --git a/test/rules/jsx-ban-elements/test.tsx.lint b/test/rules/jsx-ban-elements/test.tsx.lint new file mode 100644 index 0000000..4aa0bc8 --- /dev/null +++ b/test/rules/jsx-ban-elements/test.tsx.lint @@ -0,0 +1,8 @@ +baz +~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ [JSX element 'span' is banned. Use div instead.] + + +~~~~~~~~~~~~~~~ [JSX element 'span' is banned. Use div instead.] + + + diff --git a/test/rules/jsx-ban-elements/tslint.json b/test/rules/jsx-ban-elements/tslint.json new file mode 100644 index 0000000..4dd8913 --- /dev/null +++ b/test/rules/jsx-ban-elements/tslint.json @@ -0,0 +1,7 @@ +{ + "rules": { + "jsx-ban-elements": [true, + ["span", "Use div instead."] + ] + } +} From 47d3622d32e4f8300fd4db5202e06e97616e52a4 Mon Sep 17 00:00:00 2001 From: Sergei Dryganets Date: Thu, 11 Jan 2018 11:27:47 -0800 Subject: [PATCH 2/2] review fixes --- package.json | 2 +- src/rules/jsxBanElementsRule.ts | 6 +++--- test/rules/jsx-ban-elements/test.tsx.lint | 4 ++-- test/rules/jsx-ban-elements/tslint.json | 8 +++++--- 4 files changed, 11 insertions(+), 9 deletions(-) diff --git a/package.json b/package.json index 89bf66f..7c87780 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "tslint-react", - "version": "3.3.4", + "version": "3.3.3", "description": "Lint rules related to React & JSX for TSLint", "main": "tslint-react.json", "scripts": { diff --git a/src/rules/jsxBanElementsRule.ts b/src/rules/jsxBanElementsRule.ts index 3b10e21..86df5c0 100644 --- a/src/rules/jsxBanElementsRule.ts +++ b/src/rules/jsxBanElementsRule.ts @@ -28,7 +28,7 @@ export class Rule extends Lint.Rules.AbstractRule { public static metadata: Lint.IRuleMetadata = { ruleName: "jsx-ban-elements", description: Lint.Utils.dedent` - Bans specific jsx elements from being used.`, + Bans specific JSX elements from being used.`, options: { type: "list", listType: { @@ -57,7 +57,7 @@ export class Rule extends Lint.Rules.AbstractRule { } function parseOption([pattern, message]: [string, string | undefined]): IOption { - return {message, pattern: new RegExp(`^${pattern}$`)}; + return {message, pattern: new RegExp(`${pattern}`)}; } function walk(ctx: Lint.WalkContext) { @@ -66,7 +66,7 @@ function walk(ctx: Lint.WalkContext) { const typeName = node.tagName.getText(); for (const ban of ctx.options) { if (ban.pattern.test(typeName)) { - ctx.addFailureAtNode(node, Rule.FAILURE_STRING_FACTORY(typeName, ban.message)); + ctx.addFailureAtNode(node.tagName, Rule.FAILURE_STRING_FACTORY(typeName, ban.message)); break; } } diff --git a/test/rules/jsx-ban-elements/test.tsx.lint b/test/rules/jsx-ban-elements/test.tsx.lint index 4aa0bc8..0055eb6 100644 --- a/test/rules/jsx-ban-elements/test.tsx.lint +++ b/test/rules/jsx-ban-elements/test.tsx.lint @@ -1,8 +1,8 @@ baz -~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ [JSX element 'span' is banned. Use div instead.] + ~~~~ [JSX element 'span' is banned. Use div instead.] -~~~~~~~~~~~~~~~ [JSX element 'span' is banned. Use div instead.] + ~~~~ [JSX element 'span' is banned. Use div instead.] diff --git a/test/rules/jsx-ban-elements/tslint.json b/test/rules/jsx-ban-elements/tslint.json index 4dd8913..3dbd5be 100644 --- a/test/rules/jsx-ban-elements/tslint.json +++ b/test/rules/jsx-ban-elements/tslint.json @@ -1,7 +1,9 @@ { "rules": { - "jsx-ban-elements": [true, - ["span", "Use div instead."] - ] + "jsx-ban-elements": { + "options": [ + ["span", "Use div instead."] + ] + } } }