Skip to content
This repository was archived by the owner on Sep 11, 2018. It is now read-only.

Commit 8469de0

Browse files
shendepushendepu
committed
tmp commit
1 parent d2355a4 commit 8469de0

File tree

5 files changed

+109
-54
lines changed

5 files changed

+109
-54
lines changed

‎build/webpack.config.js‎

Lines changed: 15 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -39,7 +39,9 @@ webpackConfig.entry = {
3939
webpackConfig.output = {
4040
filename : `[name].[${config.compiler_hash_type}].js`,
4141
path : paths.dist(),
42-
publicPath : config.compiler_public_path
42+
publicPath : config.compiler_public_path,
43+
libraryTarget: 'var',
44+
library : `[name]`
4345
}
4446

4547
// ------------------------------------
@@ -52,10 +54,10 @@ webpackConfig.plugins = [
5254
hash : false,
5355
favicon : paths.client('static/favicon.ico'),
5456
filename : 'index.html',
55-
inject : 'body',
56-
minify : {
57-
collapseWhitespace : true
58-
}
57+
inject : 'body'
58+
// minify : {
59+
// collapseWhitespace : true
60+
// }
5961
})
6062
]
6163

@@ -69,14 +71,14 @@ if (__DEV__) {
6971
debug('Enable plugins for production (OccurenceOrder, Dedupe & UglifyJS).')
7072
webpackConfig.plugins.push(
7173
new webpack.optimize.OccurrenceOrderPlugin(),
72-
new webpack.optimize.DedupePlugin(),
73-
new webpack.optimize.UglifyJsPlugin({
74-
compress : {
75-
unused : true,
76-
dead_code : true,
77-
warnings : false
78-
}
79-
})
74+
new webpack.optimize.DedupePlugin()
75+
// new webpack.optimize.UglifyJsPlugin({
76+
// compress : {
77+
// unused : true,
78+
// dead_code : true,
79+
// warnings : false
80+
// }
81+
// })
8082
)
8183
}
8284

‎src/containers/AppContainer.js‎

Lines changed: 10 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import React, { Component, PropTypes } from 'react'
2-
import { browserHistory, Router } from 'react-router'
2+
import { Router, RouterContext } from 'react-router'
33
import { Provider } from 'react-redux'
44

