15 | (
16 |
32 | )
33 | }
34 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 |
17 |
29 | )}
30 | />
31 | Examples of ion-router's power
18 |19 | There are many ways ion-router can be used, and this 20 | list will grow as new ones are added. 21 |
22 |-
23 |
- Basic Example 24 |
- Asynchronous loading 25 |
- Dynamic sub-routes 26 |
- Updating url from only redux state changes 27 |
2 |
3 | # ion-router
4 | ###### Connecting your url and redux state
5 |
6 | [](https://codeclimate.com/github/cellog/ion-router) [](https://codeclimate.com/github/cellog/ion-router/coverage) [](https://travis-ci.org/cellog/ion-router) [](https://www.npmjs.com/package/ion-router)
7 |
8 | Elegant powerful routing based on the simplicity of storing url as state
9 |
10 | To install:
11 |
12 | ```bash
13 | $ npm i -S ion-router
14 | ```
15 |
16 | ## New Documentation
17 |
18 | Our documentation now lives [here](https://cellog.github.io/ion-router)
19 |
20 | ## License
21 |
22 | MIT License
23 |
24 | ## Thanks
25 |
26 | [](http://www.browserstack.com)
27 |
28 | Huge thanks to [BrowserStack](http://www.browserstack.com) for providing
29 | cross-browser testing on real devices, both automatic testing and manual testing.
--------------------------------------------------------------------------------
/docs/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "new-docs",
3 | "version": "0.1.0",
4 | "private": true,
5 | "homepage": "https://cellog.github.io/ion-router",
6 | "dependencies": {
7 | "font-awesome": "^4.7.0",
8 | "history": "^4.6.1",
9 | "ion-router": "file:../",
10 | "marked": "^0.8.0",
11 | "prop-types": "^15.7.2",
12 | "raw.macro": "^0.3.0",
13 | "react-burger-menu": "^2.6.13",
14 | "react-syntax-highlighter": "^12.2.1",
15 | "styled-jsx": "^3.2.4"
16 | },
17 | "devDependencies": {
18 | "@types/jest": "^25.1.1",
19 | "@types/node": "^13.7.0",
20 | "@types/react": "^16.9.19",
21 | "@types/react-burger-menu": "^2.6.0",
22 | "@types/react-dom": "^16.9.5",
23 | "react-scripts": "^2.1.8",
24 | "typescript": "^3.7.5"
25 | },
26 | "peerDependencies": {
27 | "react": "^16.12.0",
28 | "react-dom": "^16.12.0",
29 | "react-redux": "^7.1.3",
30 | "redux": "^4.0.4"
31 | },
32 | "scripts": {
33 | "start": "SKIP_PREFLIGHT_CHECK=true PORT=3005 react-scripts start",
34 | "build": "SKIP_PREFLIGHT_CHECK=true react-scripts build",
35 | "test": "react-scripts test --env=jsdom",
36 | "eject": "react-scripts eject",
37 | "predeploy": "npm run build",
38 | "deploy": "gh-pages -d build",
39 | "storybook": "start-storybook -p 9009 -s public",
40 | "build-storybook": "build-storybook -s public"
41 | },
42 | "browserslist": [
43 | ">0.2%",
44 | "not dead",
45 | "not ie <= 11",
46 | "not op_mini all"
47 | ]
48 | }
49 |
--------------------------------------------------------------------------------
/test/enhanced.test.ts:
--------------------------------------------------------------------------------
1 | import RouteParser from 'route-parser'
2 | import * as enhance from '../src/enhancers'
3 |
4 | describe('enhanced route store', () => {
5 | test('fake', () => {
6 | // coverage
7 | expect(enhance.fake()).toEqual({})
8 | })
9 | test('save', () => {
10 | expect(
11 | enhance.save(
12 | {
13 | name: 'thing',
14 | path: '/another',
15 | },
16 | {}
17 | )
18 | ).toEqual({
19 | thing: {
20 | ...enhance.enhanceRoute({
21 | name: 'thing',
22 | path: '/another',
23 | }),
24 | },
25 | })
26 | })
27 | test('enhanceRoute', () => {
28 | expect(
29 | enhance.enhanceRoute({
30 | name: 'thing',
31 | path: '/another',
32 | })
33 | ).toEqual({
34 | stateFromParams: enhance.fake,
35 | paramsFromState: enhance.fake,
36 | updateState: {},
37 | exitParams: {},
38 | name: 'thing',
39 | path: '/another',
40 | '@parser': new RouteParser('/another'),
41 | state: {},
42 | params: {},
43 | })
44 | expect(
45 | enhance.enhanceRoute({
46 | name: 'thing',
47 | path: '/:another',
48 | })
49 | ).toEqual({
50 | stateFromParams: enhance.fake,
51 | paramsFromState: enhance.fake,
52 | updateState: {},
53 | exitParams: undefined,
54 | name: 'thing',
55 | path: '/:another',
56 | '@parser': new RouteParser('/:another'),
57 | state: {},
58 | params: {},
59 | })
60 | })
61 | })
62 |
--------------------------------------------------------------------------------
/docs/src/components/Browser.jsx:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import PropTypes from 'prop-types'
3 | import * as actions from 'ion-router/actions'
4 | import { createPath } from 'history'
5 | import { connect } from 'react-redux'
6 | import 'font-awesome/css/font-awesome.min.css'
7 |
8 | import '../App.css'
9 |
10 | const Browser = ({ url = '/', back, forward, reset, showSource, Content = () => hi
, store }) => {
11 | return (
12 |
13 |
14 |
15 |
16 |
17 |
18 |
19 |
20 |
21 |
23 |
24 | )}
25 |
26 |
27 | Browser.propTypes = {
28 | url: PropTypes.string.isRequired,
29 | back: PropTypes.func.isRequired,
30 | reset: PropTypes.func.isRequired,
31 | forward: PropTypes.func.isRequired,
32 | showSource: PropTypes.func.isRequired,
33 | Content: PropTypes.any,
34 | }
35 |
36 | export default connect((state) => ({
37 | url: createPath(state.routing.location),
38 | }), dispatch => ({
39 | back: () => dispatch(actions.goBack()),
40 | forward: () => dispatch(actions.goForward()),
41 | reset: () => dispatch(actions.push('/')),
42 | }))(Browser)
43 |
--------------------------------------------------------------------------------
/docs/src/examples/index.ts:
--------------------------------------------------------------------------------
1 | import raw from 'raw.macro'
2 | import Basic, { reducer } from './Basic'
3 | import Loading, { reducer as loadingReducer } from './Loading'
4 | import SubRoutes, { reducer as subroutesReducer } from './SubRoutes'
5 | import StateChanges, { reducer as statechangesReducer } from './StateChanges'
6 | import Typescript, { reducer as typescriptReducer } from './Typescript'
7 |
8 | const BasicSource = raw('./Basic.jsx')
9 | const LoadingSource = raw('./Loading.jsx')
10 | const SubRoutesSource = raw('./SubRoutes.jsx')
11 | const StateChangesSource = raw('./StateChanges.jsx')
12 | const TypescriptSource = raw('./Typescript.tsx')
13 |
14 | const examples: {
15 | [key: string]: {
16 | source: string
17 | component: any
18 | reducer: any
19 | name: string
20 | lang: 'jsx' | 'tsx'
21 | }
22 | } = {
23 | basic: {
24 | source: BasicSource,
25 | component: Basic,
26 | reducer,
27 | name: 'Basic Example',
28 | lang: 'jsx',
29 | },
30 | loading: {
31 | source: LoadingSource,
32 | component: Loading,
33 | reducer: loadingReducer,
34 | name: 'Loading Component',
35 | lang: 'jsx',
36 | },
37 | subroutes: {
38 | source: SubRoutesSource,
39 | component: SubRoutes,
40 | reducer: subroutesReducer,
41 | name: 'Dynamic Sub-routes',
42 | lang: 'jsx',
43 | },
44 | statechanges: {
45 | source: StateChangesSource,
46 | component: StateChanges,
47 | reducer: statechangesReducer,
48 | name: 'Redux State Changes URL',
49 | lang: 'jsx',
50 | },
51 | typescript: {
52 | source: TypescriptSource,
53 | component: Typescript,
54 | reducer: typescriptReducer,
55 | name: 'Typescript example',
56 | lang: 'tsx',
57 | },
58 | }
59 |
60 | export default examples
61 |
--------------------------------------------------------------------------------
/docs/src/examples/Loading.jsx:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import { connect } from 'react-redux'
3 | import PropTypes from 'prop-types'
4 | import Routes from 'ion-router/Routes'
5 | import Route from 'ion-router/Route'
6 | import Toggle from 'ion-router/Toggle'
7 |
8 | const AsyncToggle = Toggle(() => true, state => {
9 | return !state.async.loading
10 | })
11 |
12 | export const reducer = {
13 | async: (state = { loading: false, thing: '' }, action) => {
14 | if (!action || !action.type) return state
15 | switch (action.type) {
16 | case 'START_LOAD':
17 | return {
18 | ...state,
19 | loading: true
20 | }
21 | case 'SET_THING':
22 | return {
23 | ...state,
24 | loading: false,
25 | thing: action.payload
26 | }
27 | default:
28 | return state
29 | }
30 | }
31 | }
32 |
33 | const Thing = connect(state => ({ thing: state.async.thing }))(({ thing }) => (
34 | This is the loaded thing: {thing}
35 | ))
36 |
37 | function Loading() {
38 | return (
39 | LOADING...
40 | )
41 | }
42 |
43 | function LoadingDemo(props) {
44 | return (
45 |
46 |
50 |
52 |
53 | )
54 | }
55 |
56 | LoadingDemo.propTypes = {
57 | load: PropTypes.func.isRequired
58 | }
59 |
60 | export default connect(undefined, dispatch => ({
61 | load: () => {
62 | // fake loading from an asychronous source using setTimeout
63 | dispatch({ type: 'START_LOAD', payload: true })
64 | setTimeout(() => dispatch({ type: 'SET_THING', payload: '"I loaded the thing!"' }), 1000)
65 | }
66 | }))(LoadingDemo)
67 |
--------------------------------------------------------------------------------
/src/NullComponent.tsx:
--------------------------------------------------------------------------------
1 | import React, { PureComponent, useRef } from 'react'
2 | import PropTypes from 'prop-types'
3 |
4 | import DisplaysChildren from './DisplaysChildren'
5 |
6 | interface NullComponentProps {
7 | '@@__loaded': boolean
8 | '@@__isActive': boolean
9 | }
10 | export default function NullComponentThis example demonstrates using a loading component
47 | 48 |
43 |
44 |
45 | {showBrowser ?
46 | setShowBrowser(false)}
50 | /> : }
51 |
52 |
53 |
54 |
55 |
56 |
58 |
59 | } />
60 | }
61 |
62 | Example.propTypes = {
63 | example: PropTypes.string
64 | }
65 |
66 | export default Example
67 |
--------------------------------------------------------------------------------
/run-tests.sh:
--------------------------------------------------------------------------------
1 | #!/usr/bin/env bash
2 | export NODE_ENV=test
3 | ./node_modules/karma/bin/karma start test/karma/karma.edge.conf.js
4 | ./node_modules/karma/bin/karma start test/karma/karma.ie10.conf.js
5 | ./node_modules/karma/bin/karma start test/karma/karma.ie11.conf.js
6 | ./node_modules/karma/bin/karma start test/karma/karma.iphone5s.conf.js
7 | ./node_modules/karma/bin/karma start test/karma/karma.iphone6.conf.js
8 | ./node_modules/karma/bin/karma start test/karma/karma.iphone6plus.conf.js
9 | #./node_modules/karma/bin/karma start test/karma/karma.android4.1.conf.js
10 | ./node_modules/karma/bin/karma start test/karma/karma.android4.2.conf.js
11 | ./node_modules/karma/bin/karma start test/karma/karma.android4.3.conf.js
12 | ./node_modules/karma/bin/karma start test/karma/karma.android4.4.conf.js
13 | #./node_modules/karma/bin/karma start test/karma/karma.android5.1.conf.js
14 | #./node_modules/karma/bin/karma start test/karma/karma.chrome43.conf.js
15 | #./node_modules/karma/bin/karma start test/karma/karma.chrome44.conf.js
16 | #./node_modules/karma/bin/karma start test/karma/karma.chrome45.conf.js
17 | #./node_modules/karma/bin/karma start test/karma/karma.chrome46.conf.js
18 | #./node_modules/karma/bin/karma start test/karma/karma.chrome47.conf.js
19 | #./node_modules/karma/bin/karma start test/karma/karma.chrome48.conf.js
20 | ./node_modules/karma/bin/karma start test/karma/karma.chrome49.conf.js
21 | ./node_modules/karma/bin/karma start test/karma/karma.chrome50.conf.js
22 | ./node_modules/karma/bin/karma start test/karma/karma.chrome50osx.conf.js
23 | #./node_modules/karma/bin/karma start test/karma/karma.firefox44.conf.js
24 | #./node_modules/karma/bin/karma start test/karma/karma.firefox45.conf.js
25 | ./node_modules/karma/bin/karma start test/karma/karma.firefox46.conf.js
26 | ./node_modules/karma/bin/karma start test/karma/karma.firefox46osx.conf.js
27 | ./node_modules/karma/bin/karma start test/karma/karma.opera.conf.js
28 | #./node_modules/karma/bin/karma start test/karma/karma.safari6.conf.js
29 | #./node_modules/karma/bin/karma start test/karma/karma.safari7.conf.js
30 | ./node_modules/karma/bin/karma start test/karma/karma.safari8.conf.js
31 | ./node_modules/karma/bin/karma start test/karma/karma.safari9.conf.js
32 | ./node_modules/.bin/lcov-result-merger './test/karma/coverage/**/lcov.info' 'lcov.info'
33 | ./node_modules/codeclimate-test-reporter/bin/codeclimate.js < lcov.info
--------------------------------------------------------------------------------
/docs/src/examples/Basic.jsx:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import { connect } from 'react-redux'
3 | import PropTypes from 'prop-types'
4 | import Routes from 'ion-router/Routes'
5 | import Route from 'ion-router/Route'
6 | import Toggle from 'ion-router/Toggle'
7 | import RouteToggle from 'ion-router/RouteToggle'
8 | import Link from 'ion-router/Link'
9 |
10 | const HiThereToggle = RouteToggle('hithere')
11 | const ThereToggle = Toggle(state => state.there === 'Greg')
12 |
13 | export const reducer = {
14 | there: (state = '', action) => {
15 | if (!action || !action.type) return state
16 | if (action.type === 'UPDATE_THERE') return action.payload || ''
17 | return state
18 | }
19 | }
20 |
21 | function Basic(props) {
22 | return (
23 |
24 | (
42 |
58 | params}
63 | paramsFromState={state => state}
64 | updateState={{
65 | there: t => ({ type: 'UPDATE_THERE', payload: t })
66 | }}
67 | />
68 |
69 |
70 | )
71 | }
72 |
73 | Basic.propTypes = {
74 | there: PropTypes.string
75 | }
76 |
77 | export default connect(state => state, dispatch => ({
78 | change: there => dispatch({ type: 'UPDATE_THERE', payload: there })
79 | }))(Basic)
80 |
--------------------------------------------------------------------------------
/src/Route.tsx:
--------------------------------------------------------------------------------
1 | import React, { Children, useContext, useRef } from 'react'
2 | import Context, { RouterContext } from './Context'
3 | import { DeclareRoute } from './enhancers'
4 | import { FullStateWithRouter } from './selectors'
5 |
6 | export function fakeRouteHelper() {
7 | return {}
8 | }
9 |
10 | export interface Props<
11 | ReduxState extends FullStateWithRouter,
12 | Params extends { [key: string]: string },
13 | ParamsState extends { [key: string]: any },
14 | Action extends { type: string; [key: string]: any }
15 | > {
16 | name: string
17 | path: string
18 | paramsFromState?: DeclareRoute<
19 | ReduxState,
20 | Params,
21 | ParamsState,
22 | Action
23 | >['paramsFromState']
24 | stateFromParams?: DeclareRoute<
25 | ReduxState,
26 | Params,
27 | ParamsState,
28 | Action
29 | >['stateFromParams']
30 | updateState?: DeclareRoute<
31 | ReduxState,
32 | Params,
33 | ParamsState,
34 | Action
35 | >['updateState']
36 | parentUrl?: string
37 | parent?: string
38 | children?: React.ReactElement
39 | }
40 |
41 | const defaultProps = {
42 | paramsFromState: fakeRouteHelper,
43 | stateFromParams: fakeRouteHelper,
44 | updateState: {},
45 | }
46 |
47 | export function Route<
48 | ReduxState extends FullStateWithRouter,
49 | Params extends { [key: string]: string },
50 | ParamsState extends { [key: string]: any },
51 | Action extends { type: string; [key: string]: any }
52 | >(props: Props
25 | This simple example demonstrates using Link,
26 | Routes, Route, and two toggles,
27 | RouteToggle and Toggle.
28 |
-
30 |
- Home 31 |
- 32 | Hi to Somebody 33 | 34 |
- Hi to Greg 35 |
-
36 | Change value of
therein store: 37 | props.change(e.target.value)} /> 38 |
39 |
43 | Hi {props.there}!
44 | (
46 |
50 | )}
51 | else={() => (
52 | It's Greg!!
47 | )}
48 | />
49 |
53 | Home
54 |
55 | )}
56 | />
57 |
74 | {children &&
75 | Children.map(children, child =>
76 | React.cloneElement(child, {
77 | parentUrl: path,
78 | })
79 | )}
80 |
81 | )
82 | }
83 |
84 | export default Route
85 |
--------------------------------------------------------------------------------
/docs/src/logo.svg:
--------------------------------------------------------------------------------
1 |
8 |
--------------------------------------------------------------------------------
/docs/src/App.tsx:
--------------------------------------------------------------------------------
1 | import React, { useState } from 'react'
2 | import { Routes, Route, Link } from 'ion-router'
3 | import { scaleRotate as Menu } from 'react-burger-menu'
4 | import marked from 'marked'
5 | import raw from 'raw.macro'
6 |
7 | import './App.css'
8 | import Examples from './components/Examples'
9 | import MarkdownViewer from './components/MarkdownViewer'
10 | import ExamplesToggle from './toggles/ExamplesToggle'
11 | import * as actions from './redux/actions'
12 | import examples from './examples'
13 |
14 | const test = marked(raw('../md/README.md'))
15 | ;(Routes as React.FC).displayName = 'FancyRoutes'
16 | ;(Link as React.FC).displayName = 'FancyLink'
17 |
18 | function App() {
19 | const [open, setMenuOpen] = useState(false)
20 | return (
21 |
22 |
67 |
68 | params}
72 | paramsFromState={state => state}
73 | updateState={{
74 | example: name => actions.chooseExample(name),
75 | }}
76 | />
77 |
78 |
79 |
80 | )
81 | }
82 |
83 | export default App
84 |
--------------------------------------------------------------------------------
/docs/src/examples/Typescript.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import { Dispatch } from 'redux'
3 | import { useDispatch } from 'react-redux'
4 | import {
5 | Routes,
6 | Route,
7 | Toggle,
8 | RouteToggle,
9 | Link,
10 | FullStateWithRouter,
11 | } from 'ion-router'
12 |
13 | interface StoreState {
14 | there: string
15 | }
16 |
17 | interface ChangeAction {
18 | type: 'UPDATE_THERE'
19 | payload: string
20 | }
21 |
22 | const HiThereToggle = RouteToggle('hithere')
23 | const ThereToggle = Toggle(
24 | (state: StoreState & FullStateWithRouter) => state.there === 'Greg'
25 | )
26 |
27 | export const reducer = {
28 | there: (state = '', action: ChangeAction) => {
29 | if (!action || !action.type) return state
30 | if (action.type === 'UPDATE_THERE') return action.payload || ''
31 | return state
32 | },
33 | }
34 |
35 | export default function Typescript(props: StoreState) {
36 | const dispatch = useDispatch-
39 | {Object.keys(examples).map(example => (
40 |
- 41 | setMenuOpen(false)} 46 | > 47 | {examples[example].name} 48 | 49 | 50 | ))} 51 |
54 |
66 |
55 |
65 |
56 |
58 | ion-router
57 |
59 |
64 |
44 | (
70 |
78 | params}
83 | paramsFromState={state => ({ there: state.there })}
84 | updateState={{
85 | there: (t): ChangeAction => ({ type: 'UPDATE_THERE', payload: t }),
86 | }}
87 | />
88 |
89 |
90 | )
91 | }
92 |
--------------------------------------------------------------------------------
/src/Routes.tsx:
--------------------------------------------------------------------------------
1 | import React, { useState, useEffect, useRef, useCallback } from 'react'
2 | import PropTypes from 'prop-types'
3 |
4 | import * as actions from './actions'
5 | import { useStore, useDispatch, useSelector } from 'react-redux'
6 | import Context, { RouterContext } from './Context'
7 | import { FullStateWithRouter } from './selectors'
8 | import { IonRouterOptions } from './storeEnhancer'
9 | import { DeclareRoute } from './enhancers'
10 | import { Store } from 'redux'
11 | import { IonRouterState } from './reducer'
12 |
13 | export function Routes<
14 | ReduxState extends FullStateWithRouter,
15 | Params extends { [key: string]: string },
16 | ParamsState extends { [key: string]: any },
17 | Action extends { type: string; [key: string]: any }
18 | >({ children }: { children: React.ReactNode }) {
19 | const myRoutes = useRef<
20 | DeclareRoute
45 | This simple example demonstrates using Link,
46 | Routes, Route, and two toggles,
47 | RouteToggle and Toggle.
48 |
-
50 |
- 51 | Home 52 | 53 |
- 54 | 55 | Hi to Somebody 56 | 57 | 58 |
- 59 | 60 | Hi to Greg 61 | 62 | 63 |
-
64 | Change value of
therein store: 65 | change(e.target.value)} /> 66 |
67 |
71 | Hi {props.there}!
72 |
74 | )}
75 | else={() => It's Greg!!
} />
73 | Home
}
76 | />
77 |
23 | (
25 |
26 | )}
27 | else={() => (
28 | Click here first
29 | )}
30 | />
31 |
32 |
33 | Null.propTypes = {
34 | load: PropTypes.func.isRequired
35 | }
36 |
37 | function Subthings({ parentRoute, unload }) {
38 | return (
39 |
40 | (
45 |
51 |
53 |
54 | )
55 | }
56 |
57 | Subthings.propTypes = {
58 | parentRoute: PropTypes.string.isRequired,
59 | unload: PropTypes.func.isRequired
60 | }
61 |
62 |
63 | function SubRoutes({ load, subthings, routes, unload }) {
64 | const Sub = subthings
65 | return (
66 | This is the loaded child
41 | 42 | Show new dynamic route 43 |
46 | This is the subroute dynamic route
47 |
48 | )}
49 | />
50 |
67 |
75 |
78 |
79 | )
80 | }
81 |
82 | SubRoutes.propTypes = {
83 | load: PropTypes.func.isRequired,
84 | unload: PropTypes.func.isRequired,
85 | subthings: PropTypes.any.isRequired,
86 | routes: PropTypes.array.isRequired,
87 | }
88 |
89 | export default connect(state => ({
90 | subthings: state.subroutes ? Subthings : Null,
91 | routes: state.routing.routes.ids.map(id => `${id} (${state.routing.routes.routes[id].path})`)
92 | }), dispatch => ({
93 | load: () => dispatch({ type: 'SUBROUTE', payload: true }),
94 | unload: () => dispatch({ type: 'SUBROUTE', payload: false }),
95 | }))(SubRoutes)
96 |
--------------------------------------------------------------------------------
/.travis.yml:
--------------------------------------------------------------------------------
1 | language: node_js
2 | node_js:
3 | - node
4 | before_script:
5 | - curl -L https://codeclimate.com/downloads/test-reporter/test-reporter-latest-linux-amd64 > ./cc-test-reporter
6 | - chmod +x ./cc-test-reporter
7 | - ./cc-test-reporter before-build
8 | script:
9 | - npm run build
10 | - npm run lint
11 | - npm test
12 | after_script:
13 | - ./cc-test-reporter upload-coverage coverage/lcov.info
14 | - ./cc-test-reporter after-build --exit-code $TRAVIS_TEST_RESULT
15 | addons:
16 | code_climate:
17 | repo_token: 397a76c7a85f125871038a8628f6db16f4ce916e74c2dcfeea3f21364f946f7a
18 | browserstack:
19 | username: gregorybeaver1
20 | access_key:
21 | secure: xiqQi/vfYMDTCocRW0gSpoZLJR0nt+YVkxkwK9VTDvxJNWjKZ4UwBL8SukVE12JeQ/9IzpGwYeCXFkUl7tuEW5OcQmS6E/oPoDsxbKu0nebWzA3WWByTZGmTMyg2hziYIEsXvV4lYkliSfOxtssrjcgXl8vJXBgBXCHebEshZ5h4n6qnULPumpqHvb0cs5j+fhuHBo5u/Kk7f82LjYyhVYrsTxEIx7ippszlKYr3pX9MhCuaCAnimQO1ki787YcIqFQYfFlffFl5L13kNSkCIsgyblOwuC1MclgXLerfgaDAMfSTCP1haFfvmDmVpGPoHCX8rwLg2KsJPNRb7tG34C4MFkA/nzbFRiaN/vul791wGPNYJzfl91uNxflIsMkajX5SQNaM3BOCxaC8JBgICfNLer8qkb19qAHrEJw+J/FK+2FTg/jOjFCL4U7ZnTxvkG0Mja5LG9iZjZu1vxGhRSchGhmPJLLQ+7dyJfbLchqR4iTjxa2iddy3lUrn3Sjq9WZiVAlSrxZlLAHLnJItfjAiGTX1rjXx55xTIwlvJxsLnJxexf7V3P0mvYMr1yO9p9oi4ZsXXhYRX/t4t55nT5rPbaoNl69bfZ945gKeLZ8U5vwksMESSn0QXj8xJbqRnCPUoWPuRkCJE26cduVTv1g391laU9x/dmBONL1Vb9I=
22 | env:
23 | global:
24 | - CC_TEST_REPORTER_ID=397a76c7a85f125871038a8628f6db16f4ce916e74c2dcfeea3f21364f946f7a
25 | - BS_AUTOMATE_PROJECT="$TRAVIS_REPO_SLUG"
26 | - BS_AUTOMATE_BUILD="Travis build No. $TRAVIS_BUILD_NUMBER for $TRAVIS_REPO_SLUG"
27 | - secure: JVMt/12KHonj87WiUxTK+WCU8eV1bWnd6IG1qSHU5VyDvuGdj+Ls8ACKiu7EsUfh0BGHGhn8/BNDIr5ZRqcKcFKpl4rkawFIO2BeMKeEIve8mwTLv+5g1RPavoU96XIepFnGhnBGlp/2wlP850JFv7ScczrSaIqanTz9HuSvSoyF5IgkNi4BxoyxCAZKUU1Rqvpc6Ybq38qjr4yyEj3gAoWRBM9UMfLtz3uD7KRRhAnX9F3LKbyuxoRPfH/iA/F9Ii9ZA1d+BX8mdHKPwCfyMmUIemvl9xcstjYZ50t4YikkmNbbzjBmXm6pRvVaNYHqSTcStfgXqgsVTxLx6GYkOzPd0J/83pSdcI+COL/tPfJ2ufIkampSCPrii0inCSei1OfwudJnBM7hk69AbdTXaiW0H5LdU1Y6GhUpmO4aSVQpfbmIkZBXrB6xwyfrYrRlxQmSOs+U6ginXaS7G2bC0I6xvqp4mo/WNI4pjemRkG0cO4HZYKLdkr8YXj8WProXgPMEou+A0cSP/4g+EP072smKIH96IvpOeNAKIH/3I/cOq5f3TWe4c5NqSc6TREdDrGpMKGEfoC/GjYB7k/Km7ScFKem7JUUDezElDakuOpeqcZ1aVppKIT5yKSk/yyxRo5aI4NuLS66zwCiE11lgTxKOUvUQD9Dz7XOf0HMIhXI=
28 | - secure: KwGW1nE7EcAzrlM1wMIpBOe2gRqqni8fkAPI5f74hswnyjgfhaTcq0OHBCzWkDF77k+8uTA9g4gtg1wlM/ReW3EkaPQyvp2NZuJyl6DEPVWhEHKOcNu2LwlZ/rI/y+fCtB4iU1132/LOnC5tHEZeeLUC+mekSORreZLkoSSU/shY5hg01VRJMvcFAAVT2WvZvf67LTcABqsIAiDvgsDlUoFZ9lekykaswZItfY1S1OpkwIMAVYCwmP2IHvR2/WbQwrOEk6OarCzBX1jrJdMJ7BfctZuFKPf/sgTZq8/CskIzIBsiLGOoIFAX2eTIXIQJBb7e1+CN9HCV/17qn1bKKZR8YBeMgxdvYWLq+LjizGhOJdjpwOioa0G3EE8G4EXRWdwF6Pz7xhvye37COPF0hqqOEOvv5tjAxpqiKw8Iuj2Dw1xsceqwL8QHrkeGmf4La2w94Wz+OR5oX0WXb6r/wIV0XqXWYtg0ziYrle2tSDmeoLOQdsimLidjdfulZJJUvs3ZH90JyfMm6uMTtrDCDYH+1WHjrplHpafDO/G/dX5BprHSj9Fs9xC8kpMe9kXQ7RIfIQN0AsHy1BHSg1hDF4YZDmZDsw1FR7ZuHvlEY/YZbZ+3xmAvieZOlL6fwWMLAAO/ZuJHFq/4NJRTRe3nMpl6CefI7FYFJ8TCsgzdMoM=
29 |
--------------------------------------------------------------------------------
/docs/src/App.css:
--------------------------------------------------------------------------------
1 | .App {
2 | text-align: center;
3 | }
4 |
5 | .App-logo {
6 | animation: App-logo-spin infinite 20s linear;
7 | height: 80px;
8 | }
9 |
10 | .App-header {
11 | background-color: #222;
12 | height: 10vh;
13 | min-height: 50px;
14 | padding: 20px;
15 | color: white;
16 | }
17 |
18 | .markdown-viewer {
19 | padding: 20px;
20 | height: 90vh;
21 | overflow-y: scroll;
22 | }
23 |
24 | .App-intro {
25 | font-size: large;
26 | text-align: left;
27 | }
28 |
29 | @keyframes App-logo-spin {
30 | from { transform: rotate(0deg); }
31 | to { transform: rotate(360deg); }
32 | }
33 |
34 | .browser {
35 | display: flex;
36 | flex-direction: column;
37 | border: 1px solid #dddddd;
38 | height: 100vh;
39 | width: 400px;
40 | border-radius: 5px;
41 | }
42 |
43 | .browser header {
44 | display: flex;
45 | flex-direction: row;
46 | padding: 10px;
47 | background-color: #dddddd;
48 | }
49 |
50 | .browser header input {
51 | flex-grow: 2;
52 | }
53 |
54 | .browser article {
55 | border: 2px ridge black;
56 | padding: 5px;
57 | width: 386px;
58 | overflow-y: scroll;
59 | flex-grow: 2;
60 | }
61 |
62 | .mobile-showsource {
63 | display: none;
64 | }
65 |
66 | @media (max-width: 500px) {
67 | .browser {
68 | width: 99vw;
69 | }
70 | .browser article {
71 | width: 95vw;
72 | }
73 | .mobile-showsource {
74 | display: block;
75 | }
76 |
77 | .example .source-panel .mobile-showsource {
78 | border: 1px solid black;
79 | }
80 | }
81 |
82 | .example {
83 | display: flex;
84 | flex-direction: row;
85 | }
86 |
87 | .example .source-panel {
88 | padding-left: 30px;
89 | overflow-y: scroll;
90 | height: 100vh;
91 | }
92 |
93 | /* Position and sizing of burger button */
94 | .bm-burger-button {
95 | position: fixed;
96 | width: 36px;
97 | height: 30px;
98 | left: 36px;
99 | top: 36px;
100 | }
101 |
102 | /* Color/shape of burger icon bars */
103 | .bm-burger-bars {
104 | background: white; /*#373a47;*/
105 | }
106 |
107 | /* Position and sizing of clickable cross button */
108 | .bm-cross-button {
109 | height: 24px;
110 | width: 24px;
111 | }
112 |
113 | /* Color/shape of close button cross */
114 | .bm-cross {
115 | background: #bdc3c7;
116 | }
117 |
118 | /* General sidebar styles */
119 | .bm-menu {
120 | background: #373a47;
121 | padding: 2.5em 1.5em 0;
122 | font-size: 1.15em;
123 | text-align: left;
124 | }
125 |
126 | /* Morph shape necessary with bubble or elastic */
127 | .bm-morph-shape {
128 | fill: #373a47;
129 | }
130 |
131 | /* Wrapper for item list */
132 | .bm-item-list {
133 | color: #b8b7ad;
134 | padding: 0.8em;
135 | }
136 |
137 | .bm-item-list li {
138 | list-style: none;
139 | }
140 | .bm-item-list ul {
141 | margin: 0;
142 | }
143 |
144 | /* Styling of overlay */
145 | .bm-overlay {
146 | background: rgba(0, 0, 0, 0.3);
147 | }
148 |
149 | .menu-item {
150 | color: white;
151 | text-decoration: none;
152 | padding-bottom: 20px;
153 | }
154 | .menu-item:hover {
155 | color: red;
156 | }
157 |
--------------------------------------------------------------------------------
/src/Toggle.tsx:
--------------------------------------------------------------------------------
1 | import React, { memo } from 'react'
2 | import { useSelector } from 'react-redux'
3 |
4 | import DisplaysChildren from './DisplaysChildren'
5 | import { FullStateWithRouter } from './selectors'
6 |
7 | export type ReduxSelectorThis example demonstrates asynchronous loading of a sub-module with dynamic routes
68 |Declared routes:
69 |-
70 | {routes.map(route =>
- {route} )} 71 |
55 |
103 | ({
107 | first: params.first || '',
108 | second: params.second || 0,
109 | third: params.third ? params.third.split('/') : []
110 | })}
111 | paramsFromState={state => ({
112 | first: state.statechange.first,
113 | second: state.statechange.second ? state.statechange.second : undefined,
114 | third: state.statechange.third.join('/')
115 | })}
116 | updateState={{
117 | first: first => ({ type: 'ONE', payload: first }),
118 | second: second => ({ type: 'TWO', payload: second }),
119 | third: third => ({ type: 'THREE', payload: third }),
120 | }}
121 | />
122 |
123 |
124 | )
125 | }
126 | }
127 |
128 | StateChanges.propTypes = {
129 | first: PropTypes.string.isRequired,
130 | second: PropTypes.number.isRequired,
131 | third: PropTypes.array.isRequired,
132 | setFirst: PropTypes.func.isRequired,
133 | setSecond: PropTypes.func.isRequired,
134 | setThird: PropTypes.func.isRequired,
135 | }
136 |
137 | export default connect(state => ({
138 | first: state.statechange.first,
139 | second: state.statechange.second,
140 | third: state.statechange.third
141 | }), dispatch => ({
142 | setFirst: first => dispatch({ type: 'ONE', payload: first }),
143 | setSecond: second => dispatch({ type: 'TWO', payload: +second }),
144 | setThird: third => dispatch({ type: 'THREE', payload: third }),
145 | }))(StateChanges)
146 |
--------------------------------------------------------------------------------
/test/RouteToggle.test.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 |
3 | import RouteToggle from '../src/RouteToggle'
4 | import { renderComponent } from './test_helper'
5 | import * as rtl from '@testing-library/react'
6 |
7 | describe('RouteToggle', () => {
8 | afterEach(() => rtl.cleanup())
9 | const Component = (
10 | props: any // eslint-disable-next-line
11 | ) => (
12 | This demonstration has no links, but updates URL
56 |-
57 |
- 58 | First state: 59 | this.props.setFirst(e.target.value)} 62 | value={this.props.first} 63 | /> 64 | 65 |
- 66 | Second state: 67 | this.props.setSecond(e.target.value)} 70 | value={this.props.second} 71 | /> 72 | 73 |
-
74 | Third state:
75 |
-
76 | {this.props.third.map((item, i) => (
77 |
- 78 | {item} 79 | 86 | 87 | ))} 88 |
101 |
13 | hi{' '}
14 | {Object.keys(props).map(prop => (
15 |
20 | )
21 | let Route, state // eslint-disable-line
22 | describe('initialized', () => {
23 | beforeEach(() => {
24 | Route = RouteToggle('test')
25 | })
26 | test('renders the component if the route matches', () => {
27 | const container = renderComponent(
28 | Route,
29 | { component: Component, foo: 'bar' },
30 | {
31 | week: 1,
32 | routing: {
33 | location: {
34 | pathname: '',
35 | hash: '',
36 | search: '',
37 | },
38 | routes: {
39 | test: {
40 | name: 'test',
41 | path: '/test',
42 | },
43 | },
44 | matchedRoutes: ['test'],
45 | },
46 | }
47 | )
48 | expect(container.getByTestId('foo')).toHaveTextContent('bar')
49 | })
50 | test('does not render the component if the route matches', () => {
51 | const container = renderComponent(
52 | Route,
53 | { component: Component, foo: 'bar' },
54 | {
55 | week: 1,
56 | routing: {
57 | location: {
58 | pathname: '',
59 | hash: '',
60 | search: '',
61 | },
62 | routes: {
63 | test: {
64 | name: 'test',
65 | path: '/test',
66 | },
67 | },
68 | matchedRoutes: ['no'],
69 | },
70 | }
71 | )
72 | expect(container.queryByTestId('foo')).toBe(null)
73 | })
74 | test('does not render the component if the route matches, but other does not', () => {
75 | const Route = RouteToggle('test', () => false)
76 |
77 | const container = renderComponent(
78 | Route,
79 | { component: Component, foo: 'bar' },
80 | {
81 | week: 1,
82 | routing: {
83 | location: {
84 | pathname: '',
85 | hash: '',
86 | search: '',
87 | },
88 | routes: {
89 | test: {
90 | name: 'test',
91 | path: '/test',
92 | },
93 | },
94 | matchedRoutes: ['test'],
95 | },
96 | }
97 | )
98 | expect(container.queryByTestId('foo')).toBe(null)
99 | })
100 | test('does not call state if loaded returns false', () => {
101 | const spy = jest.fn()
102 | spy.mockReturnValue(true)
103 | const loaded = jest.fn()
104 | spy.mockReturnValue(false)
105 | const R = RouteToggle('test', spy, loaded)
106 | const container = renderComponent(
107 | R,
108 | { component: Component, foo: 'bar', week: 1 },
109 | {
110 | week: 1,
111 | routing: {
112 | location: {
113 | pathname: '',
114 | hash: '',
115 | search: '',
116 | },
117 | routes: {
118 | test: {
119 | name: 'test',
120 | path: '/test',
121 | },
122 | },
123 | matchedRoutes: ['no'],
124 | },
125 | }
126 | )
127 |
128 | expect(spy.mock.calls.length).toBe(0)
129 | expect(loaded.mock.calls.length).toBe(2)
130 | expect(container.queryByTestId('foo')).toBe(null)
131 | })
132 | test('componentLoadingMap', () => {
133 | const R = RouteToggle(
134 | 'test',
135 | () => true,
136 | () => true,
137 | {
138 | component: 'bobby',
139 | loadingComponent: 'frenzel',
140 | else: 'blah',
141 | }
142 | )
143 | const Show = props => (
144 |
16 | {props[prop]}
17 |
18 | ))}
19 | -
145 | {Object.keys(props).map(prop => (
146 |
- 147 | {JSON.stringify(props[prop])} 148 | 149 | ))} 150 |
foo
62 |
63 | -
162 | {Object.keys(props).map(prop => (
163 |
- {prop} 164 | ))} 165 |
18 | hi{' '}
19 | {Object.keys(props).map(prop => (
20 |
25 | )
26 | }
27 | let Route, state // eslint-disable-line
28 | afterEach(() => rtl.cleanup())
29 | test("should not freak out if we don't initialize", () => {
30 | const R = Toggle(() => true)
31 | expect(() =>
32 | renderComponent(R, { component: Component, foo: 'bar' }, { week: 1 })
33 | ).not.toThrow(
34 | 'call connectToggle with the connect function from react-redux to ' +
35 | 'initialize Toggle (see https://github.com/cellog/ion-router/issues/1)'
36 | )
37 | })
38 | describe('initialized', () => {
39 | let store
40 | beforeEach(() => {
41 | store = sagaStore(state)
42 | Route = Toggle((s, p) => {
43 | return s.week || p.week
44 | })
45 | })
46 | test('renders the component if the state tester returns true', async () => {
47 | const container = renderComponent(
48 | Route,
49 | { component: Component, foo: 'bar' },
50 | { week: 1 },
51 | false,
52 | store
53 | )
54 | await rtl.waitForElement(() => container.getByTestId('foo'))
55 | expect(container.getByTestId('foo')).toHaveTextContent('bar')
56 | })
57 | test('re-renders if props change', async () => {
58 | const container = renderComponent(
59 | Route,
60 | { component: Component, foo: 'bar' },
61 | { week: 1 },
62 | false,
63 | store
64 | )
65 | await rtl.waitForElement(() => container.getByTestId('foo'))
66 | container.rerender(
67 | { component: Component, foo: 'baz' },
68 | { week: 1 },
69 | false,
70 | store
71 | )
72 | await rtl.waitForElement(() => container.getByText('baz'))
73 | expect(container.getByTestId('foo')).toHaveTextContent('baz')
74 | expect(rendered).toBe(2)
75 | })
76 | test("does not re-render if props don't change", async () => {
77 | const container = renderComponent(
78 | Route,
79 | { component: Component, foo: 'bar' },
80 | { week: 1 },
81 | false,
82 | store
83 | )
84 | await rtl.waitForElement(() => container.getByTestId('foo'))
85 | container.rerender(
86 | { component: Component, foo: 'bar' },
87 | { week: 1 },
88 | false,
89 | store
90 | )
91 | container.rerender(
92 | { component: Component, foo: 'bar' },
93 | { week: 1 },
94 | false,
95 | store
96 | )
97 | await rtl.waitForElement(() => container.getByText('bar'))
98 | expect(container.getByTestId('foo')).toHaveTextContent('bar')
99 | expect(rendered).toBe(1)
100 | })
101 | test('renders the component if the state tester returns true from props', async () => {
102 | const container = renderComponent(
103 | Route,
104 | { component: Component, foo: 'bar', week: 1 },
105 | { week: 0 }
106 | )
107 | await rtl.waitForElement(() => container.getByTestId('foo'))
108 | expect(container.getByTestId('foo')).toHaveTextContent('bar')
109 | })
110 | test('renders null if the state tester returns false', () => {
111 | const container = renderComponent(
112 | Route,
113 | { component: Component, foo: 'bar' },
114 | { week: 0 }
115 | )
116 | expect(container.queryByTestId('foo')).toBe(null)
117 | })
118 | test('renders else if the state tester returns false', () => {
119 | const Else = () =>
21 | {props[prop]}
22 |
23 | ))}
24 | else
120 | const container = renderComponent(
121 | Route,
122 | { component: Component, else: Else },
123 | { week: 0 }
124 | )
125 | expect(container.getByText('else')).toHaveTextContent('else')
126 | })
127 | test('does not call state if loaded returns false', () => {
128 | const spy = jest.fn()
129 | spy.mockReturnValue(true)
130 | const loaded = jest.fn()
131 | loaded.mockReturnValue(false)
132 | const R = Toggle(spy, loaded)
133 | renderComponent(
134 | R,
135 | { component: Component, foo: 'bar', week: 1 },
136 | { week: 0 }
137 | )
138 |
139 | expect(spy.mock.calls.length).toBe(0)
140 | expect(loaded.mock.calls.length).toBe(2)
141 | })
142 | test('renders loading element if state is still loading', () => {
143 | const R = Toggle(
144 | () => true,
145 | () => false
146 | )
147 | const container = renderComponent(R, {
148 | component: Component,
149 | loadingComponent: () => Loading...
,
150 | }) // eslint-disable-line react/display-name
151 | expect(container.queryByText('Loading...')).not.toBe(null)
152 | })
153 | test('componentLoadingMap', () => {
154 | const R = Toggle(
155 | () => true,
156 | () => true,
157 | {
158 | component: 'bobby',
159 | loadingComponent: 'frenzel',
160 | else: 'blah',
161 | }
162 | )
163 | const Show = props => (
164 | -
165 | {Object.keys(props).map(prop => (
166 |
- 167 | {JSON.stringify(props[prop])} 168 | 169 | ))} 170 |
testing
195 | -
209 |
- hi 210 |
- there 211 |
98 |
99 |
107 | )
108 | const Thing = () => (
109 | -
100 | {Object.keys(props).map(prop => (
101 |
- 102 | {prop} 103 | 104 | ))} 105 |
159 |
167 | )
168 | const Thing = () => (
169 | -
160 | {Object.keys(props).map(prop => (
161 |
- 162 | {JSON.stringify(props[prop])} 163 | 164 | ))} 165 |
hi
187 | there
188 | hi
222 | there
223 |