Repository: RoyalIcing/react-organism
Branch: master
Commit: 4879bc0a0066
Files: 42
Total size: 76.9 KB

Directory structure:
gitextract_z5_js_hy/

├── .gitignore
├── .travis.yml
├── CONTRIBUTING.md
├── LICENSE
├── README.md
├── demo/
│   └── src/
│       ├── components/
│       │   ├── Calculator.js
│       │   ├── Counter.js
│       │   ├── FriendsList.js
│       │   ├── Items.js
│       │   ├── Notifications.js
│       │   ├── PhotosList.js
│       │   └── Row.js
│       ├── index.js
│       ├── organisms/
│       │   ├── Calculator.js
│       │   ├── Counter.js
│       │   ├── Counter2.js
│       │   ├── Counter3.js
│       │   ├── Counter4.js
│       │   ├── Items.js
│       │   ├── ItemsChoice.js
│       │   └── Social.js
│       └── state/
│           ├── counter.js
│           ├── friends.js
│           ├── photos.js
│           ├── placeholderAPI.js
│           └── selection.js
├── nwb.config.js
├── package.json
├── packages/
│   └── create-react-organism/
│       ├── .gitignore
│       ├── README.md
│       ├── bin/
│       │   └── create-react-organism.js
│       └── package.json
├── src/
│   ├── adjustArgs/
│   │   └── extractFromDOM.js
│   ├── index.d.ts
│   ├── index.js
│   ├── multi.js
│   └── nextFrame.js
├── tests/
│   ├── .eslintrc
│   ├── extractFromDOM-test.js
│   ├── index-test.js
│   └── multi-test.js
└── umd/
    └── react-organism.js

================================================
FILE CONTENTS
================================================

================================================
FILE: .gitignore
================================================
/coverage
/demo/dist
/es
/lib
/node_modules
npm-debug.log*


================================================
FILE: .travis.yml
================================================
sudo: false

language: node_js
node_js:
  - 4
  - 6
  - 7
  - 8

before_install:
  - npm install codecov.io coveralls

after_success:
  - cat ./coverage/lcov.info | ./node_modules/codecov.io/bin/codecov.io.js
  - cat ./coverage/lcov.info | ./node_modules/coveralls/bin/coveralls.js

branches:
  only:
    - master


================================================
FILE: CONTRIBUTING.md
================================================
## Prerequisites

