minor #1848 Drop ESLint and Prettier for Biome (Kocal)

This PR was squashed before being merged into the 2.x branch.

Discussion
----------

Drop ESLint and Prettier for Biome

| Q             | A
| ------------- | ---
| Bug fix?      | no
| New feature?  | no <!-- please update src/**/CHANGELOG.md files -->
| Issues        | Fix #... <!-- prefix each issue number with "Fix #", no need to create an issue if none exist, explain below instead -->
| License       | MIT

<!--
Replace this notice by a description of your feature/bugfix.
This will help reviewers and should be a good start for the documentation.

Additionally (see https://symfony.com/releases):
 - Always add tests and ensure they pass.
 - For new features, provide some code snippets to help understand usage.
 - Features and deprecations must be submitted against branch main.
 - Changelog entry should follow https://symfony.com/doc/current/contributing/code/conventions.html#writing-a-changelog-entry
 - Never break backward compatibility (see https://symfony.com/bc).
-->

Hi everyone,

[Biome](https://biomejs.dev/) is a _new_ modern tool for code linting and formatting.
It supports TypeScript out-of-the-box, lint and format does not conflict each-other (like ESLint and Prettier can do), and it's **super** fast!
With Biome, we can easily replace:
- ESLint
- ESLint's TypeScript plugin
- Prettier
- ESLint's Prettier plugin

There is a lot of modifications, but 99% of them are:
- use `import type ...` / `import { type ... }` when necessary
- removing `'use strict'`, since we have `type: 'module'` in `package.json` files, but I'm not 100% confidente here and I may add them back
- using template string interpolation instead of `+` operator

I've disabled the following linting rules in order to reduce the number of modifications, but later we can start to enable them:
- `complexity/noStaticOnlyClass`
- `complexity/noForEach`
- `style/noParameterAssign`
- `performance/noDelete`

The yarn scripts `lint`, `format`, `check-lint` and `check-format` have been modified in consequences.

For performance comparisons, you can check those two CI jobs:
- https://github.com/symfony/ux/actions/runs/9063481176/job/24899508211, ESLint took ~19s and Prettier took ~2s
- https://github.com/symfony/ux/actions/runs/9091422430/job/24985996787, Biome took ~5s for linting and ~0s for formatting

For the number of commits, I wanted to ease the review by doing many atomic commits, but feel free to squash if necessary.

WDYT?

Commits
-------

b406997 Drop ESLint and Prettier for Biome

Author: javiereguiluz

biome.json

@@ -0,0 +1,47 @@
+{
+    "files": {
+        "ignore": ["**/composer.json"]
+    },
+    "linter": {
+        "rules": {
+            "suspicious": {
+                "noExplicitAny": "off",
+                "noEmptyBlockStatements": "off"
+            },
+            "complexity": {
+                "noStaticOnlyClass": "off",
+                "noForEach": "off"
+            },
+            "style": {
+                "noParameterAssign": "off"
+            },
+            "performance": {
+                "noDelete": "off"
+            }
+        }
+    },
+    "formatter": {
+        "lineWidth": 120,
+        "indentStyle": "space",
+        "indentWidth": 4
+    },
+    "javascript": {
+        "formatter": {
+            "trailingComma": "es5",
+            "bracketSameLine": true,
+            "quoteStyle": "single"
+        }
+    },
+    "overrides": [
+        {
+            "include": ["*.svelte"],
+            "linter": {
+                "rules": {
+                    "style": {
+                        "useConst": "off"
+                    }
+                }
+            }
+        }
+    ]
+}

package.json

@@ -1,73 +1,28 @@
 {
     "private": true,
-    "workspaces": [
-        "src/*/assets"
-    ],
+    "workspaces": ["src/*/assets"],
     "scripts": {
         "build": "node bin/build_javascript.js && node bin/build_styles.js",
         "test": "bin/run-vitest-all.sh",
-        "lint": "yarn workspaces run eslint src test",
-        "format": "prettier src/*/assets/src/*.ts src/*/assets/test/*.js {,src/*/}*.{json,md} --write",
-        "check-lint": "yarn lint --no-fix",
-        "check-format": "yarn format --no-write --check"
+        "lint": "yarn workspaces run biome lint src test --apply",
+        "format": "biome format src/*/assets/src/*.ts src/*/assets/test/*.js {,src/*/}*.{json,md} --write",
+        "check-lint": "yarn workspaces run biome lint src test",
+        "check-format": "biome format src/*/assets/src/*.ts src/*/assets/test/*.js {,src/*/}*.{json,md}"
     },
     "devDependencies": {
         "@babel/core": "^7.15.8",
         "@babel/preset-env": "^7.15.8",
         "@babel/preset-react": "^7.15.8",
         "@babel/preset-typescript": "^7.15.8",
+        "@biomejs/biome": "^1.7.3",
         "@rollup/plugin-commonjs": "^23.0.0",
         "@rollup/plugin-node-resolve": "^15.0.0",
         "@rollup/plugin-typescript": "^10.0.0",
         "@symfony/stimulus-testing": "^2.0.1",
-        "@typescript-eslint/eslint-plugin": "^5.2.0",
-        "@typescript-eslint/parser": "^5.2.0",
         "clean-css-cli": "^5.6.2",
-        "eslint": "^8.1.0",
-        "eslint-config-prettier": "^8.0.0",
-        "prettier": "^2.2.1",
         "rollup": "^3.7.0",
         "tslib": "^2.3.1",
         "typescript": "^4.4.4",
         "vitest": "^0.34.6"
-    },
-    "eslintConfig": {
-        "root": true,
-        "parser": "@typescript-eslint/parser",
-        "plugins": [
-            "@typescript-eslint"
-        ],
-        "extends": [
-            "eslint:recommended",
-            "prettier",
-            "plugin:@typescript-eslint/eslint-recommended",
-            "plugin:@typescript-eslint/recommended"
-        ],
-        "rules": {
-            "@typescript-eslint/no-explicit-any": "off",
-            "@typescript-eslint/no-empty-function": "off",
-            "@typescript-eslint/ban-ts-comment": "off",
-            "quotes": [
-                "error",
-                "single"
-            ]
-        },
-        "env": {
-            "browser": true
-        },
-        "overrides": [
-            {
-                "files": [
-                    "src/*/assets/test/**/*.ts"
-                ]
-            }
-        ]
-    },
-    "prettier": {
-        "printWidth": 120,
-        "trailingComma": "es5",
-        "tabWidth": 4,
-        "bracketSameLine": true,
-        "singleQuote": true
     }
 }

src/Autocomplete/assets/dist/controller.js

@@ -106,10 +106,10 @@ class default_1 extends Controller {
         if (!this.hasPreloadValue) {
             return 'focus';
         }
-        if (this.preloadValue == 'false') {
+        if (this.preloadValue === 'false') {
             return false;
         }
-        if (this.preloadValue == 'true') {
+        if (this.preloadValue === 'true') {
             return true;
         }
         return this.preloadValue;
@@ -260,12 +260,8 @@ _default_1_instances = new WeakSet(), _default_1_getCommonConfig = function _def
             };
         },
         render: {
-            item: function (item) {
-                return `<div>${item.text}</div>`;
-            },
-            option: function (item) {
-                return `<div>${item.text}</div>`;
-            },
+            item: (item) => `<div>${item.text}</div>`,
+            option: (item) => `<div>${item.text}</div>`,
         },
     });
     return __classPrivateFieldGet(this, _default_1_instances, "m", _default_1_createTomSelect).call(this, config);
@@ -298,18 +294,10 @@ _default_1_instances = new WeakSet(), _default_1_getCommonConfig = function _def
             return query.length >= 3;
         },
         optgroupField: 'group_by',
-        score: function (search) {
-            return function (item) {
-                return 1;
-            };
-        },
+        score: (search) => (item) => 1,
         render: {
-            option: function (item) {
-                return `<div>${item.text}</div>`;
-            },
-            item: function (item) {
-                return `<div>${item.text}</div>`;
-            },
+            option: (item) => `<div>${item.text}</div>`,
+            item: (item) => `<div>${item.text}</div>`,
             loading_more: () => {
                 return `<div class="loading-more-results">${this.loadingMoreTextValue}</div>`;
             },

src/Autocomplete/assets/src/controller.ts

@@ -1,7 +1,7 @@
 import { Controller } from '@hotwired/stimulus';
 import TomSelect from 'tom-select';
-import { TPluginHash } from 'tom-select/dist/types/contrib/microplugin';
-import { RecursivePartial, TomSettings, TomTemplates, TomLoadCallback } from 'tom-select/dist/types/types';
+import type { TPluginHash } from 'tom-select/dist/types/contrib/microplugin';
+import type { RecursivePartial, TomSettings, TomTemplates, TomLoadCallback } from 'tom-select/dist/types/types';
 
 export interface AutocompletePreConnectOptions {
     options: any;
@@ -175,12 +175,8 @@ export default class extends Controller {
                 };
             },
             render: {
-                item: function (item: any) {
-                    return `<div>${item.text}</div>`;
-                },
-                option: function (item: any) {
-                    return `<div>${item.text}</div>`;
-                },
+                item: (item: any) => `<div>${item.text}</div>`,
+                option: (item: any) => `<div>${item.text}</div>`,
             },
         });
 
