Migration to Rspack

README.md

@@ -1,20 +1,20 @@
 # React Proto Lite - React TypeScript Boilerplate
 
-![node.js@22](https://img.shields.io/badge/node.js-21-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) ![webpack@5](https://img.shields.io/badge/webpack-5-8dd6f9?style=for-the-badge&logo=webpack) ![[email protected]](https://img.shields.io/badge/sass-1.6-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) ![[email protected]](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)
 
 <img align="right" width="100" src="src/assets/images/logo.png">
 
-**Template React project for fast SPA prototyping.**
+**Template React Project for Fast SPA Prototyping**
 
-This project is lite version of the [React Proto - React TypeScript Boilerplate](https://github.com/StopNGo/react-proto). It contains only everything necessary for Single Page Application projects without any server side parts.
+This project is a lite version of the [React Proto - React TypeScript Boilerplate](https://github.com/StopNGo/react-proto). It contains only the essentials for Single Page Application (SPA) projects, without any server-side components or testing libraries.
 
-For more information, please, check this [README.md](https://github.com/StopNGo/react-proto/blob/main/README.md).
+For more information, please check this [README.md](https://github.com/StopNGo/react-proto/blob/main/README.md).
 
 ## Feedback
 
-I welcome any feedbacks, suggestions and questions related to this project.
+I welcome any feedback, suggestions, or questions related to this project.
 
-You can leave them on [issues](https://github.com/StopNGo/react-proto/issues) or [discussions](https://github.com/StopNGo/react-proto/discussions) pages.
+You can leave them on [issues](https://github.com/StopNGo/react-proto-lite/issues) or [discussions](https://github.com/StopNGo/react-proto-lite/discussions) pages.
 
 ![Thank you!](https://i.giphy.com/media/v1.Y2lkPTc5MGI3NjExeGpxenBoZ2R6M3FrMnp4enpmMmtvMG84YTJvZ2N3bGY0ZGE1c2ViOCZlcD12MV9pbnRlcm5hbF9naWZfYnlfaWQmY3Q9Zw/35pTQFiy14OeA/giphy.gif)
 

_webpack/README.md

@@ -0,0 +1,17 @@
+## Webpack Version
+
+To use the webpack version of the project:
+
+1. Copy the contents of this folder (except `README.md`) to the root of the project.
+
+2. Delete the `rspack.config.ts` file.
+
+3. Delete the `rspack` and `_webpack` folders.
+
+4. If you have a previous installation, clean the `node_modules` folder.
+
+5. Then install the packages:
+
+   `npm i`
+
+That's it!

_webpack/package.json

@@ -0,0 +1,79 @@
+{
+  "name": "react-proto-lite",
+  "version": "1.1.0",
+  "description": "React TypeScript Boilerplate - Lite",
+  "author": "Max L Stop&Go",
+  "license": "ISC",
+  "sideEffects": [
+    "*.css",
+    "*.scss"
+  ],
+  "scripts": {
+    "clean": "rimraf dist",
+    "start": "npm run clean  && cross-env NODE_ENV=development webpack serve --mode development --open",
+    "build": "npm run clean  && cross-env NODE_ENV=production webpack --mode production",
+    "build: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}",
+    "add-comp": "node scripts/add-comp.js"
+  },
+  "devDependencies": {
+    "@pmmmwh/react-refresh-webpack-plugin": "0.5.15",
+    "@prefresh/webpack": "4.0.1",
+    "@svgr/webpack": "8.1.0",
+    "@swc/core": "1.7.26",
+    "@types/node": "22.5.4",
+    "@types/prefresh__webpack": "3.3.3",
+    "@types/react": "18.3.5",
+    "@types/react-dom": "18.3.0",
+    "@types/react-router-dom": "5.3.3",
+    "@types/webpack-bundle-analyzer": "4.7.0",
+    "@types/webpack-env": "1.18.5",
+    "@types/webpack-hot-middleware": "2.25.9",
+    "@types/webpack-node-externals": "3.0.4",
+    "classnames": "2.5.1",
+    "copy-webpack-plugin": "12.0.2",
+    "cross-env": "7.0.3",
+    "css-hot-loader": "1.4.4",
+    "css-loader": "7.1.2",
+    "csso-webpack-plugin": "2.0.0-beta.3",
+    "fork-ts-checker-webpack-plugin": "9.0.2",
+    "html-webpack-plugin": "5.6.0",
+    "mini-css-extract-plugin": "2.9.1",
+    "null-loader": "4.0.1",
+    "postcss": "8.4.45",
+    "postcss-scss": "4.0.9",
+    "prettier": "3.3.3",
+    "react-refresh": "0.14.2",
+    "rimraf": "6.0.1",
+    "sass": "1.78.0",
+    "sass-loader": "16.0.1",
+    "stylelint": "16.9.0",
+    "stylelint-config-clean-order": "6.1.0",
+    "stylelint-config-standard-scss": "13.1.0",
+    "swc-loader": "0.2.6",
+    "ts-loader": "9.5.1",
+    "ts-node": "10.9.2",
+    "ts-standard": "12.0.2",
+    "typescript": "5.6.2",
+    "typescript-plugin-css-modules": "5.1.0",
+    "webpack": "5.94.0",
+    "webpack-bundle-analyzer": "4.10.2",
+    "webpack-cli": "5.1.4",
+    "webpack-dev-middleware": "7.4.2",
+    "webpack-dev-server": "5.1.0",
+    "webpack-hot-middleware": "2.26.1",
+    "webpack-node-externals": "3.0.0"
+  },
+  "dependencies": {
+    "@reduxjs/toolkit": "2.2.7",
+    "preact": "10.23.2",
+    "react": "18.3.1",
+    "react-dom": "18.3.1",
+    "react-error-boundary": "4.0.13",
+    "react-helmet-async": "2.0.5",
+    "react-redux": "9.1.2",
+    "react-router-dom": "6.26.2"
+  }
+}

_webpack/tsconfig.json

@@ -0,0 +1,41 @@
+{
+  "compilerOptions": {
+    "lib": ["dom", "es2022"],
+    "types": ["node", "webpack-env"],
+    "module": "esnext",
+    "target": "es2022",
+    "moduleResolution": "node",
+    "jsx": "react-jsx",
+    "importHelpers": true,
+    "resolveJsonModule": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "esModuleInterop": true,
+    "strict": true,
+    "allowSyntheticDefaultImports": true,
+    "experimentalDecorators": true,
+    "strictPropertyInitialization": false,
+    "emitDecoratorMetadata": true,
+    "skipLibCheck": true,
+    "declaration": false,
+    "sourceMap": true,
+    "baseUrl": ".",
+    "removeComments": true,
+    "forceConsistentCasingInFileNames": true,
+    "outDir": "./dist",
+    "paths": {
+      "*": ["./src/*", "./*"],
+      "_webpack/*": ["webpack/*"]
+    },
+    "plugins": [
+      {
+        "name": "typescript-plugin-css-modules"
+      }
+    ]
+  },
+  "ts-node": {
+    "compilerOptions": { "module": "commonjs" }
+  },
+  "include": ["src", "webpack", "webpack.config.ts"],
+  "exclude": ["node_modules", "**/*.js"],
+}

webpack/client.config.ts → _webpack/webpack/client.config.ts

@@ -5,14 +5,15 @@ import {
 } from 'webpack'
 import MiniCssExtractPlugin from 'mini-css-extract-plugin'
 import ReactRefreshWebpackPlugin from '@pmmmwh/react-refresh-webpack-plugin'
+import PreactRefreshPlugin from '@prefresh/webpack'
 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 'webpack-dev-server'
 
-import { ALIAS, DEV_SERVER_PORT, DIST_DIR, IS_DEV, IS_LAZY_COMPILATION, SRC_DIR } from './constants'
+import { ALIAS, DEV_SERVER_PORT, DIST_DIR, IS_DEV, IS_LAZY_COMPILATION, SRC_DIR, IS_PREACT } from './constants'
 import * as Loaders from './loaders'
 
 const withReport = Boolean(process.env.npm_config_withReport)
@@ -30,7 +31,10 @@ const plugins: WebpackPluginInstance[] = [
     filename: IS_DEV ? '[name].css' : '[name].[contenthash].css'
   }),
   ...(IS_DEV
-    ? [new HotModuleReplacementPlugin(), new ReactRefreshWebpackPlugin()]
+    ? [
+      new HotModuleReplacementPlugin(),
+      IS_PREACT ? new PreactRefreshPlugin() : new ReactRefreshWebpackPlugin()
+      ]
     : [
         new CssoWebpackPlugin(),
         new BundleAnalyzerPlugin({

webpack/constants.ts → _webpack/webpack/constants.ts

@@ -33,9 +33,7 @@ const ALIAS: Record<string, string> = {
 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'
+    'react-dom': 'preact/compat'
   })
 }