Support nested function calls for extraHOCs (fixes #104)

Author: ArnaudBarre

CHANGELOG.md

@@ -3,6 +3,7 @@
 ## Unreleased
 
 - Support false positives with TypeScript function overloading (fixes [#105](https://github.com/ArnaudBarre/eslint-plugin-react-refresh/issues/105))
+- Support nested function calls for extraHOCs (fixes [#104](https://github.com/ArnaudBarre/eslint-plugin-react-refresh/issues/104))
 
 ## 0.5.0
 

src/only-export-components.test.ts

@@ -276,12 +276,17 @@ const valid: {
     code: "export default class MyComponent extends Component { render() { return <div>Hello</div>; } }",
   },
   {
-    name: "Direct export uppercase function",
+    name: "Function overloading",
     code: `export function Button(props: PropsWithChildren<{ onClick: () => void }>): ReactNode;
 export function Button(props: PropsWithChildren): ReactNode {
   return <button {...props}>{props.children}</button>;
 }`,
   },
+  {
+    name: "Nested function calls for extraHOCs",
+    code: "export const Component = styled('div').attrs({})`display: flex;`",
+    options: { extraHOCs: ["styled"] },
+  },
 ];
 
 const invalid: {

src/only-export-components.ts

@@ -78,10 +78,7 @@ export const onlyExportComponents: TSESLint.RuleModule<
       // react-redux: connect(mapStateToProps, mapDispatchToProps)(...);
       // TanStack: createRootRoute()({ component: Foo });
       // styled-components: styled('div')`display: flex;`; or styled('div')({ display: 'flex' });
-      if (
-        callee.type === "CallExpression"
-        && callee.callee.type === "Identifier"
-      ) {
+      if (callee.type === "CallExpression") {
         return getHocName(callee);
       }
       // React.memo(...)