diff --git a/.changeset/thirty-oranges-refuse.md b/.changeset/thirty-oranges-refuse.md
new file mode 100644
index 0000000000..549e1f8197
--- /dev/null
+++ 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
\ No newline at end of file
diff --git a/packages/eslint-plugin/src/constants/hooks.ts b/packages/eslint-plugin/src/constants/hooks.ts
index c670ab28eb..ab5b67f66b 100644
--- 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
index 96c51e7879..38a1d313ea 100644
--- 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 (
+
{props.test}
+ );
+ }
+ `,
+ },
{
...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 (
+ {props.test}
+ );
+ }
+ `,
+ 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
index 8e0e79040f..a4ac418338 100644
--- 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,
});
}
}