Most & React - Stream ES7 decorator.

streamDecorator

import React, { Component } from 'react';
import excEnv from 'react/lib/ExecutionEnvironment';
import most from 'most'


export default function Stream(streams) {
  return DecoratedComponent => {

    class StreamComponent extends Component {
      constructor(props) {
        super(props);

        // ensure window object is defined so we can wire stream data
        if (!excEnv.canUseDOM) {
          return;
        }

        this.state = {...streams};

        this.stateCycle = most.create(add => {
          this.stateCycleEnd = add;
        });

        this.observe(streams);

      }

      componentWillUnmount() {
        if (this.stateCycleEnd) {
          this.stateCycleEnd();
        }
      }

      render() {
        return <DecoratedComponent {...this.props} {...this.state} />;
      }

      observe(streamObj) {
        for (let key in streamObj) {
          if (!streamObj.hasOwnProperty(key)) {
            return;
          }

          most.merge(this.stateCycle, streamObj[key])
            .until(this.stateCycle.take(1))
            .observe((x) => {
              this.state[key] = x;
              this.setState(this.state);
            });
        }
      }

    }

    return StreamComponent;
  }
}

Usage

@Stream({
  todos: todosCursor.stream
})
class Todos extends React.Component {}