@blumintinc/eslint-plugin-blumint 0.1.14 → 0.1.16

package/README.md

@@ -64,7 +64,7 @@ Or use the recommended config:
 | [generic-starts-with-t](docs/rules/generic-starts-with-t.md)                   | Enforce TypeScript generic types to start with T                                          |    | ✅  |    |
 | [no-async-array-filter](docs/rules/no-async-array-filter.md)                   | Disallow async callbacks for Array.filter                                                 | ✅  |    |    |
 | [no-async-foreach](docs/rules/no-async-foreach.md)                             | Disallow Array.forEach with an async callback function                                    | ✅  |    |    |
-| [no-conditional-literals-in-jsx](docs/rules/no-conditional-literals-in-jsx.md) | Disallow use of conditional literals in JSX code                                          |    |    |    |
+| [no-conditional-literals-in-jsx](docs/rules/no-conditional-literals-in-jsx.md) | Disallow use of conditional literals in JSX code                                          | ✅  |    |    |
 | [no-filter-without-return](docs/rules/no-filter-without-return.md)             | Disallow Array.filter callbacks without an explicit return (if part of a block statement) | ✅  |    |    |
 | [no-misused-switch-case](docs/rules/no-misused-switch-case.md)                 | Prevent misuse of logical OR in switch case statements                                    | ✅  |    |    |
 | [no-unpinned-dependencies](docs/rules/no-unpinned-dependencies.md)             | Enforces pinned dependencies                                                              | ✅  |    | 🔧 |

package/docs/rules/no-conditional-literals-in-jsx.md

@@ -1,5 +1,7 @@
 # Disallow use of conditional literals in JSX code (`@blumintinc/blumint/no-conditional-literals-in-jsx`)
 
+💼 This rule is enabled in the ✅ `recommended` config.
+
 <!-- end auto-generated rule header -->
 
 This rule disallows the use of conditional literals in JSX.

package/docs/rules/require-memo.md

@@ -0,0 +1,29 @@
+# Requires memoization of react components (`@blumintinc/blumint/require-memo`)
+
+<!-- end auto-generated rule header -->
+
+This rule enforces that React components (that are not pure) to be memoized. If the component name includes "Unmemoized", then this rule is ignored.
+
+## Rule Details
+
+Examples of **incorrect** code for this rule:
+
+```jsx
+const Component = ({foo, bar}) => return (
+    <SomeOtherComponent>{foo}{bar}</SomeOtherComponent>
+)
+```
+
+Examples of **correct** code for this rule:
+
+```jsx
+const MemoizedComponent = memo(function BigComponent({foo, bar}) {
+    return (
+        <SomeOtherComponent>{foo}{bar}</SomeOtherComponent>
+    )
+})
+const ComponentUnmemoized = ({foo, bar}) => return (
+    <SomeOtherComponent>{foo}{bar}</SomeOtherComponent>
+)
+```
+

package/lib/index.js

@@ -13,10 +13,11 @@ const no_unpinned_dependencies_1 = require("./rules/no-unpinned-dependencies");
 const no_useless_fragment_1 = require("./rules/no-useless-fragment");
 const prefer_fragment_shorthand_1 = require("./rules/prefer-fragment-shorthand");
 const prefer_type_over_interface_1 = require("./rules/prefer-type-over-interface");
+const require_memo_1 = require("./rules/require-memo");
 module.exports = {
     meta: {
         name: '@blumintinc/eslint-plugin-blumint',
-        version: '0.1.14',
+        version: '0.1.16',
     },
     parseOptions: {
         ecmaVersion: 2020,
@@ -38,6 +39,7 @@ module.exports = {
                 '@blumintinc/blumint/no-useless-fragment': 'warn',
                 '@blumintinc/blumint/prefer-fragment-shorthand': 'warn',
                 '@blumintinc/blumint/prefer-type-over-interface': 'warn',
+                '@blumintinc/blumint/require-memo': 'error',
             },
         },
     },
@@ -55,6 +57,7 @@ module.exports = {
         'no-useless-fragment': no_useless_fragment_1.noUselessFragment,
         'prefer-fragment-shorthand': prefer_fragment_shorthand_1.preferFragmentShorthand,
         'prefer-type-over-interface': prefer_type_over_interface_1.preferTypeOverInterface,
+        'require-memo': require_memo_1.requireMemo,
     },
 };
 //# sourceMappingURL=index.js.map

package/lib/rules/require-memo.js

