umi.js
4.18 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
import './polyfills';
import history from './history';
import React from 'react';
import ReactDOM from 'react-dom';
import findRoute, {
getUrlQuery,
} from '/Users/lambert/Documents/Code/Self/openSource/luban-h5/front-end/landing-page/node_modules/umi-build-dev/lib/findRoute.js';
// runtime plugins
const plugins = require('umi/_runtimePlugin');
window.g_plugins = plugins;
plugins.init({
validKeys: [
'patchRoutes',
'render',
'rootContainer',
'modifyRouteProps',
'onRouteChange',
'modifyInitialProps',
'initialProps',
],
});
// render
let clientRender = async () => {
window.g_isBrowser = true;
let props = {};
// Both support SSR and CSR
if (window.g_useSSR) {
// 如果开启服务端渲染则客户端组件初始化 props 使用服务端注入的数据
props = window.g_initialData;
} else {
const pathname = location.pathname;
const activeRoute = findRoute(require('@tmp/router').routes, pathname);
// 在客户端渲染前，执行 getInitialProps 方法
// 拿到初始数据
if (
activeRoute &&
activeRoute.component &&
activeRoute.component.getInitialProps
) {
const initialProps = plugins.apply('modifyInitialProps', {
initialValue: {},
});
props = activeRoute.component.getInitialProps
? await activeRoute.component.getInitialProps({
route: activeRoute,
isServer: false,
location,
...initialProps,
})
: {};
}
}
const rootContainer = plugins.apply('rootContainer', {
initialValue: React.createElement(require('./router').default, props),
});
ReactDOM[window.g_useSSR ? 'hydrate' : 'render'](
rootContainer,
document.getElementById('root'),
);
};
const render = plugins.compose(
'render',
{ initialValue: clientRender },
);
const moduleBeforeRendererPromises = [];
// client render
if (__IS_BROWSER) {
Promise.all(moduleBeforeRendererPromises)
.then(() => {
render();
})
.catch(err => {
window.console && window.console.error(err);
});
}
// export server render
let serverRender, ReactDOMServer;
if (!__IS_BROWSER) {
serverRender = async (ctx = {}) => {
// ctx.req.url may be `/bar?locale=en-US`
const [pathname] = (ctx.req.url || '').split('?');
const history = require('@tmp/history').default;
history.push(ctx.req.url);
let props = {};
const activeRoute =
findRoute(require('./router').routes, pathname) || false;
if (
activeRoute &&
activeRoute.component &&
activeRoute.component.getInitialProps
) {
const initialProps = plugins.apply('modifyInitialProps', {
initialValue: {},
});
// patch query object
const location = history.location
? { ...history.location, query: getUrlQuery(history.location.search) }
: {};
props = await activeRoute.component.getInitialProps({
route: activeRoute,
isServer: true,
location,
// only exist in server
req: ctx.req || {},
res: ctx.res || {},
...initialProps,
});
props = plugins.apply('initialProps', {
initialValue: props,
});
} else {
// message activeRoute or getInitialProps not found
console.log(
!activeRoute
? `${pathname} activeRoute not found`
: `${pathname} activeRoute's getInitialProps function not found`,
);
}
const rootContainer = plugins.apply('rootContainer', {
initialValue: React.createElement(require('./router').default, props),
});
const htmlTemplateMap = {};
return {
htmlElement:
activeRoute && activeRoute.path
? htmlTemplateMap[activeRoute.path]
: '',
rootContainer,
matchPath: activeRoute && activeRoute.path,
g_initialData: props,
};
};
// using project react-dom version
// https://github.com/facebook/react/issues/13991
ReactDOMServer = require('react-dom/server');
}
export { ReactDOMServer };
export default (__IS_BROWSER ? null : serverRender);
require('../../global.less');
// hot module replacement
if (__IS_BROWSER && module.hot) {
module.hot.accept('./router', () => {
clientRender();
});
}