+
diff --git a/src/router/Router.tsx b/src/router/Router.tsx
index 97ed8f9..44c517d 100644
--- a/src/router/Router.tsx
+++ b/src/router/Router.tsx
@@ -1,4 +1,4 @@
-import { RouteObject } from 'react-router-dom'
+import type { RouteObject } from 'react-router-dom'
import { ROUTE_CONSTANTS } from 'constants/routeConstants'
import { About, Fetch, Home, NotFound } from 'pages'
@@ -6,30 +6,30 @@ import { About, Fetch, Home, NotFound } from 'pages'
const routes: RouteObject[] = [
{
path: '*',
- element:
+ element:
,
},
{
path: ROUTE_CONSTANTS.HOME,
- element:
+ element:
,
},
{
path: ROUTE_CONSTANTS.FETCH,
- element:
+ element:
,
},
{
path: ROUTE_CONSTANTS.ABOUT,
- element:
+ element:
,
},
{
path: ROUTE_CONSTANTS.NOT_FOUND,
- element:
+ element:
,
},
{
path: 'sw.js',
loader: async () => {
return await fetch('sw.js')
- }
- }
+ },
+ },
]
export { routes }
diff --git a/src/server/middlewares/apiRequest.ts b/src/server/middlewares/apiRequest.ts
index 7edf810..2ad97b7 100644
--- a/src/server/middlewares/apiRequest.ts
+++ b/src/server/middlewares/apiRequest.ts
@@ -1,13 +1,16 @@
-import { EnhancedStore } from '@reduxjs/toolkit'
+import type { EnhancedStore } from '@reduxjs/toolkit'
import { pokemonApi } from 'api'
const apiRequest = async (
- store: EnhancedStore
+ // biome-ignore lint/suspicious/noExplicitAny: Created for complex sample API
+ store: EnhancedStore,
+ // biome-ignore lint/suspicious/noExplicitAny: Created for complex sample API
): Promise => {
store.dispatch(pokemonApi.endpoints.getPokemonSpriteById.initiate(1))
+ // biome-ignore lint/suspicious/noExplicitAny: Created for complex sample API
return await Promise.all(
- store.dispatch(pokemonApi.util.getRunningQueriesThunk())
+ store.dispatch(pokemonApi.util.getRunningQueriesThunk()),
)
}
diff --git a/src/server/middlewares/csp.ts b/src/server/middlewares/csp.ts
index 0e678f3..0fdf75c 100644
--- a/src/server/middlewares/csp.ts
+++ b/src/server/middlewares/csp.ts
@@ -1,6 +1,6 @@
+import { randomUUID } from 'node:crypto'
+import type { NextFunction, Request, Response } from 'express'
import helmet from 'helmet'
-import { randomUUID } from 'crypto'
-import { Response, Request, NextFunction } from 'express'
import { IS_DEV } from 'rspack/constants'
const nonce = (_req: Request, res: Response, next: NextFunction): void => {
@@ -8,7 +8,7 @@ const nonce = (_req: Request, res: Response, next: NextFunction): void => {
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)
diff --git a/src/server/middlewares/hotReload.ts b/src/server/middlewares/hotReload.ts
index 6744be9..d2cbff4 100644
--- a/src/server/middlewares/hotReload.ts
+++ b/src/server/middlewares/hotReload.ts
@@ -1,5 +1,5 @@
import { rspack } from '@rspack/core'
-import { RequestHandler } from 'express'
+import type { RequestHandler } from 'express'
import devMiddleware from 'webpack-dev-middleware'
import hotMiddleware from 'webpack-hot-middleware'
@@ -7,6 +7,7 @@ import { clientConfig as config } from 'rspack/client.config'
const compiler = rspack({ ...config, mode: 'development' })
+// biome-ignore lint/suspicious/noExplicitAny: Rspack types incompatibility
export const devMiddlewareInstance = devMiddleware(compiler as any, {
serverSideRender: true,
/*
@@ -15,10 +16,11 @@ export const devMiddlewareInstance = devMiddleware(compiler as any, {
*/
writeToDisk: false,
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[] {
+ // biome-ignore lint/suspicious/noExplicitAny: Rspack types incompatibility
return [devMiddlewareInstance, hotMiddleware(compiler as any)]
}
diff --git a/src/server/middlewares/serverRenderer.tsx b/src/server/middlewares/serverRenderer.tsx
index 21daa41..2bca28b 100644
--- a/src/server/middlewares/serverRenderer.tsx
+++ b/src/server/middlewares/serverRenderer.tsx
@@ -1,52 +1,52 @@
-import { HelmetProvider, HelmetServerState } from 'react-helmet-async'
+import { getDataFromTree } from '@apollo/react-ssr'
+import type { ChunkExtractor } from '@loadable/server'
+import type { Request, RequestHandler, Response } from 'express'
import { renderToPipeableStream, renderToString } from 'react-dom/server'
-import { Request, Response, RequestHandler } from 'express'
+import { HelmetProvider, type HelmetServerState } from 'react-helmet-async'
import { StaticRouter } from 'react-router-dom/server'
-import { ChunkExtractor } from '@loadable/server'
-import { getDataFromTree } from '@apollo/react-ssr'
-import { initStore, RootState } from 'store/store'
import { Provider } from 'react-redux'
+import { type RootState, initStore } from 'store/store'
-import { App } from 'src/App'
+import { THEME_NAMES } from 'constants/commonConstants'
import { ROUTE_CONSTANTS } from 'constants/routeConstants'
+import { IS_RENDER_TO_STREAM } from 'server/constants'
import { apiRequest, setTranslations } from 'server/middlewares'
import { getHtmlTemplate } from 'server/template'
-import { IS_RENDER_TO_STREAM } from 'server/constants'
-import { THEME_NAMES } from 'constants/commonConstants'
+import { App } from 'src/App'
const serverRenderer =
(chunkExtractor: ChunkExtractor): RequestHandler =>
- async (req: Request, res: Response) => {
- const isPageAvailable = Object.values(ROUTE_CONSTANTS).includes(req.path)
+ async (req: Request, res: Response) => {
+ const isPageAvailable = Object.values(ROUTE_CONSTANTS).includes(req.path)
- if (!isPageAvailable) {
- req.url = ROUTE_CONSTANTS.NOT_FOUND
- }
+ if (!isPageAvailable) {
+ req.url = ROUTE_CONSTANTS.NOT_FOUND
+ }
- const location: string = req.url
+ const location: string = req.url
- /*
+ /*
Check user accepted languages. If it is different from the default
set it in the root state initial state including all needed translation.
As a result rendering will be done with this language.
*/
- const i18nState = await setTranslations(req)
+ const i18nState = await setTranslations(req)
- let preloadedState: Partial = {
- counter: { value: 42 },
- theme: {
- theme:
+ let preloadedState: Partial = {
+ counter: { value: 42 },
+ theme: {
+ theme:
req.headers['sec-ch-prefers-color-scheme'] === 'dark'
? THEME_NAMES.DARK
- : THEME_NAMES.LIGHT
- },
- ...i18nState
- }
+ : THEME_NAMES.LIGHT,
+ },
+ ...i18nState,
+ }
- const store = initStore(preloadedState)
+ const store = initStore(preloadedState)
- /*
+ /*
Prefetching with RTK Query:
- Get data;
- Put it into the store;
@@ -56,73 +56,73 @@ const serverRenderer =
Note: Why not just get data during SSR?
Because rendering will be done before resolving the request Promise.
*/
- await apiRequest(store)
- preloadedState = { ...store.getState() }
+ await apiRequest(store)
+ preloadedState = { ...store.getState() }
- const helmetContext = {}
+ const helmetContext = {}
- /*
+ /*
react-helmet-async forgot to export this interface after migrating to TypeScript in v2+.
*/
- interface HelmetDataContext {
- helmet: HelmetServerState
- }
-
- const jsx = (
-
-
-
-
-
-
-
- )
-
- if (IS_RENDER_TO_STREAM) {
- await getDataFromTree(jsx)
-
- const { helmet } = helmetContext as HelmetDataContext
-
- const { header, footer } = getHtmlTemplate({
- preloadedState,
- helmetData: helmet,
- scriptTags: chunkExtractor.getScriptTags({
- nonce: res.locals.cspNonce
- }),
- styleTags: chunkExtractor.getStyleTags(),
+ interface HelmetDataContext {
+ helmet: HelmetServerState
+ }
+
+ const jsx = (
+
+
+
+
+
+
+
+ )
+
+ if (IS_RENDER_TO_STREAM) {
+ await getDataFromTree(jsx)
+
+ const { helmet } = helmetContext as HelmetDataContext
+
+ const { header, footer } = getHtmlTemplate({
+ preloadedState,
+ helmetData: helmet,
+ scriptTags: chunkExtractor.getScriptTags({
nonce: res.locals.cspNonce,
- lang: i18nState.i18n.lang
- })
-
- res.write(header)
- let didError = false
- const stream = renderToPipeableStream(jsx, {
- onShellReady () {
- res.statusCode = didError ? 500 : 200
- stream.pipe(res)
- },
- onAllReady () {
- res.end(footer)
- },
- onError (err) {
- didError = true
- console.error(err)
- }
- })
- } else {
- const reactHtml = renderToString(jsx)
- const { helmet } = helmetContext as HelmetDataContext
-
- const { header, footer } = getHtmlTemplate({
- preloadedState,
- helmetData: helmet,
- scriptTags: chunkExtractor.getScriptTags(),
- styleTags: chunkExtractor.getStyleTags(),
- nonce: res.locals.cspNonce
- })
-
- res.send(header + reactHtml + footer)
- }
+ }),
+ styleTags: chunkExtractor.getStyleTags(),
+ nonce: res.locals.cspNonce,
+ lang: i18nState.i18n.lang,
+ })
+
+ res.write(header)
+ let didError = false
+ const stream = renderToPipeableStream(jsx, {
+ onShellReady() {
+ res.statusCode = didError ? 500 : 200
+ stream.pipe(res)
+ },
+ onAllReady() {
+ res.end(footer)
+ },
+ onError(err) {
+ didError = true
+ console.error(err)
+ },
+ })
+ } else {
+ const reactHtml = renderToString(jsx)
+ const { helmet } = helmetContext as HelmetDataContext
+
+ const { header, footer } = getHtmlTemplate({
+ preloadedState,
+ helmetData: helmet,
+ scriptTags: chunkExtractor.getScriptTags(),
+ styleTags: chunkExtractor.getStyleTags(),
+ nonce: res.locals.cspNonce,
+ })
+
+ res.send(header + reactHtml + footer)
}
+ }
export { serverRenderer }
diff --git a/src/server/middlewares/setTranslations.ts b/src/server/middlewares/setTranslations.ts
index 93dce74..388340d 100644
--- a/src/server/middlewares/setTranslations.ts
+++ b/src/server/middlewares/setTranslations.ts
@@ -1,13 +1,13 @@
-import { Request } from 'express'
+import type { Request } from 'express'
-import { RootState } from 'store/store'
import {
+ type TSupportedLanguages,
+ type TTranslations,
defaultLang,
supportedLangs,
- TSupportedLanguages,
- TTranslations
} from 'i18n/i18nConfig'
import { initialState } from 'i18n/i18nSlice'
+import type { RootState } from 'store/store'
interface ITranslations {
[key: string]: string | ITranslations
@@ -15,23 +15,25 @@ interface ITranslations {
const loadTranslations = async (lang: string): Promise => {
const json = await import(`i18n/translations/${lang}.json`, {
- assert: { type: 'json' }
+ assert: { type: 'json' },
})
return json.default
}
export const setTranslations = async (
- req: Request
+ req: Request,
): Promise> => {
const i18nState = { ...initialState }
const userAcceptsLanguages = req.acceptsLanguages(
- Object.keys(supportedLangs)
+ Object.keys(supportedLangs),
) as keyof TSupportedLanguages | boolean
let lang = defaultLang
- userAcceptsLanguages === false
- ? (lang = defaultLang)
- : (lang = userAcceptsLanguages as keyof TSupportedLanguages)
+ if (userAcceptsLanguages === false) {
+ lang = defaultLang
+ } else {
+ lang = userAcceptsLanguages as keyof TSupportedLanguages
+ }
if (userAcceptsLanguages === defaultLang) return { i18n: i18nState }
diff --git a/src/server/server.ts b/src/server/server.ts
index f820a5e..48d00c3 100644
--- a/src/server/server.ts
+++ b/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 'rspack/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'
- })`
+ })`,
)
})
}
diff --git a/src/server/template.ts b/src/server/template.ts
index f1150c0..4e477e1 100644
--- a/src/server/template.ts
+++ b/src/server/template.ts
@@ -1,6 +1,6 @@
-import { HelmetServerState } from 'react-helmet-async'
+import type { HelmetServerState } from 'react-helmet-async'
import serialize from 'serialize-javascript'
-import { RootState } from 'store/store'
+import type { RootState } from 'store/store'
interface TTemplate {
header: string
@@ -35,10 +35,10 @@ export const getHtmlTemplate = (props: {
${props.scriptTags}
@@ -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,8 +238,8 @@ 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).
@@ -248,8 +247,8 @@ Also, the optimization process of Rspack is currently slightly worse. Check the
| | 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._
diff --git a/_webpack/package.json b/_webpack/package.json
index f915d09..2e3b3b5 100644
--- a/_webpack/package.json
+++ b/_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"
}
}
diff --git a/_webpack/src/server/middlewares/csp.ts b/_webpack/src/server/middlewares/csp.ts
index b25edb3..46e1b1a 100644
--- a/_webpack/src/server/middlewares/csp.ts
+++ b/_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)
diff --git a/_webpack/src/server/middlewares/hotReload.ts b/_webpack/src/server/middlewares/hotReload.ts
index 12eabd4..de4e807 100644
--- a/_webpack/src/server/middlewares/hotReload.ts
+++ b/_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)]
}
diff --git a/_webpack/src/server/server.ts b/_webpack/src/server/server.ts
index c24ced3..85285c6 100644
--- a/_webpack/src/server/server.ts
+++ b/_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'
- })`
+ })`,
)
})
}
diff --git a/_webpack/tsconfig.json b/_webpack/tsconfig.json
index 5010849..f6de8ff 100644
--- a/_webpack/tsconfig.json
+++ b/_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"]
}
diff --git a/_webpack/webpack/client.config.ts b/_webpack/webpack/client.config.ts
index f6d1868..195c336 100644
--- a/_webpack/webpack/client.config.ts
+++ b/_webpack/webpack/client.config.ts
@@ -1,23 +1,31 @@
-import path from 'path'
+import path from 'node:path'
-import {
- Configuration,
- HotModuleReplacementPlugin,
- WebpackPluginInstance,
- DefinePlugin
-} from 'webpack'
-import MiniCssExtractPlugin from 'mini-css-extract-plugin'
+import LoadablePlugin from '@loadable/webpack-plugin'
import ReactRefreshWebpackPlugin from '@pmmmwh/react-refresh-webpack-plugin'
import PreactRefreshPlugin from '@prefresh/webpack'
-import LoadablePlugin from '@loadable/webpack-plugin'
+import CopyPlugin from 'copy-webpack-plugin'
import CssoWebpackPlugin from 'csso-webpack-plugin'
import ForkTsCheckerWebpackPlugin from 'fork-ts-checker-webpack-plugin'
-import { BundleAnalyzerPlugin } from 'webpack-bundle-analyzer'
import HtmlWebpackPlugin from 'html-webpack-plugin'
-import CopyPlugin from 'copy-webpack-plugin'
+import MiniCssExtractPlugin from 'mini-css-extract-plugin'
+import {
+ type Configuration,
+ DefinePlugin,
+ HotModuleReplacementPlugin,
+ type WebpackPluginInstance,
+} from 'webpack'
+import { BundleAnalyzerPlugin } from 'webpack-bundle-analyzer'
import 'webpack-dev-server'
-import { ALIAS, DEV_SERVER_PORT, DIST_DIR, IS_DEV, IS_LAZY_COMPILATION, SRC_DIR, IS_PREACT } from './constants'
+import {
+ ALIAS,
+ DEV_SERVER_PORT,
+ DIST_DIR,
+ IS_DEV,
+ IS_LAZY_COMPILATION,
+ IS_PREACT,
+ SRC_DIR,
+} from './constants'
import * as Loaders from './loaders'
const withReport = Boolean(process.env.npm_config_withReport)
@@ -29,9 +37,9 @@ const entry: string[] = [
...(process.env.NO_SSR === 'true'
? []
: ['webpack-hot-middleware/client']),
- 'css-hot-loader/hotModuleReplacement'
+ 'css-hot-loader/hotModuleReplacement',
]
- : [])
+ : []),
]
const filename = (ext: string): string =>
@@ -39,43 +47,43 @@ const filename = (ext: string): string =>
const plugins: WebpackPluginInstance[] = [
new DefinePlugin({
- NO_SSR: process.env.NO_SSR === 'true'
+ NO_SSR: process.env.NO_SSR === 'true',
}),
...(process.env.NO_SSR === 'true'
? [
new HtmlWebpackPlugin({
title: 'My App',
- template: './src/assets/index.html'
- })
+ template: './src/assets/index.html',
+ }),
]
: []),
new ForkTsCheckerWebpackPlugin(),
new MiniCssExtractPlugin({
- filename: IS_DEV ? '[name].css' : '[name].[contenthash].css'
+ filename: IS_DEV ? '[name].css' : '[name].[contenthash].css',
}),
new LoadablePlugin({
filename: 'stats.json',
- writeToDisk: true
+ writeToDisk: true,
}) as { apply: () => void },
...(IS_DEV
? [
- new HotModuleReplacementPlugin(),
- IS_PREACT ? new PreactRefreshPlugin() : new ReactRefreshWebpackPlugin()
+ new HotModuleReplacementPlugin(),
+ IS_PREACT ? new PreactRefreshPlugin() : new ReactRefreshWebpackPlugin(),
]
: [
new CssoWebpackPlugin(),
new BundleAnalyzerPlugin({
- analyzerMode: withReport ? 'server' : 'disabled'
- })
+ analyzerMode: withReport ? 'server' : 'disabled',
+ }),
]),
new CopyPlugin({
patterns: [
{ from: `${SRC_DIR}/i18n/translations`, to: 'lang' },
...(process.env.NO_SSR === 'true'
? [{ from: `${SRC_DIR}/sw.js`, to: 'sw.js' }]
- : [])
- ]
- })
+ : []),
+ ],
+ }),
]
const clientConfig: Configuration = {
@@ -86,7 +94,7 @@ const clientConfig: Configuration = {
output: {
path: DIST_DIR,
filename: filename('js'),
- publicPath: '/'
+ publicPath: '/',
},
devtool: IS_DEV ? 'source-map' : false,
resolve: {
@@ -94,17 +102,17 @@ const clientConfig: Configuration = {
extensions: ['.tsx', '.ts', '.js', '.scss', '.css'],
fallback: {
url: false,
- path: false
- }
+ path: false,
+ },
},
module: {
- rules: Object.values(Loaders).map((el) => el.client)
+ rules: Object.values(Loaders).map((el) => el.client),
},
...(process.env.NO_SSR === 'true' && {
devServer: {
historyApiFallback: true,
- port: DEV_SERVER_PORT
- }
+ port: DEV_SERVER_PORT,
+ },
}),
optimization: {
splitChunks: {
@@ -112,14 +120,14 @@ const clientConfig: Configuration = {
vendor: {
name: 'vendors',
test: /[\\/]node_modules[\\/]/,
- chunks: 'all'
- }
- }
- }
+ chunks: 'all',
+ },
+ },
+ },
},
experiments: {
- lazyCompilation: IS_LAZY_COMPILATION
- }
+ lazyCompilation: IS_LAZY_COMPILATION,
+ },
}
export { clientConfig }
diff --git a/_webpack/webpack/constants.ts b/_webpack/webpack/constants.ts
index 8a4924a..e858184 100644
--- a/_webpack/webpack/constants.ts
+++ b/_webpack/webpack/constants.ts
@@ -1,4 +1,4 @@
-import path from 'path'
+import path from 'node:path'
const IS_DEV: boolean = String(process.env.NODE_ENV).trim() === 'development'
@@ -30,7 +30,7 @@ const ALIAS: Record