chore: add build configuration file

modules/.prettierignore

+./react-router
\ No newline at end of file

modules/LiveRoute.js

+import warning from 'warning'
+import invariant from 'invariant'
+import React from 'react'
+import PropTypes from 'prop-types'
+import matchPath from './matchPath'
+import ReactDOM from 'react-dom'
+
+const isEmptyChildren = children => React.Children.count(children) === 0
+const NORMAL_RENDER = 0
+const HIDE_RENDER = 1
+/**
+ * The public API for matching a single path and rendering.
+ */
+class Route extends React.Component {
+  static propTypes = {
+    computedMatch: PropTypes.object, // private, from <Switch>
+    path: PropTypes.string,
+    exact: PropTypes.bool,
+    strict: PropTypes.bool,
+    sensitive: PropTypes.bool,
+    component: PropTypes.func,
+    render: PropTypes.func,
+    children: PropTypes.oneOfType([PropTypes.func, PropTypes.node]),
+    location: PropTypes.object
+  }
+
+  static contextTypes = {
+    router: PropTypes.shape({
+      history: PropTypes.object.isRequired,
+      route: PropTypes.object.isRequired,
+      staticContext: PropTypes.object
+    })
+  }
+
+  static childContextTypes = {
+    router: PropTypes.object.isRequired
+  }
+
+  getChildContext() {
+    return {
+      router: {
+        ...this.context.router,
+        route: {
+          location: this.props.location || this.context.router.route.location,
+          match: this.state.match
+        }
+      }
+    }
+  }
+
+  state = {
+    match: this.computeMatch(this.props, this.context.router)
+  }
+
+  computeMatch({ computedMatch, location, path, strict, exact, sensitive }, router) {
+    if (computedMatch) return computedMatch // <Switch> already computed the match for us
+
+    invariant(router, 'You should not use <Route> or withRouter() outside a <Router>')
+
+    const { route } = router
+    const pathname = (location || route.location).pathname
+
+    return matchPath(pathname, { path, strict, exact, sensitive }, route.match)
+  }
+
+  componentWillMount() {
+    warning(
+      !(this.props.component && this.props.render),
+      'You should not use <Route component> and <Route render> in the same route; <Route render> will be ignored'
+    )
+
+    warning(
+      !(this.props.component && this.props.children && !isEmptyChildren(this.props.children)),
+      'You should not use <Route component> and <Route children> in the same route; <Route children> will be ignored'
+    )
+
+    warning(
+      !(this.props.render && this.props.children && !isEmptyChildren(this.props.children)),
+      'You should not use <Route render> and <Route children> in the same route; <Route children> will be ignored'
+    )
+  }
+
+  /**
+   *
+   *
+   * @param {*} props: this.props
+   * @param {*} nextProps: nextProps
+   * @param {*} nextContext: nextContext
+   * @param {*} match: match
+   * @returns 如果当前的 livePath 匹配，则返回最近一次正常渲染的 match。
+   *          如果当前的 livePath 不匹配，则返回正常计算的 match。
+   * @memberof Route
+   * 在每次正常渲染的时候，都备份它当前的 router，备份给下一次的 livePath 渲染。
+   * 在每次隐藏渲染的时候，都返回一个 prevMatch，等到渲染的时候，它拿这次的 prevMatch 和之前的 router 去最终渲染。
+   */
+  computeLivePath(props, nextProps, nextContext, match) {
+    console.log('进入 livePath')
+    // 计算 livePath 是否匹配
+    const livePath = nextProps.livePath
+    const nextPropsWithLivePath = { ...nextProps, path: livePath }
+    const livePathMatch = this.computeMatch(nextPropsWithLivePath, nextContext.router)
+    if (match) {
+      console.log('--- NORMAL ---')
+      // 正常存活
+      this.liveState = NORMAL_RENDER
+      this._prevRouter = this.context.router
+      return match
+    } else if (livePathMatch) {
+      // 备份一下需要渲染的参数
+      console.log('--- HIDE ---')
+      this.liveState = HIDE_RENDER
+      const prevMatch = this.computeMatch(props, this.context.router)
+      return prevMatch
+    }
+  }
+
+  componentWillReceiveProps(nextProps, nextContext) {
+    // console.log('into cwrp')
+    warning(
+      !(nextProps.location && !this.props.location),
+      '<Route> elements should not change from uncontrolled to controlled (or vice versa). You initially used no "location" prop and then provided one on a subsequent render.'
+    )
+
+    warning(
+      !(!nextProps.location && this.props.location),
+      '<Route> elements should not change from controlled to uncontrolled (or vice versa). You provided a "location" prop initially but omitted it on a subsequent render.'
+    )
+
+    const match = this.computeMatch(nextProps, nextContext.router)
+    let computedMatch = match
+
+    // 如果是 livePath 页面，需要重新计算 match
+    if (this.props.livePath) {
+      computedMatch = this.computeLivePath(this.props, nextProps, nextContext, match)
+    }
+
+    this.setState({
+      match: computedMatch
+    })
+  }
+
+  // 获取 Route 对应的 DOM
+  getRouteDom() {
+    let routeDom = ReactDOM.findDOMNode(this)
+    console.log(routeDom)
+    this.routeDom = routeDom
+  }
+
+  // 获取 Route 对应的 DOM
+  componentDidMount() {
+    // 需要在这里模仿 cwrp 保存一下 router
+    if (this.props.livePath && this.state.match) {
+      this._prevRouter = this.context.router
+      this.getRouteDom()
+    }
+  }
+
+  // 获取 Route 对应的 DOM
+  componentDidUpdate(prevProps, prevState) {
+    if (this.props.livePath && this.state.match) {
+      this.getRouteDom()
+    }
+  }
+
+  // 隐藏 DOM
+  hideRoute() {
+    if (this.routeDom) {
+      const _previousDisplayStyle = this.routeDom.style.display
+      this._previousDisplayStyle = _previousDisplayStyle
+      console.log(_previousDisplayStyle)
+      this.routeDom.style.display = 'none'
+    }
+  }
+
+  // 显示 DOM
+  showRoute() {
+    if (this.routeDom) {
+      this.routeDom.style.display = this._previousDisplayStyle
+    }
+  }
+
+  render() {
+    const { match } = this.state
+    const { children, component, render, livePath } = this.props
+    const { history, route, staticContext } = this.context.router
+    const location = this.props.location || route.location
+    const props = { match, location, history, staticContext }
+
+    // 如果已经初始化 && 需要判断是否靠 key 存活
+    if (livePath && component) {
+      // 正常渲染
+      if (this.liveState === NORMAL_RENDER) {
+        this.showRoute()
+        return match ? React.createElement(component, props) : null
+      }
+      // 隐藏渲染
+      else if (this.liveState === HIDE_RENDER) {
+        console.log('取出的 _prevRouter')
+        console.log(this._prevRouter)
+        const prevRouter = this._prevRouter
+
+        const { history, route, staticContext } = prevRouter
+        const location = this.props.location || route.location
+        const liveProps = { match, location, history, staticContext }
+        this.hideRoute()
+        return React.createElement(component, liveProps)
+      } else {
+        console.log('react-live-router: this is mount render, will do nothing.')
+      }
+    }
+
+    if (component) return match ? React.createElement(component, props) : null
+
+    if (render) return match ? render(props) : null
+
+    if (typeof children === 'function') return children(props)
+
+    if (children && !isEmptyChildren(children)) return React.Children.only(children)
+
+    return null
+  }
+}
+
+export default Route

