This commit is contained in:
Nathan Bierema 2020-08-09 20:33:29 -04:00
parent 7924f32f3e
commit 92675e1fba
7 changed files with 145 additions and 141 deletions

View File

@ -47,8 +47,8 @@ render(
<ConnectedRouter history={history}>
<Route path={ROOT}>
<DemoApp />
{!useDevtoolsExtension && <ConnectedDevTools />}
</Route>
{!useDevtoolsExtension && <ConnectedDevTools />}
</ConnectedRouter>
</Provider>,
document.getElementById('root')

View File

@ -26,7 +26,7 @@ const ROOT = '/'; // process.env.NODE_ENV === 'production' ? '/' : '/';
class DemoApp extends React.Component {
render() {
const options = getOptions();
const options = getOptions(this.props.router.location);
return (
<div style={styles.wrapper}>

View File

@ -0,0 +1,42 @@
import React from 'react';
import { connect } from 'react-redux';
import { createDevTools } from 'redux-devtools';
import DevtoolsInspector from 'redux-devtools-inspector';
import DockMonitor from 'redux-devtools-dock-monitor';
import getOptions from './getOptions';
import TestGenerator from '../../../src';
export const getDevTools = (location) =>
createDevTools(
<DockMonitor
defaultIsVisible
toggleVisibilityKey="ctrl-h"
changePositionKey="ctrl-q"
changeMonitorKey="ctrl-m"
>
<DevtoolsInspector
theme={getOptions(location).theme}
shouldPersistState
invertTheme={!getOptions(location).dark}
supportImmutable={getOptions(location).supportImmutable}
tabs={(defaultTabs) => [
{
name: 'Test',
component: TestGenerator,
},
...defaultTabs,
]}
/>
</DockMonitor>
);
const UnconnectedDevTools = ({ location }) => {
const DevTools = getDevTools(location);
return <DevTools />;
};
const mapStateToProps = (state) => ({
location: state.router.location,
});
export const ConnectedDevTools = connect(mapStateToProps)(UnconnectedDevTools);

View File

@ -1,11 +1,11 @@
export default function getOptions() {
export default function getOptions(location) {
return {
useExtension: window.location.search.indexOf('ext') !== -1,
supportImmutable: window.location.search.indexOf('immutable') !== -1,
useExtension: location.search.indexOf('ext') !== -1,
supportImmutable: location.search.indexOf('immutable') !== -1,
theme: do {
const match = window.location.search.match(/theme=([^&]+)/);
const match = location.search.match(/theme=([^&]+)/);
match ? match[1] : 'inspector';
},
dark: window.location.search.indexOf('dark') !== -1,
dark: location.search.indexOf('dark') !== -1,
};
}

View File

@ -5,62 +5,37 @@ import { render } from 'react-dom';
import { Container } from 'devui';
import DemoApp from './DemoApp';
import { Provider } from 'react-redux';
import reducers from './reducers';
import { createStore, applyMiddleware, compose, combineReducers } from 'redux';
import createRootReducer from './reducers';
import { createStore, applyMiddleware, compose } from 'redux';
import logger from 'redux-logger';
import { Router, Route, browserHistory } from 'react-router';
import {
syncHistoryWithStore,
routerReducer,
routerMiddleware,
} from 'react-router-redux';
import { createDevTools, persistState } from 'redux-devtools';
import DevtoolsInspector from 'redux-devtools-inspector';
import DockMonitor from 'redux-devtools-dock-monitor';
import { Route } from 'react-router';
import { createBrowserHistory } from 'history';
import { ConnectedRouter, routerMiddleware } from 'connected-react-router';
import { persistState } from 'redux-devtools';
import getOptions from './getOptions';
import TestGenerator from '../../../src';
import { ConnectedDevTools, getDevTools } from './DevTools';
function getDebugSessionKey() {
const matches = window.location.href.match(/[?&]debug_session=([^&#]+)\b/);
return matches && matches.length > 0 ? matches[1] : null;
}
const getDevTools = (options) =>
createDevTools(
<DockMonitor
defaultIsVisible
toggleVisibilityKey="ctrl-h"
changePositionKey="ctrl-q"
changeMonitorKey="ctrl-m"
>
<DevtoolsInspector
theme={options.theme}
shouldPersistState
invertTheme={!options.dark}
supportImmutable={options.supportImmutable}
tabs={(defaultTabs) => [
{
name: 'Test',
component: TestGenerator,
},
...defaultTabs,
]}
/>
</DockMonitor>
);
const ROOT =
process.env.NODE_ENV === 'production' ? '/redux-devtools-inspector/' : '/';
process.env.NODE_ENV === 'production'
? '/redux-devtools-test-generator/'
: '/';
let DevTools = getDevTools(getOptions());
const DevTools = getDevTools(window.location);
const reduxRouterMiddleware = routerMiddleware(browserHistory);
const history = createBrowserHistory();
const useDevtoolsExtension =
!!window.__REDUX_DEVTOOLS_EXTENSION__ &&
getOptions(window.location).useExtension;
const enhancer = compose(
applyMiddleware(logger, reduxRouterMiddleware),
applyMiddleware(logger, routerMiddleware(history)),
(...args) => {
const useDevtoolsExtension =
!!window.__REDUX_DEVTOOLS_EXTENSION__ && getOptions().useExtension;
const instrument = useDevtoolsExtension
? window.__REDUX_DEVTOOLS_EXTENSION__()
: DevTools.instrument();
@ -69,43 +44,20 @@ const enhancer = compose(
persistState(getDebugSessionKey())
);
const store = createStore(
combineReducers({
...reducers,
routing: routerReducer,
}),
{},
enhancer
);
const store = createStore(createRootReducer(history), {}, enhancer);
const history = syncHistoryWithStore(browserHistory, store);
const handleRouterUpdate = () => {
renderApp(getOptions());
};
const router = (
<Router history={history} onUpdate={handleRouterUpdate}>
<Route path={ROOT} component={DemoApp} />
</Router>
);
const renderApp = (options) => {
DevTools = getDevTools(options);
const useDevtoolsExtension =
!!window.__REDUX_DEVTOOLS_EXTENSION__ && options.useExtension;
return render(
<Provider store={store}>
render(
<Provider store={store}>
<ConnectedRouter history={history}>
<Container
themeData={{ theme: 'default', scheme: 'default', light: true }}
>
{router}
{!useDevtoolsExtension && <DevTools />}
<Route path={ROOT}>
<DemoApp />
</Route>
{!useDevtoolsExtension && <ConnectedDevTools />}
</Container>
</Provider>,
document.getElementById('root')
);
};
renderApp(getOptions());
</ConnectedRouter>
</Provider>,
document.getElementById('root')
);

View File

@ -1,5 +1,7 @@
import Immutable from 'immutable';
import shuffle from 'lodash.shuffle';
import { combineReducers } from 'redux';
import { connectRouter } from 'connected-react-router';
const NESTED = {
long: {
@ -58,62 +60,66 @@ function createIterator() {
const DEFAULT_SHUFFLE_ARRAY = [0, 1, null, { id: 1 }, { id: 2 }, 'string'];
export default {
timeoutUpdateEnabled: (state = false, action) =>
action.type === 'TOGGLE_TIMEOUT_UPDATE'
? action.timeoutUpdateEnabled
: state,
store: (state = 0, action) =>
action.type === 'INCREMENT' ? state + 1 : state,
undefined: (state = { val: undefined }) => state,
null: (state = null) => state,
func: (state = () => {}) => state,
array: (state = [], action) =>
action.type === 'PUSH'
? [...state, Math.random()]
: action.type === 'POP'
? state.slice(0, state.length - 1)
: action.type === 'REPLACE'
? [Math.random(), ...state.slice(1)]
: state,
hugeArrays: (state = [], action) =>
action.type === 'PUSH_HUGE_ARRAY' ? [...state, ...HUGE_ARRAY] : state,
hugeObjects: (state = [], action) =>
action.type === 'ADD_HUGE_OBJECT' ? [...state, HUGE_OBJECT] : state,
iterators: (state = [], action) =>
action.type === 'ADD_ITERATOR' ? [...state, createIterator()] : state,
nested: (state = NESTED, action) =>
action.type === 'CHANGE_NESTED'
? {
...state,
long: {
nested: [
{
path: {
to: {
a: state.long.nested[0].path.to.a + '!',
const createRootReducer = (history) =>
combineReducers({
router: connectRouter(history),
timeoutUpdateEnabled: (state = false, action) =>
action.type === 'TOGGLE_TIMEOUT_UPDATE'
? action.timeoutUpdateEnabled
: state,
store: (state = 0, action) =>
action.type === 'INCREMENT' ? state + 1 : state,
undefined: (state = { val: undefined }) => state,
null: (state = null) => state,
func: (state = () => {}) => state,
array: (state = [], action) =>
action.type === 'PUSH'
? [...state, Math.random()]
: action.type === 'POP'
? state.slice(0, state.length - 1)
: action.type === 'REPLACE'
? [Math.random(), ...state.slice(1)]
: state,
hugeArrays: (state = [], action) =>
action.type === 'PUSH_HUGE_ARRAY' ? [...state, ...HUGE_ARRAY] : state,
hugeObjects: (state = [], action) =>
action.type === 'ADD_HUGE_OBJECT' ? [...state, HUGE_OBJECT] : state,
iterators: (state = [], action) =>
action.type === 'ADD_ITERATOR' ? [...state, createIterator()] : state,
nested: (state = NESTED, action) =>
action.type === 'CHANGE_NESTED'
? {
...state,
long: {
nested: [
{
path: {
to: {
a: state.long.nested[0].path.to.a + '!',
},
},
},
},
],
},
}
: state,
recursive: (state = [], action) =>
action.type === 'ADD_RECURSIVE' ? [...state, { ...RECURSIVE }] : state,
immutables: (state = [], action) =>
action.type === 'ADD_IMMUTABLE_MAP' ? [...state, IMMUTABLE_MAP] : state,
immutableNested: (state = IMMUTABLE_NESTED, action) =>
action.type === 'CHANGE_IMMUTABLE_NESTED'
? state.updateIn(
['long', 'nested', 0, 'path', 'to', 'a'],
(str) => str + '!'
)
: state,
addFunction: (state = null, action) =>
action.type === 'ADD_FUNCTION' ? { f: FUNC } : state,
addSymbol: (state = null, action) =>
action.type === 'ADD_SYMBOL' ? { s: window.Symbol('symbol') } : state,
shuffleArray: (state = DEFAULT_SHUFFLE_ARRAY, action) =>
action.type === 'SHUFFLE_ARRAY' ? shuffle(state) : state,
};
],
},
}
: state,
recursive: (state = [], action) =>
action.type === 'ADD_RECURSIVE' ? [...state, { ...RECURSIVE }] : state,
immutables: (state = [], action) =>
action.type === 'ADD_IMMUTABLE_MAP' ? [...state, IMMUTABLE_MAP] : state,
immutableNested: (state = IMMUTABLE_NESTED, action) =>
action.type === 'CHANGE_IMMUTABLE_NESTED'
? state.updateIn(
['long', 'nested', 0, 'path', 'to', 'a'],
(str) => str + '!'
)
: state,
addFunction: (state = null, action) =>
action.type === 'ADD_FUNCTION' ? { f: FUNC } : state,
addSymbol: (state = null, action) =>
action.type === 'ADD_SYMBOL' ? { s: window.Symbol('symbol') } : state,
shuffleArray: (state = DEFAULT_SHUFFLE_ARRAY, action) =>
action.type === 'SHUFFLE_ARRAY' ? shuffle(state) : state,
});
export default createRootReducer;

View File

@ -44,15 +44,18 @@
"@babel/preset-react": "^7.10.4",
"babel-loader": "^8.1.0",
"clean-webpack-plugin": "^3.0.0",
"connected-react-router": "^6.8.0",
"css-loader": "^4.2.1",
"enzyme": "^3.11.0",
"enzyme-adapter-react-16": "^1.15.3",
"enzyme-to-json": "^3.5.0",
"expect": "^26.2.0",
"file-loader": "^6.0.0",
"history": "^4.10.1",
"html-webpack-plugin": "^4.3.0",
"immutable": "^4.0.0-rc.12",
"jest": "^26.2.2",
"lodash.isequalwith": "^4.4.0",
"lodash.shuffle": "^4.2.0",
"react-dom": "^16.13.1",
"react-redux": "^7.2.1",
@ -64,6 +67,7 @@
"redux-devtools-inspector": "^0.13.0",
"redux-logger": "^3.0.6",
"rimraf": "^3.0.2",
"seamless-immutable": "^7.1.4",
"style-loader": "^1.2.1",
"webpack": "^4.44.1",
"webpack-dev-server": "^3.11.0"