[Node.js](http://nodejs.org/) >= v4 must be installed.

## Installation

- Running `npm install` in the components's root directory will install everything you need for development.

## Demo Development Server

- `npm start` will run a development server with the component's demo app at [http://localhost:3000](http://localhost:3000) with hot module reloading.

## Running Tests

- `npm test` will run the tests once.

- `npm run test:coverage` will run the tests and produce a coverage report in `coverage/`.

- `npm run test:watch` will run the tests on every change.

## Building

- `npm run build` will build the component for publishing to npm and also bundle the demo app.

- `npm run clean` will delete built resources.


================================================
FILE: LICENSE
================================================
MIT License

Copyright (c) 2017 Patrick Smith

Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.


================================================
FILE: README.md
================================================
# React Organism

[![Travis][build-badge]][build]
[![npm package][npm-badge]][npm]
[![Coveralls][coveralls-badge]][coveralls]

**Dead simple React/Preact state management to bring pure components alive**

- Supports `async`/`await` and easy loading (e.g. `fetch()`)
- Reload when particular props change
- Animate using generator functions: just `yield` the new state for each frame
- Tiny: 1.69 KB gzipped (3.49 KB uncompressed)
- Embraces the existing functional `setState` while avoiding boilerplate (no writing `this.setState()` or `.bind` again)
- Easy to unit test

#### Table of contents

- [Installation](#installation)
- [Demos](#demos)
- [Usage](#usage)
  - [Basic](#basic)
  - [Using props](#using-props)
  - [Async & promises](#async)
  - [Handling events](#handling-events)
  - [Animation](#animation)
  - [Serialization: Local storage](#serialization-local-storage)
  - [Separate and reuse state handlers](#separate-and-reuse-state-handlers)
  - [Multicelled organisms](#multicelled-organisms)
- [API](#api)
  - [`makeOrganism(PureComponent, StateFunctions, options)`](#makeorganismpurecomponent-statefunctions-options)
  - [State functions](#state-functions)
  - [Argument enhancers](#argument-enhancers)
- [Why instead of Redux?](#why-instead-of-redux)

## Installation

```
npm i react-organism --save
```

## Demos

- [Animated counter](https://codesandbox.io/s/2vx12v3qmn)
- [Dynamic loading with `import()`](https://codesandbox.io/s/X6mLEwG7W)
- [Live form error validation with Yup](https://codesandbox.io/s/4xQpKRRWx)
- [Multicelled component — using multiple states](https://codesandbox.io/s/Yv7j1xLqM)
- [Todo List](https://codesandbox.io/s/yME5Y3Yz)
- [Inputs, forms, animation, fetch](https://react-organism.now.sh) · [code](https://github.com/BurntCaramel/react-organism/tree/master/demo/src)
- [User Stories Maker](https://codesandbox.io/s/xkZ5ZONl)
- [React Cheat Sheet](https://react-cheat.now.sh/) · [code](https://github.com/BurntCaramel/react-cheat)

## Usage

### Basic

```js
// organisms/Counter.js
import makeOrganism from 'react-organism'
import Counter from './components/Counter'

export default makeOrganism(Counter, {
  initial: () => ({ count: 0 }),
  increment: () => ({ count }) => ({ count: count + 1 }),
  decrement: () => ({ count }) => ({ count: count - 1 })
})
```

```js
// components/Counter.js
import React, { Component } from 'react'

export default function Counter({
  count,
  handlers: {
    increment,
    decrement
  }
}) {
  return (
    <div>
      <button onClick={ decrement } children='−' />
      <span>{ count }</span>
      <button onClick={ increment } children='+' />
    </div>
  )
}
```

### Using props

The handlers can easily use props, which are always passed as the first argument

```js
// organisms/Counter.js
import makeOrganism from 'react-organism'
import Counter from './components/Counter'

export default makeOrganism(Counter, {
  initial: ({ initialCount = 0 }) => ({ count: initialCount }),
  increment: ({ stride = 1 }) => ({ count }) => ({ count: count + stride }),
  decrement: ({ stride = 1 }) => ({ count }) => ({ count: count - stride })
})

// Render passing prop: <CounterOrganism stride={ 20 } />
```

### Async

Asynchronous code to load from an API is easy:

```js
// components/Items.js
import React, { Component } from 'react'

export default function Items({
  items,
  collectionName,
  handlers: {
    load
  }
}) {
  return (
    <div>
      {
        !!items ? (
          `${items.length} ${collectionName}`
        ) : (
          'Loading…'
        )
      }
      <div>
        <button onClick={ load } children='Reload' />
      </div>
    </div>
  )
}
```

```js
// organisms/Items.js
import makeOrganism from 'react-organism'
import Items from '../components/Items'

const baseURL = 'https://jsonplaceholder.typicode.com'
const fetchAPI = (path) => fetch(baseURL + path).then(r => r.json())

export default makeOrganism(Items, {
  initial: () => ({ items: null }),

  load: async ({ path }, prevProps) => {
    if (!prevProps || path !== prevProps.path) {
      return { items: await fetchAPI(path) }
    }
  }
})
```

```js
<div>
  <ItemsOrganism path='/photos' collectionName='photos' />
  <ItemsOrganism path='/todos' collectionName='todo items' />
</div>
```

### Handling events

Handlers can easily accept arguments such as events.

```js
// components/Calculator.js
import React, { Component } from 'react'

export default function Calculator({
  value,
  handlers: {
    changeValue,
    double,
    add3,
    initial
  }
}) {
  return (
    <div>
      <input value={ value } onChange={ changeValue } />
      <button onClick={ double } children='Double' />
      <button onClick={ add3 } children='Add 3' />
      <button onClick={ initial } children='reset' />
    </div>
  )
}
```

```js
// organisms/Calculator.js
import makeOrganism from 'react-organism'
import Calculator from '../components/Calculator'

export default makeOrganism(Calculator, {
  initial: ({ initialValue = 0 }) => ({ value: initialValue }),
  // Destructure event to get target
  changeValue: (props, { target }) => ({ value }) => ({ value: parseInt(target.value, 10) }),
  double: () => ({ value }) => ({ value: value * 2 }),
  add3: () => ({ value }) => ({ value: value + 3 })
})
```

### Animation

```js
import makeOrganism from 'react-organism'
import Counter from '../components/Counter'

export default makeOrganism(Counter, {
  initial: ({ initialCount = 0 }) => ({ count: initialCount }),
  increment: function * ({ stride = 20 }) {
    while (stride > 0) {
      yield ({ count }) => ({ count: count + 1 })
      stride -= 1
    }
  },
  decrement: function * ({ stride = 20 }) {
    while (stride > 0) {
      yield ({ count }) => ({ count: count - 1 })
      stride -= 1
    }
  }
})
```

### Automatically extract from `data-` attributes and `<forms>`

Example coming soon

### Serialization: Local storage

```js
// organisms/Counter.js
import makeOrganism from 'react-organism'
import Counter from '../components/Counter'

const localStorageKey = 'counter'

export default makeOrganism(Counter, {
  initial: ({ initialCount = 0 }) => ({ count: initialCount }),
  load: async (props, prevProps) => {
    if (!prevProps) {
      // Try commenting out:
      /* throw (new Error('Oops!')) */

      // Load previously stored state, if present
      return await JSON.parse(localStorage.getItem(localStorageKey))
    }
  },
  increment: ({ stride = 1 }) => ({ count }) => ({ count: count + stride }),
  decrement: ({ stride = 1 }) => ({ count }) => ({ count: count - stride })
}, {
  onChange(state) {
    // When state changes, save in local storage
    localStorage.setItem(localStorageKey, JSON.stringify(state))
  }
})
```

### Separate and reuse state handlers

React Organism supports separating state handlers and the component into their own files. This means state handlers could be reused by multiple smart components.

Here’s an example of separating state:

```js
// state/counter.js
export const initial = () => ({
  count: 0
})

export const increment = () => ({ count }) => ({ count: count + 1 })
export const decrement = () => ({ count }) => ({ count: count - 1 })
```

```js
// organisms/Counter.js
import makeOrganism from 'react-organism'
import Counter from './components/Counter'
import * as counterState from './state/counter'

export default makeOrganism(Counter, counterState)
```

```js
// App.js
import React from 'react'
import CounterOrganism from './organisms/Counter'

class App extends React.Component {
  render() {
    return (
      <div>
        <CounterOrganism />
      </div>
    )
  }
}
```

### Multicelled Organisms

Example coming soon.


## API

### `makeOrganism(PureComponent, StateFunctions, options?)`
```js
import makeOrganism from 'react-organism'
```
Creates a smart component, rendering using React component `PureComponent`, and managing state using `StateFunctions`.

#### `PureComponent`
A React component, usually a pure functional component. This component is passed as its props:

- The props passed to the smart component, combined with
- The current state, combined with
- `handlers` which correspond to each function in `StateFunctions` and are ready to be passed to e.g. `onClick`, `onChange`, etc.
- `loadError?`: Error produced by the `load` handler
- `handlerError?`: Error produced by any other handler

#### `StateFunctions`
Object with functional handlers. See [state functions below](#state-functions).

Either pass a object directly with each function, or create a separate file with each handler function `export`ed out, and then bring in using `import * as StateFunctions from '...'`.

#### `options`

##### `adjustArgs?(args: array) => newArgs: array`

Used to enhance handlers. See [built-in handlers below](#argument-enhancers).

##### `onChange?(state)`

Called after the state has changed, making it ideal for saving the state somewhere (e.g. Local Storage).


### State functions

Your state is handled by a collection of functions. Each function is pure: they can only rely on the props and state passed to them. Functions return the new state, either immediately or asynchronously.

Each handler is passed the current props first, followed by the called arguments:
- `(props, event)`: most event handlers, e.g. `onClick`, `onChange`
- `(props, first, second)`: e.g. `handler(first, second)`
- `(props, ...args)`: get all arguments passed
- `(props)`: ignore any arguments
- `()`: ignore props and arguments

Handlers must return one of the following:
- An object with new state changes, a la React’s `setState(changes)`.
- A function accepting the previous state and current props, and returns the new state, a la React’s `setState((prevState, props) => changes)`.
- A promise resolving to any of the above (object / function), which will then be used to update the state. Uncaught errors are stored in state under the key `handlerError`. Alternatively, your handler can use the `async`/`await` syntax.
- An iterator, such as one made by using a [generator function](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/function%2A). Each object passed to `yield` may be one of the above (object / function / promise).
- An array of any of the above (object / function / promise / iterator).
- Or optionally, nothing.

There are some handlers for special tasks, specifically:

#### `initial(props) => object` (required)
Return initial state to start off with, a la React’s `initialState`. Passed props.

#### `load(props: object, prevProps: object?, { handlers: object }) => object | Promise<object> | void` (optional)
Passed the current props and the previous props. Return new state, a Promise returning new state, or nothing. You may also use a generator function (`function * load(props, prevProps)`) and `yield` state changes.

If this is the first time loaded or if being reloaded, then `prevProps` is `null`.

Usual pattern is to check for either `prevProps` being `null` or if the prop of interest has changed from its previous value:
```js
export const load = async ({ id }, prevProps) => {
  if (!prevProps || id !== prevProps.id) {
    return { item: await loadItem(id) }
  }
}
```

Your `load` handler will be called in React’s lifecycle: `componentDidMount` and `componentWillReceiveProps`.


### Argument enhancers

Handler arguments can be adjusted, to cover many common cases. Pass them to the `adjustArgs` option. The following enhancers are built-in:

#### `extractFromDOM(args: array) => newArgs: array`
```js
import extractFromDOM from 'react-organism/lib/adjustArgs/extractFromDOM'
```

Extract values from DOM, specifically:
- For events as the first argument, extracts `value`, `checked`, and `name` from `event.target`. Additionally, if target has `data-` attributes, these will also be extracted in camelCase from its [`dataset`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/dataset). Suffixing `data-` attributes with `_number` will convert value to a number (instead of string) using `parseFloat`, and drop the suffix. Handler will receive these extracted values in an object as the first argument, followed by the original arguments.
- For `submit` events, extracts values of `<input>` fields in a `<form>`. Handler will receive the values keyed by the each input’s `name` attribute, followed by the original arguments. Pass the handler to the `onSubmit` prop of the `<form>`. Form must have `data-extract` attribute present. To clear the form after submit, add `data-reset` to the form.


## Why instead of Redux?

- Like Redux, separate your state management from rendering
- Unlike Redux, avoid loose strings for identifying actions
- Redux encourages having state in one bundle, whereas dynamic `import()` encourages breaking apps into sections
- Easier to reuse functionality, as action handlers are totally encapsulated
- No ability to reach across to the other side of your state tree
- Encourages composition of components
- Supports `async` and `await` in any action
- Supports generator functions to allow multiple state changes — great for animation
- No `switch` statements
- No boilerplate or additional helper libraries needed


[build-badge]: https://img.shields.io/travis/RoyalIcing/react-organism/master.png?style=flat-square
[build]: https://travis-ci.org/RoyalIcing/react-organism

[npm-badge]: https://img.shields.io/npm/v/react-organism.png?style=flat-square
[npm]: https://www.npmjs.org/package/react-organism

[coveralls-badge]: https://img.shields.io/coveralls/RoyalIcing/react-organism/master.png?style=flat-square
[coveralls]: https://coveralls.io/github/RoyalIcing/react-organism


================================================
FILE: demo/src/components/Calculator.js
================================================
import React, { Component } from 'react'

export default function Calculator({
  value,
  handlers: {
    changeValue,
    double,
    add3,
    initial
  }
}) {
  return (
    <div className='h-spaced'>
      <input value={ value } onChange={ changeValue } />
      <button onClick={ double } children='Double' />
      <button onClick={ add3 } children='Add 3' />
      <button onClick={ initial } children='Reset' />
    </div>
  )
}

================================================
FILE: demo/src/components/Counter.js
================================================
import React, { Component } from 'react'

export default function Counter({
  count,
  handlers: {
    increment,
    decrement,
    initial
  }
}) {
  return (
    <div className='h-spaced'>
      <button onClick={ decrement } children='−' />
      <span>{ count }</span>
      <button onClick={ increment } children='+' />
      <button onClick={ initial } children='Reset' />
    </div>
  )
}

================================================
FILE: demo/src/components/FriendsList.js
================================================
import React, { Component } from 'react'

export default function FriendsList({
  friendsList,
  selectedIndex,
  onSelectAtIndex,
  handlers: {
    addRandomFriend
  }
}) {
  return (
    <div>
      {
        !!friendsList ? (
          friendsList.map((friend, index) => (
            <div key={ index }
              style={{
                backgroundColor: selectedIndex === index ? '#00b4ff' : undefined
              }}
              data-index_number={ index }
              onClick={ onSelectAtIndex }
            >
              Name: { friend.name }
            </div>
          ))
        ) : (
          'Loading…'
        )
      }
      <div>
        <button onClick={ addRandomFriend } children='Add random friend' />
      </div>
    </div>
  )
}

================================================
FILE: demo/src/components/Items.js
================================================
import React, { Component } from 'react'

export default function Counter({
  items,
  collectionName,
  handlers: {
    load
  }
}) {
  return (
    <div>
      {
        !!items ? (
          `${items.length} ${collectionName}`
        ) : (
          'Loading…'
        )
      }
      <div>
        <button onClick={ load } children='Reload' />
      </div>
    </div>
  )
}

================================================
FILE: demo/src/components/Notifications.js
================================================
import React from 'react'

export default function Notifications({
  friends: {
    friendsList
  },
  photos: {
    photosList
  }
}) {
  return (
    <div>
      { `${friendsList.length} friends` }
      { ' | ' }
      { `${photosList.length} photos` }
    </div>
  )
}

================================================
FILE: demo/src/components/PhotosList.js
================================================
import React, { Component } from 'react'

export default function PhotosList({
  photosList,
  handlers: {
    addRandomPhoto,
    addPhoto
  }
}) {
  return (
    <div>
      {
        !!photosList ? (
          photosList.map((photo, index) => (
            <div key={ index }>
              <img src={ photo.url } />
            </div>
          ))
        ) : (
          'Loading…'
        )
      }
      <div>
        <form data-extract data-reset onSubmit={ addPhoto }>
          <label>
            {'URL: '}
            <input type='url' name='url' />
          </label>
          <button type='submit' children='Add photo' />
        </form>
      </div>
      <div>
        <button onClick={ addRandomPhoto } children='Add random photo' />
      </div>
    </div>
  )
}

================================================
FILE: demo/src/components/Row.js
================================================
import React from 'react'

const style = {
  display: 'flex',
  flexDirection: 'row'
}

export default function Row({
  children
}) {
  return (
    <div style={ style } children={ children } />
  )
}

================================================
FILE: demo/src/index.js
================================================
import React, { Component } from 'react'
import { render } from 'react-dom'

import CounterOrganism from './organisms/Counter'
import Counter2Organism from './organisms/Counter2'
import Counter3Organism from './organisms/Counter3'
import Counter4Organism from './organisms/Counter4'
import ItemsOrganism from './organisms/Items'
import ItemsChoiceOrganism from './organisms/ItemsChoice'
import CalculatorOrganism from './organisms/Calculator'
import SocialOrganism from './organisms/Social'

class Demo extends Component {
  render() {
    return <div>
      <h1><a href="https://github.com/RoyalIcing/react-organism">react-organism</a></h1>
      <h3>Simple counter:</h3>
      <CounterOrganism />
      <hr />
      <h3>Using props to customize:</h3>
      <Counter2Organism initialCount={ 9 } stride={ 3 } />
      <hr />
      <h3>Local storage (change and reload page):</h3>
      <Counter3Organism />
      <hr />
      <h3>Async animated:</h3>
      <Counter4Organism />
      <hr />
      <h3>Load data from API:</h3>
      <ItemsOrganism path='/posts' collectionName='posts' />
      <hr />
      <ItemsOrganism path='/photos' collectionName='photos' />
      <hr />
      <ItemsOrganism path='/todos' collectionName='todos' />
      <hr />
      <h3>Handling prop changes:</h3>
      <ItemsChoiceOrganism />
      <hr />
      <h3>Event handlers with calculator:</h3>
      <CalculatorOrganism />
      <hr />
      <h3>Multi-celled organism</h3>
      <SocialOrganism darkMode />

      <style>{`
* {
  padding: 0;
  font-size: inherit;
  box-sizing: border-box;
}

html {
  font-size: 18px;
  font-family: system, "-apple-system", "-webkit-system-font", BlinkMacSystemFont, "Helvetica Neue", "Helvetica", "Segoe UI", "Roboto", "Arial", "freesans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  line-height: 1.3;
}

a {
  color: inherit;
}

h1 {
  font-size: 1.5rem;
}

button, input {
  padding: 0.2em 0.5em;
  border: 1px solid #ccc;
  border-radius: 0.25em;
}
button {
  color: #222;
  background: #eee;
}

hr {
  border: none;
  border-top: 1px solid #ccc;
}

.h-spaced > * {
  margin-right: 0.5em;
}
`}</style>
    </div>
  }
}

render(<Demo/>, document.querySelector('#demo'))


================================================
FILE: demo/src/organisms/Calculator.js
================================================
import makeOrganism from '../../../src'
import extractFromDOM from '../../../src/adjustArgs/extractFromDOM'
import Calculator from '../components/Calculator'

export default makeOrganism(Calculator, {
  initial: ({ initialValue = 0 }) => ({ value: initialValue }),
  changeValue: (props, { value }) => ({ value: parseInt(value, 10) || '' }),
  // Or more robust number input handling with fallback to previous value:
  // changeValue: (props, { target: { value: newValue } }) => ({ value: previousValue }) => ({
  //   value: newValue && (parseInt(newValue, 10) || previousValue)
  // }),
  double: () => ({ value }) => ({ value: (value || 0) * 2 }),
  add3: () => ({ value }) => ({ value: (value || 0) + 3 })
}, {
  adjustArgs: extractFromDOM
})


================================================
FILE: demo/src/organisms/Counter.js
================================================
import makeOrganism from '../../../src'
import * as counterState from '../state/counter'
import Counter from '../components/Counter'

//export default makeOrganism(Counter, counterState)

export default makeOrganism(Counter, {
  initial: () => ({ count: 0 }),
  increment: () => ({ count }) => ({ count: count + 1 }),
  decrement: () => ({ count }) => ({ count: count - 1 })
})


================================================
FILE: demo/src/organisms/Counter2.js
================================================
import makeOrganism from '../../../src'
import Counter from '../components/Counter'

export default makeOrganism(Counter, {
  initial: ({ initialCount = 0 }) => ({ count: initialCount }),
  increment: () => ({ count }, { stride = 1 }) => ({ count: count + stride }),
  decrement: () => ({ count }, { stride = 1 }) => ({ count: count - stride })
})


================================================
FILE: demo/src/organisms/Counter3.js
================================================
import makeOrganism from '../../../src'
import Counter from '../components/Counter'

const localStorageKey = 'counter3'

export default makeOrganism(Counter, {
  initial: ({ initialCount = 13 }) => ({ count: initialCount }),
  load: async (props, prevProps) => {
    if (!prevProps) {
      // Try commenting out:
      /* throw (new Error('Oops!')) */

      // Load previously stored state, if present
      return await JSON.parse(localStorage.getItem(localStorageKey))
    }
  },
  increment: ({ stride = 1 }) => ({ count }) => ({ count: count + stride }),
  decrement: ({ stride = 1 }) => ({ count }) => ({ count: count - stride })
}, {
  onChange(state) {
    // When state changes, save in local storage
    localStorage.setItem(localStorageKey, JSON.stringify(state))
  }
})


================================================
FILE: demo/src/organisms/Counter4.js
================================================
import makeOrganism from '../../../src'
import Counter from '../components/Counter'

export default makeOrganism(Counter, {
  initial: ({ initialCount = 0 }) => ({ count: initialCount }),
  increment: function * ({ stride = 20 }) {
    while (stride > 0) {
      yield ({ count }) => ({ count: count + 1 })
      stride -= 1
    }
  },
  decrement: function * ({ stride = 20 }) {
    while (stride > 0) {
      yield ({ count }) => ({ count: count - 1 })
      stride -= 1
    }
  }
})


================================================
FILE: demo/src/organisms/Items.js
================================================
import makeOrganism from '../../../src'
import * as loadItemsState from '../state/placeholderAPI'
import Items from '../components/Items'

// export default makeOrganism(Items, loadItemsState)

const baseURL = 'https://jsonplaceholder.typicode.com'
const fetchAPI = (path) => fetch(baseURL + path).then(r => r.json())

export default makeOrganism(Items, {
  initial: () => ({ items: null }),

  load: function * ({ path }, prevProps) {
    if (!prevProps || path !== prevProps.path) {
      yield { items: null } // Clear so 'loading…' text appears
      yield fetchAPI(path).then(items => ({ items }))
    }
  }
})


================================================
FILE: demo/src/organisms/ItemsChoice.js
================================================
import React from 'react'
import makeOrganism from '../../../src'
import ItemsOrganism from './Items'

export default makeOrganism(({
  collection,
  handlers: {
    selectPosts,
    selectPhotos,
    selectTodos
  }
}) => (
  <div>
    <div className='h-spaced'>
      <button onClick={ selectPosts }>Posts</button>
      <button onClick={ selectPhotos }>Photos</button>
      <button onClick={ selectTodos }>Todos</button>
    </div>
    <ItemsOrganism path={ '/' + collection } collectionName={ collection } />
  </div>
), {
  initial: () => ({ collection: 'posts' }),
  selectPosts: () => ({ collection: 'posts' }),
  selectPhotos: () => ({ collection: 'photos' }),
  selectTodos: () => ({ collection: 'todos' })
})

================================================
FILE: demo/src/organisms/Social.js
================================================
import React from 'react'
import makeMultiCelledOrganism from '../../../src/multi'
import extractFromDOM from '../../../src/adjustArgs/extractFromDOM'
import PhotosList from '../components/PhotosList'
import FriendsList from '../components/FriendsList'
import Notifications from '../components/Notifications'
import Row from '../components/Row'

import * as friends from '../state/friends'
import * as photos from '../state/photos'
import * as selection from '../state/selection'

const styles = {
  light: {
    color: '#111',
    backgroundColor: '#f6f6f6'
  },
  dark: {
    color: '#f6f6f6',
    backgroundColor: '#222'
  }
}

function Social({
  darkMode = false,
  cells
}) {
  return (
    <div style={ darkMode ? styles.dark : styles.light }>
      <Notifications friends={ cells.friends } photos={ cells.photos } />
      <FriendsList
        { ...cells.friends }
        selectedIndex={ cells.selection.selectedFriendIndex }
        onSelectAtIndex={ cells.selection.handlers.selectFriendAtIndex }
      />
      <PhotosList
        { ...cells.photos }
        selectedIndex={ cells.selection.selectedPhotoIndex }
        onSelectAtIndex={ cells.selection.handlers.selectPhotoAtIndex }
      />
    </div>
  )
}

export default makeMultiCelledOrganism(Social, {
  friends,
  photos,
  selection
}, {
  adjustArgs: extractFromDOM
})

================================================
FILE: demo/src/state/counter.js
================================================
export const initial = () => ({ count: 0 })

export const increment = () => ({ count }) => ({ count: count + 1 })
export const decrement = () => ({ count }) => ({ count: count - 1 })

================================================
FILE: demo/src/state/friends.js
================================================
export const initial = () => ({
  friendsList: []
})

const convertUserToFriend = (user) => ({
  name: `${user.first} ${user.last}`
})

const fetchRandomFriends = () =>
  fetch('https://randomapi.com/api/6de6abfedb24f889e0b5f675edc50deb?fmt=raw&sole')
    .then(res => res.json())
    .then(users => users.slice(0, 10))
    .then(users => users.map(convertUserToFriend))

export const load = async (props, prevProps) => {
  if (!prevProps) {
    const newFriends = await fetchRandomFriends()
    return ({ friendsList }) => ({ friendsList: friendsList.concat(newFriends) })
  }
}

export const addFriend = (props, { name }) => ({ friendsList }) => ({ friendsList: friendsList.concat({ name }) })

export const addRandomFriend = async ({ handlers }) => {
  const [ newFriend ] = await fetchRandomFriends()
  handlers.addFriend(newFriend)
}

================================================
FILE: demo/src/state/photos.js
================================================
export const initial = () => ({
  photosList: []
})

const fetchRandomPhotoURL = () =>
  fetch(
    'https://source.unsplash.com/random/800x600',
    { method: 'HEAD', cache: 'no-cache' }
  )
    .then(res => res.url)

export const load = async (props, prevProps) => {
  if (!prevProps) {
    const url = await fetchRandomPhotoURL()
    return ({ photosList }) => ({ photosList: photosList.concat({ url }) })
  }
}

export const addPhoto = (props, { url }) => ({ photosList }) => ({ photosList: photosList.concat({ url }) })

export const addRandomPhoto = async (props) => {
  const url = await fetchRandomPhotoURL()
  return addPhoto({}, { url })
}

================================================
FILE: demo/src/state/placeholderAPI.js
================================================
const baseURL = 'https://jsonplaceholder.typicode.com'
const fetchAPI = (path) => fetch(baseURL + path).then(r => r.json())

export const initial = () => ({ items: null })

export const load = async ({ path }, prevProps) => {
  if (!prevProps || path !== prevProps.path) {
    console.log('load', path)
    return { items: await fetchAPI(path) }
  }
}


================================================
FILE: demo/src/state/selection.js
================================================
export const initial = () => ({
  selectedFriendIndex: null,
  selectedPhotoIndex: null
})

export const selectFriendAtIndex = (props, { index }) => ({ selectedFriendIndex: index })
export const selectPhotoAtIndex = (props, { index }) => ({ selectedPhotoIndex: index })


================================================
FILE: nwb.config.js
================================================
module.exports = {
  type: 'react-component',
  webpack: {
    hoisting: true
  },
  npm: {
    esModules: true,
    umd: {
      global: 'makeOrganism',
      externals: {
        'react': 'React'
      }
    }
  }
}


================================================
FILE: package.json
================================================
{
  "name": "react-organism",
  "version": "0.3.8",
  "description": "Separate React state in a dead simple functional way",
  "main": "lib/index.js",
  "module": "es/index.js",
  "types": "src/index.d.ts",
  "files": [
    "css",
    "es",
    "lib",
    "umd"
  ],
  "scripts": {
    "build": "nwb build-react-component",
    "clean": "nwb clean-module && nwb clean-demo",
    "dev": "nwb serve-react-demo",
    "test": "nwb test-react",
    "test:coverage": "nwb test-react --coverage",
    "test:watch": "nwb test-react --server",
    "now:deploy": "yarn run build && cd demo/dist && now deploy",
    "explore-bundle": "source-map-explorer",
    "prepublishOnly": "npm run test && npm run build"
  },
  "dependencies": {
    "awareness": "^1.1.4"
  },
  "peerDependencies": {
    "react": "^15.0.0-0 || ^16.0.0-0"
  },
  "devDependencies": {
    "nwb": "^0.21.5",
    "react": "^16.0.0-0",
    "react-dom": "^16.0.0-0",
    "source-map-explorer": "^1.3.3"
  },
  "author": "",
  "homepage": "",
  "license": "MIT",
  "repository": "",
  "keywords": [
    "react-component"
  ]
}


================================================
FILE: packages/create-react-organism/.gitignore
================================================
node_modules

================================================
FILE: packages/create-react-organism/README.md
================================================
# create-react-organism

Easily create [react-organism](https://github.com/RoyalIcing/react-organism) smart components.

## Usage

```sh
yarn create react-organism CustomName

# or

npm i -g create-react-organism
create-react-organism CustomName
```

Creates an **organisms** directory in your project, and a directory for your organism inside there: **[/src]/organisms/CustomName/**

Three files are created inside:
- **[CustomName].js:** a pure React component that renders the given state as props, as well as call action handlers defined in **state.js**
- **state.js:** a list of exported functions that handle the progression of state, from its `initial` form, to `load` data in asynchronously, to other action handlers that are called in response to events (e.g. onClick, onChange, etc).
- **index.js:** connects the pure component and state together and exports it for easy use.

To use the organism, simply import it:

```javascript
// pages/example.js
import CustomName from '../organisms/CustomName'

export default () => (
    <div>
        <CustomName prop1='one' />
    </div>
)
```

================================================
FILE: packages/create-react-organism/bin/create-react-organism.js
================================================
#!/usr/bin/env node

const Path = require('path')
const FS = require('fs')
const Spawn = require('cross-spawn')
const { resolve, coroutine, runNode } = require('creed')
const _ = require('lodash')

const accessibleFile = (path) => runNode(FS.access, path).map(() => path).catch(() => null)

const ensureDir = (path) => runNode(FS.mkdir, path).catch(e => {
    if (e.code === 'EEXIST') {
        return
    }

    throw e
})

const installPackage = coroutine(function * installPackage(projectPath, packageName) {
    const appPackage = require(Path.join(projectPath, 'package.json'))
    const dependencies = appPackage.dependencies || {}
    const hasInstalled = !!dependencies[packageName]
    if (hasInstalled) {
        return
    }

    const useYarn = !!(yield accessibleFile(Path.join(projectPath, 'yarn.lock')))
    const command = useYarn ? 'yarnpkg' : 'npm'
    let args = useYarn ? ['add'] : ['install', '--save']
    args.push(packageName)
    const proc = Spawn.sync(command, args, { stdio: 'inherit' })
    if (proc.status !== 0) {
      throw new Error(`\`${command} ${args.join(' ')}\` failed with status ${proc.status}`)
    }
})

function * run([ inputName, ...args ]) {
    //const fileName = _.kebabCase(inputName)
    const componentName = _.upperFirst(_.camelCase(inputName))

    let projectPath = process.cwd()
    let srcPath = yield accessibleFile(Path.resolve(projectPath, 'src'))
    const codePath = srcPath || projectPath

    // Add react-organism dependency
    yield installPackage(projectPath, 'react-organism')

    // organisms/
    const organismsDirPath = Path.resolve(codePath, 'organisms')
    yield ensureDir(organismsDirPath)

    // organisms/:fileName
    const organismPath = Path.join(organismsDirPath, componentName)
    yield ensureDir(organismPath)

    // organisms/:fileName/component.js
    yield runNode(FS.writeFile, Path.join(organismPath, 'component.js'), makeComponentJS(componentName))
    // organisms/:fileName/state.js
    yield runNode(FS.writeFile, Path.join(organismPath, 'state.js'), makeStateJS(componentName))
    // organisms/:fileName/index.js
    yield runNode(FS.writeFile, Path.join(organismPath, 'index.js'), makeIndexJS(componentName))
}


function makeStateJS(componentName) {
    return `
export const initial = () => ({
  // TODO: initial state properties
})

export const example = (props, ...args) => (prevState) => {
    // TODO: return changed state
    return prevState
}
`.trim()
}


function makeComponentJS(componentName) {
    return `
import React from 'react'

export default function ${componentName}({
    // TODO: props
    handlers: {
        example
        // TODO: state handlers
    }
}) {
  return (
    <div>
    </div>
  )
}
`.trim()
}

function makeIndexJS(componentName) {
    return `
import makeOrganism from 'react-organism'
import ${componentName} from './component'
import * as state from './state'

export default makeOrganism(${componentName}, state)
`.trim()
}

coroutine(run)(process.argv.slice(2))
    .catch(error => {
        console.error(error.message)
    })


================================================
FILE: packages/create-react-organism/package.json
================================================
{
  "name": "create-react-organism",
  "version": "0.2.0",
  "description": "Tool to easily create react-organism smart components",
  "engines": {
    "node": ">=6"
  },
  "bin": {
    "create-react-organism": "./bin/create-react-organism.js"
  },
  "main": "index.js",
  "repository": "https://github.com/RoyalIcing/react-organism",
  "author": "Patrick Smith <patrick@burntcaramel.com>",
  "license": "MIT",
  "dependencies": {
    "creed": "^1.2.1",
    "cross-spawn": "^5.1.0",
    "lodash": "^4.17.4"
  }
}


================================================
FILE: src/adjustArgs/extractFromDOM.js
================================================
import extractValuesFromDOMEvent from 'awareness/lib/extractValuesFromDOMEvent'

export default function extractFromDOM(args) {
  if (args[0]) {
    const values = extractValuesFromDOMEvent(args[0])

    // Place extracted dataset values first, followed by original arguments
    args = [values].concat(args)
  }

  return args
}

================================================
FILE: src/index.d.ts
================================================
declare module 'react-organism' {
  import React from 'react'

  export interface ReceiverProps<HandlersOut> {
    handlers: HandlersOut
  }

  function makeOrganism<Props, State, HandlersIn, HandlersOut>(
    Pure:
      | React.ComponentClass<State & ReceiverProps<HandlersOut>>
      | React.StatelessComponent<State & ReceiverProps<HandlersOut>>,
    handlersIn: HandlersIn,
    options?: {
      onChange: (newState: State) => {}
      adjustArgs: (args: any[]) => any[]
    }
  ): React.ComponentClass<Props>

  export default makeOrganism
}


================================================
FILE: src/index.js
================================================
import React, { PureComponent } from 'react'
import makeAwareness from 'awareness'

// Returns a new stateful component, given the specified state handlers and a pure component to render with
export default (
  Pure,
  handlersIn,
  {
    onChange,
    adjustArgs
  } = {}
) => class Organism extends PureComponent {
  static initialStateForProps(props) {
    return handlersIn.initial(props)
  }

  get currentState() {
    return this.props.getState ? this.props.getState() : this.state
  }

  alterState = (stateChanger) => {
    // Can either be a plain object or a callback to transform the existing state
    (this.props.setState || this.setState).call(
      this,
      stateChanger,
      // Call onChange once updated with current version of state
      onChange ? () => { onChange(this.currentState) } : undefined
    )
  }

  awareness = makeAwareness(this.alterState, handlersIn, {
    getProps: () => this.props,
    adjustArgs
  })

  state = this.awareness.state

  componentDidMount() {
    this.awareness.loadAsync(this.props, null, this.currentState)
  }

  componentDidUpdate(prevProps, prevState) {
    this.awareness.loadAsync(this.props, prevProps, this.currentState)
  }

  render() {
    // Render the pure component, passing both props and state, plus handlers bundled together
    return <Pure { ...this.props } { ...this.currentState } handlers={ this.awareness.handlers } />
  }
}


================================================
FILE: src/multi.js
================================================
import React from 'react'
import makeAwareness from 'awareness'
import nextFrame from './nextFrame'

function cellStateChangerCatchingError(cellKey, stateChanger, errorKey) {
  return (prevState, props) => {
    let cellChanges = {}
    // Check if stateChanger is a function
    if (typeof(stateChanger) === typeof(stateChanger.call)) {
      try {
        // Call state changer
        cellChanges = stateChanger(prevState[cellKey], props)
      }
      // State changer may throw
      catch (error) {
        // Store error in state
        return { [errorKey]: error }
      }
    }
    // Else just an object with changes
    else {
      cellChanges = stateChanger
    }
    return {
      [cellKey]: Object.assign({}, prevState[cellKey], cellChanges)
    }
  }
}

function processStateChanger(changeState, stateChanger, storeError) {
  if (!stateChanger) {
    return;
  }

  // Check if thenable (i.e. a Promise)
  if (typeof stateChanger.then === typeof Object.assign) {
    return stateChanger.then(stateChanger => (
      stateChanger && changeState(stateChanger)
    ))
    .catch(storeError)
  }
  // Check if iterator
  else if (typeof stateChanger.next === typeof Object.assign) {
    return processIterator(changeState, stateChanger, storeError)
  }
  // Otherwise, change state immediately
  // Required for things like <textarea> onChange to keep cursor in correct position
  else {
    changeState(stateChanger)
  }
}

function processIterator(changeState, iterator, storeError, previousValue) {
  return Promise.resolve(processStateChanger(changeState, previousValue, storeError)) // Process the previous changer
  .then(() => nextFrame()) // Wait for next frame
  .then(() => {
    const result = iterator.next() // Get the next step from the iterator
    if (result.done) { // No more iterations remaining
      return processStateChanger(changeState, result.value, storeError) // Process the changer
    }
    else {
      return processIterator(changeState, iterator, storeError, result.value) // Process the iterator’s following steps
    }
  })
}

export default function makeMultiOrganism(
  Parent,
  cells,
  {
    onChange,
    adjustArgs
  } = {}
) {
  return class OrganismMulticelled extends React.Component {
    getProps = () => this.props

    cellsAwareness = Object.keys(cells).reduce((out, cellKey) => {
      const alterState = (stateChanger) => {
        // Can either be a plain object or a callback to transform the existing state
        this.setState(
          (prevState, props) => {
            const cellChanges = stateChanger(prevState[cellKey])
            if (cellChanges.loadError || cellChanges.handlerError) {
              return cellChanges
            }
            return {
              [cellKey]: Object.assign({}, prevState[cellKey], cellChanges)
            }
          },
          // Call onChange once updated with current version of state
          onChange ? () => { onChange(this.state) } : undefined
        )
      }

      out[cellKey] = makeAwareness(alterState, cells[cellKey], {
        getProps: this.getProps,
        adjustArgs
      })
      return out
    }, {})
    
    state = Object.keys(this.cellsAwareness).reduce((state, cellKey) => {
      // Grab each cell’s initial value
      state[cellKey] = this.cellsAwareness[cellKey].state
      return state
    }, {
      loadError: null,
      handlerError: null
    })

    changeState(stateChanger) {
      // Can either be a plain object or a callback to transform the existing state
      this.setState(
        stateChanger,
        // Call onChange once updated with current version of state
        onChange ? () => { onChange(this.state) } : undefined
      )
    }

    loadPromises(nextProps, prevProps) {
      return Object.keys(cells).map(cellKey => {
        const handlersIn = cells[cellKey]
        if (handlersIn.load) {
          // Wrap in Promise to safely catch any errors thrown by `load`
          return Promise.resolve(true)
            .then(() => handlersIn.load(nextProps, prevProps))
            .then(values => (!!values ? { values, cellKey } : undefined))
        }
      })
          .filter(Boolean) // Filter out cells without .load
    }

    // Uses `load` handler, if present, to asynchronously load initial state
    loadAsync(nextProps, prevProps) {
      this.loadPromises(nextProps, prevProps)
        .forEach(promise => {
          promise.then(result => {
            if (!result) {
              return
            }
            this.changeState(cellStateChangerCatchingError(result.cellKey, result.values, 'loadError'))
          })
          .catch(error => this.changeState({ loadError: error }))
        })
    }

    // Used by Next.js
    getInitialProps(props) {
      return Promise.all(this.loadPromises(props, null))
        .then(results => results.filter(Boolean)) // Filter out .load that returned nothing
        .then(results => (
          results.reduce((initialCellValues, { values, cellKey }) => {
            initialCellValues[cellKey] = values
            return initialCellValues
          }, {})
        ))
    }

    componentDidMount() {
      this.loadAsync(this.props, null)
    }

    componentWillReceiveProps(nextProps) {
      this.loadAsync(nextProps, this.props)
    }

    cellsProxy = Object.keys(cells).reduce((cellsProxy, cellKey) => {
      const { handlers } = this.cellsAwareness[cellKey]

      Object.defineProperty(cellsProxy, cellKey, {
        get: () => {
          // Track which cells are used
          //this.usedCells[cellKey] = true
          return Object.assign({}, this.state[cellKey], { handlers })
        }
      })
      return cellsProxy
    }, {})

    render() {
      // Render the pure component, passing both props and cells
      return <Parent { ...this.props } cells={ this.cellsProxy } />
    }
  }
}


================================================
FILE: src/nextFrame.js
================================================
export default () => new Promise((resolve) => {
  window.requestAnimationFrame(resolve)
})


================================================
FILE: tests/.eslintrc
================================================
{
  "env": {
    "mocha": true
  }
}


================================================
FILE: tests/extractFromDOM-test.js
================================================
import expect from 'expect'
import React from 'react'
import {render, unmountComponentAtNode} from 'react-dom'
import ReactTestUtils from 'react-dom/test-utils'

import makeOrganism from 'src/'
import extractFromDOM from 'src/adjustArgs/extractFromDOM'

const waitMs = duration => new Promise(resolve => setTimeout(resolve, duration))

function PhotosList({
  photosList,
  selectedPhotoIndex,
  handlers: {
    addPhoto,
    selectPhotoAtIndex
  }
}) {
  return (
    <div>
      <div id='selectionStatus'>
      {
        selectedPhotoIndex == null ? (
          'No photo selected'
        ) : (
          `Selected ${selectedPhotoIndex}`
        )
      }
      </div>
      <div id='photos'>
      {
        photosList.length > 0 ? (
          photosList.map((photo, index) => (
            <button key={ index }
              id={`photo-${index}`}
              data-index_number={ index }
              onClick={ selectPhotoAtIndex }
              >
              <img src={ photo.url } />
            </button>
          ))
        ) : (
          'No photos'
        )
      }
      </div>
      <div>
        <form id='addPhotoForm' data-extract data-reset onSubmit={ addPhoto }>
          <label>
            {'URL: '}
            <input id='urlField' type='url' name='url' />
          </label>
          <button id='addPhoto' type='submit' children='Add photo' />
        </form>
      </div>
    </div>
  )
}

describe('extractFromDOM', () => {
  let node

  beforeEach(() => {
    node = document.createElement('div')
  })

  afterEach(() => {
    unmountComponentAtNode(node)
  })

  it('Reads form values', (done) => {
    const PhotosListOrganism = makeOrganism(PhotosList, {
      initial: () => ({
        photosList: [],
        selectedPhotoIndex: null
      }),
      addPhoto: (props, { url }) => ({ photosList }) => ({ photosList: photosList.concat({ url }) }),
      selectPhotoAtIndex: (props, { index }) => ({ selectedPhotoIndex: index })
    }, {
      adjustArgs: extractFromDOM
    })
    const $ = (selector) => node.querySelector(selector)
    render(<PhotosListOrganism />, node, async () => {
      expect($('#photos').innerHTML).toContain('No photos')

      $('#urlField').value = 'https://via.placeholder.com/350x150'
      ReactTestUtils.Simulate.change($('#urlField'))

      // Should extract data using named field
      ReactTestUtils.Simulate.submit($('#addPhotoForm'))
      await waitMs(10)
      expect($('#photos').innerHTML).toContain('https://via.placeholder.com/350x150')
      // Should reset fields if data-reset present
      expect($('#urlField').value).toBe('')

      // Should extract data- attributes
      expect($('#selectionStatus').innerHTML).toContain('No photo selected')
      
      ReactTestUtils.Simulate.click($('#photo-0'))
      expect($('#selectionStatus').innerHTML).toContain('Selected 0')

      done()
    })
  })

})


================================================
FILE: tests/index-test.js
================================================
import expect from 'expect'
import React, { Component } from 'react'
import {render, unmountComponentAtNode} from 'react-dom'
import ReactTestUtils from 'react-dom/test-utils'

import makeOrganism from 'src/'

const waitMs = duration => new Promise(resolve => setTimeout(resolve, duration))

const nextFrame = () => new Promise((resolve) => {
  window.requestAnimationFrame(resolve)
})


function Counter({
  count,
  handlers: {
    increment,
    decrement,
    delayedIncrement,
    delayedIncrementGenerator,
    doNothing,
    blowUp,
    blowUp2,
    blowUpDelayed,
    initial,
    load
  }
}) {
  return (
    <div>
      <button id='decrement' onClick={ decrement } children='−' />
      <span>{ count }</span>
      <button id='increment' onClick={ increment } children='+' />
      { delayedIncrement &&
        <button id='delayedIncrement' onClick={ delayedIncrement } children='+' />
      }
      { delayedIncrementGenerator &&
        <button id='delayedIncrementGenerator' onClick={ delayedIncrementGenerator } children='+' />
      }
      { doNothing &&
        <button id='doNothing' onClick={ doNothing } children='Do Nothing' />
      }
      { blowUp &&
        <button id='blowUp' onClick={ blowUp } children='Blow Up' />
      }
      { blowUp2 &&
        <button id='blowUp2' onClick={ blowUp2 } children='Blow Up 2' />
      }
      { blowUpDelayed &&
        <button id='blowUpDelayed' onClick={ blowUpDelayed } children='Blow Up Delayed' />
      }
      <button id='initial' onClick={ initial } children='Reset' />
      { load &&
        <button id='reload' onClick={ load } children='Reload' />
      }
    </div>
  )
}

describe('makeOrganism', () => {
  let node;
  let latestState;
  const $ = (selector) => node.querySelector(selector)
  const promiseRender = (element) => new Promise((resolve) => {
    render(element, node, resolve)  
  })

  beforeEach(() => {
    try {
    node = document.createElement('div')
    }
    catch (error) {
      console.error('ERRORS', error)
      throw error
    }
  })

  afterEach(() => {
    unmountComponentAtNode(node)
  })

  it('Sends click events', async () => {
    let changeCount = 0
    const delayWait = 20

    console.log('before makeOrganism')
    const CounterOrganism = makeOrganism(Counter, {
      initial: ({ initialCount = 0 }) => ({ count: initialCount }),
      increment: () => ({ count }) => ({ count: count + 1 }),
      decrement: () => ({ count }) => ({ count: count - 1 }),
      delayedIncrement: async () => {
        await waitMs(delayWait / 2)
        await waitMs(delayWait / 2)
        return ({ count }) => ({ count: count + 1 })
      },
      delayedIncrementGenerator: function *() {
        yield waitMs(delayWait / 2)
        yield waitMs(delayWait / 2)
        yield ({ count }) => ({ count: count + 1 })
      },
      doNothing: () => {},
      blowUp: () => {
        throw new Error('Whoops')
      },
      blowUp2: () => (prevState) => {
        throw new Error('Whoops 2')
      },
      blowUpDelayed: async () => {
        await waitMs(delayWait)
        throw new Error('Whoops Delayed')
      }
    }, {
      onChange(state) {
        latestState = state
        changeCount++
      }
    })
    console.log('after makeOrganism')

    await promiseRender(<CounterOrganism initialCount={ 2 } />)
    expect(node.innerHTML).toContain('2')
    console.log(node.innerHTML)

    // Click increment
    ReactTestUtils.Simulate.click($('#increment'))
    expect(node.innerHTML).toContain('3')

    // Click decrement
    ReactTestUtils.Simulate.click($('#decrement'))
    expect(node.innerHTML).toContain('2')
    expect(changeCount).toBe(2)

    // Click delayedIncrement
    ReactTestUtils.Simulate.click($('#delayedIncrement'))
    await waitMs(delayWait + 5)
    expect(node.innerHTML).toContain('3')
    expect(changeCount).toBe(3)

    // Click delayedIncrementGenerator
    ReactTestUtils.Simulate.click($('#delayedIncrementGenerator'))
    await waitMs(delayWait / 2)
    await nextFrame()
    await waitMs(delayWait / 2)
    await nextFrame()
    await waitMs(5)
    await nextFrame()
    expect(node.innerHTML).toContain('4')
    expect(changeCount).toBe(4)

    ReactTestUtils.Simulate.click($('#doNothing'))
    expect(node.innerHTML).toContain('4')
    expect(changeCount).toBe(4)

    // Click blowUp
    ReactTestUtils.Simulate.click($('#blowUp'))
    expect(latestState.handlerError).toExist()
    expect(latestState.handlerError.message).toBe('Whoops')

    // Click blowUp2
    ReactTestUtils.Simulate.click($('#blowUp2'))
    expect(latestState.handlerError).toExist()
    expect(latestState.handlerError.message).toBe('Whoops 2')

    // Click blowUpDelayed
    ReactTestUtils.Simulate.click($('#blowUpDelayed'))
    await waitMs(delayWait + 5)
    expect(latestState.handlerError).toExist()
    expect(latestState.handlerError.message).toBe('Whoops Delayed')

    expect(changeCount).toBe(7)
  })

  it('Calls load handler', async () => {
    let changeCount = 0
    let latestState;
    const loadWait = 35

    const CounterOrganism = makeOrganism(Counter, {
      initial: ({ initialCount = 0 }) => ({ count: initialCount }),
      load: async ({ loadedCount }, prevProps) => {
        if (!prevProps || loadedCount !== prevProps.loadedCount) {
          await waitMs(loadWait)
          const count = loadedCount * 2 // Multiply to be sure we are using this loaded value
          if (Number.isNaN(count)) {
            throw new Error('Loaded count is invalid')
          }
          return { count }
        }
      },
      increment: () => ({ count }) => ({ count: count + 1 }),
      decrement: () => ({ count }) => ({ count: count - 1 })
    }, {
      onChange(state) {
        latestState = state
        changeCount++
      }
    })

    await promiseRender(<CounterOrganism initialCount={ 2 } loadedCount={ 7 } />)
    expect(node.innerHTML).toContain('2')

    // Click increment
    ReactTestUtils.Simulate.click($('#increment'))
    expect(node.innerHTML).toContain('3')

    // Click decrement
    ReactTestUtils.Simulate.click($('#decrement'))
    expect(node.innerHTML).toContain('2')

    expect(changeCount).toBe(2)

    await waitMs(loadWait + 5)
    expect(node.innerHTML).toContain(14)
    expect(changeCount).toBe(3)

    await promiseRender(<CounterOrganism initialCount={ 22 } loadedCount={ 7 } />)
    expect(node.innerHTML).toContain(14)
    expect(changeCount).toBe(3)

    await promiseRender(<CounterOrganism initialCount={ 22 } loadedCount={ 9 } />)
    await waitMs(loadWait + 5)
    expect(node.innerHTML).toContain(18)
    expect(changeCount).toBe(4)

    // Click reload
    ReactTestUtils.Simulate.click($('#reload'))
    await waitMs(loadWait + 5)
    expect(node.innerHTML).toContain(18)
    expect(changeCount).toBe(5)

    // Load error
    promiseRender(<CounterOrganism initialCount={ 22 } loadedCount='Not a number' />)
    await waitMs(loadWait + 5)
    expect(latestState.loadError).toExist()
    expect(changeCount).toBe(6)
  })

  it('Supports getState/setState props', async () => {
    let changeCount = 0
    const delayWait = 20

    const CounterOrganism = makeOrganism(Counter, {
      initial: ({ initialCount = 0 }) => ({ count: initialCount }),
      increment: () => ({ count }) => ({ count: count + 1 }),
      decrement: () => ({ count }) => ({ count: count - 1 }),
      delayedIncrement: async () => {
        await waitMs(delayWait / 2)
        await waitMs(delayWait / 2)
        return ({ count }) => ({ count: count + 1 })
      },
      delayedIncrementGenerator: function *() {
        yield waitMs(delayWait / 2)
        yield waitMs(delayWait / 2)
        yield ({ count }) => ({ count: count + 1 })
      },
      doNothing: () => {},
      blowUp: () => {
        throw new Error('Whoops')
      },
      blowUp2: () => (prevState) => {
        throw new Error('Whoops 2')
      },
      blowUpDelayed: async () => {
        await waitMs(delayWait)
        throw new Error('Whoops Delayed')
      }
    }, {
      onChange(state) {
        latestState = state
        changeCount++
      }
    })

    class Wrapper extends Component {
      state = CounterOrganism.initialStateForProps(this.props)

      render() {
        return <CounterOrganism
          getState={ () => this.state }
          setState={ this.setState.bind(this) }
        />
      }
    }

    await promiseRender(<Wrapper initialCount={ 2 } />)
    expect(node.innerHTML).toContain('2')
    console.log(node.innerHTML)

    // Click increment
    ReactTestUtils.Simulate.click($('#increment'))
    expect(node.innerHTML).toContain('3')

    // Click decrement
    ReactTestUtils.Simulate.click($('#decrement'))
    expect(node.innerHTML).toContain('2')
    expect(changeCount).toBe(2)

    // Click delayedIncrement
    ReactTestUtils.Simulate.click($('#delayedIncrement'))
    await waitMs(delayWait + 5)
    expect(node.innerHTML).toContain('3')
    expect(changeCount).toBe(3)
  })

})


================================================
FILE: tests/multi-test.js
================================================
import expect from 'expect'
import React from 'react'
import {render, unmountComponentAtNode} from 'react-dom'
import ReactTestUtils from 'react-dom/test-utils'

import makeMulticelledOrganism from 'src/multi'

const waitMs = duration => new Promise(resolve => setTimeout(resolve, duration))

const nextFrame = () => new Promise((resolve) => {
  window.requestAnimationFrame(resolve)
})

function Counter({
  id,
  count,
  title,
  handlers: {
    increment,
    decrement,
    delayedIncrement,
    delayedIncrementGenerator,
    doNothing,
    blowUp,
    blowUp2,
    blowUpDelayed,
    initial,
    load,
    changeTitle,
    uppercaseTitle,
    makeTitleHeading
  }
}) {
  return (
    <div>
      <h2 id={`${id}-title`}>{ title }</h2>
      <button id={`${id}-decrement`} onClick={ decrement } children='−' />
      <span id={`${id}-currentCount`}>{ id }: { count }</span>
      <button id={`${id}-increment`} onClick={ increment } children='+' />
      { delayedIncrement &&
        <button id={`${id}-delayedIncrement`} onClick={ delayedIncrement } children='+' />
      }
      { delayedIncrementGenerator &&
        <button id={`${id}-delayedIncrementGenerator`} onClick={ delayedIncrementGenerator } children='+' />
      }
      { doNothing &&
        <button id={`${id}-doNothing`} onClick={ doNothing } children='Do Nothing' />
      }
      { blowUp &&
        <button id={`${id}-blowUp`} onClick={ blowUp } children='Blow Up' />
      }
      { blowUp2 &&
        <button id={`${id}-blowUp2`} onClick={ blowUp2 } children='Blow Up 2' />
      }
      { blowUpDelayed &&
        <button id={`${id}-blowUpDelayed`} onClick={ blowUpDelayed } children='Blow Up Delayed' />
      }
      <button id={`${id}-initial`} onClick={ initial } children='Reset' />
      { load &&
        <button id='reload' onClick={ load } children='Reload' />
      }

      <input id={`${id}-changeTitle`} onChange={ changeTitle } />
      <button id={`${id}-uppercaseTitle`} onClick={ uppercaseTitle } children='uppercaseTitle' />
      <button id={`${id}-makeTitleHeading`} onClick={ makeTitleHeading } children='makeTitleHeading' />
    </div>
  )
}

const counterModel = {
  initial: ({ initialCount = 0 }) => ({ count: initialCount }),
  increment: () => ({ count }) => ({ count: count + 1 }),
  decrement: () => ({ count }) => ({ count: count - 1 }),
  delayedIncrement: async () => {
    await waitMs(delayWait)
    return ({ count }) => ({ count: count + 1 })
  },
  delayedIncrementGenerator: function *() {
    yield waitMs(delayWait / 2)
    yield waitMs(delayWait / 2)
    yield ({ count }) => ({ count: count + 1 })
  },
  doNothing: () => {},
  blowUp: () => {
    throw new Error('Whoops')
  },
  blowUp2: () => (prevState) => {
    throw new Error('Whoops 2')
  },
  blowUpDelayed: async () => {
    await waitMs(delayWait)
    throw new Error('Whoops Delayed')
  }
}

const loadWait = 35
const delayWait = 20
const counterLoadModel = {
  initial: ({ initialCount = 0 }) => ({
    count: initialCount,
    title: 'Counter'
  }),
  load: async ({ loadedCount }, prevProps) => {
    if (!prevProps || loadedCount !== prevProps.loadedCount) {
      await waitMs(loadWait)
      const count = loadedCount * 2 // Multiply to be sure we are using this loaded value
      if (Number.isNaN(count)) {
        throw new Error('Loaded count is invalid')
      }
      return { count }
    }
  },
  increment: () => ({ count }) => ({ count: count + 1 }),
  decrement: () => ({ count }) => ({ count: count - 1 }),
  changeTitle: (props, { value }) => ({ title: value }),
  uppercaseTitle: () => ({ title }) => ({ title: title.toUpperCase() }),
  makeTitleHeading: () => ({ title: 'Heading' })
}

describe('makeMulticelledOrganism', () => {
  let node;
  const $ = (selector) => node.querySelector(selector)
  let promiseRender;

  beforeEach(() => {
    node = document.createElement('div')
    promiseRender = (element) => new Promise((resolve) => {
      render(element, node, resolve)
    })
  })

  afterEach(() => {
    unmountComponentAtNode(node)
  })

  it('Sends click events', async () => {
    let changeCount = 0
    let latestState;

    const Organism = makeMulticelledOrganism(({
      cells: {
        counterA,
        counterB
      }
    }) => (
      <div>
        <Counter id='a' { ...counterA } />
        <Counter id='b' { ...counterB } />
      </div>
    ), {
      counterA: counterModel,
      counterB: counterModel
    }, {
      onChange(state) {
        latestState = state
        changeCount++
      }
    })

    await promiseRender(<Organism initialCount={ 2 } />)
    const $aCurrentCount = $('#a-currentCount')
    const $bCurrentCount = $('#b-currentCount')
    expect($aCurrentCount.textContent).toBe('a: 2')
    expect($bCurrentCount.textContent).toBe('b: 2')

    // Click a increment
    ReactTestUtils.Simulate.click($('#a-increment'))
    expect($aCurrentCount.textContent).toBe('a: 3')
    expect($bCurrentCount.textContent).toBe('b: 2')

    // Click a decrement
    ReactTestUtils.Simulate.click($('#a-decrement'))
    expect($aCurrentCount.textContent).toBe('a: 2')
    expect($bCurrentCount.textContent).toBe('b: 2')

    // Click b decrement
    ReactTestUtils.Simulate.click($('#b-decrement'))
    expect($aCurrentCount.textContent).toBe('a: 2')
    expect($bCurrentCount.textContent).toBe('b: 1')
    expect(changeCount).toBe(3)

    // Click delayedIncrement
    ReactTestUtils.Simulate.click($('#a-delayedIncrement'))
    await waitMs(delayWait + 5)
    expect($aCurrentCount.textContent).toBe('a: 3')
    expect($bCurrentCount.textContent).toBe('b: 1')
    expect(changeCount).toBe(4)

    // Click delayedIncrementGenerator
    ReactTestUtils.Simulate.click($('#a-delayedIncrementGenerator'))
    await waitMs(delayWait / 2)
    await nextFrame()
    await waitMs(delayWait / 2)
    await nextFrame()
    await waitMs(5)
    expect($aCurrentCount.textContent).toBe('a: 4')
    expect($bCurrentCount.textContent).toBe('b: 1')
    expect(changeCount).toBe(5)

    ReactTestUtils.Simulate.click($('#b-doNothing'))
    expect($aCurrentCount.textContent).toBe('a: 4')
    expect($bCurrentCount.textContent).toBe('b: 1')
    expect(changeCount).toBe(5)

    // Click blowUp
    ReactTestUtils.Simulate.click($('#a-blowUp'))
    expect(latestState.handlerError).toExist()
    expect(latestState.handlerError.message).toBe('Whoops')

    // Click blowUp2
    ReactTestUtils.Simulate.click($('#b-blowUp2'))
    expect(latestState.handlerError).toExist()
    expect(latestState.handlerError.message).toBe('Whoops 2')

    // Click blowUpDelayed
    ReactTestUtils.Simulate.click($('#a-blowUpDelayed'))
    await waitMs(delayWait + 5)
    expect(latestState.handlerError).toExist()
    expect(latestState.handlerError.message).toBe('Whoops Delayed')
  })

  it('Calls load handler', async () => {
    let changeCount = 0
    let latestState;
    const loadWait = 35

    const Organism = makeMulticelledOrganism(({
      cells: {
        counterA,
        counterB
      }
    }) => (
      <div>
        <Counter id='a' { ...counterA } />
        <Counter id='b' { ...counterB } />
      </div>
    ), {
      counterA: counterLoadModel,
      counterB: counterLoadModel
    }, {
      onChange(state) {
        latestState = state
        changeCount++
      }
    })

    await promiseRender(<Organism initialCount={ 2 } loadedCount={ 7 } />)
    const $aCurrentCount = $('#a-currentCount')
    const $aTitle = $('#a-title')

    expect($aCurrentCount.textContent).toContain('2')

    // Click increment
    ReactTestUtils.Simulate.click($('#a-increment'))
    expect($aCurrentCount.textContent).toContain('3')

    // Click decrement
    ReactTestUtils.Simulate.click($('#a-decrement'))
    expect($aCurrentCount.textContent).toContain('2')
    expect(changeCount).toBe(2)

    await waitMs(loadWait + 5)
    // Loaded
    expect($aCurrentCount.textContent).toContain('14')
    expect(changeCount).toBe(4) // Both cells loaded, so change count increases by 2

    await promiseRender(<Organism initialCount={ 22 } loadedCount={ 7 } />)
    // Takes some time to load, so shouldn’t have changed yet
    expect($aCurrentCount.textContent).toContain('14')
    expect(changeCount).toBe(4)

    await promiseRender(<Organism initialCount={ 22 } loadedCount={ 9 } />)
    await waitMs(loadWait + 5)
    // Loaded from new props
    expect($aCurrentCount.textContent).toContain('18')
    expect(changeCount).toBe(6)

    expect($aTitle.textContent).toBe('Counter')

    ReactTestUtils.Simulate.click($('#a-uppercaseTitle'))
    expect($aTitle.textContent).toBe('COUNTER')
    expect(changeCount).toBe(7)

    ReactTestUtils.Simulate.click($('#a-makeTitleHeading'))
    expect($aTitle.textContent).toBe('Heading')
    expect(changeCount).toBe(8)

    // Click reload
    ReactTestUtils.Simulate.click($('#reload'))
    await waitMs(loadWait + 5)
    expect($aCurrentCount.textContent).toContain('18')
    expect(changeCount).toBe(9)

    // Load error
    await promiseRender(<Organism initialCount={ 22 } loadedCount='Not a number' />)
    await waitMs(loadWait + 5)
    expect(latestState.loadError).toExist()
    expect(changeCount).toBe(11)
  })

  it('getInitialProps()', async () => {
    let changeCount = 0
    let latestState;
    const loadWait = 35

    const Organism = makeMulticelledOrganism(({
      cells: {
        counterA,
        counterB
      }
    }) => (
      <div>
        <Counter id='a' { ...counterA } />
        <Counter id='b' { ...counterB } />
      </div>
    ), {
      counterA: counterLoadModel,
      counterB: counterLoadModel
    }, {
      onChange(state) {
        latestState = state
        changeCount++
      }
    })

    const element = <Organism initialCount={ 2 } loadedCount={ 7 } />
    const instance = new Organism(element.props)

    const initialProps = await instance.getInitialProps(element.props)
    expect(initialProps).toEqual({
      counterA: { count: 14 },
      counterB: { count: 14 }
    })
  })

})


================================================
FILE: umd/react-organism.js
================================================
/*!
 * react-organism v0.3.6
 * MIT Licensed
 */
(function webpackUniversalModuleDefinition(root, factory) {
	if(typeof exports === 'object' && typeof module === 'object')
		module.exports = factory(require("react"));
	else if(typeof define === 'function' && define.amd)
		define(["react"], factory);
	else if(typeof exports === 'object')
		exports["makeOrganism"] = factory(require("react"));
	else
		root["makeOrganism"] = factory(root["React"]);
})(this, function(__WEBPACK_EXTERNAL_MODULE_2__) {
return /******/ (function(modules) { // webpackBootstrap
/******/ 	// The module cache
/******/ 	var installedModules = {};
/******/
/******/ 	// The require function
/******/ 	function __webpack_require__(moduleId) {
/******/
/******/ 		// Check if module is in cache
/******/ 		if(installedModules[moduleId]) {
/******/ 			return installedModules[moduleId].exports;
/******/ 		}
/******/ 		// Create a new module (and put it into the cache)
/******/ 		var module = installedModules[moduleId] = {
/******/ 			i: moduleId,
/******/ 			l: false,
/******/ 			exports: {}
/******/ 		};
/******/
/******/ 		// Execute the module function
/******/ 		modules[moduleId].call(module.exports, module, module.exports, __webpack_require__);
/******/
/******/ 		// Flag the module as loaded
/******/ 		module.l = true;
/******/
/******/ 		// Return the exports of the module
/******/ 		return module.exports;
/******/ 	}
/******/
/******/
/******/ 	// expose the modules object (__webpack_modules__)
/******/ 	__webpack_require__.m = modules;
/******/
/******/ 	// expose the module cache
/******/ 	__webpack_require__.c = installedModules;
/******/
/******/ 	// define getter function for harmony exports
/******/ 	__webpack_require__.d = function(exports, name, getter) {
/******/ 		if(!__webpack_require__.o(exports, name)) {
/******/ 			Object.defineProperty(exports, name, {
/******/ 				configurable: false,
/******/ 				enumerable: true,
/******/ 				get: getter
/******/ 			});
/******/ 		}
/******/ 	};
/******/
/******/ 	// getDefaultExport function for compatibility with non-harmony modules
/******/ 	__webpack_require__.n = function(module) {
/******/ 		var getter = module && module.__esModule ?
/******/ 			function getDefault() { return module['default']; } :
/******/ 			function getModuleExports() { return module; };
/******/ 		__webpack_require__.d(getter, 'a', getter);
/******/ 		return getter;
/******/ 	};
/******/
/******/ 	// Object.prototype.hasOwnProperty.call
/******/ 	__webpack_require__.o = function(object, property) { return Object.prototype.hasOwnProperty.call(object, property); };
/******/
/******/ 	// __webpack_public_path__
/******/ 	__webpack_require__.p = "";
/******/
/******/ 	// Load entry module and return exports
/******/ 	return __webpack_require__(__webpack_require__.s = 0);
/******/ })
/************************************************************************/
/******/ ([
/* 0 */
/***/ (function(module, exports, __webpack_require__) {

module.exports = __webpack_require__(1);


/***/ }),
/* 1 */
/***/ (function(module, __webpack_exports__, __webpack_require__) {

"use strict";
Object.defineProperty(__webpack_exports__, "__esModule", { value: true });
/* harmony import */ var __WEBPACK_IMPORTED_MODULE_0_react__ = __webpack_require__(2);
/* harmony import */ var __WEBPACK_IMPORTED_MODULE_0_react___default = __webpack_require__.n(__WEBPACK_IMPORTED_MODULE_0_react__);
/* harmony import */ var __WEBPACK_IMPORTED_MODULE_1_awareness__ = __webpack_require__(3);
var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };

var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();

function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }

function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }

function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }




// Returns a new stateful component, given the specified state handlers and a pure component to render with
/* harmony default export */ __webpack_exports__["default"] = (function (Pure, handlersIn) {
  var _ref = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {},
      onChange = _ref.onChange,
      adjustArgs = _ref.adjustArgs;

  return function (_PureComponent) {
    _inherits(Organism, _PureComponent);

    function Organism() {
      var _temp, _this, _ret;

      _classCallCheck(this, Organism);

      for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) {
        args[_key] = arguments[_key];
      }

      return _ret = (_temp = (_this = _possibleConstructorReturn(this, _PureComponent.call.apply(_PureComponent, [this].concat(args))), _this), _this.alterState = function (stateChanger) {
        // Can either be a plain object or a callback to transform the existing state
        (_this.props.setState || _this.setState).call(_this, stateChanger,
        // Call onChange once updated with current version of state
        onChange ? function () {
          onChange(_this.currentState);
        } : undefined);
      }, _this.awareness = Object(__WEBPACK_IMPORTED_MODULE_1_awareness__["a" /* default */])(_this.alterState, handlersIn, {
        getProps: function getProps() {
          return _this.props;
        },
        adjustArgs: adjustArgs
      }), _this.state = _this.awareness.state, _temp), _possibleConstructorReturn(_this, _ret);
    }

    Organism.initialStateForProps = function initialStateForProps(props) {
      return handlersIn.initial(props);
    };

    Organism.prototype.componentDidMount = function componentDidMount() {
      this.awareness.loadAsync(this.props, null, this.currentState);
    };

    Organism.prototype.componentWillReceiveProps = function componentWillReceiveProps(nextProps) {
      this.awareness.loadAsync(nextProps, this.props, this.currentState);
    };

    Organism.prototype.render = function render() {
      // Render the pure component, passing both props and state, plus handlers bundled together
      return __WEBPACK_IMPORTED_MODULE_0_react___default.a.createElement(Pure, _extends({}, this.props, this.currentState, { handlers: this.awareness.handlers }));
    };

    _createClass(Organism, [{
      key: 'currentState',
      get: function get() {
        return this.props.getState ? this.props.getState() : this.state;
      }
    }]);

    return Organism;
  }(__WEBPACK_IMPORTED_MODULE_0_react__["PureComponent"]);
});

/***/ }),
/* 2 */
/***/ (function(module, exports) {

module.exports = __WEBPACK_EXTERNAL_MODULE_2__;

/***/ }),
/* 3 */
/***/ (function(module, __webpack_exports__, __webpack_require__) {

"use strict";
/* unused harmony export callHandler */
var _typeof = typeof Symbol === "function" && typeof Symbol.iterator === "symbol" ? function (obj) { return typeof obj; } : function (obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; };

var nextFrame = function nextFrame() {
  return new Promise(function (resolve) {
    window.requestAnimationFrame(resolve);
  });
};

function stateChangerCatchingError(stateChanger, transformError) {
  return function (prevState, props) {
    // Check if stateChanger is a function
    if ((typeof stateChanger === 'undefined' ? 'undefined' : _typeof(stateChanger)) === _typeof(stateChanger.call)) {
      try {
        // Call state changer
        return stateChanger(prevState, props);
      }
      // State changer may throw
      catch (error) {
        // Store error in state
        return transformError(error);
      }
    }
    // Else just an object with changes
    else {
        return stateChanger;
      }
  };
}

function processStateChanger(changeState, stateChanger, storeError) {
  if (!stateChanger) {
    return;
  }

  // Check if thenable (i.e. a Promise)
  if (_typeof(stateChanger.then) === _typeof(Object.assign)) {
    return stateChanger.then(function (stateChanger) {
      return stateChanger && changeState(stateChanger);
    }).catch(storeError);
  }
  // Check if iterator
  else if (_typeof(stateChanger.next) === _typeof(Object.assign)) {
      return processIterator(changeState, stateChanger, storeError);
    }
    // Otherwise, change state immediately
    // Required for things like <textarea> onChange to keep cursor in correct position
    else {
        changeState(stateChanger);
      }
}

function processIterator(changeState, iterator, storeError, previousValue) {
  return Promise.resolve(processStateChanger(changeState, previousValue, storeError)) // Process the previous changer
  .then(function () {
    return nextFrame();
  }) // Wait for next frame
  .then(function () {
    var result = iterator.next(); // Get the next step from the iterator
    if (result.done) {
      // No more iterations remaining
      return processStateChanger(changeState, result.value, storeError); // Process the changer
    } else {
      return processIterator(changeState, iterator, storeError, result.value); // Process the iterator’s following steps
    }
  });
}

function callHandler(handler, transformError, args, alterState) {
  if ((typeof transformError === 'undefined' ? 'undefined' : _typeof(transformError)) === _typeof('')) {
    var errorKey = transformError;
    transformError = function transformError(error) {
      var _ref;

      return _ref = {}, _ref[errorKey] = error, _ref;
    };
  }

  var storeError = function storeError(error) {
    alterState(function () {
      return transformError(error);
    });
  };
  // Call handler function, props first, then rest of args
  try {
    var changeState = function changeState(stateChanger) {
      alterState(stateChangerCatchingError(stateChanger, transformError));
    };
    var result = handler.apply(null, args);
    // Can return multiple state changers, ensure array, and then loop through
    [].concat(result).forEach(function (stateChanger) {
      processStateChanger(changeState, stateChanger, storeError);
    });
  }
  // Catch error within handler’s (first) function
  catch (error) {
    storeError(error);
  }
}

var defaultTransformErrorForKey = function defaultTransformErrorForKey(key) {
  return function (error) {
    var _ref2;

    var stateKey = (key === 'load' ? 'load' : 'handler') + 'Error';
    return _ref2 = {}, _ref2[stateKey] = error, _ref2;
  };
};

// Returns a new stateful component, given the specified state handlers and a pure component to render with
/* harmony default export */ __webpack_exports__["a"] = (function (alterState, handlersIn) {
  var _ref3 = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {},
      _ref3$getProps = _ref3.getProps,
      getProps = _ref3$getProps === undefined ? function () {
    return {};
  } : _ref3$getProps,
      _ref3$transformErrorF = _ref3.transformErrorForKey,
      transformErrorForKey = _ref3$transformErrorF === undefined ? defaultTransformErrorForKey : _ref3$transformErrorF,
      adjustArgs = _ref3.adjustArgs;

  var state = Object.assign({
    loadError: null,
    handlerError: null
  }, handlersIn.initial(getProps()));

  // Uses `load` handler, if present, to asynchronously load initial state
  function loadAsync() {
    if (handlersIn.load) {
      for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) {
        args[_key] = arguments[_key];
      }

      callHandler(handlersIn.load, transformErrorForKey('load'), args, alterState);
    }
  }

  var handlers = Object.keys(handlersIn).reduce(function (out, key) {
    // Special case for `load` handler to reload fresh
    if (key === 'load') {
      out.load = function () {
        loadAsync(getProps(), null);
      };
      return out;
    }

    out[key] = function () {
      for (var _len2 = arguments.length, args = Array(_len2), _key2 = 0; _key2 < _len2; _key2++) {
        args[_key2] = arguments[_key2];
      }

      if (adjustArgs) {
        args = adjustArgs(args);
      }

      callHandler(handlersIn[key], transformErrorForKey(key), [Object.assign({}, getProps(), { handlers: handlers })].concat(args), alterState);
    };
    return out;
  }, {});

  return {
    state: state,
    loadAsync: loadAsync,
    handlers: handlers
  };
});

/***/ })
/******/ ]);
});