nfcampos/esnextbin.md

## esnextbin.md

      
    Raw
  

              esnextbin.md
            
          
    made with esnextbin

  
## index.html
<!doctype html>
<html>
<head>
  <meta charset="utf-8">
  <title>ESNextbin Sketch</title>
  <!-- put additional styles and scripts here -->
</head>
<body>
  <div id='root'></div>
</body>
</html>

## index.js
// write ES2015 code and import modules from npm
// and then press "Execute" to run your program

import React, {Component} from 'react'
import ReactDOM  from 'react-dom'
import {shallowEqual} from 'recompose'
import {omit} from 'lodash'

class Outer extends Component {
  componentWillMount() {
    this.state = { j: 0 }
  }

  componentDidMount() {
    this.interval = setInterval(
      () => this.setState({j: this.state.j + 1}),
      500
    )
  }

  componentWillUnmount() {
    clearInterval(this.interval)
  }

  render() {
    return <Inner a={2} b={3} ><span>'abc'</span></Inner>
  }
}

class Inner extends Component {
  componentWillMount() {
    this.state = {
      calls: 0,
      propsWereDifferent: 0,
      propsWithoutChildrenWereDifferent: 0
    }
  }

  componentWillReceiveProps(nextProps) {
    this.setState({
      calls: this.state.calls + 1,
      propsWereDifferent: this.state.propsWereDifferent + (shallowEqual(this.props, nextProps) ? 0 : 1),
      propsWithoutChildrenWereDifferent: this.state.propsWithoutChildrenWereDifferent + (shallowEqual(omit(this.props, 'children'), omit(nextProps, 'children')) ? 0 : 1)
    })
  }

  render() {
    return <div>
      componentWillReceiveProps of Inner was called {this.state.calls} times.
      <br/>
      props were different {this.state.propsWereDifferent} times.
      <br/>
      props without children were different {this.state.propsWithoutChildrenWereDifferent} times.
    </div>
  }
}

ReactDOM.render(<Outer />, document.getElementById('root'))

## package.json
{
  "name": "esnextbin-sketch",
  "version": "0.0.0",
  "dependencies": {
    "react": "0.14.8",
    "react-dom": "0.14.8",
    "recompose": "0.15.1",
    "lodash": "4.8.2",
    "babel-runtime": "6.6.1"
  }
}

## transpiled.js
'use strict';

var _getPrototypeOf = require('babel-runtime/core-js/object/get-prototype-of');

var _getPrototypeOf2 = _interopRequireDefault(_getPrototypeOf);

var _classCallCheck2 = require('babel-runtime/helpers/classCallCheck');

var _classCallCheck3 = _interopRequireDefault(_classCallCheck2);

var _createClass2 = require('babel-runtime/helpers/createClass');

var _createClass3 = _interopRequireDefault(_createClass2);

var _possibleConstructorReturn2 = require('babel-runtime/helpers/possibleConstructorReturn');

var _possibleConstructorReturn3 = _interopRequireDefault(_possibleConstructorReturn2);

var _inherits2 = require('babel-runtime/helpers/inherits');

var _inherits3 = _interopRequireDefault(_inherits2);

var _react = require('react');

var _react2 = _interopRequireDefault(_react);

var _reactDom = require('react-dom');

var _reactDom2 = _interopRequireDefault(_reactDom);

var _recompose = require('recompose');

var _lodash = require('lodash');

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

// write ES2015 code and import modules from npm
// and then press "Execute" to run your program

var Outer = (function (_Component) {
  (0, _inherits3.default)(Outer, _Component);

  function Outer() {
    (0, _classCallCheck3.default)(this, Outer);
    return (0, _possibleConstructorReturn3.default)(this, (0, _getPrototypeOf2.default)(Outer).apply(this, arguments));
  }

  (0, _createClass3.default)(Outer, [{
    key: 'componentWillMount',
    value: function componentWillMount() {
      this.state = { j: 0 };
    }
  }, {
    key: 'componentDidMount',
    value: function componentDidMount() {
      var _this2 = this;

      this.interval = setInterval(function () {
        return _this2.setState({ j: _this2.state.j + 1 });
      }, 500);
    }
  }, {
    key: 'componentWillUnmount',
    value: function componentWillUnmount() {
      clearInterval(this.interval);
    }
  }, {
    key: 'render',
    value: function render() {
      return _react2.default.createElement(
        Inner,
        { a: 2, b: 3 },
        _react2.default.createElement(
          'span',
          null,
          '\'abc\''
        )
      );
    }
  }]);
  return Outer;
})(_react.Component);

