fix(eslint-plugin): reinstating require-named-effects (#86)

* revert(eslint-plugin): "fix: remove useless required line in index (#84)"

This reverts commit 4c81100.

* revert(eslint-plugin): "revert(eslint-plugin): delete custom rules  (#81)"

This reverts commit e6fcf3b.

* chore(eslint-plugin): delete CI test check

* fix(eslint-plugin): remove auto-generating doc command

* doc(eslint-plugin): delete 5 custom rules

* BREAKING CHANGE(eslint-plugin): delete custom rules

* fix(eslint-plugin): delete example of custom rules

* doc(eslint-plugin): removing 5 custom rules doc

* chore(eslint-plugin): enabling custom rule test in example-app

* fix(eslint-plugin): adding a todo for no-floating-promises bugfix

* fix(eslint-plugin): absolute path rule

* chore(eslint-plugin): adding notion ticket in todo

* chore(eslint-plugin): re-adding scripts for custom rules

* fix(eslint-plugin): auto generated doc

* chroe(eslint-plugin): re-adding CI test

Author: JulienIzz

.github/workflows/quality-eslint.yml

@@ -38,3 +38,6 @@ jobs:
 
       - name: Linter
         run: yarn lint
+
+      - name: Tests
+        run: yarn test

example-app/.eslintrc

@@ -6,5 +6,6 @@
       "files": ["*.test.tsx"],
       "extends": "plugin:@bam.tech/tests"
     }
-  ]
+  ],
+  "rules": { "@bam.tech/require-named-effect": "error" }
 }

example-app/eslint-breaking-examples/break-require-named-effect.tsx

@@ -0,0 +1,19 @@
+// Save without formatting: [⌘ + K] > [S]
+
+// This should trigger an error breaking eslint-plugin-bam-custom-rules:
+// bam-custom-rules/require-named-effect
+
+import { useEffect } from "react";
+
+const MyComponent = () => {
+  const doAThing = (t: number) => t;
+
+  useEffect(() => {
+    const abc = 1;
+    doAThing(abc);
+  }, []);
+
+  return <></>;
+};
+
+export default MyComponent;

packages/eslint-plugin/README.md

