chore: update examples (#838)

* chore: update examples

* chore: format

* docs: update README [skip ci]

Author: pmmmwh

README.md

@@ -100,7 +100,9 @@ pnpm add -D type-fest
 
 > **:memo: Note**:
 >
-> `[email protected]` only supports Node.js v12.20 or above.
+> `[email protected]` only supports Node.js v16 or above,
+> `[email protected]` only supports Node.js v14.16 or above,
+> and `[email protected]` only supports Node.js v12.20 or above.
 > If you're using an older version of Node.js, please install `[email protected]`.
 
 </details>
@@ -247,8 +249,8 @@ module.exports = {
 };
 ```
 
-> `ts-loader` won't work with HMR unless `transpileOnly` is set to `true`.
-> You should use `ForkTsCheckerWebpackPlugin` if you need typechecking during development.
+> It is recommended to run `ts-loader` with `transpileOnly` is set to `true`.
+> You can use `ForkTsCheckerWebpackPlugin` as an alternative if you need typechecking during development.
 
 </details>
 
@@ -317,11 +319,11 @@ but you can set the [`overlay.sockIntegration`](docs/API.md#sockintegration) opt
 
 The supported versions are as follows:
 
-| Dependency               | Version           |
-| ------------------------ | ----------------- |
-| `webpack-dev-server`     | `3.6.0`+ or `4.x` |
-| `webpack-hot-middleware` | `2.x`             |
-| `webpack-plugin-serve`   | `0.x` or `1.x`    |
+| Dependency               | Version                    |
+| ------------------------ | -------------------------- |
+| `webpack-dev-server`     | `3.6.0`+ or `4.x` or `5.x` |
+| `webpack-hot-middleware` | `2.x`                      |
+| `webpack-plugin-serve`   | `0.x` or `1.x`             |
 
 ## API
 

examples/flow-with-babel/package.json

@@ -7,19 +7,19 @@
     "react-dom": "^18.0.0"
   },
   "devDependencies": {
-    "@babel/core": "^7.17.8",
-    "@babel/preset-env": "^7.16.11",
-    "@babel/preset-flow": "^7.16.7",
-    "@babel/preset-react": "^7.16.7",
-    "@pmmmwh/react-refresh-webpack-plugin": "^0.5.5",
-    "babel-loader": "^8.2.4",
+    "@babel/core": "^7.24.4",
+    "@babel/preset-env": "^7.24.4",
+    "@babel/preset-flow": "^7.24.1",
+    "@babel/preset-react": "^7.24.1",
+    "@pmmmwh/react-refresh-webpack-plugin": "^0.5.13",
+    "babel-loader": "^9.1.3",
     "cross-env": "^7.0.3",
-    "flow-bin": "^0.192.0",
-    "html-webpack-plugin": "^5.5.0",
+    "flow-bin": "^0.235.1",
+    "html-webpack-plugin": "^5.6.0",
     "react-refresh": "^0.14.0",
-    "webpack": "^5.76.0",
-    "webpack-cli": "^4.9.2",
-    "webpack-dev-server": "^4.7.4"
+    "webpack": "^5.91.0",
+    "webpack-cli": "^5.1.4",
+    "webpack-dev-server": "^5.0.4"
   },
   "scripts": {
     "start": "webpack serve --hot",

examples/flow-with-babel/yarn.lock

@@ -7,22 +7,22 @@
     "react-dom": "^18.0.0"
   },
   "devDependencies": {
-    "@babel/core": "^7.17.8",
-    "@babel/preset-env": "^7.16.11",
-    "@babel/preset-react": "^7.16.7",
-    "@babel/preset-typescript": "^7.16.7",
-    "@pmmmwh/react-refresh-webpack-plugin": "^0.5.5",
-    "@types/react": "^18.0.25",
-    "@types/react-dom": "^18.0.8",
-    "babel-loader": "^8.2.4",
+    "@babel/core": "^7.24.4",
+    "@babel/preset-env": "^7.24.4",
+    "@babel/preset-react": "^7.24.1",
+    "@babel/preset-typescript": "^7.24.1",
+    "@pmmmwh/react-refresh-webpack-plugin": "^0.5.13",
+    "@types/react": "^18.3.1",
+    "@types/react-dom": "^18.3.0",
+    "babel-loader": "^9.1.3",
     "cross-env": "^7.0.3",
-    "fork-ts-checker-webpack-plugin": "^7.2.2",
-    "html-webpack-plugin": "^5.5.0",
+    "fork-ts-checker-webpack-plugin": "^9.0.2",
+    "html-webpack-plugin": "^5.6.0",
     "react-refresh": "^0.14.0",
-    "typescript": "~4.8.4",
-    "webpack": "^5.76.0",
-    "webpack-cli": "^4.9.2",
-    "webpack-dev-server": "^4.7.4"
+    "typescript": "~5.4.5",
+    "webpack": "^5.91.0",
+    "webpack-cli": "^5.1.4",
+    "webpack-dev-server": "^5.0.4"
   },
   "scripts": {
     "start": "webpack serve --hot",

examples/typescript-with-babel/package.json

@@ -7,20 +7,20 @@
     "react-dom": "^18.0.0"
   },
   "devDependencies": {
-    "@pmmmwh/react-refresh-webpack-plugin": "^0.5.5",
-    "@swc/core": "^1.2.163",
-    "@types/react": "^18.0.25",
-    "@types/react-dom": "^18.0.8",
-    "core-js": "^3.21.1",
+    "@pmmmwh/react-refresh-webpack-plugin": "^0.5.13",
+    "@swc/core": "^1.4.17",
+    "@types/react": "^18.3.1",
+    "@types/react-dom": "^18.3.0",
+    "core-js": "^3.37.0",
     "cross-env": "^7.0.3",
-    "fork-ts-checker-webpack-plugin": "^7.2.2",
-    "html-webpack-plugin": "^5.5.0",
+    "fork-ts-checker-webpack-plugin": "^9.0.2",
+    "html-webpack-plugin": "^5.6.0",
     "react-refresh": "^0.14.0",
-    "swc-loader": "^0.2.3",
-    "typescript": "~4.8.4",
-    "webpack": "^5.76.0",
-    "webpack-cli": "^4.9.2",
-    "webpack-dev-server": "^4.7.4"
+    "swc-loader": "^0.2.6",
+    "typescript": "~5.4.5",
+    "webpack": "^5.91.0",
+    "webpack-cli": "^5.1.4",
+    "webpack-dev-server": "^5.0.4"
   },
   "scripts": {
     "start": "webpack serve --hot",