modules/react-router/.babelrc

+{
+  "presets": [ "../../tools/babel-preset" ]
+}

modules/react-router/.eslintrc

+{
+  "parser": "babel-eslint",
+  "env": {
+    "browser": true,
+    "node": true
+  },
+  "plugins": ["import", "react"],
+  "extends": [
+    "eslint:recommended",
+    "plugin:import/errors",
+    "plugin:react/recommended"
+  ],
+  "rules": {
+    "no-unused-vars": [2, { "ignoreRestSiblings": true }],
+    "prefer-arrow-callback": 2,
+    "react/display-name": 0,
+    "react/no-children-prop": 0,
+    "react/prop-types": [2, { "ignore": ["history"] }]
+  }
+}

package.json

 {
-  "name": "react-router",
-  "version": "4.3.0-rc.3",
-  "description": "Declarative routing for React",
-  "repository": "ReactTraining/react-router",
+  "name": "react-live-route",
+  "version": "1.0.0",
+  "description": "A living route for react-router-v4",
+  "repository": "fi3ework/react-live-route",
   "license": "MIT",
-  "authors": [
-    "Michael Jackson",
-    "Ryan Florence"
-  ],
+  "authors": "fi3ework",
   "files": [
-    "MemoryRouter.js",
-    "Prompt.js",
-    "Redirect.js",
-    "Route.js",
-    "Router.js",
-    "StaticRouter.js",
-    "Switch.js",
-    "es",
     "index.js",
-    "generatePath.js",
     "matchPath.js",
-    "withRouter.js",
-    "umd"
+    "LiveRoute.js"
   ],
   "main": "index.js",
   "module": "es/index.js",
   "sideEffects": false,
   "scripts": {
     "build": "node ./tools/build.js",
-    "watch": "babel ./modules -d . --ignore __tests__ --watch",
+    "watch": "babel ./modules -d . --ignore react-router --watch",
     "prepublishOnly": "node ./tools/build.js",
     "clean": "git clean -fdX .",
     "lint": "eslint modules",
@@ -89,6 +76,7 @@
     "route",
     "routing",
     "history",
-    "link"
+    "link",
+    "react-live-route"
   ]
 }

tools/build.js

-const fs = require('fs')
-const execSync = require('child_process').execSync
-const prettyBytes = require('pretty-bytes')
-const gzipSize = require('gzip-size')
+const execSync = require("child_process").execSync;
 
 const exec = (command, extraEnv) =>
   execSync(command, {
-    stdio: 'inherit',
+    stdio: "inherit",
     env: Object.assign({}, process.env, extraEnv)
-  })
+  });
 
-console.log('Building CommonJS modules ...')
+console.log("Building CommonJS modules ...");
 
-exec('babel modules -d . --ignore __tests__', {
-  BABEL_ENV: 'cjs'
-})
+exec("babel modules -d . --ignore react-router,", {
+  BABEL_ENV: "cjs"
+});
 
-console.log('\nBuilding ES modules ...')
+console.log("\nBuilding ES modules ...");
 
-exec('babel modules -d es --ignore __tests__', {
-  BABEL_ENV: 'es'
-})
-
-console.log('\nBuilding react-router.js ...')
-
-exec('rollup -c -f umd -o umd/react-router.js', {
-  BABEL_ENV: 'umd',
-  NODE_ENV: 'development'
-})
-
-console.log('\nBuilding react-router.min.js ...')
-
-exec('rollup -c -f umd -o umd/react-router.min.js', {
-  BABEL_ENV: 'umd',
-  NODE_ENV: 'production'
-})
-
-const size = gzipSize.sync(
-  fs.readFileSync('umd/react-router.min.js')
-)
-
-console.log('\ngzipped, the UMD build is %s', prettyBytes(size))
+exec("babel modules -d es --ignore react-router", {
+  BABEL_ENV: "es"
+});