From 92675e1fba327f41b860411112655e8a6b52be82 Mon Sep 17 00:00:00 2001 From: Nathan Bierema Date: Sun, 9 Aug 2020 20:33:29 -0400 Subject: [PATCH] stash --- .../demo/src/js/index.js | 2 +- .../demo/src/js/DemoApp.jsx | 2 +- .../demo/src/js/DevTools.jsx | 42 ++++++ .../demo/src/js/getOptions.js | 10 +- .../demo/src/js/index.js | 106 +++++----------- .../demo/src/js/reducers.js | 120 +++++++++--------- .../package.json | 4 + 7 files changed, 145 insertions(+), 141 deletions(-) create mode 100644 packages/redux-devtools-test-generator/demo/src/js/DevTools.jsx diff --git a/packages/redux-devtools-inspector/demo/src/js/index.js b/packages/redux-devtools-inspector/demo/src/js/index.js index 0d20e0c7..bf54b977 100644 --- a/packages/redux-devtools-inspector/demo/src/js/index.js +++ b/packages/redux-devtools-inspector/demo/src/js/index.js @@ -47,8 +47,8 @@ render( - {!useDevtoolsExtension && } + {!useDevtoolsExtension && } , document.getElementById('root') diff --git a/packages/redux-devtools-test-generator/demo/src/js/DemoApp.jsx b/packages/redux-devtools-test-generator/demo/src/js/DemoApp.jsx index 70bdc712..41c2fbef 100644 --- a/packages/redux-devtools-test-generator/demo/src/js/DemoApp.jsx +++ b/packages/redux-devtools-test-generator/demo/src/js/DemoApp.jsx @@ -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 (
diff --git a/packages/redux-devtools-test-generator/demo/src/js/DevTools.jsx b/packages/redux-devtools-test-generator/demo/src/js/DevTools.jsx new file mode 100644 index 00000000..2cee7cdb --- /dev/null +++ b/packages/redux-devtools-test-generator/demo/src/js/DevTools.jsx @@ -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( + + [ + { + name: 'Test', + component: TestGenerator, + }, + ...defaultTabs, + ]} + /> + + ); + +const UnconnectedDevTools = ({ location }) => { + const DevTools = getDevTools(location); + return ; +}; + +const mapStateToProps = (state) => ({ + location: state.router.location, +}); + +export const ConnectedDevTools = connect(mapStateToProps)(UnconnectedDevTools); diff --git a/packages/redux-devtools-test-generator/demo/src/js/getOptions.js b/packages/redux-devtools-test-generator/demo/src/js/getOptions.js index f18e133d..b26e8222 100644 --- a/packages/redux-devtools-test-generator/demo/src/js/getOptions.js +++ b/packages/redux-devtools-test-generator/demo/src/js/getOptions.js @@ -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, }; } diff --git a/packages/redux-devtools-test-generator/demo/src/js/index.js b/packages/redux-devtools-test-generator/demo/src/js/index.js index d2f8d902..da3e7cfb 100644 --- a/packages/redux-devtools-test-generator/demo/src/js/index.js +++ b/packages/redux-devtools-test-generator/demo/src/js/index.js @@ -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( - - [ - { - name: 'Test', - component: TestGenerator, - }, - ...defaultTabs, - ]} - /> - - ); - 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 = ( - - - -); - -const renderApp = (options) => { - DevTools = getDevTools(options); - const useDevtoolsExtension = - !!window.__REDUX_DEVTOOLS_EXTENSION__ && options.useExtension; - - return render( - +render( + + - {router} - {!useDevtoolsExtension && } + + + + {!useDevtoolsExtension && } - , - document.getElementById('root') - ); -}; - -renderApp(getOptions()); + + , + document.getElementById('root') +); diff --git a/packages/redux-devtools-test-generator/demo/src/js/reducers.js b/packages/redux-devtools-test-generator/demo/src/js/reducers.js index 1a8947c9..c82bc80c 100644 --- a/packages/redux-devtools-test-generator/demo/src/js/reducers.js +++ b/packages/redux-devtools-test-generator/demo/src/js/reducers.js @@ -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; diff --git a/packages/redux-devtools-test-generator/package.json b/packages/redux-devtools-test-generator/package.json index e90a7be8..0758e859 100644 --- a/packages/redux-devtools-test-generator/package.json +++ b/packages/redux-devtools-test-generator/package.json @@ -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"