Eddy Wilson eddyw

## machine.js

  // Available variables:
  // - Machine
  // - interpret
  // - assign
  // - send
  // - sendParent
  // - spawn
  // - raise
  // - actions

## index.html
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8"/>
	<title>es6 proxy #jsbench #jsperf</title>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/benchmark/1.0.0/benchmark.min.js"></script>
	<script src="./suite.js"></script>
</head>
<body>
	<h1>Open the console to view the results</h1>

## index.js
import TodoReducer from 'TodoReducer'
import { createStore } from 'redux'

const store = createStore(TodoReducer)

store.dispatch({
    type: 'ADD_TODO',
    payload: {
        title: 'Example',
        done: 1,

## TodoReducer.js
import withPropTypes from 'withPropTypes.js'

const ItemSchema = {
    id: propTypes.number,
    done: propTypes.bool.isRequired,
    title: propTypes.string.isRequired,
}

const TodoReducerSchema = propTypes.arrayOf(
    propTypes.shape(ItemSchema).isRequired

## withPropTypes.js
const withPropTypes = (name, propTypesSchema) => reducer => {
    if (process.env.NODE_ENV === 'development') {
        return (state, action) => {
            const result = reducer(state, action)

            propTypes.checkPropTypes(
                { state: propTypesSchema },
                { state: result },
                'property',
                name,

## TodoReducer.js
let id = 0

const TodoReducer = (state = [], action) => {
    switch (action.type) {
        case 'ADD_TODO':
            return [...state, {
                id: ++id,
                title: action.payload.title,
                done: action.payload.done,
            }]

## example.js
import propTypes from 'prop-types'
const pTypes = {
    name: propTypes.string.isRequired,
    age: propTypes.number.isRequired,
}

const obj = {
    name: 16,
    age: 'John',
}

## map-component.js
const Item = ({ title, completed, check, style, className }) => (
  <li className={className}>
    <span>{check} ({String(completed)}) </span>
    <span style={style}>{title}</span>
  </li>
)
const map = item => ({
  ...item,
  check: item.completed? 'o' : 'x',
  style: item.completed? { color: 'gree' } : { color: 'red' },

## map-component.js
const completedStyle = { color: 'green' }
const uncompletedStyle = { color: 'red' }
const Item = ({ title, completed }) => (
  <li>
    <span>{completed ? 'o' : 'x'} </span>
    <span style={completed ? completedStyle : uncompletedStyle}>{title}</span>
  </li>
)
const TodoList = () => (
  <ul>

## map-component.js
class MapArray extends React.Component {
  static propTypes = {
    from: propTypes.array.isRequired,
    children: propTypes.element.isRequired,
    map: propTypes.func,
  }
  static defaultProps = {
    map: e => e,
  }
  shouldComponentUpdate(nextProps) {

	// Available variables:
	// - Machine
	// - interpret
	// - assign
	// - send
	// - sendParent
	// - spawn
	// - raise
	// - actions
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="utf-8"/>
	<title>es6 proxy #jsbench #jsperf</title>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/benchmark/1.0.0/benchmark.min.js"></script>
	<script src="./suite.js"></script>
	</head>
	<body>
	<h1>Open the console to view the results</h1>
	import TodoReducer from 'TodoReducer'
	import { createStore } from 'redux'

	const store = createStore(TodoReducer)

	store.dispatch({
	type: 'ADD_TODO',
	payload: {
	title: 'Example',
	done: 1,
	import withPropTypes from 'withPropTypes.js'

	const ItemSchema = {
	id: propTypes.number,
	done: propTypes.bool.isRequired,
	title: propTypes.string.isRequired,
	}

	const TodoReducerSchema = propTypes.arrayOf(
	propTypes.shape(ItemSchema).isRequired
	const withPropTypes = (name, propTypesSchema) => reducer => {
	if (process.env.NODE_ENV === 'development') {
	return (state, action) => {
	const result = reducer(state, action)

	propTypes.checkPropTypes(
	{ state: propTypesSchema },
	{ state: result },
	'property',
	name,
	let id = 0

	const TodoReducer = (state = [], action) => {
	switch (action.type) {
	case 'ADD_TODO':
	return [...state, {
	id: ++id,
	title: action.payload.title,
	done: action.payload.done,
	}]
	import propTypes from 'prop-types'
	const pTypes = {
	name: propTypes.string.isRequired,
	age: propTypes.number.isRequired,
	}

	const obj = {
	name: 16,
	age: 'John',
	}
	const Item = ({ title, completed, check, style, className }) => (
	<li className={className}>
	<span>{check} ({String(completed)}) </span>
	<span style={style}>{title}</span>
	</li>
	)
	const map = item => ({
	...item,
	check: item.completed? 'o' : 'x',
	style: item.completed? { color: 'gree' } : { color: 'red' },
	const completedStyle = { color: 'green' }
	const uncompletedStyle = { color: 'red' }
	const Item = ({ title, completed }) => (
	<li>
	<span>{completed ? 'o' : 'x'} </span>
	<span style={completed ? completedStyle : uncompletedStyle}>{title}</span>
	</li>
	)
	const TodoList = () => (
	<ul>
	class MapArray extends React.Component {
	static propTypes = {
	from: propTypes.array.isRequired,
	children: propTypes.element.isRequired,
	map: propTypes.func,
	}
	static defaultProps = {
	map: e => e,
	}
	shouldComponentUpdate(nextProps) {