mirror of
https://github.com/reduxjs/redux-devtools.git
synced 2025-01-31 19:54:35 +03:00
Merge pull request #416 from reduxjs/monorepo
Monorepo initial configuration
This commit is contained in:
Mihail Diordiev
GitHub
commit
6fbb2ab7c6
1
.gitignore
vendored
1
.gitignore
vendored
|
|
@ -3,3 +3,4 @@ node_modules
|
||||||
.DS_Store
|
.DS_Store
|
||||||
lib
|
lib
|
||||||
coverage
|
coverage
|
||||||
|
.idea
|
||||||
|
|
|
||||||
|
|
@ -3,3 +3,10 @@ language: node_js
|
||||||
node_js:
|
node_js:
|
||||||
- "lts/*"
|
- "lts/*"
|
||||||
- "stable"
|
- "stable"
|
||||||
|
cache:
|
||||||
|
yarn: true
|
||||||
|
directories:
|
||||||
|
- "node_modules"
|
||||||
|
script:
|
||||||
|
- npm run lint
|
||||||
|
- npm test
|
||||||
|
|
|
||||||
134
README.md
134
README.md
|
|
@ -1,130 +1,24 @@
|
||||||
Redux DevTools
|
[](https://travis-ci.org/reduxjs/redux-devtools) [](https://github.com/reduxjs/redux-devtools/pulls)
|
||||||
=========================
|
|
||||||
|
|
||||||
A live-editing time travel environment for [Redux](https://github.com/reactjs/redux).
|
# Redux DevTools
|
||||||
**[See Dan's React Europe talk demoing it!](http://youtube.com/watch?v=xsSnOQynTHs)**
|
|
||||||
|
|
||||||
> Note that the implemention in this repository is different from [Redux DevTools Extension](https://github.com/zalmoxisus/redux-devtools-extension). Please refer to the latter for browser extension.
|
Developer Tools to power-up [Redux](https://github.com/reactjs/redux) development workflow or any other architecture which handles the state change (see [integrations](https://github.com/zalmoxisus/redux-devtools-extension/blob/master/docs/Integrations.md)).
|
||||||
|
|
||||||
### Table of Contents
|
It can be used as a browser extension (for [Chrome](https://chrome.google.com/webstore/detail/redux-devtools/lmhkpmbekcpmknklioeibfkpmmfibljd) and [Firefox](https://addons.mozilla.org/en-US/firefox/addon/remotedev/)), as [a standalone app](https://github.com/zalmoxisus/remotedev-app) or as [a React component](https://github.com/reduxjs/redux-devtools/tree/master/packages/redux-devtools) integrated in the client app.
|
||||||
|
|
||||||
- [Features](#features)
|
|
||||||
- [Overview](#overview)
|
|
||||||
- [Browser Extension](#browser-extension)
|
|
||||||
- [Setup Instructions](#setup-instructions)
|
|
||||||
- [Custom Monitors](#custom-monitors)
|
|
||||||
- [License](#license)
|
|
||||||
|
|
||||||
[](https://travis-ci.org/reduxjs/redux-devtools)
|
> Note that this repository is work in progress for [the monorepo](https://github.com/reduxjs/redux-devtools/issues/412), which will merge all the packages. Please refer to [Redux DevTools Extension](https://github.com/zalmoxisus/redux-devtools-extension) and [Redux DevTools package](https://github.com/reduxjs/redux-devtools/tree/master/packages/redux-devtools).
|
||||||
[](https://www.npmjs.com/package/redux-devtools)
|
|
||||||
[](https://www.npmjs.com/package/redux-devtools)
|
|
||||||
[](https://discord.gg/0ZcbPKXt5bWb10Ma)
|
|
||||||
|
|
||||||
|
### Documentation
|
||||||
|
|
||||||
### Features
|
- [Brower Extension Instalation and Configuration](https://github.com/zalmoxisus/redux-devtools-extension#installation)
|
||||||
|
- [Manual Integration as a React Component](./docs/Walkthrough.md#manual-integration)
|
||||||
* Lets you inspect every state and action payload
|
- [Extension Options (Arguments)](https://github.com/zalmoxisus/redux-devtools-extension/tree/master/docs/API/Arguments.md)
|
||||||
* Lets you go back in time by “cancelling” actions
|
- [Extension Methods (Advanced API)](https://github.com/zalmoxisus/redux-devtools-extension/tree/master/docs/API/Methods.md)
|
||||||
* If you change the reducer code, each “staged” action will be re-evaluated
|
- [Troubleshooting](https://github.com/zalmoxisus/redux-devtools-extension/tree/master/docs/Troubleshooting.md)
|
||||||
* If the reducers throw, you will see during which action this happened, and what the error was
|
- [Recipes](https://github.com/zalmoxisus/redux-devtools-extension/tree/master/docs/Recipes.md)
|
||||||
* With `persistState()` store enhancer, you can persist debug sessions across page reloads
|
- [FAQ](https://github.com/zalmoxisus/redux-devtools-extension/tree/master/docs/FAQ.md)
|
||||||
|
|
||||||
### Overview
|
|
||||||
|
|
||||||
Redux DevTools is a development time package that provides power-ups for your Redux development workflow. Be careful to strip its code in production (see [walkthrough](./docs/Walkthrough.md) for instructions)! To use Redux DevTools, you need to choose a “monitor”—a React component that will serve as a UI for the DevTools. Different tasks and workflows require different UIs, so Redux DevTools is built to be flexible in this regard. We recommend using [`LogMonitor`](https://github.com/gaearon/redux-devtools-log-monitor) for inspecting the state and time travel, and wrap it in a [`DockMonitor`](https://github.com/gaearon/redux-devtools-dock-monitor) to quickly move it across the screen. That said, when you’re comfortable rolling up your own setup, feel free to do this, and share it with us.
|
|
||||||
|
|
||||||
If you came here looking for what do the “Reset”, “Revert”, “Sweep” or “Commit” buttons do, check out [the `LogMonitor` documentation](https://github.com/gaearon/redux-devtools-log-monitor/blob/master/README.md#features).
|
|
||||||
|
|
||||||
### Browser Extension
|
|
||||||
|
|
||||||
If you don’t want to bother with installing Redux DevTools and integrating it into your project, consider using [Redux DevTools Extension](https://github.com/zalmoxisus/redux-devtools-extension) for Chrome and Firefox. It provides access to the most popular monitors, is easy to configure to filter actions, and doesn’t require installing any packages.
|
|
||||||
|
|
||||||
### Setup Instructions
|
|
||||||
|
|
||||||
Read the installation [walkthrough](./docs/Walkthrough.md) for integration instructions and usage examples (`<DevTools>` component, `DevTools.instrument()`, exclude from production builds, gotchas).
|
|
||||||
|
|
||||||
### Running Examples
|
|
||||||
|
|
||||||
Clone the project:
|
|
||||||
|
|
||||||
```
|
|
||||||
git clone https://github.com/reduxjs/redux-devtools.git
|
|
||||||
cd redux-devtools
|
|
||||||
```
|
|
||||||
|
|
||||||
Run `npm install` in the root folder:
|
|
||||||
|
|
||||||
```
|
|
||||||
npm install
|
|
||||||
```
|
|
||||||
|
|
||||||
Now you can open an example folder and run `npm install` there:
|
|
||||||
|
|
||||||
```
|
|
||||||
cd examples/counter # or examples/todomvc
|
|
||||||
npm install
|
|
||||||
```
|
|
||||||
|
|
||||||
Finally, run the development server and open the page:
|
|
||||||
|
|
||||||
```
|
|
||||||
npm start
|
|
||||||
open http://localhost:3000
|
|
||||||
```
|
|
||||||
|
|
||||||
Try clicking on actions in the log, or changing some code inside the reducers. You should see the action log re-evaluate the state on every code change.
|
|
||||||
|
|
||||||
Also try opening `http://localhost:3000/?debug_session=123`, click around, and then refresh. You should see that all actions have been restored from the local storage.
|
|
||||||
|
|
||||||
### Custom Monitors
|
|
||||||
|
|
||||||
**DevTools accepts monitor components so you can build a completely custom UI.** [`LogMonitor`](https://github.com/gaearon/redux-devtools-log-monitor) and [`DockMonitor`](https://github.com/gaearon/redux-devtools-dock-monitor) are just examples of what is possible.
|
|
||||||
|
|
||||||
**[I challenge you to build a custom monitor for Redux DevTools!](https://github.com/reduxjs/redux-devtools/issues/3)**
|
|
||||||
|
|
||||||
Some crazy ideas for custom monitors:
|
|
||||||
|
|
||||||
* A slider that lets you jump between computed states just by dragging it
|
|
||||||
* An in-app layer that shows the last N states right in the app (e.g. for animation)
|
|
||||||
* A time machine like interface where the last N states of your app reside on different Z layers
|
|
||||||
* Feel free to come up with and implement your own! Check [`LogMonitor`](https://github.com/gaearon/redux-devtools-log-monitor) `propTypes` to see what you can do.
|
|
||||||
|
|
||||||
In fact some of these are implemented already:
|
|
||||||
|
|
||||||
#### [Slider Monitor](https://github.com/calesce/redux-slider-monitor)
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
#### [Inspector](https://github.com/alexkuz/redux-devtools-inspector)
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
#### [Diff Monitor](https://github.com/whetstone/redux-devtools-diff-monitor)
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
#### [Filterable Log Monitor](https://github.com/bvaughn/redux-devtools-filterable-log-monitor/)
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
#### [Chart Monitor](https://github.com/romseguy/redux-devtools-chart-monitor)
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
#### [Filter Actions](https://github.com/zalmoxisus/redux-devtools-filter-actions)
|
|
||||||
|
|
||||||
(Does not have a UI but can wrap any other monitor)
|
|
||||||
|
|
||||||
<img src='http://i.imgur.com/TlqnU0J.png' width='400'>
|
|
||||||
|
|
||||||
#### [Dispatch](https://github.com/YoruNoHikage/redux-devtools-dispatch)
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
#### Keep them coming!
|
|
||||||
|
|
||||||
Create a PR to add your custom monitor.
|
|
||||||
|
|
||||||
### License
|
### License
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -73,7 +73,7 @@ A store enhancer is a function that enhances the behavior of `createStore()`. Yo
|
||||||
|
|
||||||
The easiest way to apply several store enhancers in a row is to use the [`compose()`](http://redux.js.org/docs/api/compose.html) utility function that ships with Redux. It is the same `compose()` that you can find in Underscore and Lodash. In our case, we would use it to compose several store enhancers into one: `compose(applyMiddleware(m1, m2, m3), DevTools.instrument())`.
|
The easiest way to apply several store enhancers in a row is to use the [`compose()`](http://redux.js.org/docs/api/compose.html) utility function that ships with Redux. It is the same `compose()` that you can find in Underscore and Lodash. In our case, we would use it to compose several store enhancers into one: `compose(applyMiddleware(m1, m2, m3), DevTools.instrument())`.
|
||||||
|
|
||||||
You can add additional options to it: `DevTools.instrument({ maxAge: 50, shouldCatchErrors: true })`. See [`redux-devtools-instrument`'s API](https://github.com/zalmoxisus/redux-devtools-instrument#api) for more details.
|
You can add additional options to it: `DevTools.instrument({ maxAge: 50, shouldCatchErrors: true })`. See [`redux-devtools-instrument`'s API](https://github.com/reduxjs/redux-devtools/tree/master/packages/redux-devtools-instrument#api) for more details.
|
||||||
|
|
||||||
It’s important that you should add `DevTools.instrument()` *after* `applyMiddleware` in your `compose()` function arguments. This is because `applyMiddleware` is potentially asynchronous, but `DevTools.instrument()` expects all actions to be plain objects rather than actions interpreted by asynchronous middleware such as [redux-promise](https://github.com/acdlite/redux-promise) or [redux-thunk](https://github.com/gaearon/redux-thunk). So make sure `applyMiddleware()` goes first in the `compose()` call, and `DevTools.instrument()` goes after it.
|
It’s important that you should add `DevTools.instrument()` *after* `applyMiddleware` in your `compose()` function arguments. This is because `applyMiddleware` is potentially asynchronous, but `DevTools.instrument()` expects all actions to be plain objects rather than actions interpreted by asynchronous middleware such as [redux-promise](https://github.com/acdlite/redux-promise) or [redux-thunk](https://github.com/gaearon/redux-thunk). So make sure `applyMiddleware()` goes first in the `compose()` call, and `DevTools.instrument()` goes after it.
|
||||||
|
|
||||||
|
|
|
||||||
16
lerna.json
Normal file
16
lerna.json
Normal file
|
|
@ -0,0 +1,16 @@
|
||||||
|
{
|
||||||
|
"lerna": "3.4.2",
|
||||||
|
"version": "independent",
|
||||||
|
"npmClient": "yarn",
|
||||||
|
"useWorkspaces": true,
|
||||||
|
"command": {
|
||||||
|
"publish": {
|
||||||
|
"allowBranch": "master"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"ignoreChanges": [
|
||||||
|
"**/test/**",
|
||||||
|
"**/examples/**",
|
||||||
|
"**/*.md"
|
||||||
|
]
|
||||||
|
}
|
||||||
82
package.json
82
package.json
|
|
@ -1,72 +1,20 @@
|
||||||
{
|
{
|
||||||
"name": "redux-devtools",
|
"private": true,
|
||||||
"version": "3.4.2",
|
|
||||||
"description": "Redux DevTools with hot reloading and time travel",
|
|
||||||
"main": "lib/index.js",
|
|
||||||
"scripts": {
|
|
||||||
"clean": "rimraf lib",
|
|
||||||
"build": "babel src --out-dir lib",
|
|
||||||
"lint": "eslint src test examples",
|
|
||||||
"test": "cross-env NODE_ENV=test mocha --compilers js:babel-core/register --recursive",
|
|
||||||
"test:watch": "cross-env NODE_ENV=test mocha --compilers js:babel-core/register --recursive --watch",
|
|
||||||
"test:cov": "babel-node ./node_modules/.bin/isparta cover ./node_modules/.bin/_mocha -- --recursive",
|
|
||||||
"prepublish": "npm run lint && npm run test && npm run clean && npm run build"
|
|
||||||
},
|
|
||||||
"files": [
|
|
||||||
"lib",
|
|
||||||
"src"
|
|
||||||
],
|
|
||||||
"repository": {
|
|
||||||
"type": "git",
|
|
||||||
"url": "https://github.com/gaearon/redux-devtools.git"
|
|
||||||
},
|
|
||||||
"keywords": [
|
|
||||||
"redux",
|
|
||||||
"devtools",
|
|
||||||
"flux",
|
|
||||||
"hot reloading",
|
|
||||||
"time travel",
|
|
||||||
"live edit"
|
|
||||||
],
|
|
||||||
"author": "Dan Abramov <dan.abramov@me.com> (http://github.com/gaearon)",
|
|
||||||
"license": "MIT",
|
|
||||||
"bugs": {
|
|
||||||
"url": "https://github.com/gaearon/redux-devtools/issues"
|
|
||||||
},
|
|
||||||
"homepage": "https://github.com/gaearon/redux-devtools",
|
|
||||||
"devDependencies": {
|
"devDependencies": {
|
||||||
"babel-cli": "^6.3.17",
|
"lerna": "3.4.2"
|
||||||
"babel-core": "^6.3.17",
|
|
||||||
"babel-eslint": "^4.1.6",
|
|
||||||
"babel-loader": "^6.2.0",
|
|
||||||
"babel-preset-es2015-loose": "^6.1.3",
|
|
||||||
"babel-preset-react": "6.3.13",
|
|
||||||
"babel-preset-stage-0": "^6.3.13",
|
|
||||||
"cross-env": "3.1.3",
|
|
||||||
"eslint": "^0.23",
|
|
||||||
"eslint-config-airbnb": "0.0.6",
|
|
||||||
"eslint-plugin-react": "^2.3.0",
|
|
||||||
"expect": "^1.6.0",
|
|
||||||
"isparta": "^3.0.3",
|
|
||||||
"jsdom": "^6.5.1",
|
|
||||||
"mocha": "^2.2.5",
|
|
||||||
"mocha-jsdom": "^1.0.0",
|
|
||||||
"react": "^0.14.9",
|
|
||||||
"react-addons-test-utils": "^0.14.0",
|
|
||||||
"react-dom": "^0.14.0",
|
|
||||||
"react-redux": "^4.0.0",
|
|
||||||
"redux": "^3.5.2",
|
|
||||||
"rimraf": "^2.3.4",
|
|
||||||
"webpack": "^1.11.0"
|
|
||||||
},
|
},
|
||||||
"peerDependencies": {
|
"scripts": {
|
||||||
"react": "^0.14.9 || ^15.3.0 || ^16.0.0",
|
"lerna": "lerna",
|
||||||
"react-redux": "^4.0.0 || ^5.0.0",
|
"prepare": "lerna run prepare --since master --stream --sort -- --scripts-prepend-node-path",
|
||||||
"redux": "^3.5.2 || ^4.0.0"
|
"publish": "lerna publish",
|
||||||
|
"canary": "lerna publish --canary preminor --npm-tag alpha",
|
||||||
|
"next": "lerna publish --bump prerelease --npm-tag next",
|
||||||
|
"lint": "lerna run lint --since master -- --color",
|
||||||
|
"lint:all": "lerna run lint -- --color",
|
||||||
|
"test": "lerna run test --since master -- --colors",
|
||||||
|
"test:all": "lerna run test -- --colors"
|
||||||
},
|
},
|
||||||
"dependencies": {
|
"workspaces": [
|
||||||
"prop-types": "^15.5.7",
|
"packages/*"
|
||||||
"lodash": "^4.2.0",
|
]
|
||||||
"redux-devtools-instrument": "^1.9.0"
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
|
||||||
3
packages/redux-devtools-instrument/.babelrc
Normal file
3
packages/redux-devtools-instrument/.babelrc
Normal file
|
|
@ -0,0 +1,3 @@
|
||||||
|
{
|
||||||
|
"presets": ["es2015-loose", "stage-0"]
|
||||||
|
}
|
||||||
57
packages/redux-devtools-instrument/README.md
Normal file
57
packages/redux-devtools-instrument/README.md
Normal file
|
|
@ -0,0 +1,57 @@
|
||||||
|
Redux DevTools Instrumentation
|
||||||
|
==============================
|
||||||
|
|
||||||
|
Redux enhancer used along with [Redux DevTools](https://github.com/reduxjs/redux-devtools) or [Remote Redux DevTools](https://github.com/zalmoxisus/remote-redux-devtools).
|
||||||
|
|
||||||
|
### Installation
|
||||||
|
|
||||||
|
```
|
||||||
|
npm install --save-dev redux-devtools-instrument
|
||||||
|
```
|
||||||
|
|
||||||
|
### Usage
|
||||||
|
|
||||||
|
Add the store enhancer:
|
||||||
|
|
||||||
|
##### `store/configureStore.js`
|
||||||
|
|
||||||
|
```js
|
||||||
|
import { createStore, applyMiddleware, compose } from 'redux';
|
||||||
|
import thunk from 'redux-thunk';
|
||||||
|
import devTools from 'remote-redux-devtools';
|
||||||
|
import reducer from '../reducers';
|
||||||
|
|
||||||
|
// Usually you import the reducer from the monitor
|
||||||
|
// or apply with createDevTools as explained in Redux DevTools
|
||||||
|
const monitorReducer = (state = {}, action) => state;
|
||||||
|
|
||||||
|
export default function configureStore(initialState) {
|
||||||
|
const enhancer = compose(
|
||||||
|
applyMiddleware(...middlewares),
|
||||||
|
// other enhancers and applyMiddleware should be added before the instrumentation
|
||||||
|
instrument(monitorReducer, { maxAge: 50 })
|
||||||
|
);
|
||||||
|
|
||||||
|
// Note: passing enhancer as last argument requires redux@>=3.1.0
|
||||||
|
return createStore(reducer, initialState, enhancer);
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
### API
|
||||||
|
|
||||||
|
`instrument(monitorReducer, [options])`
|
||||||
|
|
||||||
|
- arguments
|
||||||
|
- **monitorReducer** *function* called whenever an action is dispatched ([see the example of a monitor reducer](https://github.com/gaearon/redux-devtools-log-monitor/blob/master/src/reducers.js#L13)).
|
||||||
|
- **options** *object*
|
||||||
|
- **maxAge** *number* or *function*(currentLiftedAction, previousLiftedState) - maximum allowed actions to be stored on the history tree, the oldest actions are removed once `maxAge` is reached. Can be generated dynamically with a function getting current action as argument.
|
||||||
|
- **shouldCatchErrors** *boolean* - if specified as `true`, whenever there's an exception in reducers, the monitors will show the error message, and next actions will not be dispatched.
|
||||||
|
- **shouldRecordChanges** *boolean* - if specified as `false`, it will not record the changes till `pauseRecording(false)` is dispatched. Default is `true`.
|
||||||
|
- **pauseActionType** *string* - if specified, whenever `pauseRecording(false)` lifted action is dispatched and there are actions in the history log, will add this action type. If not specified, will commit when paused.
|
||||||
|
- **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`.
|
||||||
|
- **shouldHotReload** *boolean* - if set to `false`, will not recompute the states on hot reloading (or on replacing the reducers). Default to `true`.
|
||||||
|
- **shouldIncludeCallstack** *boolean* - if set to `true`, will include callstack for every dispatched action. Default to `false`.
|
||||||
|
|
||||||
|
### License
|
||||||
|
|
||||||
|
MIT
|
||||||
60
packages/redux-devtools-instrument/package.json
Normal file
60
packages/redux-devtools-instrument/package.json
Normal file
|
|
@ -0,0 +1,60 @@
|
||||||
|
{
|
||||||
|
"name": "redux-devtools-instrument",
|
||||||
|
"version": "1.9.3",
|
||||||
|
"description": "Redux DevTools instrumentation",
|
||||||
|
"main": "lib/instrument.js",
|
||||||
|
"scripts": {
|
||||||
|
"clean": "rimraf lib",
|
||||||
|
"build": "babel src --out-dir lib",
|
||||||
|
"lint": "eslint src test",
|
||||||
|
"test": "NODE_ENV=test mocha --compilers js:babel-core/register --recursive",
|
||||||
|
"test:watch": "NODE_ENV=test mocha --compilers js:babel-core/register --recursive --watch",
|
||||||
|
"test:cov": "babel-node ./node_modules/.bin/isparta cover ./node_modules/.bin/_mocha -- --recursive",
|
||||||
|
"prepare": "npm run build",
|
||||||
|
"prepublishOnly": "npm run lint && npm run test && npm run clean && npm run build"
|
||||||
|
},
|
||||||
|
"files": [
|
||||||
|
"lib",
|
||||||
|
"src"
|
||||||
|
],
|
||||||
|
"repository": {
|
||||||
|
"type": "git",
|
||||||
|
"url": "https://github.com/reduxjs/redux-devtools.git"
|
||||||
|
},
|
||||||
|
"keywords": [
|
||||||
|
"redux",
|
||||||
|
"devtools",
|
||||||
|
"flux",
|
||||||
|
"hot reloading",
|
||||||
|
"time travel",
|
||||||
|
"live edit"
|
||||||
|
],
|
||||||
|
"author": "Dan Abramov <dan.abramov@me.com> (http://github.com/gaearon)",
|
||||||
|
"license": "MIT",
|
||||||
|
"bugs": {
|
||||||
|
"url": "https://github.com/reduxjs/redux-devtools/issues"
|
||||||
|
},
|
||||||
|
"homepage": "https://github.com/reduxjs/redux-devtools",
|
||||||
|
"devDependencies": {
|
||||||
|
"babel-cli": "^6.3.17",
|
||||||
|
"babel-core": "^6.3.17",
|
||||||
|
"babel-eslint": "^4.1.6",
|
||||||
|
"babel-loader": "^6.2.0",
|
||||||
|
"babel-preset-es2015-loose": "^6.1.3",
|
||||||
|
"babel-preset-stage-0": "^6.3.13",
|
||||||
|
"eslint": "^0.23",
|
||||||
|
"eslint-config-airbnb": "0.0.6",
|
||||||
|
"eslint-plugin-react": "^2.3.0",
|
||||||
|
"expect": "^1.6.0",
|
||||||
|
"isparta": "^3.0.3",
|
||||||
|
"mocha": "^2.2.5",
|
||||||
|
"redux": "^4.0.0",
|
||||||
|
"rimraf": "^2.3.4",
|
||||||
|
"rxjs": "^5.0.0-beta.6",
|
||||||
|
"webpack": "^1.11.0"
|
||||||
|
},
|
||||||
|
"dependencies": {
|
||||||
|
"lodash": "^4.2.0",
|
||||||
|
"symbol-observable": "^1.0.2"
|
||||||
|
}
|
||||||
|
}
|
||||||
685
packages/redux-devtools-instrument/src/instrument.js
Normal file
685
packages/redux-devtools-instrument/src/instrument.js
Normal file
|
|
@ -0,0 +1,685 @@
|
||||||
|
import difference from 'lodash/difference';
|
||||||
|
import union from 'lodash/union';
|
||||||
|
import isPlainObject from 'lodash/isPlainObject';
|
||||||
|
import $$observable from 'symbol-observable';
|
||||||
|
|
||||||
|
export const ActionTypes = {
|
||||||
|
PERFORM_ACTION: 'PERFORM_ACTION',
|
||||||
|
RESET: 'RESET',
|
||||||
|
ROLLBACK: 'ROLLBACK',
|
||||||
|
COMMIT: 'COMMIT',
|
||||||
|
SWEEP: 'SWEEP',
|
||||||
|
TOGGLE_ACTION: 'TOGGLE_ACTION',
|
||||||
|
SET_ACTIONS_ACTIVE: 'SET_ACTIONS_ACTIVE',
|
||||||
|
JUMP_TO_STATE: 'JUMP_TO_STATE',
|
||||||
|
JUMP_TO_ACTION: 'JUMP_TO_ACTION',
|
||||||
|
REORDER_ACTION: 'REORDER_ACTION',
|
||||||
|
IMPORT_STATE: 'IMPORT_STATE',
|
||||||
|
LOCK_CHANGES: 'LOCK_CHANGES',
|
||||||
|
PAUSE_RECORDING: 'PAUSE_RECORDING'
|
||||||
|
};
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Action creators to change the History state.
|
||||||
|
*/
|
||||||
|
export const ActionCreators = {
|
||||||
|
performAction(action, shouldIncludeCallstack) {
|
||||||
|
if (!isPlainObject(action)) {
|
||||||
|
throw new Error(
|
||||||
|
'Actions must be plain objects. ' +
|
||||||
|
'Use custom middleware for async actions.'
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
if (typeof action.type === 'undefined') {
|
||||||
|
throw new Error(
|
||||||
|
'Actions may not have an undefined "type" property. ' +
|
||||||
|
'Have you misspelled a constant?'
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
return {
|
||||||
|
type: ActionTypes.PERFORM_ACTION, action, timestamp: Date.now(),
|
||||||
|
stack: shouldIncludeCallstack ? Error().stack : undefined
|
||||||
|
};
|
||||||
|
},
|
||||||
|
|
||||||
|
reset() {
|
||||||
|
return { type: ActionTypes.RESET, timestamp: Date.now() };
|
||||||
|
},
|
||||||
|
|
||||||
|
rollback() {
|
||||||
|
return { type: ActionTypes.ROLLBACK, timestamp: Date.now() };
|
||||||
|
},
|
||||||
|
|
||||||
|
commit() {
|
||||||
|
return { type: ActionTypes.COMMIT, timestamp: Date.now() };
|
||||||
|
},
|
||||||
|
|
||||||
|
sweep() {
|
||||||
|
return { type: ActionTypes.SWEEP };
|
||||||
|
},
|
||||||
|
|
||||||
|
toggleAction(id) {
|
||||||
|
return { type: ActionTypes.TOGGLE_ACTION, id };
|
||||||
|
},
|
||||||
|
|
||||||
|
setActionsActive(start, end, active=true) {
|
||||||
|
return { type: ActionTypes.SET_ACTIONS_ACTIVE, start, end, active };
|
||||||
|
},
|
||||||
|
|
||||||
|
reorderAction(actionId, beforeActionId) {
|
||||||
|
return { type: ActionTypes.REORDER_ACTION, actionId, beforeActionId };
|
||||||
|
},
|
||||||
|
|
||||||
|
jumpToState(index) {
|
||||||
|
return { type: ActionTypes.JUMP_TO_STATE, index };
|
||||||
|
},
|
||||||
|
|
||||||
|
jumpToAction(actionId) {
|
||||||
|
return { type: ActionTypes.JUMP_TO_ACTION, actionId };
|
||||||
|
},
|
||||||
|
|
||||||
|
importState(nextLiftedState, noRecompute) {
|
||||||
|
return { type: ActionTypes.IMPORT_STATE, nextLiftedState, noRecompute };
|
||||||
|
},
|
||||||
|
|
||||||
|
lockChanges(status) {
|
||||||
|
return { type: ActionTypes.LOCK_CHANGES, status };
|
||||||
|
},
|
||||||
|
|
||||||
|
pauseRecording(status) {
|
||||||
|
return { type: ActionTypes.PAUSE_RECORDING, status };
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
export const INIT_ACTION = { type: '@@INIT' };
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Computes the next entry with exceptions catching.
|
||||||
|
*/
|
||||||
|
function computeWithTryCatch(reducer, action, state) {
|
||||||
|
let nextState = state;
|
||||||
|
let nextError;
|
||||||
|
try {
|
||||||
|
nextState = reducer(state, action);
|
||||||
|
} catch (err) {
|
||||||
|
nextError = err.toString();
|
||||||
|
if (
|
||||||
|
typeof window === 'object' && (
|
||||||
|
typeof window.chrome !== 'undefined' ||
|
||||||
|
typeof window.process !== 'undefined' &&
|
||||||
|
window.process.type === 'renderer'
|
||||||
|
)) {
|
||||||
|
// In Chrome, rethrowing provides better source map support
|
||||||
|
setTimeout(() => { throw err; });
|
||||||
|
} else {
|
||||||
|
console.error(err);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
return {
|
||||||
|
state: nextState,
|
||||||
|
error: nextError
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Computes the next entry in the log by applying an action.
|
||||||
|
*/
|
||||||
|
function computeNextEntry(reducer, action, state, shouldCatchErrors) {
|
||||||
|
if (!shouldCatchErrors) {
|
||||||
|
return { state: reducer(state, action) };
|
||||||
|
}
|
||||||
|
return computeWithTryCatch(reducer, action, state);
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Runs the reducer on invalidated actions to get a fresh computation log.
|
||||||
|
*/
|
||||||
|
function recomputeStates(
|
||||||
|
computedStates,
|
||||||
|
minInvalidatedStateIndex,
|
||||||
|
reducer,
|
||||||
|
committedState,
|
||||||
|
actionsById,
|
||||||
|
stagedActionIds,
|
||||||
|
skippedActionIds,
|
||||||
|
shouldCatchErrors
|
||||||
|
) {
|
||||||
|
// Optimization: exit early and return the same reference
|
||||||
|
// if we know nothing could have changed.
|
||||||
|
if (
|
||||||
|
!computedStates || minInvalidatedStateIndex === -1 ||
|
||||||
|
(minInvalidatedStateIndex >= computedStates.length &&
|
||||||
|
computedStates.length === stagedActionIds.length)
|
||||||
|
) {
|
||||||
|
return computedStates;
|
||||||
|
}
|
||||||
|
|
||||||
|
const nextComputedStates = computedStates.slice(0, minInvalidatedStateIndex);
|
||||||
|
for (let i = minInvalidatedStateIndex; i < stagedActionIds.length; i++) {
|
||||||
|
const actionId = stagedActionIds[i];
|
||||||
|
const action = actionsById[actionId].action;
|
||||||
|
|
||||||
|
const previousEntry = nextComputedStates[i - 1];
|
||||||
|
const previousState = previousEntry ? previousEntry.state : committedState;
|
||||||
|
|
||||||
|
const shouldSkip = skippedActionIds.indexOf(actionId) > -1;
|
||||||
|
let entry;
|
||||||
|
if (shouldSkip) {
|
||||||
|
entry = previousEntry;
|
||||||
|
} else {
|
||||||
|
if (shouldCatchErrors && previousEntry && previousEntry.error) {
|
||||||
|
entry = {
|
||||||
|
state: previousState,
|
||||||
|
error: 'Interrupted by an error up the chain'
|
||||||
|
};
|
||||||
|
} else {
|
||||||
|
entry = computeNextEntry(reducer, action, previousState, shouldCatchErrors);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
nextComputedStates.push(entry);
|
||||||
|
}
|
||||||
|
|
||||||
|
return nextComputedStates;
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Lifts an app's action into an action on the lifted store.
|
||||||
|
*/
|
||||||
|
export function liftAction(action, shouldIncludeCallstack) {
|
||||||
|
return ActionCreators.performAction(action, shouldIncludeCallstack);
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Creates a history state reducer from an app's reducer.
|
||||||
|
*/
|
||||||
|
export function liftReducerWith(reducer, initialCommittedState, monitorReducer, options) {
|
||||||
|
const initialLiftedState = {
|
||||||
|
monitorState: monitorReducer(undefined, {}),
|
||||||
|
nextActionId: 1,
|
||||||
|
actionsById: { 0: liftAction(INIT_ACTION) },
|
||||||
|
stagedActionIds: [0],
|
||||||
|
skippedActionIds: [],
|
||||||
|
committedState: initialCommittedState,
|
||||||
|
currentStateIndex: 0,
|
||||||
|
computedStates: [],
|
||||||
|
isLocked: options.shouldStartLocked === true,
|
||||||
|
isPaused: options.shouldRecordChanges === false
|
||||||
|
};
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Manages how the history actions modify the history state.
|
||||||
|
*/
|
||||||
|
return (liftedState, liftedAction) => {
|
||||||
|
let {
|
||||||
|
monitorState,
|
||||||
|
actionsById,
|
||||||
|
nextActionId,
|
||||||
|
stagedActionIds,
|
||||||
|
skippedActionIds,
|
||||||
|
committedState,
|
||||||
|
currentStateIndex,
|
||||||
|
computedStates,
|
||||||
|
isLocked,
|
||||||
|
isPaused
|
||||||
|
} = liftedState || initialLiftedState;
|
||||||
|
|
||||||
|
if (!liftedState) {
|
||||||
|
// Prevent mutating initialLiftedState
|
||||||
|
actionsById = { ...actionsById };
|
||||||
|
}
|
||||||
|
|
||||||
|
function commitExcessActions(n) {
|
||||||
|
// Auto-commits n-number of excess actions.
|
||||||
|
let excess = n;
|
||||||
|
let idsToDelete = stagedActionIds.slice(1, excess + 1);
|
||||||
|
|
||||||
|
for (let i = 0; i < idsToDelete.length; i++) {
|
||||||
|
if (computedStates[i + 1].error) {
|
||||||
|
// Stop if error is found. Commit actions up to error.
|
||||||
|
excess = i;
|
||||||
|
idsToDelete = stagedActionIds.slice(1, excess + 1);
|
||||||
|
break;
|
||||||
|
} else {
|
||||||
|
delete actionsById[idsToDelete[i]];
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
skippedActionIds = skippedActionIds.filter(id => idsToDelete.indexOf(id) === -1);
|
||||||
|
stagedActionIds = [0, ...stagedActionIds.slice(excess + 1)];
|
||||||
|
committedState = computedStates[excess].state;
|
||||||
|
computedStates = computedStates.slice(excess);
|
||||||
|
currentStateIndex = currentStateIndex > excess
|
||||||
|
? currentStateIndex - excess
|
||||||
|
: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
function computePausedAction(shouldInit) {
|
||||||
|
let computedState;
|
||||||
|
if (shouldInit) {
|
||||||
|
computedState = computedStates[currentStateIndex];
|
||||||
|
monitorState = monitorReducer(monitorState, liftedAction);
|
||||||
|
} else {
|
||||||
|
computedState = computeNextEntry(
|
||||||
|
reducer, liftedAction.action, computedStates[currentStateIndex].state, false
|
||||||
|
);
|
||||||
|
}
|
||||||
|
if (!options.pauseActionType || nextActionId === 1) {
|
||||||
|
return {
|
||||||
|
monitorState,
|
||||||
|
actionsById: { 0: liftAction(INIT_ACTION) },
|
||||||
|
nextActionId: 1,
|
||||||
|
stagedActionIds: [0],
|
||||||
|
skippedActionIds: [],
|
||||||
|
committedState: computedState.state,
|
||||||
|
currentStateIndex: 0,
|
||||||
|
computedStates: [computedState],
|
||||||
|
isLocked,
|
||||||
|
isPaused: true
|
||||||
|
};
|
||||||
|
}
|
||||||
|
if (shouldInit) {
|
||||||
|
if (currentStateIndex === stagedActionIds.length - 1) {
|
||||||
|
currentStateIndex++;
|
||||||
|
}
|
||||||
|
stagedActionIds = [...stagedActionIds, nextActionId];
|
||||||
|
nextActionId++;
|
||||||
|
}
|
||||||
|
return {
|
||||||
|
monitorState,
|
||||||
|
actionsById: {
|
||||||
|
...actionsById,
|
||||||
|
[nextActionId - 1]: liftAction({ type: options.pauseActionType })
|
||||||
|
},
|
||||||
|
nextActionId,
|
||||||
|
stagedActionIds,
|
||||||
|
skippedActionIds,
|
||||||
|
committedState,
|
||||||
|
currentStateIndex,
|
||||||
|
computedStates: [...computedStates.slice(0, stagedActionIds.length - 1), computedState],
|
||||||
|
isLocked,
|
||||||
|
isPaused: true
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
// By default, agressively recompute every state whatever happens.
|
||||||
|
// This has O(n) performance, so we'll override this to a sensible
|
||||||
|
// value whenever we feel like we don't have to recompute the states.
|
||||||
|
let minInvalidatedStateIndex = 0;
|
||||||
|
|
||||||
|
// maxAge number can be changed dynamically
|
||||||
|
let maxAge = options.maxAge;
|
||||||
|
if (typeof maxAge === 'function') maxAge = maxAge(liftedAction, liftedState);
|
||||||
|
|
||||||
|
if (/^@@redux\/(INIT|REPLACE)/.test(liftedAction.type)) {
|
||||||
|
if (options.shouldHotReload === false) {
|
||||||
|
actionsById = { 0: liftAction(INIT_ACTION) };
|
||||||
|
nextActionId = 1;
|
||||||
|
stagedActionIds = [0];
|
||||||
|
skippedActionIds = [];
|
||||||
|
committedState = computedStates.length === 0 ? initialCommittedState :
|
||||||
|
computedStates[currentStateIndex].state;
|
||||||
|
currentStateIndex = 0;
|
||||||
|
computedStates = [];
|
||||||
|
}
|
||||||
|
|
||||||
|
// Recompute states on hot reload and init.
|
||||||
|
minInvalidatedStateIndex = 0;
|
||||||
|
|
||||||
|
if (maxAge && stagedActionIds.length > maxAge) {
|
||||||
|
// States must be recomputed before committing excess.
|
||||||
|
computedStates = recomputeStates(
|
||||||
|
computedStates,
|
||||||
|
minInvalidatedStateIndex,
|
||||||
|
reducer,
|
||||||
|
committedState,
|
||||||
|
actionsById,
|
||||||
|
stagedActionIds,
|
||||||
|
skippedActionIds,
|
||||||
|
options.shouldCatchErrors
|
||||||
|
);
|
||||||
|
|
||||||
|
commitExcessActions(stagedActionIds.length - maxAge);
|
||||||
|
|
||||||
|
// Avoid double computation.
|
||||||
|
minInvalidatedStateIndex = Infinity;
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
switch (liftedAction.type) {
|
||||||
|
case ActionTypes.PERFORM_ACTION: {
|
||||||
|
if (isLocked) return liftedState || initialLiftedState;
|
||||||
|
if (isPaused) return computePausedAction();
|
||||||
|
|
||||||
|
// Auto-commit as new actions come in.
|
||||||
|
if (maxAge && stagedActionIds.length >= maxAge) {
|
||||||
|
commitExcessActions(stagedActionIds.length - maxAge + 1);
|
||||||
|
}
|
||||||
|
|
||||||
|
if (currentStateIndex === stagedActionIds.length - 1) {
|
||||||
|
currentStateIndex++;
|
||||||
|
}
|
||||||
|
const actionId = nextActionId++;
|
||||||
|
// Mutation! This is the hottest path, and we optimize on purpose.
|
||||||
|
// It is safe because we set a new key in a cache dictionary.
|
||||||
|
actionsById[actionId] = liftedAction;
|
||||||
|
stagedActionIds = [...stagedActionIds, actionId];
|
||||||
|
// Optimization: we know that only the new action needs computing.
|
||||||
|
minInvalidatedStateIndex = stagedActionIds.length - 1;
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
case ActionTypes.RESET: {
|
||||||
|
// Get back to the state the store was created with.
|
||||||
|
actionsById = { 0: liftAction(INIT_ACTION) };
|
||||||
|
nextActionId = 1;
|
||||||
|
stagedActionIds = [0];
|
||||||
|
skippedActionIds = [];
|
||||||
|
committedState = initialCommittedState;
|
||||||
|
currentStateIndex = 0;
|
||||||
|
computedStates = [];
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
case ActionTypes.COMMIT: {
|
||||||
|
// Consider the last committed state the new starting point.
|
||||||
|
// Squash any staged actions into a single committed state.
|
||||||
|
actionsById = { 0: liftAction(INIT_ACTION) };
|
||||||
|
nextActionId = 1;
|
||||||
|
stagedActionIds = [0];
|
||||||
|
skippedActionIds = [];
|
||||||
|
committedState = computedStates[currentStateIndex].state;
|
||||||
|
currentStateIndex = 0;
|
||||||
|
computedStates = [];
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
case ActionTypes.ROLLBACK: {
|
||||||
|
// Forget about any staged actions.
|
||||||
|
// Start again from the last committed state.
|
||||||
|
actionsById = { 0: liftAction(INIT_ACTION) };
|
||||||
|
nextActionId = 1;
|
||||||
|
stagedActionIds = [0];
|
||||||
|
skippedActionIds = [];
|
||||||
|
currentStateIndex = 0;
|
||||||
|
computedStates = [];
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
case ActionTypes.TOGGLE_ACTION: {
|
||||||
|
// Toggle whether an action with given ID is skipped.
|
||||||
|
// Being skipped means it is a no-op during the computation.
|
||||||
|
const { id: actionId } = liftedAction;
|
||||||
|
const index = skippedActionIds.indexOf(actionId);
|
||||||
|
if (index === -1) {
|
||||||
|
skippedActionIds = [actionId, ...skippedActionIds];
|
||||||
|
} else {
|
||||||
|
skippedActionIds = skippedActionIds.filter(id => id !== actionId);
|
||||||
|
}
|
||||||
|
// Optimization: we know history before this action hasn't changed
|
||||||
|
minInvalidatedStateIndex = stagedActionIds.indexOf(actionId);
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
case ActionTypes.SET_ACTIONS_ACTIVE: {
|
||||||
|
// Toggle whether an action with given ID is skipped.
|
||||||
|
// Being skipped means it is a no-op during the computation.
|
||||||
|
const { start, end, active } = liftedAction;
|
||||||
|
const actionIds = [];
|
||||||
|
for (let i = start; i < end; i++) actionIds.push(i);
|
||||||
|
if (active) {
|
||||||
|
skippedActionIds = difference(skippedActionIds, actionIds);
|
||||||
|
} else {
|
||||||
|
skippedActionIds = union(skippedActionIds, actionIds);
|
||||||
|
}
|
||||||
|
|
||||||
|
// Optimization: we know history before this action hasn't changed
|
||||||
|
minInvalidatedStateIndex = stagedActionIds.indexOf(start);
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
case ActionTypes.JUMP_TO_STATE: {
|
||||||
|
// Without recomputing anything, move the pointer that tell us
|
||||||
|
// which state is considered the current one. Useful for sliders.
|
||||||
|
currentStateIndex = liftedAction.index;
|
||||||
|
// Optimization: we know the history has not changed.
|
||||||
|
minInvalidatedStateIndex = Infinity;
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
case ActionTypes.JUMP_TO_ACTION: {
|
||||||
|
// Jumps to a corresponding state to a specific action.
|
||||||
|
// Useful when filtering actions.
|
||||||
|
const index = stagedActionIds.indexOf(liftedAction.actionId);
|
||||||
|
if (index !== -1) currentStateIndex = index;
|
||||||
|
minInvalidatedStateIndex = Infinity;
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
case ActionTypes.SWEEP: {
|
||||||
|
// Forget any actions that are currently being skipped.
|
||||||
|
stagedActionIds = difference(stagedActionIds, skippedActionIds);
|
||||||
|
skippedActionIds = [];
|
||||||
|
currentStateIndex = Math.min(currentStateIndex, stagedActionIds.length - 1);
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
case ActionTypes.REORDER_ACTION: {
|
||||||
|
// Recompute actions in a new order.
|
||||||
|
const actionId = liftedAction.actionId;
|
||||||
|
const idx = stagedActionIds.indexOf(actionId);
|
||||||
|
// do nothing in case the action is already removed or trying to move the first action
|
||||||
|
if (idx < 1) break;
|
||||||
|
const beforeActionId = liftedAction.beforeActionId;
|
||||||
|
let newIdx = stagedActionIds.indexOf(beforeActionId);
|
||||||
|
if (newIdx < 1) { // move to the beginning or to the end
|
||||||
|
const count = stagedActionIds.length;
|
||||||
|
newIdx = beforeActionId > stagedActionIds[count - 1] ? count : 1;
|
||||||
|
}
|
||||||
|
const diff = idx - newIdx;
|
||||||
|
|
||||||
|
if (diff > 0) { // move left
|
||||||
|
stagedActionIds = [
|
||||||
|
...stagedActionIds.slice(0, newIdx),
|
||||||
|
actionId,
|
||||||
|
...stagedActionIds.slice(newIdx, idx),
|
||||||
|
...stagedActionIds.slice(idx + 1)
|
||||||
|
];
|
||||||
|
minInvalidatedStateIndex = newIdx;
|
||||||
|
} else if (diff < 0) { // move right
|
||||||
|
stagedActionIds = [
|
||||||
|
...stagedActionIds.slice(0, idx),
|
||||||
|
...stagedActionIds.slice(idx + 1, newIdx),
|
||||||
|
actionId,
|
||||||
|
...stagedActionIds.slice(newIdx)
|
||||||
|
];
|
||||||
|
minInvalidatedStateIndex = idx;
|
||||||
|
}
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
case ActionTypes.IMPORT_STATE: {
|
||||||
|
if (Array.isArray(liftedAction.nextLiftedState)) {
|
||||||
|
// recompute array of actions
|
||||||
|
actionsById = { 0: liftAction(INIT_ACTION) };
|
||||||
|
nextActionId = 1;
|
||||||
|
stagedActionIds = [0];
|
||||||
|
skippedActionIds = [];
|
||||||
|
currentStateIndex = liftedAction.nextLiftedState.length;
|
||||||
|
computedStates = [];
|
||||||
|
committedState = liftedAction.preloadedState;
|
||||||
|
minInvalidatedStateIndex = 0;
|
||||||
|
// iterate through actions
|
||||||
|
liftedAction.nextLiftedState.forEach(action => {
|
||||||
|
actionsById[nextActionId] = liftAction(action, options.shouldIncludeCallstack);
|
||||||
|
stagedActionIds.push(nextActionId);
|
||||||
|
nextActionId++;
|
||||||
|
});
|
||||||
|
} else {
|
||||||
|
// Completely replace everything.
|
||||||
|
({
|
||||||
|
monitorState,
|
||||||
|
actionsById,
|
||||||
|
nextActionId,
|
||||||
|
stagedActionIds,
|
||||||
|
skippedActionIds,
|
||||||
|
committedState,
|
||||||
|
currentStateIndex,
|
||||||
|
computedStates
|
||||||
|
} = liftedAction.nextLiftedState);
|
||||||
|
|
||||||
|
if (liftedAction.noRecompute) {
|
||||||
|
minInvalidatedStateIndex = Infinity;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
case ActionTypes.LOCK_CHANGES: {
|
||||||
|
isLocked = liftedAction.status;
|
||||||
|
minInvalidatedStateIndex = Infinity;
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
case ActionTypes.PAUSE_RECORDING: {
|
||||||
|
isPaused = liftedAction.status;
|
||||||
|
if (isPaused) {
|
||||||
|
return computePausedAction(true);
|
||||||
|
}
|
||||||
|
// Commit when unpausing
|
||||||
|
actionsById = { 0: liftAction(INIT_ACTION) };
|
||||||
|
nextActionId = 1;
|
||||||
|
stagedActionIds = [0];
|
||||||
|
skippedActionIds = [];
|
||||||
|
committedState = computedStates[currentStateIndex].state;
|
||||||
|
currentStateIndex = 0;
|
||||||
|
computedStates = [];
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
default: {
|
||||||
|
// If the action is not recognized, it's a monitor action.
|
||||||
|
// Optimization: a monitor action can't change history.
|
||||||
|
minInvalidatedStateIndex = Infinity;
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
computedStates = recomputeStates(
|
||||||
|
computedStates,
|
||||||
|
minInvalidatedStateIndex,
|
||||||
|
reducer,
|
||||||
|
committedState,
|
||||||
|
actionsById,
|
||||||
|
stagedActionIds,
|
||||||
|
skippedActionIds,
|
||||||
|
options.shouldCatchErrors
|
||||||
|
);
|
||||||
|
monitorState = monitorReducer(monitorState, liftedAction);
|
||||||
|
return {
|
||||||
|
monitorState,
|
||||||
|
actionsById,
|
||||||
|
nextActionId,
|
||||||
|
stagedActionIds,
|
||||||
|
skippedActionIds,
|
||||||
|
committedState,
|
||||||
|
currentStateIndex,
|
||||||
|
computedStates,
|
||||||
|
isLocked,
|
||||||
|
isPaused
|
||||||
|
};
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Provides an app's view into the state of the lifted store.
|
||||||
|
*/
|
||||||
|
export function unliftState(liftedState) {
|
||||||
|
const { computedStates, currentStateIndex } = liftedState;
|
||||||
|
const { state } = computedStates[currentStateIndex];
|
||||||
|
return state;
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Provides an app's view into the lifted store.
|
||||||
|
*/
|
||||||
|
export function unliftStore(liftedStore, liftReducer, options) {
|
||||||
|
let lastDefinedState;
|
||||||
|
const { shouldIncludeCallstack } = options;
|
||||||
|
|
||||||
|
function getState() {
|
||||||
|
const state = unliftState(liftedStore.getState());
|
||||||
|
if (state !== undefined) {
|
||||||
|
lastDefinedState = state;
|
||||||
|
}
|
||||||
|
return lastDefinedState;
|
||||||
|
}
|
||||||
|
|
||||||
|
return {
|
||||||
|
...liftedStore,
|
||||||
|
|
||||||
|
liftedStore,
|
||||||
|
|
||||||
|
dispatch(action) {
|
||||||
|
liftedStore.dispatch(liftAction(action, shouldIncludeCallstack));
|
||||||
|
return action;
|
||||||
|
},
|
||||||
|
|
||||||
|
getState,
|
||||||
|
|
||||||
|
replaceReducer(nextReducer) {
|
||||||
|
liftedStore.replaceReducer(liftReducer(nextReducer));
|
||||||
|
},
|
||||||
|
|
||||||
|
[$$observable]() {
|
||||||
|
return {
|
||||||
|
...liftedStore[$$observable](),
|
||||||
|
subscribe(observer) {
|
||||||
|
if (typeof observer !== 'object') {
|
||||||
|
throw new TypeError('Expected the observer to be an object.');
|
||||||
|
}
|
||||||
|
|
||||||
|
function observeState() {
|
||||||
|
if (observer.next) {
|
||||||
|
observer.next(getState());
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
observeState();
|
||||||
|
const unsubscribe = liftedStore.subscribe(observeState);
|
||||||
|
return { unsubscribe };
|
||||||
|
}
|
||||||
|
};
|
||||||
|
}
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Redux instrumentation store enhancer.
|
||||||
|
*/
|
||||||
|
export default function instrument(monitorReducer = () => null, options = {}) {
|
||||||
|
if (typeof options.maxAge === 'number' && options.maxAge < 2) {
|
||||||
|
throw new Error(
|
||||||
|
'DevTools.instrument({ maxAge }) option, if specified, ' +
|
||||||
|
'may not be less than 2.'
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
return createStore => (reducer, initialState, enhancer) => {
|
||||||
|
|
||||||
|
function liftReducer(r) {
|
||||||
|
if (typeof r !== 'function') {
|
||||||
|
if (r && typeof r.default === 'function') {
|
||||||
|
throw new Error(
|
||||||
|
'Expected the reducer to be a function. ' +
|
||||||
|
'Instead got an object with a "default" field. ' +
|
||||||
|
'Did you pass a module instead of the default export? ' +
|
||||||
|
'Try passing require(...).default instead.'
|
||||||
|
);
|
||||||
|
}
|
||||||
|
throw new Error('Expected the reducer to be a function.');
|
||||||
|
}
|
||||||
|
return liftReducerWith(r, initialState, monitorReducer, options);
|
||||||
|
}
|
||||||
|
|
||||||
|
const liftedStore = createStore(liftReducer(reducer), enhancer);
|
||||||
|
if (liftedStore.liftedStore) {
|
||||||
|
throw new Error(
|
||||||
|
'DevTools instrumentation should not be applied more than once. ' +
|
||||||
|
'Check your store configuration.'
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
return unliftStore(liftedStore, liftReducer, options);
|
||||||
|
};
|
||||||
|
}
|
||||||
953
packages/redux-devtools-instrument/test/instrument.spec.js
Normal file
953
packages/redux-devtools-instrument/test/instrument.spec.js
Normal file
|
|
@ -0,0 +1,953 @@
|
||||||
|
import expect, { spyOn } from 'expect';
|
||||||
|
import { createStore, compose } from 'redux';
|
||||||
|
import instrument, { ActionCreators } from '../src/instrument';
|
||||||
|
import { Observable } from 'rxjs';
|
||||||
|
import _ from 'lodash';
|
||||||
|
|
||||||
|
import 'rxjs/add/observable/from';
|
||||||
|
|
||||||
|
function counter(state = 0, action) {
|
||||||
|
switch (action.type) {
|
||||||
|
case 'INCREMENT': return state + 1;
|
||||||
|
case 'DECREMENT': return state - 1;
|
||||||
|
default: return state;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function counterWithBug(state = 0, action) {
|
||||||
|
switch (action.type) {
|
||||||
|
case 'INCREMENT': return state + 1;
|
||||||
|
case 'DECREMENT': return mistake - 1; // eslint-disable-line no-undef
|
||||||
|
case 'SET_UNDEFINED': return undefined;
|
||||||
|
default: return state;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function counterWithAnotherBug(state = 0, action) {
|
||||||
|
switch (action.type) {
|
||||||
|
case 'INCREMENT': return mistake + 1; // eslint-disable-line no-undef
|
||||||
|
case 'DECREMENT': return state - 1;
|
||||||
|
case 'SET_UNDEFINED': return undefined;
|
||||||
|
default: return state;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function doubleCounter(state = 0, action) {
|
||||||
|
switch (action.type) {
|
||||||
|
case 'INCREMENT': return state + 2;
|
||||||
|
case 'DECREMENT': return state - 2;
|
||||||
|
default: return state;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function counterWithMultiply(state = 0, action) {
|
||||||
|
switch (action.type) {
|
||||||
|
case 'INCREMENT': return state + 1;
|
||||||
|
case 'DECREMENT': return state - 1;
|
||||||
|
case 'MULTIPLY': return state * 2;
|
||||||
|
default: return state;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
describe('instrument', () => {
|
||||||
|
let store;
|
||||||
|
let liftedStore;
|
||||||
|
|
||||||
|
beforeEach(() => {
|
||||||
|
store = createStore(counter, instrument());
|
||||||
|
liftedStore = store.liftedStore;
|
||||||
|
});
|
||||||
|
|
||||||
|
it('should perform actions', () => {
|
||||||
|
expect(store.getState()).toBe(0);
|
||||||
|
store.dispatch({ type: 'INCREMENT' });
|
||||||
|
expect(store.getState()).toBe(1);
|
||||||
|
store.dispatch({ type: 'INCREMENT' });
|
||||||
|
expect(store.getState()).toBe(2);
|
||||||
|
});
|
||||||
|
|
||||||
|
it('should provide observable', () => {
|
||||||
|
let lastValue;
|
||||||
|
let calls = 0;
|
||||||
|
|
||||||
|
Observable.from(store)
|
||||||
|
.subscribe(state => {
|
||||||
|
lastValue = state;
|
||||||
|
calls++;
|
||||||
|
});
|
||||||
|
|
||||||
|
expect(lastValue).toBe(0);
|
||||||
|
store.dispatch({ type: 'INCREMENT' });
|
||||||
|
expect(lastValue).toBe(1);
|
||||||
|
});
|
||||||
|
|
||||||
|
it('should rollback state to the last committed state', () => {
|
||||||
|
store.dispatch({ type: 'INCREMENT' });
|
||||||
|
store.dispatch({ type: 'INCREMENT' });
|
||||||
|
expect(store.getState()).toBe(2);
|
||||||
|
|
||||||
|
liftedStore.dispatch(ActionCreators.commit());
|
||||||
|
expect(store.getState()).toBe(2);
|
||||||
|
|
||||||
|
store.dispatch({ type: 'INCREMENT' });
|
||||||
|
store.dispatch({ type: 'INCREMENT' });
|
||||||
|
expect(store.getState()).toBe(4);
|
||||||
|
|
||||||
|
liftedStore.dispatch(ActionCreators.rollback());
|
||||||
|
expect(store.getState()).toBe(2);
|
||||||
|
|
||||||
|
store.dispatch({ type: 'DECREMENT' });
|
||||||
|
expect(store.getState()).toBe(1);
|
||||||
|
|
||||||
|
liftedStore.dispatch(ActionCreators.rollback());
|
||||||
|
expect(store.getState()).toBe(2);
|
||||||
|
});
|
||||||
|
|
||||||
|
it('should reset to initial state', () => {
|
||||||
|
store.dispatch({ type: 'INCREMENT' });
|
||||||
|
expect(store.getState()).toBe(1);
|
||||||
|
|
||||||
|
liftedStore.dispatch(ActionCreators.commit());
|
||||||
|
expect(store.getState()).toBe(1);
|
||||||
|
|
||||||
|
store.dispatch({ type: 'INCREMENT' });
|
||||||
|
expect(store.getState()).toBe(2);
|
||||||
|
|
||||||
|
liftedStore.dispatch(ActionCreators.rollback());
|
||||||
|
expect(store.getState()).toBe(1);
|
||||||
|
|
||||||
|
store.dispatch({ type: 'INCREMENT' });
|
||||||
|
expect(store.getState()).toBe(2);
|
||||||
|
|
||||||
|
liftedStore.dispatch(ActionCreators.reset());
|
||||||
|
expect(store.getState()).toBe(0);
|
||||||
|
});
|
||||||
|
|
||||||
|
it('should toggle an action', () => {
|
||||||
|
// actionId 0 = @@INIT
|
||||||
|
store.dispatch({ type: 'INCREMENT' });
|
||||||
|
store.dispatch({ type: 'DECREMENT' });
|
||||||
|
store.dispatch({ type: 'INCREMENT' });
|
||||||
|
expect(store.getState()).toBe(1);
|
||||||
|
|
||||||
|
liftedStore.dispatch(ActionCreators.toggleAction(2));
|
||||||
|
expect(store.getState()).toBe(2);
|
||||||
|
|
||||||
|
liftedStore.dispatch(ActionCreators.toggleAction(2));
|
||||||
|
expect(store.getState()).toBe(1);
|
||||||
|
});
|
||||||
|
|
||||||
|
it('should set multiple action skip', () => {
|
||||||
|
// actionId 0 = @@INIT
|
||||||
|
store.dispatch({ type: 'INCREMENT' });
|
||||||
|
store.dispatch({ type: 'INCREMENT' });
|
||||||
|
store.dispatch({ type: 'INCREMENT' });
|
||||||
|
expect(store.getState()).toBe(3);
|
||||||
|
|
||||||
|
liftedStore.dispatch(ActionCreators.setActionsActive(1, 3, false));
|
||||||
|
expect(store.getState()).toBe(1);
|
||||||
|
|
||||||
|
liftedStore.dispatch(ActionCreators.setActionsActive(0, 2, true));
|
||||||
|
expect(store.getState()).toBe(2);
|
||||||
|
|
||||||
|
liftedStore.dispatch(ActionCreators.setActionsActive(0, 1, true));
|
||||||
|
expect(store.getState()).toBe(2);
|
||||||
|
});
|
||||||
|
|
||||||
|
it('should sweep disabled actions', () => {
|
||||||
|
// actionId 0 = @@INIT
|
||||||
|
store.dispatch({ type: 'INCREMENT' });
|
||||||
|
store.dispatch({ type: 'DECREMENT' });
|
||||||
|
store.dispatch({ type: 'INCREMENT' });
|
||||||
|
store.dispatch({ type: 'INCREMENT' });
|
||||||
|
|
||||||
|
expect(store.getState()).toBe(2);
|
||||||
|
expect(liftedStore.getState().stagedActionIds).toEqual([0, 1, 2, 3, 4]);
|
||||||
|
expect(liftedStore.getState().skippedActionIds).toEqual([]);
|
||||||
|
|
||||||
|
liftedStore.dispatch(ActionCreators.toggleAction(2));
|
||||||
|
expect(store.getState()).toBe(3);
|
||||||
|
expect(liftedStore.getState().stagedActionIds).toEqual([0, 1, 2, 3, 4]);
|
||||||
|
expect(liftedStore.getState().skippedActionIds).toEqual([2]);
|
||||||
|
|
||||||
|
liftedStore.dispatch(ActionCreators.sweep());
|
||||||
|
expect(store.getState()).toBe(3);
|
||||||
|
expect(liftedStore.getState().stagedActionIds).toEqual([0, 1, 3, 4]);
|
||||||
|
expect(liftedStore.getState().skippedActionIds).toEqual([]);
|
||||||
|
});
|
||||||
|
|
||||||
|
it('should jump to state', () => {
|
||||||
|
store.dispatch({ type: 'INCREMENT' });
|
||||||
|
store.dispatch({ type: 'DECREMENT' });
|
||||||
|
store.dispatch({ type: 'INCREMENT' });
|
||||||
|
expect(store.getState()).toBe(1);
|
||||||
|
|
||||||
|
liftedStore.dispatch(ActionCreators.jumpToState(0));
|
||||||
|
expect(store.getState()).toBe(0);
|
||||||
|
|
||||||
|
liftedStore.dispatch(ActionCreators.jumpToState(1));
|
||||||
|
expect(store.getState()).toBe(1);
|
||||||
|
|
||||||
|
liftedStore.dispatch(ActionCreators.jumpToState(2));
|
||||||
|
expect(store.getState()).toBe(0);
|
||||||
|
|
||||||
|
store.dispatch({ type: 'INCREMENT' });
|
||||||
|
expect(store.getState()).toBe(0);
|
||||||
|
|
||||||
|
liftedStore.dispatch(ActionCreators.jumpToState(4));
|
||||||
|
expect(store.getState()).toBe(2);
|
||||||
|
});
|
||||||
|
|
||||||
|
it('should jump to action', () => {
|
||||||
|
store.dispatch({ type: 'INCREMENT' });
|
||||||
|
store.dispatch({ type: 'DECREMENT' });
|
||||||
|
store.dispatch({ type: 'INCREMENT' });
|
||||||
|
expect(store.getState()).toBe(1);
|
||||||
|
|
||||||
|
liftedStore.dispatch(ActionCreators.jumpToAction(0));
|
||||||
|
expect(store.getState()).toBe(0);
|
||||||
|
|
||||||
|
liftedStore.dispatch(ActionCreators.jumpToAction(1));
|
||||||
|
expect(store.getState()).toBe(1);
|
||||||
|
|
||||||
|
liftedStore.dispatch(ActionCreators.jumpToAction(10));
|
||||||
|
expect(store.getState()).toBe(1);
|
||||||
|
});
|
||||||
|
|
||||||
|
it('should reorder actions', () => {
|
||||||
|
store = createStore(counterWithMultiply, instrument());
|
||||||
|
store.dispatch({ type: 'INCREMENT' });
|
||||||
|
store.dispatch({ type: 'DECREMENT' });
|
||||||
|
store.dispatch({ type: 'INCREMENT' });
|
||||||
|
store.dispatch({ type: 'MULTIPLY' });
|
||||||
|
expect(store.liftedStore.getState().stagedActionIds).toEqual([0, 1, 2, 3, 4]);
|
||||||
|
expect(store.getState()).toBe(2);
|
||||||
|
|
||||||
|
store.liftedStore.dispatch(ActionCreators.reorderAction(4, 1));
|
||||||
|
expect(store.liftedStore.getState().stagedActionIds).toEqual([0, 4, 1, 2, 3]);
|
||||||
|
expect(store.getState()).toBe(1);
|
||||||
|
|
||||||
|
store.liftedStore.dispatch(ActionCreators.reorderAction(4, 1));
|
||||||
|
expect(store.liftedStore.getState().stagedActionIds).toEqual([0, 4, 1, 2, 3]);
|
||||||
|
expect(store.getState()).toBe(1);
|
||||||
|
|
||||||
|
store.liftedStore.dispatch(ActionCreators.reorderAction(4, 2));
|
||||||
|
expect(store.liftedStore.getState().stagedActionIds).toEqual([0, 1, 4, 2, 3]);
|
||||||
|
expect(store.getState()).toBe(2);
|
||||||
|
|
||||||
|
store.liftedStore.dispatch(ActionCreators.reorderAction(1, 10));
|
||||||
|
expect(store.liftedStore.getState().stagedActionIds).toEqual([0, 4, 2, 3, 1]);
|
||||||
|
expect(store.getState()).toBe(1);
|
||||||
|
|
||||||
|
store.liftedStore.dispatch(ActionCreators.reorderAction(10, 1));
|
||||||
|
expect(store.liftedStore.getState().stagedActionIds).toEqual([0, 4, 2, 3, 1]);
|
||||||
|
expect(store.getState()).toBe(1);
|
||||||
|
|
||||||
|
store.liftedStore.dispatch(ActionCreators.reorderAction(1, -2));
|
||||||
|
expect(store.liftedStore.getState().stagedActionIds).toEqual([0, 1, 4, 2, 3]);
|
||||||
|
expect(store.getState()).toBe(2);
|
||||||
|
|
||||||
|
store.liftedStore.dispatch(ActionCreators.reorderAction(0, 1));
|
||||||
|
expect(store.liftedStore.getState().stagedActionIds).toEqual([0, 1, 4, 2, 3]);
|
||||||
|
expect(store.getState()).toBe(2);
|
||||||
|
});
|
||||||
|
|
||||||
|
it('should replace the reducer', () => {
|
||||||
|
store.dispatch({ type: 'INCREMENT' });
|
||||||
|
store.dispatch({ type: 'DECREMENT' });
|
||||||
|
store.dispatch({ type: 'INCREMENT' });
|
||||||
|
expect(store.getState()).toBe(1);
|
||||||
|
|
||||||
|
store.replaceReducer(doubleCounter);
|
||||||
|
expect(store.getState()).toBe(2);
|
||||||
|
});
|
||||||
|
|
||||||
|
it('should replace the reducer without recomputing actions', () => {
|
||||||
|
store = createStore(counter, instrument(undefined, { shouldHotReload: false }));
|
||||||
|
expect(store.getState()).toBe(0);
|
||||||
|
store.dispatch({ type: 'INCREMENT' });
|
||||||
|
store.dispatch({ type: 'DECREMENT' });
|
||||||
|
store.dispatch({ type: 'INCREMENT' });
|
||||||
|
expect(store.getState()).toBe(1);
|
||||||
|
|
||||||
|
store.replaceReducer(doubleCounter);
|
||||||
|
expect(store.getState()).toBe(1);
|
||||||
|
store.dispatch({ type: 'INCREMENT' });
|
||||||
|
expect(store.getState()).toBe(3);
|
||||||
|
|
||||||
|
store.replaceReducer(() => ({ test: true }));
|
||||||
|
expect(store.getState()).toEqual({ test: true });
|
||||||
|
});
|
||||||
|
|
||||||
|
it('should catch and record errors', () => {
|
||||||
|
let spy = spyOn(console, 'error');
|
||||||
|
let storeWithBug = createStore(
|
||||||
|
counterWithBug,
|
||||||
|
instrument(undefined, { shouldCatchErrors: true })
|
||||||
|
);
|
||||||
|
|
||||||
|
storeWithBug.dispatch({ type: 'INCREMENT' });
|
||||||
|
storeWithBug.dispatch({ type: 'DECREMENT' });
|
||||||
|
storeWithBug.dispatch({ type: 'INCREMENT' });
|
||||||
|
|
||||||
|
let { computedStates } = storeWithBug.liftedStore.getState();
|
||||||
|
expect(computedStates[2].error).toMatch(
|
||||||
|
/ReferenceError/
|
||||||
|
);
|
||||||
|
expect(computedStates[3].error).toMatch(
|
||||||
|
/Interrupted by an error up the chain/
|
||||||
|
);
|
||||||
|
expect(spy.calls[0].arguments[0].toString()).toMatch(
|
||||||
|
/ReferenceError/
|
||||||
|
);
|
||||||
|
|
||||||
|
spy.restore();
|
||||||
|
});
|
||||||
|
|
||||||
|
it('should catch invalid action type', () => {
|
||||||
|
expect(() => {
|
||||||
|
store.dispatch({ type: undefined });
|
||||||
|
}).toThrow(
|
||||||
|
'Actions may not have an undefined "type" property. ' +
|
||||||
|
'Have you misspelled a constant?'
|
||||||
|
);
|
||||||
|
});
|
||||||
|
|
||||||
|
it('should catch invalid action type', () => {
|
||||||
|
function ActionClass() {
|
||||||
|
this.type = 'test';
|
||||||
|
}
|
||||||
|
|
||||||
|
expect(() => {
|
||||||
|
store.dispatch(new ActionClass());
|
||||||
|
}).toThrow(
|
||||||
|
'Actions must be plain objects. ' +
|
||||||
|
'Use custom middleware for async actions.'
|
||||||
|
);
|
||||||
|
});
|
||||||
|
|
||||||
|
it('should return the last non-undefined state from getState', () => {
|
||||||
|
let storeWithBug = createStore(counterWithBug, instrument());
|
||||||
|
storeWithBug.dispatch({ type: 'INCREMENT' });
|
||||||
|
storeWithBug.dispatch({ type: 'INCREMENT' });
|
||||||
|
expect(storeWithBug.getState()).toBe(2);
|
||||||
|
|
||||||
|
storeWithBug.dispatch({ type: 'SET_UNDEFINED' });
|
||||||
|
expect(storeWithBug.getState()).toBe(2);
|
||||||
|
});
|
||||||
|
|
||||||
|
it('should not recompute states on every action', () => {
|
||||||
|
let reducerCalls = 0;
|
||||||
|
let monitoredStore = createStore(() => reducerCalls++, instrument());
|
||||||
|
expect(reducerCalls).toBe(1);
|
||||||
|
monitoredStore.dispatch({ type: 'INCREMENT' });
|
||||||
|
monitoredStore.dispatch({ type: 'INCREMENT' });
|
||||||
|
monitoredStore.dispatch({ type: 'INCREMENT' });
|
||||||
|
expect(reducerCalls).toBe(4);
|
||||||
|
});
|
||||||
|
|
||||||
|
it('should not recompute old states when toggling an action', () => {
|
||||||
|
let reducerCalls = 0;
|
||||||
|
let monitoredStore = createStore(() => reducerCalls++, instrument());
|
||||||
|
let monitoredLiftedStore = monitoredStore.liftedStore;
|
||||||
|
|
||||||
|
expect(reducerCalls).toBe(1);
|
||||||
|
// actionId 0 = @@INIT
|
||||||
|
monitoredStore.dispatch({ type: 'INCREMENT' });
|
||||||
|
monitoredStore.dispatch({ type: 'INCREMENT' });
|
||||||
|
monitoredStore.dispatch({ type: 'INCREMENT' });
|
||||||
|
expect(reducerCalls).toBe(4);
|
||||||
|
|
||||||
|
monitoredLiftedStore.dispatch(ActionCreators.toggleAction(3));
|
||||||
|
expect(reducerCalls).toBe(4);
|
||||||
|
|
||||||
|
monitoredLiftedStore.dispatch(ActionCreators.toggleAction(3));
|
||||||
|
expect(reducerCalls).toBe(5);
|
||||||
|
|
||||||
|
monitoredLiftedStore.dispatch(ActionCreators.toggleAction(2));
|
||||||
|
expect(reducerCalls).toBe(6);
|
||||||
|
|
||||||
|
monitoredLiftedStore.dispatch(ActionCreators.toggleAction(2));
|
||||||
|
expect(reducerCalls).toBe(8);
|
||||||
|
|
||||||
|
monitoredLiftedStore.dispatch(ActionCreators.toggleAction(1));
|
||||||
|
expect(reducerCalls).toBe(10);
|
||||||
|
|
||||||
|
monitoredLiftedStore.dispatch(ActionCreators.toggleAction(2));
|
||||||
|
expect(reducerCalls).toBe(11);
|
||||||
|
|
||||||
|
monitoredLiftedStore.dispatch(ActionCreators.toggleAction(3));
|
||||||
|
expect(reducerCalls).toBe(11);
|
||||||
|
|
||||||
|
monitoredLiftedStore.dispatch(ActionCreators.toggleAction(1));
|
||||||
|
expect(reducerCalls).toBe(12);
|
||||||
|
|
||||||
|
monitoredLiftedStore.dispatch(ActionCreators.toggleAction(3));
|
||||||
|
expect(reducerCalls).toBe(13);
|
||||||
|
|
||||||
|
monitoredLiftedStore.dispatch(ActionCreators.toggleAction(2));
|
||||||
|
expect(reducerCalls).toBe(15);
|
||||||
|
});
|
||||||
|
|
||||||
|
it('should not recompute states when jumping to state', () => {
|
||||||
|
let reducerCalls = 0;
|
||||||
|
let monitoredStore = createStore(() => reducerCalls++, instrument());
|
||||||
|
let monitoredLiftedStore = monitoredStore.liftedStore;
|
||||||
|
|
||||||
|
expect(reducerCalls).toBe(1);
|
||||||
|
monitoredStore.dispatch({ type: 'INCREMENT' });
|
||||||
|
monitoredStore.dispatch({ type: 'INCREMENT' });
|
||||||
|
monitoredStore.dispatch({ type: 'INCREMENT' });
|
||||||
|
expect(reducerCalls).toBe(4);
|
||||||
|
|
||||||
|
let savedComputedStates = monitoredLiftedStore.getState().computedStates;
|
||||||
|
|
||||||
|
monitoredLiftedStore.dispatch(ActionCreators.jumpToState(0));
|
||||||
|
expect(reducerCalls).toBe(4);
|
||||||
|
|
||||||
|
monitoredLiftedStore.dispatch(ActionCreators.jumpToState(1));
|
||||||
|
expect(reducerCalls).toBe(4);
|
||||||
|
|
||||||
|
monitoredLiftedStore.dispatch(ActionCreators.jumpToState(3));
|
||||||
|
expect(reducerCalls).toBe(4);
|
||||||
|
|
||||||
|
expect(monitoredLiftedStore.getState().computedStates).toBe(savedComputedStates);
|
||||||
|
});
|
||||||
|
|
||||||
|
it('should not recompute states on monitor actions', () => {
|
||||||
|
let reducerCalls = 0;
|
||||||
|
let monitoredStore = createStore(() => reducerCalls++, instrument());
|
||||||
|
let monitoredLiftedStore = monitoredStore.liftedStore;
|
||||||
|
|
||||||
|
expect(reducerCalls).toBe(1);
|
||||||
|
monitoredStore.dispatch({ type: 'INCREMENT' });
|
||||||
|
monitoredStore.dispatch({ type: 'INCREMENT' });
|
||||||
|
monitoredStore.dispatch({ type: 'INCREMENT' });
|
||||||
|
expect(reducerCalls).toBe(4);
|
||||||
|
|
||||||
|
let savedComputedStates = monitoredLiftedStore.getState().computedStates;
|
||||||
|
|
||||||
|
monitoredLiftedStore.dispatch({ type: 'lol' });
|
||||||
|
expect(reducerCalls).toBe(4);
|
||||||
|
|
||||||
|
monitoredLiftedStore.dispatch({ type: 'wat' });
|
||||||
|
expect(reducerCalls).toBe(4);
|
||||||
|
|
||||||
|
expect(monitoredLiftedStore.getState().computedStates).toBe(savedComputedStates);
|
||||||
|
});
|
||||||
|
|
||||||
|
describe('maxAge option', () => {
|
||||||
|
let configuredStore;
|
||||||
|
let configuredLiftedStore;
|
||||||
|
|
||||||
|
beforeEach(() => {
|
||||||
|
configuredStore = createStore(counter, instrument(undefined, { maxAge: 3 }));
|
||||||
|
configuredLiftedStore = configuredStore.liftedStore;
|
||||||
|
});
|
||||||
|
|
||||||
|
it('should auto-commit earliest non-@@INIT action when maxAge is reached', () => {
|
||||||
|
configuredStore.dispatch({ type: 'INCREMENT' });
|
||||||
|
configuredStore.dispatch({ type: 'INCREMENT' });
|
||||||
|
let liftedStoreState = configuredLiftedStore.getState();
|
||||||
|
|
||||||
|
expect(configuredStore.getState()).toBe(2);
|
||||||
|
expect(Object.keys(liftedStoreState.actionsById).length).toBe(3);
|
||||||
|
expect(liftedStoreState.committedState).toBe(undefined);
|
||||||
|
expect(liftedStoreState.stagedActionIds).toInclude(1);
|
||||||
|
|
||||||
|
// Trigger auto-commit.
|
||||||
|
configuredStore.dispatch({ type: 'INCREMENT' });
|
||||||
|
liftedStoreState = configuredLiftedStore.getState();
|
||||||
|
|
||||||
|
expect(configuredStore.getState()).toBe(3);
|
||||||
|
expect(Object.keys(liftedStoreState.actionsById).length).toBe(3);
|
||||||
|
expect(liftedStoreState.stagedActionIds).toExclude(1);
|
||||||
|
expect(liftedStoreState.computedStates[0].state).toBe(1);
|
||||||
|
expect(liftedStoreState.committedState).toBe(1);
|
||||||
|
expect(liftedStoreState.currentStateIndex).toBe(2);
|
||||||
|
});
|
||||||
|
|
||||||
|
it('should remove skipped actions once committed', () => {
|
||||||
|
configuredStore.dispatch({ type: 'INCREMENT' });
|
||||||
|
configuredLiftedStore.dispatch(ActionCreators.toggleAction(1));
|
||||||
|
configuredStore.dispatch({ type: 'INCREMENT' });
|
||||||
|
expect(configuredLiftedStore.getState().skippedActionIds).toInclude(1);
|
||||||
|
configuredStore.dispatch({ type: 'INCREMENT' });
|
||||||
|
expect(configuredLiftedStore.getState().skippedActionIds).toExclude(1);
|
||||||
|
});
|
||||||
|
|
||||||
|
it('should not auto-commit errors', () => {
|
||||||
|
let spy = spyOn(console, 'error');
|
||||||
|
|
||||||
|
let storeWithBug = createStore(
|
||||||
|
counterWithBug,
|
||||||
|
instrument(undefined, { maxAge: 3, shouldCatchErrors: true })
|
||||||
|
);
|
||||||
|
let liftedStoreWithBug = storeWithBug.liftedStore;
|
||||||
|
storeWithBug.dispatch({ type: 'DECREMENT' });
|
||||||
|
storeWithBug.dispatch({ type: 'INCREMENT' });
|
||||||
|
expect(liftedStoreWithBug.getState().stagedActionIds.length).toBe(3);
|
||||||
|
|
||||||
|
storeWithBug.dispatch({ type: 'INCREMENT' });
|
||||||
|
expect(liftedStoreWithBug.getState().stagedActionIds.length).toBe(4);
|
||||||
|
|
||||||
|
spy.restore();
|
||||||
|
});
|
||||||
|
|
||||||
|
it('should auto-commit actions after hot reload fixes error', () => {
|
||||||
|
let spy = spyOn(console, 'error');
|
||||||
|
|
||||||
|
let storeWithBug = createStore(
|
||||||
|
counterWithBug,
|
||||||
|
instrument(undefined, { maxAge: 3, shouldCatchErrors: true })
|
||||||
|
);
|
||||||
|
let liftedStoreWithBug = storeWithBug.liftedStore;
|
||||||
|
storeWithBug.dispatch({ type: 'DECREMENT' });
|
||||||
|
storeWithBug.dispatch({ type: 'DECREMENT' });
|
||||||
|
storeWithBug.dispatch({ type: 'INCREMENT' });
|
||||||
|
storeWithBug.dispatch({ type: 'DECREMENT' });
|
||||||
|
storeWithBug.dispatch({ type: 'DECREMENT' });
|
||||||
|
storeWithBug.dispatch({ type: 'DECREMENT' });
|
||||||
|
expect(liftedStoreWithBug.getState().stagedActionIds.length).toBe(7);
|
||||||
|
|
||||||
|
// Auto-commit 2 actions by "fixing" reducer bug, but introducing another.
|
||||||
|
storeWithBug.replaceReducer(counterWithAnotherBug);
|
||||||
|
expect(liftedStoreWithBug.getState().stagedActionIds.length).toBe(5);
|
||||||
|
|
||||||
|
// Auto-commit 2 more actions by "fixing" other reducer bug.
|
||||||
|
storeWithBug.replaceReducer(counter);
|
||||||
|
expect(liftedStoreWithBug.getState().stagedActionIds.length).toBe(3);
|
||||||
|
|
||||||
|
spy.restore();
|
||||||
|
});
|
||||||
|
|
||||||
|
it('should update currentStateIndex when auto-committing', () => {
|
||||||
|
let liftedStoreState;
|
||||||
|
let currentComputedState;
|
||||||
|
|
||||||
|
configuredStore.dispatch({ type: 'INCREMENT' });
|
||||||
|
configuredStore.dispatch({ type: 'INCREMENT' });
|
||||||
|
liftedStoreState = configuredLiftedStore.getState();
|
||||||
|
expect(liftedStoreState.currentStateIndex).toBe(2);
|
||||||
|
|
||||||
|
// currentStateIndex should stay at 2 as actions are committed.
|
||||||
|
configuredStore.dispatch({ type: 'INCREMENT' });
|
||||||
|
liftedStoreState = configuredLiftedStore.getState();
|
||||||
|
currentComputedState = liftedStoreState.computedStates[liftedStoreState.currentStateIndex];
|
||||||
|
expect(liftedStoreState.currentStateIndex).toBe(2);
|
||||||
|
expect(currentComputedState.state).toBe(3);
|
||||||
|
});
|
||||||
|
|
||||||
|
it('should continue to increment currentStateIndex while error blocks commit', () => {
|
||||||
|
let spy = spyOn(console, 'error');
|
||||||
|
|
||||||
|
let storeWithBug = createStore(
|
||||||
|
counterWithBug,
|
||||||
|
instrument(undefined, { maxAge: 3, shouldCatchErrors: true })
|
||||||
|
);
|
||||||
|
let liftedStoreWithBug = storeWithBug.liftedStore;
|
||||||
|
|
||||||
|
storeWithBug.dispatch({ type: 'DECREMENT' });
|
||||||
|
storeWithBug.dispatch({ type: 'DECREMENT' });
|
||||||
|
storeWithBug.dispatch({ type: 'DECREMENT' });
|
||||||
|
storeWithBug.dispatch({ type: 'DECREMENT' });
|
||||||
|
|
||||||
|
let liftedStoreState = liftedStoreWithBug.getState();
|
||||||
|
let currentComputedState = liftedStoreState.computedStates[liftedStoreState.currentStateIndex];
|
||||||
|
expect(liftedStoreState.currentStateIndex).toBe(4);
|
||||||
|
expect(currentComputedState.state).toBe(0);
|
||||||
|
expect(currentComputedState.error).toExist();
|
||||||
|
|
||||||
|
spy.restore();
|
||||||
|
});
|
||||||
|
|
||||||
|
it('should adjust currentStateIndex correctly when multiple actions are committed', () => {
|
||||||
|
let spy = spyOn(console, 'error');
|
||||||
|
|
||||||
|
let storeWithBug = createStore(
|
||||||
|
counterWithBug,
|
||||||
|
instrument(undefined, { maxAge: 3, shouldCatchErrors: true })
|
||||||
|
);
|
||||||
|
let liftedStoreWithBug = storeWithBug.liftedStore;
|
||||||
|
|
||||||
|
storeWithBug.dispatch({ type: 'DECREMENT' });
|
||||||
|
storeWithBug.dispatch({ type: 'DECREMENT' });
|
||||||
|
storeWithBug.dispatch({ type: 'DECREMENT' });
|
||||||
|
storeWithBug.dispatch({ type: 'DECREMENT' });
|
||||||
|
|
||||||
|
// Auto-commit 2 actions by "fixing" reducer bug.
|
||||||
|
storeWithBug.replaceReducer(counter);
|
||||||
|
let liftedStoreState = liftedStoreWithBug.getState();
|
||||||
|
let currentComputedState = liftedStoreState.computedStates[liftedStoreState.currentStateIndex];
|
||||||
|
expect(liftedStoreState.currentStateIndex).toBe(2);
|
||||||
|
expect(currentComputedState.state).toBe(-4);
|
||||||
|
|
||||||
|
spy.restore();
|
||||||
|
});
|
||||||
|
|
||||||
|
it('should not allow currentStateIndex to drop below 0', () => {
|
||||||
|
let spy = spyOn(console, 'error');
|
||||||
|
|
||||||
|
let storeWithBug = createStore(
|
||||||
|
counterWithBug,
|
||||||
|
instrument(undefined, { maxAge: 3, shouldCatchErrors: true })
|
||||||
|
);
|
||||||
|
let liftedStoreWithBug = storeWithBug.liftedStore;
|
||||||
|
|
||||||
|
storeWithBug.dispatch({ type: 'DECREMENT' });
|
||||||
|
storeWithBug.dispatch({ type: 'DECREMENT' });
|
||||||
|
storeWithBug.dispatch({ type: 'DECREMENT' });
|
||||||
|
storeWithBug.dispatch({ type: 'DECREMENT' });
|
||||||
|
liftedStoreWithBug.dispatch(ActionCreators.jumpToState(1));
|
||||||
|
|
||||||
|
// Auto-commit 2 actions by "fixing" reducer bug.
|
||||||
|
storeWithBug.replaceReducer(counter);
|
||||||
|
let liftedStoreState = liftedStoreWithBug.getState();
|
||||||
|
let currentComputedState = liftedStoreState.computedStates[liftedStoreState.currentStateIndex];
|
||||||
|
expect(liftedStoreState.currentStateIndex).toBe(0);
|
||||||
|
expect(currentComputedState.state).toBe(-2);
|
||||||
|
|
||||||
|
spy.restore();
|
||||||
|
});
|
||||||
|
|
||||||
|
it('should use dynamic maxAge', () => {
|
||||||
|
let max = 3;
|
||||||
|
const getMaxAge = expect.createSpy().andCall(() => max);
|
||||||
|
store = createStore(counter, instrument(undefined, { maxAge: getMaxAge }));
|
||||||
|
|
||||||
|
expect(getMaxAge.calls.length).toEqual(1);
|
||||||
|
store.dispatch({ type: 'INCREMENT' });
|
||||||
|
expect(getMaxAge.calls.length).toEqual(2);
|
||||||
|
store.dispatch({ type: 'INCREMENT' });
|
||||||
|
expect(getMaxAge.calls.length).toEqual(3);
|
||||||
|
let liftedStoreState = store.liftedStore.getState();
|
||||||
|
|
||||||
|
expect(getMaxAge.calls[0].arguments[0].type).toInclude('INIT');
|
||||||
|
expect(getMaxAge.calls[0].arguments[1]).toBe(undefined);
|
||||||
|
expect(getMaxAge.calls[1].arguments[0].type).toBe('PERFORM_ACTION');
|
||||||
|
expect(getMaxAge.calls[1].arguments[1].nextActionId).toBe(1);
|
||||||
|
expect(getMaxAge.calls[1].arguments[1].stagedActionIds).toEqual([0]);
|
||||||
|
expect(getMaxAge.calls[2].arguments[1].nextActionId).toBe(2);
|
||||||
|
expect(getMaxAge.calls[2].arguments[1].stagedActionIds).toEqual([0, 1]);
|
||||||
|
|
||||||
|
expect(store.getState()).toBe(2);
|
||||||
|
expect(Object.keys(liftedStoreState.actionsById).length).toBe(3);
|
||||||
|
expect(liftedStoreState.committedState).toBe(undefined);
|
||||||
|
expect(liftedStoreState.stagedActionIds).toInclude(1);
|
||||||
|
|
||||||
|
// Trigger auto-commit.
|
||||||
|
store.dispatch({ type: 'INCREMENT' });
|
||||||
|
liftedStoreState = store.liftedStore.getState();
|
||||||
|
|
||||||
|
expect(store.getState()).toBe(3);
|
||||||
|
expect(Object.keys(liftedStoreState.actionsById).length).toBe(3);
|
||||||
|
expect(liftedStoreState.stagedActionIds).toExclude(1);
|
||||||
|
expect(liftedStoreState.computedStates[0].state).toBe(1);
|
||||||
|
expect(liftedStoreState.committedState).toBe(1);
|
||||||
|
expect(liftedStoreState.currentStateIndex).toBe(2);
|
||||||
|
|
||||||
|
max = 4;
|
||||||
|
store.dispatch({ type: 'INCREMENT' });
|
||||||
|
liftedStoreState = store.liftedStore.getState();
|
||||||
|
|
||||||
|
expect(store.getState()).toBe(4);
|
||||||
|
expect(Object.keys(liftedStoreState.actionsById).length).toBe(4);
|
||||||
|
expect(liftedStoreState.stagedActionIds).toExclude(1);
|
||||||
|
expect(liftedStoreState.computedStates[0].state).toBe(1);
|
||||||
|
expect(liftedStoreState.committedState).toBe(1);
|
||||||
|
expect(liftedStoreState.currentStateIndex).toBe(3);
|
||||||
|
|
||||||
|
max = 3;
|
||||||
|
store.dispatch({ type: 'INCREMENT' });
|
||||||
|
liftedStoreState = store.liftedStore.getState();
|
||||||
|
|
||||||
|
expect(store.getState()).toBe(5);
|
||||||
|
expect(Object.keys(liftedStoreState.actionsById).length).toBe(3);
|
||||||
|
expect(liftedStoreState.stagedActionIds).toExclude(1);
|
||||||
|
expect(liftedStoreState.computedStates[0].state).toBe(3);
|
||||||
|
expect(liftedStoreState.committedState).toBe(3);
|
||||||
|
expect(liftedStoreState.currentStateIndex).toBe(2);
|
||||||
|
|
||||||
|
store.dispatch({ type: 'INCREMENT' });
|
||||||
|
liftedStoreState = store.liftedStore.getState();
|
||||||
|
|
||||||
|
expect(store.getState()).toBe(6);
|
||||||
|
expect(Object.keys(liftedStoreState.actionsById).length).toBe(3);
|
||||||
|
expect(liftedStoreState.stagedActionIds).toExclude(1);
|
||||||
|
expect(liftedStoreState.computedStates[0].state).toBe(4);
|
||||||
|
expect(liftedStoreState.committedState).toBe(4);
|
||||||
|
expect(liftedStoreState.currentStateIndex).toBe(2);
|
||||||
|
});
|
||||||
|
|
||||||
|
it('should throw error when maxAge < 2', () => {
|
||||||
|
expect(() => {
|
||||||
|
createStore(counter, instrument(undefined, { maxAge: 1 }));
|
||||||
|
}).toThrow(/may not be less than 2/);
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
describe('Import State', () => {
|
||||||
|
let monitoredStore;
|
||||||
|
let monitoredLiftedStore;
|
||||||
|
let exportedState;
|
||||||
|
|
||||||
|
beforeEach(() => {
|
||||||
|
monitoredStore = createStore(counter, instrument());
|
||||||
|
monitoredLiftedStore = monitoredStore.liftedStore;
|
||||||
|
// Set up state to export
|
||||||
|
monitoredStore.dispatch({ type: 'INCREMENT' });
|
||||||
|
monitoredStore.dispatch({ type: 'INCREMENT' });
|
||||||
|
monitoredStore.dispatch({ type: 'INCREMENT' });
|
||||||
|
|
||||||
|
exportedState = monitoredLiftedStore.getState();
|
||||||
|
});
|
||||||
|
|
||||||
|
it('should replay all the steps when a state is imported', () => {
|
||||||
|
let importMonitoredStore = createStore(counter, instrument());
|
||||||
|
let importMonitoredLiftedStore = importMonitoredStore.liftedStore;
|
||||||
|
|
||||||
|
importMonitoredLiftedStore.dispatch(ActionCreators.importState(exportedState));
|
||||||
|
expect(importMonitoredLiftedStore.getState()).toEqual(exportedState);
|
||||||
|
});
|
||||||
|
|
||||||
|
it('should replace the existing action log with the one imported', () => {
|
||||||
|
let importMonitoredStore = createStore(counter, instrument());
|
||||||
|
let importMonitoredLiftedStore = importMonitoredStore.liftedStore;
|
||||||
|
|
||||||
|
importMonitoredStore.dispatch({ type: 'DECREMENT' });
|
||||||
|
importMonitoredStore.dispatch({ type: 'DECREMENT' });
|
||||||
|
|
||||||
|
importMonitoredLiftedStore.dispatch(ActionCreators.importState(exportedState));
|
||||||
|
expect(importMonitoredLiftedStore.getState()).toEqual(exportedState);
|
||||||
|
});
|
||||||
|
|
||||||
|
it('should allow for state to be imported without replaying actions', () => {
|
||||||
|
let importMonitoredStore = createStore(counter, instrument());
|
||||||
|
let importMonitoredLiftedStore = importMonitoredStore.liftedStore;
|
||||||
|
|
||||||
|
let noComputedExportedState = Object.assign({}, exportedState);
|
||||||
|
delete noComputedExportedState.computedStates;
|
||||||
|
|
||||||
|
importMonitoredLiftedStore.dispatch(ActionCreators.importState(noComputedExportedState, true));
|
||||||
|
|
||||||
|
let expectedImportedState = Object.assign({}, noComputedExportedState, {
|
||||||
|
computedStates: undefined
|
||||||
|
});
|
||||||
|
expect(importMonitoredLiftedStore.getState()).toEqual(expectedImportedState);
|
||||||
|
});
|
||||||
|
|
||||||
|
it('should include callstack', () => {
|
||||||
|
let importMonitoredStore = createStore(counter, instrument(undefined, { shouldIncludeCallstack: true }));
|
||||||
|
let importMonitoredLiftedStore = importMonitoredStore.liftedStore;
|
||||||
|
|
||||||
|
importMonitoredStore.dispatch({ type: 'DECREMENT' });
|
||||||
|
importMonitoredStore.dispatch({ type: 'DECREMENT' });
|
||||||
|
|
||||||
|
const oldState = importMonitoredLiftedStore.getState();
|
||||||
|
expect(oldState.actionsById[0].stack).toBe(undefined);
|
||||||
|
expect(oldState.actionsById[1].stack).toBeA('string');
|
||||||
|
|
||||||
|
importMonitoredLiftedStore.dispatch(ActionCreators.importState(oldState));
|
||||||
|
expect(importMonitoredLiftedStore.getState()).toEqual(oldState);
|
||||||
|
expect(importMonitoredLiftedStore.getState().actionsById[0].stack).toBe(undefined);
|
||||||
|
expect(importMonitoredLiftedStore.getState().actionsById[1]).toEqual(oldState.actionsById[1]);
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
function filterStackAndTimestamps(state) {
|
||||||
|
state.actionsById = _.mapValues(state.actionsById, (action) => {
|
||||||
|
delete action.timestamp;
|
||||||
|
delete action.stack;
|
||||||
|
return action;
|
||||||
|
});
|
||||||
|
return state;
|
||||||
|
}
|
||||||
|
|
||||||
|
describe('Import Actions', () => {
|
||||||
|
let monitoredStore;
|
||||||
|
let monitoredLiftedStore;
|
||||||
|
let exportedState;
|
||||||
|
let savedActions = [
|
||||||
|
{ type: 'INCREMENT' },
|
||||||
|
{ type: 'INCREMENT' },
|
||||||
|
{ type: 'INCREMENT' }
|
||||||
|
];
|
||||||
|
|
||||||
|
beforeEach(() => {
|
||||||
|
monitoredStore = createStore(counter, instrument());
|
||||||
|
monitoredLiftedStore = monitoredStore.liftedStore;
|
||||||
|
// Pass actions through component
|
||||||
|
savedActions.forEach(action => monitoredStore.dispatch(action));
|
||||||
|
// get the final state
|
||||||
|
exportedState = filterStackAndTimestamps(monitoredLiftedStore.getState());
|
||||||
|
});
|
||||||
|
|
||||||
|
it('should replay all the steps when a state is imported', () => {
|
||||||
|
let importMonitoredStore = createStore(counter, instrument());
|
||||||
|
let importMonitoredLiftedStore = importMonitoredStore.liftedStore;
|
||||||
|
|
||||||
|
importMonitoredLiftedStore.dispatch(ActionCreators.importState(savedActions));
|
||||||
|
expect(filterStackAndTimestamps(importMonitoredLiftedStore.getState())).toEqual(exportedState);
|
||||||
|
});
|
||||||
|
|
||||||
|
it('should replace the existing action log with the one imported', () => {
|
||||||
|
let importMonitoredStore = createStore(counter, instrument());
|
||||||
|
let importMonitoredLiftedStore = importMonitoredStore.liftedStore;
|
||||||
|
|
||||||
|
importMonitoredStore.dispatch({ type: 'DECREMENT' });
|
||||||
|
importMonitoredStore.dispatch({ type: 'DECREMENT' });
|
||||||
|
|
||||||
|
importMonitoredLiftedStore.dispatch(ActionCreators.importState(savedActions));
|
||||||
|
expect(filterStackAndTimestamps(importMonitoredLiftedStore.getState())).toEqual(exportedState);
|
||||||
|
});
|
||||||
|
|
||||||
|
it('should include callstack', () => {
|
||||||
|
let importMonitoredStore = createStore(counter, instrument(undefined, { shouldIncludeCallstack: true }));
|
||||||
|
let importMonitoredLiftedStore = importMonitoredStore.liftedStore;
|
||||||
|
|
||||||
|
importMonitoredStore.dispatch({ type: 'DECREMENT' });
|
||||||
|
importMonitoredStore.dispatch({ type: 'DECREMENT' });
|
||||||
|
|
||||||
|
importMonitoredLiftedStore.dispatch(ActionCreators.importState(savedActions));
|
||||||
|
expect(importMonitoredLiftedStore.getState().actionsById[0].stack).toBe(undefined);
|
||||||
|
expect(importMonitoredLiftedStore.getState().actionsById[1].stack).toBeA('string');
|
||||||
|
expect(filterStackAndTimestamps(importMonitoredLiftedStore.getState())).toEqual(exportedState);
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
describe('Lock Changes', () => {
|
||||||
|
it('should lock', () => {
|
||||||
|
store.dispatch({ type: 'INCREMENT' });
|
||||||
|
store.liftedStore.dispatch({ type: 'LOCK_CHANGES', status: true });
|
||||||
|
expect(store.liftedStore.getState().isLocked).toBe(true);
|
||||||
|
expect(store.liftedStore.getState().nextActionId).toBe(2);
|
||||||
|
expect(store.getState()).toBe(1);
|
||||||
|
|
||||||
|
store.dispatch({ type: 'INCREMENT' });
|
||||||
|
expect(store.liftedStore.getState().nextActionId).toBe(2);
|
||||||
|
expect(store.getState()).toBe(1);
|
||||||
|
|
||||||
|
liftedStore.dispatch(ActionCreators.toggleAction(1));
|
||||||
|
expect(store.getState()).toBe(0);
|
||||||
|
liftedStore.dispatch(ActionCreators.toggleAction(1));
|
||||||
|
expect(store.getState()).toBe(1);
|
||||||
|
|
||||||
|
store.liftedStore.dispatch({ type: 'LOCK_CHANGES', status: false });
|
||||||
|
expect(store.liftedStore.getState().isLocked).toBe(false);
|
||||||
|
expect(store.liftedStore.getState().nextActionId).toBe(2);
|
||||||
|
|
||||||
|
store.dispatch({ type: 'INCREMENT' });
|
||||||
|
expect(store.liftedStore.getState().nextActionId).toBe(3);
|
||||||
|
expect(store.getState()).toBe(2);
|
||||||
|
});
|
||||||
|
it('should start locked', () => {
|
||||||
|
store = createStore(counter, instrument(undefined, { shouldStartLocked: true }));
|
||||||
|
store.dispatch({ type: 'INCREMENT' });
|
||||||
|
expect(store.liftedStore.getState().isLocked).toBe(true);
|
||||||
|
expect(store.liftedStore.getState().nextActionId).toBe(1);
|
||||||
|
expect(store.getState()).toBe(0);
|
||||||
|
|
||||||
|
const savedActions = [{ type: 'INCREMENT' }, { type: 'INCREMENT' }];
|
||||||
|
store.liftedStore.dispatch(ActionCreators.importState(savedActions));
|
||||||
|
expect(store.liftedStore.getState().nextActionId).toBe(3);
|
||||||
|
expect(store.getState()).toBe(2);
|
||||||
|
|
||||||
|
store.liftedStore.dispatch({ type: 'LOCK_CHANGES', status: false });
|
||||||
|
expect(store.liftedStore.getState().isLocked).toBe(false);
|
||||||
|
|
||||||
|
store.dispatch({ type: 'INCREMENT' });
|
||||||
|
expect(store.liftedStore.getState().nextActionId).toBe(4);
|
||||||
|
expect(store.getState()).toBe(3);
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
describe('Pause recording', () => {
|
||||||
|
it('should pause', () => {
|
||||||
|
expect(store.liftedStore.getState().isPaused).toBe(false);
|
||||||
|
store.dispatch({ type: 'INCREMENT' });
|
||||||
|
store.dispatch({ type: 'INCREMENT' });
|
||||||
|
expect(store.liftedStore.getState().nextActionId).toBe(3);
|
||||||
|
expect(store.getState()).toBe(2);
|
||||||
|
|
||||||
|
store.liftedStore.dispatch(ActionCreators.pauseRecording(true));
|
||||||
|
expect(store.liftedStore.getState().isPaused).toBe(true);
|
||||||
|
expect(store.liftedStore.getState().nextActionId).toBe(1);
|
||||||
|
expect(store.liftedStore.getState().actionsById[0].action).toEqual({ type: '@@INIT' });
|
||||||
|
expect(store.getState()).toBe(2);
|
||||||
|
|
||||||
|
store.dispatch({ type: 'INCREMENT' });
|
||||||
|
store.dispatch({ type: 'INCREMENT' });
|
||||||
|
expect(store.liftedStore.getState().nextActionId).toBe(1);
|
||||||
|
expect(store.liftedStore.getState().actionsById[0].action).toEqual({ type: '@@INIT' });
|
||||||
|
expect(store.getState()).toBe(4);
|
||||||
|
|
||||||
|
store.liftedStore.dispatch(ActionCreators.pauseRecording(false));
|
||||||
|
expect(store.liftedStore.getState().isPaused).toBe(false);
|
||||||
|
|
||||||
|
store.dispatch({ type: 'INCREMENT' });
|
||||||
|
store.dispatch({ type: 'INCREMENT' });
|
||||||
|
expect(store.liftedStore.getState().nextActionId).toBe(3);
|
||||||
|
expect(store.liftedStore.getState().actionsById[2].action).toEqual({ type: 'INCREMENT' });
|
||||||
|
expect(store.getState()).toBe(6);
|
||||||
|
});
|
||||||
|
it('should maintain the history while paused', () => {
|
||||||
|
store = createStore(counter, instrument(undefined, { pauseActionType: '@@PAUSED' }));
|
||||||
|
store.dispatch({ type: 'INCREMENT' });
|
||||||
|
store.dispatch({ type: 'INCREMENT' });
|
||||||
|
expect(store.getState()).toBe(2);
|
||||||
|
expect(store.liftedStore.getState().nextActionId).toBe(3);
|
||||||
|
expect(store.liftedStore.getState().isPaused).toBe(false);
|
||||||
|
|
||||||
|
store.liftedStore.dispatch(ActionCreators.pauseRecording(true));
|
||||||
|
expect(store.liftedStore.getState().isPaused).toBe(true);
|
||||||
|
expect(store.liftedStore.getState().nextActionId).toBe(4);
|
||||||
|
expect(store.getState()).toBe(2);
|
||||||
|
|
||||||
|
store.dispatch({ type: 'INCREMENT' });
|
||||||
|
expect(store.liftedStore.getState().nextActionId).toBe(4);
|
||||||
|
store.dispatch({ type: 'INCREMENT' });
|
||||||
|
expect(store.liftedStore.getState().nextActionId).toBe(4);
|
||||||
|
expect(store.getState()).toBe(4);
|
||||||
|
|
||||||
|
store.liftedStore.dispatch(ActionCreators.pauseRecording(false));
|
||||||
|
expect(store.liftedStore.getState().isPaused).toBe(false);
|
||||||
|
expect(store.liftedStore.getState().nextActionId).toBe(1);
|
||||||
|
expect(store.getState()).toBe(4);
|
||||||
|
store.dispatch({ type: 'INCREMENT' });
|
||||||
|
expect(store.liftedStore.getState().nextActionId).toBe(2);
|
||||||
|
expect(store.getState()).toBe(5);
|
||||||
|
|
||||||
|
store.liftedStore.dispatch(ActionCreators.commit());
|
||||||
|
store.liftedStore.dispatch(ActionCreators.pauseRecording(true));
|
||||||
|
store.dispatch({ type: 'INCREMENT' });
|
||||||
|
expect(store.liftedStore.getState().nextActionId).toBe(1);
|
||||||
|
expect(store.getState()).toBe(6);
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
it('throws if reducer is not a function', () => {
|
||||||
|
expect(() =>
|
||||||
|
createStore(undefined, instrument())
|
||||||
|
).toThrow('Expected the reducer to be a function.');
|
||||||
|
});
|
||||||
|
|
||||||
|
it('warns if the reducer is not a function but has a default field that is', () => {
|
||||||
|
expect(() =>
|
||||||
|
createStore(({ 'default': () => {} }), instrument())
|
||||||
|
).toThrow(
|
||||||
|
'Expected the reducer to be a function. ' +
|
||||||
|
'Instead got an object with a "default" field. ' +
|
||||||
|
'Did you pass a module instead of the default export? ' +
|
||||||
|
'Try passing require(...).default instead.'
|
||||||
|
);
|
||||||
|
});
|
||||||
|
|
||||||
|
it('throws if there are more than one instrument enhancer included', () => {
|
||||||
|
expect(() => {
|
||||||
|
createStore(counter, compose(instrument(), instrument()));
|
||||||
|
}).toThrow(
|
||||||
|
'DevTools instrumentation should not be applied more than once. ' +
|
||||||
|
'Check your store configuration.'
|
||||||
|
);
|
||||||
|
});
|
||||||
|
});
|
||||||
4
packages/redux-devtools/.eslintignore
Normal file
4
packages/redux-devtools/.eslintignore
Normal file
|
|
@ -0,0 +1,4 @@
|
||||||
|
lib
|
||||||
|
**/node_modules
|
||||||
|
**/webpack.config.js
|
||||||
|
examples/**/server.js
|
||||||
20
packages/redux-devtools/.eslintrc
Normal file
20
packages/redux-devtools/.eslintrc
Normal file
|
|
@ -0,0 +1,20 @@
|
||||||
|
{
|
||||||
|
"extends": "eslint-config-airbnb",
|
||||||
|
"env": {
|
||||||
|
"browser": true,
|
||||||
|
"mocha": true,
|
||||||
|
"node": true
|
||||||
|
},
|
||||||
|
"rules": {
|
||||||
|
"react/jsx-uses-react": 2,
|
||||||
|
"react/jsx-uses-vars": 2,
|
||||||
|
"react/react-in-jsx-scope": 2,
|
||||||
|
"no-console": 0,
|
||||||
|
// Temporarily disabled due to babel-eslint issues:
|
||||||
|
"block-scoped-var": 0,
|
||||||
|
"padded-blocks": 0,
|
||||||
|
},
|
||||||
|
"plugins": [
|
||||||
|
"react"
|
||||||
|
]
|
||||||
|
}
|
||||||
21
packages/redux-devtools/LICENSE.md
Normal file
21
packages/redux-devtools/LICENSE.md
Normal file
|
|
@ -0,0 +1,21 @@
|
||||||
|
The MIT License (MIT)
|
||||||
|
|
||||||
|
Copyright (c) 2015 Dan Abramov
|
||||||
|
|
||||||
|
Permission is hereby granted, free of charge, to any person obtaining a copy
|
||||||
|
of this software and associated documentation files (the "Software"), to deal
|
||||||
|
in the Software without restriction, including without limitation the rights
|
||||||
|
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
|
||||||
|
copies of the Software, and to permit persons to whom the Software is
|
||||||
|
furnished to do so, subject to the following conditions:
|
||||||
|
|
||||||
|
The above copyright notice and this permission notice shall be included in all
|
||||||
|
copies or substantial portions of the Software.
|
||||||
|
|
||||||
|
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
||||||
|
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
||||||
|
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
||||||
|
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
||||||
|
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
||||||
|
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
|
||||||
|
SOFTWARE.
|
||||||
131
packages/redux-devtools/README.md
Normal file
131
packages/redux-devtools/README.md
Normal file
|
|
@ -0,0 +1,131 @@
|
||||||
|
Redux DevTools
|
||||||
|
=========================
|
||||||
|
|
||||||
|
A live-editing time travel environment for [Redux](https://github.com/reactjs/redux).
|
||||||
|
**[See Dan's React Europe talk demoing it!](http://youtube.com/watch?v=xsSnOQynTHs)**
|
||||||
|
|
||||||
|
> Note that the implemention in this repository is different from [Redux DevTools Extension](https://github.com/zalmoxisus/redux-devtools-extension). Please refer to the latter for browser extension.
|
||||||
|
|
||||||
|
### Table of Contents
|
||||||
|
|
||||||
|
- [Features](#features)
|
||||||
|
- [Overview](#overview)
|
||||||
|
- [Browser Extension](#browser-extension)
|
||||||
|
- [Setup Instructions](#setup-instructions)
|
||||||
|
- [Custom Monitors](#custom-monitors)
|
||||||
|
- [License](#license)
|
||||||
|
|
||||||
|
[](https://travis-ci.org/reduxjs/redux-devtools)
|
||||||
|
[](https://www.npmjs.com/package/redux-devtools)
|
||||||
|
[](https://www.npmjs.com/package/redux-devtools)
|
||||||
|
[](https://discord.gg/0ZcbPKXt5bWb10Ma)
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
### Features
|
||||||
|
|
||||||
|
* Lets you inspect every state and action payload
|
||||||
|
* Lets you go back in time by “cancelling” actions
|
||||||
|
* If you change the reducer code, each “staged” action will be re-evaluated
|
||||||
|
* If the reducers throw, you will see during which action this happened, and what the error was
|
||||||
|
* With `persistState()` store enhancer, you can persist debug sessions across page reloads
|
||||||
|
|
||||||
|
### Overview
|
||||||
|
|
||||||
|
Redux DevTools is a development time package that provides power-ups for your Redux development workflow. Be careful to strip its code in production (see [walkthrough](./docs/Walkthrough.md) for instructions)! To use Redux DevTools, you need to choose a “monitor”—a React component that will serve as a UI for the DevTools. Different tasks and workflows require different UIs, so Redux DevTools is built to be flexible in this regard. We recommend using [`LogMonitor`](https://github.com/gaearon/redux-devtools-log-monitor) for inspecting the state and time travel, and wrap it in a [`DockMonitor`](https://github.com/gaearon/redux-devtools-dock-monitor) to quickly move it across the screen. That said, when you’re comfortable rolling up your own setup, feel free to do this, and share it with us.
|
||||||
|
|
||||||
|
If you came here looking for what do the “Reset”, “Revert”, “Sweep” or “Commit” buttons do, check out [the `LogMonitor` documentation](https://github.com/gaearon/redux-devtools-log-monitor/blob/master/README.md#features).
|
||||||
|
|
||||||
|
### Browser Extension
|
||||||
|
|
||||||
|
If you don’t want to bother with installing Redux DevTools and integrating it into your project, consider using [Redux DevTools Extension](https://github.com/zalmoxisus/redux-devtools-extension) for Chrome and Firefox. It provides access to the most popular monitors, is easy to configure to filter actions, and doesn’t require installing any packages.
|
||||||
|
|
||||||
|
### Setup Instructions
|
||||||
|
|
||||||
|
Read the installation [walkthrough](./docs/Walkthrough.md) for integration instructions and usage examples (`<DevTools>` component, `DevTools.instrument()`, exclude from production builds, gotchas).
|
||||||
|
|
||||||
|
### Running Examples
|
||||||
|
|
||||||
|
Clone the project:
|
||||||
|
|
||||||
|
```
|
||||||
|
git clone https://github.com/reduxjs/redux-devtools.git
|
||||||
|
cd redux-devtools/packages/redux-devtools
|
||||||
|
```
|
||||||
|
|
||||||
|
Run `npm install` in the package folder:
|
||||||
|
|
||||||
|
```
|
||||||
|
npm install
|
||||||
|
```
|
||||||
|
|
||||||
|
Now you can open an example folder and run `npm install` there:
|
||||||
|
|
||||||
|
```
|
||||||
|
cd examples/counter # or examples/todomvc
|
||||||
|
npm install
|
||||||
|
```
|
||||||
|
|
||||||
|
Finally, run the development server and open the page:
|
||||||
|
|
||||||
|
```
|
||||||
|
npm start
|
||||||
|
open http://localhost:3000
|
||||||
|
```
|
||||||
|
|
||||||
|
Try clicking on actions in the log, or changing some code inside the reducers. You should see the action log re-evaluate the state on every code change.
|
||||||
|
|
||||||
|
Also try opening `http://localhost:3000/?debug_session=123`, click around, and then refresh. You should see that all actions have been restored from the local storage.
|
||||||
|
|
||||||
|
### Custom Monitors
|
||||||
|
|
||||||
|
**DevTools accepts monitor components so you can build a completely custom UI.** [`LogMonitor`](https://github.com/gaearon/redux-devtools-log-monitor) and [`DockMonitor`](https://github.com/gaearon/redux-devtools-dock-monitor) are just examples of what is possible.
|
||||||
|
|
||||||
|
**[I challenge you to build a custom monitor for Redux DevTools!](https://github.com/reduxjs/redux-devtools/issues/3)**
|
||||||
|
|
||||||
|
Some crazy ideas for custom monitors:
|
||||||
|
|
||||||
|
* A slider that lets you jump between computed states just by dragging it
|
||||||
|
* An in-app layer that shows the last N states right in the app (e.g. for animation)
|
||||||
|
* A time machine like interface where the last N states of your app reside on different Z layers
|
||||||
|
* Feel free to come up with and implement your own! Check [`LogMonitor`](https://github.com/gaearon/redux-devtools-log-monitor) `propTypes` to see what you can do.
|
||||||
|
|
||||||
|
In fact some of these are implemented already:
|
||||||
|
|
||||||
|
#### [Slider Monitor](https://github.com/calesce/redux-slider-monitor)
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
#### [Inspector](https://github.com/alexkuz/redux-devtools-inspector)
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
#### [Diff Monitor](https://github.com/whetstone/redux-devtools-diff-monitor)
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
#### [Filterable Log Monitor](https://github.com/bvaughn/redux-devtools-filterable-log-monitor/)
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
#### [Chart Monitor](https://github.com/romseguy/redux-devtools-chart-monitor)
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
#### [Filter Actions](https://github.com/zalmoxisus/redux-devtools-filter-actions)
|
||||||
|
|
||||||
|
(Does not have a UI but can wrap any other monitor)
|
||||||
|
|
||||||
|
<img src='http://i.imgur.com/TlqnU0J.png' width='400'>
|
||||||
|
|
||||||
|
#### [Dispatch](https://github.com/YoruNoHikage/redux-devtools-dispatch)
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
#### Keep them coming!
|
||||||
|
|
||||||
|
Create a PR to add your custom monitor.
|
||||||
|
|
||||||
|
### License
|
||||||
|
|
||||||
|
MIT
|
||||||
|
|
@ -5,13 +5,13 @@
|
||||||
First, clone the project:
|
First, clone the project:
|
||||||
|
|
||||||
```
|
```
|
||||||
git clone https://github.com/gaearon/redux-devtools.git
|
git clone https://github.com/reduxjs/redux-devtools.git
|
||||||
```
|
```
|
||||||
|
|
||||||
Then install the dependencies in the root folder:
|
Then install the dependencies in the package folder:
|
||||||
|
|
||||||
```
|
```
|
||||||
cd redux-devtools
|
cd redux-devtools/packages/redux-devtools
|
||||||
npm install
|
npm install
|
||||||
```
|
```
|
||||||
|
|
||||||
|
|
@ -8,13 +8,13 @@
|
||||||
},
|
},
|
||||||
"repository": {
|
"repository": {
|
||||||
"type": "git",
|
"type": "git",
|
||||||
"url": "https://github.com/gaearon/redux-devtools.git"
|
"url": "https://github.com/reduxjs/redux-devtools.git"
|
||||||
},
|
},
|
||||||
"license": "MIT",
|
"license": "MIT",
|
||||||
"bugs": {
|
"bugs": {
|
||||||
"url": "https://github.com/gaearon/redux-devtools/issues"
|
"url": "https://github.com/reduxjs/redux-devtools/issues"
|
||||||
},
|
},
|
||||||
"homepage": "https://github.com/gaearon/redux-devtools#readme",
|
"homepage": "https://github.com/reduxjs/redux-devtools#readme",
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"prop-types": "^15.5.7",
|
"prop-types": "^15.5.7",
|
||||||
"react": "^15.3.0",
|
"react": "^15.3.0",
|
||||||
|
|
@ -5,13 +5,13 @@
|
||||||
First, clone the project:
|
First, clone the project:
|
||||||
|
|
||||||
```
|
```
|
||||||
git clone https://github.com/gaearon/redux-devtools.git
|
git clone https://github.com/reduxjs/redux-devtools.git
|
||||||
```
|
```
|
||||||
|
|
||||||
Then install the dependencies in the root folder:
|
Then install the dependencies in the package folder:
|
||||||
|
|
||||||
```
|
```
|
||||||
cd redux-devtools
|
cd redux-devtools/packages/redux-devtools
|
||||||
npm install
|
npm install
|
||||||
```
|
```
|
||||||
|
|
||||||
|
|
@ -8,7 +8,7 @@
|
||||||
},
|
},
|
||||||
"repository": {
|
"repository": {
|
||||||
"type": "git",
|
"type": "git",
|
||||||
"url": "https://github.com/gaearon/redux-devtools.git"
|
"url": "https://github.com/reduxjs/redux-devtools.git"
|
||||||
},
|
},
|
||||||
"keywords": [
|
"keywords": [
|
||||||
"react",
|
"react",
|
||||||
|
|
@ -24,9 +24,9 @@
|
||||||
],
|
],
|
||||||
"license": "MIT",
|
"license": "MIT",
|
||||||
"bugs": {
|
"bugs": {
|
||||||
"url": "https://github.com/gaearon/redux-devtools/issues"
|
"url": "https://github.com/reduxjs/redux-devtools/issues"
|
||||||
},
|
},
|
||||||
"homepage": "https://github.com/gaearon/redux-devtools#readme",
|
"homepage": "https://github.com/reduxjs/redux-devtools#readme",
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"classnames": "^2.1.2",
|
"classnames": "^2.1.2",
|
||||||
"prop-types": "^15.5.7",
|
"prop-types": "^15.5.7",
|
||||||
73
packages/redux-devtools/package.json
Normal file
73
packages/redux-devtools/package.json
Normal file
|
|
@ -0,0 +1,73 @@
|
||||||
|
{
|
||||||
|
"name": "redux-devtools",
|
||||||
|
"version": "3.4.2",
|
||||||
|
"description": "Redux DevTools with hot reloading and time travel",
|
||||||
|
"main": "lib/index.js",
|
||||||
|
"scripts": {
|
||||||
|
"clean": "rimraf lib",
|
||||||
|
"build": "babel src --out-dir lib",
|
||||||
|
"lint": "eslint src test examples",
|
||||||
|
"test": "cross-env NODE_ENV=test mocha --compilers js:babel-core/register --recursive",
|
||||||
|
"test:watch": "cross-env NODE_ENV=test mocha --compilers js:babel-core/register --recursive --watch",
|
||||||
|
"test:cov": "babel-node ./node_modules/.bin/isparta cover ./node_modules/.bin/_mocha -- --recursive",
|
||||||
|
"prepare": "npm run build",
|
||||||
|
"prepublishOnly": "npm run lint && npm run test && npm run clean && npm run build"
|
||||||
|
},
|
||||||
|
"files": [
|
||||||
|
"lib",
|
||||||
|
"src"
|
||||||
|
],
|
||||||
|
"repository": {
|
||||||
|
"type": "git",
|
||||||
|
"url": "https://github.com/reduxjs/redux-devtools.git"
|
||||||
|
},
|
||||||
|
"keywords": [
|
||||||
|
"redux",
|
||||||
|
"devtools",
|
||||||
|
"flux",
|
||||||
|
"hot reloading",
|
||||||
|
"time travel",
|
||||||
|
"live edit"
|
||||||
|
],
|
||||||
|
"author": "Dan Abramov <dan.abramov@me.com> (http://github.com/gaearon)",
|
||||||
|
"license": "MIT",
|
||||||
|
"bugs": {
|
||||||
|
"url": "https://github.com/reduxjs/redux-devtools/issues"
|
||||||
|
},
|
||||||
|
"homepage": "https://github.com/reduxjs/redux-devtools",
|
||||||
|
"devDependencies": {
|
||||||
|
"babel-cli": "^6.3.17",
|
||||||
|
"babel-core": "^6.3.17",
|
||||||
|
"babel-eslint": "^4.1.6",
|
||||||
|
"babel-loader": "^6.2.0",
|
||||||
|
"babel-preset-es2015-loose": "^6.1.3",
|
||||||
|
"babel-preset-react": "6.3.13",
|
||||||
|
"babel-preset-stage-0": "^6.3.13",
|
||||||
|
"cross-env": "3.1.3",
|
||||||
|
"eslint": "^0.23",
|
||||||
|
"eslint-config-airbnb": "0.0.6",
|
||||||
|
"eslint-plugin-react": "^2.3.0",
|
||||||
|
"expect": "^1.6.0",
|
||||||
|
"isparta": "^3.0.3",
|
||||||
|
"jsdom": "^6.5.1",
|
||||||
|
"mocha": "^2.2.5",
|
||||||
|
"mocha-jsdom": "^1.0.0",
|
||||||
|
"react": "^0.14.9",
|
||||||
|
"react-addons-test-utils": "^0.14.0",
|
||||||
|
"react-dom": "^0.14.0",
|
||||||
|
"react-redux": "^4.0.0",
|
||||||
|
"redux": "^3.5.2",
|
||||||
|
"rimraf": "^2.3.4",
|
||||||
|
"webpack": "^1.11.0"
|
||||||
|
},
|
||||||
|
"peerDependencies": {
|
||||||
|
"react": "^0.14.9 || ^15.3.0 || ^16.0.0",
|
||||||
|
"react-redux": "^4.0.0 || ^5.0.0",
|
||||||
|
"redux": "^3.5.2 || ^4.0.0"
|
||||||
|
},
|
||||||
|
"dependencies": {
|
||||||
|
"prop-types": "^15.5.7",
|
||||||
|
"lodash": "^4.2.0",
|
||||||
|
"redux-devtools-instrument": "^1.9.0"
|
||||||
|
}
|
||||||
|
}
|
||||||
Loading…
Reference in New Issue
Block a user