eslint-plugin-react-server-components - npm Package Compare versions

Comparing version 1.1.1 to 1.1.2

dist/index.js

@@ -171,3 +171,2 @@ // src/rules/use-client.ts
 import componentUtil from "eslint-plugin-react/lib/util/componentUtil";
-var HOOK_REGEX = /^use[A-Z]/;
 var useClientRegex = /^('|")use client('|")/;
@@ -277,3 +276,3 @@ var browserOnlyGlobals = Object.keys(globals.browser).reduce(
         }
-        if (HOOK_REGEX.test(name) && // Is in a function...
+        if (isClientOnlyHook(name) && // Is in a function...
         context.getScope().type === "function" && // But only if that function is a component
@@ -300,3 +299,3 @@ Boolean(util.getParentComponent(expression))) {
         }
-        if (expression.callee && HOOK_REGEX.test(expression.callee.name) && Boolean(util.getParentComponent(expression))) {
+        if (expression.callee && isClientOnlyHook(expression.callee.name) && Boolean(util.getParentComponent(expression))) {
           instances.push(expression.callee.name);
@@ -371,2 +370,5 @@ reportMissingDirective("addUseClientHooks", expression.callee, {
 }
+function isClientOnlyHook(name) {
+  return /^use[A-Z]/.test(name) && name !== "useId";
+}
 var ClientComponents = { meta, create };
@@ -373,0 +375,0 @@

package.json

 {
   "name": "eslint-plugin-react-server-components",
-  "version": "1.1.1",
+  "version": "1.1.2",
   "description": "Rules for React server components",
@@ -5,0 +5,0 @@ "type": "module",

src/rules/use-client.test.ts

@@ -159,2 +159,9 @@ "use strict";
         },
+        {
+          code: `import {useId} from 'react';
+const Button = () => {
+  const id = useId();
+  return <div id={id} />;
+}`,
+        },
       ],
@@ -213,2 +220,17 @@ invalid: [
         },
+        {
+          code: `const Button = () => {
+  const id = useIdentifier();
+  return <div id={id} />;
+}`,
+          errors: [
+            { messageId: "addUseClientHooks", data: { hook: "useIdentifier" } },
+          ],
+          output: `'use client';
+
+const Button = () => {
+  const id = useIdentifier();
+  return <div id={id} />;
+}`,
+        },
       ],
@@ -215,0 +237,0 @@ });

src/rules/use-client.ts

@@ -19,3 +19,2 @@ import type { Rule } from "eslint";
 
-const HOOK_REGEX = /^use[A-Z]/;
 const useClientRegex = /^('|")use client('|")/;
@@ -165,3 +164,3 @@ const browserOnlyGlobals = Object.keys(globals.browser)
         if (
-          HOOK_REGEX.test(name) &&
+          isClientOnlyHook(name) &&
           // Is in a function...
@@ -211,3 +210,3 @@ context.getScope().type === "function" &&
           expression.callee &&
-          HOOK_REGEX.test(expression.callee.name) &&
+          isClientOnlyHook(expression.callee.name) &&
           Boolean(util.getParentComponent(expression))
@@ -300,2 +299,7 @@ ) {
 
+function isClientOnlyHook(name: string) {
+  // `useId` is the only hook that's allowed in server components
+  return /^use[A-Z]/.test(name) && name !== 'useId'
+}
+
 export const ClientComponents = { meta, create };

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

47949

increased by1.59%

Lines of code

1579

increased by1.81%

No dependency changes