diff --git a/.babelrc b/.babelrc new file mode 100644 index 0000000..65836a6 --- /dev/null +++ b/.babelrc @@ -0,0 +1,3 @@ +{ + "presets": ["es2015-loose", "stage-0", "react"] +} diff --git a/.gitignore b/.gitignore new file mode 100644 index 0000000..8fcb4be --- /dev/null +++ b/.gitignore @@ -0,0 +1,3 @@ +*.log +lib +node_modules diff --git a/.npmignore b/.npmignore new file mode 100644 index 0000000..b37f9c4 --- /dev/null +++ b/.npmignore @@ -0,0 +1,2 @@ +*.log +src diff --git a/README.md b/README.md index 35fbead..a7d6c3e 100644 --- a/README.md +++ b/README.md @@ -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( + +); +``` + +You can also use ``, a hacky class to use multiple monitors into the ``: + +```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( + + + + + + +); +``` + +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 diff --git a/package.json b/package.json new file mode 100644 index 0000000..cc17c44 --- /dev/null +++ b/package.json @@ -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 (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": {} +} diff --git a/src/Dispatcher.js b/src/Dispatcher.js new file mode 100644 index 0000000..8959cd0 --- /dev/null +++ b/src/Dispatcher.js @@ -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 ( +
+
+ +
+ ); + } +} diff --git a/src/MultipleMonitors.js b/src/MultipleMonitors.js new file mode 100644 index 0000000..bd11a76 --- /dev/null +++ b/src/MultipleMonitors.js @@ -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 ( +
+ {monitors} +
+ ); + } +} diff --git a/src/index.js b/src/index.js new file mode 100644 index 0000000..59f8fd0 --- /dev/null +++ b/src/index.js @@ -0,0 +1 @@ +export default from './Dispatcher';