var Inner = (function (_Component2) {
  (0, _inherits3.default)(Inner, _Component2);

  function Inner() {
    (0, _classCallCheck3.default)(this, Inner);
    return (0, _possibleConstructorReturn3.default)(this, (0, _getPrototypeOf2.default)(Inner).apply(this, arguments));
  }

  (0, _createClass3.default)(Inner, [{
    key: 'componentWillMount',
    value: function componentWillMount() {
      this.state = {
        calls: 0,
        propsWereDifferent: 0,
        propsWithoutChildrenWereDifferent: 0
      };
    }
  }, {
    key: 'componentWillReceiveProps',
    value: function componentWillReceiveProps(nextProps) {
      this.setState({
        calls: this.state.calls + 1,
        propsWereDifferent: this.state.propsWereDifferent + ((0, _recompose.shallowEqual)(this.props, nextProps) ? 0 : 1),
        propsWithoutChildrenWereDifferent: this.state.propsWithoutChildrenWereDifferent + ((0, _recompose.shallowEqual)((0, _lodash.omit)(this.props, 'children'), (0, _lodash.omit)(nextProps, 'children')) ? 0 : 1)
      });
    }
  }, {
    key: 'render',
    value: function render() {
      return _react2.default.createElement(
        'div',
        null,
        'componentWillReceiveProps of Inner was called ',
        this.state.calls,
        ' times.',
        _react2.default.createElement('br', null),
        'props were different ',
        this.state.propsWereDifferent,
        ' times.',
        _react2.default.createElement('br', null),
        'props without children were different ',
        this.state.propsWithoutChildrenWereDifferent,
        ' times.'
      );
    }
  }]);
  return Inner;
})(_react.Component);

