eslint-plugin-effector 0.6.0 → 0.7.0

package/.nvmrc

@@ -0,0 +1 @@
+16.10.0

package/README.md

@@ -39,36 +39,43 @@ To configure individual rules:
 }
 ```
 
-### Available presets
+### Available rules by preset
 
 #### plugin:effector/recommended
 
 This preset is recommended for most projects.
 
+- [effector/enforce-store-naming-convention](rules/enforce-store-naming-convention/enforce-store-naming-convention.md)
+- [effector/enforce-effect-naming-convention](rules/enforce-effect-naming-convention/enforce-effect-naming-convention.md)
+- [effector/no-getState](rules/no-getState/no-getState.md)
+- [effector/no-useless-methods](rules/no-useless-methods/no-useless-methods.md)
+- [effector/no-unnecessary-duplication](rules/no-unnecessary-duplication/no-unnecessary-duplication.md)
+- [effector/prefer-sample-over-forward-with-mapping](rules/prefer-sample-over-forward-with-mapping/prefer-sample-over-forward-with-mapping.md)
+- [effector/no-ambiguity-target](rules/no-ambiguity-target/no-ambiguity-target.md)
+- [effector/no-watch](rules/no-watch/no-watch.md)
+- [effector/no-unnecessary-combination](rules/no-unnecessary-combination/no-unnecessary-combination.md)
+- [effector/no-duplicate-on](rules/no-duplicate-on/no-duplicate-on.md)
+- [effector/keep-options-order](rules/keep-options-order/keep-options-order.md)
+
 #### plugin:effector/scope
 
 This preset is recommended for projects that use [Fork API](https://effector.dev/docs/api/effector/scope). You can read more about Fork API in [an article](https://dev.to/effector/the-best-part-of-effector-4c27).
 
+- [effector/strict-effect-handlers](rules/strict-effect-handlers/strict-effect-handlers.md)
+
 #### plugin:effector/react
 
 This preset is recommended for projects that use [React](https://reactjs.org) with Effector.
 
-### Supported rules
-
-- [effector/enforce-store-naming-convention](rules/enforce-store-naming-convention/enforce-store-naming-convention.md)
-- [effector/enforce-effect-naming-convention](rules/enforce-effect-naming-convention/enforce-effect-naming-convention.md)
 - [effector/enforce-gate-naming-convention](rules/enforce-gate-naming-convention/enforce-gate-naming-convention.md)
-- [effector/no-unnecessary-duplication](rules/no-unnecessary-duplication/no-unnecessary-duplication.md)
-- [effector/no-unnecessary-combination](rules/no-unnecessary-combination/no-unnecessary-combination.md)
-- [effector/no-useless-methods](rules/no-useless-methods/no-useless-methods.md)
+- [effector/mandatory-useEvent](rules/mandatory-useEvent/mandatory-useEvent.md)
+
+#### plugin:effector/future
+
+This preset contains rules wich enforce _future-effector_ code-style.
+
 - [effector/no-forward](rules/no-forward/no-forward.md)
-- [effector/no-ambiguity-target](rules/no-ambiguity-target/no-ambiguity-target.md)
-- [effector/no-duplicate-on](rules/no-duplicate-on/no-duplicate-on.md)
-- [effector/no-getState](rules/no-getState/no-getState.md)
-- [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)
+- [effector/no-guard](rules/no-guard/no-guard.md)
 
 ## Maintenance
 

package/config/future.js

@@ -0,0 +1,7 @@
+module.exports = {
+  rules: {
+    "effector/prefer-sample-over-forward-with-mapping": "off",
+    "effector/no-forward": "warn",
+    "effector/no-guard": "warn",
+  },
+};

package/config/react.js

@@ -1,5 +1,6 @@
 module.exports = {
   rules: {
     "effector/enforce-gate-naming-convention": "error",
+    "effector/mandatory-useEvent": "error",
   },
 };

package/index.js

@@ -14,10 +14,13 @@ module.exports = {
     "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"),
     "no-forward": require("./rules/no-forward/no-forward"),
+    "no-guard": require("./rules/no-guard/no-guard"),
+    "mandatory-useEvent": require("./rules/mandatory-useEvent/mandatory-useEvent"),
   },
   configs: {
     recommended: require("./config/recommended"),
     scope: require("./config/scope"),
     react: require("./config/react"),
+    future: require("./config/future"),
   },
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "eslint-plugin-effector",
-  "version": "0.6.0",
+  "version": "0.7.0",
   "description": "Enforcing best practices for Effector",
   "keywords": [
     "eslint",
@@ -16,7 +16,7 @@
     "access": "public"
   },
   "engines": {
-    "node": "^14 || ^16"
+    "node": "^14 || ^16 || ^18"
   },
   "peerDependencies": {
     "effector": "*",

package/rules/mandatory-useEvent/mandatory-useEvent.js

@@ -0,0 +1,63 @@
+const { createLinkToRule } = require("../../utils/create-link-to-rule");
+const { isInsideReactComponent } = require("../../utils/react");
+const { nodeTypeIs } = require("../../utils/node-type-is");
+const { traverseParentByType } = require("../../utils/traverse-parent-by-type");
+
+module.exports = {
+  meta: {
+    type: "problem",
+    docs: {
+      description:
+        "Forbids `Event` and `Effect` usage without `useEvent` in React components.",
+      category: "Quality",
+      recommended: true,
+      url: createLinkToRule("mandatory-useEvent"),
+    },
+    messages: {
+      useEventNeeded:
+        "{{ unitName }} must be wrapped with `useEvent` from `effector-react` before usage inside React components",
+    },
+    schema: [],
+  },
+  create(context) {
+    const parserServices = context.parserServices;
+
+    // TypeScript-only rule, since units can be imported from anywhere
+    if (parserServices.hasFullTypeInformation) {
+      return {
+        Identifier(node) {
+          if (isInsideReactComponent(node)) {
+            if (
+              nodeTypeIs.effect({ node, context }) ||
+              nodeTypeIs.event({ node, context })
+            ) {
+              if (!isInsideUseEventCall({ node, context })) {
+                context.report({
+                  node,
+                  messageId: "useEventNeeded",
+                  data: {
+                    unitName: node.name,
+                  },
+                });
+              }
+            }
+          }
+        },
+      };
+    }
+
+    return {};
+  },
+};
+
+function isInsideUseEventCall({ node, context }) {
+  const calleeParentNode = traverseParentByType(node.parent, "CallExpression");
+
+  if (!calleeParentNode?.callee) return false;
+
+  return nodeTypeIs.effectorReactHook({
+    node: calleeParentNode.callee,
+    context,
+    hook: ["useEvent", "useUnit"],
+  });
+}

package/rules/no-forward/no-forward.js

@@ -2,6 +2,7 @@ const { extractImportedFrom } = require("../../utils/extract-imported-from");
 const { createLinkToRule } = require("../../utils/create-link-to-rule");
 const { method } = require("../../utils/method");
 const { replaceForwardBySample } = require("../../utils/replace-by-sample");
+const { extractConfig } = require("../../utils/extract-config");
 
 module.exports = {
   meta: {
@@ -43,12 +44,7 @@ module.exports = {
           return;
         }
 
-        const forwardConfig = {
-          from: node.arguments?.[0]?.properties.find(
-            (n) => n.key?.name === "from"
-          ),
-          to: node.arguments?.[0]?.properties.find((n) => n.key?.name === "to"),
-        };
+        const forwardConfig = extractConfig(["from", "to"], { node });
 
         if (!forwardConfig.from || !forwardConfig.to) {
           return;

package/rules/no-guard/no-guard.js

@@ -0,0 +1,78 @@
+const { extractImportedFrom } = require("../../utils/extract-imported-from");
+const { createLinkToRule } = require("../../utils/create-link-to-rule");
+const { method } = require("../../utils/method");
+const { replaceGuardBySample } = require("../../utils/replace-by-sample");
+const { extractConfig } = require("../../utils/extract-config");
+
+module.exports = {
+  meta: {
+    type: "problem",
+    docs: {
+      description: "Prefer `sample` over `guard`",
+      category: "Quality",
+      recommended: true,
+      url: createLinkToRule("no-guard"),
+    },
+    messages: {
+      noGuard:
+        "Instead of `guard` you can use `sample`, it is more extendable.",
+      replaceWithSample: "Repalce `guard` with `sample`.",
+    },
+    schema: [],
+    hasSuggestions: true,
+  },
+  create(context) {
+    const importNodes = new Map();
+    const importedFromEffector = new Map();
+
+    return {
+      ImportDeclaration(node) {
+        extractImportedFrom({
+          importMap: importedFromEffector,
+          nodeMap: importNodes,
+          node,
+          packageName: "effector",
+        });
+      },
+      CallExpression(node) {
+        if (
+          method.isNot("guard", {
+            node,
+            importMap: importedFromEffector,
+          })
+        ) {
+          return;
+        }
+
+        const guardConfig = extractConfig(
+          ["source", "clock", "target", "filter"],
+          {
+            node,
+          }
+        );
+
+        if (!guardConfig.clock || !guardConfig.filter) {
+          return;
+        }
+
+        context.report({
+          messageId: "noGuard",
+          node,
+          suggest: [
+            {
+              messageId: "replaceWithSample",
+              *fix(fixer) {
+                yield* replaceGuardBySample(guardConfig, {
+                  fixer,
+                  node,
+                  context,
+                  importNodes,
+                });
+              },
+            },
+          ],
+        });
+      },
+    };
+  },
+};

package/rules/prefer-sample-over-forward-with-mapping/prefer-sample-over-forward-with-mapping.js

@@ -5,6 +5,7 @@ const {
 const { createLinkToRule } = require("../../utils/create-link-to-rule");
 const { method } = require("../../utils/method");
 const { replaceForwardBySample } = require("../../utils/replace-by-sample");
+const { extractConfig } = require("../../utils/extract-config");
 
 module.exports = {
   meta: {
@@ -48,12 +49,7 @@ module.exports = {
           return;
         }
 
-        const forwardConfig = {
-          from: node.arguments?.[0]?.properties.find(
-            (n) => n.key?.name === "from"
-          ),
-          to: node.arguments?.[0]?.properties.find((n) => n.key?.name === "to"),
-        };
+        const forwardConfig = extractConfig(["from", "to"], { node });
 
         if (!forwardConfig.from || !forwardConfig.to) {
           return;

package/utils/extract-config.js

@@ -0,0 +1,13 @@
+function extractConfig(fields, { node }) {
+  const config = {};
+
+  fields.forEach((field) => {
+    config[field] = node.arguments?.[0]?.properties.find(
+      (n) => n.key?.name === field
+    );
+  });
+
+  return config;
+}
+
+module.exports = { extractConfig };

package/utils/node-type-is.js

@@ -32,6 +32,21 @@ const nodeTypeIs = {
     }),
   gate: (opts) =>
     hasType({ ...opts, possibleTypes: ["Gate"], from: "effector-react" }),
+  effectorReactHook: (opts) =>
+    hasType({
+      ...opts,
+      possibleTypes: opts.hook
+        ? [].concat(opts.hook)
+        : [
+            "useStore",
+            "useStoreMap",
+            "useList",
+            "useEvent",
+            "useGate",
+            "useUnit",
+          ],
+      from: "effector-react",
+    }),
   not: {
     effect: (opts) =>
       !hasType({
@@ -51,6 +66,7 @@ const nodeTypeIs = {
       }),
     gate: (opts) =>
       !hasType({ ...opts, possibleTypes: ["Gate"], from: "effector-react" }),
+    effectorReactHook: (opts) => !nodeTypeIs.effectorReactHook(opts),
   },
 };
 

package/utils/react.js

@@ -0,0 +1,184 @@
+// borrowed from
+// https://github.com/facebook/react/blob/main/packages/eslint-plugin-react-hooks/src/RulesOfHooks.js
+
+/**
+ * Catch all identifiers that begin with "use" followed by an uppercase Latin
+ * character to exclude identifiers like "user".
+ */
+
+function isHookName(s) {
+  return /^use[A-Z0-9].*$/.test(s);
+}
+
+/**
+ * We consider hooks to be a hook name identifier or a member expression
+ * containing a hook name.
+ */
+
+function isHook(node) {
+  if (node.type === "Identifier") {
+    return isHookName(node.name);
+  } else if (
+    node.type === "MemberExpression" &&
+    !node.computed &&
+    isHook(node.property)
+  ) {
+    const obj = node.object;
+    const isPascalCaseNameSpace = /^[A-Z].*/;
+    return obj.type === "Identifier" && isPascalCaseNameSpace.test(obj.name);
+  } else {
+    return false;
+  }
+}
+
+/**
+ * Checks if the node is a React component name. React component names must
+ * always start with a non-lowercase letter. So `MyComponent` or `_MyComponent`
+ * are valid component names for instance.
+ */
+function isComponentName(node) {
+  if (node.type === "Identifier") {
+    return !/^[a-z]/.test(node.name);
+  } else {
+    return false;
+  }
+}
+
+function isReactFunction(node, functionName) {
+  return (
+    node.name === functionName ||
+    (node.type === "MemberExpression" &&
+      node.object.name === "React" &&
+      node.property.name === functionName)
+  );
+}
+
+/**
+ * Checks if the node is a callback argument of forwardRef. This render function
+ * should follow the rules of hooks.
+ */
+
+function isForwardRefCallback(node) {
+  return !!(
+    node.parent &&
+    node.parent.callee &&
+    isReactFunction(node.parent.callee, "forwardRef")
+  );
+}
+
+/**
+ * Checks if the node is a callback argument of React.memo. This anonymous
+ * functional component should follow the rules of hooks.
+ */
+
+function isMemoCallback(node) {
+  return !!(
+    node.parent &&
+    node.parent.callee &&
+    isReactFunction(node.parent.callee, "memo")
+  );
+}
+
+function isInsideReactComponent(node) {
+  while (node) {
+    const functionName = getFunctionName(node);
+    if (functionName) {
+      if (isComponentName(functionName) || isHook(functionName)) {
+        return true;
+      }
+    }
+    if (isForwardRefCallback(node) || isMemoCallback(node)) {
+      return true;
+    }
+    node = node.parent;
+  }
+  return false;
+}
+
+function isInsideReactHook(node) {
+  while (node) {
+    const functionName = getFunctionName(node);
+    if (functionName) {
+      if (isHook(functionName)) {
+        return true;
+      }
+    }
+    node = node.parent;
+  }
+  return false;
+}
+
+module.exports = {
+  isInsideReactComponent,
+  isInsideReactHook,
+};
+
+/**
+ * Gets the static name of a function AST node. For function declarations it is
+ * easy. For anonymous function expressions it is much harder. If you search for
+ * `IsAnonymousFunctionDefinition()` in the ECMAScript spec you'll find places
+ * where JS gives anonymous function expressions names. We roughly detect the
+ * same AST nodes with some exceptions to better fit our use case.
+ */
+
+function getFunctionName(node) {
+  if (
+    node.type === "FunctionDeclaration" ||
+    (node.type === "FunctionExpression" && node.id)
+  ) {
+    // function useHook() {}
+    // const whatever = function useHook() {};
+    //
+    // Function declaration or function expression names win over any
+    // assignment statements or other renames.
+    return node.id;
+  } else if (
+    node.type === "FunctionExpression" ||
+    node.type === "ArrowFunctionExpression"
+  ) {
+    if (
+      node.parent.type === "VariableDeclarator" &&
+      node.parent.init === node
+    ) {
+      // const useHook = () => {};
+      return node.parent.id;
+    } else if (
+      node.parent.type === "AssignmentExpression" &&
+      node.parent.right === node &&
+      node.parent.operator === "="
+    ) {
+      // useHook = () => {};
+      return node.parent.left;
+    } else if (
+      node.parent.type === "Property" &&
+      node.parent.value === node &&
+      !node.parent.computed
+    ) {
+      // {useHook: () => {}}
+      // {useHook() {}}
+      return node.parent.key;
+
+      // NOTE: We could also support `ClassProperty` and `MethodDefinition`
+      // here to be pedantic. However, hooks in a class are an anti-pattern. So
+      // we don't allow it to error early.
+      //
+      // class {useHook = () => {}}
+      // class {useHook() {}}
+    } else if (
+      node.parent.type === "AssignmentPattern" &&
+      node.parent.right === node &&
+      !node.parent.computed
+    ) {
+      // const {useHook = () => {}} = {};
+      // ({useHook = () => {}} = {});
+      //
+      // Kinda clowny, but we'd said we'd follow spec convention for
+      // `IsAnonymousFunctionDefinition()` usage.
+      return node.parent.left;
+    } else {
+      return undefined;
+    }
+  } else {
+    return undefined;
+  }
+}

package/utils/read-example.js

@@ -1,8 +1,45 @@
 const { readFileSync } = require("fs");
 const { join } = require("path");
+const glob = require("glob");
 
 function readExample(dirname, exampleName) {
   return readFileSync(join(dirname, "examples", exampleName)).toString();
 }
 
-module.exports = { readExample };
+function getCorrectExamples(dirname, config = {}) {
+  const { ext = "js", namesOnly = true } = config;
+  const pattern = `correct-*.${ext}`;
+  const correct = glob.sync(join(dirname, "examples", pattern));
+
+  let result = correct;
+
+  if (namesOnly) {
+    result = result.map((path) => {
+      const rightSlashIdx = path.lastIndexOf("/");
+
+      return path.slice(rightSlashIdx + 1);
+    });
+  }
+
+  return result;
+}
+
+function getIncorrectExamples(dirname, config = {}) {
+  const { ext = "js", namesOnly = true } = config;
+  const pattern = `incorrect-*.${ext}`;
+  const incorrect = glob.sync(join(dirname, "examples", pattern));
+
+  let result = incorrect;
+
+  if (namesOnly) {
+    result = result.map((path) => {
+      const rightSlashIdx = path.lastIndexOf("/");
+
+      return path.slice(rightSlashIdx + 1);
+    });
+  }
+
+  return result;
+}
+
+module.exports = { readExample, getCorrectExamples, getIncorrectExamples };

package/utils/replace-by-sample.js

@@ -1,5 +1,31 @@
 const { buildObjectInText } = require("./builders");
 
+function* replaceGuardBySample(
+  guardConfig,
+  { fixer, node, context, importNodes }
+) {
+  let mapperFunctionNode = null;
+
+  let clockNode = guardConfig.clock?.value;
+  let targetNode = guardConfig.target?.value;
+  let sourceNode = guardConfig.source?.value;
+  let filterNode = guardConfig.filter?.value;
+
+  if (
+    targetNode.type === "CallExpression" &&
+    targetNode?.callee?.property?.name === "prepend"
+  ) {
+    mapperFunctionNode = targetNode?.arguments?.[0];
+    targetNode = targetNode.callee.object;
+    targetMapperUsed = true;
+  }
+
+  yield* replaceBySample(
+    { clockNode, sourceNode, filterNode, mapperFunctionNode, targetNode },
+    { node, fixer, context, importNodes, methodName: "guard" }
+  );
+}
+
 function* replaceForwardBySample(
   forwardConfig,
   { fixer, node, context, importNodes }
@@ -39,13 +65,13 @@ function* replaceForwardBySample(
   }
 
   yield* replaceBySample(
-    { clockNode, targetNode, mapperFunctionNode },
+    { clockNode, mapperFunctionNode, targetNode },
     { node, fixer, context, importNodes, methodName: "forward" }
   );
 }
 
 function* replaceBySample(
-  { clockNode, targetNode, mapperFunctionNode },
+  { clockNode, sourceNode, filterNode, mapperFunctionNode, targetNode },
   { node, fixer, context, importNodes, methodName }
 ) {
   yield fixer.replaceText(
@@ -53,6 +79,8 @@ function* replaceBySample(
     `sample(${buildObjectInText.fromMapOfNodes({
       properties: {
         clock: clockNode,
+        source: sourceNode,
+        filter: filterNode,
         fn: mapperFunctionNode,
         target: targetNode,
       },
@@ -63,4 +91,4 @@ function* replaceBySample(
   yield fixer.replaceText(importNodes.get(methodName), "sample");
 }
 
-module.exports = { replaceForwardBySample };
+module.exports = { replaceForwardBySample, replaceGuardBySample };