refactor: use biome

biome.json

@@ -0,0 +1,44 @@
+{
+  "$schema": "./node_modules/@biomejs/biome/configuration_schema.json",
+  "vcs": { "enabled": true, "clientKind": "git", "useIgnoreFile": true },
+  "files": { "ignoreUnknown": false },
+  "formatter": {
+    "enabled": true,
+    "formatWithErrors": false,
+    "indentStyle": "space",
+    "indentWidth": 2,
+    "lineEnding": "lf",
+    "lineWidth": 100,
+    "attributePosition": "auto",
+    "bracketSameLine": false,
+    "bracketSpacing": true,
+    "expand": "auto",
+    "useEditorconfig": true,
+    "includes": ["**", "!**/node_modules/**/*", "!**/lib/**/*", "!**/docs/**/*"]
+  },
+  "linter": {
+    "enabled": true,
+    "rules": {
+      "recommended": true
+    },
+    "includes": ["**", "!**/node_modules/**/*", "!**/lib/**/*", "!**/docs/**/*"]
+  },
+  "javascript": {
+    "formatter": {
+      "jsxQuoteStyle": "double",
+      "quoteProperties": "preserve",
+      "trailingCommas": "all",
+      "semicolons": "always",
+      "arrowParentheses": "always",
+      "bracketSameLine": false,
+      "quoteStyle": "single",
+      "attributePosition": "auto",
+      "bracketSpacing": true
+    }
+  },
+  "assist": {
+    "enabled": true,
+    "actions": { "source": { "organizeImports": "on" } },
+    "includes": ["**", "!**/node_modules/**/*", "!**/lib/**/*", "!**/docs/**/*"]
+  }
+}

build/tasks/generate_palette.js

