Add rule mandatory-useEvent

CHANGELOG.md

@@ -1,5 +1,15 @@
 # Changelog
 
+## v0.7.0
+
+### Rules
+
+- Add new rule `mandatory-useEvent` ([PR #100](https://github.com/effector/eslint-plugin/pull/100))
+
+### Presets
+
+- Add `mandatory-useEvent` to `scope` preset
+
 ## v0.6.0
 
 - Add new rule `keep-options-order` ([PR #81](https://github.com/effector/eslint-plugin/pull/81))

README.md

@@ -62,6 +62,7 @@ This preset is recommended for most projects.
 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)
+- [effector/mandatory-useEvent](rules/mandatory-useEvent/mandatory-useEvent.md)
 
 #### plugin:effector/react
 

config/scope.js

@@ -1,5 +1,6 @@
 module.exports = {
   rules: {
     "effector/strict-effect-handlers": "error",
+    "effector/mandatory-useEvent": "error",
   },
 };

index.js

@@ -15,6 +15,7 @@ module.exports = {
     "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"),

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",
@@ -29,6 +29,7 @@
     "effector": "^22.0.0",
     "effector-react": "^22.0.6",
     "eslint": "^8.0.0",
+    "glob": "^8.0.3",
     "jest": "^27.1.0",
     "nano-staged": "^0.5.0",
     "react": "^17.0.2",

rules/mandatory-useEvent/examples/correct-array-shape-via-useEvent.tsx

@@ -0,0 +1,30 @@
+import React from "react";
+import { useEvent } from "effector-react";
+import { createEvent, createEffect } from "effector";
+
+const clicked = createEvent();
+const mounted = createEvent();
+const unmounted = createEvent();
+const fetchFx = createEffect(() => {});
+
+const Button: React.FC = () => {
+  const [clickedEvent, mountedEvent, unmountedEvent, fetch] = useEvent([
+    clicked,
+    mounted,
+    unmounted,
+    fetchFx,
+  ]);
+
+  React.useEffect(() => {
+    mountedEvent();
+    fetch();
+
+    return () => {
+      unmountedEvent();
+    };
+  }, []);
+
+  return <button onClick={() => clickedEvent()}>click</button>;
+};
+
+export { Button };

rules/mandatory-useEvent/examples/correct-effect-via-useEvent.tsx

@@ -0,0 +1,12 @@
+import React from "react";
+import { useEvent } from "effector-react";
+
+import { fetchFx } from "./model";
+
+const Button: React.FC = () => {
+  const clickedEffect = useEvent(fetchFx);
+
+  return <button onClick={clickedEffect}>click</button>;
+};
+
+export { Button };

rules/mandatory-useEvent/examples/correct-event-as-object-prop.tsx

@@ -0,0 +1,15 @@
+import React from "react";
+import { useEvent } from "effector-react";
+
+import * as model from "./model";
+
+const Button: React.FC = () => {
+  const clickedEvent = useEvent(model.clicked);
+  const mounted = useEvent(model.deepNestedModel.context.outputs.mounted);
+
+  React.useEffect(mounted, []);
+
+  return <button onClick={clickedEvent}>click</button>;
+};
+
+export { Button };

rules/mandatory-useEvent/examples/correct-event-via-useEvent.tsx

@@ -0,0 +1,12 @@
+import React from "react";
+import { useEvent } from "effector-react";
+
+import { clicked } from "./model";
+
+const Button: React.FC = () => {
+  const clickedEvent = useEvent(clicked);
+
+  return <button onClick={clickedEvent}>click</button>;
+};
+
+export { Button };

rules/mandatory-useEvent/examples/correct-object-shape-via-useEvent.tsx

@@ -0,0 +1,26 @@
+import React from "react";
+import { useEvent } from "effector-react";
+
+import { clicked, mounted, fetchFx, unmounted } from "./model";
+
+const Button: React.FC = () => {
+  const { clickedEvent, mountedEvent, unmountedEvent, fetch } = useEvent({
+    clickedEvent: clicked,
+    mountedEvent: mounted,
+    unmountedEvent: unmounted,
+    fetch: fetchFx,
+  });
+
+  React.useEffect(() => {
+    mountedEvent();
+    fetch();
+
+    return () => {
+      unmountedEvent();
+    };
+  }, []);
+
+  return <button onClick={() => clickedEvent(true)}>click</button>;
+};
+
+export { Button };

rules/mandatory-useEvent/examples/correct-scope-import.tsx

@@ -0,0 +1,26 @@
+import React from "react";
+import { useEvent } from "effector-react/scope";
+
+import { clicked, mounted, fetchFx, unmounted } from "./model";
+
+const Button: React.FC = () => {
+  const { clickedEvent, mountedEvent, unmountedEvent, fetch } = useEvent({
+    clickedEvent: clicked,
+    mountedEvent: mounted,
+    unmountedEvent: unmounted,
+    fetch: fetchFx,
+  });
+
+  React.useEffect(() => {
+    mountedEvent();
+    fetch();
+
+    return () => {
+      unmountedEvent();
+    };
+  }, []);
+
+  return <button onClick={() => clickedEvent(true)}>click</button>;
+};
+
+export { Button };

rules/mandatory-useEvent/examples/incorrect-direct-effect-call-in-hook.tsx

@@ -0,0 +1,13 @@
+import React from "react";
+
+import { fetchFx } from "./model";
+
+const Button: React.FC = () => {
+  React.useEffect(() => {
+    fetchFx();
+  }, []);
+
+  return <button>click</button>;
+};
+
+export { Button };

rules/mandatory-useEvent/examples/incorrect-direct-event-call-in-callback.tsx

@@ -0,0 +1,9 @@
+import React from "react";
+
+import { clicked } from "./model";
+
+const Button: React.FC = () => {
+  return <button onClick={() => clicked(null)}>click</button>;
+};
+
+export { Button };

rules/mandatory-useEvent/examples/incorrect-direct-event-call-in-hook-cleanup-callback.tsx

@@ -0,0 +1,13 @@
+import React from "react";
+
+import { unmounted } from "./model";
+
+const Button: React.FC = () => {
+  React.useEffect(() => {
+    return () => unmounted();
+  }, []);
+
+  return <button>click</button>;
+};
+
+export { Button };

rules/mandatory-useEvent/examples/incorrect-direct-event-call-in-hook.tsx

@@ -0,0 +1,13 @@
+import React from "react";
+
+import { mounted } from "./model";
+
+const Button: React.FC = () => {
+  React.useEffect(() => {
+    mounted();
+  }, []);
+
+  return <button>click</button>;
+};
+
+export { Button };

rules/mandatory-useEvent/examples/incorrect-event-as-hook-callback.tsx

@@ -0,0 +1,11 @@
+import React from "react";
+
+import { mounted } from "./model";
+
+const Button: React.FC = () => {
+  React.useEffect(mounted, []);
+
+  return <button>click</button>;
+};
+
+export { Button };

rules/mandatory-useEvent/examples/incorrect-event-as-prop.tsx

@@ -0,0 +1,9 @@
+import React from "react";
+
+import {clicked} from "./model";
+
+const Button: React.FC = () => {
+  return <button onClick={clicked}>click</button>;
+};
+
+export { Button };

rules/mandatory-useEvent/examples/model.ts

@@ -0,0 +1,14 @@
+import { createEffect, createEvent } from "effector";
+
+export const clicked = createEvent<unknown>();
+export const mounted = createEvent();
+export const unmounted = createEvent();
+export const fetchFx = createEffect(() => {});
+
+export const deepNestedModel = {
+  context: {
+    outputs: {
+      mounted,
+    },
+  },
+};

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"],
+  });
+}

rules/mandatory-useEvent/mandatory-useEvent.md

@@ -0,0 +1,20 @@
+# effector/mandatory-useEvent
+
+Forbids `Event` and `Effect` usage without `useEvent` in React components.
+This ensures `Fork API` compatibility and allows to write isomorphic code for SSR apps.
+
+```tsx
+const increment = createEvent();
+
+// 👍 Event usage is wrapped with `useEvent`
+const GoodButton = () => {
+  const incrementEvent = useEvent(increment);
+
+  return <button onClick={incrementEvent}>+</button>;
+};
+
+// 👎 Event is not wrapped with `useEvent` - component is not suitable for isomorphic SSR app
+const BadButton = () => {
+  return <button onClick={increment}>+</button>;
+};
+```