diff --git a/packages/eslint-plugin/docs/rules/no-var-name-same-as-state-property.md b/packages/eslint-plugin/docs/rules/no-var-name-same-as-state-property.md index 93359a1d50..d3002056c9 100644 --- a/packages/eslint-plugin/docs/rules/no-var-name-same-as-state-property.md +++ b/packages/eslint-plugin/docs/rules/no-var-name-same-as-state-property.md @@ -57,6 +57,24 @@ export default function MyComponent(props) { } ``` +```js +import { useStore } from '@builder.io/mitosis'; + +export default function MyComponent(props) { + const state = useStore({ + foo: 'bar', + }); + + function myFunction() { + const { foo } = props.obj; + + state.foo = foo; + } + + return
; +} +``` + Examples of **correct** code for this rule: ```js @@ -72,3 +90,21 @@ export default function MyComponent(props) { return
; } ``` + +```js +import { useStore } from '@builder.io/mitosis'; + +export default function MyComponent(props) { + const state = useStore({ + foo: 'bar', + }); + + function myFunction() { + const { foo: foo1 } = props.obj; + + state.foo = foo; + } + + return
; +} +``` diff --git a/packages/eslint-plugin/src/rules/__tests__/no-var-name-same-as-state-property.ts b/packages/eslint-plugin/src/rules/__tests__/no-var-name-same-as-state-property.ts index 417f5f9a3e..8afa855c50 100644 --- a/packages/eslint-plugin/src/rules/__tests__/no-var-name-same-as-state-property.ts +++ b/packages/eslint-plugin/src/rules/__tests__/no-var-name-same-as-state-property.ts @@ -34,6 +34,27 @@ ruleTester.run('no-var-name-same-as-state-property', rule, { } `, }, + { + ...opts, + code: ` + import { useStore } from '@builder.io/mitosis'; + + export default function MyComponent(props) { + const state = useStore({ + foo: 'bar', + }); + + function myFunction() { + const { foo: foo1 } = props.obj + + state.foo = foo; + } + + + return
; + } + `, + }, // Doesn't apply to none mitosis files { ...opts, @@ -113,6 +134,27 @@ ruleTester.run('no-var-name-same-as-state-property', rule, { } + return
; + } + `, + errors: ['variables with the same name as a state property will shadow it'], + }, + { + ...opts, + code: ` + import { useStore } from '@builder.io/mitosis'; + + export default function MyComponent(props) { + const state = useStore({ + foo: 'bar', + }); + + function myFunction() { + const { foo } = props.obj + + state.foo = foo; + } + return
; } `, diff --git a/packages/eslint-plugin/src/rules/no-var-name-same-as-state-property.ts b/packages/eslint-plugin/src/rules/no-var-name-same-as-state-property.ts index a564638ea2..a663a278dd 100644 --- a/packages/eslint-plugin/src/rules/no-var-name-same-as-state-property.ts +++ b/packages/eslint-plugin/src/rules/no-var-name-same-as-state-property.ts @@ -130,9 +130,22 @@ const rule: Rule.RuleModule = { }); for (const d of varDeclarators) { - if (!types.isIdentifier(d.id)) continue; - - if (d.id.name === name) { + if (!types.isIdentifier(d.id) && !types.isObjectPattern(d.id)) continue; + if (types.isObjectPattern(d.id)) { + for (const p of d.id.properties) { + if ( + types.isProperty(p) && + types.isIdentifier(p.value) && + p.value.name == name + ) { + context.report({ + node: prop, + message: + 'variables with the same name as a state property will shadow it', + }); + } + } + } else if (d.id.name === name) { context.report({ node: prop, message: 'variables with the same name as a state property will shadow it',