@@ -1,13 +1,14 @@
-const fs = require('fs');
-const path = require('path');
+const fs = require('node:fs');
+const path = require('node:path');
 const palette = require('@vkontakte/appearance/main.valette/palette');
 
 /**
  * @param {string} color ahex
  * @return {string} color цвет в браузерном представлении
  */
 function resolveColor(color) {
-  if (color.indexOf('#') === 0 && color.length === 9) { // ahex
+  if (color.indexOf('#') === 0 && color.length === 9) {
+    // ahex
     return ahex2rgba(color.replace('#', ''));
   }
   return color;
@@ -19,7 +20,7 @@ function resolveColor(color) {
  * @return {string} цвет в формате rgba
  */
 function ahex2rgba(ahex, multiplier = 1) {
-  const opacity = parseInt(ahex.slice(0, 2), 16) / 255 * multiplier;
+  const opacity = (parseInt(ahex.slice(0, 2), 16) / 255) * multiplier;
   const colorHex = ahex.slice(2);
   return opacify(colorHex, opacity);
 }
@@ -34,14 +35,15 @@ function opacify(hex, opacity) {
 }
 
 function generatePalette(options) {
-    let css = '/* stylelint-disable */\n/*\n* Этот файл сгенерирован автоматически. Не надо править его руками.\n*/\n';
-    css += ':root {\n';
+  let css =
+    '/* stylelint-disable */\n/*\n* Этот файл сгенерирован автоматически. Не надо править его руками.\n*/\n';
+  css += ':root {\n';
 
-    Object.keys(palette).forEach((colorName) => {
-      css += `  --${colorName}: ${resolveColor(palette[colorName]).toLowerCase()};\n`;
-    });
-    css += '}\n/* stylelint-enable */';
-    fs.writeFileSync(path.resolve(__dirname, options.dir, options.file || 'palette.css'), css);
+  Object.keys(palette).forEach((colorName) => {
+    css += `  --${colorName}: ${resolveColor(palette[colorName]).toLowerCase()};\n`;
+  });
+  css += '}\n/* stylelint-enable */';
+  fs.writeFileSync(path.resolve(__dirname, options.dir, options.file || 'palette.css'), css);
 }
 
 module.exports = generatePalette;

build/tasks/generate_scheme.js

@@ -1,22 +1,23 @@
-const fs = require('fs');
-const path = require('path');
+const fs = require('node:fs');
+const path = require('node:path');
 
 /**
-* @param {object} palette палитра цветов
-* @param {Object} clusterData
-* @param {string} clusterData.color_identifier
-* @param {number} clusterData.alpha_multiplier
-* @return {string} color цвет в браузерном представлении
-*/
+ * @param {object} palette палитра цветов
+ * @param {Object} clusterData
+ * @param {string} clusterData.color_identifier
+ * @param {number} clusterData.alpha_multiplier
+ * @return {string} color цвет в браузерном представлении
+ */
 function resolveColor(palette, clusterData) {
   const color = palette[clusterData.color_identifier];
   const alphaMultiplier = clusterData.alpha_multiplier ? Number(clusterData.alpha_multiplier) : 1;
 
   if (!color) {
     console.log('Missing color:', clusterData.color_identifier);
-    return "#000";
+    return '#000';
   } else {
-    if (color.indexOf('#') === 0 && color.length === 9) { // ahex
+    if (color.indexOf('#') === 0 && color.length === 9) {
+      // ahex
       return ahex2rgba(color.replace('#', ''), alphaMultiplier);
     } else if (color.indexOf('#') === 0 && clusterData.alpha_multiplier) {
       return opacify(color.replace('#', ''), alphaMultiplier);
@@ -31,7 +32,7 @@ function resolveColor(palette, clusterData) {
  * @return {string} цвет в формате rgba
  */
 function ahex2rgba(ahex, multiplier = 1) {
-  const opacity = parseInt(ahex.slice(0, 2), 16) / 255 * multiplier;
+  const opacity = (parseInt(ahex.slice(0, 2), 16) / 255) * multiplier;
   const colorHex = ahex.slice(2);
   return opacify(colorHex, opacity);
 }
@@ -53,15 +54,18 @@ function opacify(hex, opacity) {
 function generateScheme(scheme, palette, defaultSchemeId, targetDir) {
   for (const schemeId in scheme) {
     const clusters = scheme[schemeId].colors;
-    let css = '/* stylelint-disable */\n/*\n* Этот файл сгенерирован автоматически. Не надо править его руками.\n*/\n';
+    let css =
+      '/* stylelint-disable */\n/*\n* Этот файл сгенерирован автоматически. Не надо править его руками.\n*/\n';
     let selector = `body[scheme="${schemeId}"], [scheme="${schemeId}"], .vkui${schemeId}`;
     if (schemeId === defaultSchemeId) {
-      selector = `:root, ${selector}`
+      selector = `:root, ${selector}`;
     }
     css += `${selector} {\n`;
-    Object.keys(clusters).sort((a, b) => a.localeCompare(b)).forEach((clusterId) => {
-      css += `  --${clusterId}: ${resolveColor(palette, clusters[clusterId]).toLowerCase()};\n`;
-    });
+    Object.keys(clusters)
+      .sort((a, b) => a.localeCompare(b))
+      .forEach((clusterId) => {
+        css += `  --${clusterId}: ${resolveColor(palette, clusters[clusterId]).toLowerCase()};\n`;
+      });
     css += '}\n/* stylelint-enable */\n';
     fs.writeFileSync(path.resolve(targetDir, `${schemeId}.css`), css);
   }

package.json

@@ -16,19 +16,15 @@
   "directories": {
     "lib": "lib"
   },
-  "files": [
-    "lib",
-    "src",
-    "build"
-  ],
+  "files": ["lib", "src", "build"],
   "scripts": {
     "clear": "shx rm -rf lib",
     "prepare": "yarn build",
     "build": "yarn clear && concurrently 'yarn:build:*'",
     "test": "node --experimental-test-coverage --test-reporter=lcov --test-reporter-destination=lcov.info --test '**/*.test.*'",
     "lint": "concurrently 'yarn:lint:*'",
     "lint:tsc": "tsc --noEmit",
-    "lint:eslint": "eslint ./src --ext .ts --fix",
+    "lint:biome": "biome check",
     "prepublishOnly": "yarn build",
     "publish-package": "yarn install --check-files && yarn publish --non-interactive",
     "swc-base": "swc src/ --config-file package.swcrc --strip-leading-paths",
@@ -37,10 +33,7 @@
     "size": "yarn build && size-limit",
     "docs": "typedoc"
   },
-  "pre-commit": [
-    "test",
-    "lint"
-  ],
+  "pre-commit": ["test", "lint"],
   "size-limit": [
     {
       "name": "JS",
@@ -79,27 +72,19 @@
   },
   "homepage": "https://github.com/VKCOM/vkjs#readme",
   "devDependencies": {
+    "@biomejs/biome": "^2.3.11",
     "@size-limit/file": "^12.0.0",
     "@size-limit/webpack": "^12.0.0",
     "@swc/cli": "^0.7.10",
     "@swc/core": "^1.15.8",
     "@swc/plugin-transform-imports": "^12.3.0",
     "@types/node": "^25.0.9",
     "@types/react": "^19.2.8",
-    "@typescript-eslint/eslint-plugin": "^7.0.1",
-    "@typescript-eslint/parser": "^7.0.1",
-    "@vkontakte/eslint-plugin": "^1.1.1",
-    "@vkontakte/prettier-config": "^0.2.1",
     "concurrently": "^9.0.0",
     "cross-env": "^10.1.0",
-    "eslint": "^8.42.0",
-    "eslint-config-prettier": "^9.0.0",
-    "eslint-plugin-import": "^2.27.5",
-    "eslint-plugin-prettier": "^5.0.0",
     "global-jsdom": "^27.0.0",
     "jsdom": "^27.4.0",
     "pre-commit": "1.2.2",
-    "prettier": "^3.8.0",
     "react": "^19.2.3",
     "shx": "^0.4.0",
     "size-limit": "^12.0.0",
@@ -108,14 +93,9 @@
     "typedoc-plugin-mdn-links": "^5.1.0",
     "typescript": "^5.8.3"
   },
-  "resolutions": {
-    "@typescript-eslint/eslint-plugin": "7.4.0",
-    "@typescript-eslint/parser": "7.4.0"
-  },
   "dependencies": {
     "@swc/helpers": "^0.5.18",
     "clsx": "^2.1.1"
   },
-  "prettier": "@vkontakte/prettier-config",
   "packageManager": "yarn@1.22.22+sha512.a6b2f7906b721bba3d67d4aff083df04dad64c399707841b7acf00f6b133b7ac24255f2652fa22ae3534329dc6180534e98d17432037ff6fd140556e2bb3137e"
 }

src/animation/animate.ts

@@ -1,5 +1,5 @@
 import { canUseDOM, canUseEventListeners } from '../other/dom.ts';
-import { type SupportEvent } from '../other/types.ts';
+import type { SupportEvent } from '../other/types.ts';
 
 type TimingInterface = (timeFraction: number) => number;
 
@@ -32,7 +32,6 @@ export function animate({ duration, timing, draw }: AnimateArgumentsInterface):
 
   const start = window.performance.now();
 
-  // eslint-disable-next-line no-shadow
   window.requestAnimationFrame(function animate(time) {
     let timeFraction = (time - start) / duration;
 
@@ -102,7 +101,7 @@ export const transitionEvent: SupportEvent<'transitionend'> = /*#__PURE__*/ (()
  * @param el Элемент
  */
 export function waitAnimationEnd(
-  listener: (ev?: AnimationEvent) => any,
+  listener: (ev?: AnimationEvent) => void,
   fallbackTime: number,
   el?: GlobalEventHandlers,
 ): number | undefined {
@@ -123,7 +122,7 @@ export function waitAnimationEnd(
  * @param el Элемент
  */
 export function cancelWaitAnimationEnd(
-  listener: (ev?: AnimationEvent) => any,
+  listener: (ev?: AnimationEvent) => void,
   handle?: number,
   el?: GlobalEventHandlers,
 ): void {
@@ -145,7 +144,7 @@ export function cancelWaitAnimationEnd(
  */
 export function waitTransitionEnd(
   el: GlobalEventHandlers,
-  listener: (ev?: TransitionEvent) => any,
+  listener: (ev?: TransitionEvent) => void,
   fallbackTime: number,
 ): number | undefined {
   if (canUseEventListeners) {
@@ -165,7 +164,7 @@ export function waitTransitionEnd(
  * @param el Элемент
  */
 export function cancelWaitTransitionEnd(
-  listener: (ev?: TransitionEvent) => any,
+  listener: (ev?: TransitionEvent) => void,
   handle?: number,
   el?: GlobalEventHandlers,
 ): void {

src/animation/index.ts

@@ -1,9 +1,9 @@
 export {
   animate,
   animationEvent,
+  cancelWaitAnimationEnd,
+  cancelWaitTransitionEnd,
   transitionEvent,
   waitAnimationEnd,
-  cancelWaitAnimationEnd,
   waitTransitionEnd,
-  cancelWaitTransitionEnd,
 } from './animate.ts';