Skip to content

Commit 7cbc57b

Browse files
MrWangJustToDoMrWangJustToDo
committed
fix inject props for fast refresh
1 parent 64f5ac1 commit 7cbc57b

31 files changed

+1652
-1215
lines changed

‎package.json

+44-45
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "react-ssr",
3-
"version": "1.2.9",
3+
"version": "1.3.0",
44
"author": "mrwang",
55
"license": "MIT",
66
"scripts": {
@@ -15,60 +15,60 @@
1515
"test": "jest"
1616
},
1717
"dependencies": {
18-
"@chakra-ui/react": "^1.8.7",
18+
"@chakra-ui/react": "^1.8.8",
1919
"@emotion/react": "^11.9.0",
2020
"@emotion/server": "^11.4.0",
2121
"@emotion/styled": "^11.8.1",
2222
"@loadable/component": "^5.15.2",
2323
"@loadable/server": "^5.15.2",
24-
"@mui/material": "^5.6.2",
25-
"antd": "^4.19.5",
26-
"axios": "^0.26.1",
24+
"@mui/material": "^5.8.0",
25+
"antd": "^4.20.4",
26+
"axios": "^0.27.2",
2727
"chalk": "4",
2828
"compression": "^1.7.4",
2929
"cookie-parser": "^1.4.6",
3030
"cors": "^2.8.5",
3131
"dotenv": "^16.0.0",
32-
"express": "^4.17.3",
33-
"express-session": "^1.17.2",
34-
"framer-motion": "6.2.9",
35-
"immer": "^9.0.12",
32+
"express": "^4.18.1",
33+
"express-session": "^1.17.3",
34+
"framer-motion": "6.3.3",
35+
"immer": "^9.0.13",
3636
"js-cookie": "^3.0.1",
3737
"lodash": "^4.17.21",
3838
"multer": "^1.4.4",
3939
"pretty-error": "^4.0.0",
4040
"react": "^17.0.2",
4141
"react-dom": "^17.0.2",
42-
"react-helmet-async": "^1.2.3",
43-
"react-intl": "^5.24.8",
44-
"react-redux": "^7.2.8",
42+
"react-helmet-async": "1.2.3",
43+
"react-intl": "5.24.8",
44+
"react-redux": "^8.0.1",
4545
"react-router": "6.3.0",
4646
"react-router-dom": "6.3.0",
47-
"redux": "^4.1.2",
47+
"redux": "^4.2.0",
4848
"redux-saga": "^1.1.3",
4949
"redux-thunk": "^2.4.1",
5050
"spark-md5": "^3.0.1",
51-
"webpack": "^5.72.0",
51+
"webpack": "^5.72.1",
5252
"zustand": "^3.7.1"
5353
},
5454
"devDependencies": {
55-
"@babel/cli": "^7.17.6",
56-
"@babel/core": "^7.17.9",
57-
"@babel/plugin-proposal-class-properties": "^7.16.7",
58-
"@babel/plugin-proposal-decorators": "^7.17.9",
59-
"@babel/plugin-proposal-export-default-from": "^7.16.7",
60-
"@babel/plugin-proposal-object-rest-spread": "^7.17.3",
61-
"@babel/plugin-proposal-optional-chaining": "^7.16.7",
62-
"@babel/plugin-proposal-private-methods": "^7.16.11",
55+
"@babel/cli": "^7.17.10",
56+
"@babel/core": "^7.18.0",
57+
"@babel/plugin-proposal-class-properties": "^7.17.12",
58+
"@babel/plugin-proposal-decorators": "^7.17.12",
59+
"@babel/plugin-proposal-export-default-from": "^7.17.12",
60+
"@babel/plugin-proposal-object-rest-spread": "^7.18.0",
61+
"@babel/plugin-proposal-optional-chaining": "^7.17.12",
62+
"@babel/plugin-proposal-private-methods": "^7.17.12",
6363
"@babel/plugin-syntax-dynamic-import": "^7.8.3",
64-
"@babel/plugin-transform-modules-commonjs": "^7.17.9",
65-
"@babel/plugin-transform-runtime": "^7.17.0",
66-
"@babel/preset-env": "^7.16.11",
67-
"@babel/preset-react": "^7.16.7",
68-
"@babel/preset-typescript": "^7.16.7",
64+
"@babel/plugin-transform-modules-commonjs": "^7.18.0",
65+
"@babel/plugin-transform-runtime": "^7.18.0",
66+
"@babel/preset-env": "^7.18.0",
67+
"@babel/preset-react": "^7.17.12",
68+
"@babel/preset-typescript": "^7.17.12",
6969
"@loadable/babel-plugin": "^5.13.2",
7070
"@loadable/webpack-plugin": "^5.15.2",
71-
"@pmmmwh/react-refresh-webpack-plugin": "^0.5.5",
71+
"@pmmmwh/react-refresh-webpack-plugin": "^0.5.6",
7272
"@types/compression": "^1.7.2",
7373
"@types/cookie-parser": "^1.4.2",
7474
"@types/cors": "^2.8.12",
@@ -83,50 +83,49 @@
8383
"@types/node": "^17.0.23",
8484
"@types/react": "^17.0.42",
8585
"@types/react-dom": "^17.0.14",
86-
"@types/react-redux": "^7.1.23",
8786
"@types/webpack": "^5.28.0",
88-
"@types/webpack-env": "^1.16.3",
87+
"@types/webpack-env": "^1.17.0",
8988
"@types/webpack-hot-middleware": "^2.25.6",
90-
"@typescript-eslint/eslint-plugin": "^5.18.0",
91-
"@typescript-eslint/parser": "^5.18.0",
92-
"autoprefixer": "^10.4.4",
89+
"@typescript-eslint/eslint-plugin": "^5.25.0",
90+
"@typescript-eslint/parser": "^5.25.0",
91+
"autoprefixer": "^10.4.7",
9392
"babel-jest": "^27.5.1",
94-
"babel-loader": "^8.2.4",
95-
"babel-plugin-import": "^1.13.3",
93+
"babel-loader": "^8.2.5",
94+
"babel-plugin-import": "^1.13.5",
9695
"clean-webpack-plugin": "^4.0.0",
97-
"core-js": "^3.21.1",
96+
"core-js": "^3.22.5",
9897
"cross-env": "^7.0.3",
9998
"css-loader": "^6.7.1",
10099
"css-minimizer-webpack-plugin": "^3.4.1",
101-
"eslint": "^8.11.0",
100+
"eslint": "^8.15.0",
102101
"eslint-config-prettier": "^8.5.0",
103102
"eslint-import-resolver-typescript": "^2.7.1",
104103
"eslint-plugin-import": "^2.26.0",
105104
"eslint-plugin-jsx-a11y": "^6.5.1",
106105
"eslint-plugin-prettier": "^4.0.0",
107-
"eslint-plugin-react": "^7.29.4",
108-
"eslint-plugin-react-hooks": "^4.4.0",
106+
"eslint-plugin-react": "^7.30.0",
107+
"eslint-plugin-react-hooks": "^4.5.0",
109108
"eslint-webpack-plugin": "^3.1.1",
110109
"file-loader": "^6.2.0",
111-
"fork-ts-checker-webpack-plugin": "^7.2.3",
110+
"fork-ts-checker-webpack-plugin": "^7.2.11",
112111
"identity-obj-proxy": "^3.0.0",
113112
"jest": "^27.5.1",
114113
"mini-css-extract-plugin": "^2.6.0",
115114
"node-sass": "^7.0.1",
116115
"nodemon": "^2.0.15",
117-
"postcss": "^8.4.12",
116+
"postcss": "^8.4.14",
118117
"postcss-loader": "^6.2.1",
119118
"prettier": "^2.6.2",
120-
"react-refresh": "^0.12.0",
121-
"sass": "^1.50.0",
119+
"react-refresh": "^0.13.0",
120+
"sass": "^1.52.0",
122121
"sass-loader": "^12.6.0",
123122
"style-loader": "^3.3.1",
124123
"thread-loader": "^3.0.4",
125124
"typescript": "^4.5.5",
126125
"webpack-bundle-analyzer": "^4.5.0",
127126
"webpack-cli": "^4.9.2",
128-
"webpack-dev-middleware": "^5.3.1",
129-
"webpack-dev-server": "^4.8.1",
127+
"webpack-dev-middleware": "^5.3.3",
128+
"webpack-dev-server": "^4.9.0",
130129
"webpack-hot-middleware": "^2.25.1",
131130
"webpack-manifest-plugin": "^5.0.0",
132131
"webpack-merge": "^5.8.0",

‎src/client/entry.tsx

-8
Original file line numberDiff line numberDiff line change
@@ -12,26 +12,18 @@ const place = document.querySelector("#__content__");
1212

1313
const preLoadEnvElement = document.querySelector("script#__preload_env__");
1414

15-
const preLoadPropsElement = document.querySelector("script#__preload_props__");
16-
1715
const preLoadStateElement = document.querySelector("script#__preload_state__");
1816

1917
const store = createUniversalStore({ initialState: JSON.parse(preLoadStateElement?.innerHTML || "{}") as StoreState });
2018

2119
window.__ENV__ = JSON.parse(preLoadEnvElement?.innerHTML || "{}");
2220

23-
window.__INITIAL_PROPS_SSR__ = JSON.parse(preLoadPropsElement?.innerHTML || "{}");
24-
2521
window.__PRELOAD_STORE_STATE__ = JSON.parse(preLoadStateElement?.innerHTML || "{}");
2622

2723
safeData(window.__ENV__);
2824

2925
safeData(window as unknown as Record<string, unknown>, "__ENV__");
3026

31-
safeData(window.__INITIAL_PROPS_SSR__);
32-
33-
safeData(window as unknown as Record<string, unknown>, "__INITIAL_PROPS_SSR__");
34-
3527
safeData(window.__PRELOAD_STORE_STATE__);
3628

3729
safeData(window as unknown as Record<string, unknown>, "__PRELOAD_STORE_STATE__");

‎src/components/LoadingBar/LoadingBar.tsx

+11-12
Original file line numberDiff line numberDiff line change
@@ -6,19 +6,18 @@ import { useMounted } from "hooks/useMounted";
66

77
import style from "./index.module.scss";
88

9-
109
let div: HTMLDivElement | undefined;
1110

12-
export const Bar = memo(
13-
forwardRef<HTMLDivElement>(function Bar(_, ref) {
14-
useEffectOnce(() => {
15-
div = document.createElement("div");
16-
div.id = "__loading_bar__";
17-
document.body.prepend(div);
18-
});
11+
const _Bar = forwardRef<HTMLDivElement>(function Bar(_, ref) {
12+
useEffectOnce(() => {
13+
div = document.createElement("div");
14+
div.id = "__loading_bar__";
15+
document.body.prepend(div);
16+
});
17+
18+
const mounted = useMounted();
1919

20-
const mounted = useMounted();
20+
return mounted ? createPortal(<div ref={ref} className={style.loadingBar} style={{ height: `0px`, transform: `scale(0, 1)` }} />, div as Element) : null;
21+
});
2122

22-
return mounted ? createPortal(<div ref={ref} className={style.loadingBar} style={{ height: `0px`, transform: `scale(0, 1)` }} />, div as Element) : null;
23-
})
24-
);
23+
export const Bar = memo(_Bar);

‎src/components/RenderMatch.tsx

+3-3
Original file line numberDiff line numberDiff line change
@@ -8,12 +8,12 @@ import { getIsAnimateRouter } from "utils/env";
88
import { useLoadedLocation } from "./WrapperRoute";
99

1010
export const RenderMatch = () => {
11-
const location = useLoadedLocation();
12-
const all = useRoutes(allRoutes, location);
11+
const loaded = useLoadedLocation();
12+
const all = useRoutes(allRoutes, loaded?.location);
1313

1414
return getIsAnimateRouter() ? (
1515
<AnimatePresence exitBeforeEnter>
16-
<React.Fragment key={location.pathname}>
16+
<React.Fragment key={loaded?.location.pathname}>
1717
<motion.div
1818
initial="initial"
1919
animate="in"

‎src/components/WrapperRoute/index.tsx

+5-6
Original file line numberDiff line numberDiff line change
@@ -1,21 +1,20 @@
11
import { createContext, useContext } from "react";
22

33
import { usePreLoad } from "hooks/usePreLoad";
4-
import { hydrateLoad, preLoad } from "utils/preLoad";
4+
import { preLoad } from "utils/preLoad";
55

6-
import type { useLocation } from "react-router";
76
import type { WrapperRouteType } from "types/components";
87

9-
export const LoadedLocationContext = createContext<ReturnType<typeof useLocation> | Record<string, never>>({});
8+
export const LoadedLocationContext = createContext<ReturnType<typeof usePreLoad>["loaded"] | null>(null);
109

1110
export const WrapperRoute: WrapperRouteType = ({ children, routes, LoadingBar }) => {
12-
const { location } = usePreLoad({ routes, preLoad, hydrate: hydrateLoad });
11+
const { loaded } = usePreLoad({ routes, preLoad });
1312

1413
// for pure client render
15-
if (!location) return null;
14+
if (!loaded) return null;
1615

1716
return (
18-
<LoadedLocationContext.Provider value={location}>
17+
<LoadedLocationContext.Provider value={loaded}>
1918
<LoadingBar />
2019
{children}
2120
</LoadedLocationContext.Provider>

‎src/config/action.ts

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,8 @@
11
enum actionName {
2+
globalInitialProps = "globalInitialProps",
23
currentToken = "currentToken",
34
currentLang = "currentLang",
45
currentLoading = "currentLoading",
5-
currentInitialState = "currentInitialState",
66
}
77

88
export { actionName };

‎src/hooks/useGetInitialProps.ts

+17
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
import { useSelector } from "react-redux";
2+
3+
import { useLoadedLocation } from "components/WrapperRoute";
4+
import { generateInitialPropsKey } from "utils/preLoad";
5+
6+
import type { StoreState } from "types/store";
7+
8+
const globalInitialSelector = (state: StoreState) => state.client.globalInitialProps.data;
9+
10+
export const useGetInitialProps = () => {
11+
const globalInitialProps = useSelector<StoreState, StoreState["client"]["globalInitialProps"]["data"]>(globalInitialSelector);
12+
const loaded = useLoadedLocation();
13+
const propsKey = generateInitialPropsKey(loaded?.location.pathname || "", loaded?.query || new URLSearchParams());
14+
const props = globalInitialProps[propsKey];
15+
16+
return props;
17+
};

‎src/hooks/useLang.ts

+2-1
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,9 @@
11
import cookie from "js-cookie";
22
import { useCallback, useRef } from "react";
3-
import { useDispatch, useSelector } from "react-redux";
3+
import { useSelector } from "react-redux";
44

55
import { apiName } from "config/api";
6+
import { useDispatch } from "store";
67
import { getDataAction_Server } from "store/reducer/server/share/action";
78

89
import { useChangeLoadingWithoutRedux } from "./useLoadingBar";

0 commit comments

Comments
 (0)