From 193c34c72072ebfb5accd27177c826fc8a7f0ee8 Mon Sep 17 00:00:00 2001
From: Sergei Dryganets <sergeyd@microsoft.com>
Date: Tue, 9 Jan 2018 15:34:04 -0800
Subject: [PATCH] Added new jsx-ban-elements rule to ban jsx elements

---
 README.md                                 |  2 +
 src/rules/jsxBanElementsRule.ts           | 76 +++++++++++++++++++++++
 test/rules/jsx-ban-elements/test.tsx.lint | 11 ++++
 test/rules/jsx-ban-elements/tslint.json   |  7 +++
 4 files changed, 96 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..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<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, 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..da1676a
--- /dev/null
+++ b/test/rules/jsx-ban-elements/test.tsx.lint
@@ -0,0 +1,11 @@
+<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>
+
+function imHarmless(foo){
+    console.log(foo);
+}
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."]
+        ]
+    }
+}