fix & doc

Author: MrWangJustToDo

.env

@@ -5,9 +5,9 @@ PROD_PORT=5000
 PROD_HOST=localhost
 PUBLIC_API_HOST=localhost:9000
 CRYPTO_KEY=ad$cr3efW89ypg
-SSR=true
+SSR=false
 UI=chakra
-MIDDLEWARE=false
+MIDDLEWARE=true
 ANIMATE_ROUTER=false
 SERVER_ENTRY=./src/server/entry.ts
 CLIENT_ENTRY=./src/client/entry.tsx

package.json

@@ -7,7 +7,7 @@
     "dev": "./script/start-dev",
     "dev:csr": "cross-env CSR=true ./script/start-dev",
     "build": "./script/start-prod",
-    "lint": "eslint --ext ts,tsx .",
+    "lint": "eslint --cache --ext ts,tsx .",
     "lint:fix": "yarn run lint --fix",
     "build:csr": "cross-env CSR=true ./script/start-prod",
     "start": "cross-env NODE_ENV=production node ./dist/server/app"
@@ -77,7 +77,7 @@
     "@types/loadable__server": "^5.12.3",
     "@types/lodash": "^4.14.178",
     "@types/multer": "^1.4.7",
-    "@types/node": "^17.0.12",
+    "@types/node": "^17.0.13",
     "@types/react": "^17.0.38",
     "@types/react-dom": "^17.0.11",
     "@types/react-redux": "^7.1.22",

readme.md

@@ -54,7 +54,7 @@ yarn run start
 
 ## 静态路由
 
-## 文件路由 自动 query 参数支持 使用 :参数名(:id.tsx) 文件作为的约定 开发环境支持 page 新建删除的实时路由更新(middleware 模式下支持)
+## 文件路由 自动 query 参数支持 使用 :参数名(:id.tsx) 文件作为的约定 开发环境支持 page 新建删除的实时路由更新(middleware 模式下支持, 加载一次后删除会出错)
 
 ## 装饰器
 
@@ -76,4 +76,4 @@ yarn run start
 
 ## 开箱既支持多种 UI 组件库(CSR / SSR) 通过环境变量 UI 切换（antd,material,chakra-ui,...)
 
-## TODO support swc-loader
+## TODO support swc-loader jest

script/startDevServer.js

@@ -11,6 +11,10 @@ const webpackDevServer = require("webpack-dev-server");
 const startDevServer = (clientCompiler, clientConfig) => {
   const devServer = new webpackDevServer(clientConfig.devServer, clientCompiler);
 
+  devServer.staticWatchers.forEach((v) => {
+    console.log(v.getWatched());
+  });
+
   devServer.startCallback(() => console.log(chalk.cyan("🚀 Starting the development node server, please wait....\n")));
 
   return devServer;

src/client/entry.tsx

@@ -2,10 +2,8 @@
 import { loadableReady } from "@loadable/component";
 import { hydrate, render } from "react-dom";
 
-import { allRoutes } from "router/routes";
 import { createUniversalStore } from "store";
 import { log } from "utils/log";
-import { preLoad, preLoadLang } from "utils/preLoad";
 import { safeData } from "utils/safeData";
 
 import type { StoreState } from "types/store";
@@ -52,6 +50,8 @@ if (__UI__ === "material") {
 
 if (__CSR__) {
   log("pure render by client", "warn");
+  const { allRoutes } = require("router/routes");
+  const { preLoad, preLoadLang } = require("utils/preLoad");
   Promise.all([preLoadLang({ store, lang: window.__ENV__.LANG }), preLoad(allRoutes, location.pathname, store)]).then(() =>
     loadableReady(() => render(<Root store={store} />, place))
   );

src/components/chakraComponent.tsx

@@ -12,7 +12,7 @@ export default function ChakraComponent() {
         <option value="option2">Option 2</option>
         <option value="option3">Option 3</option>
       </Select>
-      <Text color="text">color mode!!</Text>
+      <Text color="text">color mode!! css variable</Text>
       <hr />
       <Button onClick={onToggle}>Click Me</Button>
       <Fade in={isOpen}>

src/hooks/useHydrate.ts

@@ -6,8 +6,10 @@ import type { UseHydrate } from "types/hooks";
 
 const useHydrate: UseHydrate = ({ routes, pathName }) => {
   useMemo(() => {
-    hydrateLoad(routes, pathName);
-  // eslint-disable-next-line react-hooks/exhaustive-deps
+    if (!__CSR__) {
+      hydrateLoad(routes, pathName);
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
 };
 

src/theme/index.ts

@@ -7,7 +7,8 @@ export const theme = extendTheme({
       // 根据data-theme进行响应  不需要进行其他js计算
       text: {
         default: "gray.900",
-        _dark: "gray.50",
+        _light: "blue.600",
+        _dark: "red.500",
       },
     },
   },

webpack/devServer.js

@@ -1,4 +1,3 @@
-const path = require("path");
 const WebpackDevServer = require("webpack-dev-server");
 
 /**
@@ -24,13 +23,6 @@ const devServerConfig = ({ publicPath }) => {
     static: {
       publicPath,
     },
-    watchFiles: {
-      // TODO look like not work, need more work for this
-      paths: [path.resolve(process.cwd(), "src"), path.resolve(process.cwd(), "webpack"), path.resolve(process.cwd(), "script")],
-      options: {
-        ignored: ["**/node_modules/**", "**/router/dynamicRoutes.ts", "**/server/**"],
-      },
-    },
     devMiddleware: {
       publicPath,
       writeToDisk: (filepath) => filepath.includes("manifest-loadable.json") || filepath.includes("manifest-dev.json"),