📝 Formatter breaks TSX syntax with comment on first line of generic

[macarie]

Environment information

CLI:
  Version:                      1.9.4
  Color support:                true

Platform:
  CPU Architecture:             aarch64
  OS:                           macos

Environment:
  BIOME_LOG_PATH:               unset
  BIOME_LOG_PREFIX_NAME:        unset
  BIOME_CONFIG_PATH:            unset
  NO_COLOR:                     unset
  TERM:                         "xterm-256color"
  JS_RUNTIME_VERSION:           "v22.12.0"
  JS_RUNTIME_NAME:              "node"
  NODE_PACKAGE_MANAGER:         "pnpm/9.15.5"

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

Formatter:
  Format with errors:           false
  Indent style:                 Tab
  Indent width:                 2
  Line ending:                  Lf
  Line width:                   80
  Attribute position:           Auto
  Bracket spacing:              BracketSpacing(true)
  Ignore:                       []
  Include:                      []

JavaScript Formatter:
  Enabled:                      true
  JSX quote style:              Double
  Quote properties:             AsNeeded
  Trailing commas:              All
  Semicolons:                   Always
  Arrow parentheses:            Always
  Bracket spacing:              unset
  Bracket same line:            false
  Quote style:                  Double
  Indent style:                 unset
  Indent width:                 unset
  Line ending:                  unset
  Line width:                   unset
  Attribute position:           unset

JSON Formatter:
  Enabled:                      false
  Indent style:                 unset
  Indent width:                 unset
  Line ending:                  unset
  Line width:                   unset
  Trailing Commas:              None

CSS Formatter:
  Enabled:                      true
  Indent style:                 unset
  Indent width:                 unset
  Line ending:                  unset
  Line width:                   unset
  Quote style:                  Double

GraphQL Formatter:
  Enabled:                      false
  Indent style:                 unset
  Indent width:                 unset
  Line ending:                  unset
  Line width:                   unset
  Bracket spacing:              unset
  Quote style:                  unset

Workspace:
  Open Documents:               0

Configuration

{
	"formatter": {
		"enabled": true
	},
}

Playground link

https://biomejs.dev/playground/?code=dAB5AHAAZQAgAEcAZQBuAGUAcgBpAGMAPABUAD4AIAA9ACAAVAAKAAoAZABlAGMAbABhAHIAZQAgAGMAbwBuAHMAdAAgAE4AYQBtAGUAcwBwAGEAYwBlADoAIAB7AAoACQBDAG8AbQBwAG8AbgBlAG4AdAA6ACAARwBlAG4AZQByAGkAYwA8AAoACQAJAC8ALwAgAGEAIABjAG8AbQBtAGUAbgB0AAoACQAJAHsACgAJAAkACQBjAGgAaQBsAGQAcgBlAG4AOgAgAHUAbgBrAG4AbwB3AG4AOwAKAAkACQB9AAoACQA%2BADsACgB9AAoA

Code of Conduct

• I agree to follow Biome's Code of Conduct

[macarie]

It looks like this is a bug in Prettier as well.

The generated code is valid TypeScript when JSX is disabled, but becomes invalid when JSX is enabled:

• JSX disabled: https://www.typescriptlang.org/play/?jsx=0&ts=5.8.0-beta#code/C4TwDgpgBA4hB2EBOBLAxgHgCoD4oF4osBuAKFIBMI0AbAQyWjQHt4BnYKAOToFsI2YOmggAuKAG9SASADCzXmFYJg4uIlSYA9Fqh0oLXv3jAZU6dLQALFDQqN44gK7wA1vGYB3eGWkBfHDI-MiA
• JSX enabled: https://www.typescriptlang.org/play/?ts=5.8.0-beta#code/C4TwDgpgBA4hB2EBOBLAxgHgCoD4oF4osBuAKFIBMI0AbAQyWjQHt4BnYKAOToFsI2YOmggAuKAG9SASADCzXmFYJg4uIlSYA9Fqh0oLXv3jAZU6dLQALFDQqN44gK7wA1vGYB3eGWkBfHDI-MiA

I’m not sure what the best solution for this would be; maybe keeping the new line if JSX syntax is enabled?

[dyc3]

The code works if there is any whitespace between the < and the //. It's the <// part that is messing up the typescript parser. Are we sure that this isn't a typescript bug?

[macarie]

@dyc3 it's been an error in TS since "forever" (at least since 3.3) as far as I can tell. The code also works if the comment uses /* ... */, without requiring the extra whitespace.

Maybe this is a limitation of their grammar, similar to how const fn = <T>(x: T) => x is an error with JSX enabled.

On a somehow related note, it looks like Prettier handles that case by adding a comma before > while Biome throws a parsing error when JSX is enabled (playground link). Otherwise, it's a perfect match.

Should I open a bug for this or is it a known/won't fix issue?

[dyc3]

Hmm, yeah that case is quite ambiguous.

I'm open to diverging from prettier here to add/keep whitespace between the < and // but I'm not entirely sure if I have the full context. I would double check with typescript first, because maybe it is a bug on their side, and if it gets fixed, we wouldn't necessarily need to do anything on our side.