i18n + Standard TS

.stylelintrc.json

@@ -1,82 +1,16 @@
 {
  "extends": [
+ "stylelint-config-standard-scss",
  "stylelint-config-idiomatic-order"
  ],
  "plugins": [
- "stylelint-scss"
+ "stylelint-use-nesting"
  ],
  "rules": {
- "string-quotes": "single",
- "declaration-no-important": true,
- "declaration-block-single-line-max-declarations": 1,
- "block-closing-brace-empty-line-before": "never",
- "block-closing-brace-newline-after": "always",
- "block-closing-brace-newline-before": "always",
- "block-opening-brace-newline-after": "always",
- "block-opening-brace-space-before": "always",
- "color-hex-case": "lower",
- "color-hex-length": "short",
- "declaration-empty-line-before": "never",
- "declaration-colon-space-before": "never",
- "declaration-colon-space-after": "always",
- "declaration-block-semicolon-newline-after": "always",
- "media-feature-colon-space-before": "never",
- "media-feature-colon-space-after": "always",
- "media-feature-range-operator-space-after": "always",
- "media-feature-range-operator-space-before": "always",
- "rule-empty-line-before": [
- "always",
- {
- "ignore": [
- "after-comment",
- "first-nested",
- "inside-block"
- ]
- }
- ],
- "at-rule-empty-line-before": [
- "always",
- {
- "except": [
- "first-nested"
- ]
- }
- ],
- "at-rule-name-case": "lower",
- "at-rule-name-space-after": "always",
- "at-rule-semicolon-newline-after": "always",
- "at-rule-semicolon-space-before": "never",
- "at-rule-no-unknown": null,
- "scss/at-rule-no-unknown": true,
- "max-empty-lines": 1,
- "value-list-comma-space-before": "never",
- "value-list-comma-space-after": "always",
- "selector-combinator-space-after": "always",
- "selector-combinator-space-before": "always",
- "selector-descendant-combinator-no-non-space": true,
- "selector-pseudo-class-case": "lower",
- "selector-pseudo-element-case": "lower",
- "selector-type-case": "lower",
- "selector-list-comma-newline-after": "always",
- "selector-list-comma-space-before": "never",
- "length-zero-no-unit": true,
- "property-case": "lower",
- "unit-case": "lower",
- "value-list-max-empty-lines": 0,
- "indentation": 2,
- "no-eol-whitespace": true,
- "no-missing-end-of-source-newline": true,
- "no-empty-first-line": true
+ "max-nesting-depth": 3,
+ "declaration-property-value-no-unknown": true,
+ "scss/selector-no-redundant-nesting-selector": true,
+ "csstools/use-nesting": "always"
  },
- "overrides": [
- {
- "files": [
- "**/*.scss"
- ],
- "customSyntax": "postcss-scss"
- }
- ],
- "ignoreFiles": [
- "dist/*.css"
- ]
+ "ignoreFiles": ["dist/**/*.*", "coverage/**/*.*"]
 }

.swcrc

