redux-devtools
Advanced tools
redux-devtools - npm Package Compare versions
Comparing version 0.1.0 to 0.1.1
@@ -14,3 +14,4 @@ 'use strict'; | ||
| SWEEP: 'SWEEP', | ||
| TOGGLE_ACTION: 'TOGGLE_ACTION' | ||
| TOGGLE_ACTION: 'TOGGLE_ACTION', | ||
| JUMP_TO_STATE: 'JUMP_TO_STATE' | ||
| }; | ||
@@ -22,6 +23,2 @@ | ||
| function last(arr) { | ||
| return arr[arr.length - 1]; | ||
| } | ||
| function toggle(obj, key) { | ||
@@ -93,3 +90,4 @@ var clone = _extends({}, obj); | ||
| stagedActions: [INIT_ACTION], | ||
| skippedActions: {} | ||
| skippedActions: {}, | ||
| currentStateIndex: 0 | ||
| }; | ||
@@ -106,2 +104,3 @@ | ||
| var computedStates = liftedState.computedStates; | ||
| var currentStateIndex = liftedState.currentStateIndex; | ||
@@ -113,7 +112,9 @@ switch (liftedAction.type) { | ||
| skippedActions = {}; | ||
| currentStateIndex = 0; | ||
| break; | ||
| case ActionTypes.COMMIT: | ||
| committedState = last(computedStates).state; | ||
| committedState = computedStates[currentStateIndex].state; | ||
| stagedActions = [INIT_ACTION]; | ||
| skippedActions = {}; | ||
| currentStateIndex = 0; | ||
| break; | ||
@@ -123,8 +124,10 @@ case ActionTypes.ROLLBACK: | ||
| skippedActions = {}; | ||
| currentStateIndex = 0; | ||
| break; | ||
| case ActionTypes.TOGGLE_ACTION: | ||
| var index = liftedAction.index; | ||
| skippedActions = toggle(skippedActions, index); | ||
| skippedActions = toggle(skippedActions, liftedAction.index); | ||
| break; | ||
| case ActionTypes.JUMP_TO_STATE: | ||
| currentStateIndex = liftedAction.index; | ||
| break; | ||
| case ActionTypes.SWEEP: | ||
@@ -135,2 +138,3 @@ stagedActions = stagedActions.filter(function (_, i) { | ||
| skippedActions = {}; | ||
| currentStateIndex = Math.max(currentStateIndex, stagedActions.length - 1); | ||
| break; | ||
@@ -140,2 +144,5 @@ case ActionTypes.PERFORM_ACTION: | ||
| if (currentStateIndex === stagedActions.length - 1) { | ||
| currentStateIndex++; | ||
| } | ||
| stagedActions = [].concat(stagedActions, [action]); | ||
@@ -153,3 +160,4 @@ break; | ||
| skippedActions: skippedActions, | ||
| computedStates: computedStates | ||
| computedStates: computedStates, | ||
| currentStateIndex: currentStateIndex | ||
| }; | ||
@@ -172,7 +180,5 @@ }; | ||
| var computedStates = liftedState.computedStates; | ||
| var currentStateIndex = liftedState.currentStateIndex; | ||
| var state = computedStates[currentStateIndex].state; | ||
| var _last = last(computedStates); | ||
| var state = _last.state; | ||
| return state; | ||
@@ -215,2 +221,5 @@ } | ||
| return { type: ActionTypes.TOGGLE_ACTION, index: index }; | ||
| }, | ||
| jumpToState: function jumpToState(index) { | ||
| return { type: ActionTypes.JUMP_TO_STATE, index: index }; | ||
| } | ||
@@ -217,0 +226,0 @@ }; |
@@ -154,2 +154,3 @@ 'use strict'; | ||
| computedStates: _react.PropTypes.array.isRequired, | ||
| currentStateIndex: _react.PropTypes.number.isRequired, | ||
| stagedActions: _react.PropTypes.array.isRequired, | ||
@@ -162,2 +163,3 @@ skippedActions: _react.PropTypes.object.isRequired, | ||
| toggleAction: _react.PropTypes.func.isRequired, | ||
| jumpToState: _react.PropTypes.func.isRequired, | ||
| select: _react.PropTypes.func.isRequired | ||
@@ -164,0 +166,0 @@ }, |
| { | ||
| "name": "redux-devtools", | ||
| "version": "0.1.0", | ||
| "version": "0.1.1", | ||
| "description": "Redux DevTools with hot reloading and time travel", | ||
@@ -5,0 +5,0 @@ "main": "lib/index.js", |
| Redux DevTools | ||
| ========================= | ||
| Haha. README coming. Also not on NPM yet. | ||
| A better README is coming. But if you insist... | ||
| <img src='http://i.imgur.com/HMW2pjP.png' width='700'> | ||
| ### Installation | ||
| It's out on NPM as `redux-devtools@0.1.0`. | ||
| [This commit](https://github.com/gaearon/redux-devtools/commit/0a2a97556e252bfad822ca438923774bc8b932a4) should give you an idea about how to add Redux DevTools for your app **but make sure to only apply `devTools()` in development!** In production, this will be terribly slow because actions just accumulate forever. (We'll need to implement a rolling window for dev too.) | ||
| ### Running Examples | ||
| In the meantime, you can do this: | ||
| You can do this: | ||
@@ -24,3 +32,3 @@ ``` | ||
| Oh, and you can do this with the TodoMVC example as well. | ||
| Oh, and you can do the same with the TodoMVC example as well. | ||
@@ -31,2 +39,16 @@ ### It's Ugly! | ||
| You can build a completely custom UI for it because `<DevTools>` accepts a `monitor` React component prop. You can build any UI you want for it. The included `LogMonitor` is just an example. | ||
| **You can build a completely custom UI for it** because `<DevTools>` accepts a `monitor` React component prop. The included `LogMonitor` is just an example. | ||
| **[In fact I challenge you to build a custom monitor for Redux DevTools!](https://github.com/gaearon/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` propTypes to see what you can do. | ||
| ### License | ||
| MIT |
New alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Fixed alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Improved metrics
- Total package byte prevSize
- increased by5.63%
32806
- Lines of code
- increased by2.22%
692
- Number of lines in readme file
- increased by70.97%
53