Optional Preact+ fixes

README.md

@@ -33,7 +33,7 @@ Thus, the goal of this project is to **collect in one place all the most common
 
 Core:
 
-- **React** 18+ (**preact** as an option *coming soon*)
+- **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)
 
@@ -75,11 +75,12 @@ Tests:
 
 Other:
 
-- API request caching (powerd by RTK Query)
+- API request caching (powered by RTK Query)
 - Hot reload (including state, style and server code hot reloading)
-- VSCode support with error higlight and on save fixes
+- VSCode support with error highlight and on save fixes
 - Script for fast component creation
 - Optional Service worker and offline status detector
+- Webpack Bundle Analyzer
 
 ## The App
 
@@ -91,7 +92,7 @@ This boilerplate includes a simple application with:
 - One of the components is dynamically loaded
 - API requests
 - Loading spinner
-- Theme swithcer (light and dark)
+- Theme switcher (light and dark)
 - Offline detector
 
 ![The App](src/assets/images/app.gif)
@@ -154,14 +155,26 @@ npm i
 All configuration is available in files with constants:
 
 - `webpack\constants.ts` - contains working directories, SWC option and other related to bundling staff
-- `src\constants` - a directory with app configuration constants files
-- `src\server\constants.ts` - contains server port and render to stream options
+- `src\constants` - a directory with app files with configuration constants
+- `src\server\constants.ts` - contains a server port and render to stream options
+
+### 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 | 263.77 KB | 149.29 KB |
+| Gzipped | 86.14 KB | 50.38 KB |
 
 ## Documentation
 
 *Coming soon.*
 
-One of the goals of this project is to provide some common soultions 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.
+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.
 
 ## Changes
 

jest.config.ts

@@ -0,0 +1,26 @@
+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',
+ '^api(.*)$': '<rootDir>/src/api$1',
+ '^assets(.*)$': '<rootDir>/src/assets$1',
+ '^components(.*)$': '<rootDir>/src/components$1',
+ '^constants/(.*)$': '<rootDir>/src/constants/$1',
+ '^images(.*)$': '<rootDir>/src/assets/images$1',
+ '^hocs(.*)$': '<rootDir>/src/hocs$1',
+ '^hooks(.*)$': '<rootDir>/src/hooks$1',
+ '^pages(.*)$': '<rootDir>/src/pages$1',
+ '^src(.*)$': '<rootDir>/src$1',
+ '^style(.*)$': '<rootDir>/src/style$1',
+ '^store(.*)$': '<rootDir>/src/store$1',
+ '^types(.*)$': '<rootDir>/src/types$1',
+ '^utils(.*)$': '<rootDir>/src/utils$1',
+ },
+};
+
+export default config;

package.json

@@ -1,9 +1,13 @@
 {
  "name": "react-proto",
- "version": "1.1.0",
+ "version": "1.2.0",
  "description": "React TypeScript Boilerplate",
  "author": "Max L Stop&Go",
  "license": "ISC",
+ "sideEffects": [
+ "*.css",
+ "*.scss"
+ ],
  "scripts": {
  "clean": "rimraf dist",
  "start:webpack": "cross-env NODE_ENV=development webpack --mode=development",
@@ -22,6 +26,7 @@
  "@svgr/webpack": "6.3.1",
  "@swc/core": "1.3.1",
  "@testing-library/jest-dom": "5.16.5",
+ "@testing-library/preact": "3.2.2",
  "@testing-library/react": "13.4.0",
  "@testing-library/user-event": "14.4.3",
  "@types/compression": "1.7.2",
@@ -99,6 +104,7 @@
  "cookie-parser": "1.4.6",
  "helmet-csp": "3.4.0",
  "identity-obj-proxy": "3.0.0",
+ "preact": "10.11.0",
  "react": "18.2.0",
  "react-dom": "18.2.0",
  "react-helmet": "6.1.0",

src/components/menu/Menu.tsx

@@ -15,6 +15,7 @@ const Menu: FC<IMenu> = ({ className }): ReactElement => (
  <nav className={cn(styles.menu, className)}>
  <NavLink
  to={ROUTE_CONSTANTS.HOME}
+ end
  className={({ isActive }) =>
  isActive ? cn(styles.item, styles['item-active']) : styles.item
  }

src/components/theme-switcher/themeSwitcher.module.scss

@@ -1,4 +1,4 @@
-.theme-switcher {
+.theme-switcher.theme-switcher {
  position: absolute;
  top: 20px;
  right: 20px;

webpack/constants.ts

@@ -2,6 +2,7 @@ import path from 'path';
 
 const IS_DEV: boolean = String(process.env.NODE_ENV).trim() === 'development';
 
+const IS_PREACT: boolean = false;
 const IS_SWC: boolean = true;
 const DEV_SERVER_PORT: number = 8080;
 
@@ -28,13 +29,24 @@ const ALIAS: Record<string, string> = {
  types: `${SRC_DIR}/types`,
  utils: `${SRC_DIR}/utils`,
  _webpack: path.join(__dirname, '../webpack'),
+
 };
 
+if (IS_PREACT) {
+ Object.assign(ALIAS, {
+ react: 'preact/compat',
+ 'react-dom': 'preact/compat',
+ 'react-dom/test-utils': 'preact/test-utils',
+ '@testing-library/react': '@testing-library/preact',
+ });
+}
+
 export {
  ALIAS,
  DEV_SERVER_PORT,
  DIST_DIR,
  IS_DEV,
+ IS_PREACT,
  IS_SWC,
  SERVER_BUNDLE_NAME,
  SERVER_SRC_DIR,