Skip to content

Commit 8cecdf9

Browse files
hengwangsayhengwangsay
committed
fix: add all change file
1 parent 97160b5 commit 8cecdf9

25 files changed

+224
-173
lines changed

‎.env

+6-1
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,17 @@
1+
# dev env
12
DEV_HOST=localhost
23
DEV_PORT=9000
34
WDS_PORT=9001
5+
PUBLIC_DEV_API_HOST=localhost:9000
6+
# prod env
47
PROD_PORT=5000
58
PROD_HOST=localhost
6-
PUBLIC_API_HOST=localhost:9000
9+
PUBLIC_PROD_API_HOST=localhost:5000
10+
# feature
711
CRYPTO_KEY=ad$cr3efW89ypg
812
SSR=true
913
MIDDLEWARE=false
1014
ANIMATE_ROUTER=false
15+
# entry
1116
SERVER_ENTRY=./src/server/entry.ts
1217
CLIENT_ENTRY=./src/client/entry.tsx

‎global.d.ts

+2-1
Original file line numberDiff line numberDiff line change
@@ -36,7 +36,8 @@ declare global {
3636
PROD_PORT: string;
3737
SSR: string;
3838
UI: "antd" | "material" | "chakra";
39-
PUBLIC_API_HOST: string;
39+
PUBLIC_DEV_API_HOST: string;
40+
PUBLIC_PROD_API_HOST: string;
4041
CRYPTO_KEY: string;
4142
SERVER_ENTRY: string;
4243
CLIENT_ENTRY: string;

‎script/start-prod

-1
Original file line numberDiff line numberDiff line change
@@ -23,7 +23,6 @@ const withPromise = async () => {
2323
} catch (e) {
2424
console.error(e.message);
2525
}
26-
console.log("compiler done. before start this app, pls set PUBLIC_API_HOST in the env file!");
2726
};
2827

2928
withPromise();

‎src/client/chakraEntry.tsx

+9-15
Original file line numberDiff line numberDiff line change
@@ -1,36 +1,30 @@
11
import { ChakraProvider, createCookieStorageManager } from "@chakra-ui/react";
2-
import { CacheProvider } from "@emotion/react";
32
import { StrictMode } from "react";
43
import { HelmetProvider } from "react-helmet-async";
54
import { Provider } from "react-redux";
65
import { BrowserRouter as Router } from "react-router-dom";
76

87
import { App } from "components/App";
9-
import { createEmotionCache } from "config/createEmotionCache";
108
import { theme } from "theme";
119

1210
import type { createUniversalStore } from "store";
1311

14-
const cache = createEmotionCache();
15-
1612
const Root = ({ store }: { store: ReturnType<typeof createUniversalStore> }) => {
1713
console.warn("you are using chakra UI component library!");
1814

1915
const cookieStore = createCookieStorageManager("chakra-ui-color-mode", store.getState().server.cookie.data);
2016

2117
return (
2218
<StrictMode>
23-
<CacheProvider value={cache}>
24-
<ChakraProvider resetCSS theme={theme} colorModeManager={cookieStore}>
25-
<Provider store={store}>
26-
<Router>
27-
<HelmetProvider>
28-
<App />
29-
</HelmetProvider>
30-
</Router>
31-
</Provider>
32-
</ChakraProvider>
33-
</CacheProvider>
19+
<ChakraProvider resetCSS theme={theme} colorModeManager={cookieStore}>
20+
<Provider store={store}>
21+
<Router>
22+
<HelmetProvider>
23+
<App />
24+
</HelmetProvider>
25+
</Router>
26+
</Provider>
27+
</ChakraProvider>
3428
</StrictMode>
3529
);
3630
};

‎src/client/entry.tsx

+3-4
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,4 @@
11
/* eslint-disable @typescript-eslint/no-var-requires */
2-
import { loadableReady } from "@loadable/component";
32
import { createRoot, hydrateRoot } from "react-dom/client";
43

