chore: add babel-plugin-transform-remove-console

.prettierignore

+modules/react-router
+tools
+es
+node_modules
+/*.js
\ No newline at end of file

modules/.eslintrc

@@ -5,15 +5,13 @@
     "node": true
   },
   "plugins": ["import", "react"],
-  "extends": [
-    "eslint:recommended",
-    "plugin:import/errors",
-    "plugin:react/recommended"
-  ],
+  "extends": ["eslint:recommended", "plugin:import/errors", "plugin:react/recommended"],
   "rules": {
     "prefer-arrow-callback": 2,
     "react/display-name": 0,
     "react/no-children-prop": 0,
-    "react/prop-types": [2, { "ignore": ["history"] }]
+    "react/prop-types": [2, { "ignore": ["history"] }],
+    "react/no-find-dom-node": 0,
+    "no-console": 0
   }
 }

modules/.prettierignore

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

modules/.prettierrc.js

-module.exports = {
-  printWidth: 120,
-  tabWidth: 2,
-  // useTabs: false,
-  semi: false,
-  singleQuote: true
-  // trailingComma: 'none'
-  // bracketSpacing: true,
-  // jsxBracketSameLine: false,
-  // arrowParens: 'avoid',
-  // rangeStart: 0,
-  // rangeEnd: Infinity,
-  // proseWrap: "preserve"
-}

modules/LiveRoute.js

@@ -2,7 +2,7 @@ import warning from 'warning'
 import invariant from 'invariant'
 import React from 'react'
 import PropTypes from 'prop-types'
-import matchPath from './matchPath'
+import matchPath from './react-router/matchPath'
 import ReactDOM from 'react-dom'
 
 const isEmptyChildren = children => React.Children.count(children) === 0
@@ -21,7 +21,9 @@ class Route extends React.Component {
     component: PropTypes.func,
     render: PropTypes.func,
     children: PropTypes.oneOfType([PropTypes.func, PropTypes.node]),
-    location: PropTypes.object
+    location: PropTypes.object,
+    livePath: PropTypes.string,
+    alwaysLive: PropTypes.bool
   }
 
   static contextTypes = {
@@ -36,6 +38,13 @@ class Route extends React.Component {
     router: PropTypes.object.isRequired
   }
 
+  constructor(props, context) {
+    super(props, context)
+    if (props.alwaysLive) {
+      this._routeInited = false
+    }
+  }
+
   getChildContext() {
     return {
       router: {
@@ -95,27 +104,32 @@ class Route extends React.Component {
    */
   computeLivePath(props, nextProps, nextContext, match) {
     console.log('进入 livePath')
+    console.log(this._routeInited)
     // 计算 livePath 是否匹配
     const livePath = nextProps.livePath
     const nextPropsWithLivePath = { ...nextProps, path: livePath }
+    const prevMatch = this.computeMatch(props, this.context.router)
     const livePathMatch = this.computeMatch(nextPropsWithLivePath, nextContext.router)
-    if (match) {
-      console.log('--- NORMAL ---')
+    if (match || (props.alwaysLive && !this._routeInited)) {
+      console.log('------- NORMAL -------')
       // 正常存活
       this.liveState = NORMAL_RENDER
       this._prevRouter = this.context.router
       return match
-    } else if (livePathMatch) {
+    } else if ((livePathMatch && prevMatch) || props.alwaysLive) {
       // 备份一下需要渲染的参数
-      console.log('--- HIDE ---')
+      console.log('------- HIDE -------')
       this.liveState = HIDE_RENDER
-      const prevMatch = this.computeMatch(props, this.context.router)
       return prevMatch
+    } else {
+      this.liveState = NORMAL_RENDER
+      console.log('------- NO MATCH -------')
+      console.error('err')
     }
   }
 
   componentWillReceiveProps(nextProps, nextContext) {
-    // console.log('into cwrp')
+    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.'
@@ -130,7 +144,7 @@ class Route extends React.Component {
     let computedMatch = match
 
     // 如果是 livePath 页面，需要重新计算 match
-    if (this.props.livePath) {
+    if (this.props.livePath || this.props.alwaysLive) {
       computedMatch = this.computeLivePath(this.props, nextProps, nextContext, match)
     }
 
@@ -149,16 +163,24 @@ class Route extends React.Component {
   // 获取 Route 对应的 DOM
   componentDidMount() {
     // 需要在这里模仿 cwrp 保存一下 router
-    if (this.props.livePath && this.state.match) {
+    if ((this.props.livePath || this.props.alwaysLive) && this.state.match) {
       this._prevRouter = this.context.router
       this.getRouteDom()
+      if (this.routeDom) {
+        this._routeInited = true
+        console.log('--- inited ---')
+      }
     }
   }
 
   // 获取 Route 对应的 DOM
-  componentDidUpdate(prevProps, prevState) {
-    if (this.props.livePath && this.state.match) {
+  componentDidUpdate() {
+    if ((this.props.livePath || this.props.alwaysLive) && this.state.match) {
       this.getRouteDom()
+      if (this.routeDom) {
+        this._routeInited = true
+        console.log('--- inited ---')
+      }
     }
   }
 
@@ -166,7 +188,10 @@ class Route extends React.Component {
   hideRoute() {
     if (this.routeDom) {
       const _previousDisplayStyle = this.routeDom.style.display
-      this._previousDisplayStyle = _previousDisplayStyle
+      if (_previousDisplayStyle !== 'none') {
+        this._previousDisplayStyle = _previousDisplayStyle
+        console.log('setted = ' + _previousDisplayStyle)
+      }
       console.log(_previousDisplayStyle)
       this.routeDom.style.display = 'none'
     }
@@ -181,13 +206,13 @@ class Route extends React.Component {
 
   render() {
     const { match } = this.state
-    const { children, component, render, livePath } = this.props
+    const { children, component, render, livePath, alwaysLive } = 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 ((livePath || alwaysLive) && component) {
+      console.log('=== render: ' + this.liveState + ' ===')
       // 正常渲染
       if (this.liveState === NORMAL_RENDER) {
         this.showRoute()
@@ -198,7 +223,6 @@ class Route extends React.Component {
         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 }
@@ -206,6 +230,7 @@ class Route extends React.Component {
         return React.createElement(component, liveProps)
       } else {
         console.log('react-live-router: this is mount render, will do nothing.')
+        return match ? React.createElement(component, props) : null
       }
     }
 

package-lock.json

 {
 	"name": "react-live-route",
-	"version": "1.0.0",
+	"version": "1.0.1",
 	"lockfileVersion": 1,
 	"requires": true,
 	"dependencies": {
@@ -1530,6 +1530,12 @@
 				"regenerator-transform": "0.9.11"
 			}
 		},
+		"babel-plugin-transform-remove-console": {
+			"version": "6.9.4",
+			"resolved": "https://registry.npmjs.org/babel-plugin-transform-remove-console/-/babel-plugin-transform-remove-console-6.9.4.tgz",
+			"integrity": "sha1-uYA2DAZzhOJLNXpYjYB9PINSd4A=",
+			"dev": true
+		},
 		"babel-plugin-transform-strict-mode": {
 			"version": "6.24.1",
 			"resolved": "https://registry.npmjs.org/babel-plugin-transform-strict-mode/-/babel-plugin-transform-strict-mode-6.24.1.tgz",

package.json

 {
   "name": "react-live-route",
-  "version": "1.0.1",
+  "version": "1.0.2",
   "description": "A living route for react-router-v4",
   "repository": "fi3ework/react-live-route",
   "license": "MIT",
@@ -40,6 +40,7 @@
     "babel-plugin-dev-expression": "^0.2.1",
     "babel-plugin-external-helpers": "^6.22.0",
     "babel-plugin-transform-react-remove-prop-types": "^0.4.13",
+    "babel-plugin-transform-remove-console": "^6.9.4",
     "babel-preset-es2015": "^6.14.0",
     "babel-preset-react": "^6.5.0",
     "babel-preset-stage-1": "^6.5.0",

tools/babel-preset.js

 const BABEL_ENV = process.env.BABEL_ENV
 const building = BABEL_ENV != undefined && BABEL_ENV !== 'cjs'
 
-const plugins = []
+const plugins = ['transform-remove-console']
 
 if (process.env.NODE_ENV === 'production') {
   plugins.push(