WIP: custom automagic composer for mobx + meteor

composer.js

import React, { createElement, Component, PropTypes } from 'react';
import { observer } from 'mobx-react';
import { _ } from 'meteor/underscore';

class Container extends Component {
  componentWillMount() {
    const { onMount } = this.props;

    if (typeof onMount === 'function') onMount();
  }

  componentWillUnmount() {
    const { onUnmount } = this.props;

    if (typeof onUnmount === 'function') onUnmount();
  }

  render() {
    const { renderChild, renderProps } = this.props;
    let { loadingComponent: result } = this.props;

    if (renderProps.isReady) {
      const cleanedProps = {};

      Object.keys(renderProps).forEach(renderProp => {
        if (renderProps[renderProp]
          && renderProps[renderProp].$mobx
          && renderProps[renderProp].$mobx.array
        ) {
          cleanedProps[renderProp] = renderProps[renderProp] ? renderProps[renderProp].peek() : [];
        } else {
          cleanedProps[renderProp] = renderProps[renderProp];
        }
      });

      const props = Object.assign(
        {},
        _.omit(this.props, 'renderChild', 'renderProps'),
        cleanedProps,
      );

      result = createElement(renderChild, props);
    }

    return result;
  }
}

Container.propTypes = {
  loadingComponent: PropTypes.any,
  onMount: PropTypes.func,
  onUnmount: PropTypes.func,
  renderChild: PropTypes.any.isRequired,
  renderProps: PropTypes.object.isRequired,
};

Container.defaultProps = {
  loadingComponent: <div>Loading...</div>,
};

const mobxComposer = observer(Container);

export { mobxComposer };