feat: support html.experimentalFullSupportEnabled for vue with jsx/tsx script (#7986)

Co-authored-by: Emanuele Stoppa <[email protected]>

Author: lisiur

.changeset/public-spiders-glow.md

@@ -0,0 +1,5 @@
+---
+"@biomejs/biome": patch
+---
+
+Fixed [#7981](https://github.com/biomejs/biome/issues/7981). Now Biome correctly detects and parses `lang='tsx'` and `lang='jsx'` languages when used inside in `.vue` files, when  `.experimentalFullSupportEnabled` is enabled.

crates/biome_cli/tests/cases/handle_vue_files.rs

@@ -568,6 +568,121 @@ const props: Props = { title: "Hello" };
     ));
 }
 
+#[test]
+fn full_support_tsx() {
+    let fs = MemoryFileSystem::default();
+    let mut console = BufferConsole::default();
+
+    fs.insert(
+        "biome.json".into(),
+        r#"{ "html": { "formatter": {"enabled": true}, "linter": {"enabled": true}, "experimentalFullSupportEnabled": true } }"#.as_bytes(),
+    );
+
+    let vue_file_path = Utf8Path::new("file.vue");
+    fs.insert(
+        vue_file_path.into(),
+        r#"<script lang="tsx">
+import z from "zod";
+import { sure } from "sure.js";
+import s from "src/utils";
+
+interface Props {
+    title: string;
+}
+
+let schema = z.object().optional();
+schema + sure();
+const props: Props = { title: "Hello" };
+
+function FunctionalComponent() {
+    return <div></div>;
+}
+
+</script>
+
+<template>
+    <div></div>
+</template>
+
+<style>
+.class { background: red}
+</style>
+"#
+        .as_bytes(),
+    );
+
+    let (fs, result) = run_cli(
+        fs,
+        &mut console,
+        Args::from(["check", "--write", "--unsafe", vue_file_path.as_str()].as_slice()),
+    );
+
+    assert!(result.is_ok(), "run_cli returned {result:?}");
+
+    assert_cli_snapshot(SnapshotPayload::new(
+        module_path!(),
+        "full_support_tsx",
+        fs,
+        console,
+        result,
+    ));
+}
+
+#[test]
+fn full_support_jsx() {
+    let fs = MemoryFileSystem::default();
+    let mut console = BufferConsole::default();
+
+    fs.insert(
+        "biome.json".into(),
+        r#"{ "html": { "formatter": {"enabled": true}, "linter": {"enabled": true}, "experimentalFullSupportEnabled": true } }"#.as_bytes(),
+    );
+
+    let vue_file_path = Utf8Path::new("file.vue");
+    fs.insert(
+        vue_file_path.into(),
+        r#"<script lang="jsx">
+import z from "zod";
+import { sure } from "sure.js";
+import s from "src/utils";
+
+let schema = z.object().optional();
+schema + sure();
+
+function FunctionalComponent() {
+    return <div></div>;
+}
+
+</script>
+
+<template>
+    <div></div>
+</template>
+
+<style>
+.class { background: red}
+</style>
+"#
+        .as_bytes(),
+    );
+
+    let (fs, result) = run_cli(
+        fs,
+        &mut console,
+        Args::from(["check", "--write", "--unsafe", vue_file_path.as_str()].as_slice()),
+    );
+
+    assert!(result.is_ok(), "run_cli returned {result:?}");
+
+    assert_cli_snapshot(SnapshotPayload::new(
+        module_path!(),
+        "full_support_jsx",
+        fs,
+        console,
+        result,
+    ));
+}
+
 #[test]
 fn format_stdin_successfully() {
     let fs = MemoryFileSystem::default();

crates/biome_cli/tests/snapshots/main_cases_handle_vue_files/full_support_jsx.snap

@@ -0,0 +1,48 @@
+---
+source: crates/biome_cli/tests/snap_test.rs
+expression: redactor(content)
+---
+## `biome.json`
+
+```json
+{
+  "html": {
+    "formatter": { "enabled": true },
+    "linter": { "enabled": true },
+    "experimentalFullSupportEnabled": true
+  }
+}
+```
+
+## `file.vue`
+
+```vue
+<script lang="jsx">
+import { sure } from "sure.js";
+import z from "zod";
+
+const schema = z.object().optional();
+schema + sure();
+
+function _FunctionalComponent() {
+	return <div></div>;
+}
+</script>
+
+<template>
+	<div></div>
+</template>
+
+<style>
+.class {
+	background: red;
+}
+</style>
+
+```
+
+# Emitted Messages
+
+```block
+Checked 1 file in <TIME>. Fixed 1 file.
+```

crates/biome_cli/tests/snapshots/main_cases_handle_vue_files/full_support_tsx.snap

@@ -0,0 +1,53 @@
+---
+source: crates/biome_cli/tests/snap_test.rs
+expression: redactor(content)
+---
+## `biome.json`
+
+```json
+{
+  "html": {
+    "formatter": { "enabled": true },
+    "linter": { "enabled": true },
+    "experimentalFullSupportEnabled": true
+  }
+}
+```
+
+## `file.vue`
+
+```vue
+<script lang="tsx">
+import { sure } from "sure.js";
+import z from "zod";
+
+interface Props {
+	title: string;
+}
+
+const schema = z.object().optional();
+schema + sure();
+const _props: Props = { title: "Hello" };
+
+function _FunctionalComponent() {
+	return <div></div>;
+}
+</script>
+
+<template>
+	<div></div>
+</template>
+
+<style>
+.class {
+	background: red;
+}
+</style>
+
+```
+
+# Emitted Messages
+
+```block
+Checked 1 file in <TIME>. Fixed 1 file.
+```

crates/biome_html_syntax/src/element_ext.rs

@@ -165,59 +165,44 @@ impl HtmlElement {
         name_token.text_trimmed().eq_ignore_ascii_case("script")
     }
 
-    /// Returns `true` if the element is a `<script type="module">`
-    pub fn is_javascript_module(&self) -> SyntaxResult<bool> {
-        let is_script = self.is_script_tag();
-        let type_attribute = self.find_attribute_by_name("type");
-        let is_type_module = type_attribute.is_some_and(|attribute| {
+    fn has_attribute(&self, name: &str, value: &str) -> bool {
+        let attribute = self.find_attribute_by_name(name);
+        attribute.is_some_and(|attribute| {
             attribute
                 .initializer()
                 .and_then(|initializer| initializer.value().ok())
                 .and_then(|value| value.as_html_string().cloned())
                 .and_then(|value| value.value_token().ok())
                 .is_some_and(|token| {
                     let text = inner_string_text(&token);
-                    text.eq_ignore_ascii_case("module")
+                    text.eq_ignore_ascii_case(value)
                 })
-        });
+        })
+    }
 
-        Ok(is_script && is_type_module)
+    /// Returns `true` if the element is a `<script type="module">`
+    pub fn is_javascript_module(&self) -> SyntaxResult<bool> {
+        Ok(self.is_script_tag() && self.has_attribute("type", "module"))
     }
 
     /// Returns `true` if the element is a `<script lang="ts">`
     pub fn is_typescript_lang(&self) -> bool {
-        let is_script = self.is_script_tag();
-        let lang_attribute = self.find_attribute_by_name("lang");
-        let is_lang_typescript = lang_attribute.is_some_and(|attribute| {
-            attribute
-                .initializer()
-                .and_then(|initializer| initializer.value().ok())
-                .and_then(|value| value.as_html_string().cloned())
-                .and_then(|value| value.value_token().ok())
-                .is_some_and(|token| {
-                    let text = inner_string_text(&token);
-                    text.eq_ignore_ascii_case("ts")
-                })
-        });
-        is_script && is_lang_typescript
+        self.is_script_tag() && self.has_attribute("lang", "ts")
+    }
+
+    /// Returns `true` if the element is a `<script lang="jsx">`
+    pub fn is_jsx_lang(&self) -> bool {
+        self.is_script_tag() && self.has_attribute("lang", "jsx")
+    }
+
+    /// Returns `true` if the element is a `<script lang="tsx">`
+    pub fn is_tsx_lang(&self) -> bool {
+        self.is_script_tag() && self.has_attribute("lang", "tsx")
     }
 
     /// Returns `true` if the element is a `<style lang="sass">` or `<style lang="scss">`
     pub fn is_sass_lang(&self) -> bool {
-        let is_style = self.is_style_tag();
-        let lang_attribute = self.find_attribute_by_name("lang");
-        let is_lang_typescript = lang_attribute.is_some_and(|attribute| {
-            attribute
-                .initializer()
-                .and_then(|initializer| initializer.value().ok())
-                .and_then(|value| value.as_html_string().cloned())
-                .and_then(|value| value.value_token().ok())
-                .is_some_and(|token| {
-                    let text = inner_string_text(&token);
-                    text.eq_ignore_ascii_case("sass") || text.eq_ignore_ascii_case("scss")
-                })
-        });
-        is_style && is_lang_typescript
+        self.is_style_tag() && self.has_attribute("lang", "scss")
     }
 }
 

crates/biome_service/src/file_handlers/html.rs

@@ -479,6 +479,10 @@ pub(crate) fn parse_embedded_script(
         let file_source = if html_file_source.is_svelte() || html_file_source.is_vue() {
             let mut file_source = if element.is_typescript_lang() {
                 JsFileSource::ts()
+            } else if element.is_jsx_lang() {
+                JsFileSource::jsx()
+            } else if element.is_tsx_lang() {
+                JsFileSource::tsx()
             } else {
                 JsFileSource::js_module()
             };