From e972239059536b74d49739b3edd46f5026f69f46 Mon Sep 17 00:00:00 2001 From: Nathan Bierema Date: Thu, 28 Oct 2021 16:17:09 -0400 Subject: [PATCH] Format --- packages/redux-devtools-remote/.eslintrc.js | 2 +- packages/redux-devtools-remote/README.md | 185 ++++---- .../examples/buildAll.js | 4 +- .../examples/counter/.babelrc | 2 +- .../examples/counter/actions/counter.js | 6 +- .../examples/counter/components/Counter.js | 16 +- .../examples/counter/containers/App.js | 2 +- .../examples/counter/index.html | 3 +- .../examples/counter/reducers/counter.js | 12 +- .../examples/counter/reducers/index.js | 2 +- .../examples/counter/server.js | 17 +- .../examples/counter/store/configureStore.js | 15 +- .../counter/test/actions/counter.spec.js | 25 +- .../counter/test/components/Counter.spec.js | 8 +- .../counter/test/containers/App.spec.js | 2 +- .../examples/counter/webpack.config.js | 27 +- .../examples/node-counter/index.js | 34 +- .../examples/router/.babelrc | 6 +- .../examples/router/components/Footer.js | 29 +- .../examples/router/components/Header.js | 12 +- .../examples/router/components/MainSection.js | 44 +- .../examples/router/components/TodoItem.js | 37 +- .../router/components/TodoTextInput.js | 13 +- .../examples/router/containers/App.js | 11 +- .../examples/router/containers/Root.js | 4 +- .../examples/router/containers/Wrapper.js | 22 +- .../examples/router/index.html | 3 +- .../examples/router/reducers/index.js | 2 +- .../examples/router/reducers/todos.js | 86 ++-- .../examples/router/server.js | 17 +- .../examples/router/store/configureStore.js | 6 +- .../router/test/actions/todos.spec.js | 12 +- .../router/test/components/Footer.spec.js | 42 +- .../router/test/components/Header.spec.js | 4 +- .../test/components/MainSection.spec.js | 84 ++-- .../router/test/components/TodoItem.spec.js | 12 +- .../test/components/TodoTextInput.spec.js | 33 +- .../router/test/reducers/todos.spec.js | 442 +++++++++++------- .../examples/router/webpack.config.js | 36 +- .../examples/todomvc/.babelrc | 4 +- .../examples/todomvc/components/Footer.js | 29 +- .../examples/todomvc/components/Header.js | 12 +- .../todomvc/components/MainSection.js | 44 +- .../examples/todomvc/components/TodoItem.js | 37 +- .../todomvc/components/TodoTextInput.js | 13 +- .../examples/todomvc/containers/App.js | 11 +- .../examples/todomvc/index.html | 3 +- .../examples/todomvc/reducers/index.js | 2 +- .../examples/todomvc/reducers/todos.js | 86 ++-- .../examples/todomvc/server.js | 17 +- .../examples/todomvc/store/configureStore.js | 11 +- .../todomvc/test/actions/todos.spec.js | 12 +- .../todomvc/test/components/Footer.spec.js | 42 +- .../todomvc/test/components/Header.spec.js | 4 +- .../test/components/MainSection.spec.js | 84 ++-- .../todomvc/test/components/TodoItem.spec.js | 12 +- .../test/components/TodoTextInput.spec.js | 33 +- .../todomvc/test/reducers/todos.spec.js | 442 +++++++++++------- .../examples/todomvc/webpack.config.js | 36 +- .../examples/toggle-monitoring/.babelrc | 2 +- .../toggle-monitoring/actions/counter.js | 6 +- .../toggle-monitoring/actions/monitoring.js | 6 +- .../toggle-monitoring/components/Counter.js | 25 +- .../toggle-monitoring/containers/App.js | 2 +- .../examples/toggle-monitoring/index.html | 10 +- .../toggle-monitoring/reducers/counter.js | 12 +- .../toggle-monitoring/reducers/index.js | 2 +- .../examples/toggle-monitoring/server.js | 17 +- .../toggle-monitoring/store/configureStore.js | 14 +- .../test/actions/counter.spec.js | 25 +- .../test/components/Counter.spec.js | 8 +- .../test/containers/App.spec.js | 2 +- .../toggle-monitoring/webpack.config.js | 27 +- .../redux-devtools-remote/src/constants.ts | 4 +- 74 files changed, 1381 insertions(+), 1034 deletions(-) diff --git a/packages/redux-devtools-remote/.eslintrc.js b/packages/redux-devtools-remote/.eslintrc.js index 3f0a2994..090f9e70 100644 --- a/packages/redux-devtools-remote/.eslintrc.js +++ b/packages/redux-devtools-remote/.eslintrc.js @@ -3,5 +3,5 @@ module.exports = { parserOptions: { tsconfigRootDir: __dirname, project: ['./tsconfig.json'], - } + }, }; diff --git a/packages/redux-devtools-remote/README.md b/packages/redux-devtools-remote/README.md index 3162903d..8965858d 100644 --- a/packages/redux-devtools-remote/README.md +++ b/packages/redux-devtools-remote/README.md @@ -1,5 +1,4 @@ -Remote Redux DevTools -===================== +# Remote Redux DevTools ![Demo](demo.gif) @@ -18,60 +17,79 @@ There are 2 ways of usage depending if you're using other store enhancers (middl #### Add DevTools enhancer to your store If you have a basic [store](http://redux.js.org/docs/api/createStore.html) as described in the official [redux-docs](http://redux.js.org/index.html), simply replace: - ```javascript - import { createStore } from 'redux'; - const store = createStore(reducer); - ``` - with - ```javascript - import { createStore } from 'redux'; - import devToolsEnhancer from '@redux-devtools/remote'; - const store = createStore(reducer, devToolsEnhancer()); - // or const store = createStore(reducer, preloadedState, devToolsEnhancer()); - ``` - + +```javascript +import { createStore } from 'redux'; +const store = createStore(reducer); +``` + +with + +```javascript +import { createStore } from 'redux'; +import devToolsEnhancer from '@redux-devtools/remote'; +const store = createStore(reducer, devToolsEnhancer()); +// or const store = createStore(reducer, preloadedState, devToolsEnhancer()); +``` + > Note: passing enhancer as last argument requires redux@>=3.1.0 #### When to use DevTools compose helper - If you setup your store with [middlewares and enhancers](http://redux.js.org/docs/api/applyMiddleware.html) like [redux-saga](https://github.com/redux-saga/redux-saga) and similar, it is crucial to use `composeWithDevTools` export. Otherwise, actions dispatched from Redux DevTools will not flow to your middlewares. +If you setup your store with [middlewares and enhancers](http://redux.js.org/docs/api/applyMiddleware.html) like [redux-saga](https://github.com/redux-saga/redux-saga) and similar, it is crucial to use `composeWithDevTools` export. Otherwise, actions dispatched from Redux DevTools will not flow to your middlewares. - In that case change this: - ```javascript - import { createStore, applyMiddleware, compose } from 'redux'; - - const store = createStore(reducer, preloadedState, compose( - applyMiddleware(...middleware), +In that case change this: + +```javascript +import { createStore, applyMiddleware, compose } from 'redux'; + +const store = createStore( + reducer, + preloadedState, + compose( + applyMiddleware(...middleware) // other store enhancers if any - )); - ``` - to: - ```javascript - import { createStore, applyMiddleware } from 'redux'; - import { composeWithDevTools } from '@redux-devtools/remote'; - - const store = createStore(reducer, /* preloadedState, */ composeWithDevTools( - applyMiddleware(...middleware), + ) +); +``` + +to: + +```javascript +import { createStore, applyMiddleware } from 'redux'; +import { composeWithDevTools } from '@redux-devtools/remote'; + +const store = createStore( + reducer, + /* preloadedState, */ composeWithDevTools( + applyMiddleware(...middleware) // other store enhancers if any - )); - ``` - or with devTools' options: - ```javascript - import { createStore, applyMiddleware } from 'redux'; - import { composeWithDevTools } from '@redux-devtools/remote'; - - const composeEnhancers = composeWithDevTools({ realtime: true, port: 8000 }); - const store = createStore(reducer, /* preloadedState, */ composeEnhancers( - applyMiddleware(...middleware), + ) +); +``` + +or with devTools' options: + +```javascript +import { createStore, applyMiddleware } from 'redux'; +import { composeWithDevTools } from '@redux-devtools/remote'; + +const composeEnhancers = composeWithDevTools({ realtime: true, port: 8000 }); +const store = createStore( + reducer, + /* preloadedState, */ composeEnhancers( + applyMiddleware(...middleware) // other store enhancers if any - )); - ``` + ) +); +``` ### Enabling In order not to allow it in production by default, the enhancer will have effect only when `process.env.NODE_ENV === 'development'`. For Webpack you should add it as following (`webpack.config.dev.js`): + ```js // ... plugins: [ @@ -91,11 +109,12 @@ const store = createStore(reducer, devToolsEnhancer({ realtime: true })); ### Monitoring Use one of our monitor apps to inspect and dispatch actions: -* [redux-devtools-extension](https://github.com/reduxjs/redux-devtools/tree/main/extension) - Click "Remote" button (or press [`Cmd+Ctrl+Arrow up`](https://github.com/zalmoxisus/redux-devtools-extension#keyboard-shortcuts)) to open remote monitoring. -* [remotedev-rn-debugger](https://github.com/jhen0409/remotedev-rn-debugger) - Used in React Native debugger as a dock monitor. -* [atom-redux-devtools](https://github.com/zalmoxisus/atom-redux-devtools) - Used in Atom editor. -* [redux-dispatch-cli](https://github.com/jhen0409/redux-dispatch-cli) - A CLI tool for Redux remote dispatch. -* [vscode-redux-devtools](https://github.com/jkzing/vscode-redux-devtools) - Used in Visual Studio Code. + +- [redux-devtools-extension](https://github.com/reduxjs/redux-devtools/tree/main/extension) - Click "Remote" button (or press [`Cmd+Ctrl+Arrow up`](https://github.com/zalmoxisus/redux-devtools-extension#keyboard-shortcuts)) to open remote monitoring. +- [remotedev-rn-debugger](https://github.com/jhen0409/remotedev-rn-debugger) - Used in React Native debugger as a dock monitor. +- [atom-redux-devtools](https://github.com/zalmoxisus/atom-redux-devtools) - Used in Atom editor. +- [redux-dispatch-cli](https://github.com/jhen0409/redux-dispatch-cli) - A CLI tool for Redux remote dispatch. +- [vscode-redux-devtools](https://github.com/jkzing/vscode-redux-devtools) - Used in Visual Studio Code. Use [@redux-devtools/app](https://github.com/reduxjs/redux-devtools/tree/main/packages/redux-devtools-app) to create your own monitor app. @@ -103,57 +122,63 @@ Use [@redux-devtools/app](https://github.com/reduxjs/redux-devtools/tree/main/pa Use [@redux-devtools/cli](https://github.com/reduxjs/redux-devtools/tree/main/packages/redux-devtools-cli). You can import it in your `server.js` script and start remotedev server together with your development server: + ```js var reduxDevTools = require('@redux-devtools/cli'); reduxDevTools({ hostname: 'localhost', port: 8000 }); ``` + See [@redux-devtools/cli](https://github.com/reduxjs/redux-devtools/tree/main/packages/redux-devtools-cli) for more details. For React Native you can use [remotedev-rn-debugger](https://github.com/jhen0409/remotedev-rn-debugger), which already include `@redux-devtools/cli`. - ### Parameters -Name | Description -------------- | ------------- -`name` | *String* representing the instance name to be shown on the remote monitor. -`realtime` | *Boolean* specifies whether to allow remote monitoring. By default is `process.env.NODE_ENV === 'development'`. -`hostname` | *String* used to specify host for [@redux-devtools/cli](https://github.com/reduxjs/redux-devtools/tree/main/packages/redux-devtools-cli). If `port` is specified, default value is `localhost`. -`port` | *Number* used to specify host's port for [@redux-devtools/cli](https://github.com/reduxjs/redux-devtools/tree/main/packages/redux-devtools-cli). -`secure` | *Boolean* specifies whether to use `https` protocol for [@redux-devtools/cli](https://github.com/reduxjs/redux-devtools/tree/main/packages/redux-devtools-cli). -`maxAge` | *Number* of maximum allowed actions to be stored on the history tree, the oldest actions are removed once maxAge is reached. Default is `30`. -`actionsBlacklist` | *array* of actions to be hidden in DevTools. Overwrites corresponding global setting in the options page. See the example bellow. -`actionsWhitelist` | *array* of actions to be shown. All other actions will be hidden in DevTools. -`actionSanitizer` | *Function* which takes action object and id number as arguments, and should return action object back. See the example bellow. -`stateSanitizer` | *Function* which takes state object and index as arguments, and should return state object back. See the example bellow. -`startOn` | *String* or *Array of strings* indicating an action or a list of actions, which should start remote monitoring (when `realtime` is `false`). -`stopOn` | *String* or *Array of strings* indicating an action or a list of actions, which should stop remote monitoring. -`sendOn` | *String* or *Array of strings* indicating an action or a list of actions, which should trigger sending the history to the monitor (without starting it). *Note*: when using it, add a `fetch` polyfill if needed. -`sendOnError` | *Numeric* code: `0` - disabled (default), `1` - send all uncaught exception messages, `2` - send only reducers error messages. -`sendTo` | *String* url of the monitor to send the history when `sendOn` is triggered. By default is `${secure ? 'https' : 'http'}://${hostname}:${port}`. -`actionCreators` | *Array* or *Object* of action creators to dispatch remotely. See [the example](https://github.com/zalmoxisus/remote-redux-devtools/commit/b54652930dfd4e057991df8471c343957fd7bff7). -`shouldHotReload` | *Boolean* - if set to `false`, will not recompute the states on hot reloading (or on replacing the reducers). Default to `true`. - `shouldRecordChanges` | *Boolean* - if specified as `false`, it will not record the changes till clicked on "Start recording" button on the monitor app. Default is `true`. - `shouldStartLocked` | *Boolean* - if specified as `true`, it will not allow any non-monitor actions to be dispatched till `lockChanges(false)` is dispatched. Default is `false`. -`id` | *String* to identify the instance when sending the history triggered by `sendOn`. You can use, for example, user id here, to know who sent the data. -`suppressConnectErrors` | *Boolean* - if set to `false`, all socket errors thrown while trying to connect will be printed to the console, regardless of if they've been thrown before. This is primarily for suppressing `SocketProtocolError` errors, which get repeatedly thrown when trying to make a connection. Default is `true`. +| Name | Description | +| ----------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| `name` | _String_ representing the instance name to be shown on the remote monitor. | +| `realtime` | _Boolean_ specifies whether to allow remote monitoring. By default is `process.env.NODE_ENV === 'development'`. | +| `hostname` | _String_ used to specify host for [@redux-devtools/cli](https://github.com/reduxjs/redux-devtools/tree/main/packages/redux-devtools-cli). If `port` is specified, default value is `localhost`. | +| `port` | _Number_ used to specify host's port for [@redux-devtools/cli](https://github.com/reduxjs/redux-devtools/tree/main/packages/redux-devtools-cli). | +| `secure` | _Boolean_ specifies whether to use `https` protocol for [@redux-devtools/cli](https://github.com/reduxjs/redux-devtools/tree/main/packages/redux-devtools-cli). | +| `maxAge` | _Number_ of maximum allowed actions to be stored on the history tree, the oldest actions are removed once maxAge is reached. Default is `30`. | +| `actionsBlacklist` | _array_ of actions to be hidden in DevTools. Overwrites corresponding global setting in the options page. See the example bellow. | +| `actionsWhitelist` | _array_ of actions to be shown. All other actions will be hidden in DevTools. | +| `actionSanitizer` | _Function_ which takes action object and id number as arguments, and should return action object back. See the example bellow. | +| `stateSanitizer` | _Function_ which takes state object and index as arguments, and should return state object back. See the example bellow. | +| `startOn` | _String_ or _Array of strings_ indicating an action or a list of actions, which should start remote monitoring (when `realtime` is `false`). | +| `stopOn` | _String_ or _Array of strings_ indicating an action or a list of actions, which should stop remote monitoring. | +| `sendOn` | _String_ or _Array of strings_ indicating an action or a list of actions, which should trigger sending the history to the monitor (without starting it). _Note_: when using it, add a `fetch` polyfill if needed. | +| `sendOnError` | _Numeric_ code: `0` - disabled (default), `1` - send all uncaught exception messages, `2` - send only reducers error messages. | +| `sendTo` | _String_ url of the monitor to send the history when `sendOn` is triggered. By default is `${secure ? 'https' : 'http'}://${hostname}:${port}`. | +| `actionCreators` | _Array_ or _Object_ of action creators to dispatch remotely. See [the example](https://github.com/zalmoxisus/remote-redux-devtools/commit/b54652930dfd4e057991df8471c343957fd7bff7). | +| `shouldHotReload` | _Boolean_ - if set to `false`, will not recompute the states on hot reloading (or on replacing the reducers). Default to `true`. | +| `shouldRecordChanges` | _Boolean_ - if specified as `false`, it will not record the changes till clicked on "Start recording" button on the monitor app. Default is `true`. | +| `shouldStartLocked` | _Boolean_ - if specified as `true`, it will not allow any non-monitor actions to be dispatched till `lockChanges(false)` is dispatched. Default is `false`. | +| `id` | _String_ to identify the instance when sending the history triggered by `sendOn`. You can use, for example, user id here, to know who sent the data. | +| `suppressConnectErrors` | _Boolean_ - if set to `false`, all socket errors thrown while trying to connect will be printed to the console, regardless of if they've been thrown before. This is primarily for suppressing `SocketProtocolError` errors, which get repeatedly thrown when trying to make a connection. Default is `true`. | All parameters are optional. You have to provide at least `port` property to use `localhost` instead of `remotedev.io` server. Example: + ```js export default function configureStore(preloadedState) { const store = createStore( reducer, preloadedState, devToolsEnhancer({ - name: 'Android app', realtime: true, - hostname: 'localhost', port: 8000, - maxAge: 30, actionsBlacklist: ['EFFECT_RESOLVED'], - actionSanitizer: (action) => ( - action.type === 'FILE_DOWNLOAD_SUCCESS' && action.data ? - { ...action, data: '<>' } : action - ), - stateSanitizer: (state) => state.data ? { ...state, data: '<>' } : state + name: 'Android app', + realtime: true, + hostname: 'localhost', + port: 8000, + maxAge: 30, + actionsBlacklist: ['EFFECT_RESOLVED'], + actionSanitizer: (action) => + action.type === 'FILE_DOWNLOAD_SUCCESS' && action.data + ? { ...action, data: '<>' } + : action, + stateSanitizer: (state) => + state.data ? { ...state, data: '<>' } : state, }) ); return store; @@ -161,9 +186,11 @@ export default function configureStore(preloadedState) { ``` ### Demo + - [Toggle monitoring](http://zalmoxisus.github.io/monitoring/) ### Examples + - [Web](https://github.com/reduxjs/redux-devtools/tree/main/packages/redux-devtools-remote/examples) - [React Native](https://github.com/chentsulin/react-native-counter-ios-android) diff --git a/packages/redux-devtools-remote/examples/buildAll.js b/packages/redux-devtools-remote/examples/buildAll.js index 72653ba1..3a558760 100644 --- a/packages/redux-devtools-remote/examples/buildAll.js +++ b/packages/redux-devtools-remote/examples/buildAll.js @@ -13,7 +13,7 @@ var exampleDirs = fs.readdirSync(__dirname).filter((file) => { // Ordering is important here. `npm install` must come first. var cmdArgs = [ { cmd: 'npm', args: ['install'] }, - { cmd: 'webpack', args: ['index.js'] } + { cmd: 'webpack', args: ['index.js'] }, ]; for (const dir of exampleDirs) { @@ -21,7 +21,7 @@ for (const dir of exampleDirs) { // declare opts in this scope to avoid https://github.com/joyent/node/issues/9158 const opts = { cwd: path.join(__dirname, dir), - stdio: 'inherit' + stdio: 'inherit', }; let result = {}; if (process.platform === 'win32') { diff --git a/packages/redux-devtools-remote/examples/counter/.babelrc b/packages/redux-devtools-remote/examples/counter/.babelrc index 61058eb2..9b7d435a 100644 --- a/packages/redux-devtools-remote/examples/counter/.babelrc +++ b/packages/redux-devtools-remote/examples/counter/.babelrc @@ -1,3 +1,3 @@ { - "presets": [ "es2015", "stage-0", "react" ] + "presets": ["es2015", "stage-0", "react"] } diff --git a/packages/redux-devtools-remote/examples/counter/actions/counter.js b/packages/redux-devtools-remote/examples/counter/actions/counter.js index 214092e1..66b52d47 100644 --- a/packages/redux-devtools-remote/examples/counter/actions/counter.js +++ b/packages/redux-devtools-remote/examples/counter/actions/counter.js @@ -3,13 +3,13 @@ export const DECREMENT_COUNTER = 'DECREMENT_COUNTER'; export function increment() { return { - type: INCREMENT_COUNTER + type: INCREMENT_COUNTER, }; } export function decrement() { return { - type: DECREMENT_COUNTER + type: DECREMENT_COUNTER, }; } @@ -26,7 +26,7 @@ export function incrementIfOdd() { } export function incrementAsync(delay = 1000) { - return dispatch => { + return (dispatch) => { setTimeout(() => { dispatch(increment()); }, delay); diff --git a/packages/redux-devtools-remote/examples/counter/components/Counter.js b/packages/redux-devtools-remote/examples/counter/components/Counter.js index 9114f9c8..32cdce43 100644 --- a/packages/redux-devtools-remote/examples/counter/components/Counter.js +++ b/packages/redux-devtools-remote/examples/counter/components/Counter.js @@ -2,17 +2,13 @@ import React, { Component, PropTypes } from 'react'; class Counter extends Component { render() { - const { increment, incrementIfOdd, incrementAsync, decrement, counter } = this.props; + const { increment, incrementIfOdd, incrementAsync, decrement, counter } = + this.props; return (