54
import { createUniversalStore } from "store";
@@ -34,13 +33,13 @@ if (__CSR__) {
3433
log("pure render by client", "warn");
3534
const { preLoadLang } = require("utils/preLoad");
3635
const root = createRoot(place);
37-
preLoadLang({ store, lang: window.__ENV__.LANG }).then(() => loadableReady(() => root.render(<Root store={store} />)));
36+
preLoadLang({ store, lang: window.__ENV__.LANG }).then(() => root.render(<Root store={store} />));
3837
} else {
3938
if (!window.__ENV__.isSSR || (window.__ENV__.isDEVELOPMENT && window.__ENV__.isMIDDLEWARE)) {
4039
log("not hydrate render on client", "warn");
4140
const root = createRoot(place);
42-
loadableReady(() => root.render(<Root store={store} />));
41+
root.render(<Root store={store} />);
4342
} else {
44-
loadableReady(() => hydrateRoot(place, <Root store={store} />));
43+
hydrateRoot(place, <Root store={store} />);
4544
}
4645
}

‎src/components/Layout.tsx

+9-3
Original file line numberDiff line numberDiff line change
@@ -1,20 +1,26 @@
1+
import { lazy, Suspense } from "react";
12
import { Outlet } from "react-router";
23

3-
import { Footer } from "./Footer";
44
import { Header } from "./Header";
55
import style from "./index.module.scss";
66

77
import type { PreLoadComponentType } from "types/components";
88

9+
const Footer = lazy(() => import("./Footer").then(({ Footer }) => ({ default: Footer })));
10+
911
export const Layout: PreLoadComponentType = () => {
1012
return (
1113
<div className={style.container}>
1214
<Header />
1315
<main className={style.content}>
14-
<Outlet />
16+
<Suspense>
17+
<Outlet />
18+
</Suspense>
1519
<hr />
1620
</main>
17-
<Footer />
21+
<Suspense>
22+
<Footer />
23+
</Suspense>
1824
</div>
1925
);
2026
};

‎src/components/RenderMatch.tsx

+3-3
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import { AnimatePresence, motion } from "framer-motion";
2-
import React from "react";
2+
import React, { Suspense } from "react";
33
import { useRoutes } from "react-router";
44

55
import { allRoutes } from "router/routes";
@@ -35,11 +35,11 @@ export const RenderMatch = () => {
3535
stiffness: 50,
3636
}}
3737
>
38-
{all}
38+
<Suspense>{all}</Suspense>
3939
</motion.div>
4040
</React.Fragment>
4141
</AnimatePresence>
4242
) : (
43-
all
43+
<Suspense>{all}</Suspense>
4444
);
4545
};

‎src/components/WrapperLang/index.tsx

+5-5
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,16 @@
1-
import { useEffect, useRef } from "react";
1+
import { useCallback, useEffect, useRef } from "react";
22
import { IntlProvider } from "react-intl";
33
import { useSelector } from "react-redux";
44

55
import { defaultLang } from "utils/i18n";
66

7-
import type { ReactChild } from "react";
7+
import type { ReactNode } from "react";
88
import type { StoreState } from "types/store";
99

