From 9cb1347c5467624ac4c69b68a4829a83dddd2bde Mon Sep 17 00:00:00 2001
From: Sergei Dryganets <sergey.dryganets@gmail.com>
Date: Thu, 11 Jan 2018 11:39:41 -0800
Subject: [PATCH] New rule: jsx-ban-elements (#137)

---
 README.md                                 |  2 +
 src/rules/jsxBanElementsRule.ts           | 76 +++++++++++++++++++++++
 test/rules/jsx-ban-elements/test.tsx.lint |  8 +++
 test/rules/jsx-ban-elements/tslint.json   |  9 +++
 4 files changed, 95 insertions(+)
 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/src/rules/jsxBanElementsRule.ts b/src/rules/jsxBanElementsRule.ts
new file mode 100644
index 0000000..86df5c0
--- /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<IOption[]>) {
+    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.tagName, 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..0055eb6
--- /dev/null
+++ b/test/rules/jsx-ban-elements/test.tsx.lint
@@ -0,0 +1,8 @@
+<span className="primary" foo="bar">baz</span>
+ ~~~~ [JSX element 'span' is banned. Use div instead.]
+
+<span bar={5}/>
+ ~~~~ [JSX element 'span' is banned. Use div instead.]
+
+<button type="button">bar</button>
+
diff --git a/test/rules/jsx-ban-elements/tslint.json b/test/rules/jsx-ban-elements/tslint.json
new file mode 100644
index 0000000..3dbd5be
--- /dev/null
+++ b/test/rules/jsx-ban-elements/tslint.json
@@ -0,0 +1,9 @@
+{
+    "rules": {
+        "jsx-ban-elements": {
+            "options": [
+                ["span", "Use div instead."]
+            ]
+        }
+    }
+}