📝 arrowParentheses asNeeds breaks the code

[anonrig]

Environment information

❯ biome rage
CLI:
  Version:                      1.4.1
  Color support:                true

Platform:
  CPU Architecture:             aarch64
  OS:                           macos

Environment:
  BIOME_LOG_DIR:                unset
  NO_COLOR:                     unset
  TERM:                         "alacritty"
  JS_RUNTIME_VERSION:           "v20.10.0"
  JS_RUNTIME_NAME:              "node"
  NODE_PACKAGE_MANAGER:         unset

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

Workspace:
  Open Documents:               0

What happened?

1. Go to https://github.com/getsentry/sentry
2. Clone it
3. Copy the following biome.json

{
  "$schema": "./node_modules/@biomejs/biome/configuration_schema.json",
  "vcs": {
    "enabled": true,
    "clientKind": "git",
    "useIgnoreFile": true
  },
  "organizeImports": {
    "enabled": false
  },
  "linter": {
    "enabled": false
  },
  "files": {
    "ignoreUnknown": true
  },
  "formatter": {
    "enabled": true,
    "formatWithErrors": true,
    "ignore": [
      "api-docs",
      ".github",
      "tests",
      "fixtures",
      "scripts",
      "src",
      "static/app/data/world.json",
      "static/app/**/*trace.json",
      "package.json"
    ]
  },
  "javascript": {
    "formatter": {
      "enabled": true,
      "bracketSpacing": false,
      "bracketSameLine": false,
      "lineWidth": 90,
      "semicolons": "always",
      "quoteStyle": "single",
      "indentWidth": 2,
      "trailingComma": "es5",
      "arrowParentheses": "asNeeded",
      "indentStyle": "space",
      "jsxQuoteStyle": "double",
      "quoteProperties": "asNeeded"
    }
  },
  "json": {
    "formatter": {
      "enabled": true,
      "indentStyle": "space"
    }
  }
}

4. Run the following:

npx @biomejs/biome check ./static/app/components/charts/eventsRequest.tsx

Expected result

The produced code is wrong:

❯ npx @biomejs/biome check ./static/app/components/charts/eventsRequest.tsx
./static/app/components/charts/eventsRequest.tsx format ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ℹ Formatter would have printed the following content:

    394 394 │     calculateTotalsPerTimestamp(
    395 395 │       data: EventsStatsData,
    396     │ - ····getName:·(
    397     │ - ······timestamp:·number,
    398     │ - ······countArray:·{count:·number}[],
    399     │ - ······i:·number
    400     │ - ····)·=>·number·=·timestamp·=>·timestamp·*·1000
        396 │ + ····getName:·(timestamp:·number,·countArray:·{count:·number}[],·i:·number)·=>·number·=
        397 │ + ······timestamp
        398 │ + ····=>·timestamp·*·1000
    401 399 │     ): SeriesDataUnit[] {
    402 400 │       return data.map(([timestamp, countArray], i) => ({

Code of Conduct

• I agree to follow Biome's Code of Conduct

[faultyserver]

I reduced this down to a minimal repro here: Playground Link

There are two issues that combine here:

• First is the formatting itself. Prettier uses a shortcut when the parentheses for an arrow function get omitted that avoids adding a group around the parameter, but Biome doesn't have this logic. I believe that is the reason for the initial formatting difference.
• The second issue is that when re-formatting, Biome is unable to parse the result, I believe because of the ambiguity about a default parameter value and an arrow function. This is a separate manifestation of 🐛 Ternaries with parenthesized identifiers as consequents parse as Arrow Function Expressions #1077, which was fixed in fix(js_parser): handle edge cases for arrow expression in tenary #1113, but will need to be resolved for Biome to be able to format and parse this consistently.