feat(eslint-plugin): added new plugin

Helps not to write complex constructs and function calls inside className.

Author: denisbalyko

packages/eslint-plugin/docs/rules/no-classname-runtime.md

@@ -0,0 +1,44 @@
+# @bem-react/no-classname-runtime
+
+Do not use the @bem-react/classname function in runtime code
+
+## Rule Details
+
+The classname method from @bem-react/classname is often used and called in the hottest places, sometimes you can take it to the import level, then the result can be passed as a string literal directly to className= " x"
+
+Examples of **incorrect** code for this rule:
+
+```typescript jsx
+// …
+render() {
+    return (
+        {items.map((item, idx, arr) => (
+            <div className={cn('Items')}>
+                <div className={cn('Item')}>
+                    ItemText
+                </div>
+            </div>
+        )}
+    )
+}
+```
+
+Examples of **correct** code for this rule:
+
+```typescript jsx
+const cnItems = cn('Items');
+const cnItem = cn('Item');
+
+// …
+render() {
+    return (
+        {items.map((item, idx, arr) => (
+            <div className={cnItems}>
+                <div className={cnItem}>
+                    ItemText
+                </div>
+            </div>
+        )}
+    )
+}
+```

packages/eslint-plugin/index.js

@@ -1,5 +1,6 @@
 module.exports = {
   rules: {
+    'no-classname-runtime': require('./lib/rules/no-classname-runtime'),
     'whitelist-levels-imports': require('./lib/rules/whitelist-levels-imports'),
   },
 }

packages/eslint-plugin/lib/rules/no-classname-runtime.js

@@ -0,0 +1,91 @@
+'use strict'
+
+module.exports = {
+  meta: {
+    docs: {
+      description: 'Do not use the @bem-react/classname function in runtime code',
+      category: 'perf',
+      recommended: true,
+    },
+  },
+
+  create: function(context) {
+    function isCanBeSimplified(arg) {
+      if (arg && (arg.type === 'Literal' || arg.type === 'Identifier')) return true
+
+      if (arg.type === 'MemberExpression') {
+        // Exception for this.props.x or this.state.x
+        if (
+          arg.object.type === 'ThisExpression' &&
+          (arg.property.name === 'props' || arg.property.name === 'state')
+        )
+          return false
+
+        return isCanBeSimplified(arg.object) && isCanBeSimplified(arg.property)
+      }
+
+      if (arg.type === 'Property') {
+        return isCanBeSimplified(arg.key) && isCanBeSimplified(arg.value)
+      }
+
+      if (arg.type === 'ObjectExpression') {
+        return isCanBeSlow(arg.properties)
+      }
+
+      if (arg.type === 'ArrayExpression') {
+        return isCanBeSlow(arg.elements)
+      }
+
+      if (arg.type === 'ConditionalExpression') {
+        return isCanBeSlow([arg.consequent, arg.alternate])
+      }
+
+      if (arg.type === 'BinaryExpression' || arg.type === 'LogicalExpression') {
+        return isCanBeSlow([arg.left, arg.right])
+      }
+
+      return false
+    }
+
+    function isCanBeSlow(args, dbg) {
+      return [].concat(args).every(isCanBeSimplified)
+    }
+
+    function isCallExpression(node) {
+      if (node.type === 'CallExpression' && isCanBeSlow(node.arguments)) {
+        return true
+      }
+
+      return false
+    }
+
+    return {
+      JSXAttribute: function(node) {
+        const isEvaluatedClassName =
+          node.name.type === 'JSXIdentifier' &&
+          node.name.name === 'className' &&
+          node.value.type === 'JSXExpressionContainer'
+
+        if (isEvaluatedClassName) {
+          const expression = node.value.expression
+          if (
+            // className={cn('x')}
+            isCallExpression(expression) ||
+            // className={isA ? cn('A') : cn('B')}
+            (expression.type === 'ConditionalExpression' &&
+              (isCallExpression(expression.consequent) ||
+                isCallExpression(expression.alternate))) ||
+            // className={isA && cn('A') || cn('B')} || className={isA ? cn('A') : cn('B')} ||
+            ((expression.type === 'BinaryExpression' || expression.type === 'LogicalExpression') &&
+              (isCallExpression(expression.left) || isCallExpression(expression.right)))
+          ) {
+            context.report({
+              node: node.parent,
+              message: "You can speed up your code if you don't call the function on every render",
+            })
+          }
+        }
+      },
+    }
+  },
+}

packages/eslint-plugin/tests/lib/rules/no-classname-runtime.js

@@ -0,0 +1,54 @@
+'use strict'
+
+const rule = require('../../../lib/rules/no-classname-runtime')
+const { RuleTester } = require('eslint')
+
+RuleTester.setDefaultConfig({
+  parserOptions: {
+    ecmaVersion: 2015,
+    sourceType: 'module',
+    ecmaFeatures: {
+      jsx: true,
+    },
+  },
+})
+
+const ruleTester = new RuleTester()
+
+ruleTester.run('no-classname-runtime', rule, {
+  valid: [
+    '<Block className="Time"/>',
+    '<Block className={cnTest}/>',
+    '<Block className={this.cnTest}/>',
+    '<Block className={isVisible ? "Visible" : Hidden}/>',
+    '<Block className={cnTest(this.props.className)}/>',
+    '<Block className={cnTest(undefined, [this.props.className])}/>',
+  ].map((code) => ({
+    code,
+  })),
+
+  invalid: [
+    '<Block className={cnTest()}/>',
+    '<Block className={cnTest("Test")}/>',
+    '<Block className={cnTest("Test", "TestElem")}/>',
+    '<Block className={cnTest({ theme })}/>',
+    '<Block className={cnTest({ [props.type]: true })}/>',
+    '<Block className={cnTest({ [props.type]: a.b.c.d })}/>',
+    '<Block className={cnTest({ theme, colored })}/>',
+    '<Block className={cnTest("Test", { theme })}/>',
+    '<Block className={cnTest("Test", { params }, [mixClassName])}/>',
+    '<Block className={cnTest("Test", null, [mixClassName])}/>',
+    '<Block className={cnTest(null, [mixClassName])}/>',
+    '<Block className={cnTest({ isVisible: a > b })}/>',
+    '<Block className={isVisible ? cnTest("Visible") : cnTest("Hidden")}/>',
+    '<Block className={isVisible && cnTest("Visible") || cnTest("Hidden")}/>',
+    '<Block className={isVisible || cnTest("Hidden")} />',
+  ].map((code) => ({
+    code,
+    errors: [
+      {
+        message: "You can speed up your code if you don't call the function on every render",
+      },
+    ],
+  })),
+})