@@ -96,6 +96,32 @@ If you use **npm >= 5** you can automatically install them by running:
 npx install-peerdeps @bam.tech/eslint-config -D
 ```
 
+## Eslint rules
+
+This plugin exports some custom rules that you can optionally use in your project:
+
+<!-- begin auto-generated rules list -->
+
+| Name                                                                                                                                              | Description                                            |
+| :------------------------------------------------------------------------------------------------------------------------------------------------ | :----------------------------------------------------- |
+| [require-named-effect](https://github.com/bamlab/react-native-project-config/blob/main/packages/eslint-plugin/docs/rules/require-named-effect.md) | Enforces the use of named functions inside a useEffect |
+
+<!-- end auto-generated rules list -->
+
+To use a rule, just declare it in your `.eslintrc`:
+
+```json
+// .eslintrc
+{
+  "plugins": ["@bam.tech"],
+  "rules": {
+    "@bam.tech/require-named-effect": "error"
+  }
+}
+```
+
+> _Tip: if your config is already extended from a `@bam.tech` config, you don't need to declare the plugin._
+
 ## How to customize?
 
 You can still customize your ESLint config by adding other configurations, plugins and rules to your `.eslintrc` config file.

packages/eslint-plugin/docs/rules/require-named-effect.md

@@ -0,0 +1,40 @@
+# Enforces the use of named functions inside a useEffect (`@bam.tech/require-named-effect`)
+
+<!-- end auto-generated rule header -->
+
+Force to use named functions inside a useEffect instead of lambda functions.
+
+## Rule Details
+
+Examples of **incorrect** code for this rule:
+
+```jsx
+useEffect(() => {}, []);
+```
+
+```jsx
+useEffect(() => {
+  const t = 1;
+  disallowTwoThings(t);
+}, []);
+```
+
+Examples of **correct** code for this rule:
+
+```jsx
+useEffect(function namedFunction() {}, []);
+```
+
+```jsx
+useEffect(theNameOfAFunction(), []);
+```
+
+```jsx
+useEffect(() => theNameOfAFunction(), []);
+```
+
+```jsx
+useEffect(() => {
+  theOnlyChildIsAFunctionCall();
+}, []);
+```

packages/eslint-plugin/lib/configs/recommended.js

@@ -44,7 +44,7 @@ module.exports = defineConfig({
     "@typescript-eslint/no-unused-vars": "off",
     "unused-imports/no-unused-imports": "error",
     "unused-imports/no-unused-vars": "error",
-    "@typescript-eslint/no-floating-promises": "error",
+    // "@typescript-eslint/no-floating-promises": "error", //TODO: A réactiver après le fix de @thomasrebam https://www.notion.so/m33/ETQU-sur-le-plugin-eslint-la-r-gle-no-floating-promises-fonctionne-949b4beca2b34704a87c41faa982f540
   },
   env: {
     node: true,

packages/eslint-plugin/lib/index.js

@@ -4,4 +4,5 @@ const requireIndex = require("requireindex");
 
 module.exports = {
   configs: requireIndex(__dirname + "/configs"),
+  rules: requireIndex(__dirname + "/rules"),
 };

packages/eslint-plugin/lib/rules/require-named-effect.js

@@ -0,0 +1,82 @@
+/**
+ * @fileoverview Force the use of named functions inside a useEffect
+ * @author Cyril Bonaccini
+ */
+"use strict";
+
+//------------------------------------------------------------------------------
+// Rule Definition
+//------------------------------------------------------------------------------
+
+/** @type {import('eslint').Rule.RuleModule} */
+module.exports = {
+  meta: {
+    type: "suggestion", // `problem`, `suggestion`, or `layout`
+    docs: {
+      description: "Enforces the use of named functions inside a useEffect",
+      recommended: false,
+      url: "https://github.com/bamlab/react-native-project-config/tree/main/packages/eslint-plugin/docs/rules/require-named-effect.md", // URL to the documentation page for this rule
+    },
+    fixable: null, // Or `code` or `whitespace`
+    schema: [], // Add a schema if the rule has options,
+    messages: {
+      useNamedFunction: "Complex effects must be a named function.",
+    },
+  },
+
+  create(context) {
+    //----------------------------------------------------------------------
+    // Helpers
+    //----------------------------------------------------------------------
+
+    const isUseEffect = (node) => node.callee.name === "useEffect";
+
+    const argumentIsArrowFunction = (node) =>
+      node.arguments[0].type === "ArrowFunctionExpression";
+
+    const effectBodyIsSingleFunction = (node) => {
+      const { body } = node.arguments[0];
+
+      // It's a single unwrapped function call:
+      //   `useEffect(() => theNameOfAFunction(), []);`
+      if (body.type === "CallExpression") {
+        return true;
+      }
+
+      // There's a function body, but it just calls another function:
+      //   `useEffect(() => {
+      //     theOnlyChildIsAFunctionCall();
+      //   }, []);`
+      if (
+        body.body.length &&
+        body.body.length === 1 &&
+        body.body[0] &&
+        body.body[0].expression &&
+        body.body[0].expression.type === "CallExpression"
+      ) {
+        return true;
+      }
+
+      return false;
+    };
+
+    const fail = (report, node) =>
+      report({ node, messageId: "useNamedFunction" });
+
+    //----------------------------------------------------------------------
+    // Public
+    //----------------------------------------------------------------------
+
+    return {
+      CallExpression(node) {
+        if (
+          isUseEffect(node) &&
+          argumentIsArrowFunction(node) &&
+          !effectBodyIsSingleFunction(node)
+        ) {
+          fail(context.report, node);
+        }
+      },
+    };
+  },
+};

packages/eslint-plugin/package.json

@@ -18,7 +18,10 @@
   "license": "MIT",
   "scripts": {
     "lint": "npm-run-all \"lint:*\"",
-    "lint:js": "eslint ."
+    "lint:js": "eslint .",
+    "lint:eslint-docs": "npm-run-all \"update:eslint-docs -- --check\"",
+    "test": "mocha tests --recursive",
+    "update:eslint-docs": "eslint-doc-generator"
   },
   "peerDependencies": {
     "@typescript-eslint/eslint-plugin": "^5.61.0",

packages/eslint-plugin/tests/lib/rules/require-named-effect.js

@@ -0,0 +1,45 @@
+/**
+ * @fileoverview Force the use of named functions inside a useEffect
+ * @author Cyril Bonaccini
+ */
+"use strict";
+
+//------------------------------------------------------------------------------
+// Requirements
+//------------------------------------------------------------------------------
+
+const rule = require("../../../lib/rules/require-named-effect"),
+  RuleTester = require("eslint").RuleTester;
+
+//------------------------------------------------------------------------------
+// Tests
+//------------------------------------------------------------------------------
+
+const ruleTester = new RuleTester({
+  parser: require.resolve("@typescript-eslint/parser"),
+});
+
+const valid = [
+  `useEffect(function namedFunction() {}, []);`,
+  `useEffect(theNameOfAFunction(), []);`,
+  `useEffect(() => theNameOfAFunction(), []);`,
+  `useEffect(() => {
+      theOnlyChildIsAFunctionCall();
+    }, []);`,
+];
+
+const invalid = [
+  `useEffect(() => {}, []);`,
+  `useEffect(() => {
+      const t = 1;
+      disallowTwoThings(t);
+    }, []);`,
+];
+
+ruleTester.run("require-named-effect", rule, {
+  valid,
+  invalid: invalid.map((code) => ({
+    code,
+    errors: ["Complex effects must be a named function."],
+  })),
+});