1 |
|
2 |
|
3 | import { getStore } from '../'
|
4 |
|
5 | import React from 'react'
|
6 | import { connect } from 'react-redux'
|
7 |
|
8 |
|
9 | import hoistStatics from 'hoist-non-react-statics'
|
10 |
|
11 |
|
12 |
|
13 | import {
|
14 | fromServerProps as getRenderPropsFromServerProps,
|
15 | fromComponentProps as getRenderPropsFromComponentProps
|
16 | } from './get-render-props'
|
17 | import {
|
18 | append as appendStyle,
|
19 | remove as removeStyle,
|
20 |
|
21 | } from './styles'
|
22 | import clientUpdatePageInfo from './client-update-page-info'
|
23 |
|
24 |
|
25 |
|
26 |
|
27 | let everMounted = false
|
28 |
|
29 |
|
30 |
|
31 |
|
32 | const styleMap = {}
|
33 |
|
34 |
|
35 |
|
36 |
|
37 |
|
38 |
|
39 |
|
40 | let devSSRConnectIndex = 0
|
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 | const doFetchData = (store, renderProps, dataFetch) => {
|
74 | const result = dataFetch(store.getState(), renderProps, store.dispatch)
|
75 |
|
76 |
|
77 |
|
78 |
|
79 | if (Array.isArray(result))
|
80 | return Promise.all(result)
|
81 | if (result instanceof Promise)
|
82 | return result
|
83 | return new Promise(resolve => resolve(result))
|
84 | }
|
85 |
|
86 |
|
87 |
|
88 |
|
89 |
|
90 |
|
91 |
|
92 |
|
93 |
|
94 | const doPageinfo = (store, props, pageinfo) => {
|
95 | const defaultPageInfo = {
|
96 | title: '',
|
97 | metas: []
|
98 | }
|
99 |
|
100 | if (typeof pageinfo !== 'function' && typeof pageinfo !== 'object')
|
101 | return defaultPageInfo
|
102 |
|
103 | const state = store.getState()
|
104 | const infos = (() => {
|
105 | if (typeof pageinfo === 'object')
|
106 | return pageinfo
|
107 | const infos = pageinfo(state, props)
|
108 | if (typeof infos !== 'object')
|
109 | return defaultPageInfo
|
110 | return infos
|
111 | })()
|
112 |
|
113 | const {
|
114 | title = defaultPageInfo.title,
|
115 | metas = defaultPageInfo.metas
|
116 | } = infos
|
117 |
|
118 | if (state.localeId) {
|
119 | if (!metas.some(meta => {
|
120 | if (meta.name === 'koot-locale-id') {
|
121 | meta.content = state.localeId
|
122 | return true
|
123 | }
|
124 | return false
|
125 | })) {
|
126 | metas.push({
|
127 | name: 'koot-locale-id',
|
128 | content: state.localeId
|
129 | })
|
130 | }
|
131 | }
|
132 |
|
133 | return {
|
134 | title,
|
135 | metas
|
136 | }
|
137 | }
|
138 |
|
139 |
|
140 |
|
141 |
|
142 |
|
143 |
|
144 |
|
145 |
|
146 |
|
147 |
|
148 |
|
149 |
|
150 |
|
151 | export default (options = {}) => (WrappedComponent) => {
|
152 |
|
153 |
|
154 | const {
|
155 | connect: _connect = false,
|
156 | pageinfo,
|
157 | data: {
|
158 | fetch: _dataFetch,
|
159 | check: dataCheck,
|
160 | } = {},
|
161 | styles: _styles,
|
162 |
|
163 |
|
164 |
|
165 | } = options
|
166 |
|
167 |
|
168 |
|
169 |
|
170 |
|
171 |
|
172 | const styles = (!Array.isArray(_styles) ? [_styles] : _styles).filter(obj => (
|
173 | typeof obj === 'object' && typeof obj.wrapper === 'string'
|
174 | ))
|
175 |
|
176 |
|
177 | const hasStyles = (
|
178 | Array.isArray(styles) &&
|
179 | styles.length > 0
|
180 | )
|
181 |
|
182 |
|
183 |
|
184 |
|
185 |
|
186 |
|
187 |
|
188 |
|
189 | const dataFetch = typeof options.data === 'function' || Array.isArray(options.data)
|
190 | ? options.data
|
191 | : (typeof _dataFetch === 'function' || Array.isArray(_dataFetch) ? _dataFetch : undefined)
|
192 |
|
193 |
|
194 |
|
195 | class KootReactComponent extends React.Component {
|
196 | static onServerRenderHtmlExtend = ({ store, renderProps = {} }) => {
|
197 | const {
|
198 | title,
|
199 | metas
|
200 | } = doPageinfo(store, getRenderPropsFromServerProps(renderProps), pageinfo)
|
201 | return { title, metas }
|
202 | }
|
203 |
|
204 |
|
205 |
|
206 |
|
207 |
|
208 |
|
209 |
|
210 | clientUpdatePageInfo() {
|
211 | if (typeof pageinfo !== 'function' && typeof pageinfo !== 'object')
|
212 | return
|
213 |
|
214 | const {
|
215 | title,
|
216 | metas
|
217 | } = doPageinfo(getStore(), getRenderPropsFromComponentProps(this.props), pageinfo)
|
218 | clientUpdatePageInfo(title, metas)
|
219 | }
|
220 |
|
221 |
|
222 |
|
223 | state = {
|
224 | loaded: typeof dataCheck === 'function'
|
225 | ? dataCheck(getStore().getState(), getRenderPropsFromComponentProps(this.props))
|
226 | : undefined
|
227 | ,
|
228 | }
|
229 | mounted = false
|
230 | kootClassNames = []
|
231 |
|
232 |
|
233 |
|
234 | constructor(props/*, context*/) {
|
235 | super(props)
|
236 |
|
237 | if (hasStyles) {
|
238 | this.kootClassNames = styles.map(obj => obj.wrapper)
|
239 | appendStyle(this.getStyleMap(), styles)
|
240 |
|
241 |
|
242 |
|
243 |
|
244 |
|
245 | }
|
246 | }
|
247 |
|
248 | |
249 |
|
250 |
|
251 |
|
252 |
|
253 | getStyleMap() {
|
254 |
|
255 | if (__SERVER__) {
|
256 | if (__DEV__)
|
257 | return global.__KOOT_SSR__.styleMap
|
258 | if (typeof __KOOT_SSR__ === 'object')
|
259 | return __KOOT_SSR__.styleMap
|
260 | }
|
261 | return styleMap
|
262 |
|
263 | }
|
264 |
|
265 |
|
266 |
|
267 | componentDidUpdate(prevProps) {
|
268 | if (typeof prevProps.location === 'object' &&
|
269 | typeof this.props.location === 'object' &&
|
270 | prevProps.location.pathname !== this.props.location.pathname
|
271 | )
|
272 | this.clientUpdatePageInfo()
|
273 | }
|
274 |
|
275 | componentDidMount() {
|
276 | this.mounted = true
|
277 |
|
278 | if (!this.state.loaded && typeof dataFetch !== 'undefined') {
|
279 | doFetchData(getStore(), getRenderPropsFromComponentProps(this.props), dataFetch)
|
280 | .then(() => {
|
281 | if (!this.mounted) return
|
282 | this.setState({
|
283 | loaded: true,
|
284 | })
|
285 | })
|
286 | }
|
287 |
|
288 | this.clientUpdatePageInfo()
|
289 | if (everMounted) {
|
290 | } else {
|
291 | everMounted = true
|
292 | }
|
293 | }
|
294 |
|
295 | componentWillUnmount() {
|
296 | this.mounted = false
|
297 | if (hasStyles) {
|
298 | removeStyle(this.getStyleMap(), styles)
|
299 | }
|
300 | }
|
301 |
|
302 |
|
303 |
|
304 | render = () => {
|
305 |
|
306 |
|
307 |
|
308 |
|
309 |
|
310 | if (__CLIENT__ && this.kootClassNames instanceof HTMLElement) {
|
311 |
|
312 | this.kootClassNames = [this.kootClassNames.getAttribute('id')]
|
313 | }
|
314 |
|
315 | const props = Object.assign({}, this.props, {
|
316 | className: this.kootClassNames.concat(this.props.className).join(' ').trim(),
|
317 | "data-class-name": this.kootClassNames.join(' ').trim(),
|
318 | })
|
319 |
|
320 |
|
321 | if (typeof dataFetch !== 'undefined' && typeof dataCheck === 'function')
|
322 | props.loaded = this.state.loaded
|
323 |
|
324 | return <WrappedComponent {...props} />
|
325 | }
|
326 | }
|
327 |
|
328 | if (typeof dataFetch !== 'undefined') {
|
329 | KootReactComponent.onServerRenderStoreExtend = ({ store, renderProps }) => {
|
330 | if (typeof dataFetch === 'undefined')
|
331 | return new Promise(resolve => resolve())
|
332 | // console.log('onServerRenderStoreExtend')
|
333 | return doFetchData(store, getRenderPropsFromServerProps(renderProps), dataFetch)
|
334 | }
|
335 | }
|
336 |
|
337 | // if (_hot && __DEV__ && __CLIENT__) {
|
338 | // const { hot, setConfig } = require('react-hot-loader')
|
339 | // setConfig({ logLevel: 'debug' })
|
340 | // KootComponent = hot(module)(KootComponent)
|
341 | // }
|
342 |
|
343 | let KootComponent = hoistStatics(KootReactComponent, WrappedComponent)
|
344 |
|
345 | // if (typeof styles === 'object' &&
|
346 | // typeof styles.wrapper === 'string'
|
347 | // ) {
|
348 | // KootComponent = ImportStyle(styles)(KootComponent)
|
349 | // }
|
350 |
|
351 | if (_connect === true) {
|
352 | KootComponent = connect(() => ({}))(KootComponent)
|
353 | } else if (typeof _connect === 'function') {
|
354 | KootComponent = connect(_connect)(KootComponent)
|
355 | } else if (Array.isArray(_connect)) {
|
356 | KootComponent = connect(..._connect)(KootComponent)
|
357 | }
|
358 |
|
359 | /**
|
360 | * _服务器端_
|
361 | * 将组件注册到同构渲染对象中
|
362 | */
|
363 | if (__SERVER__) {
|
364 | if (__DEV__) KootComponent.id = devSSRConnectIndex++
|
365 | const {
|
366 | connectedComponents = []
|
367 | } = __DEV__ ? global.__KOOT_SSR__ : __KOOT_SSR__
|
368 | connectedComponents.push(KootComponent)
|
369 | }
|
370 |
|
371 | return KootComponent
|
372 | }
|
373 |
|
\ | No newline at end of file |