@@ -1,6 +1,6 @@
 {
  "jsc": {
- "target": "es2021",
+ "target": "es2022",
  "parser": {
  "syntax": "typescript",
  "tsx": true

README.md

@@ -1,10 +1,10 @@
 # React Proto - React TypeScript Boilerplate
 
-![node.js@16](https://img.shields.io/badge/node.js-16-339933?style=for-the-badge&logo=nodedotjs) ![typescript@4](https://img.shields.io/badge/typescript-4-3178C6?style=for-the-badge&logo=typescript) ![reactjs@18](https://img.shields.io/badge/Reactjs-18-61DAFB?style=for-the-badge&logo=react) ![webpack@5](https://img.shields.io/badge/webpack-5-8dd6f9?style=for-the-badge&logo=webpack) ![html@5](https://img.shields.io/badge/html-5-E34F26?style=for-the-badge&logo=html5) ![[email protected]](https://img.shields.io/badge/sass-1.5-CC6699?style=for-the-badge&logo=sass)
+![node.js@16](https://img.shields.io/badge/node.js-16-339933?style=for-the-badge&logo=nodedotjs) ![typescript@4](https://img.shields.io/badge/typescript-4-3178C6?style=for-the-badge&logo=typescript) ![reactjs@18](https://img.shields.io/badge/Reactjs-18-61DAFB?style=for-the-badge&logo=react) ![webpack@5](https://img.shields.io/badge/webpack-5-8dd6f9?style=for-the-badge&logo=webpack) ![sass@1.5](https://img.shields.io/badge/sass-1.5-CC6699?style=for-the-badge&logo=sass) ![ts-standard](https://img.shields.io/badge/standard-ts-F3DF49?style=for-the-badge&logo=standardjs)
 
 <img align="right" width="100" src="src/assets/images/logo.png">
 
-**Template React project with full TypeScrip and SSR support.**
+**Template React project with full TypeScript and SSR support.**
 
 This project is a compilation of different approaches in React development that allows not only to start a new project quickly, but to learn how it works under the hood.
 
@@ -34,8 +34,8 @@ Thus, the goal of this project is to **collect in one place all the most common
 Core:
 
 - **React** 18+ (**Preact** 10+ as an option, see [comparison](#react-vs-preact) below)
-- **webpack** 5+ (with optional **SWC** support and SSR or static build)
-- **TypeScript** (with strict rules, including  webpack configuration)
+- **webpack** 5+ (with optional **SWC** support and SSR or static build; [why not Vite?](#why-not-vite))
+- **TypeScript** (with strict rules, including webpack configuration)
 
 SSR:
 
@@ -57,14 +57,19 @@ API:
 
 - **RTK Query**
 
+i18n (Internationalization):
+
+- **Lightweight custom solution** based on Redux (with async loading and SSR support; [why not any common i18n package?](#why-not-any-common-i18n-package))
+
 Styles:
 
 - **(S)CSS modules** (with TypeScript support)
 
 Linters:
 
-- **ESLint**
+- **TS Standard** (TypeScript Style Guide, with linter and automatic code fixer based on [StandardJS](https://standardjs.com/))
 - **Stylelint** (including rules order)
+- **Prettier**
 
 Tests:
 
@@ -127,19 +132,19 @@ Live preview:
 
 1. Build the project (production bundle will be in the `"dist"` folder):
 
-  `npm run build`
+ `npm run build`
 
-  or with Webpack Bundle Analyzer report server:
+ or with Webpack Bundle Analyzer report server:
 
-  `npm run build:report`
+ `npm run build:report`
 
 2. Run a server:
 
-  `npm run run`
+ `npm run run`
 
 3. You can test the server locally:
 
-  `http:https://localhost:3000/`
+ `http:https://localhost:3000/`
 
 ### Static development mode with hot reload
 
@@ -177,21 +182,30 @@ All configuration is available in files with constants:
 - `src\constants` - a directory with app files with configuration constants
 - `src\server\constants.ts` - contains a server port and render to stream options
 
+### Why not Vite
+
+Vite is an excellent new generation bundler that could speed up your development process. However, you can face with some lack of flexibility and compatibility especially in big projects that need a lot of specific configurations. Also, webpack has many good plugins that are not compatible with Vite.
+
+As for the speed: you can check this article - [Storybook Performance: Vite vs Webpack](https://storybook.js.org/blog/storybook-performance-from-webpack-to-vite/). As you can see - Webpack could still be fast enough. React Proto has such configurations. In `webpack\constants.ts` you can switch on SWC and Lazy Compilation.
+
+Also, I'm looking forward to [Turbopack](https://turbo.build/pack) - the Rust-powered successor to Webpack. Now it is available only in Next.js, but I hope the future migration from the Wepback will be smooth because the principle of configuration should be the same.
+
 ### React vs Preact
 
 In `webpack\constants.ts` you can choose to use [Preact](https://preactjs.com/) library instead React itself (`IS_PREACT` boolean constant).
 
-
 Preact is a fast and compact React-compatible Virtual DOM library. But because its community is much smaller, you can face with some incompatibility with React API and functionality, especially with new ones. Also some tests show some frame drops during moving a lot of elements. Below you can see a bundle size comparison of no-SSR version of the sample application of this repository (according to Webpack Bundle Analyzer):
 
-| | React | Preact |
-|----|----|----|
-|  Parsed |  274.25 KB  | 159.7 KB  |
-|  Gzipped |  89.58 KB |  53.88 KB  |
+|  | React  | Preact |
+| ------- | --------- | -------- |
+| Parsed | 278.75 KB | 164.82 KB |
+| Gzipped | 91.11 KB | 55.59 KB |
 
+### Why not any common i18n package?
+You can freely integrate any React compatible i18n solution. But if React Proto already uses Redux and RTK, why just not use them for this task? Therefore, I have created a custom internationalization solution with a minimum additional code. It supports translations dynamic loading, server side rendering based on user acceptable languages, strict typing, etc. At the moment it just does not support string processing like pluralization, but it could easily be added later.
 ## Documentation
 
-*Coming soon.*
+_Coming soon._
 
 One of the goals of this project is to provide some common solutions in React development and to clarify why they were chosen and how they work. So, such information will be present in this documentation in an orderly fashion.
 

jest.config.ts

@@ -1,16 +1,18 @@
-import type { Config } from 'jest';
+import type { Config } from 'jest'
 
 const config: Config = {
  verbose: true,
  preset: 'ts-jest',
  testEnvironment: 'jsdom',
  moduleNameMapper: {
  '\\.(css|less|scss|sss|styl)$': 'identity-obj-proxy',
- '\\.(jpg|ico|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)(\\?.+)?$': 'identity-obj-proxy',
+ '\\.(jpg|ico|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)(\\?.+)?$':
+ 'identity-obj-proxy',
  '^api(.*)$': '<rootDir>/src/api$1',
  '^assets(.*)$': '<rootDir>/src/assets$1',
  '^components(.*)$': '<rootDir>/src/components$1',
  '^constants/(.*)$': '<rootDir>/src/constants/$1',
+ '^i18n(.*)$': '<rootDir>/src/i18n$1',
  '^images(.*)$': '<rootDir>/src/assets/images$1',
  '^hocs(.*)$': '<rootDir>/src/hocs$1',
  '^hooks(.*)$': '<rootDir>/src/hooks$1',
@@ -19,8 +21,8 @@ const config: Config = {
  '^style(.*)$': '<rootDir>/src/style$1',
  '^store(.*)$': '<rootDir>/src/store$1',
  '^types(.*)$': '<rootDir>/src/types$1',
- '^utils(.*)$': '<rootDir>/src/utils$1',
- },
-};
+ '^utils(.*)$': '<rootDir>/src/utils$1'
+ }
+}
 
-export default config;
+export default config