gilbox

const {fromJS} = require('immutable');
const data = fromJS({ name: 'gilbox' });

const rendererMixin = {
  getInitialState() {
    return {data:this.props.data}
  },
  edit (transform) {
    this.setState({data: transform(this.state.data)})
  }

gilbox

const subedit = (edit, ...path) => transform => 
  edit(state => state.updateIn(path, transform));

gilbox

const {fromJS} = require('immutable');
const data = fromJS({ name: 'gilbox' });

const Hello = component(function Hello ({name}, {edit}) {
  return <div>
    Hello, {name}!
    <button onClick={event => edit(data => data.updateIn(['name'], 'Maude Lebowski') }>
      Change My Name
    </button>
  </div>

gilbox

const {fromJS} = require('immutable');
const data = fromJS({ name: 'gilbox' });

const Hello = component(function Hello ({name}, {edit}) {
  return <div>
    Hello, {name}!
    <button onClick={event => edit(name => 'Maude Lebowski') }>
      Change My Name
    </button>
  </div>

gilbox

// @param additionalMixins? {Array|Object}
// @param renderFn {Function}
// @returns Component
function component(additionalMixins, renderFn) {
  renderFn = renderFn || additionalMixins;
  additionalMixins = (additionalMixins instanceof Function) ? [] : [].concat(additionalMixins);
  
  const mixins = [ComponentRenderMixin].concat(additionalMixins);
  
  const render = function() {

gilbox

// ComponentRenderMixin is a slightly modified version of PureRenderMixin
const ComponentRenderMixin = require('component-render-mixin');

function delegate(delegee) {
  var delegate = function() {
    return delegate.delegee.apply(this, arguments);
  }
  delegate.delegee = delegee;
  delegate.isDelegate = true;
  return delegate;

gilbox

const {fromJS} = Immutable;

const subedit = (edit, ...path) => transform => 
  edit(state => state.updateIn(path, transform));

const data = fromJS({
  phone: '6665552222'
});

const parsePhone = v => v.replace(/\D/g, '').substr(0,10);

gilbox

@elegant
class Hello extends Component {
  render() {
    const {name} = this.props;
    return <div>Hello, {name}!</div>
  }
}

gilbox

// @param additionalMixins? {Array|Object}
// @param renderFn {Function}
// @returns Component
function component(additionalMixins, renderFn) {
  renderFn = renderFn || additionalMixins;
  additionalMixins = (additionalMixins instanceof Function) ? [] : [].concat(additionalMixins);
  
  const mixins = [ComponentRenderMixin, 
                  staticFunctionsMixin]
                  .concat(additionalMixins);

gilbox

import {shouldComponentUpdate} from '../component-render-mixin';
import {componentWillMount, componentWillReceiveProps} from '../statics-mixin';

function elegant(DecoratedComponent) {
  return class ElegantDecorator extends React.Component {
    static displayName = `Elegant(${getDisplayName(DecoratedComponent)})`;
    static DecoratedComponent = DecoratedComponent;
  
    shouldComponentUpdate(nextProps, nextState) {
      return shouldComponentUpdate.call(this, nextProps, nextState);