@bigbinary/eslint-plugin-neeto 1.1.19 → 1.1.21

package/README.md

@@ -113,6 +113,7 @@ module.exports = {
 - [use-functions-and-hooks-from-neeto-commons-frontend.md](./docs/src/rules/use-functions-and-hooks-from-neeto-commons-frontend.md)
 - [zustand-use-with-immutable-actions-wrapper-inside-create](./docs/src/rules/zustand-use-with-immutable-actions-wrapper-inside-create.md)
 - [add-required-peer-dependencies](./docs/src/rules/add-required-peer-dependencies.md)
+- [move-spread-attributes-to-top-position](./docs/src/rules/move-spread-attributes-to-top-position.md)
 
 ## Other references
 

package/dist/index.js

@@ -151,7 +151,8 @@
     "@bigbinary/neeto/merge-spread-attributes": "error",
     "@bigbinary/neeto/props-inside-spread-attributes-should-be-sorted": "error",
     "@bigbinary/neeto/props-with-different-key-value-should-be-outside-spread-attribute": "error",
-    "@bigbinary/neeto/use-common-constants": "warn"
+    "@bigbinary/neeto/use-common-constants": "warn",
+    "@bigbinary/neeto/move-spread-attributes-to-top-position": "error"
   };
 
   var recommended = {
@@ -547,6 +548,7 @@
   var USE_WITH_T_HOC_IN_DUMB_COMPONENTS = 'Use "withT" HOC from "neeto-commons-frontend" instead of useTranslation hook in Dumb components';
   var NO_WITH_T_IN_SMART_COMPONENTS = '"withT" HOC should only be used in dumb components. "useTranslation" hook should be used here.';
   var USE_STANDARD_DATE_TIME_FORMATS = 'Use "dateFormat/timeFormat" from "@bigbinary/neeto-commons-frontend/utils" instead. Refer: https://github.com/bigbinary/neeto-commons-frontend/blob/main/docs/utils/README.md#dateformattimeformat';
+  var MOVE_SPREAD_ATTRIBUTES_TO_TOP = "Move spread attribute to top";
 
   var PACKAGES_TO_CHECK = ["@bigbinary/neeto-molecules", "@bigbinary/neetoui", "@bigbinary/neeto-commons-frontend"];
 
@@ -3885,7 +3887,7 @@
       name: ramda.test(PASCAL_CASE_REGEX)
     }
   };
-  var EXPORTED_WITH_T_PATTERN = {
+  var EXPORTED_WITH_T_PATTERN$1 = {
     type: TYPES.EXPORT_DEFAULT_DECLARATION,
     declaration: {
       type: TYPES.CALL_EXPRESSION,
@@ -4484,7 +4486,7 @@
           if (!isInsideComponentsDirectory(context)) return;
           var componentNodes = findMatchingNodesDeep(node.body, COMPONENT_PATTERN);
           if (ramda.isEmpty(componentNodes)) return;
-          var isExportedWithT = patternExistsDeep(EXPORTED_WITH_T_PATTERN, node);
+          var isExportedWithT = patternExistsDeep(EXPORTED_WITH_T_PATTERN$1, node);
           componentNodes.forEach(function (node) {
             var tFunctionMemeberExpressionNodes = findMatchingNodesDeep(node, T_FUNCTION_MEMBER_EXPRESSION_PATTERN);
             tFunctionMemeberExpressionNodes.forEach(function (node) {
@@ -6537,6 +6539,12 @@
       type: TYPES.IMPORT_SPECIFIER
     }]
   };
+
+  // const Component = withT(({ t, userName, ...otherProps }, randomProps) => {
+  //   const a = useRef();
+  //   const [isOpen, setIsOpen] = useState(false);
+  //   return (t("Hello"));
+  // });
   var WITH_T_HOC_PATTERN = {
     type: TYPES.VARIABLE_DECLARATION,
     kind: "const",
@@ -6563,11 +6571,107 @@
     }]
   };
 
+  // export default withT(Component);
+  var EXPORTED_WITH_T_PATTERN = {
+    type: TYPES.EXPORT_DEFAULT_DECLARATION,
+    declaration: {
+      type: TYPES.CALL_EXPRESSION,
+      callee: {
+        type: TYPES.IDENTIFIER,
+        name: "withT"
+      },
+      arguments: ramda.any(pure.matches({
+        type: TYPES.IDENTIFIER,
+        name: ramda.test(PASCAL_CASE_REGEX)
+      }))
+    }
+  };
+  var SMART_COMPONENT_PATTERN = {
+    type: TYPES.VARIABLE_DECLARATION,
+    kind: "const",
+    declarations: [{
+      type: TYPES.VARIABLE_DECLARATOR,
+      init: {
+        type: TYPES.ARROW_FUNCTION_EXPRESSION,
+        body: {
+          type: TYPES.BLOCK_STATEMENT,
+          body: function body(_body2) {
+            return _body2.length >= 2;
+          }
+        }
+      },
+      id: {
+        type: TYPES.IDENTIFIER,
+        name: ramda.test(PASCAL_CASE_REGEX)
+      }
+    }]
+  };
+
+  var getPropsCode = function getPropsCode(context, arrowFunctionExpression, props) {
+    if (ramda.isEmpty(arrowFunctionExpression.params)) return "";
+    if (props.type === TYPES.IDENTIFIER) {
+      return "{...".concat(getCode$1(context, props), " }");
+    }
+    if (props.type === TYPES.OBJECT_PATTERN) {
+      var _props$properties, _props$properties2, _props$properties2$0$;
+      if (((_props$properties = props.properties) === null || _props$properties === void 0 ? void 0 : _props$properties.length) === 1 && ((_props$properties2 = props.properties) === null || _props$properties2 === void 0 ? void 0 : (_props$properties2$0$ = _props$properties2[0].value) === null || _props$properties2$0$ === void 0 ? void 0 : _props$properties2$0$.name) === "t") {
+        return "";
+      }
+      return "{".concat(props.properties.map(function (property) {
+        return getCode$1(context, property);
+      }).filter(pure.isNot("t")).join(", "), " }");
+    }
+    return "";
+  };
+  var getCodeWithUseTranslationHook = function getCodeWithUseTranslationHook(context, arrowFunctionExpression) {
+    var _arrowFunctionExpress = _toArray(arrowFunctionExpression.params),
+      props = _arrowFunctionExpress[0],
+      restParams = _arrowFunctionExpress.slice(1);
+    var codeInsideBody = getCode$1(context, arrowFunctionExpression.body);
+    var codeWithUseTranslation = insertTextAfterPosition(0, codeInsideBody, "const { t } = useTranslation();\n");
+    var updatedProps = getPropsCode(context, arrowFunctionExpression, props);
+    var replacedCodeWithUseTranslation = "(".concat(updatedProps).concat(ramda.isEmpty(restParams) ? "" : "".concat(pure.isNotEmpty(updatedProps) ? ", " : "{}, ").concat(restParams.map(function (param) {
+      return getCode$1(context, param);
+    }).join(", ")), ") => ").concat(codeWithUseTranslation);
+    return replacedCodeWithUseTranslation;
+  };
+  var createUseTranslationImport = function createUseTranslationImport(context, fixer) {
+    return addFunctionImport({
+      context: context,
+      fixer: fixer,
+      functions: ["useTranslation"],
+      importPattern: REACT_I18_IMPORT_PATTERN
+    });
+  };
   var insertTextAfterPosition = function insertTextAfterPosition(position, inputString, textToInsert) {
     var firstCharacter = inputString.charAt(position);
     var restOfString = inputString.slice(position + 1);
     return firstCharacter + textToInsert + restOfString;
   };
+  var reportError = function reportError(_ref) {
+    var context = _ref.context,
+      node = _ref.node,
+      arrowFunctionExpression = _ref.arrowFunctionExpression,
+      _ref$isExportStatemen = _ref.isExportStatement,
+      isExportStatement = _ref$isExportStatemen === void 0 ? false : _ref$isExportStatemen;
+    return context.report({
+      node: node,
+      message: NO_WITH_T_IN_SMART_COMPONENTS,
+      fix: function fix(fixer) {
+        var fixers = [];
+        var replacedCodeWithUseTranslation = getCodeWithUseTranslationHook(context, arrowFunctionExpression);
+        if (isExportStatement) {
+          fixers.push(fixer.replaceText(node.declaration, node.declaration.arguments[0].name));
+          fixers.push(fixer.replaceText(arrowFunctionExpression, replacedCodeWithUseTranslation));
+        } else {
+          fixers.push(fixer.replaceText(node.declarations[0].init, replacedCodeWithUseTranslation));
+        }
+        var importUseTranslation = createUseTranslationImport(context, fixer);
+        importUseTranslation && fixers.push(importUseTranslation);
+        return fixers;
+      }
+    });
+  };
 
   var noWithTForSmartComponents = {
     meta: {
@@ -6579,52 +6683,26 @@
       fixable: "code"
     },
     create: function create(context) {
+      var componentDeclaration = null;
       return {
         VariableDeclaration: function VariableDeclaration(node) {
+          componentDeclaration = node;
           if (!pure.matches(WITH_T_HOC_PATTERN, node)) return;
           var arrowFunctionExpression = node.declarations[0].init.arguments[0];
-          var body = arrowFunctionExpression.body;
-          context.report({
+          reportError({
+            context: context,
             node: node,
-            message: NO_WITH_T_IN_SMART_COMPONENTS,
-            fix: function fix(fixer) {
-              var fixers = [];
-              var _arrowFunctionExpress = _toArray(arrowFunctionExpression.params),
-                props = _arrowFunctionExpress[0],
-                restParams = _arrowFunctionExpress.slice(1);
-              var getPropsCode = function getPropsCode() {
-                if (ramda.isEmpty(arrowFunctionExpression.params)) return "";
-                if (props.type === TYPES.IDENTIFIER) {
-                  return "{...".concat(getCode$1(context, props), " }");
-                }
-                if (props.type === TYPES.OBJECT_PATTERN) {
-                  var _props$properties, _props$properties2, _props$properties2$0$;
-                  if (((_props$properties = props.properties) === null || _props$properties === void 0 ? void 0 : _props$properties.length) === 1 && ((_props$properties2 = props.properties) === null || _props$properties2 === void 0 ? void 0 : (_props$properties2$0$ = _props$properties2[0].value) === null || _props$properties2$0$ === void 0 ? void 0 : _props$properties2$0$.name) === "t") {
-                    return "";
-                  }
-                  return "{".concat(props.properties.map(function (property) {
-                    return getCode$1(context, property);
-                  }).filter(pure.isNot("t")).join(", "), " }");
-                }
-                return "";
-              };
-              var codeInsideBody = getCode$1(context, body);
-              var codeWithUseTranslation = insertTextAfterPosition(0, codeInsideBody, "const { t } = useTranslation();\n");
-              var updatedProps = getPropsCode();
-              var replacedCodeWithUseTranslation = "(".concat(updatedProps).concat(ramda.isEmpty(restParams) ? "" : "".concat(pure.isNotEmpty(updatedProps) ? ", " : "").concat(restParams.map(function (param) {
-                return getCode$1(context, param);
-              }).join(", ")), ") => ").concat(codeWithUseTranslation);
-              var replaceIncorrectWithTCode = fixer.replaceText(node.declarations[0].init, replacedCodeWithUseTranslation);
-              fixers.push(replaceIncorrectWithTCode);
-              var importUseTranslation = addFunctionImport({
-                context: context,
-                fixer: fixer,
-                functions: ["useTranslation"],
-                importPattern: REACT_I18_IMPORT_PATTERN
-              });
-              importUseTranslation && fixers.push(importUseTranslation);
-              return fixers;
-            }
+            arrowFunctionExpression: arrowFunctionExpression
+          });
+        },
+        ExportDefaultDeclaration: function ExportDefaultDeclaration(node) {
+          if (!pure.matches(EXPORTED_WITH_T_PATTERN, node)) return;
+          if (!pure.matches(SMART_COMPONENT_PATTERN, componentDeclaration)) return;
+          reportError({
+            context: context,
+            node: node,
+            arrowFunctionExpression: componentDeclaration.declarations[0].init,
+            isExportStatement: true
           });
         }
       };
@@ -6803,6 +6881,13 @@
       array.splice(index, 1);
     }
   };
+  var findIndexToInsert = function findIndexToInsert(endIndex, attributes) {
+    var index = endIndex - 1;
+    for (; index >= 0; --index) {
+      if (attributes[index].type === TYPES.JSX_SPREAD_ATTRIBUTE) return index + 1;
+    }
+    return index + 1;
+  };
 
   var mergeSpreadAttributes = {
     meta: {
@@ -6928,6 +7013,43 @@
     }
   };
 
+  var moveSpreadAttributesToTopPosition = {
+    meta: {
+      type: "problem",
+      docs: {
+        url: "https://github.com/bigbinary/eslint-plugin-neeto/blob/main/docs/src/rules/move-spread-attributes-to-top-position.md",
+        description: "Enforce moving spread attributes to top most position in oprning elements"
+      },
+      fixable: "code"
+    },
+    create: function create(context) {
+      return {
+        JSXSpreadAttribute: function JSXSpreadAttribute(node) {
+          var _node$argument$proper;
+          if (!pure.matches(SPREAD_ATTRIBUTE_WITH_OBJECT_EXPRESSION, node) || (_node$argument$proper = node.argument.properties) !== null && _node$argument$proper !== void 0 && _node$argument$proper.find(pure.matches(OTHER_PROPS_INSIDE_SPREAD_ATTRIBUTE))) {
+            return;
+          }
+          var attributes = node.parent.attributes;
+          var nodeIndex = pure.findIndexBy({
+            range: node.range
+          }, attributes);
+          var indexToInsert = findIndexToInsert(nodeIndex, attributes);
+          if (indexToInsert === nodeIndex) return;
+          var indentLevel = context.getSourceCode().getFirstToken(attributes[0]).loc.start.column;
+          context.report({
+            node: node,
+            message: MOVE_SPREAD_ATTRIBUTES_TO_TOP,
+            fix: function fix(fixer) {
+              var removeNode = fixer.remove(node);
+              var moveNode = fixer.insertTextBefore(attributes[indexToInsert], "".concat(context.getSourceCode().getText(node), "\n").concat(" ".repeat(indentLevel)));
+              return [moveNode, removeNode];
+            }
+          });
+        }
+      };
+    }
+  };
+
   var noRepetitionInPropKeyAndValueName = {
     meta: {
       type: "problem",
@@ -26825,7 +26947,8 @@
       "no-unnecessary-if-condition": noUnnecessaryIfCondition,
       "zustand-use-with-immutable-actions-wrapper-inside-create": useWithImmutableActionsWrapperInsideCreate,
       "add-required-peer-dependencies": addRequiredPeerDependencies,
-      "use-common-constants": useCommonConstants
+      "use-common-constants": useCommonConstants,
+      "move-spread-attributes-to-top-position": moveSpreadAttributesToTopPosition
     },
     configs: {
       recommended: recommended,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bigbinary/eslint-plugin-neeto",
-  "version": "1.1.19",
+  "version": "1.1.21",
   "main": "dist/index.js",
   "license": "UNLICENSED",
   "scripts": {