55
class AppContainer extends Component {
@@ -15,10 +15,18 @@ class AppContainer extends Component {
1515
render () {
1616
const { routes, store } = this.props
1717

18+
let router
19+
if (!window.__IS_SSR) {
20+
let browserHistory = require('react-router').browserHistory
21+
router = <Router history={browserHistory} children={routes} />
22+
} else {
23+
router = <RouterContext children={routes} />
24+
}
25+
1826
return (
1927
<Provider store={store}>
2028
<div style={{ height: '100%' }}>
21-
<Router history={browserHistory} children={routes} />
29+
{router}
2230
</div>
2331
</Provider>
2432
)

‎src/index.html‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,9 @@
77
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
88
</head>
99
<body>
10+
<script>
11+
// window.___INITIAL_STATE__ = { 'counter': 1 }
12+
</script>
1013
<div id="root" style="height: 100%"></div>
1114
</body>
1215
</html>

‎src/main.js‎

Lines changed: 77 additions & 37 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,10 @@
11
import React from 'react'
22
import ReactDOM from 'react-dom'
3+
import ReactDomServer from 'react-dom/server'
34
import createStore from './store/createStore'
4-
import AppContainer from './containers/AppContainer'
5+
// import AppContainer from './containers/AppContainer'
6+
import { match, Router, RouterContext } from 'react-router'
7+
import { Provider } from 'react-redux'
58

69
// ========================================================
710
// Store Instantiation
@@ -12,57 +15,94 @@ const store = createStore(initialState)
1215
// ========================================================
1316
// Render Setup
1417
// ========================================================
15-
const MOUNT_NODE = document.getElementById('root')
18+
let render
1619

17-
let render = () => {
18-
const routes = require('./routes/index').default(store)
19-
20-
ReactDOM.render(
21-
<AppContainer store={store} routes={routes} />,
22-
MOUNT_NODE
23-
)
24-
}
20+
if (!window.__IS_SSR) {
21+
const MOUNT_NODE = document.getElementById('root')
22+
render = () => {
23+
const routes = require('./routes/index').default(store)
24+
const browserHistory = require('react-router').browserHistory
25+
ReactDOM.render(
26+
<Provider store={store}>
27+
<div style={{ height: '100%' }}>
28+
<Router history={browserHistory} children={routes} />
29+
</div>
30+
</Provider>,
31+
MOUNT_NODE
32+
)
33+
}
2534

2635
// ========================================================
2736
// Developer Tools Setup
2837
// ========================================================
29-
if (__DEV__) {
30-
if (window.devToolsExtension) {
31-
window.devToolsExtension.open()
38+
if (__DEV__) {
39+
if (window.devToolsExtension) {
40+
window.devToolsExtension.open()
41+
}
3242
}
33-
}
3443

3544
// This code is excluded from production bundle
36-
if (__DEV__) {
37-
if (module.hot) {
38-
// Development render functions
39-
const renderApp = render
40-
const renderError = (error) => {
41-
const RedBox = require('redbox-react').default
45+
if (__DEV__) {
46+
if (module.hot) {
47+
// Development render functions
48+
const renderApp = render
49+
const renderError = (error) => {
50+
const RedBox = require('redbox-react').default
4251

43-
ReactDOM.render(<RedBox error={error} />, MOUNT_NODE)
44-
}
52+
ReactDOM.render(<RedBox error={error} />, MOUNT_NODE)
53+
}
4554

46-
// Wrap render in try/catch
47-
render = () => {
48-
try {
49-
renderApp()
50-
} catch (error) {
51-
renderError(error)
55+
// Wrap render in try/catch
56+
render = () => {
57+
try {
58+
renderApp()
59+
} catch (error) {
60+
renderError(error)
61+
}
5262
}
63+
64+
// Setup hot module replacement
65+
module.hot.accept('./routes/index', () =>
66+
setImmediate(() => {
67+
ReactDOM.unmountComponentAtNode(MOUNT_NODE)
68+
render()
69+
})
70+
)
5371
}
72+
}
73+
} else {
74+
render = () => {
75+
const routes = require('./routes/index').default(store)
76+
let html = ''
77+
match({ routes, location: '/' }, (error, redirectionLocation, renderProps) => {
78+
if (error) {
5479

55-
// Setup hot module replacement
56-
module.hot.accept('./routes/index', () =>
57-
setImmediate(() => {
58-
ReactDOM.unmountComponentAtNode(MOUNT_NODE)
59-
render()
60-
})
61-
)
80+
} else if (redirectionLocation) {
81+
82+
} else if (renderProps) {
83+
html = ReactDomServer.renderToString(
84+
<Provider store={store}>
85+
<div style={{ height: '100%' }}>
86+
<RouterContext {...renderProps} />
87+
</div>
88+
</Provider>
89+
)
90+
console.log()
91+
} else {
92+
// 404
93+
}
94+
})
95+
96+
return html
6297
}
6398
}
64-
6599
// ========================================================
66100
// Go!
67101
// ========================================================
68-
render()
102+
if (!window.__IS_SSR) {
103+
render()
104+
}
105+
106+
export {
107+
render
108+
}

‎src/store/createStore.js‎

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,5 @@
11
import { applyMiddleware, compose, createStore } from 'redux'
22
import thunk from 'redux-thunk'
3-
import { browserHistory } from 'react-router'
43
import makeRootReducer from './reducers'
54
import { updateLocation } from './location'
65

@@ -35,7 +34,10 @@ export default (initialState = {}) => {
3534
store.asyncReducers = {}
3635

3736
// To unsubscribe, invoke `store.unsubscribeHistory()` anytime
38-
store.unsubscribeHistory = browserHistory.listen(updateLocation(store))
37+
if (!window.__IS_SSR) {
38+
const browserHistory = require('react-router').browserHistory
39+
store.unsubscribeHistory = browserHistory.listen(updateLocation(store))
40+
}
3941

4042
if (module.hot) {
4143
module.hot.accept('./reducers', () => {

0 commit comments

Comments
 (0)