@@ -231,18 +227,10 @@ export default class extends Controller {
             },
             optgroupField: 'group_by',
             // avoid extra filtering after results are returned
-            score: function (search: string) {
-                return function (item: any) {
-                    return 1;
-                };
-            },
+            score: (search: string) => (item: any) => 1,
             render: {
-                option: function (item: any) {
-                    return `<div>${item.text}</div>`;
-                },
-                item: function (item: any) {
-                    return `<div>${item.text}</div>`;
-                },
+                option: (item: any) => `<div>${item.text}</div>`,
+                item: (item: any) => `<div>${item.text}</div>`,
                 loading_more: (): string => {
                     return `<div class="loading-more-results">${this.loadingMoreTextValue}</div>`;
                 },
@@ -312,11 +300,11 @@ export default class extends Controller {
             return 'focus';
         }
 
-        if (this.preloadValue == 'false') {
+        if (this.preloadValue === 'false') {
             return false;
         }
 
-        if (this.preloadValue == 'true') {
+        if (this.preloadValue === 'true') {
             return true;
         }
 

src/Autocomplete/assets/test/controller.test.ts

@@ -7,16 +7,15 @@
  * file that was distributed with this source code.
  */
 
-'use strict';
 
 import { Application } from '@hotwired/stimulus';
 import { getByTestId, waitFor } from '@testing-library/dom';
 import AutocompleteController, {
-    AutocompleteConnectOptions,
-    AutocompletePreConnectOptions,
+    type AutocompleteConnectOptions,
+    type AutocompletePreConnectOptions,
 } from '../src/controller';
 import userEvent from '@testing-library/user-event';
-import TomSelect from 'tom-select';
+import type TomSelect from 'tom-select';
 import createFetchMock from 'vitest-fetch-mock';
 import { vi } from 'vitest';
 

src/Chartjs/assets/dist/controller.js

@@ -1,7 +1,7 @@
 import { Controller } from '@hotwired/stimulus';
 import { registerables, Chart } from 'chart.js';
 
-if (registerables != undefined) {
+if (registerables) {
     Chart.register(...registerables);
 }
 let isChartInitialized = false;
@@ -48,7 +48,7 @@ class default_1 extends Controller {
             const parentElement = this.element.parentElement;
             if (parentElement && this.chart.options.responsive) {
                 const originalWidth = parentElement.style.width;
-                parentElement.style.width = parentElement.offsetWidth + 1 + 'px';
+                parentElement.style.width = `${parentElement.offsetWidth + 1}px`;
                 setTimeout(() => {
                     parentElement.style.width = originalWidth;
                 }, 0);

src/Chartjs/assets/src/controller.ts

@@ -7,13 +7,11 @@
  * file that was distributed with this source code.
  */
 
-'use strict';
-
 import { Controller } from '@hotwired/stimulus';
 import { Chart, registerables } from 'chart.js';
 
 // ChartJs 3.x
-if (registerables != undefined) {
+if (registerables) {
     Chart.register(...registerables);
 }
 
@@ -80,7 +78,7 @@ export default class extends Controller {
             const parentElement = this.element.parentElement;
             if (parentElement && this.chart.options.responsive) {
                 const originalWidth = parentElement.style.width;
-                parentElement.style.width = parentElement.offsetWidth + 1 + 'px';
+                parentElement.style.width = `${parentElement.offsetWidth + 1}px`;
                 setTimeout(() => {
                     parentElement.style.width = originalWidth;
                 }, 0);

src/Chartjs/assets/test/controller.test.ts

@@ -7,7 +7,6 @@
  * file that was distributed with this source code.
  */
 
-'use strict';
 
 import { Application } from '@hotwired/stimulus';
 import { waitFor } from '@testing-library/dom';

src/Chartjs/assets/test/setup.js

@@ -7,8 +7,6 @@
  * file that was distributed with this source code.
  */
 
-'use strict';
-
 import 'vitest-canvas-mock';
 // eslint-disable-next-line
 global.ResizeObserver = require('resize-observer-polyfill');

src/Cropperjs/assets/src/controller.ts

@@ -7,8 +7,6 @@
  * file that was distributed with this source code.
  */
 
-'use strict';
-
 import { Controller } from '@hotwired/stimulus';
 import Cropper from 'cropperjs';
 import CropEvent = Cropper.CropEvent;