refactor(router): use reach router and remove prop-types warnings in site console

.babelrc

@@ -9,7 +9,8 @@
     "react"
   ],
   "plugins": [
-    "transform-runtime"
+    "transform-runtime",
+    "syntax-dynamic-import"
   ],
   "env": {
     "development": {
@@ -18,4 +19,4 @@
       ]
     }
   }
-}
+}

config/webpack.config.site.js

@@ -69,6 +69,11 @@ const config = {
       'core.less': `${sourcePath}/styles/core.less`
     }
   },
+  externals: {
+    'react': 'React',
+    'react-dom': 'ReactDOM',
+    'prop-types': 'PropTypes'
+  },
   plugins: [
     new webpack.LoaderOptionsPlugin({
       test: /\.md$/,
@@ -109,7 +114,7 @@ config.plugins.push(function () {
     const stats = statsData.toJson()
     let html = fs.readFileSync(`${sitePath}/index.html`, 'utf8')
     const distPath = config.output.publicPath + 'site.' + (isProduction ? stats.hash + '.' : '') + 'js'
-    html = html.replace(/(<script src=").*?(")/, '$1' + distPath + '$2')
+    html = html.replace(/(<script src=").*?dist.*?(")/, '$1' + distPath + '$2')
     fs.writeFileSync(path.join(`${sitePath}/index.html`), html)
   })
 })

package.json

@@ -66,12 +66,14 @@
     "react-update": "^0.4.4"
   },
   "devDependencies": {
+    "@reach/router": "^1.1.1",
     "babel-cli": "^6.26.0",
     "babel-core": "^6.26.0",
     "babel-eslint": "^8.2.2",
     "babel-jest": "^10.0.0",
     "babel-loader": "^7.1.2",
     "babel-plugin-import": "^1.6.2",
+    "babel-plugin-syntax-dynamic-import": "^6.18.0",
     "babel-plugin-transform-runtime": "^6.23.0",
     "babel-preset-env": "^1.6.1",
     "babel-preset-react": "^6.24.1",
@@ -111,7 +113,7 @@
     "react-custom-scrollbars": "^4.2.1",
     "react-dom": "^15.6.2",
     "react-hot-loader": "^4.0.0-rc.0",
-    "react-router": "^2.8.1",
+    "react-imported-component": "^4.6.2",
     "rimraf": "^2.6.2",
     "standard": "^11.0.0",
     "standard-version": "^4.3.0",

site/index.html

@@ -21,6 +21,9 @@
         <ellipse transform="matrix(0.7094 0.7048 -0.7048 0.7094 14.8712 -6.3191)" cx="15.1" cy="14.9" rx="1" ry="14.4"/>
       </symbol>
     </svg>
+    <script src="https://cdn.bootcss.com/react/15.6.2/react.min.js"></script>
+    <script src="https://cdn.bootcss.com/react-dom/15.6.2/react-dom.min.js"></script>
+    <script src="https://cdn.bootcss.com/prop-types/15.6.1/prop-types.min.js"></script>
     <script src="/dist/site.js"></script>
   </body>
 </html>

site/pages/Changelog/index.js

@@ -1,22 +1,23 @@
 import React from 'react'
 import Center from 'widgets/Center'
 import Markdown from 'widgets/Markdown'
-import Header from 'widgets/Header'
 import Footer from 'widgets/Footer'
 import BackToTop from 'earth-ui/lib/BackToTop'
+import ScrollUp from 'widgets/ScrollUp'
 import html from '../../../CHANGELOG.md'
 import config from '../config'
 import './index.less'
 
 export default () => {
   return (
-    <div className="changelog">
-      <Header />
-      <Center>
-        <Markdown html={html} />
-      </Center>
-      <Footer />
-      <BackToTop {...config.backToTop} />
-    </div>
+    <ScrollUp>
+      <div className="changelog">
+        <Center>
+          <Markdown html={html} />
+        </Center>
+        <Footer />
+        <BackToTop {...config.backToTop} />
+      </div>
+    </ScrollUp>
   )
 }

site/pages/Components/index.js

@@ -1,8 +1,8 @@
 import React from 'react'
 import PropTypes from 'prop-types'
+import { navigate } from '@reach/router'
 import { Nav, SubNav, NavItemGroup, NavItem } from 'earth-ui/lib/Nav'
 import { Layout, LayoutSidebar, LayoutContent } from 'widgets/Layout'
-import Header from 'widgets/Header'
 import components from './components.json'
 
 class Components extends React.Component {
@@ -20,7 +20,7 @@ class Components extends React.Component {
 
   switchRoute (route) {
     if (route) {
-      this.context.router.push(`/components/${route}`)
+      navigate(`/components/${route}`)
     }
   }
 
@@ -60,14 +60,13 @@ class Components extends React.Component {
 
   render () {
     const { open } = this.state
-    const { children, params } = this.props
+    const { children, '*': component } = this.props
     return (
       <div className="components">
-        <Header />
         <Layout open={open} onToggle={open => this.toggle(open)}>
           <LayoutSidebar>
             <Nav
-              selectedId={params.component}
+              selectedId={component}
               onItemClick={this.handleItemClick}
               width={280}
               indent={40}
@@ -90,7 +89,7 @@ class Components extends React.Component {
             </Nav>
           </LayoutSidebar>
           <LayoutContent>
-            {this.renderTitle(params.component ? params.component : params)}
+            {component && this.renderTitle(component)}
             {children}
           </LayoutContent>
         </Layout>
@@ -101,11 +100,7 @@ class Components extends React.Component {
 
 Components.propTypes = {
   children: PropTypes.node,
-  params: PropTypes.object
-}
-
-Components.contextTypes = {
-  router: React.PropTypes.object.isRequired
+  '*': PropTypes.string
 }
 
 export default Components

site/pages/Guide/index.js

@@ -1,22 +1,23 @@
 import React from 'react'
 import Center from 'widgets/Center'
 import Markdown from 'widgets/Markdown'
-import Header from 'widgets/Header'
 import Footer from 'widgets/Footer'
+import ScrollUp from 'widgets/ScrollUp'
 import BackToTop from 'earth-ui/lib/BackToTop'
 import html from '../../../README.zh-CN.md'
 import config from '../config'
 import './index.less'
 
 export default () => {
   return (
-    <div className="guide">
-      <Header />
-      <Center>
-        <Markdown html={html} />
-      </Center>
-      <Footer />
-      <BackToTop {...config.backToTop} />
-    </div>
+    <ScrollUp>
+      <div className="guide">
+        <Center>
+          <Markdown html={html} />
+        </Center>
+        <Footer />
+        <BackToTop {...config.backToTop} />
+      </div>
+    </ScrollUp>
   )
 }

site/pages/Home/index.js

@@ -1,10 +1,9 @@
 import React from 'react'
-import { Link } from 'react-router'
+import { Link } from '@reach/router'
 import Button from 'earth-ui/lib/Button'
 import { Row, Col } from 'earth-ui/lib/Layout'
 import Center from 'widgets/Center'
 import Pre from 'widgets/Pre'
-import Header from 'widgets/Header'
 import Footer from 'widgets/Footer'
 import BackToTop from 'earth-ui/lib/BackToTop'
 import Feature from './Feature'
@@ -29,7 +28,6 @@ class App extends Component {
 const Home = () => {
   return (
     <div className="home">
-      <Header />
       <div className="home__banner">
         <Center>
           <div className="home__banner-center">

site/pages/Home/index.less

@@ -7,9 +7,6 @@
 
 .home {
   background-color: #fafafa;
-  .header {
-    background-color: #212121;
-  }
 }
 
 .home__banner {
@@ -19,7 +16,7 @@
   //background-color: @black;
   padding-top: 120px;
   padding-bottom: 120px;
-  background-color: #212121;
+  background-color: @dark-darker;
   background-image: url(./img/background-stars.svg),url(./img/sat-path.svg),url(./img/ic-ring-planet.svg);
   background-position: center,left -40px bottom,right 20px top 120px;
   background-size: cover,195px 159px,239px 187px;

site/pages/NotFound/index.js

@@ -1,20 +1,18 @@
 import React from 'react'
-import PropType from 'prop-types'
 import Button from 'earth-ui/lib/Button'
+import ScrollUp from 'widgets/ScrollUp'
 import './index.less'
 
 const NotFound = (props) => {
   return (
-    <div className="not-found">
-      <h1>404</h1>
-      <p>您访问的页面不存在，也可能被移除了</p>
-      <Button onClick={() => props.history.goBack()}>返回</Button>
-    </div>
+    <ScrollUp>
+      <div className="not-found">
+        <h1>404</h1>
+        <p>您访问的页面不存在，也可能被移除了</p>
+        <Button onClick={() => window.history.back()}>返回</Button>
+      </div>
+    </ScrollUp>
   )
 }
 
-NotFound.propTypes = {
-  history: PropType.object
-}
-
 export default NotFound

site/pages/NotFound/index.less

@@ -1,8 +1,8 @@
 .not-found {
-  padding-top: 150px;
   text-align: center;
   h1 {
     margin: 0;
+    padding-top: 90px;
     font-size: 100px;
   }
-}
+}

site/pages/index.js

@@ -1,5 +1,6 @@
 import React, { Component } from 'react'
 import PropTypes from 'prop-types'
+import Header from 'widgets/Header'
 import './index.less'
 
 class App extends Component {
@@ -11,6 +12,7 @@ class App extends Component {
     let { children } = this.props
     return (
       <div className="wrapper">
+        <Header />
         {children}
       </div>
     )

site/router.js

@@ -1,67 +1,34 @@
 import React from 'react'
-import { render } from 'react-dom'
-import { Router, browserHistory, Route, IndexRoute, IndexRedirect } from 'react-router'
-// import { BrowserRouter as Router, Route, Redirect, Switch } from 'react-router-dom'
-import process from 'nprogress'
+import ReactDOM from 'react-dom'
+import { Router, Redirect } from '@reach/router'
+import Imported, { whenComponentsReady } from 'react-imported-component'
+import NProgress from 'nprogress'
 import App from './pages/index'
 
-render((
-  <Router onUpdate={() => {
-    process.done()
-    window.scrollTo(0, 0)
-  }} history={browserHistory}>
-    <Route
-      path="/"
-      onEnter={() => process.start()}
-      onChange={() => process.start()}
-      component={App}
-    >
-      <IndexRoute getComponent={(nextState, cb) => {
-        require.ensure([], require => {
-          cb(null, require('./pages/Home').default)
-        })
-      }} />
-      <Route path="guide" getComponent={(nextState, cb) => {
-        require.ensure([], require => {
-          cb(null, require('./pages/Guide').default)
-        })
-      }} />
-      <Route path="Design" getComponent={(nextState, cb) => {
-        require.ensure([], require => {
-          cb(null, require('./pages/Design').default)
-        })
-      }} >
-        <IndexRedirect to="/design/layout" />
-        <Route path=":designElement" getComponent={(nextState, cb) => {
-          const designElement = nextState.location.pathname.split('/').pop()
-          require.ensure([], require => {
-            cb(null, require(`./pages/Design/docs/${designElement}.md`))
-          })
-        }} />
-      </Route>
-      <Route path="components" getComponent={(nextState, cb) => {
-        require.ensure([], require => {
-          cb(null, require('./pages/Components').default)
-        })
-      }}>
-        <IndexRedirect to="/components/Layout" />
-        <Route path=":component" getComponent={(nextState, cb) => {
-          const component = nextState.location.pathname.split('/').pop()
-          require.ensure([], require => {
-            cb(null, require(`./pages/Components/docs/${component}.doc`).default)
-          })
-        }} />
-      </Route>
-      <Route path="Changelog" getComponent={(nextState, cb) => {
-        require.ensure([], require => {
-          cb(null, require('./pages/Changelog').default)
-        })
-      }} />
-      <Route path="*" getComponent={(nextState, cb) => {
-        require.ensure([], require => {
-          cb(null, require('./pages/NotFound').default)
-        })
-      }} />
-    </Route>
+const asyncComponent = path => Imported(() => {
+  NProgress.start()
+  whenComponentsReady().then(() => NProgress.done())
+  return import(`./pages/${path}` /* webpackChunkName: 'chunk-[request][index]' */)
+})
+
+const Home = asyncComponent('Home')
+const Guide = asyncComponent('Guide')
+const Changelog = asyncComponent('Changelog')
+const NotFound = asyncComponent('NotFound')
+const Components = asyncComponent('Components')
+const Doc = routeProps => React.createElement(asyncComponent(`Components/docs/${routeProps.component}.doc`))
+
+ReactDOM.render((
+  <Router>
+    <App path="/">
+      <Home path="/" />
+      <Guide path="/guide" />
+      <Redirect noThrow from="/components" to="/components/Layout" />
+      <Components path="/components">
+        <Doc path=":component" />
+      </Components>
+      <Changelog path="/changelog" />
+      <NotFound default />
+    </App>
   </Router>
 ), document.getElementById('app'))