eslint-plugin-react-hooks-extra 1.5.26-next.0 → 1.5.26-next.1

package/README.md

@@ -30,7 +30,8 @@ export default [
       "react-hooks-extra": reactHooksExtra,
       rules: {
         // react-hooks-extra recommended rules
-        "react-hooks-extra/ensure-custom-hooks-using-other-hooks": "warn",
+        "react-hooks-extra/no-direct-set-state-in-use-effect": "warn",
+        "react-hooks-extra/no-direct-set-state-in-use-layout-effect": "warn",
         "react-hooks-extra/prefer-use-state-lazy-initialization": "warn",
       }
     ],
@@ -40,10 +41,11 @@ export default [
 
 ## Rules
 
-| Rule                                     | Description                                                               | 💼  | 💭  | ❌  |
-| :--------------------------------------- | :------------------------------------------------------------------------ | :-: | :-: | :-: |
-| `ensure-custom-hooks-using-other-hooks`  | Warns when custom Hooks that don't use other Hooks.                       |  ✔️  |     |     |
-| `ensure-use-callback-has-non-empty-deps` | Warns when `useCallback` is called with empty dependencies array.         | 🧐  |     |     |
-| `ensure-use-memo-has-non-empty-deps`     | Warns when `useMemo` is called with empty dependencies array.             | 🧐  |     |     |
-| `no-direct-set-state-in-use-effect`      | Disallow direct calls to the `set` function of `useState` in `useEffect`. |  ✔️  |     |     |
-| `prefer-use-state-lazy-initialization`   | Warns function calls made inside `useState` calls.                        | 🚀  |     |     |
+| Rule                                       | Description                                                                     | 💼  | 💭  | ❌  |
+| :----------------------------------------- | :------------------------------------------------------------------------------ | :-: | :-: | :-: |
+| `ensure-custom-hooks-using-other-hooks`    | Warns when custom Hooks that don't use other Hooks.                             |  ✔️  |     |     |
+| `ensure-use-callback-has-non-empty-deps`   | Warns when `useCallback` is called with empty dependencies array.               | 🧐  |     |     |
+| `ensure-use-memo-has-non-empty-deps`       | Warns when `useMemo` is called with empty dependencies array.                   | 🧐  |     |     |
+| `no-direct-set-state-in-use-effect`        | Disallow direct calls to the `set` function of `useState` in `useEffect`.       |  ✔️  |     |     |
+| `no-direct-set-state-in-use-layout-effect` | Disallow direct calls to the `set` function of `useState` in `useLayoutEffect`. |  ✔️  |     |     |
+| `prefer-use-state-lazy-initialization`     | Warns function calls made inside `useState` calls.                              | 🚀  |     |     |

package/dist/index.d.mts

@@ -9,6 +9,7 @@ declare const rules: {
     readonly "ensure-use-callback-has-non-empty-deps": _typescript_eslint_utils_ts_eslint.RuleModule<"ENSURE_USE_CALLBACK_HAS_NON_EMPTY_DEPS", [], _typescript_eslint_utils_ts_eslint.RuleListener>;
     readonly "ensure-use-memo-has-non-empty-deps": _typescript_eslint_utils_ts_eslint.RuleModule<"ENSURE_USE_MEMO_HAS_NON_EMPTY_DEPS", [], _typescript_eslint_utils_ts_eslint.RuleListener>;
     readonly "no-direct-set-state-in-use-effect": _typescript_eslint_utils_ts_eslint.RuleModule<"NO_DIRECT_SET_STATE_IN_USE_EFFECT", [], _typescript_eslint_utils_ts_eslint.RuleListener>;
+    readonly "no-direct-set-state-in-use-layout-effect": _typescript_eslint_utils_ts_eslint.RuleModule<"NO_DIRECT_SET_STATE_IN_USE_LAYOUT_EFFECT", [], _typescript_eslint_utils_ts_eslint.RuleListener>;
     readonly "prefer-use-state-lazy-initialization": _typescript_eslint_utils_ts_eslint.RuleModule<"PREFER_USE_STATE_LAZY_INITIALIZATION", [], _typescript_eslint_utils_ts_eslint.RuleListener>;
 };
 

package/dist/index.d.ts

@@ -9,6 +9,7 @@ declare const rules: {
     readonly "ensure-use-callback-has-non-empty-deps": _typescript_eslint_utils_ts_eslint.RuleModule<"ENSURE_USE_CALLBACK_HAS_NON_EMPTY_DEPS", [], _typescript_eslint_utils_ts_eslint.RuleListener>;
     readonly "ensure-use-memo-has-non-empty-deps": _typescript_eslint_utils_ts_eslint.RuleModule<"ENSURE_USE_MEMO_HAS_NON_EMPTY_DEPS", [], _typescript_eslint_utils_ts_eslint.RuleListener>;
     readonly "no-direct-set-state-in-use-effect": _typescript_eslint_utils_ts_eslint.RuleModule<"NO_DIRECT_SET_STATE_IN_USE_EFFECT", [], _typescript_eslint_utils_ts_eslint.RuleListener>;
+    readonly "no-direct-set-state-in-use-layout-effect": _typescript_eslint_utils_ts_eslint.RuleModule<"NO_DIRECT_SET_STATE_IN_USE_LAYOUT_EFFECT", [], _typescript_eslint_utils_ts_eslint.RuleListener>;
     readonly "prefer-use-state-lazy-initialization": _typescript_eslint_utils_ts_eslint.RuleModule<"PREFER_USE_STATE_LAZY_INITIALIZATION", [], _typescript_eslint_utils_ts_eslint.RuleListener>;
 };
 

package/dist/index.js

@@ -9,7 +9,7 @@ var astUtils = require('@typescript-eslint/utils/ast-utils');
 
 // package.json
 var name = "eslint-plugin-react-hooks-extra";
-var version = "1.5.26-next.0";
+var version = "1.5.26-next.1";
 var createRule = shared.createRuleForPlugin("hooks-extra");
 
 // src/rules/ensure-custom-hooks-using-other-hooks.ts
@@ -395,7 +395,85 @@ var no_direct_set_state_in_use_effect_default = createRule({
   },
   defaultOptions: []
 });
