add fetchData, redux connect, react router 4 with router decorators

Author: 方永乐

.babelrc

@@ -0,0 +1,12 @@
+{
+ "presets": [
+ "env",
+ "react",
+ "stage-3"
+ ],
+ "plugins": [
+ "syntax-dynamic-import",
+ "transform-runtime",
+ "transform-decorators-legacy"
+ ]
+}

.gitignore

@@ -57,3 +57,6 @@ typings/
 # dotenv environment variables file
 .env
 
+*~
+.DS_Store
+.idea/

.npmignore

@@ -0,0 +1,2 @@
+src/**/*
+src/

README.md

@@ -0,0 +1,84 @@
+## react-web-helper
+
+* helper for [create-react-web](https://github.com/skyFi/create-react-web)
+
+### Usage
+
+#### only redux connect
+
+```JavaScript
+// before
+import React from 'react';
+import { connect } from 'react-redux';
+
+class Example extends React.Component {
+ //...
+}
+export default connect(/*mapStateToProps, etc.*/)(Example);
+
+// after
+import React from 'react';
+import { reduxConnect } from 'react-web-helper';
+
+@reduxConnect(/*mapStateToProps, etc.*/)
+class Example extends React.Component {
+ //...
+}
+export default Example;
+```
+
+#### react-router 4.x withRouter + redux
+
+```JavaScript
+// before
+import React from 'react';
+import { connect } from 'react-redux';
+import { withRouter } from 'react-router-dom';
+
+class Example extends React.Component {
+ //...
+}
+export default withRouter(connect(/*mapStateToProps, etc.*/)(Example));
+
+// after
+import React from 'react';
+import { reduxConnect, withRouter } from 'react-web-helper';
+
+@withRouter()
+@reduxConnect(/*mapStateToProps, etc.*/)
+class Example extends React.Component {
+ //...
+}
+export default Example;
+```
+
+#### fetchData for SSR
+
+```JavaScript
+// simple
+import React from 'react';
+import { fetchData } from 'react-web-helper';
+
+@fetchData()
+class Example extends React.Component {
+ // fetchData will exec in server side or componentDidMount func
+ static async fetchData({ dispatch, match }) {
+ await dispatch(someAction());
+ // ...
+ }
+ // ...
+}
+export default Example;
+
+// with react router 4.x and redux
+import React from 'react';
+import { reduxConnect, withRouter, fetchData } from 'react-web-helper';
+
+@fetchData()
+@withRouter()
+@reduxConnect(/*mapStateToProps, etc.*/)
+class Example extends React.Component {
+ //...
+}
+export default Example;
+```

index.js

@@ -0,0 +1,9 @@
+import reduxConnect from './src/reduxConnectDecorator';
+import withRouter from './src/withRouterDecorator';
+import fetchData from './src/fetchDataDecoretor';
+
+export default {
+ reduxConnect,
+ withRouter,
+ fetchData
+};

lib/fetchDataDecoretor.js

@@ -0,0 +1,72 @@
+'use strict';
+
+Object.defineProperty(exports, "__esModule", {
+ value: true
+});
+
+var _getPrototypeOf = require('babel-runtime/core-js/object/get-prototype-of');
+
+var _getPrototypeOf2 = _interopRequireDefault(_getPrototypeOf);
+
+var _classCallCheck2 = require('babel-runtime/helpers/classCallCheck');
+
+var _classCallCheck3 = _interopRequireDefault(_classCallCheck2);
+
+var _createClass2 = require('babel-runtime/helpers/createClass');
+
+var _createClass3 = _interopRequireDefault(_createClass2);
+
+var _possibleConstructorReturn2 = require('babel-runtime/helpers/possibleConstructorReturn');
+
+var _possibleConstructorReturn3 = _interopRequireDefault(_possibleConstructorReturn2);
+
+var _inherits2 = require('babel-runtime/helpers/inherits');
+
+var _inherits3 = _interopRequireDefault(_inherits2);
+
+var _react = require('react');
+
+var _react2 = _interopRequireDefault(_react);
+
+var _hoistNonReactStatics = require('hoist-non-react-statics');
+
+var _hoistNonReactStatics2 = _interopRequireDefault(_hoistNonReactStatics);
+
+var _reactRedux = require('react-redux');
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+var fetchData = function fetchData() {
+ return function (WrappedComponent) {
+ var Enhance = function (_React$Component) {
+ (0, _inherits3.default)(Enhance, _React$Component);
+
+ function Enhance() {
+ (0, _classCallCheck3.default)(this, Enhance);
+ return (0, _possibleConstructorReturn3.default)(this, (Enhance.__proto__ || (0, _getPrototypeOf2.default)(Enhance)).apply(this, arguments));
+ }
+
+ (0, _createClass3.default)(Enhance, [{
+ key: 'componentDidMount',
+ value: function componentDidMount() {
+ if (WrappedComponent.fetchData instanceof Function) {
+ WrappedComponent.fetchData({
+ dispatch: this.props.dispatch,
+ match: this.props.match
+ });
+ }
+ }
+ }, {
+ key: 'render',
+ value: function render() {
+ return _react2.default.createElement(WrappedComponent, this.props);
+ }
+ }]);
+ return Enhance;
+ }(_react2.default.Component);
+
+ return (0, _reactRedux.connect)()((0, _hoistNonReactStatics2.default)(Enhance, WrappedComponent));
+ };
+};
+
+exports.default = fetchData;

lib/index.js

@@ -0,0 +1,25 @@
+'use strict';
+
+Object.defineProperty(exports, "__esModule", {
+ value: true
+});
+
+var _reduxConnectDecorator = require('./src/reduxConnectDecorator');
+
+var _reduxConnectDecorator2 = _interopRequireDefault(_reduxConnectDecorator);
+
+var _withRouterDecorator = require('./src/withRouterDecorator');
+
+var _withRouterDecorator2 = _interopRequireDefault(_withRouterDecorator);
+
+var _fetchDataDecoretor = require('./src/fetchDataDecoretor');
+
+var _fetchDataDecoretor2 = _interopRequireDefault(_fetchDataDecoretor);
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+exports.default = {
+ reduxConnect: _reduxConnectDecorator2.default,
+ withRouter: _withRouterDecorator2.default,
+ fetchData: _fetchDataDecoretor2.default
+};

lib/reduxConnectDecorator.js

@@ -0,0 +1,11 @@
+'use strict';
+
+Object.defineProperty(exports, "__esModule", {
+ value: true
+});
+
+var _reactRedux = require('react-redux');
+
+exports.default = function () {
+ return _reactRedux.connect.apply(undefined, arguments);
+};

lib/withRouterDecorator.js

@@ -0,0 +1,11 @@
+'use strict';
+
+Object.defineProperty(exports, "__esModule", {
+ value: true
+});
+
+var _reactRouterDom = require('react-router-dom');
+
+exports.default = function () {
+ return _reactRouterDom.withRouter;
+};

package.json

@@ -0,0 +1,20 @@
+{
+ "name": "react-web-helper",
+ "version": "0.0.1",
+ "description": "create react web helper",
+ "main": "index.js",
+ "repository": "https://github.com/skyFi/react-web-helper.git",
+ "author": "skylor",
+ "license": "MIT",
+ "scripts": {
+ "babel": "babel index.js src --out-dir lib"
+ },
+ "dependencies": {
+ "babel-plugin-syntax-dynamic-import": "^6.18.0",
+ "babel-plugin-transform-decorators-legacy": "^1.3.4",
+ "babel-plugin-transform-runtime": "^6.23.0",
+ "babel-preset-env": "^1.6.1",
+ "babel-preset-react": "^6.24.1",
+ "babel-preset-stage-3": "^6.24.1"
+ }
+}