diff --git a/.changeset/fix-no-vue-duplicate-keys-to-refs.md b/.changeset/fix-no-vue-duplicate-keys-to-refs.md new file mode 100644 index 000000000000..4cf1a194c275 --- /dev/null +++ b/.changeset/fix-no-vue-duplicate-keys-to-refs.md @@ -0,0 +1,5 @@ +--- +"@biomejs/biome": patch +--- + +Fixed [#9068](https://github.com/biomejs/biome/issues/9068): The `noVueDuplicateKeys` rule now correctly handles `toRefs(props)` patterns and no longer produces false positives when destructuring props, particularly in ` + + diff --git a/crates/biome_js_analyze/tests/specs/correctness/noVueDuplicateKeys/invalid-script-setup-to-refs-no-assign.vue.snap b/crates/biome_js_analyze/tests/specs/correctness/noVueDuplicateKeys/invalid-script-setup-to-refs-no-assign.vue.snap new file mode 100644 index 000000000000..9f23f6adfee8 --- /dev/null +++ b/crates/biome_js_analyze/tests/specs/correctness/noVueDuplicateKeys/invalid-script-setup-to-refs-no-assign.vue.snap @@ -0,0 +1,37 @@ +--- +source: crates/biome_js_analyze/tests/spec_tests.rs +expression: invalid-script-setup-to-refs-no-assign.vue +--- +# Input +```ts +import { toRefs, reactive } from 'vue'; +defineProps<{ toast: string; number?: number }>(); +const obj = reactive({ toast: 'toast' }); +const { toast } = toRefs(obj) + +``` + +# Diagnostics +``` +invalid-script-setup-to-refs-no-assign.vue:2:15 lint/correctness/noVueDuplicateKeys ━━━━━━━━━━━━━━━━ + + × Duplicate key toast found in Vue component. + + 1 │ import { toRefs, reactive } from 'vue'; + > 2 │ defineProps<{ toast: string; number?: number }>(); + │ ^^^^^ + 3 │ const obj = reactive({ toast: 'toast' }); + 4 │ const { toast } = toRefs(obj) + + i Key toast is also defined here. + + 2 │ defineProps<{ toast: string; number?: number }>(); + 3 │ const obj = reactive({ toast: 'toast' }); + > 4 │ const { toast } = toRefs(obj) + │ ^^^^^ + 5 │ + + i Keys defined in different Vue component options (props, data, methods, computed) can conflict when accessed in the template. Rename the key to avoid conflicts. + + +``` diff --git a/crates/biome_js_analyze/tests/specs/correctness/noVueDuplicateKeys/valid-script-setup-to-refs-interface.vue b/crates/biome_js_analyze/tests/specs/correctness/noVueDuplicateKeys/valid-script-setup-to-refs-interface.vue new file mode 100644 index 000000000000..16c166776db7 --- /dev/null +++ b/crates/biome_js_analyze/tests/specs/correctness/noVueDuplicateKeys/valid-script-setup-to-refs-interface.vue @@ -0,0 +1,11 @@ + + + diff --git a/crates/biome_js_analyze/tests/specs/correctness/noVueDuplicateKeys/valid-script-setup-to-refs-interface.vue.snap b/crates/biome_js_analyze/tests/specs/correctness/noVueDuplicateKeys/valid-script-setup-to-refs-interface.vue.snap new file mode 100644 index 000000000000..3ad3fdf743fd --- /dev/null +++ b/crates/biome_js_analyze/tests/specs/correctness/noVueDuplicateKeys/valid-script-setup-to-refs-interface.vue.snap @@ -0,0 +1,15 @@ +--- +source: crates/biome_js_analyze/tests/spec_tests.rs +expression: valid-script-setup-to-refs-interface.vue +--- +# Input +```ts +import { toRefs } from 'vue'; +interface Props { + videoUrl: string; + thumbnail?: string; +} +const props = defineProps() +const { videoUrl, thumbnail } = toRefs(props) + +``` diff --git a/crates/biome_js_analyze/tests/specs/correctness/noVueDuplicateKeys/valid-script-setup-to-refs.vue b/crates/biome_js_analyze/tests/specs/correctness/noVueDuplicateKeys/valid-script-setup-to-refs.vue new file mode 100644 index 000000000000..f9d4c0280b0a --- /dev/null +++ b/crates/biome_js_analyze/tests/specs/correctness/noVueDuplicateKeys/valid-script-setup-to-refs.vue @@ -0,0 +1,7 @@ + + + diff --git a/crates/biome_js_analyze/tests/specs/correctness/noVueDuplicateKeys/valid-script-setup-to-refs.vue.snap b/crates/biome_js_analyze/tests/specs/correctness/noVueDuplicateKeys/valid-script-setup-to-refs.vue.snap new file mode 100644 index 000000000000..896233c691bd --- /dev/null +++ b/crates/biome_js_analyze/tests/specs/correctness/noVueDuplicateKeys/valid-script-setup-to-refs.vue.snap @@ -0,0 +1,11 @@ +--- +source: crates/biome_js_analyze/tests/spec_tests.rs +expression: valid-script-setup-to-refs.vue +--- +# Input +```ts +import { toRefs } from 'vue'; +const props = defineProps<{ toast: string; number?: number }>() +const { toast } = toRefs(props) + +```