build: update formatter

[jer3m01]

Part of #318.

Updates from Prettier v3 to v4(4.0.0-alpha.8) and uses Biome instead for js* files.

Reasoning

Mainly to obtain better performances and DX while working on Kobalte.

Code style has been changed from spaces to tabs: rome/tools#425.

Performance

These are for heuristic purposes and are not rigorous enough to stand as proper benchmarks.

Timings are from fish time, more info on how to read them here: https://fishshell.com/docs/current/cmds/time.html#how-to-interpret-the-output.

Taken on WSL2:

uname -a
Linux jer3m01-DESKTOP 5.15.133.1-microsoft-standard-WSL2 #1 SMP Thu Oct 5 21:02:42 UTC 2023 x86_64 x86_64 x86_64 GNU/Linux

Only ran on files supported both by Prettier and Biome.

Clean repo

Times posted below are running on a already formatted repo (i.e. everything is already formatted and no file writes are required).
Each were run multiple times to check for consistent values.

Initial setup using Prettier v3:

# Prettier v3
time pnpm prettier './**/*.{js,ts,jsx,tsx,cjs,json}' --write
________________________________________________________
Executed in    6.85 secs    fish           external
   usr time   11.68 secs    0.00 micros   11.68 secs
   sys time    5.26 secs  718.00 micros    5.26 secs

(Originally Prettier v3 also ran on dist files and took up to 70s, most time reduced was by ignoring them)

Updating to Prettier v4:

# Prettier v4
time pnpm prettier './**/*.{js,ts,jsx,tsx,cjs,json}' --write
________________________________________________________
Executed in    1.18 secs    fish           external
   usr time    2.22 secs  127.00 micros    2.22 secs
   sys time    1.96 secs  529.00 micros    1.96 secs

Prettier v4 no cache:

time pnpm prettier './**/*.{js,ts,jsx,tsx,cjs,json}' --write --no-cache
________________________________________________________
Executed in    6.58 secs    fish           external
   usr time   34.82 secs  180.00 micros   34.82 secs
   sys time   22.16 secs  463.00 micros   22.16 secs

Prettier v4 no parallel no cache:

time pnpm prettier './**/*.{js,ts,jsx,tsx,cjs,json}' --write --no-parallel --no-cache
________________________________________________________
Executed in    5.62 secs    fish           external
   usr time   10.26 secs    0.00 micros   10.26 secs
   sys time    0.85 secs  593.00 micros    0.85 secs

Using Biome:

# Biome
time pnpm biome format . --write
________________________________________________________
Executed in  594.61 millis    fish           external
   usr time    1.17 secs    864.00 micros    1.17 secs
   sys time    0.35 secs      0.00 micros    0.35 secs

These numbers a much better than original but most of the performance vs Prettier v3 is both gained using Prettier v4 and Biome. Great work Prettier!

Dirty repo

Times posted below are running on a unformatted repo and needs file writes. Both tools have the same starting files to reformat.
Each were run multiple times to check for consistent values.

Prettier v4:

# Prettier v4 - Reformat
time pnpm prettier './**/*.{js,ts,jsx,tsx,cjs,json}' --write
________________________________________________________
Executed in   12.04 secs    fish           external
   usr time   59.76 secs  616.00 micros   59.76 secs
   sys time   18.60 secs    0.00 micros   18.60 secs

Prettier v4 no parallel no cache:

time pnpm prettier './**/*.{js,ts,jsx,tsx,cjs,json}' --write --no-parallel --no-cache
________________________________________________________
Executed in    5.63 secs    fish           external
   usr time   10.04 secs  168.00 micros   10.04 secs
   sys time    4.01 secs  431.00 micros    4.01 secs

Biome:

# Biome - Reformat
time pnpm biome format . --write
________________________________________________________
Executed in  714.25 millis    fish           external
   usr time    1.39 secs    217.00 micros    1.39 secs
   sys time    0.32 secs    695.00 micros    0.32 secs

This time the difference is very noticeable and Biome provides an amazing performance increase.

[netlify]

✅ Deploy Preview for kobalte ready!

Name	Link
🔨 Latest commit	3428281
🔍 Latest deploy log	https://app.netlify.com/sites/kobalte/deploys/65ac849f14ae8800088b666b
😎 Deploy Preview	https://deploy-preview-323--kobalte.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site configuration.