Commit 1a7a9783 by Wee

chore: add build configuration file

parent 41e8a41c
./react-router
\ No newline at end of file
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
{
"presets": [ "../../tools/babel-preset" ]
}
{
"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"] }]
}
}
{ {
"name": "react-router", "name": "react-live-route",
"version": "4.3.0-rc.3", "version": "1.0.0",
"description": "Declarative routing for React", "description": "A living route for react-router-v4",
"repository": "ReactTraining/react-router", "repository": "fi3ework/react-live-route",
"license": "MIT", "license": "MIT",
"authors": [ "authors": "fi3ework",
"Michael Jackson",
"Ryan Florence"
],
"files": [ "files": [
"MemoryRouter.js",
"Prompt.js",
"Redirect.js",
"Route.js",
"Router.js",
"StaticRouter.js",
"Switch.js",
"es",
"index.js", "index.js",
"generatePath.js",
"matchPath.js", "matchPath.js",
"withRouter.js", "LiveRoute.js"
"umd"
], ],
"main": "index.js", "main": "index.js",
"module": "es/index.js", "module": "es/index.js",
"sideEffects": false, "sideEffects": false,
"scripts": { "scripts": {
"build": "node ./tools/build.js", "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", "prepublishOnly": "node ./tools/build.js",
"clean": "git clean -fdX .", "clean": "git clean -fdX .",
"lint": "eslint modules", "lint": "eslint modules",
...@@ -89,6 +76,7 @@ ...@@ -89,6 +76,7 @@
"route", "route",
"routing", "routing",
"history", "history",
"link" "link",
"react-live-route"
] ]
} }
const fs = require('fs') const execSync = require("child_process").execSync;
const execSync = require('child_process').execSync
const prettyBytes = require('pretty-bytes')
const gzipSize = require('gzip-size')
const exec = (command, extraEnv) => const exec = (command, extraEnv) =>
execSync(command, { execSync(command, {
stdio: 'inherit', stdio: "inherit",
env: Object.assign({}, process.env, extraEnv) env: Object.assign({}, process.env, extraEnv)
}) });
console.log('Building CommonJS modules ...') console.log("Building CommonJS modules ...");
exec('babel modules -d . --ignore __tests__', { exec("babel modules -d . --ignore react-router,", {
BABEL_ENV: 'cjs' BABEL_ENV: "cjs"
}) });
console.log('\nBuilding ES modules ...') console.log("\nBuilding ES modules ...");
exec('babel modules -d es --ignore __tests__', { exec("babel modules -d es --ignore react-router", {
BABEL_ENV: 'es' 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))
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment