Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
1 parent
33e938e
commit 12f62ed
Showing
8 changed files
with
207 additions
and
1 deletion.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,3 @@ | ||
{ | ||
"presets": ["es2015-loose", "stage-0", "react"] | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,3 @@ | ||
*.log | ||
lib | ||
node_modules |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,2 @@ | ||
*.log | ||
src |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,2 +1,57 @@ | ||
# redux-devtools-dispatch | ||
# Redux DevTools Dispatch | ||
Dispatch your actions manually to test if your app react well. | ||
|
||
### Installation | ||
|
||
`npm install --save-dev redux-devtools-dispatch` | ||
|
||
### Usage | ||
|
||
You can declare your Dispatcher the same way you declare a Monitor in your Dev Tools. | ||
|
||
```js | ||
import React from 'react'; | ||
import { createDevTools } from 'redux-devtools'; | ||
import Dispatcher from 'redux-devtools-dispatch'; | ||
|
||
export default createDevTools( | ||
<Dispatcher /> | ||
); | ||
``` | ||
|
||
You can also use `<MultipleMonitors>`, a hacky class to use multiple monitors into the `<DockMonitor>`: | ||
|
||
```js | ||
import React from 'react'; | ||
|
||
import { createDevTools } from 'redux-devtools'; | ||
import LogMonitor from 'redux-devtools-log-monitor'; | ||
import DockMonitor from 'redux-devtools-dock-monitor'; | ||
import Dispatcher from 'redux-devtools-dispatch'; | ||
import MultipleMonitors from 'redux-devtools-dispatch/lib/MultipleMonitors'; | ||
|
||
export default createDevTools( | ||
<DockMonitor toggleVisibilityKey="ctrl-h" changePositionKey="ctrl-q" defaultIsVisible={false}> | ||
<MultipleMonitors> | ||
<LogMonitor /> | ||
<Dispatcher /> | ||
</MultipleMonitors> | ||
</DockMonitor> | ||
); | ||
``` | ||
|
||
Then, just write an JSON action in the field, click on Dispatch, and that's all! | ||
|
||
### Props | ||
|
||
Name | Description | ||
------------- | ------------- | ||
`initEmpty` | When `true`, the dispatcher is empty. By default, set to `false`, the dispatcher contains : `{ "type": "" }`. | ||
|
||
### Contributing | ||
|
||
As this package is my first, any comment, pull request, issue is welcome so I can learn more from everyone. | ||
|
||
### License | ||
|
||
MIT |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,43 @@ | ||
{ | ||
"name": "redux-devtools-dispatch", | ||
"version": "0.1.0", | ||
"description": "Dispatch your actions manually to test if your app react well", | ||
"main": "lib/index.js", | ||
"scripts": { | ||
"clean": "rimraf lib", | ||
"build": "babel src --out-dir lib", | ||
"prepublish": "npm run clean && npm run build" | ||
}, | ||
"repository": { | ||
"type": "git", | ||
"url": "https://github.com/YoruNoHikage/redux-devtools-dispatch.git" | ||
}, | ||
"keywords": [ | ||
"redux", | ||
"devtools", | ||
"dispatch", | ||
"actions", | ||
"manually" | ||
], | ||
"author": "Alexis Launay <yorunohikage@gmail.com> (http://github.com/YoruNoHikage)", | ||
"license": "MIT", | ||
"bugs": { | ||
"url": "https://github.com/YoruNoHikage/redux-devtools-dispatch/issues" | ||
}, | ||
"homepage": "https://github.com/YoruNoHikage/redux-devtools-dispatch", | ||
"devDependencies": { | ||
"babel-cli": "^6.3.15", | ||
"babel-core": "^6.1.20", | ||
"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", | ||
"rimraf": "^2.3.4", | ||
"webpack": "^1.11.0" | ||
}, | ||
"peerDependencies": { | ||
"react": "^0.14.0", | ||
"redux-devtools": "^3.0.0" | ||
}, | ||
"dependencies": {} | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,58 @@ | ||
import React, { Component, PropTypes } from 'react'; | ||
|
||
const buttonStyles = { | ||
cursor: 'pointer', | ||
fontWeight: 'bold', | ||
borderRadius: '3px', | ||
padding: '4px', | ||
margin: '5px 3px', | ||
fontSize: '0.8em', | ||
color: 'white', | ||
textDecoration: 'none', | ||
backgroundColor: '#4F5A65', | ||
border: 'none', | ||
position: 'absolute', | ||
bottom: '3px', | ||
right: '5px' | ||
}; | ||
|
||
const contentStyles = { | ||
background: '#2A2F3A', | ||
margin: '5px', | ||
padding: '5px', | ||
borderRadius: '3px', | ||
outline: 'none', | ||
color: 'white', | ||
overflow: 'auto' | ||
}; | ||
|
||
export default class Dispatcher extends Component { | ||
static contextTypes = { | ||
store: PropTypes.object | ||
}; | ||
|
||
static update = () => {}; | ||
|
||
constructor(props, context) { | ||
super(props, context); | ||
} | ||
|
||
launchAction() { | ||
this.context.store.dispatch(JSON.parse(this.refs.action.innerText.replace(/\s+/g, ' '))); | ||
} | ||
|
||
componentDidMount() { | ||
this.refs.action.innerText = this.props.initEmpty ? '\n' : `{ | ||
"type": "" | ||
}`; | ||
} | ||
|
||
render() { | ||
return ( | ||
<div style={{background: '#4F5A65', fontFamily: 'monaco,Consolas,Lucida Console,monospace'}}> | ||
<div contentEditable='true' style={contentStyles} ref='action'></div> | ||
<button style={buttonStyles} onClick={this.launchAction.bind(this)}>Dispatch</button> | ||
</div> | ||
); | ||
} | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,41 @@ | ||
import React, { Component, cloneElement } from 'react'; | ||
|
||
function childrenMonitorState(props, state, action) { | ||
return props.children.map(child => child.type.update(child.props, state, action)); | ||
} | ||
|
||
function reducer(props, state = {}, action) { | ||
return { | ||
childrenMonitorState: childrenMonitorState(props, state.childMonitorState, action) | ||
}; | ||
} | ||
|
||
const defaultStyle = { | ||
height: '100%', | ||
display: 'flex', | ||
flexDirection: 'column', | ||
}; | ||
|
||
export default class MultipleMonitors extends Component { | ||
static update = reducer; | ||
|
||
constructor(props, context) { | ||
super(props, context); | ||
} | ||
|
||
render() { | ||
const { monitorState, children, style = defaultStyle, ...rest } = this.props; | ||
|
||
const monitors = children.map((e, i) => cloneElement(e, { | ||
...rest, | ||
monitorState: monitorState.childrenMonitorState[i], | ||
key: 'monitor' + i | ||
})); | ||
|
||
return ( | ||
<div style={style}> | ||
{monitors} | ||
</div> | ||
); | ||
} | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1 @@ | ||
export default from './Dispatcher'; |