@@ -0,0 +1,88 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.requireMemo = void 0;
+const ASTHelpers_1 = require("../utils/ASTHelpers");
+const isComponentExplicitlyUnmemoized = (componentName) => componentName.toLowerCase().includes('unmemoized');
+function isMemoCallExpression(node) {
+    if (node.type !== 'CallExpression')
+        return false;
+    if (node.callee.type === 'MemberExpression') {
+        const { callee: { object, property }, } = node;
+        if (object.type === 'Identifier' &&
+            property.type === 'Identifier' &&
+            object.name === 'React' &&
+            property.name === 'memo') {
+            return true;
+        }
+    }
+    else if (node.callee.type === 'Identifier' && node.callee.name === 'memo') {
+        return true;
+    }
+    return false;
+}
+function isHigherOrderFunctionReturningJSX(node) {
+    if (node.type === 'ArrowFunctionExpression' ||
+        node.type === 'FunctionExpression') {
+        if (node.body.type === 'ArrowFunctionExpression' ||
+            node.body.type === 'FunctionExpression') {
+            return ASTHelpers_1.ASTHelpers.returnsJSX(node.body.body);
+        }
+    }
+    return false;
+}
+function checkFunction(context, node) {
+    const fileName = context.getFilename();
+    if (!fileName.endsWith('.tsx')) {
+        return;
+    }
+    if (isHigherOrderFunctionReturningJSX(node)) {
+        return;
+    }
+    let currentNode = node.parent;
+    while (currentNode.type === 'CallExpression') {
+        if (isMemoCallExpression(currentNode)) {
+            return;
+        }
+        currentNode = currentNode.parent;
+    }
+    if (ASTHelpers_1.ASTHelpers.returnsJSX(node.body) && ASTHelpers_1.ASTHelpers.hasParameters(node)) {
+        if (currentNode.type === 'VariableDeclarator' &&
+            currentNode.id.type === 'Identifier' &&
+            !isComponentExplicitlyUnmemoized(currentNode.id.name)) {
+            context.report({ node, messageId: 'requireMemo' });
+        }
+        else if (node.type === 'FunctionDeclaration' &&
+            currentNode.type === 'Program' &&
+            node.id &&
+            !isComponentExplicitlyUnmemoized(node.id.name)) {
+            context.report({ node, messageId: 'requireMemo' });
+        }
+    }
+}
+exports.requireMemo = {
+    create: (context) => ({
+        ArrowFunctionExpression(node) {
+            checkFunction(context, node);
+        },
+        FunctionDeclaration(node) {
+            checkFunction(context, node);
+        },
+        FunctionExpression(node) {
+            checkFunction(context, node);
+        },
+    }),
+    meta: {
+        type: 'problem',
+        docs: {
+            description: 'React components must be memoized',
+            recommended: 'error',
+        },
+        messages: {
+            requireMemo: 'Component definition not wrapped in React.memo()',
+        },
+        schema: [],
+        fixable: 'code',
+    },
+    defaultOptions: [],
+};
+//# sourceMappingURL=require-memo.js.map

package/lib/utils/ASTHelpers.js

@@ -142,6 +142,23 @@ class ASTHelpers {
         }
         return false;
     }
+    static returnsJSX(node) {
+        if (node.type === 'JSXElement') {
+            return true;
+        }
+        if (node.type === 'BlockStatement') {
+            for (const statement of node.body) {
+                if (statement.type === 'ReturnStatement' &&
+                    statement.argument?.type === 'JSXElement') {
+                    return true;
+                }
+            }
+        }
+        return false;
+    }
+    static hasParameters(node) {
+        return node.params && node.params.length > 0;
+    }
 }
 exports.ASTHelpers = ASTHelpers;
 //# sourceMappingURL=ASTHelpers.js.map

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@blumintinc/eslint-plugin-blumint",
-  "version": "0.1.14",
+  "version": "0.1.16",
   "description": "Custom eslint rules for use at BluMint",
   "keywords": [
     "eslint",

package/lib/rules/no-conditional-literals.js

@@ -1,59 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.noConditionalLiterals = void 0;
-/* eslint-disable @blumintinc/blumint/extract-global-constants */
-// import { ASTHelpers } from '../utils/ASTHelpers';
-const utils_1 = require("@typescript-eslint/utils");
-exports.noConditionalLiterals = {
-    create(context) {
-        return {
-            // Imagine evaluating <div>text {conditional && 'string'}</div>
-            JSXExpressionContainer(node) {
-                // We start at the expression {conditional && 'string'}
-                if (node.expression.type !== 'LogicalExpression') {
-                    return;
-                }
-                const parentChildren = node.parent && 'children' in node.parent ? node.parent.children : [];
-                // "text" is one of the siblingTextNodes.
-                const siblingTextNodes = parentChildren.filter((n) => {
-                    if (n.type === utils_1.TSESTree.AST_NODE_TYPES.Literal ||
-                        n.type === utils_1.TSESTree.AST_NODE_TYPES.JSXText) {
-                        return !!('value' in n && !!n.value ? `${n.value}`.trim() : false);
-                    }
-                    return false;
-                });
-                // If we were evaluating
-                //   <div>{property} {conditional && 'string'}</div>
-                // Then {property} would be one of the siblingExpressionNodes
-                const siblingExpressionNodes = parentChildren.filter((n) => n.type === 'JSXExpressionContainer' &&
-                    'expression' in n &&
-                    (n.expression.type === 'Identifier' ||
-                        n.expression.type === 'MemberExpression'));
-                // Operands of {conditional && 'string'} -- the conditional and the
-                // literal. We want to make sure we have a text literal, otherwise we'd
-                // trigger this rule on the (safe) {conditional && <div>string</div>}.
-                const expressionOperandTypes = [
-                    node.expression.left.type,
-                    node.expression.right.type,
-                ];
-                if (siblingTextNodes.concat(siblingExpressionNodes).length > 0 &&
-                    expressionOperandTypes.includes(utils_1.TSESTree.AST_NODE_TYPES.Literal)) {
-                    context.report({ node, messageId: 'unexpected' });
-                }
-            },
-        };
-    },
-    meta: {
-        type: 'problem',
-        docs: {
-            description: 'Disallow use of conditional literals in JSX code',
-            recommended: 'error',
-        },
-        messages: {
-            unexpected: 'Conditional expression is a sibling of raw text and must be wrapped in <div> or <span>',
-        },
-        schema: [],
-    },
-    defaultOptions: [],
-};
-//# sourceMappingURL=no-conditional-literals.js.map