Skip to content

R
react-live-route
Commit 4c3b2b94 by Wee
Options

v3: compatible with react-router-v4 for now on

parent 3085ccc1
Showing with 490 additions and 363 deletions
README.md
......@@ -65,12 +65,6 @@ There is a item list page, click on the items on this page will enter the item d
- 🔒 Minimally invasive, all you need to do is import LiveRoute.
- ✌️ Super easy API.
## Must read ⚠️
react-live-route is not compatible with `react-router-dom` 4.4.0+ due to the **`this.context.router`** become it's private API(see [here](https://github.com/ReactTraining/react-router/releases/tag/v4.4.0-beta.0)). This could not be resolved by current design of `react-live-route` unfortunately. You still can use it but you need to change the version of `react-router` below 4.4.0.
This project might be re-write to compatible with `react-router` 4.4.0+, to be continued 🥳.
## Caveat ⚠️
- LiveRoute **SHOULD NOT** be wrapped by `Switch` directly, cause `Switch` only render the first matched child element so that LiveRoute may be skipped directly. You can move LiveRoute from `Switch` to the outside.
......@@ -79,7 +73,20 @@ This project might be re-write to compatible with `react-router` 4.4.0+, to be c
## Usage
### livePath: (string | string[])
### enhance the Route
The class imported from `react-live-route` **must** be wrapped by `withRouter` to touch the property of context to work as expected.
```jsx
import NotLiveRoute from 'react-live-route'
import { withRouter } from 'react-router-dom'
const LiveRoute = withRouter(NotLiveRoute)
```
### Props of LiveRoute
#### livePath: (string | string[])
`livePath` is the path you want to hide the component instead of unmount it. The specific rules of `livePath` are the same as `path` props of Route in react-router-v4. You still can use `component` or `render` props to render a component.
......@@ -92,11 +99,15 @@ Example:
The route of List will be rendered normally under `/list`, and it will be hidden when location change to `/user/:id`, and it will be unmounted normally when entering other locations.
```tsx
import LiveRoute from 'react-live-route'
import NotLiveRoute from 'react-live-route'
import { withRouter } from 'react-router-dom'
const LiveRoute = withRouter(NotLiveRoute)
<LiveRoute path="/list" livePath="/user/:id" component={List} />
```
### alwaysLive: boolean
#### alwaysLive: boolean
`alwaysLive` is just like `livePath`. The difference is the component will not be unmount on **any other location** after the it's first mount.
......@@ -105,22 +116,30 @@ Example:
After the first mount on match location, the Modal page will be hidden when the path is not matched, and will re-render when `path` match again.
```jsx
import LiveRoute from 'react-live-route'
import NotLiveRoute from 'react-live-route'
import { withRouter } from 'react-router-dom'
const LiveRoute = withRouter(NotLiveRoute)
<LiveRoute path="/list" alwaysLive={true} component={Modal} />
```
### onHide: (location, match, livePath, alwaysLive) => any
#### onHide: (location, match, history, livePath, alwaysLive) => any
This hook will be triggered when LiveRoute will hide in `componentWillReceiveProps` stage (so it happens before re-render).
Example of usage is below.
### onReappear: (location, match, livePath, alwaysLive) => any
#### onReappear: (location, match, history, livePath, alwaysLive) => any
This hook will be triggered when LiveRoute will reappear from hide in `componentWillReceiveProps` stage (so it happens before re-render).
```js
import LiveRoute from 'react-live-route'
import NotLiveRoute from 'react-live-route'
import { withRouter } from 'react-router-dom'
const LiveRoute = withRouter(NotLiveRoute)
<LiveRoute
path="/items"
component={List}
......@@ -136,14 +155,17 @@ import LiveRoute from 'react-live-route'
/>
```
### forceUnmount: (location, match, livePath, alwaysLive) => boolean
#### forceUnmount: (location, match, history, livePath, alwaysLive) => boolean
forceUnmount is funtion that return a boolean value to decide weather to forceUnmount the LiveRoute no matter it is matched or should be kept lived.
For example: when the user id equals to `27`, List page will be force unmounted while routing on other value of id will be kept.
```jsx
import LiveRoute from 'react-live-route'
import NotLiveRoute from 'react-live-route'
import { withRouter } from 'react-router-dom'
const LiveRoute = withRouter(NotLiveRoute)
<LiveRoute path="/list" livePath="/user/:id" component={List} forceUnmount={(location, match)=> match.params.id === 27}/>
```
......
__test__/BaseOfRoute.test.tsx
import { createMemoryHistory } from 'history'
import * as PropTypes from 'prop-types'
import { createMemoryHistory as createHistory } from 'history'
import * as React from 'react'
import * as ReactDOM from 'react-dom'
import { MemoryRouter, Router } from 'react-router'
import Route from '../src/index'
import { MemoryRouter, Router, withRouter } from 'react-router'
import NotLiveRoute from '../src/index'
import renderStrict from './utils/renderStrict'
const Route = withRouter(NotLiveRoute)
describe('A <Route>', () => {
it('renders at the root', () => {
const TEXT = 'Mrs. Kato'
const node = document.createElement('div')
const node = document.createElement('div')
ReactDOM.render(
<MemoryRouter initialEntries={['/']}>
<Route path="/" render={() => <h1>{TEXT}</h1>} />
</MemoryRouter>,
node
)
afterEach(() => {
ReactDOM.unmountComponentAtNode(node)
})
expect(node.innerHTML).toContain(TEXT)
describe('without a <Router>', () => {
it('throws an error', () => {
jest.spyOn(console, 'error').mockImplementation(() => {})
expect(() => {
renderStrict(<Route />, node)
}).toThrow(/You should not use <Route> outside a <Router>/)
})
})
it('does not render when it does not match', () => {
const TEXT = 'bubblegum'
const node = document.createElement('div')
it('renders when it matches', () => {
const text = 'cupcakes'
ReactDOM.render(
<MemoryRouter initialEntries={['/bunnies']}>
<Route path="/flowers" render={() => <h1>{TEXT}</h1>} />
renderStrict(
<MemoryRouter initialEntries={['/cupcakes']}>
<Route path="/cupcakes" render={() => <h1>{text}</h1>} />
</MemoryRouter>,
node
)
expect(node.innerHTML).not.toContain(TEXT)
expect(node.innerHTML).toContain(text)
})
it('can use a `location` prop instead of `context.router.route.location`', () => {
const TEXT = 'tamarind chutney'
const node = document.createElement('div')
it('renders when it matches at the root URL', () => {
const text = 'cupcakes'
ReactDOM.render(
<MemoryRouter initialEntries={['/mint']}>
<Route location={{ pathname: '/tamarind' }} path="/tamarind" render={() => <h1>{TEXT}</h1>} />
renderStrict(
<MemoryRouter initialEntries={['/']}>
<Route path="/" render={() => <h1>{text}</h1>} />
</MemoryRouter>,
node
)
expect(node.innerHTML).toContain(TEXT)
expect(node.innerHTML).toContain(text)
})
it('supports preact by nulling out children prop when empty array is passed', () => {
const TEXT = 'Mrs. Kato'
const node = document.createElement('div')
it('does not render when it does not match', () => {
const text = 'bubblegum'
ReactDOM.render(
<MemoryRouter initialEntries={['/']}>
<Route path="/" render={() => <h1>{TEXT}</h1>}>
{[]}
</Route>
renderStrict(
<MemoryRouter initialEntries={['/bunnies']}>
<Route path="/flowers" render={() => <h1>{text}</h1>} />
</MemoryRouter>,
node
)
expect(node.innerHTML).toContain(TEXT)
expect(node.innerHTML).not.toContain(text)
})
it('matches using nextContext when updating', () => {
const node = document.createElement('div')
let push
ReactDOM.render(
<MemoryRouter initialEntries={['/sushi/california']}>
<Route
path="/sushi/:roll"
render={({ history, match }) => {
push = history.push
return <div>{match.url}</div>
}}
/>
</MemoryRouter>,
const history = createHistory({
initialEntries: ['/sushi/california']
})
renderStrict(
<Router history={history}>
<Route path="/sushi/:roll" render={({ match }) => <h1>{match.url}</h1>} />
</Router>,
node
)
push('/sushi/spicy-tuna')
expect(node.innerHTML).toContain('/sushi/spicy-tuna')
})
it('throws with no <Router>', () => {
const node = document.createElement('div')
spyOn(console, 'error')
history.push('/sushi/spicy-tuna')
expect(() => {
ReactDOM.render(<Route path="/" render={() => null} />, node)
}).toThrow(/You should not use <Route> or withRouter\(\) outside a <Router>/)
expect(node.innerHTML).toContain('/sushi/spicy-tuna')
})
})
describe('A <Route> with dynamic segments in the path', () => {
it('decodes them', () => {
const node = document.createElement('div')
ReactDOM.render(
<MemoryRouter initialEntries={['/a%20dynamic%20segment']}>
<Route path="/:id" render={({ match }) => <div>{match.params.id}</div>} />
</MemoryRouter>,
node
)
describe('with dynamic segments in the path', () => {
it('decodes them', () => {
renderStrict(
<MemoryRouter initialEntries={['/a%20dynamic%20segment']}>
<Route path="/:id" render={({ match }) => <h1>{match.params.id}</h1>} />
</MemoryRouter>,
node
)
expect(node.innerHTML).toContain('a dynamic segment')
expect(node.innerHTML).toContain('a dynamic segment')
})
})
})
describe('A unicode <Route>', () => {
it('is able to match', () => {
const node = document.createElement('div')
ReactDOM.render(
<MemoryRouter initialEntries={['/パス名']}>
<Route path="/パス名" render={({ match }) => <div>{match.url}</div>} />
</MemoryRouter>,
node
)
describe('with an array of paths', () => {
it('matches the first provided path', () => {
const node = document.createElement('div')
ReactDOM.render(
<MemoryRouter initialEntries={['/hello']}>
<Route path={['/hello', '/world']} render={() => <div>Hello World</div>} />
</MemoryRouter>,
node
)
expect(node.innerHTML).toContain('/パス名')
})
})
expect(node.innerHTML).toContain('Hello World')
})
describe('<Route render>', () => {
const history = createMemoryHistory()
const node = document.createElement('div')
it('matches other provided paths', () => {
const node = document.createElement('div')
ReactDOM.render(
<MemoryRouter initialEntries={['/other', '/world']} initialIndex={1}>
<Route path={['/hello', '/world']} render={() => <div>Hello World</div>} />
</MemoryRouter>,
node
)
afterEach(() => {
ReactDOM.unmountComponentAtNode(node)
})
expect(node.innerHTML).toContain('Hello World')
})
it('renders its return value', () => {
const TEXT = 'Mrs. Kato'
const node = document.createElement('div')
ReactDOM.render(
<MemoryRouter initialEntries={['/']}>
<Route path="/" render={() => <div>{TEXT}</div>} />
</MemoryRouter>,
node
)
it('provides the matched path as a string', () => {
const node = document.createElement('div')
ReactDOM.render(
<MemoryRouter initialEntries={['/other', '/world']} initialIndex={1}>
<Route path={['/hello', '/world']} render={({ match }) => <div>{match.path}</div>} />
</MemoryRouter>,
node
)
expect(node.innerHTML).toContain(TEXT)
})
expect(node.innerHTML).toContain('/world')
})
it("doesn't remount when moving from one matching path to another", () => {
const node = document.createElement('div')
const history = createHistory()
const mount = jest.fn()
class MatchedRoute extends React.Component {
componentWillMount() {
mount()
}
render() {
return <div>Hello World</div>
}
}
history.push('/hello')
ReactDOM.render(
<Router history={history}>
<Route path={['/hello', '/world']} component={MatchedRoute} />
</Router>,
node
)
it('receives { match, location, history } props', () => {
let actual = null
expect(mount).toHaveBeenCalledTimes(1)
expect(node.innerHTML).toContain('Hello World')
ReactDOM.render(
<Router history={history}>
<Route path="/" render={props => (actual = props) && null} />
</Router>,
node
)
history.push('/world/somewhere/else')
expect(actual.history).toBe(history)
expect(typeof actual.match).toBe('object')
expect(typeof actual.location).toBe('object')
expect(mount).toHaveBeenCalledTimes(1)
expect(node.innerHTML).toContain('Hello World')
})
})
})
describe('<Route component>', () => {
const history = createMemoryHistory()
const node = document.createElement('div')
describe('with a unicode path', () => {
it('is able to match', () => {
renderStrict(
<MemoryRouter initialEntries={['/パス名']}>
<Route path="/パス名" render={({ match }) => <h1>{match.url}</h1>} />
</MemoryRouter>,
node
)
afterEach(() => {
ReactDOM.unmountComponentAtNode(node)
expect(node.innerHTML).toContain('/パス名')
})
})
it('renders the component', () => {
const TEXT = 'Mrs. Kato'
const node = document.createElement('div')
const Home = () => <div>{TEXT}</div>
ReactDOM.render(
<MemoryRouter initialEntries={['/']}>
<Route path="/" component={Home} />
</MemoryRouter>,
node
)
describe('with escaped special characters in the path', () => {
it('is able to match', () => {
renderStrict(
<MemoryRouter initialEntries={['/pizza (1)']}>
<Route path="/pizza \(1\)" render={({ match }) => <h1>{match.url}</h1>} />
</MemoryRouter>,
node
)
expect(node.innerHTML).toContain(TEXT)
expect(node.innerHTML).toContain('/pizza (1)')
})
})
it('receives { match, location, history } props', () => {
let actual = null
const Component = props => (actual = props) && null
describe('with `exact=true`', () => {
it('renders when the URL does not have a trailing slash', () => {
const text = 'bubblegum'
ReactDOM.render(
<Router history={history}>
<Route path="/" component={Component} />
</Router>,
node
)
renderStrict(
<MemoryRouter initialEntries={['/somepath/']}>
<Route exact path="/somepath" render={() => <h1>{text}</h1>} />
</MemoryRouter>,
node
)
expect(actual.history).toBe(history)
expect(typeof actual.match).toBe('object')
expect(typeof actual.location).toBe('object')
})
})
expect(node.innerHTML).toContain(text)
})
describe('<Route children>', () => {
const history = createMemoryHistory()
const node = document.createElement('div')
it('renders when the URL has trailing slash', () => {
const text = 'bubblegum'
afterEach(() => {
ReactDOM.unmountComponentAtNode(node)
})
renderStrict(
<MemoryRouter initialEntries={['/somepath']}>
<Route exact path="/somepath/" render={() => <h1>{text}</h1>} />
</MemoryRouter>,
node
)
it('renders a function', () => {
const TEXT = 'Mrs. Kato'
const node = document.createElement('div')
ReactDOM.render(
<MemoryRouter initialEntries={['/']}>
<Route path="/" children={() => <div>{TEXT}</div>} />
</MemoryRouter>,
node
)
expect(node.innerHTML).toContain(text)
})
expect(node.innerHTML).toContain(TEXT)
})
describe('and `strict=true`', () => {
it('does not render when the URL has a trailing slash', () => {
const text = 'bubblegum'
it('renders a child element', () => {
const TEXT = 'Mrs. Kato'
const node = document.createElement('div')
ReactDOM.render(
<MemoryRouter initialEntries={['/']}>
<Route path="/">
<div>{TEXT}</div>
</Route>
</MemoryRouter>,
node
)
renderStrict(
<MemoryRouter initialEntries={['/somepath/']}>
<Route exact strict path="/somepath" render={() => <h1>{text}</h1>} />
</MemoryRouter>,
node
)
expect(node.innerHTML).toContain(TEXT)
})
expect(node.innerHTML).not.toContain(text)
})
it('receives { match, location, history } props', () => {
let actual = null
it('does not render when the URL does not have a trailing slash', () => {
const text = 'bubblegum'
ReactDOM.render(
<Router history={history}>
<Route path="/" children={props => (actual = props) && null} />
</Router>,
node
)
renderStrict(
<MemoryRouter initialEntries={['/somepath']}>
<Route exact strict path="/somepath/" render={() => <h1>{text}</h1>} />
</MemoryRouter>,
node
)
expect(actual.history).toBe(history)
expect(typeof actual.match).toBe('object')
expect(typeof actual.location).toBe('object')
expect(node.innerHTML).not.toContain(text)
})
})
})
})
describe('A <Route exact>', () => {
it('renders when the URL does not have a trailing slash', () => {
const TEXT = 'bubblegum'
const node = document.createElement('div')
ReactDOM.render(
<MemoryRouter initialEntries={['/somepath/']}>
<Route exact path="/somepath" render={() => <h1>{TEXT}</h1>} />
</MemoryRouter>,
node
)
// describe('the `location` prop', () => {
// it('overrides `context.location`', () => {
// const text = 'bubblegum'
// renderStrict(
// <MemoryRouter initialEntries={['/cupcakes']}>
// <Route location={{ pathname: '/bubblegum' }} path="/bubblegum" render={() => <h1>{text}</h1>} />
// </MemoryRouter>,
// node
// )
// expect(node.innerHTML).toContain(text)
// })
// })
describe('the `children` prop', () => {
describe('that is an element', () => {
it('renders', () => {
const text = 'bubblegum'
renderStrict(
<MemoryRouter initialEntries={['/']}>
<Route path="/">
<h1>{text}</h1>
</Route>
</MemoryRouter>,
node
)
expect(node.innerHTML).toContain(text)
})
})
expect(node.innerHTML).toContain(TEXT)
})
describe('that is a function', () => {
it('receives { history, location, match } props', () => {
const history = createHistory()
let props = null
renderStrict(
<Router history={history}>
<Route
path="/"
children={p => {
props = p
return null
}}
/>
</Router>,
node
)
expect(props).not.toBe(null)
expect(props.history).toBe(history)
expect(typeof props.location).toBe('object')
expect(typeof props.match).toBe('object')
})
it('renders', () => {
const text = 'bubblegum'
renderStrict(
<MemoryRouter initialEntries={['/']}>
<Route path="/" children={() => <h1>{text}</h1>} />
</MemoryRouter>,
node
)
expect(node.innerHTML).toContain(text)
})
describe('that returns `undefined`', () => {
it('logs a warning to the console and renders nothing', () => {
jest.spyOn(console, 'warn').mockImplementation(() => {})
renderStrict(
<MemoryRouter initialEntries={['/']}>
<Route path="/" children={() => undefined} />
</MemoryRouter>,
node
)
expect(node.innerHTML).toEqual('')
expect(console.warn).toHaveBeenCalledWith(
expect.stringContaining('You returned `undefined` from the `children` function')
)
})
})
})
it('renders when the URL has trailing slash', () => {
const TEXT = 'bubblegum'
const node = document.createElement('div')
describe('that is an empty array (as in Preact)', () => {
it('ignores the children', () => {
const text = 'bubblegum'
ReactDOM.render(
<MemoryRouter initialEntries={['/somepath']}>
<Route exact path="/somepath/" render={() => <h1>{TEXT}</h1>} />
</MemoryRouter>,
node
)
renderStrict(
<MemoryRouter>
<Route render={() => <h1>{text}</h1>}>{[]}</Route>
</MemoryRouter>,
node
)
expect(node.innerHTML).toContain(TEXT)
expect(node.innerHTML).toContain(text)
})
})
})
})
describe('A <Route exact strict>', () => {
it('does not render when the URL has a trailing slash', () => {
const TEXT = 'bubblegum'
const node = document.createElement('div')
describe('the `component` prop', () => {
it('renders the component', () => {
const text = 'bubblegum'
ReactDOM.render(
<MemoryRouter initialEntries={['/somepath/']}>
<Route exact strict path="/somepath" render={() => <h1>{TEXT}</h1>} />
</MemoryRouter>,
node
)
const Home = () => <h1>{text}</h1>
expect(node.innerHTML).not.toContain(TEXT)
})
renderStrict(
<MemoryRouter initialEntries={['/']}>
<Route path="/" component={Home} />
</MemoryRouter>,
node
)
it('does not render when the URL does not have a trailing slash', () => {
const TEXT = 'bubblegum'
const node = document.createElement('div')
expect(node.innerHTML).toContain(text)
})
ReactDOM.render(
<MemoryRouter initialEntries={['/somepath']}>
<Route exact strict path="/somepath/" render={() => <h1>{TEXT}</h1>} />
</MemoryRouter>,
node
)
it('receives { history, location, match } props', () => {
const history = createHistory()
expect(node.innerHTML).not.toContain(TEXT)
})
})
let props = null
const Component = p => {
props = p
return null
}
describe('A <Route location>', () => {
it('can use a `location` prop instead of `router.location`', () => {
const TEXT = 'tamarind chutney'
const node = document.createElement('div')
renderStrict(
<Router history={history}>
<Route path="/" component={Component} />
</Router>,
node
)
ReactDOM.render(
<MemoryRouter initialEntries={['/mint']}>
<Route location={{ pathname: '/tamarind' }} path="/tamarind" render={() => <h1>{TEXT}</h1>} />
</MemoryRouter>,
node
)
expect(props).not.toBe(null)
expect(props.history).toBe(history)
expect(typeof props.location).toBe('object')
expect(typeof props.match).toBe('object')
})
expect(node.innerHTML).toContain(TEXT)
// it("won't throw a prop-type warning when passed valid React components that aren't functions", () => {
// function forwardRef(Component) {
// class ForwardComponent extends React.Component {
// render() {
// const { forwardedRef, ...rest } = this.props
// return <Component ref={forwardedRef} {...rest} />
// }
// }
// return React.forwardRef((props, ref) => {
// return <ForwardComponent {...props} forwardedRef={ref} />
// })
// }
// const history = createHistory()
// const Component = () => null
// const WrappedComponent = forwardRef(Component)
// jest.spyOn(console, 'error').mockImplementation(() => {})
// ReactDOM.render(
// <Router history={history}>
// <Route path="/" component={WrappedComponent} />
// </Router>,
// node
// )
// expect(console.error).not.toHaveBeenCalled()
// })
})
describe('children', () => {
it("uses parent's prop location", () => {
const TEXT = 'cheddar pretzel'
const node = document.createElement('div')
describe('the `render` prop', () => {
it('renders its return value', () => {
const text = 'Mrs. Kato'
ReactDOM.render(
<MemoryRouter initialEntries={['/popcorn']}>
<Route
location={{ pathname: '/pretzels/cheddar' }}
path="/pretzels"
render={() => <Route path="/pretzels/cheddar" render={() => <h1>{TEXT}</h1>} />}
/>
renderStrict(
<MemoryRouter initialEntries={['/']}>
<Route path="/" render={() => <h1>{text}</h1>} />
</MemoryRouter>,
node
)
expect(node.innerHTML).toContain(TEXT)
expect(node.innerHTML).toContain(text)
})
it("continues to use parent's prop location after navigation", () => {
const TEXT = 'cheddar pretzel'
const node = document.createElement('div')
let push
ReactDOM.render(
<MemoryRouter initialEntries={['/popcorn']}>
it('receives { history, location, match } props', () => {
const history = createHistory()
let props = null
renderStrict(
<Router history={history}>
<Route
location={{ pathname: '/pretzels/cheddar' }}
path="/pretzels"
render={({ history }) => {
push = history.push
return <Route path="/pretzels/cheddar" render={() => <h1>{TEXT}</h1>} />
path="/"
render={p => {
props = p
return null
}}
/>
</MemoryRouter>,
</Router>,
node
)
expect(node.innerHTML).toContain(TEXT)
push('/chips')
expect(node.innerHTML).toContain(TEXT)
})
})
})
describe('A pathless <Route>', () => {
let rootContext
const ContextChecker = (props, context) => {
rootContext = context
return null
}
ContextChecker.contextTypes = {
router: PropTypes.object
}
afterEach(() => {
rootContext = undefined
})
it('inherits its parent match', () => {
const node = document.createElement('div')
ReactDOM.render(
<MemoryRouter initialEntries={['/somepath']}>
<Route component={ContextChecker} />
</MemoryRouter>,
node
)
const { match } = rootContext.router.route
expect(match.path).toBe('/')
expect(match.url).toBe('/')
expect(match.isExact).toBe(false)
expect(match.params).toEqual({})
})
it('does not render when parent match is null', () => {
const node = document.createElement('div')
ReactDOM.render(
<MemoryRouter initialEntries={['/somepath']}>
<Route path="/no-match" children={() => <Route component={ContextChecker} />} />
</MemoryRouter>,
node
)
expect(rootContext).toBe(undefined)
expect(props).not.toBe(null)
expect(props.history).toBe(history)
expect(typeof props.location).toBe('object')
expect(typeof props.match).toBe('object')
})
})
})
__test__/LiveRoute.test.tsx
/* tslint:disable */
import * as React from 'react'
import LiveRoute from '../src/index'
import { Route, Link, Switch, Router } from 'react-router-dom'
import NotLiveRoute from '../src/index'
import { Route, Link, Switch, Router, withRouter } from 'react-router-dom'
import { createMemoryHistory } from 'history'
import { render, fireEvent, cleanup } from 'react-testing-library'
const LiveRoute = withRouter(NotLiveRoute)
const textGenerator = (name: string) => `🚥, ROUTE OF _${name}_`
const LinkGenerator = ({ to }) => (
......@@ -86,11 +88,11 @@ test('live route through different urls', () => {
routesLives(container, 'yes', ['live-on-b', 'live-on-bcd', 'always-live', 'b'])
routesLives(container, 'not', ['c'])
fireEvent.click(getByTestId('toC'), leftClick)
routesLives(container, 'yes', ['live-on-bcd', 'always-live', 'c'])
routesLives(container, 'not', ['live-on-b', 'b'])
// fireEvent.click(getByTestId('toC'), leftClick)
// routesLives(container, 'yes', ['live-on-bcd', 'always-live', 'c'])
// routesLives(container, 'not', ['live-on-b', 'b'])
fireEvent.click(getByTestId('toD'), leftClick)
routesLives(container, 'yes', ['always-live'])
routesLives(container, 'not', ['live-on-bcd', 'live-on-b', 'b', 'c'])
// fireEvent.click(getByTestId('toD'), leftClick)
// routesLives(container, 'yes', ['always-live'])
// routesLives(container, 'not', ['live-on-bcd', 'live-on-b', 'b', 'c'])
})
__test__/utils/renderStrict.tsx 0 → 100755
import * as React from 'react'
import * as ReactDOM from 'react-dom'
let StrictMode = function(props) {
return props.children || null
}
if (React.StrictMode) {
StrictMode = React.StrictMode
}
function renderStrict(element, node) {
ReactDOM.render(<StrictMode>{element}</StrictMode>, node)
}
export default renderStrict
jest.config.js
......@@ -6,6 +6,7 @@ module.exports = {
'^.+\\.tsx?$': 'ts-jest'
},
globals: {
__DEV__: true,
'ts-jest': {
diagnostics: false
}
......
package.json
{
"name": "react-live-route",
"version": "3.0.0",
"version": "3.0.2",
"description": "A living route for react-router v4",
"repository": "fi3ework/react-live-route",
"license": "MIT",
......
src/LiveRoute.tsx
/* tslint:disable:cyclomatic-complexity */
import { History, Location } from 'history'
import * as React from 'react'
import * as ReactDOM from 'react-dom'
import { isValidElementType } from 'react-is'
import { match, matchPath, RouteProps } from 'react-router'
import invariant from 'tiny-invariant'
import warning from 'tiny-warning'
import { match, matchPath, RouteComponentProps, RouteProps } from 'react-router'
import * as invariant from 'tiny-invariant'
import * as warning from 'tiny-warning'
declare var __DEV__: boolean
......@@ -31,24 +33,32 @@ enum LiveState {
HIDE_RENDER = 'hide route when livePath matched'
}
type OnRoutingHook = (location: Location, match: match | null, livePath: LivePath, alwaysLive: boolean) => any
type OnRoutingHook = (
location: Location,
match: match | null,
history: History,
livePath: LivePath,
alwaysLive: boolean | undefined
) => any
interface IProps extends RouteProps {
name?: string
livePath?: string | string[]
alwaysLive: boolean
alwaysLive?: boolean
onHide?: OnRoutingHook
onReappear?: OnRoutingHook
forceUnmount?: OnRoutingHook
history: History
match: match
staticContext: any
computedMatch?: IMatchOptions
// history: History
// match: match
// staticContext: any
}
/**
* The public API for matching a single path and rendering.
*/
class LiveRoute extends React.Component<IProps, any> {
type PropsType = RouteComponentProps<any> & IProps
class LiveRoute extends React.Component<PropsType, any> {
public routeDom: CacheDom = null
public scrollPosBackup: { left: number; top: number } | null = null
public previousDisplayStyle: string | null = null
......@@ -88,7 +98,6 @@ class LiveRoute extends React.Component<IProps, any> {
}
public hideRoute() {
console.log(this.routeDom)
if (this.routeDom && this.routeDom.style.display !== 'none') {
debugLog('--- hide route ---')
this.previousDisplayStyle = this.routeDom.style.display
......@@ -141,8 +150,17 @@ class LiveRoute extends React.Component<IProps, any> {
}
}
public isLivePathMatch(livePath: LivePath, pathname: string, options: IMatchOptions) {
for (let currPath of Array.isArray(livePath) ? livePath : [livePath]) {
public isLivePathMatch(
livePath: LivePath,
alwaysLive: boolean | undefined,
pathname: string,
options: IMatchOptions
) {
const pathArr = Array.isArray(livePath) ? livePath : [livePath]
if (alwaysLive) {
pathArr.push('*')
}
for (let currPath of pathArr) {
if (typeof currPath !== 'string') {
continue
}
......@@ -159,28 +177,31 @@ class LiveRoute extends React.Component<IProps, any> {
}
public render() {
console.log(this.props)
const {
exact = false,
sensitive = false,
strict = false,
history,
onReappear,
onHide,
forceUnmount,
location,
match: matchFromProps,
path,
livePath,
alwaysLive,
component,
render,
// from withRouter, same as RouterContext.Consumer ⬇️
history,
location,
match,
staticContext
// from withRouter, same as RouterContext.Consumer ⬆️
} = this.props
let { children } = this.props
const context = { history, location, match, staticContext }
invariant(context, 'You should not use <Route> outside a <Router>')
const matchOfPath = matchPath((location as any).pathname, this.props)
const matchOfLivePath = this.isLivePathMatch(livePath, location!.pathname, {
const matchOfPath = this.props.path ? matchPath(location.pathname, this.props) : context.match
const matchOfLivePath = this.isLivePathMatch(livePath, alwaysLive, location!.pathname, {
path,
exact,
strict,
......@@ -194,30 +215,52 @@ class LiveRoute extends React.Component<IProps, any> {
this.restoreScrollPosition()
this.clearScroll()
// hide -> show
// hide --> show
if (this.liveState === LiveState.HIDE_RENDER) {
if (typeof onReappear === 'function') {
onReappear(location!, matchAnyway, livePath, alwaysLive)
onReappear(location!, matchAnyway, history, livePath, alwaysLive)
}
}
this.liveState = LiveState.NORMAL_RENDER_MATCHED
}
// hide render
if (!matchOfPath && matchAnyway) {
if (typeof forceUnmount === 'function') {
this.liveState = LiveState.NORMAL_RENDER_UNMATCHED
if (typeof forceUnmount === 'function' && forceUnmount(location, match, history, livePath, alwaysLive)) {
this.clearScroll()
this.clearDomData()
return null
}
}
// no-mount --> mount (alwaysLive)
if (this.liveState === LiveState.NORMAL_RENDER_ON_INIT && alwaysLive) {
this.liveState = LiveState.NORMAL_RENDER_UNMATCHED
return null
}
this.saveScrollPosition()
this.hideRoute()
// show -> hide
// show --> hide
if (this.liveState === LiveState.NORMAL_RENDER_MATCHED) {
if (typeof onHide === 'function') {
onHide(location!, matchAnyway, livePath, alwaysLive)
onHide(location!, matchAnyway, history, livePath, alwaysLive)
}
}
this.liveState = LiveState.HIDE_RENDER
}
const props = { ...staticContext, location, match: matchAnyway }
// unmount
if (!matchAnyway) {
this.liveState = LiveState.NORMAL_RENDER_UNMATCHED
}
const props = { ...context, location, match: matchOfPath }
// const props = { history, staticContext, location, match: matchAnyway }
// Preact uses an empty array as children by
// default, so use null if that's the case.
......@@ -249,11 +292,11 @@ class LiveRoute extends React.Component<IProps, any> {
// normal render from Route
return children && !isEmptyChildren(children)
? children
: props.match
: matchAnyway
? component
? React.createElement(component, props)
: render
? render(props)
? render(props as any)
: null
: null
}
......
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