rule keep-options-order

README.md

@@ -67,6 +67,7 @@ This preset is recommended for projects that use [React](https://reactjs.org) wi
 - [effector/no-watch](rules/no-watch/no-watch.md)
 - [effector/prefer-sample-over-forward-with-mapping](rules/prefer-sample-over-forward-with-mapping/prefer-sample-over-forward-with-mapping.md)
 - [effector/strict-effect-handlers](rules/strict-effect-handlers/strict-effect-handlers.md)
+- [effector/keep-options-order](rules/keep-options-order/keep-options-order.md)
 
 ## Maintenance
 

config/recommended.js

@@ -10,5 +10,6 @@ module.exports = {
     "effector/no-watch": "warn",
     "effector/no-unnecessary-combination": "warn",
     "effector/no-duplicate-on": "error",
+    "effector/keep-options-order": "warn",
   },
 };

index.js

@@ -12,6 +12,7 @@ module.exports = {
     "no-duplicate-on": require("./rules/no-duplicate-on/no-duplicate-on"),
     "strict-effect-handlers": require("./rules/strict-effect-handlers/strict-effect-handlers"),
     "enforce-gate-naming-convention": require("./rules/enforce-gate-naming-convention/enforce-gate-naming-convention"),
+    "keep-options-order": require("./rules/keep-options-order/keep-options-order"),
   },
   configs: {
     recommended: require("./config/recommended"),

rules/keep-options-order/config.js

@@ -0,0 +1,3 @@
+const correctOrder = ["clock", "source", "filter", "fn", "target"];
+
+module.exports = { correctOrder };

rules/keep-options-order/examples/correct-guard.js

@@ -0,0 +1,22 @@
+import { createEvent, createStore, guard } from "effector";
+
+const clock = createEvent();
+const source = createEvent();
+const filter = createStore();
+const target = createEvent();
+
+guard({ clock, source, filter, target });
+
+guard({ clock, source, filter });
+guard({ clock, source, filter, target });
+guard({ clock, source, target });
+guard({ clock, filter, target });
+guard({ source, filter, target });
+
+guard({ clock, source });
+
+guard({ clock, filter });
+guard({ clock, filter, target });
+
+guard({ filter, target });
+guard({ filter });

rules/keep-options-order/examples/correct-sample.js

@@ -0,0 +1,28 @@
+import { createEvent, createStore, sample } from "effector";
+
+const clock = createEvent();
+const source = createEvent();
+const filter = createStore();
+const fn = () => null;
+const target = createEvent();
+
+sample({ clock, source, filter, fn, target });
+
+sample({ clock, source, filter, fn });
+sample({ clock, source, filter, target });
+sample({ clock, source, fn, target });
+sample({ clock, filter, fn, target });
+sample({ source, filter, fn, target });
+
+sample({ clock, source, filter });
+sample({ clock, source, fn });
+sample({ clock, source, target });
+
+sample({ clock, filter, fn });
+sample({ clock, filter, target });
+
+sample({ source, filter, fn });
+sample({ source, filter, target });
+
+sample({ filter, fn, target });
+sample({ filter, fn });

rules/keep-options-order/examples/incorrect-guard.js

@@ -0,0 +1,8 @@
+import { createEvent, createStore, guard } from "effector";
+
+const clock = createEvent();
+const source = createEvent();
+const filter = createStore();
+const target = createEvent();
+
+guard({ filter, clock, source, target });

rules/keep-options-order/examples/incorrect-sample.js

@@ -0,0 +1,9 @@
+import { createEvent, createStore, sample } from "effector";
+
+const clock = createEvent();
+const source = createEvent();
+const filter = createStore();
+const fn = () => null;
+const target = createEvent();
+
+sample({ source, clock, filter, fn, target });

rules/keep-options-order/keep-options-order.js

@@ -0,0 +1,107 @@
+const { extractImportedFrom } = require("../../utils/extract-imported-from");
+const { createLinkToRule } = require("../../utils/create-link-to-rule");
+const { buildObjectInText } = require("../../utils/builders");
+
+const { correctOrder } = require("./config");
+
+module.exports = {
+  meta: {
+    type: "problem",
+    docs: {
+      description: "Enforce options order for Effector methods",
+      category: "Style",
+      recommended: true,
+      url: createLinkToRule("keep-options-order"),
+    },
+    messages: {
+      invalidOrder: `Order of options should be ${makeTag(
+        correctOrder
+      )}, but found {{ incorrectOrderTag }}`,
+      changeOrder: "Sort options",
+    },
+    schema: [],
+    hasSuggestions: true,
+  },
+  create(context) {
+    const importedFromEffector = new Map();
+    return {
+      ImportDeclaration(node) {
+        extractImportedFrom({
+          importMap: importedFromEffector,
+          node,
+          packageName: "effector",
+        });
+      },
+      CallExpression(node) {
+        // Effect creation with method
+        const OPTIONS_METHODS = ["sample", "guard"];
+        for (const method of OPTIONS_METHODS) {
+          const localMethod = importedFromEffector.get(method);
+          if (!localMethod) {
+            continue;
+          }
+
+          const isEffectorMethods = node.callee.name === localMethod;
+          if (!isEffectorMethods) {
+            continue;
+          }
+
+          const configNode = node?.arguments?.[0];
+          const optionsNodes = configNode?.properties;
+
+          const optionsOrder = optionsNodes?.map((prop) => prop?.key.name);
+
+          const idealOrder = filteredCorrectOrder(optionsOrder);
+
+          if (isCorrectOrder(optionsOrder, idealOrder)) {
+            continue;
+          }
+
+          context.report({
+            node,
+            messageId: "invalidOrder",
+            data: {
+              incorrectOrderTag: makeTag(optionsOrder),
+            },
+            suggest: [
+              {
+                messageId: "changeOrder",
+                fix(fixer) {
+                  const newConfig = buildObjectInText({
+                    context,
+                    properties: sortNodesByName(optionsNodes, idealOrder),
+                  });
+
+                  return fixer.replaceText(configNode, newConfig);
+                },
+              },
+            ],
+          });
+        }
+      },
+    };
+  },
+};
+
+function makeTag(order) {
+  return order.join("->");
+}
+
+function isCorrectOrder(checkOrder, idealOrder) {
+  return idealOrder.every((refItem, index) => checkOrder?.[index] === refItem);
+}
+
+function filteredCorrectOrder(checkOrder) {
+  return correctOrder.filter((item) => checkOrder?.includes(item));
+}
+
+function sortNodesByName(nodes, nameOrder) {
+  const newNodes = [];
+
+  for (const name of nameOrder) {
+    const node = nodes.find((node) => node?.key.name === name);
+    newNodes.push(node);
+  }
+
+  return newNodes;
+}

rules/keep-options-order/keep-options-order.md

@@ -0,0 +1,21 @@
+# effector/keep-options-order
+
+Some of Effector-methods (e.g., `sample` and `guard`) accept config in object form. This form can be read as "when `clock` is triiered, take data from `source` pass it thru `filter`/`fn` and send to `target`". So, it is better to use semantic order of configuration properties — `clock -> source -> filter/fn -> target`. The rule enforces this order for any case.
+
+```ts
+// 👍 great
+sample({
+  clock: formSubmit,
+  source: $formData,
+  fn: prepareData,
+  target: sendFormToServerFx,
+});
+
+// 👎 weird
+sample({
+  fn: prepareData,
+  target: sendFormToServerFx,
+  clock: formSubmit,
+  source: $formData,
+});
+```

rules/keep-options-order/keep-options-order.test.js

@@ -0,0 +1,116 @@
+const { RuleTester } = require("eslint");
+
+const { readExample } = require("../../utils/read-example");
+
+const rule = require("./keep-options-order");
+
+const ruleTester = new RuleTester({
+  parserOptions: {
+    ecmaVersion: 2020,
+    sourceType: "module",
+  },
+});
+
+const readExampleForTheRule = (name) => readExample(__dirname, name);
+
+ruleTester.run("effector/keep-options-order.test", rule, {
+  valid: ["correct-sample.js", "correct-guard.js"]
+    .map(readExampleForTheRule)
+    .map((code) => ({ code })),
+
+  invalid: [
+    // Errors
+    ...["incorrect-sample.js", "incorrect-guard.js"]
+      .map(readExampleForTheRule)
+      .map((code) => ({
+        code,
+        errors: [
+          {
+            messageId: "invalidOrder",
+            type: "CallExpression",
+          },
+        ],
+      })),
+    // Suggestions
+    {
+      code: `
+import {sample} from 'effector';
+sample({ source, clock, fn, target });
+      `,
+      errors: [
+        {
+          messageId: "invalidOrder",
+          suggestions: [
+            {
+              messageId: "changeOrder",
+              output: `
+import {sample} from 'effector';
+sample({ clock, source, fn, target });
+      `,
+            },
+          ],
+        },
+      ],
+    },
+    {
+      code: `
+import {sample} from 'effector';
+sample({ fn() { return null }, clock, target });
+        `,
+      errors: [
+        {
+          messageId: "invalidOrder",
+          suggestions: [
+            {
+              messageId: "changeOrder",
+              output: `
+import {sample} from 'effector';
+sample({ clock, fn() { return null }, target });
+        `,
+            },
+          ],
+        },
+      ],
+    },
+    {
+      code: `
+import {sample} from 'effector';
+sample({ fn, clock: event.map(() => null), target });
+          `,
+      errors: [
+        {
+          messageId: "invalidOrder",
+          suggestions: [
+            {
+              messageId: "changeOrder",
+              output: `
+import {sample} from 'effector';
+sample({ clock: event.map(() => null), fn, target });
+          `,
+            },
+          ],
+        },
+      ],
+    },
+    {
+      code: `
+import {sample} from 'effector';
+sample({ source: combine({ a: $a }), clock, target });
+            `,
+      errors: [
+        {
+          messageId: "invalidOrder",
+          suggestions: [
+            {
+              messageId: "changeOrder",
+              output: `
+import {sample} from 'effector';
+sample({ clock, source: combine({ a: $a }), target });
+            `,
+            },
+          ],
+        },
+      ],
+    },
+  ],
+});

rules/no-unnecessary-duplication/no-unnecessary-duplication.js

@@ -1,6 +1,7 @@
 const { extractImportedFrom } = require("../../utils/extract-imported-from");
 const { areNodesSameInText } = require("../../utils/are-nodes-same-in-text");
 const { createLinkToRule } = require("../../utils/create-link-to-rule");
+const { buildObjectInText } = require("../../utils/builders");
 
 module.exports = {
   meta: {
@@ -86,11 +87,8 @@ function reportUnnecessaryDuplication({
     const properties = objectNode?.properties?.filter?.(
       (p) => p !== paramToExcludeNode
     );
-    const newPropertiesText = properties
-      .map((p) => context.getSourceCode().getText(p))
-      .join(", ");
 
-    return `{ ${newPropertiesText} }`;
+    return buildObjectInText({ properties, context });
   }
 
   context.report({

utils/builders.js

@@ -0,0 +1,9 @@
+function buildObjectInText({ properties, context }) {
+  const content = properties
+    .map((property) => context.getSourceCode().getText(property))
+    .join(", ");
+
+  return `{ ${content} }`;
+}
+
+module.exports = { buildObjectInText };