Migration to Biome

Author: StopNGo

.stylelintrc.json

@@ -1,8 +1,5 @@
 {
-  "extends": [
-    "stylelint-config-standard-scss",
-    "stylelint-config-clean-order"
-  ],
+  "extends": ["stylelint-config-standard-scss", "stylelint-config-clean-order"],
   "rules": {
     "max-nesting-depth": 3,
     "declaration-property-value-no-unknown": true,

README.md

@@ -1,6 +1,6 @@
 # React Proto - React TypeScript Boilerplate
 
-![node.js@22](https://img.shields.io/badge/node.js-22-339933?style=for-the-badge&logo=nodedotjs) ![typescript@5](https://img.shields.io/badge/typescript-5-3178C6?style=for-the-badge&logo=typescript) ![reactjs@18](https://img.shields.io/badge/Reactjs-18-61DAFB?style=for-the-badge&logo=react) ![rspack@1](https://img.shields.io/badge/rspack-1-f0965b?style=for-the-badge) ![webpack@5](https://img.shields.io/badge/webpack-5-8dd6f9?style=for-the-badge&logo=webpack) ![sass@1.7](https://img.shields.io/badge/sass-1.7-CC6699?style=for-the-badge&logo=sass) ![ts-standard](https://img.shields.io/badge/standard-ts-F3DF49?style=for-the-badge&logo=standardjs)
+![node.js@22](https://img.shields.io/badge/node.js-22-339933?style=for-the-badge&logo=nodedotjs) ![typescript@5](https://img.shields.io/badge/typescript-5-3178C6?style=for-the-badge&logo=typescript) ![reactjs@18](https://img.shields.io/badge/Reactjs-18-61DAFB?style=for-the-badge&logo=react) ![rspack@1](https://img.shields.io/badge/rspack-1-f0965b?style=for-the-badge) ![webpack@5](https://img.shields.io/badge/webpack-5-8dd6f9?style=for-the-badge&logo=webpack) ![sass@1.7](https://img.shields.io/badge/sass-1.7-CC6699?style=for-the-badge&logo=sass)
 
 <img align="right" width="100" src="src/assets/images/logo.png">
 
@@ -23,7 +23,7 @@ Webpack is still available as an option ([rspack vs webpack](#rspack-vs-webpack)
 - [What's Inside](#whats-inside)
 - [The App](#the-app)
 - [How to Use](#how-to-use)
-- [Basic Project Configuration](#basic-project-Configuration)
+- [Basic Project Configuration](#basic-project-configuration)
 - [General Notices](#general-notices)
 - [Documentation](#documentation)
 - [Changes](#changes)
@@ -83,13 +83,12 @@ i18n (Internationalization):
 
 Styles:
 
-- **(S)CSS modules** (with TypeScript support)
+- **(S)CSS modules** (with TypeScript support; [important note for VSCode](#typescript-css-modules-for-vscode))
 
 Linters:
 
-- **TS Standard** (TypeScript Style Guide, with linter and automatic code fixer based on [StandardJS](https://standardjs.com/))
+- **Biome** ([modern replace for ESLinter and Prettier](https://github.com/biomejs/biome); [configuration Biome for VSCode](#configuration-biome-for-vscode))
 - **Stylelint** (including rules order)
-- **Prettier**
 
 Tests:
 
@@ -239,17 +238,17 @@ Here is a comparison between Rspack 1 with the built-in SWC loader and Webpack 5
 
 |         | Rspack     | webpack   |
 | ------- | --------- | -------- |
-| Server  | 5.35 s | 6.83 s |
-| Client | 5.32 s  | 7.50 s |
+| Server  | 4.82 s | 6.14 s |
+| Client | 4.81 s  | 6.56 s |
 
 Of course, the larger the project, the greater the performance advantage. However, if you need more webpack compatibility or hot module reloading while developing with [Preact](#react-vs-preact), you can always [switch back to the webpack bundler](#switching-back-to-webpack).
 
 Also, the optimization process of Rspack is currently slightly worse. Check the bundle size comparison for the non-SSR version of the sample application in this repository:
 
 |         | Rspack     | webpack   |
 | ------- | --------- | -------- |
-| Parsed  | 284.47 KB | 262.9 KB |
-| Gzipped | 90.29 KB  | 86.84 KB |
+| Parsed  | 285.42 KB | 263.92 KB |
+| Gzipped | 90.55 KB  | 87.16 KB |
 ### React vs Preact
 
 In `webpack\constants.ts` you can choose to use [Preact](https://preactjs.com/) library instead React itself (`IS_PREACT` boolean constant).
@@ -258,8 +257,8 @@ Preact is a fast and compact React-compatible Virtual DOM library. But because i
 
 |         | React     | Preact   |
 | ------- | --------- | -------- |
-| Parsed  | 262.9 KB | 150.55 KB |
-| Gzipped | 86.84 KB  | 52.09 KB |
+| Parsed  | 285.42 KB | 173.3 KB |
+| Gzipped | 90.55 KB  | 56.05 KB |
 
 **Important Note**
 At the moment, the Rspack version of the project does not support hot module reloading during development with Preact. Compared to Webpack, it requires some additional tricky configuration, which I will probably add in the near future. However, if you need HMR (and you definitely do!), you can develop your project using React and then build it with Preact. Or just [switch your project back to the webpack](#switching-back-to-webpack).
@@ -269,6 +268,12 @@ You can freely integrate any React compatible i18n solution. But if React Proto
 
 ### Why not redux-persist package?
 As for me this solution is overcomplicated in most of cases. It definitely has a lot of "storage engines", state version control and etc., but smart using of Redux Middlewares and Listeners can cover all this functionality in a more precise way.
+
+### Configuration Biome for VSCode
+Please check [this official documentation](https://biomejs.dev/reference/vscode/).
+
+### Typescript CSS Modules for VSCode
+For proper CSS class hinting, please check this [note](https://github.com/mrmckeb/typescript-plugin-css-modules?tab=readme-ov-file#visual-studio-code).
 ## Documentation
 
 _Coming soon._

_webpack/package.json

@@ -1,13 +1,10 @@
 {
   "name": "react-proto",
-  "version": "2.0.1",
+  "version": "2.1.0",
   "description": "React TypeScript Boilerplate",
   "author": "Max L Stop&Go",
   "license": "ISC",
-  "sideEffects": [
-    "*.css",
-    "*.scss"
-  ],
+  "sideEffects": ["*.css", "*.scss"],
   "scripts": {
     "clean": "rimraf dist",
     "start:webpack": "cross-env NODE_ENV=development webpack --mode=development",
@@ -20,31 +17,31 @@
     "start:static": "npm run clean  && cross-env NODE_ENV=development NO_SSR=true webpack serve --mode development --open",
     "build:static": "npm run clean  && cross-env NODE_ENV=production NO_SSR=true webpack --mode production",
     "build:static:report": "npm run build:static --withReport",
-    "prettier": "prettier \"src/**/*\" --write --single-quote --no-semi --ignore-unknown --trailing-comma none --jsx-single-quote",
-    "lint": "ts-standard . && stylelint **/*.{css,scss}",
-    "lint:fix": "npm run prettier && ts-standard . --fix && stylelint --fix **/*.{css,scss}",
+    "lint": "npx @biomejs/biome check . && stylelint \"**/*.{css,scss}\"",
+    "lint:fix": "npx @biomejs/biome check --write && stylelint --fix \"**/*.{css,scss}\"",
     "test": "jest",
     "add-comp": "node scripts/add-comp.js"
   },
   "devDependencies": {
+    "@biomejs/biome": "1.9.4",
     "@pmmmwh/react-refresh-webpack-plugin": "0.5.15",
     "@prefresh/webpack": "4.0.1",
     "@svgr/webpack": "8.1.0",
-    "@swc/core": "1.7.26",
-    "@testing-library/jest-dom": "6.5.0",
+    "@swc/core": "1.7.39",
+    "@testing-library/jest-dom": "6.6.2",
     "@testing-library/preact": "3.2.4",
     "@testing-library/react": "16.0.1",
     "@testing-library/user-event": "14.5.2",
     "@types/compression": "1.7.5",
     "@types/cookie-parser": "1.4.7",
     "@types/express": "5.0.0",
-    "@types/jest": "29.5.13",
+    "@types/jest": "29.5.14",
     "@types/loadable__component": "5.13.9",
     "@types/loadable__server": "5.12.11",
-    "@types/node": "22.7.5",
+    "@types/node": "22.7.9",
     "@types/prefresh__webpack": "3.3.3",
-    "@types/react": "18.3.11",
-    "@types/react-dom": "18.3.0",
+    "@types/react": "18.3.12",
+    "@types/react-dom": "18.3.1",
     "@types/react-helmet": "6.1.11",
     "@types/react-router-dom": "5.3.3",
     "@types/serialize-javascript": "5.0.4",
@@ -60,7 +57,7 @@
     "csso-webpack-plugin": "2.0.0-beta.3",
     "express": "4.21.1",
     "fork-ts-checker-webpack-plugin": "9.0.2",
-    "html-webpack-plugin": "5.6.0",
+    "html-webpack-plugin": "5.6.3",
     "jest": "29.7.0",
     "jest-environment-jsdom": "29.7.0",
     "mini-css-extract-plugin": "2.9.1",
@@ -69,19 +66,17 @@
     "null-loader": "4.0.1",
     "postcss": "8.4.47",
     "postcss-scss": "4.0.9",
-    "prettier": "3.3.3",
     "rimraf": "6.0.1",
-    "sass": "1.79.4",
+    "sass": "1.80.3",
     "sass-loader": "16.0.2",
-    "stylelint": "16.9.0",
+    "stylelint": "16.10.0",
     "stylelint-config-clean-order": "6.1.0",
     "stylelint-config-standard-scss": "13.1.0",
     "swc-loader": "0.2.6",
     "ts-jest": "29.2.5",
     "ts-loader": "9.5.1",
     "ts-node": "10.9.2",
-    "ts-standard": "12.0.2",
-    "typescript": "5.6.2",
+    "typescript": "5.6.3",
     "typescript-plugin-css-modules": "5.1.0",
     "wait-on": "8.0.1",
     "webpack": "5.95.0",
@@ -96,19 +91,19 @@
     "@apollo/react-ssr": "4.0.0",
     "@loadable/server": "5.16.5",
     "@loadable/webpack-plugin": "5.15.2",
-    "@reduxjs/toolkit": "2.2.8",
+    "@reduxjs/toolkit": "2.3.0",
     "@types/loadable__webpack-plugin": "5.7.6",
     "compression": "1.7.4",
     "cookie-parser": "1.4.7",
     "cross-fetch": "4.0.0",
     "helmet": "8.0.0",
     "identity-obj-proxy": "3.0.0",
-    "preact": "10.24.2",
+    "preact": "10.24.3",
     "react": "18.3.1",
     "react-dom": "18.3.1",
     "react-helmet-async": "2.0.5",
     "react-redux": "9.1.2",
-    "react-router-dom": "6.26.2",
+    "react-router-dom": "6.27.0",
     "serialize-javascript": "6.0.2"
   }
 }

_webpack/src/server/middlewares/csp.ts

@@ -1,14 +1,14 @@
-import helmet from 'helmet'
-import { randomUUID } from 'crypto'
-import { Response, Request, NextFunction } from 'express'
+import { randomUUID } from 'node:crypto'
 import { IS_DEV } from '_webpack/constants'
+import type { NextFunction, Request, Response } from 'express'
+import helmet from 'helmet'
 
 const nonce = (_req: Request, res: Response, next: NextFunction): void => {
   res.locals.cspNonce = Buffer.from(randomUUID()).toString('base64')
   next()
 }
 
-const csp = (req: Request, res: Response, next: NextFunction): void => {
+const csp = (req: Request, res: Response, next: NextFunction) => {
   const middleware = helmet({
     contentSecurityPolicy: {
       useDefaults: true,
@@ -18,13 +18,13 @@ const csp = (req: Request, res: Response, next: NextFunction): void => {
         scriptSrc: [
           "'self'",
           `'nonce-${String(res.locals.cspNonce)}'`,
-          IS_DEV ? "'unsafe-eval'" : ''
-        ]
-      }
+          IS_DEV ? "'unsafe-eval'" : '',
+        ],
+      },
     },
     crossOriginEmbedderPolicy: { policy: 'credentialless' },
     noSniff: false,
-    originAgentCluster: false
+    originAgentCluster: false,
   })
 
   return middleware(req, res, next)

_webpack/src/server/middlewares/hotReload.ts

@@ -1,5 +1,5 @@
+import type { RequestHandler } from 'express'
 import webpack from 'webpack'
-import { RequestHandler } from 'express'
 import devMiddleware from 'webpack-dev-middleware'
 import hotMiddleware from 'webpack-hot-middleware'
 
@@ -11,10 +11,10 @@ export const devMiddlewareInstance = devMiddleware(compiler, {
   serverSideRender: true,
   writeToDisk: true,
   publicPath:
-    config.output?.publicPath != null ? String(config.output.publicPath) : '/'
+    config.output?.publicPath != null ? String(config.output.publicPath) : '/',
 })
 
-export function hotReload (): RequestHandler[] {
+export function hotReload(): RequestHandler[] {
   return [devMiddlewareInstance, hotMiddleware(compiler)]
 }
 

_webpack/src/server/server.ts

@@ -1,12 +1,12 @@
-import path from 'path'
-import express, { RequestHandler } from 'express'
+import path from 'node:path'
+import { ChunkExtractor } from '@loadable/server'
 import compression from 'compression'
 import cookieParser from 'cookie-parser'
-import { ChunkExtractor } from '@loadable/server'
+import express, { type RequestHandler } from 'express'
 
-import { csp, serverRenderer, nonce } from 'server/middlewares'
-import { IS_RENDER_TO_STREAM, SERVER_PORT } from 'server/constants'
 import { DIST_DIR, IS_DEV, SRC_DIR } from '_webpack/constants'
+import { IS_RENDER_TO_STREAM, SERVER_PORT } from 'server/constants'
+import { csp, nonce, serverRenderer } from 'server/middlewares'
 
 const { PORT = SERVER_PORT } = process.env
 
@@ -39,7 +39,7 @@ const runServer = (hotReload?: () => RequestHandler[]): void => {
     console.log(
       `App listening on port ${PORT}! (render to ${
         IS_RENDER_TO_STREAM ? 'stream' : 'string'
-      })`
+      })`,
     )
   })
 }

_webpack/tsconfig.json

@@ -37,5 +37,5 @@
     "compilerOptions": { "module": "commonjs" }
   },
   "include": ["src", "webpack", "webpack.config.ts", "jest.config.ts"],
-  "exclude": ["node_modules", "**/*.js"],
+  "exclude": ["node_modules", "**/*.js"]
 }