Merge branch 'feature/react-18-stream'

Author: MrWangJustToDo

.env

@@ -1,13 +1,17 @@
+# dev env
 DEV_HOST=localhost
 DEV_PORT=9000
 WDS_PORT=9001
+PUBLIC_DEV_API_HOST=localhost:9000
+# prod env
 PROD_PORT=5000
 PROD_HOST=localhost
-PUBLIC_API_HOST=localhost:9000
+PUBLIC_PROD_API_HOST=localhost:5000
+# feature
 CRYPTO_KEY=ad$cr3efW89ypg
 SSR=true
-UI=chakra
 MIDDLEWARE=false
 ANIMATE_ROUTER=false
+# entry
 SERVER_ENTRY=./src/server/entry.ts
 CLIENT_ENTRY=./src/client/entry.tsx

.swcrc

@@ -0,0 +1,19 @@
+{
+  "jsc": {
+    "parser": {
+      "syntax": "typescript",
+      "tsx": true,
+      "decorators": true
+    },
+    "transform": {
+      "react": {
+        "runtime": "automatic",
+        "pragma": "React.createElement",
+        "pragmaFrag": "React.Fragment",
+        "throwIfNamespace": true,
+        "useBuiltins": true
+      }
+    }
+  },
+  "sourceMaps": true
+}

babel.config.js

