Merge pull request #1 from grailed-code/nlistana/add-jsx-no-ampersands

Adds jsx-no-ampersands

.eslintrc

@@ -0,0 +1,13 @@
+// NOTE: Base config ran from `npx eslint --init`
+{
+  "env": {
+    "browser": true,
+    "commonjs": true,
+    "es2021": true
+  },
+  "parserOptions": {
+    "ecmaVersion": 12
+  },
+  "rules": {
+  }
+}

.gitignore

@@ -102,3 +102,6 @@ dist
 
 # TernJS port file
 .tern-port
+
+# VSCode
+.vscode/

docs/rules/jsx-no-ampersands.md

@@ -0,0 +1,24 @@
+## Disallow && condition inside JSX Embed. (react/jsx-embed-condition)
+This rule disallows use of && inside JSX Embeds to avoid conditional numbers from being rendered.
+
+## Why?
+Here is an [acrticle](https://kentcdodds.com/blog/use-ternaries-rather-than-and-and-in-jsx) explaining the problems that can happen when you use && to conditionally render content in JSX.
+
+## Rule Details
+Examples of incorrect code for this rule:
+
+<div>
+  {x && <MyProfile />}
+</div>
+<div>
+  {x || y && <strong>Hello</strong>}
+</div>
+Examples of correct code for this rule:
+
+<div>
+  {x ? <MyProfile /> : null}
+</div>
+// --
+<div>
+  {x || y ? <strong>Hello</strong> : null}
+</div>

index.js

@@ -0,0 +1,12 @@
+/**
+ * Minimal configuration based on `eslint-plugin-react`
+ * @see: https://github.com/yannickcr/eslint-plugin-react/blob/master/index.js
+ */
+
+const allRules = {
+  'jsx-no-ampersands': require('./lib/rules/jsx-no-ampersands'),
+}
+
+module.exports = {
+  rules: allRules,
+}

lib/rules/jsx-no-ampersands.js

@@ -0,0 +1,31 @@
+/**
+ * @fileoverview Prevents usage of && condition in JSX Embeds.
+ * @author Anees Iqbal <i@steelbrain.me>
+ * @see: https://github.com/yannickcr/eslint-plugin-react/blob/ee232bbaef4fb04740413d5048877559abf06222/lib/rules/jsx-embed-condition.js
+ * @see: https://kentcdodds.com/blog/use-ternaries-rather-than-and-and-in-jsx
+ */
+ 'use strict';
+
+ module.exports = {
+  // NOTE [@niculistana]: this is a slimmed down version of the export which does not include docs
+
+  create(context) {
+    return {
+      JSXExpressionContainer(node) {
+        if (
+          node.parent == null
+          || node.parent.type !== 'JSXElement'
+          || node.expression == null
+          || node.expression.type !== 'LogicalExpression'
+          || node.expression.operator === '??'
+        ) {
+          return;
+        }
+        context.report({
+          node,
+          message: 'Using && to condition JSX embeds is forbidden. Convert it to a ternary operation instead'
+        });
+      }
+    };
+  }
+};