-var RULE_NAME5 = "prefer-use-state-lazy-initialization";
+var RULE_NAME5 = "no-direct-set-state-in-use-layout-effect";
+var no_direct_set_state_in_use_layout_effect_default = createRule({
+  meta: {
+    type: "problem",
+    docs: {
+      description: "disallow direct calls to the 'set' function of 'useState' in 'useLayoutEffect'"
+    },
+    messages: {
+      NO_DIRECT_SET_STATE_IN_USE_LAYOUT_EFFECT: "Do not call the 'set' function of 'useState' directly in 'useLayoutEffect'."
+    },
+    schema: []
+  },
+  name: RULE_NAME5,
+  create(context) {
+    const settings = shared.getESLintReactSettings(context.settings);
+    const { useLayoutEffect: useLayoutEffectAlias = [], useState: useStateAlias = [] } = settings.additionalHooks ?? {};
+    function isUseLayoutEffectCallWithAlias(node, context2) {
+      return core.isUseLayoutEffectCall(node, context2) || useLayoutEffectAlias.some(tools.F.flip(core.isReactHookCallWithNameLoose)(node));
+    }
+    function isUseStateCallWithAlias(node, context2) {
+      return core.isUseStateCall(node, context2) || useStateAlias.some(tools.F.flip(core.isReactHookCallWithNameLoose)(node));
+    }
+    function isEffectFunction(node) {
+      return node.parent?.type === ast.NodeType.CallExpression && isUseLayoutEffectCallWithAlias(node.parent, context);
+    }
+    return {
+      CallExpression(node) {
+        const effectFunction = ast.traverseUp(node, isEffectFunction);
+        if (tools.O.isNone(effectFunction)) return;
+        const scope = context.sourceCode.getScope(node);
+        if (scope.block !== effectFunction.value) return;
+        const name2 = $(node.callee).with({ type: ast.NodeType.Identifier }, (n2) => tools.O.some(n2.name)).with({ type: ast.NodeType.MemberExpression }, (n2) => {
+          if (!("name" in n2.object)) return tools.O.none();
+          const initialScope = context.sourceCode.getScope(n2);
+          const property = astUtils.getStaticValue(n2.property, initialScope);
+          if (property?.value === 1) return tools.O.fromNullable(n2.object.name);
+          return tools.O.none();
+        }).with({ type: ast.NodeType.CallExpression }, (n2) => {
+          if (!ast.is(ast.NodeType.MemberExpression)(n2.callee)) return tools.O.none();
+          if (!("name" in n2.callee.object)) return tools.O.none();
+          const isAt = $(n2.callee).with(
+            {
+              type: ast.NodeType.MemberExpression,
+              property: {
+                type: ast.NodeType.Identifier,
+                name: "at"
+              }
+            },
+            tools.F.constTrue
+          ).otherwise(tools.F.constFalse);
+          if (!isAt) return tools.O.none();
+          const [index] = n2.arguments;
+          if (!index) return tools.O.none();
+          const initialScope = context.sourceCode.getScope(n2);
+          const value = astUtils.getStaticValue(index, initialScope);
+          if (value?.value === 1) return tools.O.fromNullable(n2.callee.object.name);
+          return tools.O.none();
+        }).otherwise(tools.O.none);
+        tools.F.pipe(
+          name2,
+          tools.O.flatMap(_var.findVariable(scope)),
+          tools.O.flatMap(_var.getVariableInit(0)),
+          tools.O.filter(ast.is(ast.NodeType.CallExpression)),
+          tools.O.filter((name3) => isUseStateCallWithAlias(name3, context)),
+          tools.O.map((name3) => ({
+            data: {
+              setState: name3
+            },
+            messageId: "NO_DIRECT_SET_STATE_IN_USE_LAYOUT_EFFECT",
+            node
+          })),
+          tools.O.map(context.report)
+        );
+      }
+    };
+  },
+  defaultOptions: []
+});
+var RULE_NAME6 = "prefer-use-state-lazy-initialization";
 var ALLOW_LIST = ["Boolean", "String", "Number"];
 var prefer_use_state_lazy_initialization_default = createRule({
   meta: {
@@ -408,7 +486,7 @@ var prefer_use_state_lazy_initialization_default = createRule({
     },
     schema: []
   },
-  name: RULE_NAME5,
+  name: RULE_NAME6,
   create(context) {
     const alias = shared.getESLintReactSettings(context.settings).additionalHooks?.useState ?? [];
     return {
@@ -442,6 +520,7 @@ var rules = {
   "ensure-use-callback-has-non-empty-deps": ensure_use_callback_has_non_empty_deps_default,
   "ensure-use-memo-has-non-empty-deps": ensure_use_memo_has_non_empty_deps_default,
   "no-direct-set-state-in-use-effect": no_direct_set_state_in_use_effect_default,
+  "no-direct-set-state-in-use-layout-effect": no_direct_set_state_in_use_layout_effect_default,
   "prefer-use-state-lazy-initialization": prefer_use_state_lazy_initialization_default
 };
 

package/dist/index.mjs

@@ -1,4 +1,4 @@
-import { useHookCollector, isReactHookCall, isUseCallbackCall, isReactHookCallWithNameLoose, isUseMemoCall, isUseStateCall, isUseEffectCall } from '@eslint-react/core';
+import { useHookCollector, isReactHookCall, isUseCallbackCall, isReactHookCallWithNameLoose, isUseMemoCall, isUseStateCall, isUseEffectCall, isUseLayoutEffectCall } from '@eslint-react/core';
 import { createRuleForPlugin, getESLintReactSettings } from '@eslint-react/shared';
 import { NodeType, is, traverseUp, getNestedCallExpressions } from '@eslint-react/ast';
 import { F, O } from '@eslint-react/tools';
@@ -7,7 +7,7 @@ import { getStaticValue } from '@typescript-eslint/utils/ast-utils';
 
 // package.json
 var name = "eslint-plugin-react-hooks-extra";
-var version = "1.5.26-next.0";
+var version = "1.5.26-next.1";
 var createRule = createRuleForPlugin("hooks-extra");
 
 // src/rules/ensure-custom-hooks-using-other-hooks.ts
@@ -393,7 +393,85 @@ var no_direct_set_state_in_use_effect_default = createRule({
   },
   defaultOptions: []
 });
-var RULE_NAME5 = "prefer-use-state-lazy-initialization";
+var RULE_NAME5 = "no-direct-set-state-in-use-layout-effect";
+var no_direct_set_state_in_use_layout_effect_default = createRule({
+  meta: {
+    type: "problem",
+    docs: {
+      description: "disallow direct calls to the 'set' function of 'useState' in 'useLayoutEffect'"
+    },
+    messages: {
+      NO_DIRECT_SET_STATE_IN_USE_LAYOUT_EFFECT: "Do not call the 'set' function of 'useState' directly in 'useLayoutEffect'."
+    },
+    schema: []
+  },
+  name: RULE_NAME5,
+  create(context) {
+    const settings = getESLintReactSettings(context.settings);
+    const { useLayoutEffect: useLayoutEffectAlias = [], useState: useStateAlias = [] } = settings.additionalHooks ?? {};
+    function isUseLayoutEffectCallWithAlias(node, context2) {
+      return isUseLayoutEffectCall(node, context2) || useLayoutEffectAlias.some(F.flip(isReactHookCallWithNameLoose)(node));
+    }
+    function isUseStateCallWithAlias(node, context2) {
+      return isUseStateCall(node, context2) || useStateAlias.some(F.flip(isReactHookCallWithNameLoose)(node));
+    }
+    function isEffectFunction(node) {
+      return node.parent?.type === NodeType.CallExpression && isUseLayoutEffectCallWithAlias(node.parent, context);
+    }
+    return {
+      CallExpression(node) {
+        const effectFunction = traverseUp(node, isEffectFunction);
+        if (O.isNone(effectFunction)) return;
+        const scope = context.sourceCode.getScope(node);
+        if (scope.block !== effectFunction.value) return;
+        const name2 = $(node.callee).with({ type: NodeType.Identifier }, (n2) => O.some(n2.name)).with({ type: NodeType.MemberExpression }, (n2) => {
+          if (!("name" in n2.object)) return O.none();
+          const initialScope = context.sourceCode.getScope(n2);
+          const property = getStaticValue(n2.property, initialScope);
+          if (property?.value === 1) return O.fromNullable(n2.object.name);
+          return O.none();
+        }).with({ type: NodeType.CallExpression }, (n2) => {
+          if (!is(NodeType.MemberExpression)(n2.callee)) return O.none();
+          if (!("name" in n2.callee.object)) return O.none();
+          const isAt = $(n2.callee).with(
+            {
+              type: NodeType.MemberExpression,
+              property: {
+                type: NodeType.Identifier,
+                name: "at"
+              }
+            },
+            F.constTrue
+          ).otherwise(F.constFalse);
+          if (!isAt) return O.none();
+          const [index] = n2.arguments;
+          if (!index) return O.none();
+          const initialScope = context.sourceCode.getScope(n2);
+          const value = getStaticValue(index, initialScope);
+          if (value?.value === 1) return O.fromNullable(n2.callee.object.name);
+          return O.none();
+        }).otherwise(O.none);
+        F.pipe(
+          name2,
+          O.flatMap(findVariable(scope)),
+          O.flatMap(getVariableInit(0)),
+          O.filter(is(NodeType.CallExpression)),
+          O.filter((name3) => isUseStateCallWithAlias(name3, context)),
+          O.map((name3) => ({
+            data: {
+              setState: name3
+            },
+            messageId: "NO_DIRECT_SET_STATE_IN_USE_LAYOUT_EFFECT",
+            node
+          })),
+          O.map(context.report)
+        );
+      }
+    };
+  },
+  defaultOptions: []
+});
+var RULE_NAME6 = "prefer-use-state-lazy-initialization";
 var ALLOW_LIST = ["Boolean", "String", "Number"];
 var prefer_use_state_lazy_initialization_default = createRule({
   meta: {
@@ -406,7 +484,7 @@ var prefer_use_state_lazy_initialization_default = createRule({
     },
     schema: []
   },
-  name: RULE_NAME5,
+  name: RULE_NAME6,
   create(context) {
     const alias = getESLintReactSettings(context.settings).additionalHooks?.useState ?? [];
     return {
@@ -440,6 +518,7 @@ var rules = {
   "ensure-use-callback-has-non-empty-deps": ensure_use_callback_has_non_empty_deps_default,
   "ensure-use-memo-has-non-empty-deps": ensure_use_memo_has_non_empty_deps_default,
   "no-direct-set-state-in-use-effect": no_direct_set_state_in_use_effect_default,
+  "no-direct-set-state-in-use-layout-effect": no_direct_set_state_in_use_layout_effect_default,
   "prefer-use-state-lazy-initialization": prefer_use_state_lazy_initialization_default
 };
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "eslint-plugin-react-hooks-extra",
-  "version": "1.5.26-next.0",
+  "version": "1.5.26-next.1",
   "description": "ESLint React's ESLint plugin for React Hooks related rules.",
   "homepage": "https://github.com/rel1cx/eslint-react",
   "bugs": {
@@ -39,13 +39,13 @@
     "@typescript-eslint/type-utils": "^7.16.0",
     "@typescript-eslint/types": "^7.16.0",
     "@typescript-eslint/utils": "^7.16.0",
-    "@eslint-react/ast": "1.5.26-next.0",
-    "@eslint-react/core": "1.5.26-next.0",
-    "@eslint-react/jsx": "1.5.26-next.0",
-    "@eslint-react/tools": "1.5.26-next.0",
-    "@eslint-react/shared": "1.5.26-next.0",
-    "@eslint-react/types": "1.5.26-next.0",
-    "@eslint-react/var": "1.5.26-next.0"
+    "@eslint-react/ast": "1.5.26-next.1",
+    "@eslint-react/jsx": "1.5.26-next.1",
+    "@eslint-react/tools": "1.5.26-next.1",
+    "@eslint-react/types": "1.5.26-next.1",
+    "@eslint-react/var": "1.5.26-next.1",
+    "@eslint-react/shared": "1.5.26-next.1",
+    "@eslint-react/core": "1.5.26-next.1"
   },
   "devDependencies": {
     "string-ts": "2.2.0",