10-
export const WrapperLang = ({ children }: { children: ReactChild }) => {
10+
export const WrapperLang = ({ children }: { children: ReactNode }) => {
1111
const htmlRef = useRef<HTMLHtmlElement | null>(null);
12-
const data = useSelector<StoreState, StoreState["server"]["lang"]["data"]>((state) => state.server.lang.data);
13-
const lang = useSelector<StoreState, StoreState["client"]["currentLang"]["data"]>((state) => state.client.currentLang.data);
12+
const data = useSelector<StoreState, StoreState["server"]["lang"]["data"]>(useCallback((state) => state.server.lang.data, []));
13+
const lang = useSelector<StoreState, StoreState["client"]["currentLang"]["data"]>(useCallback((state) => state.client.currentLang.data, []));
1414

1515
useEffect(() => {
1616
if (!htmlRef.current) {

‎src/components/style.module.scss

-5
This file was deleted.

‎src/config/createEmotionCache.ts

-3
This file was deleted.

‎src/components/chakraComponent.tsx ‎src/pages/ChakraUi.tsx

File renamed without changes.

‎src/pages/Foo/Gff.tsx

+3
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
export default function Index() {
2+
return <div>123 Gff</div>;
3+
}

‎src/components/i18n.tsx ‎src/pages/I18n.tsx

+1-3
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,9 @@
11
import { useIntl } from "react-intl";
22

3-
import style from "./style.module.scss";
4-
53
export const I18n = () => {
64
const { formatMessage: f } = useIntl();
75
return (
8-
<div className={style.c}>
6+
<div>
97
aaaa
108
<p>{f({ id: "app.title", defaultMessage: "hello" })}</p>
119
<p>{f({ id: "home.lead", defaultMessage: "test" })}</p>

‎src/router/dynamicRoutes.ts

+1-1
Original file line numberDiff line numberDiff line change
@@ -2,4 +2,4 @@
22
/* do not editor this template */
33
import type { DynamicRouteConfig } from "types/router";
44

5-
export const dynamicRouteConfig: DynamicRouteConfig[] = [{"path":"/404","componentPath":"404"},{"path":"/Great","componentPath":"Great"},{"path":"/Home","componentPath":"Home"},{"path":"/Tcc","componentPath":"Tcc"},{"path":"/Tdd","componentPath":"Tdd"},{"path":"/Foo/:id","componentPath":"Foo/:id"}];
5+
export const dynamicRouteConfig: DynamicRouteConfig[] = [{"path":"/404","componentPath":"404"},{"path":"/ChakraUi","componentPath":"ChakraUi"},{"path":"/Great","componentPath":"Great"},{"path":"/Home","componentPath":"Home"},{"path":"/I18n","componentPath":"I18n"},{"path":"/Tcc","componentPath":"Tcc"},{"path":"/Tdd","componentPath":"Tdd"},{"path":"/Foo/:id","componentPath":"Foo/:id"},{"path":"/Foo/Gff","componentPath":"Foo/Gff"}];

‎src/router/routes.tsx

+22-19
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import loadable from "@loadable/component";
1+
import { lazy } from "react";
22

33
import { Layout } from "components/Layout";
44
import { UI } from "components/UI";
@@ -9,33 +9,36 @@ import { filter } from "./tools";
99

1010
import type { PreLoadRouteConfig } from "types/router";
1111

12-
const LoadAble_I18n = loadable(() => import("../components/i18n"));
13-
1412
const baseRouter: PreLoadRouteConfig = {
1513
element: <Layout />,
16-
Component: Layout,
1714
};
1815

19-
const LoadAble_UI = loadable(() => import("../components/chakraComponent"));
20-
21-
const routes: PreLoadRouteConfig[] = [
22-
{ path: "/", element: <UI />, Component: UI },
23-
{
24-
path: "/i18n",
25-
element: <LoadAble_I18n />,
26-
Component: LoadAble_I18n,
27-
},
28-
{ path: "/chakra", element: <LoadAble_UI />, Component: LoadAble_UI },
29-
];
16+
const routes: PreLoadRouteConfig[] = [{ path: "/", element: <UI /> }];
3017

3118
const dynamicRoutes = dynamicRouteConfig
3219
.map((it) => ({
3320
path: it.componentPath === "404" ? "/*" : it.path,
34-
component: loadable(() => import(`../pages/${it.componentPath}`), {
35-
resolveComponent: (module) => AutoInjectInitialProps(module.default),
36-
}),
21+
preLoad: () =>
22+
import(
23+
/* webpackMode: "lazy" */
24+
/* webpackPrefetch: true */
25+
/* webpackPreload: true */
26+
/* webpackChunkName: "[request]" */
27+
`../pages/${it.componentPath}`
28+
),
29+
component: lazy(() =>
30+
import(
31+
/* webpackMode: "lazy" */
32+
/* webpackPrefetch: true */
33+
/* webpackPreload: true */
34+
/* webpackChunkName: "[request]" */
35+
`../pages/${it.componentPath}`
36+
).then((module) => ({
37+
default: AutoInjectInitialProps(module.default),
38+
}))
39+
),
3740
}))
38-
.map(({ path, component: Component }) => ({ path: path, Component, element: <Component /> }));
41+
.map(({ path, component: Component, preLoad }) => ({ path: path, preLoad, element: <Component /> }));
3942

4043
baseRouter.children = filter(routes.concat(dynamicRoutes) || [])
4144
.sort((a) => (a.path === "/*" ? 1 : 0))

‎src/server/middleware/renderError.tsx

+10-10
Original file line numberDiff line numberDiff line change
@@ -12,16 +12,16 @@ const renderError: RenderErrorType = ({ res, code, e }) =>
1212
"<!doctype html>" +
1313
renderToString(
1414
<HTML>
15-
{`<h1>server render error!</h1>
16-
<hr />
17-
<div style='padding-left: 10px; font-size: 20px'>
18-
error code:
19-
<b>${code}</b>
20-
<br />
21-
<br />
22-
<pre style='font-size: 18px; color: red;'>${e.stack}</pre>
23-
</div>
24-
<script>console.error(\`${pre.render(e, true, false)}\`)</script>`}
15+
<h1>server render error!</h1>
16+
<hr />
17+
<div style={{ fontSize: "18px", color: "red" }}>
18+
error code:
19+
<b>${code}</b>
20+
<br />
21+
<br />
22+
<pre style={{ fontSize: "18px", color: "red" }}>{e.stack}</pre>
23+
</div>
24+
<script dangerouslySetInnerHTML={{ __html: `console.error(${pre.render(e, true, false)})` }} />
2525
</HTML>
2626
)
2727
);

‎src/server/middleware/renderPage/middleware/globalEnv.ts

+2-2
Original file line numberDiff line numberDiff line change
@@ -3,12 +3,12 @@ import { getIsAnimateRouter, getIsMiddleware, getIsSSR } from "utils/env";
33
import type { Middleware } from "../compose";
44

55
export const globalEnv: Middleware = (next) => async (args) => {
6-
const { PUBLIC_API_HOST, CRYPTO_KEY } = process.env;
6+
const { PUBLIC_DEV_API_HOST, PUBLIC_PROD_API_HOST, CRYPTO_KEY } = process.env;
77
args.env = {
88
UI: __UI__,
99
isSSR: getIsSSR() || args.req.query.isSSR || false,
1010
CRYPTO_KEY,
11-
PUBLIC_API_HOST,
11+
PUBLIC_API_HOST: process.env.NODE_ENV === "development" ? PUBLIC_DEV_API_HOST : PUBLIC_PROD_API_HOST,
1212
isMIDDLEWARE: getIsMiddleware(),
1313
isDEVELOPMENT: __DEVELOPMENT__,
1414
isANIMATE_ROUTER: getIsAnimateRouter(),

‎src/server/middleware/renderPage/renderCSR.tsx

+21-8
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,17 @@
1-
import { ChunkExtractor } from "@loadable/server";
21
import { renderToString } from "react-dom/server";
32

43
import { ServerError } from "server/utils/error";
54
import { HTML } from "template/Html";
6-
import { manifestLoadable } from "utils/manifest";
5+
import {
6+
generatePreloadScriptElements,
7+
generateScriptElements,
8+
generateStyleElements,
9+
getAllStateFileContent,
10+
mainScriptsPath,
11+
mainStylesPath,
12+
manifestStateFile,
13+
runtimeScriptsPath,
14+
} from "utils/manifest";
715

816
import { composeRender } from "./compose";
917
import { globalEnv, initLang, initStore, loadCookie, loadLang, loadStore } from "./middleware";
@@ -15,20 +23,25 @@ const targetRender: AnyAction = async ({ res, store, lang, env }) => {
1523
if (!store || !lang || !env) {
1624
throw new ServerError("server 初始化失败", 500);
1725
}
18-
const webExtractor = new ChunkExtractor({ statsFile: manifestLoadable("client") });
19-
const linkElements = webExtractor.getLinkElements();
20-
const styleElements = webExtractor.getStyleElements();
21-
const scriptElements = webExtractor.getScriptElements();
26+
27+
const stateFileContent = await getAllStateFileContent(manifestStateFile("client"));
28+
29+
const mainStyles = mainStylesPath(stateFileContent);
30+
31+
const runtimeScripts = runtimeScriptsPath(stateFileContent);
32+
33+
const mainScripts = mainScriptsPath(stateFileContent);
2234

2335
res.send(
2436
"<!doctype html>" +
2537
renderToString(
2638
<HTML
2739
env={JSON.stringify(env)}
2840
lang={JSON.stringify(lang)}
29-
script={scriptElements}
30-
link={linkElements.concat(styleElements)}
41+
link={generateStyleElements(mainStyles)}
3142
reduxInitialState={JSON.stringify(store.getState())}
43+
preLoad={generatePreloadScriptElements(mainScripts)}
44+
script={generateScriptElements(runtimeScripts.concat(mainScripts))}
3245
/>
3346
)
3447
);

0 commit comments

Comments
 (0)