_reactDom2.default.render(_react2.default.createElement(Outer, null), document.getElementById('root'));
	<!doctype html>
	<html>
	<head>
	<meta charset="utf-8">
	<title>ESNextbin Sketch</title>
	<!-- put additional styles and scripts here -->
	</head>
	<body>
	<div id='root'></div>
	</body>
	</html>
	// write ES2015 code and import modules from npm
	// and then press "Execute" to run your program

	import React, {Component} from 'react'
	import ReactDOM from 'react-dom'
	import {shallowEqual} from 'recompose'
	import {omit} from 'lodash'

	class Outer extends Component {
	componentWillMount() {
	this.state = { j: 0 }
	}

	componentDidMount() {
	this.interval = setInterval(
	() => this.setState({j: this.state.j + 1}),
	500
	)
	}

	componentWillUnmount() {
	clearInterval(this.interval)
	}

	render() {
	return <Inner a={2} b={3} ><span>'abc'</span></Inner>
	}
	}

	class Inner extends Component {
	componentWillMount() {
	this.state = {
	calls: 0,
	propsWereDifferent: 0,
	propsWithoutChildrenWereDifferent: 0
	}
	}

	componentWillReceiveProps(nextProps) {
	this.setState({
	calls: this.state.calls + 1,
	propsWereDifferent: this.state.propsWereDifferent + (shallowEqual(this.props, nextProps) ? 0 : 1),
	propsWithoutChildrenWereDifferent: this.state.propsWithoutChildrenWereDifferent + (shallowEqual(omit(this.props, 'children'), omit(nextProps, 'children')) ? 0 : 1)
	})
	}

	render() {
	return <div>
	componentWillReceiveProps of Inner was called {this.state.calls} times.
	<br/>
	props were different {this.state.propsWereDifferent} times.
	<br/>
	props without children were different {this.state.propsWithoutChildrenWereDifferent} times.
	</div>
	}
	}

	ReactDOM.render(<Outer />, document.getElementById('root'))
	{
	"name": "esnextbin-sketch",
	"version": "0.0.0",
	"dependencies": {
	"react": "0.14.8",
	"react-dom": "0.14.8",
	"recompose": "0.15.1",
	"lodash": "4.8.2",
	"babel-runtime": "6.6.1"
	}
	}
	'use strict';

	var _getPrototypeOf = require('babel-runtime/core-js/object/get-prototype-of');

	var _getPrototypeOf2 = _interopRequireDefault(_getPrototypeOf);

	var _classCallCheck2 = require('babel-runtime/helpers/classCallCheck');

	var _classCallCheck3 = _interopRequireDefault(_classCallCheck2);

	var _createClass2 = require('babel-runtime/helpers/createClass');

	var _createClass3 = _interopRequireDefault(_createClass2);

	var _possibleConstructorReturn2 = require('babel-runtime/helpers/possibleConstructorReturn');

	var _possibleConstructorReturn3 = _interopRequireDefault(_possibleConstructorReturn2);

	var _inherits2 = require('babel-runtime/helpers/inherits');

	var _inherits3 = _interopRequireDefault(_inherits2);

	var _react = require('react');

	var _react2 = _interopRequireDefault(_react);

	var _reactDom = require('react-dom');

	var _reactDom2 = _interopRequireDefault(_reactDom);

	var _recompose = require('recompose');

	var _lodash = require('lodash');

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

	// write ES2015 code and import modules from npm
	// and then press "Execute" to run your program

	var Outer = (function (_Component) {
	(0, _inherits3.default)(Outer, _Component);

	function Outer() {
	(0, _classCallCheck3.default)(this, Outer);
	return (0, _possibleConstructorReturn3.default)(this, (0, _getPrototypeOf2.default)(Outer).apply(this, arguments));
	}

	(0, _createClass3.default)(Outer, [{
	key: 'componentWillMount',
	value: function componentWillMount() {
	this.state = { j: 0 };
	}
	}, {
	key: 'componentDidMount',
	value: function componentDidMount() {
	var _this2 = this;

	this.interval = setInterval(function () {
	return _this2.setState({ j: _this2.state.j + 1 });
	}, 500);
	}
	}, {
	key: 'componentWillUnmount',
	value: function componentWillUnmount() {
	clearInterval(this.interval);
	}
	}, {
	key: 'render',
	value: function render() {
	return _react2.default.createElement(
	Inner,
	{ a: 2, b: 3 },
	_react2.default.createElement(
	'span',
	null,
	'\'abc\''
	)
	);
	}
	}]);
	return Outer;
	})(_react.Component);

	var Inner = (function (_Component2) {
	(0, _inherits3.default)(Inner, _Component2);

	function Inner() {
	(0, _classCallCheck3.default)(this, Inner);
	return (0, _possibleConstructorReturn3.default)(this, (0, _getPrototypeOf2.default)(Inner).apply(this, arguments));
	}

	(0, _createClass3.default)(Inner, [{
	key: 'componentWillMount',
	value: function componentWillMount() {
	this.state = {
	calls: 0,
	propsWereDifferent: 0,
	propsWithoutChildrenWereDifferent: 0
	};
	}
	}, {
	key: 'componentWillReceiveProps',
	value: function componentWillReceiveProps(nextProps) {
	this.setState({
	calls: this.state.calls + 1,
	propsWereDifferent: this.state.propsWereDifferent + ((0, _recompose.shallowEqual)(this.props, nextProps) ? 0 : 1),
	propsWithoutChildrenWereDifferent: this.state.propsWithoutChildrenWereDifferent + ((0, _recompose.shallowEqual)((0, _lodash.omit)(this.props, 'children'), (0, _lodash.omit)(nextProps, 'children')) ? 0 : 1)
	});
	}
	}, {
	key: 'render',
	value: function render() {
	return _react2.default.createElement(
	'div',
	null,
	'componentWillReceiveProps of Inner was called ',
	this.state.calls,
	' times.',
	_react2.default.createElement('br', null),
	'props were different ',
	this.state.propsWereDifferent,
	' times.',
	_react2.default.createElement('br', null),
	'props without children were different ',
	this.state.propsWithoutChildrenWereDifferent,
	' times.'
	);
	}
	}]);
	return Inner;
	})(_react.Component);

	_reactDom2.default.render(_react2.default.createElement(Outer, null), document.getElementById('root'));