fix(noUndeclaredVariables): track vue props as bindings

.changeset/blue-steaks-give.md

@@ -0,0 +1,5 @@
+---
+"@biomejs/biome": patch
+---
+
+Fixed [`noUndeclaredVariables`](https://biomejs.dev/linter/rules/no-undeclared-variables/) from erroneously flagging props only used in the template section in Vue SFCs

crates/biome_cli/tests/cases/vue_cross_language_rules.rs

@@ -81,3 +81,148 @@ const { copy: copyInviteLink, copySuccess } = useCopyFromTextbox(inviteLink, inv
         result,
     ));
 }
+
+#[test]
+fn no_undeclared_variables_not_triggered_for_define_props_type_arg() {
+    let fs = MemoryFileSystem::default();
+    let mut console = BufferConsole::default();
+    fs.insert(
+        "biome.json".into(),
+        BIOME_CONFIG_HTML_FULL_SUPPORT.as_bytes(),
+    );
+    let file = Utf8Path::new("file.vue");
+    fs.insert(
+        file.into(),
+        r#"
+<script setup lang="ts">
+defineProps<{ loading?: boolean; disabled?: boolean }>()
+</script>
+<template>
+  <div :class="{ active: loading }" v-if="disabled">test</div>
+</template>
+"#
+        .as_bytes(),
+    );
+    let (fs, result) = run_cli(
+        fs,
+        &mut console,
+        Args::from(["lint", "--only=noUndeclaredVariables", file.as_str()].as_slice()),
+    );
+    assert!(result.is_ok(), "run_cli returned {result:?}");
+
+    assert_cli_snapshot(SnapshotPayload::new(
+        module_path!(),
+        "no_undeclared_variables_not_triggered_for_define_props_type_arg",
+        fs,
+        console,
+        result,
+    ));
+}
+
+#[test]
+fn no_undeclared_variables_not_triggered_defined_props_options_api() {
+    let fs = MemoryFileSystem::default();
+    let mut console = BufferConsole::default();
+    fs.insert(
+        "biome.json".into(),
+        BIOME_CONFIG_HTML_FULL_SUPPORT.as_bytes(),
+    );
+    let file = Utf8Path::new("file.vue");
+    fs.insert(
+        file.into(),
+        r#"
+<script>
+export default {
+  props: {
+    loading: Boolean,
+    disabled: Boolean,
+  },
+}
+</script>
+<template>
+  <div :class="{ active: loading }" v-if="disabled">test</div>
+</template>
+"#
+        .as_bytes(),
+    );
+    let (fs, result) = run_cli(
+        fs,
+        &mut console,
+        Args::from(["lint", "--only=noUndeclaredVariables", file.as_str()].as_slice()),
+    );
+    assert!(result.is_ok(), "run_cli returned {result:?}");
+
+    assert_cli_snapshot(SnapshotPayload::new(
+        module_path!(),
+        "no_undeclared_variables_not_triggered_defined_props_options_api",
+        fs,
+        console,
+        result,
+    ));
+}
+
+#[test]
+fn no_undeclared_variables_not_triggered_for_define_props_type_arg_2() {
+    let fs = MemoryFileSystem::default();
+    let mut console = BufferConsole::default();
+    fs.insert(
+        "biome.json".into(),
+        BIOME_CONFIG_HTML_FULL_SUPPORT.as_bytes(),
+    );
+    let file = Utf8Path::new("file.vue");
+    fs.insert(
+        file.into(),
+        r#"
+<template>
+	<div
+		:class="{
+			'video-controls': true,
+			'in-video': mode === 'in-video',
+			'outside-video': mode === 'outside-video',
+			'hide': !controlsVisible,
+		}"
+	>
+		<VideoProgressSlider :current-position="sliderPosition" />
+		<div class="controls-row2">
+			<BasicControls :current-position="truePosition" />
+			<TimestampDisplay :current-position="truePosition" />
+		</div>
+	</div>
+</template>
+
+<script lang="ts" setup>
+import BasicControls from "./BasicControls.vue";
+import TimestampDisplay from "./TimestampDisplay.vue";
+import VideoProgressSlider from "./VideoProgressSlider.vue";
+
+withDefaults(
+	defineProps<{
+		sliderPosition: number;
+		truePosition: number;
+		controlsVisible: boolean;
+		mode: "in-video" | "outside-video";
+	}>(),
+	{
+		controlsVisible: false,
+		mode: "in-video",
+	}
+);
+</script>
+"#
+        .as_bytes(),
+    );
+    let (fs, result) = run_cli(
+        fs,
+        &mut console,
+        Args::from(["lint", "--only=noUndeclaredVariables", file.as_str()].as_slice()),
+    );
+    assert!(result.is_ok(), "run_cli returned {result:?}");
+
+    assert_cli_snapshot(SnapshotPayload::new(
+        module_path!(),
+        "no_undeclared_variables_not_triggered_for_define_props_type_arg_2",
+        fs,
+        console,
+        result,
+    ));
+}

