🐛 vue sfc lang="tsx" support

[xc2]

Environment information

CLI:
  Version:                      1.7.3
  Color support:                true

Platform:
  CPU Architecture:             aarch64
  OS:                           macos

Environment:
  BIOME_LOG_DIR:                unset
  NO_COLOR:                     unset
  TERM:                         "xterm-256color"
  JS_RUNTIME_VERSION:           "v20.12.2"
  JS_RUNTIME_NAME:              "node"
  NODE_PACKAGE_MANAGER:         unset

Biome Configuration:
  Status:                       Loaded successfully
  Formatter disabled:           false
  Linter disabled:              false
  Organize imports disabled:    true
  VCS disabled:                 false

Workspace:
  Open Documents:               0

What happened?

Reproducing

https://codesandbox.io/p/devbox/silent-framework-dxvf7x

Code

<script setup lang="tsx">
function Button() {
  return <div>Vue Button</div>;
}
</script>

Got

> @ check /workspace
> biome check ./src

./src/index.vue:2:10 parse ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ✖ type assertion are a TypeScript only feature. Convert your file to a TypeScript file or remove the syntax.
  
    1 │ function Button() {
  > 2 │   return <div>Vue Button</div>;
      │          ^^^^^^^^
    3 │ }
    4 │ 
  
  ℹ TypeScript only syntax
  

./src/index.vue:2:19 parse ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ✖ Expected a semicolon or an implicit semicolon after a statement, but found none
  
    1 │ function Button() {
  > 2 │   return <div>Vue Button</div>;
      │                   ^^^^^^
    3 │ }
    4 │ 
  
  ℹ An explicit or implicit semicolon is expected here...
  
    1 │ function Button() {
  > 2 │   return <div>Vue Button</div>;
      │                   ^^^^^^
    3 │ }
    4 │ 
  
  ℹ ...Which is required to end this statement
  
    1 │ function Button() {
  > 2 │   return <div>Vue Button</div>;
      │   ^^^^^^^^^^^^^^^^^^^^^^
    3 │ }
    4 │ 
  

./src/index.vue:2:32 parse ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ✖ unterminated regex literal
  
    1 │ function Button() {
  > 2 │   return <div>Vue Button</div>;
      │                                
    3 │ }
    4 │ 
  
  ℹ ...but the line ends here
  
    1 │ function Button() {
  > 2 │   return <div>Vue Button</div>;
      │                                
    3 │ }
    4 │ 
  
  ℹ a regex literal starts there...
  
    1 │ function Button() {
  > 2 │   return <div>Vue Button</div>;
      │                          ^
    3 │ }
    4 │ 
  

./src/index.vue:2:19 lint/correctness/noUnreachable ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ✖ This code will never be reached ...
  
    1 │ function Button() {
  > 2 │   return <div>Vue Button</div>;
      │                   ^^^^^^^^^^^^^
    3 │ }
    4 │ 
  
  ℹ ... because this statement will return from the function beforehand
  
    1 │ function Button() {
  > 2 │   return <div>Vue Button</div>;
      │   ^^^^^^^^^^^^^^^
    3 │ }
    4 │ 
  

./src/index.vue:2:4 parse ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ✖ type assertion are a TypeScript only feature. Convert your file to a TypeScript file or remove the syntax.
  
    1 │ <script setup lang="tsx">
  > 2 │ function Button() {
      │    ^^^^^^^^
    3 │   return <div>Vue Button</div>;
    4 │ }
  
  ℹ TypeScript only syntax
  

./src/index.vue:2:13 parse ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ✖ Expected a semicolon or an implicit semicolon after a statement, but found none
  
    1 │ <script setup lang="tsx">
  > 2 │ function Button() {
      │             ^^^^^^
    3 │   return <div>Vue Button</div>;
    4 │ }
  
  ℹ An explicit or implicit semicolon is expected here...
  
    1 │ <script setup lang="tsx">
  > 2 │ function Button() {
      │             ^^^^^^
    3 │   return <div>Vue Button</div>;
    4 │ }
  
  ℹ ...Which is required to end this statement
  
  > 1 │ <script setup lang="tsx">
      │                       ^^^
  > 2 │ function Button() {
      │ ^^^^^^^^^^^^^^^^^^
    3 │   return <div>Vue Button</div>;
    4 │ }
  

./src/index.vue:3:6 parse ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ✖ unterminated regex literal
  
    1 │ <script setup lang="tsx">
    2 │ function Button() {
  > 3 │   return <div>Vue Button</div>;
      │      
    4 │ }
    5 │ </script>
  
  ℹ ...but the line ends here
  
    1 │ <script setup lang="tsx">
    2 │ function Button() {
  > 3 │   return <div>Vue Button</div>;
      │      
    4 │ }
    5 │ </script>
  
  ℹ a regex literal starts there...
  
    1 │ <script setup lang="tsx">
  > 2 │ function Button() {
      │                    
  > 3 │   return <div>Vue Button</div>;
Biome encountered an unexpected error

This is a bug in Biome, not an error in your code, and we would appreciate it if you could report it to https://github.com/biomejs/biome/issues/ along with the following information to help us fixing the issue:

Source Location: /home/runner/work/biome/biome/crates/biome_text_size/src/range.rs:50:9
Thread Name: main
Message: assertion failed: start <= end

 ELIFECYCLE  Command failed with exit code 101.

Expected result

Parsing should succeed.

Code of Conduct

• I agree to follow Biome's Code of Conduct

[ematipico]

I didn't know JSX was supported inside templating. Does anyone want to add support for that?

biome/crates/biome_service/src/file_handlers/mod.rs

Lines 547 to 553 in 67888a8

	if attribute_inner_string.text() == "ts" {
	Some(Language::TypeScript {
	definition_file: false,
	})
	} else {
	None
	}

[dyc3]

I had no idea this was a thing either, but apparently it is. I can pick this up.