- Clicked: {counter} times - {' '} - - {' '} - - {' '} - - {' '} + Clicked: {counter} times {' '} + {' '} + {' '}

); @@ -24,7 +20,7 @@ Counter.propTypes = { incrementIfOdd: PropTypes.func.isRequired, incrementAsync: PropTypes.func.isRequired, decrement: PropTypes.func.isRequired, - counter: PropTypes.number.isRequired + counter: PropTypes.number.isRequired, }; export default Counter; diff --git a/packages/redux-devtools-remote/examples/counter/containers/App.js b/packages/redux-devtools-remote/examples/counter/containers/App.js index 91e70318..47287ecf 100644 --- a/packages/redux-devtools-remote/examples/counter/containers/App.js +++ b/packages/redux-devtools-remote/examples/counter/containers/App.js @@ -5,7 +5,7 @@ import * as CounterActions from '../actions/counter'; function mapStateToProps(state) { return { - counter: state.counter + counter: state.counter, }; } diff --git a/packages/redux-devtools-remote/examples/counter/index.html b/packages/redux-devtools-remote/examples/counter/index.html index 1eff16a5..0f963144 100644 --- a/packages/redux-devtools-remote/examples/counter/index.html +++ b/packages/redux-devtools-remote/examples/counter/index.html @@ -4,8 +4,7 @@ Redux counter example -
-
+
diff --git a/packages/redux-devtools-remote/examples/counter/reducers/counter.js b/packages/redux-devtools-remote/examples/counter/reducers/counter.js index 84e96153..c16e5d44 100644 --- a/packages/redux-devtools-remote/examples/counter/reducers/counter.js +++ b/packages/redux-devtools-remote/examples/counter/reducers/counter.js @@ -2,11 +2,11 @@ import { INCREMENT_COUNTER, DECREMENT_COUNTER } from '../actions/counter'; export default function counter(state = 0, action) { switch (action.type) { - case INCREMENT_COUNTER: - return state + 1; - case DECREMENT_COUNTER: - return state - 1; - default: - return state; + case INCREMENT_COUNTER: + return state + 1; + case DECREMENT_COUNTER: + return state - 1; + default: + return state; } } diff --git a/packages/redux-devtools-remote/examples/counter/reducers/index.js b/packages/redux-devtools-remote/examples/counter/reducers/index.js index 98171093..eba07a15 100644 --- a/packages/redux-devtools-remote/examples/counter/reducers/index.js +++ b/packages/redux-devtools-remote/examples/counter/reducers/index.js @@ -2,7 +2,7 @@ import { combineReducers } from 'redux'; import counter from './counter'; const rootReducer = combineReducers({ - counter + counter, }); export default rootReducer; diff --git a/packages/redux-devtools-remote/examples/counter/server.js b/packages/redux-devtools-remote/examples/counter/server.js index 0fe70397..7e993c75 100644 --- a/packages/redux-devtools-remote/examples/counter/server.js +++ b/packages/redux-devtools-remote/examples/counter/server.js @@ -7,17 +7,26 @@ var app = new require('express')(); var port = 4001; var compiler = webpack(config); -app.use(webpackDevMiddleware(compiler, { noInfo: true, publicPath: config.output.publicPath })); +app.use( + webpackDevMiddleware(compiler, { + noInfo: true, + publicPath: config.output.publicPath, + }) +); app.use(webpackHotMiddleware(compiler)); -app.get("/", function(req, res) { +app.get('/', function (req, res) { res.sendFile(__dirname + '/index.html'); }); -app.listen(port, function(error) { +app.listen(port, function (error) { if (error) { console.error(error); } else { - console.info("==> 🌎 Listening on port %s. Open up http://localhost:%s/ in your browser.", port, port); + console.info( + '==> 🌎 Listening on port %s. Open up http://localhost:%s/ in your browser.', + port, + port + ); } }); diff --git a/packages/redux-devtools-remote/examples/counter/store/configureStore.js b/packages/redux-devtools-remote/examples/counter/store/configureStore.js index 87ed34b4..753c95db 100644 --- a/packages/redux-devtools-remote/examples/counter/store/configureStore.js +++ b/packages/redux-devtools-remote/examples/counter/store/configureStore.js @@ -6,11 +6,16 @@ import reducer from '../reducers'; import * as actionCreators from '../actions/counter'; export default function configureStore(initialState) { - - const composeEnhancers = composeWithDevTools({ realtime: true, actionCreators, trace: true }); - const store = createStore(reducer, initialState, composeEnhancers( - applyMiddleware(invariant(), thunk) - )); + const composeEnhancers = composeWithDevTools({ + realtime: true, + actionCreators, + trace: true, + }); + const store = createStore( + reducer, + initialState, + composeEnhancers(applyMiddleware(invariant(), thunk)) + ); if (module.hot) { // Enable Webpack hot module replacement for reducers diff --git a/packages/redux-devtools-remote/examples/counter/test/actions/counter.spec.js b/packages/redux-devtools-remote/examples/counter/test/actions/counter.spec.js index 477e70d9..c65cc240 100644 --- a/packages/redux-devtools-remote/examples/counter/test/actions/counter.spec.js +++ b/packages/redux-devtools-remote/examples/counter/test/actions/counter.spec.js @@ -12,16 +12,17 @@ function mockStore(getState, expectedActions, onLastAction) { if (!Array.isArray(expectedActions)) { throw new Error('expectedActions should be an array of expected actions.'); } - if (typeof onLastAction !== 'undefined' && typeof onLastAction !== 'function') { + if ( + typeof onLastAction !== 'undefined' && + typeof onLastAction !== 'function' + ) { throw new Error('onLastAction should either be undefined or function.'); } function mockStoreWithoutMiddleware() { return { getState() { - return typeof getState === 'function' ? - getState() : - getState; + return typeof getState === 'function' ? getState() : getState; }, dispatch(action) { @@ -31,13 +32,13 @@ function mockStore(getState, expectedActions, onLastAction) { onLastAction(); } return action; - } + }, }; } - const mockStoreWithMiddleware = applyMiddleware( - ...middlewares - )(mockStoreWithoutMiddleware); + const mockStoreWithMiddleware = applyMiddleware(...middlewares)( + mockStoreWithoutMiddleware + ); return mockStoreWithMiddleware(); } @@ -52,9 +53,7 @@ describe('actions', () => { }); it('incrementIfOdd should create increment action', (done) => { - const expectedActions = [ - { type: actions.INCREMENT_COUNTER } - ]; + const expectedActions = [{ type: actions.INCREMENT_COUNTER }]; const store = mockStore({ counter: 1 }, expectedActions, done); store.dispatch(actions.incrementIfOdd()); }); @@ -67,9 +66,7 @@ describe('actions', () => { }); it('incrementAsync should create increment action', (done) => { - const expectedActions = [ - { type: actions.INCREMENT_COUNTER } - ]; + const expectedActions = [{ type: actions.INCREMENT_COUNTER }]; const store = mockStore({ counter: 0 }, expectedActions, done); store.dispatch(actions.incrementAsync(100)); }); diff --git a/packages/redux-devtools-remote/examples/counter/test/components/Counter.spec.js b/packages/redux-devtools-remote/examples/counter/test/components/Counter.spec.js index 5c1f130b..85f0e163 100644 --- a/packages/redux-devtools-remote/examples/counter/test/components/Counter.spec.js +++ b/packages/redux-devtools-remote/examples/counter/test/components/Counter.spec.js @@ -8,14 +8,16 @@ function setup() { increment: expect.createSpy(), incrementIfOdd: expect.createSpy(), incrementAsync: expect.createSpy(), - decrement: expect.createSpy() + decrement: expect.createSpy(), }; - const component = TestUtils.renderIntoDocument(); + const component = TestUtils.renderIntoDocument( + + ); return { component: component, actions: actions, buttons: TestUtils.scryRenderedDOMComponentsWithTag(component, 'button'), - p: TestUtils.findRenderedDOMComponentWithTag(component, 'p') + p: TestUtils.findRenderedDOMComponentWithTag(component, 'p'), }; } diff --git a/packages/redux-devtools-remote/examples/counter/test/containers/App.spec.js b/packages/redux-devtools-remote/examples/counter/test/containers/App.spec.js index 26d9ea99..bfa4d73d 100644 --- a/packages/redux-devtools-remote/examples/counter/test/containers/App.spec.js +++ b/packages/redux-devtools-remote/examples/counter/test/containers/App.spec.js @@ -15,7 +15,7 @@ function setup(initialState) { return { app: app, buttons: TestUtils.scryRenderedDOMComponentsWithTag(app, 'button'), - p: TestUtils.findRenderedDOMComponentWithTag(app, 'p') + p: TestUtils.findRenderedDOMComponentWithTag(app, 'p'), }; } diff --git a/packages/redux-devtools-remote/examples/counter/webpack.config.js b/packages/redux-devtools-remote/examples/counter/webpack.config.js index 9362e8b6..4e8d0325 100644 --- a/packages/redux-devtools-remote/examples/counter/webpack.config.js +++ b/packages/redux-devtools-remote/examples/counter/webpack.config.js @@ -3,28 +3,27 @@ var webpack = require('webpack'); module.exports = { devtool: 'source-map', - entry: [ - 'webpack-hot-middleware/client', - './index' - ], + entry: ['webpack-hot-middleware/client', './index'], output: { path: path.join(__dirname, 'dist'), filename: 'bundle.js', - publicPath: '/static/' + publicPath: '/static/', }, plugins: [ new webpack.optimize.OccurenceOrderPlugin(), new webpack.HotModuleReplacementPlugin(), - new webpack.NoErrorsPlugin() + new webpack.NoErrorsPlugin(), ], module: { - loaders: [{ - test: /\.js$/, - loaders: ['babel'], - exclude: /node_modules/, - include: __dirname - }] - } + loaders: [ + { + test: /\.js$/, + loaders: ['babel'], + exclude: /node_modules/, + include: __dirname, + }, + ], + }, }; var src = path.join(__dirname, '..', '..', 'src'); @@ -37,6 +36,6 @@ if (fs.existsSync(src) && fs.existsSync(nodeModules)) { module.exports.module.loaders.push({ test: /\.js$/, loaders: ['babel'], - include: src + include: src, }); } diff --git a/packages/redux-devtools-remote/examples/node-counter/index.js b/packages/redux-devtools-remote/examples/node-counter/index.js index 42e3cd1c..d842252a 100644 --- a/packages/redux-devtools-remote/examples/node-counter/index.js +++ b/packages/redux-devtools-remote/examples/node-counter/index.js @@ -1,26 +1,28 @@ -var createStore = require('redux').createStore -var devTools = require('remote-redux-devtools').default +var createStore = require('redux').createStore; +var devTools = require('remote-redux-devtools').default; function counter(state, action) { - if (state === undefined) state = 0 + if (state === undefined) state = 0; switch (action.type) { - case 'INCREMENT': - return state + 1 - case 'DECREMENT': - return state - 1 - default: - return state + case 'INCREMENT': + return state + 1; + case 'DECREMENT': + return state - 1; + default: + return state; } } -var store = createStore(counter, devTools({realtime: true})) -store.subscribe(function() { console.log(store.getState()) }) +var store = createStore(counter, devTools({ realtime: true })); +store.subscribe(function () { + console.log(store.getState()); +}); function incrementer() { - setTimeout(function() { - store.dispatch({ type: 'INCREMENT' }) - incrementer() - }, 1000) + setTimeout(function () { + store.dispatch({ type: 'INCREMENT' }); + incrementer(); + }, 1000); } -incrementer() +incrementer(); diff --git a/packages/redux-devtools-remote/examples/router/.babelrc b/packages/redux-devtools-remote/examples/router/.babelrc index 2b3b36c4..90ff9fc8 100644 --- a/packages/redux-devtools-remote/examples/router/.babelrc +++ b/packages/redux-devtools-remote/examples/router/.babelrc @@ -1,4 +1,4 @@ { - "presets": [ "es2015", "stage-0", "react" ], - "plugins": [ "transform-decorators-legacy" ] -} \ No newline at end of file + "presets": ["es2015", "stage-0", "react"], + "plugins": ["transform-decorators-legacy"] +} diff --git a/packages/redux-devtools-remote/examples/router/components/Footer.js b/packages/redux-devtools-remote/examples/router/components/Footer.js index 6652e768..8972bd8a 100644 --- a/packages/redux-devtools-remote/examples/router/components/Footer.js +++ b/packages/redux-devtools-remote/examples/router/components/Footer.js @@ -1,11 +1,15 @@ import React, { PropTypes, Component } from 'react'; import classnames from 'classnames'; -import { SHOW_ALL, SHOW_COMPLETED, SHOW_ACTIVE } from '../constants/TodoFilters'; +import { + SHOW_ALL, + SHOW_COMPLETED, + SHOW_ACTIVE, +} from '../constants/TodoFilters'; const FILTER_TITLES = { [SHOW_ALL]: 'All', [SHOW_ACTIVE]: 'Active', - [SHOW_COMPLETED]: 'Completed' + [SHOW_COMPLETED]: 'Completed', }; class Footer extends Component { @@ -25,9 +29,11 @@ class Footer extends Component { const { filter: selectedFilter, onShow } = this.props; return ( - onShow(filter)}> + onShow(filter)} + > {title} ); @@ -37,8 +43,7 @@ class Footer extends Component { const { completedCount, onClearCompleted } = this.props; if (completedCount > 0) { return ( - ); @@ -50,11 +55,9 @@ class Footer extends Component {
{this.renderTodoCount()}
    - {[SHOW_ALL, SHOW_ACTIVE, SHOW_COMPLETED].map(filter => -
  • - {this.renderFilterLink(filter)} -
    • - )} + {[SHOW_ALL, SHOW_ACTIVE, SHOW_COMPLETED].map((filter) => ( +
  • {this.renderFilterLink(filter)}
    • + ))}
{this.renderClearButton()}
@@ -67,7 +70,7 @@ Footer.propTypes = { activeCount: PropTypes.number.isRequired, filter: PropTypes.string.isRequired, onClearCompleted: PropTypes.func.isRequired, - onShow: PropTypes.func.isRequired + onShow: PropTypes.func.isRequired, }; export default Footer; diff --git a/packages/redux-devtools-remote/examples/router/components/Header.js b/packages/redux-devtools-remote/examples/router/components/Header.js index 7264eac2..e09a2e27 100644 --- a/packages/redux-devtools-remote/examples/router/components/Header.js +++ b/packages/redux-devtools-remote/examples/router/components/Header.js @@ -12,17 +12,19 @@ class Header extends Component { const { path } = this.props; return (
-

{path}

- +

{path}

+
); } } Header.propTypes = { - addTodo: PropTypes.func.isRequired + addTodo: PropTypes.func.isRequired, }; export default Header; diff --git a/packages/redux-devtools-remote/examples/router/components/MainSection.js b/packages/redux-devtools-remote/examples/router/components/MainSection.js index 307663fe..51b86378 100644 --- a/packages/redux-devtools-remote/examples/router/components/MainSection.js +++ b/packages/redux-devtools-remote/examples/router/components/MainSection.js @@ -1,12 +1,16 @@ import React, { Component, PropTypes } from 'react'; import TodoItem from './TodoItem'; import Footer from './Footer'; -import { SHOW_ALL, SHOW_COMPLETED, SHOW_ACTIVE } from '../constants/TodoFilters'; +import { + SHOW_ALL, + SHOW_COMPLETED, + SHOW_ACTIVE, +} from '../constants/TodoFilters'; const TODO_FILTERS = { [SHOW_ALL]: () => true, - [SHOW_ACTIVE]: todo => !todo.completed, - [SHOW_COMPLETED]: todo => todo.completed + [SHOW_ACTIVE]: (todo) => !todo.completed, + [SHOW_COMPLETED]: (todo) => todo.completed, }; class MainSection extends Component { @@ -16,7 +20,7 @@ class MainSection extends Component { } handleClearCompleted() { - const atLeastOneCompleted = this.props.todos.some(todo => todo.completed); + const atLeastOneCompleted = this.props.todos.some((todo) => todo.completed); if (atLeastOneCompleted) { this.props.actions.clearCompleted(); } @@ -30,10 +34,12 @@ class MainSection extends Component { const { todos, actions } = this.props; if (todos.length > 0) { return ( - + ); } } @@ -45,11 +51,13 @@ class MainSection extends Component { if (todos.length) { return ( -