@@ -9,7 +9,6 @@ function isWebpack(caller) {
 module.exports = (api) => {
   const web = api.caller(isWebTarget);
   const webpack = api.caller(isWebpack);
-  
 
   api.cache.using(() => process.env.NODE_ENV === "production");
 
@@ -39,7 +38,6 @@ module.exports = (api) => {
   // plugins.push("@babel/plugin-syntax-dynamic-import");
   plugins.push("@babel/plugin-transform-runtime");
   plugins.push("@babel/plugin-proposal-export-default-from");
-  plugins.push("@loadable/babel-plugin");
 
   return {
     presets,

global.d.ts

@@ -36,7 +36,8 @@ declare global {
       PROD_PORT: string;
       SSR: string;
       UI: "antd" | "material" | "chakra";
-      PUBLIC_API_HOST: string;
+      PUBLIC_DEV_API_HOST: string;
+      PUBLIC_PROD_API_HOST: string;
       CRYPTO_KEY: string;
       SERVER_ENTRY: string;
       CLIENT_ENTRY: string;

package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-ssr",
-  "version": "1.3.0",
+  "version": "2.0.0",
   "author": "mrwang",
   "license": "MIT",
   "scripts": {
@@ -15,14 +15,10 @@
     "test": "jest"
   },
   "dependencies": {
-    "@chakra-ui/react": "^1.8.8",
-    "@emotion/react": "^11.9.0",
+    "@chakra-ui/react": "^2.2.1",
+    "@emotion/react": "^11.9.3",
     "@emotion/server": "^11.4.0",
-    "@emotion/styled": "^11.8.1",
-    "@loadable/component": "^5.15.2",
-    "@loadable/server": "^5.15.2",
-    "@mui/material": "^5.8.0",
-    "antd": "^4.20.4",
+    "@emotion/styled": "^11.9.3",
     "axios": "^0.27.2",
     "chalk": "4",
     "compression": "^1.7.4",
@@ -31,100 +27,98 @@
     "dotenv": "^16.0.0",
     "express": "^4.18.1",
     "express-session": "^1.17.3",
-    "framer-motion": "6.3.3",
-    "immer": "^9.0.13",
+    "framer-motion": "^6.3.11",
+    "immer": "^9.0.15",
     "js-cookie": "^3.0.1",
     "lodash": "^4.17.21",
     "multer": "^1.4.4",
     "pretty-error": "^4.0.0",
-    "react": "^17.0.2",
-    "react-dom": "^17.0.2",
-    "react-helmet-async": "1.2.3",
-    "react-intl": "5.24.8",
-    "react-redux": "^8.0.1",
-    "react-router": "6.3.0",
-    "react-router-dom": "6.3.0",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "react-helmet-async": "^1.3.0",
+    "react-intl": "^6.0.4",
+    "react-redux": "^8.0.2",
+    "react-router": "^6.3.0",
+    "react-router-dom": "^6.3.0",
     "redux": "^4.2.0",
     "redux-saga": "^1.1.3",
     "redux-thunk": "^2.4.1",
     "spark-md5": "^3.0.1",
-    "webpack": "^5.72.1",
-    "zustand": "^3.7.1"
+    "webpack": "^5.73.0",
+    "zustand": "^3.7.2"
   },
   "devDependencies": {
     "@babel/cli": "^7.17.10",
-    "@babel/core": "^7.18.0",
+    "@babel/core": "^7.18.5",
     "@babel/plugin-proposal-class-properties": "^7.17.12",
-    "@babel/plugin-proposal-decorators": "^7.17.12",
+    "@babel/plugin-proposal-decorators": "^7.18.2",
     "@babel/plugin-proposal-export-default-from": "^7.17.12",
     "@babel/plugin-proposal-object-rest-spread": "^7.18.0",
     "@babel/plugin-proposal-optional-chaining": "^7.17.12",
     "@babel/plugin-proposal-private-methods": "^7.17.12",
     "@babel/plugin-syntax-dynamic-import": "^7.8.3",
-    "@babel/plugin-transform-modules-commonjs": "^7.18.0",
-    "@babel/plugin-transform-runtime": "^7.18.0",
-    "@babel/preset-env": "^7.18.0",
+    "@babel/plugin-transform-modules-commonjs": "^7.18.2",
+    "@babel/plugin-transform-runtime": "^7.18.5",
+    "@babel/preset-env": "^7.18.2",
     "@babel/preset-react": "^7.17.12",
     "@babel/preset-typescript": "^7.17.12",
-    "@loadable/babel-plugin": "^5.13.2",
-    "@loadable/webpack-plugin": "^5.15.2",
-    "@pmmmwh/react-refresh-webpack-plugin": "^0.5.6",
+    "@pmmmwh/react-refresh-webpack-plugin": "^0.5.7",
+    "@swc/core": "^1.2.203",
     "@types/compression": "^1.7.2",
-    "@types/cookie-parser": "^1.4.2",
+    "@types/cookie-parser": "^1.4.3",
     "@types/cors": "^2.8.12",
     "@types/express": "^4.17.13",
     "@types/express-session": "^1.17.4",
-    "@types/jest": "^27.4.1",
-    "@types/js-cookie": "^3.0.1",
-    "@types/loadable__component": "^5.13.4",
-    "@types/loadable__server": "^5.12.6",
-    "@types/lodash": "^4.14.180",
+    "@types/jest": "^28.1.1",
+    "@types/js-cookie": "^3.0.2",
+    "@types/lodash": "^4.14.182",
     "@types/multer": "^1.4.7",
-    "@types/node": "^17.0.23",
-    "@types/react": "^17.0.42",
-    "@types/react-dom": "^17.0.14",
+    "@types/node": "^18.0.0",
+    "@types/react": "^18.0.12",
+    "@types/react-dom": "^18.0.5",
     "@types/webpack": "^5.28.0",
     "@types/webpack-env": "^1.17.0",
     "@types/webpack-hot-middleware": "^2.25.6",
-    "@typescript-eslint/eslint-plugin": "^5.25.0",
-    "@typescript-eslint/parser": "^5.25.0",
+    "@typescript-eslint/eslint-plugin": "^5.28.0",
+    "@typescript-eslint/parser": "^5.28.0",
     "autoprefixer": "^10.4.7",
-    "babel-jest": "^27.5.1",
+    "babel-jest": "^28.1.1",
     "babel-loader": "^8.2.5",
     "babel-plugin-import": "^1.13.5",
     "clean-webpack-plugin": "^4.0.0",
-    "core-js": "^3.22.5",
+    "core-js": "^3.23.1",
     "cross-env": "^7.0.3",
     "css-loader": "^6.7.1",
-    "css-minimizer-webpack-plugin": "^3.4.1",
-    "eslint": "^8.15.0",
+    "css-minimizer-webpack-plugin": "^4.0.0",
+    "eslint": "^8.17.0",
     "eslint-config-prettier": "^8.5.0",
     "eslint-import-resolver-typescript": "^2.7.1",
     "eslint-plugin-import": "^2.26.0",
     "eslint-plugin-jsx-a11y": "^6.5.1",
     "eslint-plugin-prettier": "^4.0.0",
     "eslint-plugin-react": "^7.30.0",
-    "eslint-plugin-react-hooks": "^4.5.0",
+    "eslint-plugin-react-hooks": "^4.6.0",
     "eslint-webpack-plugin": "^3.1.1",
     "file-loader": "^6.2.0",
     "fork-ts-checker-webpack-plugin": "^7.2.11",
     "identity-obj-proxy": "^3.0.0",
-    "jest": "^27.5.1",
-    "mini-css-extract-plugin": "^2.6.0",
+    "jest": "^28.1.1",
+    "mini-css-extract-plugin": "^2.6.1",
     "nodemon": "^2.0.15",
     "postcss": "^8.4.14",
-    "postcss-loader": "^6.2.1",
-    "prettier": "^2.6.2",
-    "react-refresh": "^0.13.0",
-    "sass": "^1.52.0",
-    "sass-loader": "^12.6.0",
+    "postcss-loader": "^7.0.0",
+    "prettier": "^2.7.0",
+    "react-refresh": "^0.14.0",
+    "sass": "^1.52.3",
+    "sass-loader": "^13.0.0",
     "style-loader": "^3.3.1",
+    "swc-loader": "^0.2.3",
     "thread-loader": "^3.0.4",
-    "typescript": "^4.5.5",
+    "typescript": "^4.7.3",
     "webpack-bundle-analyzer": "^4.5.0",
-    "webpack-cli": "^4.9.2",
+    "webpack-cli": "^4.10.0",
     "webpack-dev-middleware": "^5.3.3",
-    "webpack-dev-server": "^4.9.0",
+    "webpack-dev-server": "^4.9.2",
     "webpack-hot-middleware": "^2.25.1",
     "webpack-manifest-plugin": "^5.0.0",
     "webpack-merge": "^5.8.0",

readme.md

@@ -68,18 +68,10 @@ yarn run start
 
 ## animate router 路由切换动画
 
-## 尝试 file router 开发自动更新 存在其他问题。。。 (middleware 模式 下)
+## file router 开发自动更新 (middleware 模式 下)
 
 ## 全新版本 升级优化修复重构 ^\_^
 
 ## react router 6
 
-## 开箱既支持多种 UI 组件库(CSR / SSR) 通过环境变量 UI 切换（antd,material,chakra-ui,...)
-
 ## jest
-
-## new stream SSR
-
-## delete loadable component dependence
-
-## TODO support swc-loader 

script/dynamic.js

@@ -13,7 +13,9 @@ class DynamicRouter {
   getRouterConfig = (prePath, dirName) => {
     return new Promise((resolve) => {
       const routes = [];
+      let indexPath = 0;
       let dynamicPath = 0;
+      let fallbackPath = 0;
       fs.promises
         .readdir(dirName, { withFileTypes: true })
         .then((files) =>
@@ -32,6 +34,21 @@ class DynamicRouter {
                   } else {
                     throw new Error(`file router dynamicPath duplicate`);
                   }
+                } else if (fileName.toLowerCase() === "index") {
+                  // 默认路由, 同一级只应该有一个
+                  if (indexPath === 0) {
+                    indexPath++;
+                    config.path = `${prePath}`;
+                  } else {
+                    throw new Error("file router default path duplicate");
+                  }
+                } else if (fileName === "404") {
+                  if (prePath === "/") {
+                    fallbackPath++;
+                    config.path = `${prePath}*`;
+                  } else {
+                    throw new Error(`can not add 404 page on the ${prePath}`);
+                  }
                 } else {
                   config.path = `${prePath}${fileName}`;
                 }
@@ -54,6 +71,12 @@ class DynamicRouter {
             // 如果存在动态路由  进行排序放在当前层级最后面
             routes.sort((_, t) => (/^\[(.*)\]$/.test(t.path) ? -1 : 0));
           }
+          if (indexPath === 1) {
+            routes.sort((_, t) => (t.path.endsWith("/") ? 1 : 0));
+          }
+          if (fallbackPath === 1) {
+            routes.sort((_, b) => (b.path === "/*" ? -1 : 0));
+          }
         })
         .then(() => resolve(routes))
         .catch((e) => console.log(chalk.red(`file router error, ${e.toString()}`)));

script/start-prod

@@ -23,7 +23,6 @@ const withPromise = async () => {
   } catch (e) {
     console.error(e.message);
   }
-  console.log("compiler done. before start this app, pls set PUBLIC_API_HOST in the env file!");
 };
 
 withPromise();

src/client/antDesignEntry.tsx

@@ -1,37 +1,30 @@
-import { ColorModeScript, ChakraProvider, cookieStorageManager } from "@chakra-ui/react";
-import { CacheProvider } from "@emotion/react";
+import { ChakraProvider, createCookieStorageManager } from "@chakra-ui/react";
 import { StrictMode } from "react";
 import { HelmetProvider } from "react-helmet-async";
 import { Provider } from "react-redux";
 import { BrowserRouter as Router } from "react-router-dom";
 
 import { App } from "components/App";
-import { createEmotionCache } from "config/createEmotionCache";
 import { theme } from "theme";
 
 import type { createUniversalStore } from "store";
 
-const cache = createEmotionCache();
-
 const Root = ({ store }: { store: ReturnType<typeof createUniversalStore> }) => {
   console.warn("you are using chakra UI component library!");
 
-  const cookieStore = cookieStorageManager(store.getState().server.cookie.data);
+  const cookieStore = createCookieStorageManager("chakra-ui-color-mode", store.getState().server.cookie.data);
 
   return (
     <StrictMode>
-      <CacheProvider value={cache}>
-        <ChakraProvider resetCSS theme={theme} colorModeManager={cookieStore}>
-          <Provider store={store}>
-            <Router>
-              <HelmetProvider>
-                <ColorModeScript initialColorMode={cookieStore.get(theme.config.initialColorMode)} />
-                <App />
-              </HelmetProvider>
-            </Router>
-          </Provider>
-        </ChakraProvider>
-      </CacheProvider>
+      <ChakraProvider resetCSS theme={theme} colorModeManager={cookieStore}>
+        <Provider store={store}>
+          <Router>
+            <HelmetProvider>
+              <App />
+            </HelmetProvider>
+          </Router>
+        </Provider>
+      </ChakraProvider>
     </StrictMode>
   );
 };