quiescent-for-js.js

var React = require('react');
var EventEmitter = require('events').EventEmitter;
 
function component (mixins, render) {
  if (typeof mixins === 'function') {
    render = mixins;
    mixins = [];
  }
  
  if (!Array.isArray(mixins)) {
    mixins = [mixins];
  }

  var Component = React.createClass({
    mixins: mixins,
    
    render: function () {
      return render.call(this, this.props.cursor, this.props.statics);
    },
    
    shouldComponentUpdate: function (nextProps) {
      return this.props.cursor != nextProps.cursor;
    }
  });
  
  return function (cursor, statics) {
    return Component({ cursor: cursor, statics: statics });
  };
}
 
// use
var Heading = modul.exports = component([{
  handleClick: function (statics) {
    return function (e) {
      e.preventDefault();
      
      this.setProps({
        foo: true
      });
      
      statics.events.emit('delete');
    };
  },
  
  setProps: function (obj) {
    this.props.cursor.update(function (state) {
      return state.mergeDeep(obj);
    });
  }
}], function (cursor, statics) {
  return React.DOM.text(null,
    cursor.get('text'),
    React.DOM.text({ onclick: this.handleClick(statics) }, 'x')
  );
});
 
var headingEvents = new EventEmitter();
headingEvents.on('delete', function () {
  console.log('got delete', h);
});

var h = Heading({ text: 'some text' }, { events: headingEvents, sharedState: {} });

$ = document.querySelector.bind(document);
React.renderComponent(h, $('.app'));