combination-react-app/libs/index.js

Combine some small apps into a big app for react app

'use strict';

Object.defineProperty(exports, "__esModule", {
  value: true
});

var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };

exports.default = createProcessRoot;

var _react = require('react');

var _react2 = _interopRequireDefault(_react);

var _reactRedux = require('react-redux');

var _reactRedux2 = _interopRequireDefault(_reactRedux);

var _redux = require('redux');

var _constant = require('./constant');

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

function mapStateToProps(props) {
  return _extends({}, props);
}

function mapDispatchToProps(dispatch) {
  return {
    actions: (0, _redux.bindActionCreators)({}, dispatch)
  };
}

function connectProps(mapProps, mapDispatchProps) {
  return function (Component) {
    return (0, _reactRedux2.default)(mapProps, mapDispatchProps)(Component);
  };
}

/**
 *
 * @param {*} store
 * @param {*} app
 * @param {*} router is not used.
 */
function getProvider(store, Component, router) {
  //eslint-disable-line
  return function (extraProps) {
    return _react2.default.createElement(
      _reactRedux.Provider,
      { store: store },
      connectProps(mapStateToProps, mapDispatchToProps)(Component),
      _react2.default.createElement(Component, extraProps)
    );
  };
}

function renderComponent(props, actions) {
  return function (component) {
    return connectProps(props, actions)(component);
  };
}

function createProcessRoot(props, actions) {
  return function (options) {
    var appProject = options.appProject,
        Com = options.Component,
        frameworkType = options.frameworkType;

    var provider = null;
    if (Com) {
      return (0, _reactRedux2.default)(props, actions)(Com);
    }

    return function (f) {
      var separate = f.separate,
          dispatch = f.dispatch,
          sync = f.sync,
          childRef = f.childRef,
          reRender = f.reRender;
      /**
       * Prevent multiple rendering
      */

      if (provider) {
        return provider;
      }
      function select(state) {
        return state;
      }

      var currentValue = void 0;
      var previousValue = void 0;
      function handleChange(store) {
        return function () {
          currentValue = select(store.getState());
          if (previousValue !== currentValue) {
            if (sync && typeof sync === 'function') {
              sync(store.getState());
            } else {
              dispatch({ type: 'example/save', payload: { test: currentValue } });
            }
            console.log('Some deep nested property changed from', previousValue, 'to', currentValue);
          }
        };
      }

      /**
      * separate is use to control the child project has separate store or not.
      */
      if (separate) {
        if (appProject) {
          /**
          *  for dva react project.
          */
          if (frameworkType === _constant.DVA) {
            var app = appProject();
            if (app.toString() === '[object Promise]' && typeof app.then === 'function') {
              app.then(function (data) {
                // setTimeout(() => {
                var store = data._store,
                    element = data.provider;

                previousValue = store.getState();
                childRef && childRef({ store: store });
                store.subscribe(handleChange(store));
                provider = element;
                return reRender();
              }, function (err) {
                console.log(err);
              }).catch(function (erro) {
                console.log(erro);
              });
              provider = _react2.default.createElement('div', { style: { display: 'none', color: 'red' } });
              return provider;
            }
            var store = app._store,
                element = app.provider;

            setTimeout(function () {
              previousValue = store.getState();
              childRef && childRef({ store: store });
              store.subscribe(handleChange(store));
            }, 0);
            // unsubscribe();
            provider = element;
            return provider;
          } else if (frameworkType === _constant.REACTS) {
            /**
            *  for origin react project.
            */
            var RootElement = appProject.RootElement,
                _store = appProject.store;

            setTimeout(function () {
              previousValue = _store.getState();
              childRef({ store: _store });
              _store.subscribe(handleChange(_store));
            }, 0);
            return RootElement;
          }
        }
        /**
         *  for origin react component.
        */
      }
      return null; // 暂时不处理
    };
  };
}