fix: issue with eslint plugin not allowing useDefaultProps (#1696)

* fix: issue with eslint plugin not allowing useDefaultProps * chore: update only-default-function-and-imports tests and description * Update packages/eslint-plugin/src/rules/only-default-function-and-imports.ts --------- Co-authored-by: Sami Jaber <[email protected]>
BuilderIO · Feb 28, 2025 · 0f2a9ee · 0f2a9ee
1 parent e0ba666
commit 0f2a9ee
Show file tree

Hide file tree

Showing 4 changed files with 45 additions and 11 deletions.
diff --git a/.changeset/thirty-oranges-refuse.md b/.changeset/thirty-oranges-refuse.md
@@ -0,0 +1,5 @@
+---
+'@builder.io/eslint-plugin-mitosis': patch
+---
+
+Fix issue with plugin marking 'useDefaultProps' as an error
diff --git a/packages/eslint-plugin/src/constants/hooks.ts b/packages/eslint-plugin/src/constants/hooks.ts
@@ -4,4 +4,5 @@ export const HOOKS = {
   CONTEXT: 'useContext',
   REF: 'useRef',
   META_DATA: 'useMetadata',
+  DEFAULT_PROPS: 'useDefaultProps',
 } as const;
diff --git a/packages/eslint-plugin/src/rules/__tests__/only-default-function-and-imports.test.ts b/packages/eslint-plugin/src/rules/__tests__/only-default-function-and-imports.test.ts
@@ -1,5 +1,5 @@
 import { RuleTester } from 'eslint';
-import rule from '../only-default-function-and-imports';
+import rule, { onlyDefaultFunctionAndImportsMessage } from '../only-default-function-and-imports';
 
 const opts = {
   filename: 'component.lite.tsx',
@@ -76,6 +76,20 @@ ruleTester.run('only-default-function-and-imports', rule, {
       }
     `,
     },
+    {
+      ...opts,
+      code: `
+      useDefaultProps({
+        test: "XXX"
+      });
+      
+      export default function RenderComponent(props) {
+        return (
+      <div>{props.test}</div>
+        );
+      }
+    `,
+    },
     {
       ...opts,
       code: `
@@ -102,9 +116,7 @@ ruleTester.run('only-default-function-and-imports', rule, {
       }
       export const x = y;
     `,
-      errors: [
-        'Mitosis component files should only contain import declarations, the component itself (in a default export), and type declarations',
-      ],
+      errors: [onlyDefaultFunctionAndImportsMessage],
     },
     {
       ...opts,
@@ -123,9 +135,22 @@ ruleTester.run('only-default-function-and-imports', rule, {
         );
       }
     `,
-      errors: [
-        'Mitosis component files should only contain import declarations, the component itself (in a default export), and type declarations',
-      ],
+      errors: [onlyDefaultFunctionAndImportsMessage],
+    },
+    {
+      ...opts,
+      code: `
+      useDefault({
+        test: "XXX"
+      });
+      
+      export default function RenderComponent(props) {
+        return (
+      <div>{props.test}</div>
+        );
+      }
+    `,
+      errors: [onlyDefaultFunctionAndImportsMessage],
     },
   ],
 });
diff --git a/packages/eslint-plugin/src/rules/only-default-function-and-imports.ts b/packages/eslint-plugin/src/rules/only-default-function-and-imports.ts
@@ -7,12 +7,15 @@ import isMitosisPath from '../helpers/isMitosisPath';
 // Rule Definition
 // ------------------------------------------------------------------------------
 
+export const onlyDefaultFunctionAndImportsMessage =
+  'Mitosis component files should only contain import declarations, the component itself (in a default export), module-scope hooks, and type declarations';
+
 const rule: Rule.RuleModule = {
   meta: {
     type: 'problem',
     docs: {
       description:
-        'disallow anything other than import declarations, the component itself (in a default export), and type declarations inside the component file.',
+        'disallow anything other than import declarations, the component itself (in a default export), module-scope hooks, and type declarations inside the component file.',
       recommended: true,
     },
   },
@@ -56,12 +59,12 @@ const rule: Rule.RuleModule = {
             (!types.isExpressionStatement(child) ||
               !types.isCallExpression(child.expression) ||
               !types.isIdentifier(child.expression.callee) ||
-              child.expression.callee.name !== HOOKS.META_DATA)
+              (child.expression.callee.name !== HOOKS.META_DATA &&
+                child.expression.callee.name !== HOOKS.DEFAULT_PROPS))
           ) {
             context.report({
               node: child as any,
-              message:
-                'Mitosis component files should only contain import declarations, the component itself (in a default export), and type declarations',
+              message: onlyDefaultFunctionAndImportsMessage,
             });
           }
         }