crates/biome_cli/tests/snapshots/main_cases_vue_cross_language_rules/no_undeclared_variables_not_triggered_defined_props_options_api.snap

@@ -0,0 +1,38 @@
+---
+source: crates/biome_cli/tests/snap_test.rs
+expression: redactor(content)
+---
+## `biome.json`
+
+```json
+{
+  "html": {
+    "linter": { "enabled": true },
+    "experimentalFullSupportEnabled": true
+  }
+}
+```
+
+## `file.vue`
+
+```vue
+
+<script>
+export default {
+  props: {
+    loading: Boolean,
+    disabled: Boolean,
+  },
+}
+</script>
+<template>
+  <div :class="{ active: loading }" v-if="disabled">test</div>
+</template>
+
+```
+
+# Emitted Messages
+
+```block
+Checked 1 file in <TIME>. No fixes applied.
+```

crates/biome_cli/tests/snapshots/main_cases_vue_cross_language_rules/no_undeclared_variables_not_triggered_for_define_props_type_arg.snap

@@ -0,0 +1,33 @@
+---
+source: crates/biome_cli/tests/snap_test.rs
+expression: redactor(content)
+---
+## `biome.json`
+
+```json
+{
+  "html": {
+    "linter": { "enabled": true },
+    "experimentalFullSupportEnabled": true
+  }
+}
+```
+
+## `file.vue`
+
+```vue
+
+<script setup lang="ts">
+defineProps<{ loading?: boolean; disabled?: boolean }>()
+</script>
+<template>
+  <div :class="{ active: loading }" v-if="disabled">test</div>
+</template>
+
+```
+
+# Emitted Messages
+
+```block
+Checked 1 file in <TIME>. No fixes applied.
+```

crates/biome_cli/tests/snapshots/main_cases_vue_cross_language_rules/no_undeclared_variables_not_triggered_for_define_props_type_arg_2.snap

@@ -0,0 +1,62 @@
+---
+source: crates/biome_cli/tests/snap_test.rs
+expression: redactor(content)
+---
+## `biome.json`
+
+```json
+{
+  "html": {
+    "linter": { "enabled": true },
+    "experimentalFullSupportEnabled": true
+  }
+}
+```
+
+## `file.vue`
+
+```vue
+
+<template>
+	<div
+		:class="{
+			'video-controls': true,
+			'in-video': mode === 'in-video',
+			'outside-video': mode === 'outside-video',
+			'hide': !controlsVisible,
+		}"
+	>
+		<VideoProgressSlider :current-position="sliderPosition" />
+		<div class="controls-row2">
+			<BasicControls :current-position="truePosition" />
+			<TimestampDisplay :current-position="truePosition" />
+		</div>
+	</div>
+</template>
+
+<script lang="ts" setup>
+import BasicControls from "./BasicControls.vue";
+import TimestampDisplay from "./TimestampDisplay.vue";
+import VideoProgressSlider from "./VideoProgressSlider.vue";
+
+withDefaults(
+	defineProps<{
+		sliderPosition: number;
+		truePosition: number;
+		controlsVisible: boolean;
+		mode: "in-video" | "outside-video";
+	}>(),
+	{
+		controlsVisible: false,
+		mode: "in-video",
+	}
+);
+</script>
+
+```
+
+# Emitted Messages
+
+```block
+Checked 1 file in <TIME>. No fixes applied.
+```