├── .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
    │   └── yarn.lock
├── 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
    ├── react-organism.min.js
    └── react-organism.min.js.map
└── yarn.lock


/.gitignore:
--------------------------------------------------------------------------------
1 | /coverage
2 | /demo/dist
3 | /es
4 | /lib
5 | /node_modules
6 | npm-debug.log*
7 | 


--------------------------------------------------------------------------------
/.travis.yml:
--------------------------------------------------------------------------------
 1 | sudo: false
 2 | 
 3 | language: node_js
 4 | node_js:
 5 |   - 4
 6 |   - 6
 7 |   - 7
 8 |   - 8
 9 | 
10 | before_install:
11 |   - npm install codecov.io coveralls
12 | 
13 | after_success:
14 |   - cat ./coverage/lcov.info | ./node_modules/codecov.io/bin/codecov.io.js
15 |   - cat ./coverage/lcov.info | ./node_modules/coveralls/bin/coveralls.js
16 | 
17 | branches:
18 |   only:
19 |     - master
20 | 


--------------------------------------------------------------------------------
/CONTRIBUTING.md:
--------------------------------------------------------------------------------
 1 | ## Prerequisites
 2 | 
 3 | [Node.js](http://nodejs.org/) >= v4 must be installed.
 4 | 
 5 | ## Installation
 6 | 
 7 | - Running `npm install` in the components's root directory will install everything you need for development.
 8 | 
 9 | ## Demo Development Server
10 | 
11 | - `npm start` will run a development server with the component's demo app at [http://localhost:3000](http://localhost:3000) with hot module reloading.
12 | 
13 | ## Running Tests
14 | 
15 | - `npm test` will run the tests once.
16 | 
17 | - `npm run test:coverage` will run the tests and produce a coverage report in `coverage/`.
18 | 
19 | - `npm run test:watch` will run the tests on every change.
20 | 
21 | ## Building
22 | 
23 | - `npm run build` will build the component for publishing to npm and also bundle the demo app.
24 | 
25 | - `npm run clean` will delete built resources.
26 | 


--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
 1 | MIT License
 2 | 
 3 | Copyright (c) 2017 Patrick Smith
 4 | 
 5 | Permission is hereby granted, free of charge, to any person obtaining a copy
 6 | of this software and associated documentation files (the "Software"), to deal
 7 | in the Software without restriction, including without limitation the rights
 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 | 
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 | 
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
  1 | # React Organism
  2 | 
  3 | [![Travis][build-badge]][build]
  4 | [![npm package][npm-badge]][npm]
  5 | [![Coveralls][coveralls-badge]][coveralls]
  6 | 
  7 | **Dead simple React/Preact state management to bring pure components alive**
  8 | 
  9 | - Supports `async`/`await` and easy loading (e.g. `fetch()`)
 10 | - Reload when particular props change
 11 | - Animate using generator functions: just `yield` the new state for each frame
 12 | - Tiny: 1.69 KB gzipped (3.49 KB uncompressed)
 13 | - Embraces the existing functional `setState` while avoiding boilerplate (no writing `this.setState()` or `.bind` again)
 14 | - Easy to unit test
 15 | 
 16 | #### Table of contents
 17 | 
 18 | - [Installation](#installation)
 19 | - [Demos](#demos)
 20 | - [Usage](#usage)
 21 |   - [Basic](#basic)
 22 |   - [Using props](#using-props)
 23 |   - [Async & promises](#async)
 24 |   - [Handling events](#handling-events)
 25 |   - [Animation](#animation)
 26 |   - [Serialization: Local storage](#serialization-local-storage)
 27 |   - [Separate and reuse state handlers](#separate-and-reuse-state-handlers)
 28 |   - [Multicelled organisms](#multicelled-organisms)
 29 | - [API](#api)
 30 |   - [`makeOrganism(PureComponent, StateFunctions, options)`](#makeorganismpurecomponent-statefunctions-options)
 31 |   - [State functions](#state-functions)
 32 |   - [Argument enhancers](#argument-enhancers)
 33 | - [Why instead of Redux?](#why-instead-of-redux)
 34 | 
 35 | ## Installation
 36 | 
 37 | ```
 38 | npm i react-organism --save
 39 | ```
 40 | 
 41 | ## Demos
 42 | 
 43 | - [Animated counter](https://codesandbox.io/s/2vx12v3qmn)
 44 | - [Dynamic loading with `import()`](https://codesandbox.io/s/X6mLEwG7W)
 45 | - [Live form error validation with Yup](https://codesandbox.io/s/4xQpKRRWx)
 46 | - [Multicelled component — using multiple states](https://codesandbox.io/s/Yv7j1xLqM)
 47 | - [Todo List](https://codesandbox.io/s/yME5Y3Yz)
 48 | - [Inputs, forms, animation, fetch](https://react-organism.now.sh) · [code](https://github.com/BurntCaramel/react-organism/tree/master/demo/src)
 49 | - [User Stories Maker](https://codesandbox.io/s/xkZ5ZONl)
 50 | - [React Cheat Sheet](https://react-cheat.now.sh/) · [code](https://github.com/BurntCaramel/react-cheat)
 51 | 
 52 | ## Usage
 53 | 
 54 | ### Basic
 55 | 
 56 | ```js
 57 | // organisms/Counter.js
 58 | import makeOrganism from 'react-organism'
 59 | import Counter from './components/Counter'
 60 | 
 61 | export default makeOrganism(Counter, {
 62 |   initial: () => ({ count: 0 }),
 63 |   increment: () => ({ count }) => ({ count: count + 1 }),
 64 |   decrement: () => ({ count }) => ({ count: count - 1 })
 65 | })
 66 | ```
 67 | 
 68 | ```js
 69 | // components/Counter.js
 70 | import React, { Component } from 'react'
 71 | 
 72 | export default function Counter({
 73 |   count,
 74 |   handlers: {
 75 |     increment,
 76 |     decrement
 77 |   }
 78 | }) {
 79 |   return (
 80 |     <div>
 81 |       <button onClick={ decrement } children='−' />
 82 |       <span>{ count }</span>
 83 |       <button onClick={ increment } children='+' />
 84 |     </div>
 85 |   )
 86 | }
 87 | ```
 88 | 
 89 | ### Using props
 90 | 
 91 | The handlers can easily use props, which are always passed as the first argument
 92 | 
 93 | ```js
 94 | // organisms/Counter.js
 95 | import makeOrganism from 'react-organism'
 96 | import Counter from './components/Counter'
 97 | 
 98 | export default makeOrganism(Counter, {
 99 |   initial: ({ initialCount = 0 }) => ({ count: initialCount }),
100 |   increment: ({ stride = 1 }) => ({ count }) => ({ count: count + stride }),
101 |   decrement: ({ stride = 1 }) => ({ count }) => ({ count: count - stride })
102 | })
103 | 
104 | // Render passing prop: <CounterOrganism stride={ 20 } />
105 | ```
106 | 
107 | ### Async
108 | 
109 | Asynchronous code to load from an API is easy:
110 | 
111 | ```js
112 | // components/Items.js
113 | import React, { Component } from 'react'
114 | 
115 | export default function Items({
116 |   items,
117 |   collectionName,
118 |   handlers: {
119 |     load
120 |   }
121 | }) {
122 |   return (
123 |     <div>
124 |       {
125 |         !!items ? (
126 |           `${items.length} ${collectionName}`
127 |         ) : (
128 |           'Loading…'
129 |         )
130 |       }
131 |       <div>
132 |         <button onClick={ load } children='Reload' />
133 |       </div>
134 |     </div>
135 |   )
136 | }
137 | ```
138 | 
139 | ```js
140 | // organisms/Items.js
141 | import makeOrganism from 'react-organism'
142 | import Items from '../components/Items'
143 | 
144 | const baseURL = 'https://jsonplaceholder.typicode.com'
145 | const fetchAPI = (path) => fetch(baseURL + path).then(r => r.json())
146 | 
147 | export default makeOrganism(Items, {
148 |   initial: () => ({ items: null }),
149 | 
150 |   load: async ({ path }, prevProps) => {
151 |     if (!prevProps || path !== prevProps.path) {
152 |       return { items: await fetchAPI(path) }
153 |     }
154 |   }
155 | })
156 | ```
157 | 
158 | ```js
159 | <div>
160 |   <ItemsOrganism path='/photos' collectionName='photos' />
161 |   <ItemsOrganism path='/todos' collectionName='todo items' />
162 | </div>
163 | ```
164 | 
165 | ### Handling events
166 | 
167 | Handlers can easily accept arguments such as events.
168 | 
169 | ```js
170 | // components/Calculator.js
171 | import React, { Component } from 'react'
172 | 
173 | export default function Calculator({
174 |   value,
175 |   handlers: {
176 |     changeValue,
177 |     double,
178 |     add3,
179 |     initial
180 |   }
181 | }) {
182 |   return (
183 |     <div>
184 |       <input value={ value } onChange={ changeValue } />
185 |       <button onClick={ double } children='Double' />
186 |       <button onClick={ add3 } children='Add 3' />
187 |       <button onClick={ initial } children='reset' />
188 |     </div>
189 |   )
190 | }
191 | ```
192 | 
193 | ```js
194 | // organisms/Calculator.js
195 | import makeOrganism from 'react-organism'
196 | import Calculator from '../components/Calculator'
197 | 
198 | export default makeOrganism(Calculator, {
199 |   initial: ({ initialValue = 0 }) => ({ value: initialValue }),
200 |   // Destructure event to get target
201 |   changeValue: (props, { target }) => ({ value }) => ({ value: parseInt(target.value, 10) }),
202 |   double: () => ({ value }) => ({ value: value * 2 }),
203 |   add3: () => ({ value }) => ({ value: value + 3 })
204 | })
205 | ```
206 | 
207 | ### Animation
208 | 
209 | ```js
210 | import makeOrganism from 'react-organism'
211 | import Counter from '../components/Counter'
212 | 
213 | export default makeOrganism(Counter, {
214 |   initial: ({ initialCount = 0 }) => ({ count: initialCount }),
215 |   increment: function * ({ stride = 20 }) {
216 |     while (stride > 0) {
217 |       yield ({ count }) => ({ count: count + 1 })
218 |       stride -= 1
219 |     }
220 |   },
221 |   decrement: function * ({ stride = 20 }) {
222 |     while (stride > 0) {
223 |       yield ({ count }) => ({ count: count - 1 })
224 |       stride -= 1
225 |     }
226 |   }
227 | })
228 | ```
229 | 
230 | ### Automatically extract from `data-` attributes and `<forms>`
231 | 
232 | Example coming soon
233 | 
234 | ### Serialization: Local storage
235 | 
236 | ```js
237 | // organisms/Counter.js
238 | import makeOrganism from 'react-organism'
239 | import Counter from '../components/Counter'
240 | 
241 | const localStorageKey = 'counter'
242 | 
243 | export default makeOrganism(Counter, {
244 |   initial: ({ initialCount = 0 }) => ({ count: initialCount }),
245 |   load: async (props, prevProps) => {
246 |     if (!prevProps) {
247 |       // Try commenting out:
248 |       /* throw (new Error('Oops!')) */
249 | 
250 |       // Load previously stored state, if present
251 |       return await JSON.parse(localStorage.getItem(localStorageKey))
252 |     }
253 |   },
254 |   increment: ({ stride = 1 }) => ({ count }) => ({ count: count + stride }),
255 |   decrement: ({ stride = 1 }) => ({ count }) => ({ count: count - stride })
256 | }, {
257 |   onChange(state) {
258 |     // When state changes, save in local storage
259 |     localStorage.setItem(localStorageKey, JSON.stringify(state))
260 |   }
261 | })
262 | ```
263 | 
264 | ### Separate and reuse state handlers
265 | 
266 | React Organism supports separating state handlers and the component into their own files. This means state handlers could be reused by multiple smart components.
267 | 
268 | Here’s an example of separating state:
269 | 
270 | ```js
271 | // state/counter.js
272 | export const initial = () => ({
273 |   count: 0
274 | })
275 | 
276 | export const increment = () => ({ count }) => ({ count: count + 1 })
277 | export const decrement = () => ({ count }) => ({ count: count - 1 })
278 | ```
279 | 
280 | ```js
281 | // organisms/Counter.js
282 | import makeOrganism from 'react-organism'
283 | import Counter from './components/Counter'
284 | import * as counterState from './state/counter'
285 | 
286 | export default makeOrganism(Counter, counterState)
287 | ```
288 | 
289 | ```js
290 | // App.js
291 | import React from 'react'
292 | import CounterOrganism from './organisms/Counter'
293 | 
294 | class App extends React.Component {
295 |   render() {
296 |     return (
297 |       <div>
298 |         <CounterOrganism />
299 |       </div>
300 |     )
301 |   }
302 | }
303 | ```
304 | 
305 | ### Multicelled Organisms
306 | 
307 | Example coming soon.
308 | 
309 | 
310 | ## API
311 | 
312 | ### `makeOrganism(PureComponent, StateFunctions, options?)`
313 | ```js
314 | import makeOrganism from 'react-organism'
315 | ```
316 | Creates a smart component, rendering using React component `PureComponent`, and managing state using `StateFunctions`.
317 | 
318 | #### `PureComponent`
319 | A React component, usually a pure functional component. This component is passed as its props:
320 | 
321 | - The props passed to the smart component, combined with
322 | - The current state, combined with
323 | - `handlers` which correspond to each function in `StateFunctions` and are ready to be passed to e.g. `onClick`, `onChange`, etc.
324 | - `loadError?`: Error produced by the `load` handler
325 | - `handlerError?`: Error produced by any other handler
326 | 
327 | #### `StateFunctions`
328 | Object with functional handlers. See [state functions below](#state-functions).
329 | 
330 | 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 '...'`.
331 | 
332 | #### `options`
333 | 
334 | ##### `adjustArgs?(args: array) => newArgs: array`
335 | 
336 | Used to enhance handlers. See [built-in handlers below](#argument-enhancers).
337 | 
338 | ##### `onChange?(state)`
339 | 
340 | Called after the state has changed, making it ideal for saving the state somewhere (e.g. Local Storage).
341 | 
342 | 
343 | ### State functions
344 | 
345 | 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.
346 | 
347 | Each handler is passed the current props first, followed by the called arguments:
348 | - `(props, event)`: most event handlers, e.g. `onClick`, `onChange`
349 | - `(props, first, second)`: e.g. `handler(first, second)`
350 | - `(props, ...args)`: get all arguments passed
351 | - `(props)`: ignore any arguments
352 | - `()`: ignore props and arguments
353 | 
354 | Handlers must return one of the following:
355 | - An object with new state changes, a la React’s `setState(changes)`.
356 | - A function accepting the previous state and current props, and returns the new state, a la React’s `setState((prevState, props) => changes)`.
357 | - 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.
358 | - 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).
359 | - An array of any of the above (object / function / promise / iterator).
360 | - Or optionally, nothing.
361 | 
362 | There are some handlers for special tasks, specifically:
363 | 
364 | #### `initial(props) => object` (required)
365 | Return initial state to start off with, a la React’s `initialState`. Passed props.
366 | 
367 | #### `load(props: object, prevProps: object?, { handlers: object }) => object | Promise<object> | void` (optional)
368 | 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.
369 | 
370 | If this is the first time loaded or if being reloaded, then `prevProps` is `null`.
371 | 
372 | Usual pattern is to check for either `prevProps` being `null` or if the prop of interest has changed from its previous value:
373 | ```js
374 | export const load = async ({ id }, prevProps) => {
375 |   if (!prevProps || id !== prevProps.id) {
376 |     return { item: await loadItem(id) }
377 |   }
378 | }
379 | ```
380 | 
381 | Your `load` handler will be called in React’s lifecycle: `componentDidMount` and `componentWillReceiveProps`.
382 | 
383 | 
384 | ### Argument enhancers
385 | 
386 | Handler arguments can be adjusted, to cover many common cases. Pass them to the `adjustArgs` option. The following enhancers are built-in:
387 | 
388 | #### `extractFromDOM(args: array) => newArgs: array`
389 | ```js
390 | import extractFromDOM from 'react-organism/lib/adjustArgs/extractFromDOM'
391 | ```
392 | 
393 | Extract values from DOM, specifically:
394 | - 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.
395 | - 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.
396 | 
397 | 
398 | ## Why instead of Redux?
399 | 
400 | - Like Redux, separate your state management from rendering
401 | - Unlike Redux, avoid loose strings for identifying actions
402 | - Redux encourages having state in one bundle, whereas dynamic `import()` encourages breaking apps into sections
403 | - Easier to reuse functionality, as action handlers are totally encapsulated
404 | - No ability to reach across to the other side of your state tree
405 | - Encourages composition of components
406 | - Supports `async` and `await` in any action
407 | - Supports generator functions to allow multiple state changes — great for animation
408 | - No `switch` statements
409 | - No boilerplate or additional helper libraries needed
410 | 
411 | 
412 | [build-badge]: https://img.shields.io/travis/RoyalIcing/react-organism/master.png?style=flat-square
413 | [build]: https://travis-ci.org/RoyalIcing/react-organism
414 | 
415 | [npm-badge]: https://img.shields.io/npm/v/react-organism.png?style=flat-square
416 | [npm]: https://www.npmjs.org/package/react-organism
417 | 
418 | [coveralls-badge]: https://img.shields.io/coveralls/RoyalIcing/react-organism/master.png?style=flat-square
419 | [coveralls]: https://coveralls.io/github/RoyalIcing/react-organism
420 | 


--------------------------------------------------------------------------------
/demo/src/components/Calculator.js:
--------------------------------------------------------------------------------
 1 | import React, { Component } from 'react'
 2 | 
 3 | export default function Calculator({
 4 |   value,
 5 |   handlers: {
 6 |     changeValue,
 7 |     double,
 8 |     add3,
 9 |     initial
10 |   }
11 | }) {
12 |   return (
13 |     <div className='h-spaced'>
14 |       <input value={ value } onChange={ changeValue } />
15 |       <button onClick={ double } children='Double' />
16 |       <button onClick={ add3 } children='Add 3' />
17 |       <button onClick={ initial } children='Reset' />
18 |     </div>
19 |   )
20 | }


--------------------------------------------------------------------------------
/demo/src/components/Counter.js:
--------------------------------------------------------------------------------
 1 | import React, { Component } from 'react'
 2 | 
 3 | export default function Counter({
 4 |   count,
 5 |   handlers: {
 6 |     increment,
 7 |     decrement,
 8 |     initial
 9 |   }
10 | }) {
11 |   return (
12 |     <div className='h-spaced'>
13 |       <button onClick={ decrement } children='−' />
14 |       <span>{ count }</span>
15 |       <button onClick={ increment } children='+' />
16 |       <button onClick={ initial } children='Reset' />
17 |     </div>
18 |   )
19 | }


--------------------------------------------------------------------------------
/demo/src/components/FriendsList.js:
--------------------------------------------------------------------------------
 1 | import React, { Component } from 'react'
 2 | 
 3 | export default function FriendsList({
 4 |   friendsList,
 5 |   selectedIndex,
 6 |   onSelectAtIndex,
 7 |   handlers: {
 8 |     addRandomFriend
 9 |   }
10 | }) {
11 |   return (
12 |     <div>
13 |       {
14 |         !!friendsList ? (
15 |           friendsList.map((friend, index) => (
16 |             <div key={ index }
17 |               style={{
18 |                 backgroundColor: selectedIndex === index ? '#00b4ff' : undefined
19 |               }}
20 |               data-index_number={ index }
21 |               onClick={ onSelectAtIndex }
22 |             >
23 |               Name: { friend.name }
24 |             </div>
25 |           ))
26 |         ) : (
27 |           'Loading…'
28 |         )
29 |       }
30 |       <div>
31 |         <button onClick={ addRandomFriend } children='Add random friend' />
32 |       </div>
33 |     </div>
34 |   )
35 | }


--------------------------------------------------------------------------------
/demo/src/components/Items.js:
--------------------------------------------------------------------------------
 1 | import React, { Component } from 'react'
 2 | 
 3 | export default function Counter({
 4 |   items,
 5 |   collectionName,
 6 |   handlers: {
 7 |     load
 8 |   }
 9 | }) {
10 |   return (
11 |     <div>
12 |       {
13 |         !!items ? (
14 |           `${items.length} ${collectionName}`
15 |         ) : (
16 |           'Loading…'
17 |         )
18 |       }
19 |       <div>
20 |         <button onClick={ load } children='Reload' />
21 |       </div>
22 |     </div>
23 |   )
24 | }


--------------------------------------------------------------------------------
/demo/src/components/Notifications.js:
--------------------------------------------------------------------------------
 1 | import React from 'react'
 2 | 
 3 | export default function Notifications({
 4 |   friends: {
 5 |     friendsList
 6 |   },
 7 |   photos: {
 8 |     photosList
 9 |   }
10 | }) {
11 |   return (
12 |     <div>
13 |       { `${friendsList.length} friends` }
14 |       { ' | ' }
15 |       { `${photosList.length} photos` }
16 |     </div>
17 |   )
18 | }


--------------------------------------------------------------------------------
/demo/src/components/PhotosList.js:
--------------------------------------------------------------------------------
 1 | import React, { Component } from 'react'
 2 | 
 3 | export default function PhotosList({
 4 |   photosList,
 5 |   handlers: {
 6 |     addRandomPhoto,
 7 |     addPhoto
 8 |   }
 9 | }) {
10 |   return (
11 |     <div>
12 |       {
13 |         !!photosList ? (
14 |           photosList.map((photo, index) => (
15 |             <div key={ index }>
16 |               <img src={ photo.url } />
17 |             </div>
18 |           ))
19 |         ) : (
20 |           'Loading…'
21 |         )
22 |       }
23 |       <div>
24 |         <form data-extract data-reset onSubmit={ addPhoto }>
25 |           <label>
26 |             {'URL: '}
27 |             <input type='url' name='url' />
28 |           </label>
29 |           <button type='submit' children='Add photo' />
30 |         </form>
31 |       </div>
32 |       <div>
33 |         <button onClick={ addRandomPhoto } children='Add random photo' />
34 |       </div>
35 |     </div>
36 |   )
37 | }


--------------------------------------------------------------------------------
/demo/src/components/Row.js:
--------------------------------------------------------------------------------
 1 | import React from 'react'
 2 | 
 3 | const style = {
 4 |   display: 'flex',
 5 |   flexDirection: 'row'
 6 | }
 7 | 
 8 | export default function Row({
 9 |   children
10 | }) {
11 |   return (
12 |     <div style={ style } children={ children } />
13 |   )
14 | }


--------------------------------------------------------------------------------
/demo/src/index.js:
--------------------------------------------------------------------------------
 1 | import React, { Component } from 'react'
 2 | import { render } from 'react-dom'
 3 | 
 4 | import CounterOrganism from './organisms/Counter'
 5 | import Counter2Organism from './organisms/Counter2'
 6 | import Counter3Organism from './organisms/Counter3'
 7 | import Counter4Organism from './organisms/Counter4'
 8 | import ItemsOrganism from './organisms/Items'
 9 | import ItemsChoiceOrganism from './organisms/ItemsChoice'
10 | import CalculatorOrganism from './organisms/Calculator'
11 | import SocialOrganism from './organisms/Social'
12 | 
13 | class Demo extends Component {
14 |   render() {
15 |     return <div>
16 |       <h1><a href="https://github.com/RoyalIcing/react-organism">react-organism</a></h1>
17 |       <h3>Simple counter:</h3>
18 |       <CounterOrganism />
19 |       <hr />
20 |       <h3>Using props to customize:</h3>
21 |       <Counter2Organism initialCount={ 9 } stride={ 3 } />
22 |       <hr />
23 |       <h3>Local storage (change and reload page):</h3>
24 |       <Counter3Organism />
25 |       <hr />
26 |       <h3>Async animated:</h3>
27 |       <Counter4Organism />
28 |       <hr />
29 |       <h3>Load data from API:</h3>
30 |       <ItemsOrganism path='/posts' collectionName='posts' />
31 |       <hr />
32 |       <ItemsOrganism path='/photos' collectionName='photos' />
33 |       <hr />
34 |       <ItemsOrganism path='/todos' collectionName='todos' />
35 |       <hr />
36 |       <h3>Handling prop changes:</h3>
37 |       <ItemsChoiceOrganism />
38 |       <hr />
39 |       <h3>Event handlers with calculator:</h3>
40 |       <CalculatorOrganism />
41 |       <hr />
42 |       <h3>Multi-celled organism</h3>
43 |       <SocialOrganism darkMode />
44 | 
45 |       <style>{`
46 | * {
47 |   padding: 0;
48 |   font-size: inherit;
49 |   box-sizing: border-box;
50 | }
51 | 
52 | html {
53 |   font-size: 18px;
54 |   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";
55 |   line-height: 1.3;
56 | }
57 | 
58 | a {
59 |   color: inherit;
60 | }
61 | 
62 | h1 {
63 |   font-size: 1.5rem;
64 | }
65 | 
66 | button, input {
67 |   padding: 0.2em 0.5em;
68 |   border: 1px solid #ccc;
69 |   border-radius: 0.25em;
70 | }
71 | button {
72 |   color: #222;
73 |   background: #eee;
74 | }
75 | 
76 | hr {
77 |   border: none;
78 |   border-top: 1px solid #ccc;
79 | }
80 | 
81 | .h-spaced > * {
82 |   margin-right: 0.5em;
83 | }
84 | `}</style>
85 |     </div>
86 |   }
87 | }
88 | 
89 | render(<Demo/>, document.querySelector('#demo'))
90 | 


--------------------------------------------------------------------------------
/demo/src/organisms/Calculator.js:
--------------------------------------------------------------------------------
 1 | import makeOrganism from '../../../src'
 2 | import extractFromDOM from '../../../src/adjustArgs/extractFromDOM'
 3 | import Calculator from '../components/Calculator'
 4 | 
 5 | export default makeOrganism(Calculator, {
 6 |   initial: ({ initialValue = 0 }) => ({ value: initialValue }),
 7 |   changeValue: (props, { value }) => ({ value: parseInt(value, 10) || '' }),
 8 |   // Or more robust number input handling with fallback to previous value:
 9 |   // changeValue: (props, { target: { value: newValue } }) => ({ value: previousValue }) => ({
10 |   //   value: newValue && (parseInt(newValue, 10) || previousValue)
11 |   // }),
12 |   double: () => ({ value }) => ({ value: (value || 0) * 2 }),
13 |   add3: () => ({ value }) => ({ value: (value || 0) + 3 })
14 | }, {
15 |   adjustArgs: extractFromDOM
16 | })
17 | 


--------------------------------------------------------------------------------
/demo/src/organisms/Counter.js:
--------------------------------------------------------------------------------
 1 | import makeOrganism from '../../../src'
 2 | import * as counterState from '../state/counter'
 3 | import Counter from '../components/Counter'
 4 | 
 5 | //export default makeOrganism(Counter, counterState)
 6 | 
 7 | export default makeOrganism(Counter, {
 8 |   initial: () => ({ count: 0 }),
 9 |   increment: () => ({ count }) => ({ count: count + 1 }),
10 |   decrement: () => ({ count }) => ({ count: count - 1 })
11 | })
12 | 


--------------------------------------------------------------------------------
/demo/src/organisms/Counter2.js:
--------------------------------------------------------------------------------
1 | import makeOrganism from '../../../src'
2 | import Counter from '../components/Counter'
3 | 
4 | export default makeOrganism(Counter, {
5 |   initial: ({ initialCount = 0 }) => ({ count: initialCount }),
6 |   increment: () => ({ count }, { stride = 1 }) => ({ count: count + stride }),
7 |   decrement: () => ({ count }, { stride = 1 }) => ({ count: count - stride })
8 | })
9 | 


--------------------------------------------------------------------------------
/demo/src/organisms/Counter3.js:
--------------------------------------------------------------------------------
 1 | import makeOrganism from '../../../src'
 2 | import Counter from '../components/Counter'
 3 | 
 4 | const localStorageKey = 'counter3'
 5 | 
 6 | export default makeOrganism(Counter, {
 7 |   initial: ({ initialCount = 13 }) => ({ count: initialCount }),
 8 |   load: async (props, prevProps) => {
 9 |     if (!prevProps) {
10 |       // Try commenting out:
11 |       /* throw (new Error('Oops!')) */
12 | 
13 |       // Load previously stored state, if present
14 |       return await JSON.parse(localStorage.getItem(localStorageKey))
15 |     }
16 |   },
17 |   increment: ({ stride = 1 }) => ({ count }) => ({ count: count + stride }),
18 |   decrement: ({ stride = 1 }) => ({ count }) => ({ count: count - stride })
19 | }, {
20 |   onChange(state) {
21 |     // When state changes, save in local storage
22 |     localStorage.setItem(localStorageKey, JSON.stringify(state))
23 |   }
24 | })
25 | 


--------------------------------------------------------------------------------
/demo/src/organisms/Counter4.js:
--------------------------------------------------------------------------------
 1 | import makeOrganism from '../../../src'
 2 | import Counter from '../components/Counter'
 3 | 
 4 | export default makeOrganism(Counter, {
 5 |   initial: ({ initialCount = 0 }) => ({ count: initialCount }),
 6 |   increment: function * ({ stride = 20 }) {
 7 |     while (stride > 0) {
 8 |       yield ({ count }) => ({ count: count + 1 })
 9 |       stride -= 1
10 |     }
11 |   },
12 |   decrement: function * ({ stride = 20 }) {
13 |     while (stride > 0) {
14 |       yield ({ count }) => ({ count: count - 1 })
15 |       stride -= 1
16 |     }
17 |   }
18 | })
19 | 


--------------------------------------------------------------------------------
/demo/src/organisms/Items.js:
--------------------------------------------------------------------------------
 1 | import makeOrganism from '../../../src'
 2 | import * as loadItemsState from '../state/placeholderAPI'
 3 | import Items from '../components/Items'
 4 | 
 5 | // export default makeOrganism(Items, loadItemsState)
 6 | 
 7 | const baseURL = 'https://jsonplaceholder.typicode.com'
 8 | const fetchAPI = (path) => fetch(baseURL + path).then(r => r.json())
 9 | 
10 | export default makeOrganism(Items, {
11 |   initial: () => ({ items: null }),
12 | 
13 |   load: function * ({ path }, prevProps) {
14 |     if (!prevProps || path !== prevProps.path) {
15 |       yield { items: null } // Clear so 'loading…' text appears
16 |       yield fetchAPI(path).then(items => ({ items }))
17 |     }
18 |   }
19 | })
20 | 


--------------------------------------------------------------------------------
/demo/src/organisms/ItemsChoice.js:
--------------------------------------------------------------------------------
 1 | import React from 'react'
 2 | import makeOrganism from '../../../src'
 3 | import ItemsOrganism from './Items'
 4 | 
 5 | export default makeOrganism(({
 6 |   collection,
 7 |   handlers: {
 8 |     selectPosts,
 9 |     selectPhotos,
10 |     selectTodos
11 |   }
12 | }) => (
13 |   <div>
14 |     <div className='h-spaced'>
15 |       <button onClick={ selectPosts }>Posts</button>
16 |       <button onClick={ selectPhotos }>Photos</button>
17 |       <button onClick={ selectTodos }>Todos</button>
18 |     </div>
19 |     <ItemsOrganism path={ '/' + collection } collectionName={ collection } />
20 |   </div>
21 | ), {
22 |   initial: () => ({ collection: 'posts' }),
23 |   selectPosts: () => ({ collection: 'posts' }),
24 |   selectPhotos: () => ({ collection: 'photos' }),
25 |   selectTodos: () => ({ collection: 'todos' })
26 | })


--------------------------------------------------------------------------------
/demo/src/organisms/Social.js:
--------------------------------------------------------------------------------
 1 | import React from 'react'
 2 | import makeMultiCelledOrganism from '../../../src/multi'
 3 | import extractFromDOM from '../../../src/adjustArgs/extractFromDOM'
 4 | import PhotosList from '../components/PhotosList'
 5 | import FriendsList from '../components/FriendsList'
 6 | import Notifications from '../components/Notifications'
 7 | import Row from '../components/Row'
 8 | 
 9 | import * as friends from '../state/friends'
10 | import * as photos from '../state/photos'
11 | import * as selection from '../state/selection'
12 | 
13 | const styles = {
14 |   light: {
15 |     color: '#111',
16 |     backgroundColor: '#f6f6f6'
17 |   },
18 |   dark: {
19 |     color: '#f6f6f6',
20 |     backgroundColor: '#222'
21 |   }
22 | }
23 | 
24 | function Social({
25 |   darkMode = false,
26 |   cells
27 | }) {
28 |   return (
29 |     <div style={ darkMode ? styles.dark : styles.light }>
30 |       <Notifications friends={ cells.friends } photos={ cells.photos } />
31 |       <FriendsList
32 |         { ...cells.friends }
33 |         selectedIndex={ cells.selection.selectedFriendIndex }
34 |         onSelectAtIndex={ cells.selection.handlers.selectFriendAtIndex }
35 |       />
36 |       <PhotosList
37 |         { ...cells.photos }
38 |         selectedIndex={ cells.selection.selectedPhotoIndex }
39 |         onSelectAtIndex={ cells.selection.handlers.selectPhotoAtIndex }
40 |       />
41 |     </div>
42 |   )
43 | }
44 | 
45 | export default makeMultiCelledOrganism(Social, {
46 |   friends,
47 |   photos,
48 |   selection
49 | }, {
50 |   adjustArgs: extractFromDOM
51 | })


--------------------------------------------------------------------------------
/demo/src/state/counter.js:
--------------------------------------------------------------------------------
1 | export const initial = () => ({ count: 0 })
2 | 
3 | export const increment = () => ({ count }) => ({ count: count + 1 })
4 | export const decrement = () => ({ count }) => ({ count: count - 1 })


--------------------------------------------------------------------------------
/demo/src/state/friends.js:
--------------------------------------------------------------------------------
 1 | export const initial = () => ({
 2 |   friendsList: []
 3 | })
 4 | 
 5 | const convertUserToFriend = (user) => ({
 6 |   name: `${user.first} ${user.last}`
 7 | })
 8 | 
 9 | const fetchRandomFriends = () =>
10 |   fetch('https://randomapi.com/api/6de6abfedb24f889e0b5f675edc50deb?fmt=raw&sole')
11 |     .then(res => res.json())
12 |     .then(users => users.slice(0, 10))
13 |     .then(users => users.map(convertUserToFriend))
14 | 
15 | export const load = async (props, prevProps) => {
16 |   if (!prevProps) {
17 |     const newFriends = await fetchRandomFriends()
18 |     return ({ friendsList }) => ({ friendsList: friendsList.concat(newFriends) })
19 |   }
20 | }
21 | 
22 | export const addFriend = (props, { name }) => ({ friendsList }) => ({ friendsList: friendsList.concat({ name }) })
23 | 
24 | export const addRandomFriend = async ({ handlers }) => {
25 |   const [ newFriend ] = await fetchRandomFriends()
26 |   handlers.addFriend(newFriend)
27 | }


--------------------------------------------------------------------------------
/demo/src/state/photos.js:
--------------------------------------------------------------------------------
 1 | export const initial = () => ({
 2 |   photosList: []
 3 | })
 4 | 
 5 | const fetchRandomPhotoURL = () =>
 6 |   fetch(
 7 |     'https://source.unsplash.com/random/800x600',
 8 |     { method: 'HEAD', cache: 'no-cache' }
 9 |   )
10 |     .then(res => res.url)
11 | 
12 | export const load = async (props, prevProps) => {
13 |   if (!prevProps) {
14 |     const url = await fetchRandomPhotoURL()
15 |     return ({ photosList }) => ({ photosList: photosList.concat({ url }) })
16 |   }
17 | }
18 | 
19 | export const addPhoto = (props, { url }) => ({ photosList }) => ({ photosList: photosList.concat({ url }) })
20 | 
21 | export const addRandomPhoto = async (props) => {
22 |   const url = await fetchRandomPhotoURL()
23 |   return addPhoto({}, { url })
24 | }


--------------------------------------------------------------------------------
/demo/src/state/placeholderAPI.js:
--------------------------------------------------------------------------------
 1 | const baseURL = 'https://jsonplaceholder.typicode.com'
 2 | const fetchAPI = (path) => fetch(baseURL + path).then(r => r.json())
 3 | 
 4 | export const initial = () => ({ items: null })
 5 | 
 6 | export const load = async ({ path }, prevProps) => {
 7 |   if (!prevProps || path !== prevProps.path) {
 8 |     console.log('load', path)
 9 |     return { items: await fetchAPI(path) }
10 |   }
11 | }
12 | 


--------------------------------------------------------------------------------
/demo/src/state/selection.js:
--------------------------------------------------------------------------------
1 | export const initial = () => ({
2 |   selectedFriendIndex: null,
3 |   selectedPhotoIndex: null
4 | })
5 | 
6 | export const selectFriendAtIndex = (props, { index }) => ({ selectedFriendIndex: index })
7 | export const selectPhotoAtIndex = (props, { index }) => ({ selectedPhotoIndex: index })
8 | 


--------------------------------------------------------------------------------
/nwb.config.js:
--------------------------------------------------------------------------------
 1 | module.exports = {
 2 |   type: 'react-component',
 3 |   webpack: {
 4 |     hoisting: true
 5 |   },
 6 |   npm: {
 7 |     esModules: true,
 8 |     umd: {
 9 |       global: 'makeOrganism',
10 |       externals: {
11 |         'react': 'React'
12 |       }
13 |     }
14 |   }
15 | }
16 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "react-organism",
 3 |   "version": "0.3.8",
 4 |   "description": "Separate React state in a dead simple functional way",
 5 |   "main": "lib/index.js",
 6 |   "module": "es/index.js",
 7 |   "types": "src/index.d.ts",
 8 |   "files": [
 9 |     "css",
10 |     "es",
11 |     "lib",
12 |     "umd"
13 |   ],
14 |   "scripts": {
15 |     "build": "nwb build-react-component",
16 |     "clean": "nwb clean-module && nwb clean-demo",
17 |     "dev": "nwb serve-react-demo",
18 |     "test": "nwb test-react",
19 |     "test:coverage": "nwb test-react --coverage",
20 |     "test:watch": "nwb test-react --server",
21 |     "now:deploy": "yarn run build && cd demo/dist && now deploy",
22 |     "explore-bundle": "source-map-explorer",
23 |     "prepublishOnly": "npm run test && npm run build"
24 |   },
25 |   "dependencies": {
26 |     "awareness": "^1.1.4"
27 |   },
28 |   "peerDependencies": {
29 |     "react": "^15.0.0-0 || ^16.0.0-0"
30 |   },
31 |   "devDependencies": {
32 |     "nwb": "^0.21.5",
33 |     "react": "^16.0.0-0",
34 |     "react-dom": "^16.0.0-0",
35 |     "source-map-explorer": "^1.3.3"
36 |   },
37 |   "author": "",
38 |   "homepage": "",
39 |   "license": "MIT",
40 |   "repository": "",
41 |   "keywords": [
42 |     "react-component"
43 |   ]
44 | }
45 | 


--------------------------------------------------------------------------------
/packages/create-react-organism/.gitignore:
--------------------------------------------------------------------------------
1 | node_modules


--------------------------------------------------------------------------------
/packages/create-react-organism/README.md:
--------------------------------------------------------------------------------
 1 | # create-react-organism
 2 | 
 3 | Easily create [react-organism](https://github.com/RoyalIcing/react-organism) smart components.
 4 | 
 5 | ## Usage
 6 | 
 7 | ```sh
 8 | yarn create react-organism CustomName
 9 | 
10 | # or
11 | 
12 | npm i -g create-react-organism
13 | create-react-organism CustomName
14 | ```
15 | 
16 | Creates an **organisms** directory in your project, and a directory for your organism inside there: **[/src]/organisms/CustomName/**
17 | 
18 | Three files are created inside:
19 | - **[CustomName].js:** a pure React component that renders the given state as props, as well as call action handlers defined in **state.js**
20 | - **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).
21 | - **index.js:** connects the pure component and state together and exports it for easy use.
22 | 
23 | To use the organism, simply import it:
24 | 
25 | ```javascript
26 | // pages/example.js
27 | import CustomName from '../organisms/CustomName'
28 | 
29 | export default () => (
30 |     <div>
31 |         <CustomName prop1='one' />
32 |     </div>
33 | )
34 | ```


--------------------------------------------------------------------------------
/packages/create-react-organism/bin/create-react-organism.js:
--------------------------------------------------------------------------------
  1 | #!/usr/bin/env node
  2 | 
  3 | const Path = require('path')
  4 | const FS = require('fs')
  5 | const Spawn = require('cross-spawn')
  6 | const { resolve, coroutine, runNode } = require('creed')
  7 | const _ = require('lodash')
  8 | 
  9 | const accessibleFile = (path) => runNode(FS.access, path).map(() => path).catch(() => null)
 10 | 
 11 | const ensureDir = (path) => runNode(FS.mkdir, path).catch(e => {
 12 |     if (e.code === 'EEXIST') {
 13 |         return
 14 |     }
 15 | 
 16 |     throw e
 17 | })
 18 | 
 19 | const installPackage = coroutine(function * installPackage(projectPath, packageName) {
 20 |     const appPackage = require(Path.join(projectPath, 'package.json'))
 21 |     const dependencies = appPackage.dependencies || {}
 22 |     const hasInstalled = !!dependencies[packageName]
 23 |     if (hasInstalled) {
 24 |         return
 25 |     }
 26 | 
 27 |     const useYarn = !!(yield accessibleFile(Path.join(projectPath, 'yarn.lock')))
 28 |     const command = useYarn ? 'yarnpkg' : 'npm'
 29 |     let args = useYarn ? ['add'] : ['install', '--save']
 30 |     args.push(packageName)
 31 |     const proc = Spawn.sync(command, args, { stdio: 'inherit' })
 32 |     if (proc.status !== 0) {
 33 |       throw new Error(`\`${command} ${args.join(' ')}\` failed with status ${proc.status}`)
 34 |     }
 35 | })
 36 | 
 37 | function * run([ inputName, ...args ]) {
 38 |     //const fileName = _.kebabCase(inputName)
 39 |     const componentName = _.upperFirst(_.camelCase(inputName))
 40 | 
 41 |     let projectPath = process.cwd()
 42 |     let srcPath = yield accessibleFile(Path.resolve(projectPath, 'src'))
 43 |     const codePath = srcPath || projectPath
 44 | 
 45 |     // Add react-organism dependency
 46 |     yield installPackage(projectPath, 'react-organism')
 47 | 
 48 |     // organisms/
 49 |     const organismsDirPath = Path.resolve(codePath, 'organisms')
 50 |     yield ensureDir(organismsDirPath)
 51 | 
 52 |     // organisms/:fileName
 53 |     const organismPath = Path.join(organismsDirPath, componentName)
 54 |     yield ensureDir(organismPath)
 55 | 
 56 |     // organisms/:fileName/component.js
 57 |     yield runNode(FS.writeFile, Path.join(organismPath, 'component.js'), makeComponentJS(componentName))
 58 |     // organisms/:fileName/state.js
 59 |     yield runNode(FS.writeFile, Path.join(organismPath, 'state.js'), makeStateJS(componentName))
 60 |     // organisms/:fileName/index.js
 61 |     yield runNode(FS.writeFile, Path.join(organismPath, 'index.js'), makeIndexJS(componentName))
 62 | }
 63 | 
 64 | 
 65 | function makeStateJS(componentName) {
 66 |     return `
 67 | export const initial = () => ({
 68 |   // TODO: initial state properties
 69 | })
 70 | 
 71 | export const example = (props, ...args) => (prevState) => {
 72 |     // TODO: return changed state
 73 |     return prevState
 74 | }
 75 | `.trim()
 76 | }
 77 | 
 78 | 
 79 | function makeComponentJS(componentName) {
 80 |     return `
 81 | import React from 'react'
 82 | 
 83 | export default function ${componentName}({
 84 |     // TODO: props
 85 |     handlers: {
 86 |         example
 87 |         // TODO: state handlers
 88 |     }
 89 | }) {
 90 |   return (
 91 |     <div>
 92 |     </div>
 93 |   )
 94 | }
 95 | `.trim()
 96 | }
 97 | 
 98 | function makeIndexJS(componentName) {
 99 |     return `
100 | import makeOrganism from 'react-organism'
101 | import ${componentName} from './component'
102 | import * as state from './state'
103 | 
104 | export default makeOrganism(${componentName}, state)
105 | `.trim()
106 | }
107 | 
108 | coroutine(run)(process.argv.slice(2))
109 |     .catch(error => {
110 |         console.error(error.message)
111 |     })
112 | 


--------------------------------------------------------------------------------
/packages/create-react-organism/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "create-react-organism",
 3 |   "version": "0.2.0",
 4 |   "description": "Tool to easily create react-organism smart components",
 5 |   "engines": {
 6 |     "node": ">=6"
 7 |   },
 8 |   "bin": {
 9 |     "create-react-organism": "./bin/create-react-organism.js"
10 |   },
11 |   "main": "index.js",
12 |   "repository": "https://github.com/RoyalIcing/react-organism",
13 |   "author": "Patrick Smith <patrick@burntcaramel.com>",
14 |   "license": "MIT",
15 |   "dependencies": {
16 |     "creed": "^1.2.1",
17 |     "cross-spawn": "^5.1.0",
18 |     "lodash": "^4.17.4"
19 |   }
20 | }
21 | 


--------------------------------------------------------------------------------
/packages/create-react-organism/yarn.lock:
--------------------------------------------------------------------------------
 1 | # THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY.
 2 | # yarn lockfile v1
 3 | 
 4 | 
 5 | creed@^1.2.1:
 6 |   version "1.2.1"
 7 |   resolved "https://registry.yarnpkg.com/creed/-/creed-1.2.1.tgz#94e2420c0538e38b701b1dce893d2cda73fe18fd"
 8 | 
 9 | cross-spawn@^5.1.0:
10 |   version "5.1.0"
11 |   resolved "https://registry.yarnpkg.com/cross-spawn/-/cross-spawn-5.1.0.tgz#e8bd0efee58fcff6f8f94510a0a554bbfa235449"
12 |   dependencies:
13 |     lru-cache "^4.0.1"
14 |     shebang-command "^1.2.0"
15 |     which "^1.2.9"
16 | 
17 | isexe@^2.0.0:
18 |   version "2.0.0"
19 |   resolved "https://registry.yarnpkg.com/isexe/-/isexe-2.0.0.tgz#e8fbf374dc556ff8947a10dcb0572d633f2cfa10"
20 | 
21 | lodash@^4.17.4:
22 |   version "4.17.4"
23 |   resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.4.tgz#78203a4d1c328ae1d86dca6460e369b57f4055ae"
24 | 
25 | lru-cache@^4.0.1:
26 |   version "4.1.1"
27 |   resolved "https://registry.yarnpkg.com/lru-cache/-/lru-cache-4.1.1.tgz#622e32e82488b49279114a4f9ecf45e7cd6bba55"
28 |   dependencies:
29 |     pseudomap "^1.0.2"
30 |     yallist "^2.1.2"
31 | 
32 | pseudomap@^1.0.2:
33 |   version "1.0.2"
34 |   resolved "https://registry.yarnpkg.com/pseudomap/-/pseudomap-1.0.2.tgz#f052a28da70e618917ef0a8ac34c1ae5a68286b3"
35 | 
36 | shebang-command@^1.2.0:
37 |   version "1.2.0"
38 |   resolved "https://registry.yarnpkg.com/shebang-command/-/shebang-command-1.2.0.tgz#44aac65b695b03398968c39f363fee5deafdf1ea"
39 |   dependencies:
40 |     shebang-regex "^1.0.0"
41 | 
42 | shebang-regex@^1.0.0:
43 |   version "1.0.0"
44 |   resolved "https://registry.yarnpkg.com/shebang-regex/-/shebang-regex-1.0.0.tgz#da42f49740c0b42db2ca9728571cb190c98efea3"
45 | 
46 | which@^1.2.9:
47 |   version "1.2.14"
48 |   resolved "https://registry.yarnpkg.com/which/-/which-1.2.14.tgz#9a87c4378f03e827cecaf1acdf56c736c01c14e5"
49 |   dependencies:
50 |     isexe "^2.0.0"
51 | 
52 | yallist@^2.1.2:
53 |   version "2.1.2"
54 |   resolved "https://registry.yarnpkg.com/yallist/-/yallist-2.1.2.tgz#1c11f9218f076089a47dd512f93c6699a6a81d52"
55 | 


--------------------------------------------------------------------------------
/src/adjustArgs/extractFromDOM.js:
--------------------------------------------------------------------------------
 1 | import extractValuesFromDOMEvent from 'awareness/lib/extractValuesFromDOMEvent'
 2 | 
 3 | export default function extractFromDOM(args) {
 4 |   if (args[0]) {
 5 |     const values = extractValuesFromDOMEvent(args[0])
 6 | 
 7 |     // Place extracted dataset values first, followed by original arguments
 8 |     args = [values].concat(args)
 9 |   }
10 | 
11 |   return args
12 | }


--------------------------------------------------------------------------------
/src/index.d.ts:
--------------------------------------------------------------------------------
 1 | declare module 'react-organism' {
 2 |   import React from 'react'
 3 | 
 4 |   export interface ReceiverProps<HandlersOut> {
 5 |     handlers: HandlersOut
 6 |   }
 7 | 
 8 |   function makeOrganism<Props, State, HandlersIn, HandlersOut>(
 9 |     Pure:
10 |       | React.ComponentClass<State & ReceiverProps<HandlersOut>>
11 |       | React.StatelessComponent<State & ReceiverProps<HandlersOut>>,
12 |     handlersIn: HandlersIn,
13 |     options?: {
14 |       onChange: (newState: State) => {}
15 |       adjustArgs: (args: any[]) => any[]
16 |     }
17 |   ): React.ComponentClass<Props>
18 | 
19 |   export default makeOrganism
20 | }
21 | 


--------------------------------------------------------------------------------
/src/index.js:
--------------------------------------------------------------------------------
 1 | import React, { PureComponent } from 'react'
 2 | import makeAwareness from 'awareness'
 3 | 
 4 | // Returns a new stateful component, given the specified state handlers and a pure component to render with
 5 | export default (
 6 |   Pure,
 7 |   handlersIn,
 8 |   {
 9 |     onChange,
10 |     adjustArgs
11 |   } = {}
12 | ) => class Organism extends PureComponent {
13 |   static initialStateForProps(props) {
14 |     return handlersIn.initial(props)
15 |   }
16 | 
17 |   get currentState() {
18 |     return this.props.getState ? this.props.getState() : this.state
19 |   }
20 | 
21 |   alterState = (stateChanger) => {
22 |     // Can either be a plain object or a callback to transform the existing state
23 |     (this.props.setState || this.setState).call(
24 |       this,
25 |       stateChanger,
26 |       // Call onChange once updated with current version of state
27 |       onChange ? () => { onChange(this.currentState) } : undefined
28 |     )
29 |   }
30 | 
31 |   awareness = makeAwareness(this.alterState, handlersIn, {
32 |     getProps: () => this.props,
33 |     adjustArgs
34 |   })
35 | 
36 |   state = this.awareness.state
37 | 
38 |   componentDidMount() {
39 |     this.awareness.loadAsync(this.props, null, this.currentState)
40 |   }
41 | 
42 |   componentDidUpdate(prevProps, prevState) {
43 |     this.awareness.loadAsync(this.props, prevProps, this.currentState)
44 |   }
45 | 
46 |   render() {
47 |     // Render the pure component, passing both props and state, plus handlers bundled together
48 |     return <Pure { ...this.props } { ...this.currentState } handlers={ this.awareness.handlers } />
49 |   }
50 | }
51 | 


--------------------------------------------------------------------------------
/src/multi.js:
--------------------------------------------------------------------------------
  1 | import React from 'react'
  2 | import makeAwareness from 'awareness'
  3 | import nextFrame from './nextFrame'
  4 | 
  5 | function cellStateChangerCatchingError(cellKey, stateChanger, errorKey) {
  6 |   return (prevState, props) => {
  7 |     let cellChanges = {}
  8 |     // Check if stateChanger is a function
  9 |     if (typeof(stateChanger) === typeof(stateChanger.call)) {
 10 |       try {
 11 |         // Call state changer
 12 |         cellChanges = stateChanger(prevState[cellKey], props)
 13 |       }
 14 |       // State changer may throw
 15 |       catch (error) {
 16 |         // Store error in state
 17 |         return { [errorKey]: error }
 18 |       }
 19 |     }
 20 |     // Else just an object with changes
 21 |     else {
 22 |       cellChanges = stateChanger
 23 |     }
 24 |     return {
 25 |       [cellKey]: Object.assign({}, prevState[cellKey], cellChanges)
 26 |     }
 27 |   }
 28 | }
 29 | 
 30 | function processStateChanger(changeState, stateChanger, storeError) {
 31 |   if (!stateChanger) {
 32 |     return;
 33 |   }
 34 | 
 35 |   // Check if thenable (i.e. a Promise)
 36 |   if (typeof stateChanger.then === typeof Object.assign) {
 37 |     return stateChanger.then(stateChanger => (
 38 |       stateChanger && changeState(stateChanger)
 39 |     ))
 40 |     .catch(storeError)
 41 |   }
 42 |   // Check if iterator
 43 |   else if (typeof stateChanger.next === typeof Object.assign) {
 44 |     return processIterator(changeState, stateChanger, storeError)
 45 |   }
 46 |   // Otherwise, change state immediately
 47 |   // Required for things like <textarea> onChange to keep cursor in correct position
 48 |   else {
 49 |     changeState(stateChanger)
 50 |   }
 51 | }
 52 | 
 53 | function processIterator(changeState, iterator, storeError, previousValue) {
 54 |   return Promise.resolve(processStateChanger(changeState, previousValue, storeError)) // Process the previous changer
 55 |   .then(() => nextFrame()) // Wait for next frame
 56 |   .then(() => {
 57 |     const result = iterator.next() // Get the next step from the iterator
 58 |     if (result.done) { // No more iterations remaining
 59 |       return processStateChanger(changeState, result.value, storeError) // Process the changer
 60 |     }
 61 |     else {
 62 |       return processIterator(changeState, iterator, storeError, result.value) // Process the iterator’s following steps
 63 |     }
 64 |   })
 65 | }
 66 | 
 67 | export default function makeMultiOrganism(
 68 |   Parent,
 69 |   cells,
 70 |   {
 71 |     onChange,
 72 |     adjustArgs
 73 |   } = {}
 74 | ) {
 75 |   return class OrganismMulticelled extends React.Component {
 76 |     getProps = () => this.props
 77 | 
 78 |     cellsAwareness = Object.keys(cells).reduce((out, cellKey) => {
 79 |       const alterState = (stateChanger) => {
 80 |         // Can either be a plain object or a callback to transform the existing state
 81 |         this.setState(
 82 |           (prevState, props) => {
 83 |             const cellChanges = stateChanger(prevState[cellKey])
 84 |             if (cellChanges.loadError || cellChanges.handlerError) {
 85 |               return cellChanges
 86 |             }
 87 |             return {
 88 |               [cellKey]: Object.assign({}, prevState[cellKey], cellChanges)
 89 |             }
 90 |           },
 91 |           // Call onChange once updated with current version of state
 92 |           onChange ? () => { onChange(this.state) } : undefined
 93 |         )
 94 |       }
 95 | 
 96 |       out[cellKey] = makeAwareness(alterState, cells[cellKey], {
 97 |         getProps: this.getProps,
 98 |         adjustArgs
 99 |       })
100 |       return out
101 |     }, {})
102 |     
103 |     state = Object.keys(this.cellsAwareness).reduce((state, cellKey) => {
104 |       // Grab each cell’s initial value
105 |       state[cellKey] = this.cellsAwareness[cellKey].state
106 |       return state
107 |     }, {
108 |       loadError: null,
109 |       handlerError: null
110 |     })
111 | 
112 |     changeState(stateChanger) {
113 |       // Can either be a plain object or a callback to transform the existing state
114 |       this.setState(
115 |         stateChanger,
116 |         // Call onChange once updated with current version of state
117 |         onChange ? () => { onChange(this.state) } : undefined
118 |       )
119 |     }
120 | 
121 |     loadPromises(nextProps, prevProps) {
122 |       return Object.keys(cells).map(cellKey => {
123 |         const handlersIn = cells[cellKey]
124 |         if (handlersIn.load) {
125 |           // Wrap in Promise to safely catch any errors thrown by `load`
126 |           return Promise.resolve(true)
127 |             .then(() => handlersIn.load(nextProps, prevProps))
128 |             .then(values => (!!values ? { values, cellKey } : undefined))
129 |         }
130 |       })
131 |           .filter(Boolean) // Filter out cells without .load
132 |     }
133 | 
134 |     // Uses `load` handler, if present, to asynchronously load initial state
135 |     loadAsync(nextProps, prevProps) {
136 |       this.loadPromises(nextProps, prevProps)
137 |         .forEach(promise => {
138 |           promise.then(result => {
139 |             if (!result) {
140 |               return
141 |             }
142 |             this.changeState(cellStateChangerCatchingError(result.cellKey, result.values, 'loadError'))
143 |           })
144 |           .catch(error => this.changeState({ loadError: error }))
145 |         })
146 |     }
147 | 
148 |     // Used by Next.js
149 |     getInitialProps(props) {
150 |       return Promise.all(this.loadPromises(props, null))
151 |         .then(results => results.filter(Boolean)) // Filter out .load that returned nothing
152 |         .then(results => (
153 |           results.reduce((initialCellValues, { values, cellKey }) => {
154 |             initialCellValues[cellKey] = values
155 |             return initialCellValues
156 |           }, {})
157 |         ))
158 |     }
159 | 
160 |     componentDidMount() {
161 |       this.loadAsync(this.props, null)
162 |     }
163 | 
164 |     componentWillReceiveProps(nextProps) {
165 |       this.loadAsync(nextProps, this.props)
166 |     }
167 | 
168 |     cellsProxy = Object.keys(cells).reduce((cellsProxy, cellKey) => {
169 |       const { handlers } = this.cellsAwareness[cellKey]
170 | 
171 |       Object.defineProperty(cellsProxy, cellKey, {
172 |         get: () => {
173 |           // Track which cells are used
174 |           //this.usedCells[cellKey] = true
175 |           return Object.assign({}, this.state[cellKey], { handlers })
176 |         }
177 |       })
178 |       return cellsProxy
179 |     }, {})
180 | 
181 |     render() {
182 |       // Render the pure component, passing both props and cells
183 |       return <Parent { ...this.props } cells={ this.cellsProxy } />
184 |     }
185 |   }
186 | }
187 | 


--------------------------------------------------------------------------------
/src/nextFrame.js:
--------------------------------------------------------------------------------
1 | export default () => new Promise((resolve) => {
2 |   window.requestAnimationFrame(resolve)
3 | })
4 | 


--------------------------------------------------------------------------------
/tests/.eslintrc:
--------------------------------------------------------------------------------
1 | {
2 |   "env": {
3 |     "mocha": true
4 |   }
5 | }
6 | 


--------------------------------------------------------------------------------
/tests/extractFromDOM-test.js:
--------------------------------------------------------------------------------
  1 | import expect from 'expect'
  2 | import React from 'react'
  3 | import {render, unmountComponentAtNode} from 'react-dom'
  4 | import ReactTestUtils from 'react-dom/test-utils'
  5 | 
  6 | import makeOrganism from 'src/'
  7 | import extractFromDOM from 'src/adjustArgs/extractFromDOM'
  8 | 
  9 | const waitMs = duration => new Promise(resolve => setTimeout(resolve, duration))
 10 | 
 11 | function PhotosList({
 12 |   photosList,
 13 |   selectedPhotoIndex,
 14 |   handlers: {
 15 |     addPhoto,
 16 |     selectPhotoAtIndex
 17 |   }
 18 | }) {
 19 |   return (
 20 |     <div>
 21 |       <div id='selectionStatus'>
 22 |       {
 23 |         selectedPhotoIndex == null ? (
 24 |           'No photo selected'
 25 |         ) : (
 26 |           `Selected ${selectedPhotoIndex}`
 27 |         )
 28 |       }
 29 |       </div>
 30 |       <div id='photos'>
 31 |       {
 32 |         photosList.length > 0 ? (
 33 |           photosList.map((photo, index) => (
 34 |             <button key={ index }
 35 |               id={`photo-${index}`}
 36 |               data-index_number={ index }
 37 |               onClick={ selectPhotoAtIndex }
 38 |               >
 39 |               <img src={ photo.url } />
 40 |             </button>
 41 |           ))
 42 |         ) : (
 43 |           'No photos'
 44 |         )
 45 |       }
 46 |       </div>
 47 |       <div>
 48 |         <form id='addPhotoForm' data-extract data-reset onSubmit={ addPhoto }>
 49 |           <label>
 50 |             {'URL: '}
 51 |             <input id='urlField' type='url' name='url' />
 52 |           </label>
 53 |           <button id='addPhoto' type='submit' children='Add photo' />
 54 |         </form>
 55 |       </div>
 56 |     </div>
 57 |   )
 58 | }
 59 | 
 60 | describe('extractFromDOM', () => {
 61 |   let node
 62 | 
 63 |   beforeEach(() => {
 64 |     node = document.createElement('div')
 65 |   })
 66 | 
 67 |   afterEach(() => {
 68 |     unmountComponentAtNode(node)
 69 |   })
 70 | 
 71 |   it('Reads form values', (done) => {
 72 |     const PhotosListOrganism = makeOrganism(PhotosList, {
 73 |       initial: () => ({
 74 |         photosList: [],
 75 |         selectedPhotoIndex: null
 76 |       }),
 77 |       addPhoto: (props, { url }) => ({ photosList }) => ({ photosList: photosList.concat({ url }) }),
 78 |       selectPhotoAtIndex: (props, { index }) => ({ selectedPhotoIndex: index })
 79 |     }, {
 80 |       adjustArgs: extractFromDOM
 81 |     })
 82 |     const $ = (selector) => node.querySelector(selector)
 83 |     render(<PhotosListOrganism />, node, async () => {
 84 |       expect($('#photos').innerHTML).toContain('No photos')
 85 | 
 86 |       $('#urlField').value = 'https://via.placeholder.com/350x150'
 87 |       ReactTestUtils.Simulate.change($('#urlField'))
 88 | 
 89 |       // Should extract data using named field
 90 |       ReactTestUtils.Simulate.submit($('#addPhotoForm'))
 91 |       await waitMs(10)
 92 |       expect($('#photos').innerHTML).toContain('https://via.placeholder.com/350x150')
 93 |       // Should reset fields if data-reset present
 94 |       expect($('#urlField').value).toBe('')
 95 | 
 96 |       // Should extract data- attributes
 97 |       expect($('#selectionStatus').innerHTML).toContain('No photo selected')
 98 |       
 99 |       ReactTestUtils.Simulate.click($('#photo-0'))
100 |       expect($('#selectionStatus').innerHTML).toContain('Selected 0')
101 | 
102 |       done()
103 |     })
104 |   })
105 | 
106 | })
107 | 


--------------------------------------------------------------------------------
/tests/index-test.js:
--------------------------------------------------------------------------------
  1 | import expect from 'expect'
  2 | import React, { Component } from 'react'
  3 | import {render, unmountComponentAtNode} from 'react-dom'
  4 | import ReactTestUtils from 'react-dom/test-utils'
  5 | 
  6 | import makeOrganism from 'src/'
  7 | 
  8 | const waitMs = duration => new Promise(resolve => setTimeout(resolve, duration))
  9 | 
 10 | const nextFrame = () => new Promise((resolve) => {
 11 |   window.requestAnimationFrame(resolve)
 12 | })
 13 | 
 14 | 
 15 | function Counter({
 16 |   count,
 17 |   handlers: {
 18 |     increment,
 19 |     decrement,
 20 |     delayedIncrement,
 21 |     delayedIncrementGenerator,
 22 |     doNothing,
 23 |     blowUp,
 24 |     blowUp2,
 25 |     blowUpDelayed,
 26 |     initial,
 27 |     load
 28 |   }
 29 | }) {
 30 |   return (
 31 |     <div>
 32 |       <button id='decrement' onClick={ decrement } children='−' />
 33 |       <span>{ count }</span>
 34 |       <button id='increment' onClick={ increment } children='+' />
 35 |       { delayedIncrement &&
 36 |         <button id='delayedIncrement' onClick={ delayedIncrement } children='+' />
 37 |       }
 38 |       { delayedIncrementGenerator &&
 39 |         <button id='delayedIncrementGenerator' onClick={ delayedIncrementGenerator } children='+' />
 40 |       }
 41 |       { doNothing &&
 42 |         <button id='doNothing' onClick={ doNothing } children='Do Nothing' />
 43 |       }
 44 |       { blowUp &&
 45 |         <button id='blowUp' onClick={ blowUp } children='Blow Up' />
 46 |       }
 47 |       { blowUp2 &&
 48 |         <button id='blowUp2' onClick={ blowUp2 } children='Blow Up 2' />
 49 |       }
 50 |       { blowUpDelayed &&
 51 |         <button id='blowUpDelayed' onClick={ blowUpDelayed } children='Blow Up Delayed' />
 52 |       }
 53 |       <button id='initial' onClick={ initial } children='Reset' />
 54 |       { load &&
 55 |         <button id='reload' onClick={ load } children='Reload' />
 56 |       }
 57 |     </div>
 58 |   )
 59 | }
 60 | 
 61 | describe('makeOrganism', () => {
 62 |   let node;
 63 |   let latestState;
 64 |   const $ = (selector) => node.querySelector(selector)
 65 |   const promiseRender = (element) => new Promise((resolve) => {
 66 |     render(element, node, resolve)  
 67 |   })
 68 | 
 69 |   beforeEach(() => {
 70 |     try {
 71 |     node = document.createElement('div')
 72 |     }
 73 |     catch (error) {
 74 |       console.error('ERRORS', error)
 75 |       throw error
 76 |     }
 77 |   })
 78 | 
 79 |   afterEach(() => {
 80 |     unmountComponentAtNode(node)
 81 |   })
 82 | 
 83 |   it('Sends click events', async () => {
 84 |     let changeCount = 0
 85 |     const delayWait = 20
 86 | 
 87 |     console.log('before makeOrganism')
 88 |     const CounterOrganism = makeOrganism(Counter, {
 89 |       initial: ({ initialCount = 0 }) => ({ count: initialCount }),
 90 |       increment: () => ({ count }) => ({ count: count + 1 }),
 91 |       decrement: () => ({ count }) => ({ count: count - 1 }),
 92 |       delayedIncrement: async () => {
 93 |         await waitMs(delayWait / 2)
 94 |         await waitMs(delayWait / 2)
 95 |         return ({ count }) => ({ count: count + 1 })
 96 |       },
 97 |       delayedIncrementGenerator: function *() {
 98 |         yield waitMs(delayWait / 2)
 99 |         yield waitMs(delayWait / 2)
100 |         yield ({ count }) => ({ count: count + 1 })
101 |       },
102 |       doNothing: () => {},
103 |       blowUp: () => {
104 |         throw new Error('Whoops')
105 |       },
106 |       blowUp2: () => (prevState) => {
107 |         throw new Error('Whoops 2')
108 |       },
109 |       blowUpDelayed: async () => {
110 |         await waitMs(delayWait)
111 |         throw new Error('Whoops Delayed')
112 |       }
113 |     }, {
114 |       onChange(state) {
115 |         latestState = state
116 |         changeCount++
117 |       }
118 |     })
119 |     console.log('after makeOrganism')
120 | 
121 |     await promiseRender(<CounterOrganism initialCount={ 2 } />)
122 |     expect(node.innerHTML).toContain('2')
123 |     console.log(node.innerHTML)
124 | 
125 |     // Click increment
126 |     ReactTestUtils.Simulate.click($('#increment'))
127 |     expect(node.innerHTML).toContain('3')
128 | 
129 |     // Click decrement
130 |     ReactTestUtils.Simulate.click($('#decrement'))
131 |     expect(node.innerHTML).toContain('2')
132 |     expect(changeCount).toBe(2)
133 | 
134 |     // Click delayedIncrement
135 |     ReactTestUtils.Simulate.click($('#delayedIncrement'))
136 |     await waitMs(delayWait + 5)
137 |     expect(node.innerHTML).toContain('3')
138 |     expect(changeCount).toBe(3)
139 | 
140 |     // Click delayedIncrementGenerator
141 |     ReactTestUtils.Simulate.click($('#delayedIncrementGenerator'))
142 |     await waitMs(delayWait / 2)
143 |     await nextFrame()
144 |     await waitMs(delayWait / 2)
145 |     await nextFrame()
146 |     await waitMs(5)
147 |     await nextFrame()
148 |     expect(node.innerHTML).toContain('4')
149 |     expect(changeCount).toBe(4)
150 | 
151 |     ReactTestUtils.Simulate.click($('#doNothing'))
152 |     expect(node.innerHTML).toContain('4')
153 |     expect(changeCount).toBe(4)
154 | 
155 |     // Click blowUp
156 |     ReactTestUtils.Simulate.click($('#blowUp'))
157 |     expect(latestState.handlerError).toExist()
158 |     expect(latestState.handlerError.message).toBe('Whoops')
159 | 
160 |     // Click blowUp2
161 |     ReactTestUtils.Simulate.click($('#blowUp2'))
162 |     expect(latestState.handlerError).toExist()
163 |     expect(latestState.handlerError.message).toBe('Whoops 2')
164 | 
165 |     // Click blowUpDelayed
166 |     ReactTestUtils.Simulate.click($('#blowUpDelayed'))
167 |     await waitMs(delayWait + 5)
168 |     expect(latestState.handlerError).toExist()
169 |     expect(latestState.handlerError.message).toBe('Whoops Delayed')
170 | 
171 |     expect(changeCount).toBe(7)
172 |   })
173 | 
174 |   it('Calls load handler', async () => {
175 |     let changeCount = 0
176 |     let latestState;
177 |     const loadWait = 35
178 | 
179 |     const CounterOrganism = makeOrganism(Counter, {
180 |       initial: ({ initialCount = 0 }) => ({ count: initialCount }),
181 |       load: async ({ loadedCount }, prevProps) => {
182 |         if (!prevProps || loadedCount !== prevProps.loadedCount) {
183 |           await waitMs(loadWait)
184 |           const count = loadedCount * 2 // Multiply to be sure we are using this loaded value
185 |           if (Number.isNaN(count)) {
186 |             throw new Error('Loaded count is invalid')
187 |           }
188 |           return { count }
189 |         }
190 |       },
191 |       increment: () => ({ count }) => ({ count: count + 1 }),
192 |       decrement: () => ({ count }) => ({ count: count - 1 })
193 |     }, {
194 |       onChange(state) {
195 |         latestState = state
196 |         changeCount++
197 |       }
198 |     })
199 | 
200 |     await promiseRender(<CounterOrganism initialCount={ 2 } loadedCount={ 7 } />)
201 |     expect(node.innerHTML).toContain('2')
202 | 
203 |     // Click increment
204 |     ReactTestUtils.Simulate.click($('#increment'))
205 |     expect(node.innerHTML).toContain('3')
206 | 
207 |     // Click decrement
208 |     ReactTestUtils.Simulate.click($('#decrement'))
209 |     expect(node.innerHTML).toContain('2')
210 | 
211 |     expect(changeCount).toBe(2)
212 | 
213 |     await waitMs(loadWait + 5)
214 |     expect(node.innerHTML).toContain(14)
215 |     expect(changeCount).toBe(3)
216 | 
217 |     await promiseRender(<CounterOrganism initialCount={ 22 } loadedCount={ 7 } />)
218 |     expect(node.innerHTML).toContain(14)
219 |     expect(changeCount).toBe(3)
220 | 
221 |     await promiseRender(<CounterOrganism initialCount={ 22 } loadedCount={ 9 } />)
222 |     await waitMs(loadWait + 5)
223 |     expect(node.innerHTML).toContain(18)
224 |     expect(changeCount).toBe(4)
225 | 
226 |     // Click reload
227 |     ReactTestUtils.Simulate.click($('#reload'))
228 |     await waitMs(loadWait + 5)
229 |     expect(node.innerHTML).toContain(18)
230 |     expect(changeCount).toBe(5)
231 | 
232 |     // Load error
233 |     promiseRender(<CounterOrganism initialCount={ 22 } loadedCount='Not a number' />)
234 |     await waitMs(loadWait + 5)
235 |     expect(latestState.loadError).toExist()
236 |     expect(changeCount).toBe(6)
237 |   })
238 | 
239 |   it('Supports getState/setState props', async () => {
240 |     let changeCount = 0
241 |     const delayWait = 20
242 | 
243 |     const CounterOrganism = makeOrganism(Counter, {
244 |       initial: ({ initialCount = 0 }) => ({ count: initialCount }),
245 |       increment: () => ({ count }) => ({ count: count + 1 }),
246 |       decrement: () => ({ count }) => ({ count: count - 1 }),
247 |       delayedIncrement: async () => {
248 |         await waitMs(delayWait / 2)
249 |         await waitMs(delayWait / 2)
250 |         return ({ count }) => ({ count: count + 1 })
251 |       },
252 |       delayedIncrementGenerator: function *() {
253 |         yield waitMs(delayWait / 2)
254 |         yield waitMs(delayWait / 2)
255 |         yield ({ count }) => ({ count: count + 1 })
256 |       },
257 |       doNothing: () => {},
258 |       blowUp: () => {
259 |         throw new Error('Whoops')
260 |       },
261 |       blowUp2: () => (prevState) => {
262 |         throw new Error('Whoops 2')
263 |       },
264 |       blowUpDelayed: async () => {
265 |         await waitMs(delayWait)
266 |         throw new Error('Whoops Delayed')
267 |       }
268 |     }, {
269 |       onChange(state) {
270 |         latestState = state
271 |         changeCount++
272 |       }
273 |     })
274 | 
275 |     class Wrapper extends Component {
276 |       state = CounterOrganism.initialStateForProps(this.props)
277 | 
278 |       render() {
279 |         return <CounterOrganism
280 |           getState={ () => this.state }
281 |           setState={ this.setState.bind(this) }
282 |         />
283 |       }
284 |     }
285 | 
286 |     await promiseRender(<Wrapper initialCount={ 2 } />)
287 |     expect(node.innerHTML).toContain('2')
288 |     console.log(node.innerHTML)
289 | 
290 |     // Click increment
291 |     ReactTestUtils.Simulate.click($('#increment'))
292 |     expect(node.innerHTML).toContain('3')
293 | 
294 |     // Click decrement
295 |     ReactTestUtils.Simulate.click($('#decrement'))
296 |     expect(node.innerHTML).toContain('2')
297 |     expect(changeCount).toBe(2)
298 | 
299 |     // Click delayedIncrement
300 |     ReactTestUtils.Simulate.click($('#delayedIncrement'))
301 |     await waitMs(delayWait + 5)
302 |     expect(node.innerHTML).toContain('3')
303 |     expect(changeCount).toBe(3)
304 |   })
305 | 
306 | })
307 | 


--------------------------------------------------------------------------------
/tests/multi-test.js:
--------------------------------------------------------------------------------
  1 | import expect from 'expect'
  2 | import React from 'react'
  3 | import {render, unmountComponentAtNode} from 'react-dom'
  4 | import ReactTestUtils from 'react-dom/test-utils'
  5 | 
  6 | import makeMulticelledOrganism from 'src/multi'
  7 | 
  8 | const waitMs = duration => new Promise(resolve => setTimeout(resolve, duration))
  9 | 
 10 | const nextFrame = () => new Promise((resolve) => {
 11 |   window.requestAnimationFrame(resolve)
 12 | })
 13 | 
 14 | function Counter({
 15 |   id,
 16 |   count,
 17 |   title,
 18 |   handlers: {
 19 |     increment,
 20 |     decrement,
 21 |     delayedIncrement,
 22 |     delayedIncrementGenerator,
 23 |     doNothing,
 24 |     blowUp,
 25 |     blowUp2,
 26 |     blowUpDelayed,
 27 |     initial,
 28 |     load,
 29 |     changeTitle,
 30 |     uppercaseTitle,
 31 |     makeTitleHeading
 32 |   }
 33 | }) {
 34 |   return (
 35 |     <div>
 36 |       <h2 id={`${id}-title`}>{ title }</h2>
 37 |       <button id={`${id}-decrement`} onClick={ decrement } children='−' />
 38 |       <span id={`${id}-currentCount`}>{ id }: { count }</span>
 39 |       <button id={`${id}-increment`} onClick={ increment } children='+' />
 40 |       { delayedIncrement &&
 41 |         <button id={`${id}-delayedIncrement`} onClick={ delayedIncrement } children='+' />
 42 |       }
 43 |       { delayedIncrementGenerator &&
 44 |         <button id={`${id}-delayedIncrementGenerator`} onClick={ delayedIncrementGenerator } children='+' />
 45 |       }
 46 |       { doNothing &&
 47 |         <button id={`${id}-doNothing`} onClick={ doNothing } children='Do Nothing' />
 48 |       }
 49 |       { blowUp &&
 50 |         <button id={`${id}-blowUp`} onClick={ blowUp } children='Blow Up' />
 51 |       }
 52 |       { blowUp2 &&
 53 |         <button id={`${id}-blowUp2`} onClick={ blowUp2 } children='Blow Up 2' />
 54 |       }
 55 |       { blowUpDelayed &&
 56 |         <button id={`${id}-blowUpDelayed`} onClick={ blowUpDelayed } children='Blow Up Delayed' />
 57 |       }
 58 |       <button id={`${id}-initial`} onClick={ initial } children='Reset' />
 59 |       { load &&
 60 |         <button id='reload' onClick={ load } children='Reload' />
 61 |       }
 62 | 
 63 |       <input id={`${id}-changeTitle`} onChange={ changeTitle } />
 64 |       <button id={`${id}-uppercaseTitle`} onClick={ uppercaseTitle } children='uppercaseTitle' />
 65 |       <button id={`${id}-makeTitleHeading`} onClick={ makeTitleHeading } children='makeTitleHeading' />
 66 |     </div>
 67 |   )
 68 | }
 69 | 
 70 | const counterModel = {
 71 |   initial: ({ initialCount = 0 }) => ({ count: initialCount }),
 72 |   increment: () => ({ count }) => ({ count: count + 1 }),
 73 |   decrement: () => ({ count }) => ({ count: count - 1 }),
 74 |   delayedIncrement: async () => {
 75 |     await waitMs(delayWait)
 76 |     return ({ count }) => ({ count: count + 1 })
 77 |   },
 78 |   delayedIncrementGenerator: function *() {
 79 |     yield waitMs(delayWait / 2)
 80 |     yield waitMs(delayWait / 2)
 81 |     yield ({ count }) => ({ count: count + 1 })
 82 |   },
 83 |   doNothing: () => {},
 84 |   blowUp: () => {
 85 |     throw new Error('Whoops')
 86 |   },
 87 |   blowUp2: () => (prevState) => {
 88 |     throw new Error('Whoops 2')
 89 |   },
 90 |   blowUpDelayed: async () => {
 91 |     await waitMs(delayWait)
 92 |     throw new Error('Whoops Delayed')
 93 |   }
 94 | }
 95 | 
 96 | const loadWait = 35
 97 | const delayWait = 20
 98 | const counterLoadModel = {
 99 |   initial: ({ initialCount = 0 }) => ({
100 |     count: initialCount,
101 |     title: 'Counter'
102 |   }),
103 |   load: async ({ loadedCount }, prevProps) => {
104 |     if (!prevProps || loadedCount !== prevProps.loadedCount) {
105 |       await waitMs(loadWait)
106 |       const count = loadedCount * 2 // Multiply to be sure we are using this loaded value
107 |       if (Number.isNaN(count)) {
108 |         throw new Error('Loaded count is invalid')
109 |       }
110 |       return { count }
111 |     }
112 |   },
113 |   increment: () => ({ count }) => ({ count: count + 1 }),
114 |   decrement: () => ({ count }) => ({ count: count - 1 }),
115 |   changeTitle: (props, { value }) => ({ title: value }),
116 |   uppercaseTitle: () => ({ title }) => ({ title: title.toUpperCase() }),
117 |   makeTitleHeading: () => ({ title: 'Heading' })
118 | }
119 | 
120 | describe('makeMulticelledOrganism', () => {
121 |   let node;
122 |   const $ = (selector) => node.querySelector(selector)
123 |   let promiseRender;
124 | 
125 |   beforeEach(() => {
126 |     node = document.createElement('div')
127 |     promiseRender = (element) => new Promise((resolve) => {
128 |       render(element, node, resolve)
129 |     })
130 |   })
131 | 
132 |   afterEach(() => {
133 |     unmountComponentAtNode(node)
134 |   })
135 | 
136 |   it('Sends click events', async () => {
137 |     let changeCount = 0
138 |     let latestState;
139 | 
140 |     const Organism = makeMulticelledOrganism(({
141 |       cells: {
142 |         counterA,
143 |         counterB
144 |       }
145 |     }) => (
146 |       <div>
147 |         <Counter id='a' { ...counterA } />
148 |         <Counter id='b' { ...counterB } />
149 |       </div>
150 |     ), {
151 |       counterA: counterModel,
152 |       counterB: counterModel
153 |     }, {
154 |       onChange(state) {
155 |         latestState = state
156 |         changeCount++
157 |       }
158 |     })
159 | 
160 |     await promiseRender(<Organism initialCount={ 2 } />)
161 |     const $aCurrentCount = $('#a-currentCount')
162 |     const $bCurrentCount = $('#b-currentCount')
163 |     expect($aCurrentCount.textContent).toBe('a: 2')
164 |     expect($bCurrentCount.textContent).toBe('b: 2')
165 | 
166 |     // Click a increment
167 |     ReactTestUtils.Simulate.click($('#a-increment'))
168 |     expect($aCurrentCount.textContent).toBe('a: 3')
169 |     expect($bCurrentCount.textContent).toBe('b: 2')
170 | 
171 |     // Click a decrement
172 |     ReactTestUtils.Simulate.click($('#a-decrement'))
173 |     expect($aCurrentCount.textContent).toBe('a: 2')
174 |     expect($bCurrentCount.textContent).toBe('b: 2')
175 | 
176 |     // Click b decrement
177 |     ReactTestUtils.Simulate.click($('#b-decrement'))
178 |     expect($aCurrentCount.textContent).toBe('a: 2')
179 |     expect($bCurrentCount.textContent).toBe('b: 1')
180 |     expect(changeCount).toBe(3)
181 | 
182 |     // Click delayedIncrement
183 |     ReactTestUtils.Simulate.click($('#a-delayedIncrement'))
184 |     await waitMs(delayWait + 5)
185 |     expect($aCurrentCount.textContent).toBe('a: 3')
186 |     expect($bCurrentCount.textContent).toBe('b: 1')
187 |     expect(changeCount).toBe(4)
188 | 
189 |     // Click delayedIncrementGenerator
190 |     ReactTestUtils.Simulate.click($('#a-delayedIncrementGenerator'))
191 |     await waitMs(delayWait / 2)
192 |     await nextFrame()
193 |     await waitMs(delayWait / 2)
194 |     await nextFrame()
195 |     await waitMs(5)
196 |     expect($aCurrentCount.textContent).toBe('a: 4')
197 |     expect($bCurrentCount.textContent).toBe('b: 1')
198 |     expect(changeCount).toBe(5)
199 | 
200 |     ReactTestUtils.Simulate.click($('#b-doNothing'))
201 |     expect($aCurrentCount.textContent).toBe('a: 4')
202 |     expect($bCurrentCount.textContent).toBe('b: 1')
203 |     expect(changeCount).toBe(5)
204 | 
205 |     // Click blowUp
206 |     ReactTestUtils.Simulate.click($('#a-blowUp'))
207 |     expect(latestState.handlerError).toExist()
208 |     expect(latestState.handlerError.message).toBe('Whoops')
209 | 
210 |     // Click blowUp2
211 |     ReactTestUtils.Simulate.click($('#b-blowUp2'))
212 |     expect(latestState.handlerError).toExist()
213 |     expect(latestState.handlerError.message).toBe('Whoops 2')
214 | 
215 |     // Click blowUpDelayed
216 |     ReactTestUtils.Simulate.click($('#a-blowUpDelayed'))
217 |     await waitMs(delayWait + 5)
218 |     expect(latestState.handlerError).toExist()
219 |     expect(latestState.handlerError.message).toBe('Whoops Delayed')
220 |   })
221 | 
222 |   it('Calls load handler', async () => {
223 |     let changeCount = 0
224 |     let latestState;
225 |     const loadWait = 35
226 | 
227 |     const Organism = makeMulticelledOrganism(({
228 |       cells: {
229 |         counterA,
230 |         counterB
231 |       }
232 |     }) => (
233 |       <div>
234 |         <Counter id='a' { ...counterA } />
235 |         <Counter id='b' { ...counterB } />
236 |       </div>
237 |     ), {
238 |       counterA: counterLoadModel,
239 |       counterB: counterLoadModel
240 |     }, {
241 |       onChange(state) {
242 |         latestState = state
243 |         changeCount++
244 |       }
245 |     })
246 | 
247 |     await promiseRender(<Organism initialCount={ 2 } loadedCount={ 7 } />)
248 |     const $aCurrentCount = $('#a-currentCount')
249 |     const $aTitle = $('#a-title')
250 | 
251 |     expect($aCurrentCount.textContent).toContain('2')
252 | 
253 |     // Click increment
254 |     ReactTestUtils.Simulate.click($('#a-increment'))
255 |     expect($aCurrentCount.textContent).toContain('3')
256 | 
257 |     // Click decrement
258 |     ReactTestUtils.Simulate.click($('#a-decrement'))
259 |     expect($aCurrentCount.textContent).toContain('2')
260 |     expect(changeCount).toBe(2)
261 | 
262 |     await waitMs(loadWait + 5)
263 |     // Loaded
264 |     expect($aCurrentCount.textContent).toContain('14')
265 |     expect(changeCount).toBe(4) // Both cells loaded, so change count increases by 2
266 | 
267 |     await promiseRender(<Organism initialCount={ 22 } loadedCount={ 7 } />)
268 |     // Takes some time to load, so shouldn’t have changed yet
269 |     expect($aCurrentCount.textContent).toContain('14')
270 |     expect(changeCount).toBe(4)
271 | 
272 |     await promiseRender(<Organism initialCount={ 22 } loadedCount={ 9 } />)
273 |     await waitMs(loadWait + 5)
274 |     // Loaded from new props
275 |     expect($aCurrentCount.textContent).toContain('18')
276 |     expect(changeCount).toBe(6)
277 | 
278 |     expect($aTitle.textContent).toBe('Counter')
279 | 
280 |     ReactTestUtils.Simulate.click($('#a-uppercaseTitle'))
281 |     expect($aTitle.textContent).toBe('COUNTER')
282 |     expect(changeCount).toBe(7)
283 | 
284 |     ReactTestUtils.Simulate.click($('#a-makeTitleHeading'))
285 |     expect($aTitle.textContent).toBe('Heading')
286 |     expect(changeCount).toBe(8)
287 | 
288 |     // Click reload
289 |     ReactTestUtils.Simulate.click($('#reload'))
290 |     await waitMs(loadWait + 5)
291 |     expect($aCurrentCount.textContent).toContain('18')
292 |     expect(changeCount).toBe(9)
293 | 
294 |     // Load error
295 |     await promiseRender(<Organism initialCount={ 22 } loadedCount='Not a number' />)
296 |     await waitMs(loadWait + 5)
297 |     expect(latestState.loadError).toExist()
298 |     expect(changeCount).toBe(11)
299 |   })
300 | 
301 |   it('getInitialProps()', async () => {
302 |     let changeCount = 0
303 |     let latestState;
304 |     const loadWait = 35
305 | 
306 |     const Organism = makeMulticelledOrganism(({
307 |       cells: {
308 |         counterA,
309 |         counterB
310 |       }
311 |     }) => (
312 |       <div>
313 |         <Counter id='a' { ...counterA } />
314 |         <Counter id='b' { ...counterB } />
315 |       </div>
316 |     ), {
317 |       counterA: counterLoadModel,
318 |       counterB: counterLoadModel
319 |     }, {
320 |       onChange(state) {
321 |         latestState = state
322 |         changeCount++
323 |       }
324 |     })
325 | 
326 |     const element = <Organism initialCount={ 2 } loadedCount={ 7 } />
327 |     const instance = new Organism(element.props)
328 | 
329 |     const initialProps = await instance.getInitialProps(element.props)
330 |     expect(initialProps).toEqual({
331 |       counterA: { count: 14 },
332 |       counterB: { count: 14 }
333 |     })
334 |   })
335 | 
336 | })
337 | 


--------------------------------------------------------------------------------
/umd/react-organism.js:
--------------------------------------------------------------------------------
  1 | /*!
  2 |  * react-organism v0.3.6
  3 |  * MIT Licensed
  4 |  */
  5 | (function webpackUniversalModuleDefinition(root, factory) {
  6 | 	if(typeof exports === 'object' && typeof module === 'object')
  7 | 		module.exports = factory(require("react"));
  8 | 	else if(typeof define === 'function' && define.amd)
  9 | 		define(["react"], factory);
 10 | 	else if(typeof exports === 'object')
 11 | 		exports["makeOrganism"] = factory(require("react"));
 12 | 	else
 13 | 		root["makeOrganism"] = factory(root["React"]);
 14 | })(this, function(__WEBPACK_EXTERNAL_MODULE_2__) {
 15 | return /******/ (function(modules) { // webpackBootstrap
 16 | /******/ 	// The module cache
 17 | /******/ 	var installedModules = {};
 18 | /******/
 19 | /******/ 	// The require function
 20 | /******/ 	function __webpack_require__(moduleId) {
 21 | /******/
 22 | /******/ 		// Check if module is in cache
 23 | /******/ 		if(installedModules[moduleId]) {
 24 | /******/ 			return installedModules[moduleId].exports;
 25 | /******/ 		}
 26 | /******/ 		// Create a new module (and put it into the cache)
 27 | /******/ 		var module = installedModules[moduleId] = {
 28 | /******/ 			i: moduleId,
 29 | /******/ 			l: false,
 30 | /******/ 			exports: {}
 31 | /******/ 		};
 32 | /******/
 33 | /******/ 		// Execute the module function
 34 | /******/ 		modules[moduleId].call(module.exports, module, module.exports, __webpack_require__);
 35 | /******/
 36 | /******/ 		// Flag the module as loaded
 37 | /******/ 		module.l = true;
 38 | /******/
 39 | /******/ 		// Return the exports of the module
 40 | /******/ 		return module.exports;
 41 | /******/ 	}
 42 | /******/
 43 | /******/
 44 | /******/ 	// expose the modules object (__webpack_modules__)
 45 | /******/ 	__webpack_require__.m = modules;
 46 | /******/
 47 | /******/ 	// expose the module cache
 48 | /******/ 	__webpack_require__.c = installedModules;
 49 | /******/
 50 | /******/ 	// define getter function for harmony exports
 51 | /******/ 	__webpack_require__.d = function(exports, name, getter) {
 52 | /******/ 		if(!__webpack_require__.o(exports, name)) {
 53 | /******/ 			Object.defineProperty(exports, name, {
 54 | /******/ 				configurable: false,
 55 | /******/ 				enumerable: true,
 56 | /******/ 				get: getter
 57 | /******/ 			});
 58 | /******/ 		}
 59 | /******/ 	};
 60 | /******/
 61 | /******/ 	// getDefaultExport function for compatibility with non-harmony modules
 62 | /******/ 	__webpack_require__.n = function(module) {
 63 | /******/ 		var getter = module && module.__esModule ?
 64 | /******/ 			function getDefault() { return module['default']; } :
 65 | /******/ 			function getModuleExports() { return module; };
 66 | /******/ 		__webpack_require__.d(getter, 'a', getter);
 67 | /******/ 		return getter;
 68 | /******/ 	};
 69 | /******/
 70 | /******/ 	// Object.prototype.hasOwnProperty.call
 71 | /******/ 	__webpack_require__.o = function(object, property) { return Object.prototype.hasOwnProperty.call(object, property); };
 72 | /******/
 73 | /******/ 	// __webpack_public_path__
 74 | /******/ 	__webpack_require__.p = "";
 75 | /******/
 76 | /******/ 	// Load entry module and return exports
 77 | /******/ 	return __webpack_require__(__webpack_require__.s = 0);
 78 | /******/ })
 79 | /************************************************************************/
 80 | /******/ ([
 81 | /* 0 */
 82 | /***/ (function(module, exports, __webpack_require__) {
 83 | 
 84 | module.exports = __webpack_require__(1);
 85 | 
 86 | 
 87 | /***/ }),
 88 | /* 1 */
 89 | /***/ (function(module, __webpack_exports__, __webpack_require__) {
 90 | 
 91 | "use strict";
 92 | Object.defineProperty(__webpack_exports__, "__esModule", { value: true });
 93 | /* harmony import */ var __WEBPACK_IMPORTED_MODULE_0_react__ = __webpack_require__(2);
 94 | /* harmony import */ var __WEBPACK_IMPORTED_MODULE_0_react___default = __webpack_require__.n(__WEBPACK_IMPORTED_MODULE_0_react__);
 95 | /* harmony import */ var __WEBPACK_IMPORTED_MODULE_1_awareness__ = __webpack_require__(3);
 96 | 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; };
 97 | 
 98 | 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; }; }();
 99 | 
100 | function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
101 | 
102 | 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; }
103 | 
104 | 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; }
105 | 
106 | 
107 | 
108 | 
109 | // Returns a new stateful component, given the specified state handlers and a pure component to render with
110 | /* harmony default export */ __webpack_exports__["default"] = (function (Pure, handlersIn) {
111 |   var _ref = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {},
112 |       onChange = _ref.onChange,
113 |       adjustArgs = _ref.adjustArgs;
114 | 
115 |   return function (_PureComponent) {
116 |     _inherits(Organism, _PureComponent);
117 | 
118 |     function Organism() {
119 |       var _temp, _this, _ret;
120 | 
121 |       _classCallCheck(this, Organism);
122 | 
123 |       for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) {
124 |         args[_key] = arguments[_key];
125 |       }
126 | 
127 |       return _ret = (_temp = (_this = _possibleConstructorReturn(this, _PureComponent.call.apply(_PureComponent, [this].concat(args))), _this), _this.alterState = function (stateChanger) {
128 |         // Can either be a plain object or a callback to transform the existing state
129 |         (_this.props.setState || _this.setState).call(_this, stateChanger,
130 |         // Call onChange once updated with current version of state
131 |         onChange ? function () {
132 |           onChange(_this.currentState);
133 |         } : undefined);
134 |       }, _this.awareness = Object(__WEBPACK_IMPORTED_MODULE_1_awareness__["a" /* default */])(_this.alterState, handlersIn, {
135 |         getProps: function getProps() {
136 |           return _this.props;
137 |         },
138 |         adjustArgs: adjustArgs
139 |       }), _this.state = _this.awareness.state, _temp), _possibleConstructorReturn(_this, _ret);
140 |     }
141 | 
142 |     Organism.initialStateForProps = function initialStateForProps(props) {
143 |       return handlersIn.initial(props);
144 |     };
145 | 
146 |     Organism.prototype.componentDidMount = function componentDidMount() {
147 |       this.awareness.loadAsync(this.props, null, this.currentState);
148 |     };
149 | 
150 |     Organism.prototype.componentWillReceiveProps = function componentWillReceiveProps(nextProps) {
151 |       this.awareness.loadAsync(nextProps, this.props, this.currentState);
152 |     };
153 | 
154 |     Organism.prototype.render = function render() {
155 |       // Render the pure component, passing both props and state, plus handlers bundled together
156 |       return __WEBPACK_IMPORTED_MODULE_0_react___default.a.createElement(Pure, _extends({}, this.props, this.currentState, { handlers: this.awareness.handlers }));
157 |     };
158 | 
159 |     _createClass(Organism, [{
160 |       key: 'currentState',
161 |       get: function get() {
162 |         return this.props.getState ? this.props.getState() : this.state;
163 |       }
164 |     }]);
165 | 
166 |     return Organism;
167 |   }(__WEBPACK_IMPORTED_MODULE_0_react__["PureComponent"]);
168 | });
169 | 
170 | /***/ }),
171 | /* 2 */
172 | /***/ (function(module, exports) {
173 | 
174 | module.exports = __WEBPACK_EXTERNAL_MODULE_2__;
175 | 
176 | /***/ }),
177 | /* 3 */
178 | /***/ (function(module, __webpack_exports__, __webpack_require__) {
179 | 
180 | "use strict";
181 | /* unused harmony export callHandler */
182 | 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; };
183 | 
184 | var nextFrame = function nextFrame() {
185 |   return new Promise(function (resolve) {
186 |     window.requestAnimationFrame(resolve);
187 |   });
188 | };
189 | 
190 | function stateChangerCatchingError(stateChanger, transformError) {
191 |   return function (prevState, props) {
192 |     // Check if stateChanger is a function
193 |     if ((typeof stateChanger === 'undefined' ? 'undefined' : _typeof(stateChanger)) === _typeof(stateChanger.call)) {
194 |       try {
195 |         // Call state changer
196 |         return stateChanger(prevState, props);
197 |       }
198 |       // State changer may throw
199 |       catch (error) {
200 |         // Store error in state
201 |         return transformError(error);
202 |       }
203 |     }
204 |     // Else just an object with changes
205 |     else {
206 |         return stateChanger;
207 |       }
208 |   };
209 | }
210 | 
211 | function processStateChanger(changeState, stateChanger, storeError) {
212 |   if (!stateChanger) {
213 |     return;
214 |   }
215 | 
216 |   // Check if thenable (i.e. a Promise)
217 |   if (_typeof(stateChanger.then) === _typeof(Object.assign)) {
218 |     return stateChanger.then(function (stateChanger) {
219 |       return stateChanger && changeState(stateChanger);
220 |     }).catch(storeError);
221 |   }
222 |   // Check if iterator
223 |   else if (_typeof(stateChanger.next) === _typeof(Object.assign)) {
224 |       return processIterator(changeState, stateChanger, storeError);
225 |     }
226 |     // Otherwise, change state immediately
227 |     // Required for things like <textarea> onChange to keep cursor in correct position
228 |     else {
229 |         changeState(stateChanger);
230 |       }
231 | }
232 | 
233 | function processIterator(changeState, iterator, storeError, previousValue) {
234 |   return Promise.resolve(processStateChanger(changeState, previousValue, storeError)) // Process the previous changer
235 |   .then(function () {
236 |     return nextFrame();
237 |   }) // Wait for next frame
238 |   .then(function () {
239 |     var result = iterator.next(); // Get the next step from the iterator
240 |     if (result.done) {
241 |       // No more iterations remaining
242 |       return processStateChanger(changeState, result.value, storeError); // Process the changer
243 |     } else {
244 |       return processIterator(changeState, iterator, storeError, result.value); // Process the iterator’s following steps
245 |     }
246 |   });
247 | }
248 | 
249 | function callHandler(handler, transformError, args, alterState) {
250 |   if ((typeof transformError === 'undefined' ? 'undefined' : _typeof(transformError)) === _typeof('')) {
251 |     var errorKey = transformError;
252 |     transformError = function transformError(error) {
253 |       var _ref;
254 | 
255 |       return _ref = {}, _ref[errorKey] = error, _ref;
256 |     };
257 |   }
258 | 
259 |   var storeError = function storeError(error) {
260 |     alterState(function () {
261 |       return transformError(error);
262 |     });
263 |   };
264 |   // Call handler function, props first, then rest of args
265 |   try {
266 |     var changeState = function changeState(stateChanger) {
267 |       alterState(stateChangerCatchingError(stateChanger, transformError));
268 |     };
269 |     var result = handler.apply(null, args);
270 |     // Can return multiple state changers, ensure array, and then loop through
271 |     [].concat(result).forEach(function (stateChanger) {
272 |       processStateChanger(changeState, stateChanger, storeError);
273 |     });
274 |   }
275 |   // Catch error within handler’s (first) function
276 |   catch (error) {
277 |     storeError(error);
278 |   }
279 | }
280 | 
281 | var defaultTransformErrorForKey = function defaultTransformErrorForKey(key) {
282 |   return function (error) {
283 |     var _ref2;
284 | 
285 |     var stateKey = (key === 'load' ? 'load' : 'handler') + 'Error';
286 |     return _ref2 = {}, _ref2[stateKey] = error, _ref2;
287 |   };
288 | };
289 | 
290 | // Returns a new stateful component, given the specified state handlers and a pure component to render with
291 | /* harmony default export */ __webpack_exports__["a"] = (function (alterState, handlersIn) {
292 |   var _ref3 = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {},
293 |       _ref3$getProps = _ref3.getProps,
294 |       getProps = _ref3$getProps === undefined ? function () {
295 |     return {};
296 |   } : _ref3$getProps,
297 |       _ref3$transformErrorF = _ref3.transformErrorForKey,
298 |       transformErrorForKey = _ref3$transformErrorF === undefined ? defaultTransformErrorForKey : _ref3$transformErrorF,
299 |       adjustArgs = _ref3.adjustArgs;
300 | 
301 |   var state = Object.assign({
302 |     loadError: null,
303 |     handlerError: null
304 |   }, handlersIn.initial(getProps()));
305 | 
306 |   // Uses `load` handler, if present, to asynchronously load initial state
307 |   function loadAsync() {
308 |     if (handlersIn.load) {
309 |       for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) {
310 |         args[_key] = arguments[_key];
311 |       }
312 | 
313 |       callHandler(handlersIn.load, transformErrorForKey('load'), args, alterState);
314 |     }
315 |   }
316 | 
317 |   var handlers = Object.keys(handlersIn).reduce(function (out, key) {
318 |     // Special case for `load` handler to reload fresh
319 |     if (key === 'load') {
320 |       out.load = function () {
321 |         loadAsync(getProps(), null);
322 |       };
323 |       return out;
324 |     }
325 | 
326 |     out[key] = function () {
327 |       for (var _len2 = arguments.length, args = Array(_len2), _key2 = 0; _key2 < _len2; _key2++) {
328 |         args[_key2] = arguments[_key2];
329 |       }
330 | 
331 |       if (adjustArgs) {
332 |         args = adjustArgs(args);
333 |       }
334 | 
335 |       callHandler(handlersIn[key], transformErrorForKey(key), [Object.assign({}, getProps(), { handlers: handlers })].concat(args), alterState);
336 |     };
337 |     return out;
338 |   }, {});
339 | 
340 |   return {
341 |     state: state,
342 |     loadAsync: loadAsync,
343 |     handlers: handlers
344 |   };
345 | });
346 | 
347 | /***/ })
348 | /******/ ]);
349 | });


--------------------------------------------------------------------------------
/umd/react-organism.min.js:
--------------------------------------------------------------------------------
1 | /*!
2 |  * react-organism v0.3.6
3 |  * MIT Licensed
4 |  */
5 | !function(t,n){"object"==typeof exports&&"object"==typeof module?module.exports=n(require("react")):"function"==typeof define&&define.amd?define(["react"],n):"object"==typeof exports?exports.makeOrganism=n(require("react")):t.makeOrganism=n(t.React)}(this,function(t){return function(t){function n(r){if(e[r])return e[r].exports;var o=e[r]={i:r,l:!1,exports:{}};return t[r].call(o.exports,o,o.exports,n),o.l=!0,o.exports}var e={};return n.m=t,n.c=e,n.d=function(t,e,r){n.o(t,e)||Object.defineProperty(t,e,{configurable:!1,enumerable:!0,get:r})},n.n=function(t){var e=t&&t.__esModule?function(){return t.default}:function(){return t};return n.d(e,"a",e),e},n.o=function(t,n){return Object.prototype.hasOwnProperty.call(t,n)},n.p="",n(n.s=0)}([function(t,n,e){t.exports=e(1)},function(t,n,e){"use strict";function r(t,n){return function(e,r){if((void 0===t?"undefined":p(t))!==p(t.call))return t;try{return t(e,r)}catch(t){return n(t)}}}function o(t,n,e){if(n)return p(n.then)===p(Object.assign)?n.then(function(n){return n&&t(n)}).catch(e):p(n.next)===p(Object.assign)?u(t,n,e):void t(n)}function u(t,n,e,r){return Promise.resolve(o(t,r,e)).then(function(){return d()}).then(function(){var r=n.next();return r.done?o(t,r.value,e):u(t,n,e,r.value)})}function i(t,n,e,u){if((void 0===n?"undefined":p(n))===p("")){var i=n;n=function(t){var n;return n={},n[i]=t,n}}var a=function(t){u(function(){return n(t)})};try{var c=function(t){u(r(t,n))};[].concat(t.apply(null,e)).forEach(function(t){o(c,t,a)})}catch(t){a(t)}}function a(t,n){if(!(t instanceof n))throw new TypeError("Cannot call a class as a function")}function c(t,n){if(!t)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return!n||"object"!=typeof n&&"function"!=typeof n?t:n}function s(t,n){if("function"!=typeof n&&null!==n)throw new TypeError("Super expression must either be null or a function, not "+typeof n);t.prototype=Object.create(n&&n.prototype,{constructor:{value:t,enumerable:!1,writable:!0,configurable:!0}}),n&&(Object.setPrototypeOf?Object.setPrototypeOf(t,n):t.__proto__=n)}Object.defineProperty(n,"__esModule",{value:!0});var f=e(2),l=e.n(f),p="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(t){return typeof t}:function(t){return t&&"function"==typeof Symbol&&t.constructor===Symbol&&t!==Symbol.prototype?"symbol":typeof t},d=function(){return new Promise(function(t){window.requestAnimationFrame(t)})},y=function(t){return function(n){var e,r=("load"===t?"load":"handler")+"Error";return e={},e[r]=n,e}},h=function(t,n){function e(){if(n.load){for(var e=arguments.length,r=Array(e),o=0;o<e;o++)r[o]=arguments[o];i(n.load,c("load"),r,t)}}var r=arguments.length>2&&void 0!==arguments[2]?arguments[2]:{},o=r.getProps,u=void 0===o?function(){return{}}:o,a=r.transformErrorForKey,c=void 0===a?y:a,s=r.adjustArgs,f=Object.assign({loadError:null,handlerError:null},n.initial(u())),l=Object.keys(n).reduce(function(r,o){return"load"===o?(r.load=function(){e(u(),null)},r):(r[o]=function(){for(var e=arguments.length,r=Array(e),a=0;a<e;a++)r[a]=arguments[a];s&&(r=s(r)),i(n[o],c(o),[Object.assign({},u(),{handlers:l})].concat(r),t)},r)},{});return{state:f,loadAsync:e,handlers:l}},b=Object.assign||function(t){for(var n=1;n<arguments.length;n++){var e=arguments[n];for(var r in e)Object.prototype.hasOwnProperty.call(e,r)&&(t[r]=e[r])}return t},v=function(){function t(t,n){for(var e=0;e<n.length;e++){var r=n[e];r.enumerable=r.enumerable||!1,r.configurable=!0,"value"in r&&(r.writable=!0),Object.defineProperty(t,r.key,r)}}return function(n,e,r){return e&&t(n.prototype,e),r&&t(n,r),n}}();n.default=function(t,n){var e=arguments.length>2&&void 0!==arguments[2]?arguments[2]:{},r=e.onChange,o=e.adjustArgs;return function(e){function u(){var t,i,s;a(this,u);for(var f=arguments.length,l=Array(f),p=0;p<f;p++)l[p]=arguments[p];return t=i=c(this,e.call.apply(e,[this].concat(l))),i.alterState=function(t){(i.props.setState||i.setState).call(i,t,r?function(){r(i.currentState)}:void 0)},i.awareness=h(i.alterState,n,{getProps:function(){return i.props},adjustArgs:o}),i.state=i.awareness.state,s=t,c(i,s)}return s(u,e),u.initialStateForProps=function(t){return n.initial(t)},u.prototype.componentDidMount=function(){this.awareness.loadAsync(this.props,null,this.currentState)},u.prototype.componentWillReceiveProps=function(t){this.awareness.loadAsync(t,this.props,this.currentState)},u.prototype.render=function(){return l.a.createElement(t,b({},this.props,this.currentState,{handlers:this.awareness.handlers}))},v(u,[{key:"currentState",get:function(){return this.props.getState?this.props.getState():this.state}}]),u}(f.PureComponent)}},function(n,e){n.exports=t}])});
6 | //# sourceMappingURL=react-organism.min.js.map


--------------------------------------------------------------------------------
/umd/react-organism.min.js.map:
--------------------------------------------------------------------------------
1 | {"version":3,"sources":["webpack:///webpack/universalModuleDefinition","webpack:///react-organism.min.js","webpack:///webpack/bootstrap 94a9b99b80898cf373c3","webpack:///./node_modules/awareness/es/index.js","webpack:///./src/index.js","webpack:///external {\"root\":\"React\",\"commonjs2\":\"react\",\"commonjs\":\"react\",\"amd\":\"react\"}"],"names":["root","factory","exports","module","require","define","amd","this","__WEBPACK_EXTERNAL_MODULE_2__","modules","__webpack_require__","moduleId","installedModules","i","l","call","m","c","d","name","getter","o","Object","defineProperty","configurable","enumerable","get","n","__esModule","object","property","prototype","hasOwnProperty","p","s","__webpack_exports__","stateChangerCatchingError","stateChanger","transformError","prevState","props","_typeof","error","processStateChanger","changeState","storeError","then","assign","catch","next","processIterator","iterator","previousValue","Promise","resolve","nextFrame","result","done","value","callHandler","handler","args","alterState","errorKey","_ref","concat","apply","forEach","_classCallCheck","instance","Constructor","TypeError","_possibleConstructorReturn","self","ReferenceError","_inherits","subClass","superClass","create","constructor","writable","setPrototypeOf","__proto__","external___root___React___commonjs2___react___commonjs___react___amd___react__","external___root___React___commonjs2___react___commonjs___react___amd___react___default","Symbol","obj","window","requestAnimationFrame","defaultTransformErrorForKey","key","_ref2","stateKey","es","handlersIn","loadAsync","load","_len","arguments","length","Array","_key","transformErrorForKey","_ref3","undefined","_ref3$getProps","getProps","_ref3$transformErrorF","adjustArgs","state","loadError","handlerError","initial","handlers","keys","reduce","out","_len2","_key2","_extends","target","source","_createClass","defineProperties","descriptor","protoProps","staticProps","Pure","onChange","_PureComponent","Organism","_temp","_this","_ret","setState","currentState","awareness","initialStateForProps","componentDidMount","componentWillReceiveProps","nextProps","render","a","createElement","getState"],"mappings":";;;;CAAA,SAAAA,EAAAC,GACA,gBAAAC,UAAA,gBAAAC,QACAA,OAAAD,QAAAD,EAAAG,QAAA,UACA,kBAAAC,gBAAAC,IACAD,QAAA,SAAAJ,GACA,gBAAAC,SACAA,QAAA,aAAAD,EAAAG,QAAA,UAEAJ,EAAA,aAAAC,EAAAD,EAAA,QACCO,KAAA,SAAAC,GACD,MCAgB,UAAUC,GCN1B,QAAAC,GAAAC,GAGA,GAAAC,EAAAD,GACA,MAAAC,GAAAD,GAAAT,OAGA,IAAAC,GAAAS,EAAAD,IACAE,EAAAF,EACAG,GAAA,EACAZ,WAUA,OANAO,GAAAE,GAAAI,KAAAZ,EAAAD,QAAAC,IAAAD,QAAAQ,GAGAP,EAAAW,GAAA,EAGAX,EAAAD,QAvBA,GAAAU,KA4DA,OAhCAF,GAAAM,EAAAP,EAGAC,EAAAO,EAAAL,EAGAF,EAAAQ,EAAA,SAAAhB,EAAAiB,EAAAC,GACAV,EAAAW,EAAAnB,EAAAiB,IACAG,OAAAC,eAAArB,EAAAiB,GACAK,cAAA,EACAC,YAAA,EACAC,IAAAN,KAMAV,EAAAiB,EAAA,SAAAxB,GACA,GAAAiB,GAAAjB,KAAAyB,WACA,WAA2B,MAAAzB,GAAA,SAC3B,WAAiC,MAAAA,GAEjC,OADAO,GAAAQ,EAAAE,EAAA,IAAAA,GACAA,GAIAV,EAAAW,EAAA,SAAAQ,EAAAC,GAAsD,MAAAR,QAAAS,UAAAC,eAAAjB,KAAAc,EAAAC,IAGtDpB,EAAAuB,EAAA,GAGAvB,IAAAwB,EAAA,KDgBM,SAAU/B,EAAQD,EAASQ,GAEjCP,EAAOD,QAAUQ,EAAoB,IAK/B,SAAUP,EAAQgC,EAAqBzB,GAE7C,YE9EA,SAAA0B,GAAAC,EAAAC,GACA,gBAAAC,EAAAC,GAEA,aAAAH,EAAA,YAAAI,EAAAJ,MAAAI,EAAAJ,EAAAtB,MAaA,MAAAsB,EAZA,KAEA,MAAAA,GAAAE,EAAAC,GAGA,MAAAE,GAEA,MAAAJ,GAAAI,KAUA,QAAAC,GAAAC,EAAAP,EAAAQ,GACA,GAAAR,EAKA,MAAAI,GAAAJ,EAAAS,QAAAL,EAAAnB,OAAAyB,QACAV,EAAAS,KAAA,SAAAT,GACA,MAAAA,IAAAO,EAAAP,KACKW,MAAAH,GAGLJ,EAAAJ,EAAAY,QAAAR,EAAAnB,OAAAyB,QACAG,EAAAN,EAAAP,EAAAQ,OAKAD,GAAAP,GAIA,QAAAa,GAAAN,EAAAO,EAAAN,EAAAO,GACA,MAAAC,SAAAC,QAAAX,EAAAC,EAAAQ,EAAAP,IACAC,KAAA,WACA,MAAAS,OAEAT,KAAA,WACA,GAAAU,GAAAL,EAAAF,MACA,OAAAO,GAAAC,KAEAd,EAAAC,EAAAY,EAAAE,MAAAb,GAEAK,EAAAN,EAAAO,EAAAN,EAAAW,EAAAE,SAKA,QAAAC,GAAAC,EAAAtB,EAAAuB,EAAAC,GACA,aAAAxB,EAAA,YAAAG,EAAAH,MAAAG,EAAA,KACA,GAAAsB,GAAAzB,CACAA,GAAA,SAAAI,GACA,GAAAsB,EAEA,OAAAA,MAAsBA,EAAAD,GAAArB,EAAAsB,GAItB,GAAAnB,GAAA,SAAAH,GACAoB,EAAA,WACA,MAAAxB,GAAAI,KAIA,KACA,GAAAE,GAAA,SAAAP,GACAyB,EAAA1B,EAAAC,EAAAC,QAIA2B,OAFAL,EAAAM,MAAA,KAAAL,IAEAM,QAAA,SAAA9B,GACAM,EAAAC,EAAAP,EAAAQ,KAIA,MAAAH,GACAG,EAAAH,IFwKA,QAAS0B,GAAgBC,EAAUC,GAAe,KAAMD,YAAoBC,IAAgB,KAAM,IAAIC,WAAU,qCAEhH,QAASC,GAA2BC,EAAM1D,GAAQ,IAAK0D,EAAQ,KAAM,IAAIC,gBAAe,4DAAgE,QAAO3D,GAAyB,gBAATA,IAAqC,kBAATA,GAA8B0D,EAAP1D,EAElO,QAAS4D,GAAUC,EAAUC,GAAc,GAA0B,kBAAfA,IAA4C,OAAfA,EAAuB,KAAM,IAAIN,WAAU,iEAAoEM,GAAeD,GAAS7C,UAAYT,OAAOwD,OAAOD,GAAcA,EAAW9C,WAAagD,aAAerB,MAAOkB,EAAUnD,YAAY,EAAOuD,UAAU,EAAMxD,cAAc,KAAeqD,IAAYvD,OAAO2D,eAAiB3D,OAAO2D,eAAeL,EAAUC,GAAcD,EAASM,UAAYL,GApLjevD,OAAOC,eAAeY,EAAqB,cAAgBuB,OAAO,GAGlE,IAAIyB,GAAiFzE,EAAoB,GACrG0E,EAAsG1E,EAAoBiB,EAAEwD,GE3FhI1C,EAAA,kBAAA4C,SAAA,gBAAAA,QAAAlC,SAAA,SAAAmC,GAAoG,aAAAA,IAAqB,SAAAA,GAAmB,MAAAA,IAAA,kBAAAD,SAAAC,EAAAP,cAAAM,QAAAC,IAAAD,OAAAtD,UAAA,eAAAuD,IAE5I/B,EAAA,WACA,UAAAF,SAAA,SAAAC,GACAiC,OAAAC,sBAAAlC,MA+FAmC,EAAA,SAAAC,GACA,gBAAAhD,GACA,GAAAiD,GAEAC,GAAA,SAAAF,EAAA,yBACA,OAAAC,MAAqBA,EAAAC,GAAAlD,EAAAiD,IAKrBE,EAAA,SAAA/B,EAAAgC,GAgBA,QAAAC,KACA,GAAAD,EAAAE,KAAA,CACA,OAAAC,GAAAC,UAAAC,OAAAtC,EAAAuC,MAAAH,GAAAI,EAAA,EAAqEA,EAAAJ,EAAaI,IAClFxC,EAAAwC,GAAAH,UAAAG,EAGA1C,GAAAmC,EAAAE,KAAAM,EAAA,QAAAzC,EAAAC,IArBA,GAAAyC,GAAAL,UAAAC,OAAA,OAAAK,KAAAN,UAAA,GAAAA,UAAA,MACAO,EAAAF,EAAAG,SACAA,MAAAF,KAAAC,EAAA,WACA,UACGA,EACHE,EAAAJ,EAAAD,qBACAA,MAAAE,KAAAG,EAAAlB,EAAAkB,EACAC,EAAAL,EAAAK,WAEAC,EAAAvF,OAAAyB,QACA+D,UAAA,KACAC,aAAA,MACGjB,EAAAkB,QAAAN,MAaHO,EAAA3F,OAAA4F,KAAApB,GAAAqB,OAAA,SAAAC,EAAA1B,GAEA,eAAAA,GACA0B,EAAApB,KAAA,WACAD,EAAAW,IAAA,OAEAU,IAGAA,EAAA1B,GAAA,WACA,OAAA2B,GAAAnB,UAAAC,OAAAtC,EAAAuC,MAAAiB,GAAAC,EAAA,EAAwEA,EAAAD,EAAeC,IACvFzD,EAAAyD,GAAApB,UAAAoB,EAGAV,KACA/C,EAAA+C,EAAA/C,IAGAF,EAAAmC,EAAAJ,GAAAY,EAAAZ,IAAApE,OAAAyB,UAA+E2D,KAAeO,cAAqBhD,OAAAJ,GAAAC,IAEnHsD,OAGA,QACAP,QACAd,YACAkB,aFkGIM,EAAWjG,OAAOyB,QAAU,SAAUyE,GAAU,IAAK,GAAI3G,GAAI,EAAGA,EAAIqF,UAAUC,OAAQtF,IAAK,CAAE,GAAI4G,GAASvB,UAAUrF,EAAI,KAAK,GAAI6E,KAAO+B,GAAcnG,OAAOS,UAAUC,eAAejB,KAAK0G,EAAQ/B,KAAQ8B,EAAO9B,GAAO+B,EAAO/B,IAAY,MAAO8B,IAEnPE,EAAe,WAAc,QAASC,GAAiBH,EAAQhF,GAAS,IAAK,GAAI3B,GAAI,EAAGA,EAAI2B,EAAM2D,OAAQtF,IAAK,CAAE,GAAI+G,GAAapF,EAAM3B,EAAI+G,GAAWnG,WAAamG,EAAWnG,aAAc,EAAOmG,EAAWpG,cAAe,EAAU,SAAWoG,KAAYA,EAAW5C,UAAW,GAAM1D,OAAOC,eAAeiG,EAAQI,EAAWlC,IAAKkC,IAAiB,MAAO,UAAUtD,EAAauD,EAAYC,GAAiJ,MAA9HD,IAAYF,EAAiBrD,EAAYvC,UAAW8F,GAAiBC,GAAaH,EAAiBrD,EAAawD,GAAqBxD,KGjQhiBnC,GAAA,iBACE4F,EACAjC,GAFa,GAAA9B,GAAAkC,UAAAC,OAAA,OAAAK,KAAAN,UAAA,GAAAA,UAAA,MAIX8B,EAJWhE,EAIXgE,SACApB,EALW5C,EAKX4C,UALW,iBAAAqB,GAAA,QAAAC,KAAA,GAAAC,GAAAC,EAAAC,CAAAjE,GAAA7D,KAAA2H,EAAA,QAAAjC,GAAAC,UAAAC,OAAAtC,EAAAuC,MAAAH,GAAAI,EAAA,EAAAA,EAAAJ,EAAAI,IAAAxC,EAAAwC,GAAAH,UAAAG,EAAA,OAAA8B,GAAAC,EAAA5D,EAAAjE,KAAA0H,EAAAlH,KAAAmD,MAAA+D,GAAA1H,MAAA0D,OAAAJ,KAAAuE,EAgBbtE,WAAa,SAACzB,IAEX+F,EAAK5F,MAAM8F,UAAYF,EAAKE,UAAUvH,KAAvCqH,EAEE/F,EAEA2F,EAAW,WAAQA,EAASI,EAAKG,mBAAkB/B,KAtB1C4B,EA0BbI,UAAY3C,EAAcuC,EAAKtE,WAAYgC,GACzCY,SAAU,iBAAM0B,GAAK5F,OACrBoE,eA5BWwB,EA+BbvB,MAAQuB,EAAKI,UAAU3B,MA/BVwB,EAAAF,EAAA3D,EAAA4D,EAAAC,GAAA,MAAA1D,GAAAuD,EAAAD,GAAAC,EAQNO,qBARM,SAQejG,GAC1B,MAAOsD,GAAWkB,QAAQxE,IATf0F,EAAAnG,UAiCb2G,kBAjCa,WAkCXnI,KAAKiI,UAAUzC,UAAUxF,KAAKiC,MAAO,KAAMjC,KAAKgI,eAlCrCL,EAAAnG,UAqCb4G,0BArCa,SAqCaC,GACxBrI,KAAKiI,UAAUzC,UAAU6C,EAAWrI,KAAKiC,MAAOjC,KAAKgI,eAtC1CL,EAAAnG,UAyCb8G,OAzCa,WA2CX,MAAOzD,GAAA0D,EAAAC,cAAChB,EAADR,KAAWhH,KAAKiC,MAAajC,KAAKgI,cAAetB,SAAW1G,KAAKiI,UAAUvB,aA3CvES,EAAAQ,IAAAxC,IAAA,eAAAhE,IAAA,WAaX,MAAOnB,MAAKiC,MAAMwG,SAAWzI,KAAKiC,MAAMwG,WAAazI,KAAKsG,UAb/CqB,GAOa/C,EAAA,iBHoUtB,SAAUhF,EAAQD,GI/UxBC,EAAAD,QAAAM","file":"react-organism.min.js","sourcesContent":["(function webpackUniversalModuleDefinition(root, factory) {\n\tif(typeof exports === 'object' && typeof module === 'object')\n\t\tmodule.exports = factory(require(\"react\"));\n\telse if(typeof define === 'function' && define.amd)\n\t\tdefine([\"react\"], factory);\n\telse if(typeof exports === 'object')\n\t\texports[\"makeOrganism\"] = factory(require(\"react\"));\n\telse\n\t\troot[\"makeOrganism\"] = factory(root[\"React\"]);\n})(this, function(__WEBPACK_EXTERNAL_MODULE_2__) {\nreturn \n\n\n// WEBPACK FOOTER //\n// webpack/universalModuleDefinition","(function webpackUniversalModuleDefinition(root, factory) {\n\tif(typeof exports === 'object' && typeof module === 'object')\n\t\tmodule.exports = factory(require(\"react\"));\n\telse if(typeof define === 'function' && define.amd)\n\t\tdefine([\"react\"], factory);\n\telse if(typeof exports === 'object')\n\t\texports[\"makeOrganism\"] = factory(require(\"react\"));\n\telse\n\t\troot[\"makeOrganism\"] = factory(root[\"React\"]);\n})(this, function(__WEBPACK_EXTERNAL_MODULE_2__) {\nreturn /******/ (function(modules) { // webpackBootstrap\n/******/ \t// The module cache\n/******/ \tvar installedModules = {};\n/******/\n/******/ \t// The require function\n/******/ \tfunction __webpack_require__(moduleId) {\n/******/\n/******/ \t\t// Check if module is in cache\n/******/ \t\tif(installedModules[moduleId]) {\n/******/ \t\t\treturn installedModules[moduleId].exports;\n/******/ \t\t}\n/******/ \t\t// Create a new module (and put it into the cache)\n/******/ \t\tvar module = installedModules[moduleId] = {\n/******/ \t\t\ti: moduleId,\n/******/ \t\t\tl: false,\n/******/ \t\t\texports: {}\n/******/ \t\t};\n/******/\n/******/ \t\t// Execute the module function\n/******/ \t\tmodules[moduleId].call(module.exports, module, module.exports, __webpack_require__);\n/******/\n/******/ \t\t// Flag the module as loaded\n/******/ \t\tmodule.l = true;\n/******/\n/******/ \t\t// Return the exports of the module\n/******/ \t\treturn module.exports;\n/******/ \t}\n/******/\n/******/\n/******/ \t// expose the modules object (__webpack_modules__)\n/******/ \t__webpack_require__.m = modules;\n/******/\n/******/ \t// expose the module cache\n/******/ \t__webpack_require__.c = installedModules;\n/******/\n/******/ \t// define getter function for harmony exports\n/******/ \t__webpack_require__.d = function(exports, name, getter) {\n/******/ \t\tif(!__webpack_require__.o(exports, name)) {\n/******/ \t\t\tObject.defineProperty(exports, name, {\n/******/ \t\t\t\tconfigurable: false,\n/******/ \t\t\t\tenumerable: true,\n/******/ \t\t\t\tget: getter\n/******/ \t\t\t});\n/******/ \t\t}\n/******/ \t};\n/******/\n/******/ \t// getDefaultExport function for compatibility with non-harmony modules\n/******/ \t__webpack_require__.n = function(module) {\n/******/ \t\tvar getter = module && module.__esModule ?\n/******/ \t\t\tfunction getDefault() { return module['default']; } :\n/******/ \t\t\tfunction getModuleExports() { return module; };\n/******/ \t\t__webpack_require__.d(getter, 'a', getter);\n/******/ \t\treturn getter;\n/******/ \t};\n/******/\n/******/ \t// Object.prototype.hasOwnProperty.call\n/******/ \t__webpack_require__.o = function(object, property) { return Object.prototype.hasOwnProperty.call(object, property); };\n/******/\n/******/ \t// __webpack_public_path__\n/******/ \t__webpack_require__.p = \"\";\n/******/\n/******/ \t// Load entry module and return exports\n/******/ \treturn __webpack_require__(__webpack_require__.s = 0);\n/******/ })\n/************************************************************************/\n/******/ ([\n/* 0 */\n/***/ (function(module, exports, __webpack_require__) {\n\nmodule.exports = __webpack_require__(1);\n\n\n/***/ }),\n/* 1 */\n/***/ (function(module, __webpack_exports__, __webpack_require__) {\n\n\"use strict\";\nObject.defineProperty(__webpack_exports__, \"__esModule\", { value: true });\n\n// EXTERNAL MODULE: external {\"root\":\"React\",\"commonjs2\":\"react\",\"commonjs\":\"react\",\"amd\":\"react\"}\nvar external___root___React___commonjs2___react___commonjs___react___amd___react__ = __webpack_require__(2);\nvar external___root___React___commonjs2___react___commonjs___react___amd___react___default = /*#__PURE__*/__webpack_require__.n(external___root___React___commonjs2___react___commonjs___react___amd___react__);\n\n// CONCATENATED MODULE: ./node_modules/awareness/es/index.js\nvar _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; };\n\nvar nextFrame = function nextFrame() {\n  return new Promise(function (resolve) {\n    window.requestAnimationFrame(resolve);\n  });\n};\n\nfunction stateChangerCatchingError(stateChanger, transformError) {\n  return function (prevState, props) {\n    // Check if stateChanger is a function\n    if ((typeof stateChanger === 'undefined' ? 'undefined' : _typeof(stateChanger)) === _typeof(stateChanger.call)) {\n      try {\n        // Call state changer\n        return stateChanger(prevState, props);\n      }\n      // State changer may throw\n      catch (error) {\n        // Store error in state\n        return transformError(error);\n      }\n    }\n    // Else just an object with changes\n    else {\n        return stateChanger;\n      }\n  };\n}\n\nfunction processStateChanger(changeState, stateChanger, storeError) {\n  if (!stateChanger) {\n    return;\n  }\n\n  // Check if thenable (i.e. a Promise)\n  if (_typeof(stateChanger.then) === _typeof(Object.assign)) {\n    return stateChanger.then(function (stateChanger) {\n      return stateChanger && changeState(stateChanger);\n    }).catch(storeError);\n  }\n  // Check if iterator\n  else if (_typeof(stateChanger.next) === _typeof(Object.assign)) {\n      return processIterator(changeState, stateChanger, storeError);\n    }\n    // Otherwise, change state immediately\n    // Required for things like <textarea> onChange to keep cursor in correct position\n    else {\n        changeState(stateChanger);\n      }\n}\n\nfunction processIterator(changeState, iterator, storeError, previousValue) {\n  return Promise.resolve(processStateChanger(changeState, previousValue, storeError)) // Process the previous changer\n  .then(function () {\n    return nextFrame();\n  }) // Wait for next frame\n  .then(function () {\n    var result = iterator.next(); // Get the next step from the iterator\n    if (result.done) {\n      // No more iterations remaining\n      return processStateChanger(changeState, result.value, storeError); // Process the changer\n    } else {\n      return processIterator(changeState, iterator, storeError, result.value); // Process the iterator’s following steps\n    }\n  });\n}\n\nfunction callHandler(handler, transformError, args, alterState) {\n  if ((typeof transformError === 'undefined' ? 'undefined' : _typeof(transformError)) === _typeof('')) {\n    var errorKey = transformError;\n    transformError = function transformError(error) {\n      var _ref;\n\n      return _ref = {}, _ref[errorKey] = error, _ref;\n    };\n  }\n\n  var storeError = function storeError(error) {\n    alterState(function () {\n      return transformError(error);\n    });\n  };\n  // Call handler function, props first, then rest of args\n  try {\n    var changeState = function changeState(stateChanger) {\n      alterState(stateChangerCatchingError(stateChanger, transformError));\n    };\n    var result = handler.apply(null, args);\n    // Can return multiple state changers, ensure array, and then loop through\n    [].concat(result).forEach(function (stateChanger) {\n      processStateChanger(changeState, stateChanger, storeError);\n    });\n  }\n  // Catch error within handler’s (first) function\n  catch (error) {\n    storeError(error);\n  }\n}\n\nvar defaultTransformErrorForKey = function defaultTransformErrorForKey(key) {\n  return function (error) {\n    var _ref2;\n\n    var stateKey = (key === 'load' ? 'load' : 'handler') + 'Error';\n    return _ref2 = {}, _ref2[stateKey] = error, _ref2;\n  };\n};\n\n// Returns a new stateful component, given the specified state handlers and a pure component to render with\n/* harmony default export */ var es = (function (alterState, handlersIn) {\n  var _ref3 = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {},\n      _ref3$getProps = _ref3.getProps,\n      getProps = _ref3$getProps === undefined ? function () {\n    return {};\n  } : _ref3$getProps,\n      _ref3$transformErrorF = _ref3.transformErrorForKey,\n      transformErrorForKey = _ref3$transformErrorF === undefined ? defaultTransformErrorForKey : _ref3$transformErrorF,\n      adjustArgs = _ref3.adjustArgs;\n\n  var state = Object.assign({\n    loadError: null,\n    handlerError: null\n  }, handlersIn.initial(getProps()));\n\n  // Uses `load` handler, if present, to asynchronously load initial state\n  function loadAsync() {\n    if (handlersIn.load) {\n      for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) {\n        args[_key] = arguments[_key];\n      }\n\n      callHandler(handlersIn.load, transformErrorForKey('load'), args, alterState);\n    }\n  }\n\n  var handlers = Object.keys(handlersIn).reduce(function (out, key) {\n    // Special case for `load` handler to reload fresh\n    if (key === 'load') {\n      out.load = function () {\n        loadAsync(getProps(), null);\n      };\n      return out;\n    }\n\n    out[key] = function () {\n      for (var _len2 = arguments.length, args = Array(_len2), _key2 = 0; _key2 < _len2; _key2++) {\n        args[_key2] = arguments[_key2];\n      }\n\n      if (adjustArgs) {\n        args = adjustArgs(args);\n      }\n\n      callHandler(handlersIn[key], transformErrorForKey(key), [Object.assign({}, getProps(), { handlers: handlers })].concat(args), alterState);\n    };\n    return out;\n  }, {});\n\n  return {\n    state: state,\n    loadAsync: loadAsync,\n    handlers: handlers\n  };\n});\n// CONCATENATED MODULE: ./src/index.js\nvar _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; };\n\nvar _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; }; }();\n\nfunction _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError(\"Cannot call a class as a function\"); } }\n\nfunction _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; }\n\nfunction _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; }\n\n\n\n\n// Returns a new stateful component, given the specified state handlers and a pure component to render with\n/* harmony default export */ var src = __webpack_exports__[\"default\"] = (function (Pure, handlersIn) {\n  var _ref = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {},\n      onChange = _ref.onChange,\n      adjustArgs = _ref.adjustArgs;\n\n  return function (_PureComponent) {\n    _inherits(Organism, _PureComponent);\n\n    function Organism() {\n      var _temp, _this, _ret;\n\n      _classCallCheck(this, Organism);\n\n      for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) {\n        args[_key] = arguments[_key];\n      }\n\n      return _ret = (_temp = (_this = _possibleConstructorReturn(this, _PureComponent.call.apply(_PureComponent, [this].concat(args))), _this), _this.alterState = function (stateChanger) {\n        // Can either be a plain object or a callback to transform the existing state\n        (_this.props.setState || _this.setState).call(_this, stateChanger,\n        // Call onChange once updated with current version of state\n        onChange ? function () {\n          onChange(_this.currentState);\n        } : undefined);\n      }, _this.awareness = es(_this.alterState, handlersIn, {\n        getProps: function getProps() {\n          return _this.props;\n        },\n        adjustArgs: adjustArgs\n      }), _this.state = _this.awareness.state, _temp), _possibleConstructorReturn(_this, _ret);\n    }\n\n    Organism.initialStateForProps = function initialStateForProps(props) {\n      return handlersIn.initial(props);\n    };\n\n    Organism.prototype.componentDidMount = function componentDidMount() {\n      this.awareness.loadAsync(this.props, null, this.currentState);\n    };\n\n    Organism.prototype.componentWillReceiveProps = function componentWillReceiveProps(nextProps) {\n      this.awareness.loadAsync(nextProps, this.props, this.currentState);\n    };\n\n    Organism.prototype.render = function render() {\n      // Render the pure component, passing both props and state, plus handlers bundled together\n      return external___root___React___commonjs2___react___commonjs___react___amd___react___default.a.createElement(Pure, _extends({}, this.props, this.currentState, { handlers: this.awareness.handlers }));\n    };\n\n    _createClass(Organism, [{\n      key: 'currentState',\n      get: function get() {\n        return this.props.getState ? this.props.getState() : this.state;\n      }\n    }]);\n\n    return Organism;\n  }(external___root___React___commonjs2___react___commonjs___react___amd___react__[\"PureComponent\"]);\n});\n\n/***/ }),\n/* 2 */\n/***/ (function(module, exports) {\n\nmodule.exports = __WEBPACK_EXTERNAL_MODULE_2__;\n\n/***/ })\n/******/ ]);\n});\n\n\n// WEBPACK FOOTER //\n// react-organism.min.js"," \t// The module cache\n \tvar installedModules = {};\n\n \t// The require function\n \tfunction __webpack_require__(moduleId) {\n\n \t\t// Check if module is in cache\n \t\tif(installedModules[moduleId]) {\n \t\t\treturn installedModules[moduleId].exports;\n \t\t}\n \t\t// Create a new module (and put it into the cache)\n \t\tvar module = installedModules[moduleId] = {\n \t\t\ti: moduleId,\n \t\t\tl: false,\n \t\t\texports: {}\n \t\t};\n\n \t\t// Execute the module function\n \t\tmodules[moduleId].call(module.exports, module, module.exports, __webpack_require__);\n\n \t\t// Flag the module as loaded\n \t\tmodule.l = true;\n\n \t\t// Return the exports of the module\n \t\treturn module.exports;\n \t}\n\n\n \t// expose the modules object (__webpack_modules__)\n \t__webpack_require__.m = modules;\n\n \t// expose the module cache\n \t__webpack_require__.c = installedModules;\n\n \t// define getter function for harmony exports\n \t__webpack_require__.d = function(exports, name, getter) {\n \t\tif(!__webpack_require__.o(exports, name)) {\n \t\t\tObject.defineProperty(exports, name, {\n \t\t\t\tconfigurable: false,\n \t\t\t\tenumerable: true,\n \t\t\t\tget: getter\n \t\t\t});\n \t\t}\n \t};\n\n \t// getDefaultExport function for compatibility with non-harmony modules\n \t__webpack_require__.n = function(module) {\n \t\tvar getter = module && module.__esModule ?\n \t\t\tfunction getDefault() { return module['default']; } :\n \t\t\tfunction getModuleExports() { return module; };\n \t\t__webpack_require__.d(getter, 'a', getter);\n \t\treturn getter;\n \t};\n\n \t// Object.prototype.hasOwnProperty.call\n \t__webpack_require__.o = function(object, property) { return Object.prototype.hasOwnProperty.call(object, property); };\n\n \t// __webpack_public_path__\n \t__webpack_require__.p = \"\";\n\n \t// Load entry module and return exports\n \treturn __webpack_require__(__webpack_require__.s = 0);\n\n\n\n// WEBPACK FOOTER //\n// webpack/bootstrap 94a9b99b80898cf373c3","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; };\n\nvar nextFrame = function nextFrame() {\n  return new Promise(function (resolve) {\n    window.requestAnimationFrame(resolve);\n  });\n};\n\nfunction stateChangerCatchingError(stateChanger, transformError) {\n  return function (prevState, props) {\n    // Check if stateChanger is a function\n    if ((typeof stateChanger === 'undefined' ? 'undefined' : _typeof(stateChanger)) === _typeof(stateChanger.call)) {\n      try {\n        // Call state changer\n        return stateChanger(prevState, props);\n      }\n      // State changer may throw\n      catch (error) {\n        // Store error in state\n        return transformError(error);\n      }\n    }\n    // Else just an object with changes\n    else {\n        return stateChanger;\n      }\n  };\n}\n\nfunction processStateChanger(changeState, stateChanger, storeError) {\n  if (!stateChanger) {\n    return;\n  }\n\n  // Check if thenable (i.e. a Promise)\n  if (_typeof(stateChanger.then) === _typeof(Object.assign)) {\n    return stateChanger.then(function (stateChanger) {\n      return stateChanger && changeState(stateChanger);\n    }).catch(storeError);\n  }\n  // Check if iterator\n  else if (_typeof(stateChanger.next) === _typeof(Object.assign)) {\n      return processIterator(changeState, stateChanger, storeError);\n    }\n    // Otherwise, change state immediately\n    // Required for things like <textarea> onChange to keep cursor in correct position\n    else {\n        changeState(stateChanger);\n      }\n}\n\nfunction processIterator(changeState, iterator, storeError, previousValue) {\n  return Promise.resolve(processStateChanger(changeState, previousValue, storeError)) // Process the previous changer\n  .then(function () {\n    return nextFrame();\n  }) // Wait for next frame\n  .then(function () {\n    var result = iterator.next(); // Get the next step from the iterator\n    if (result.done) {\n      // No more iterations remaining\n      return processStateChanger(changeState, result.value, storeError); // Process the changer\n    } else {\n      return processIterator(changeState, iterator, storeError, result.value); // Process the iterator’s following steps\n    }\n  });\n}\n\nexport function callHandler(handler, transformError, args, alterState) {\n  if ((typeof transformError === 'undefined' ? 'undefined' : _typeof(transformError)) === _typeof('')) {\n    var errorKey = transformError;\n    transformError = function transformError(error) {\n      var _ref;\n\n      return _ref = {}, _ref[errorKey] = error, _ref;\n    };\n  }\n\n  var storeError = function storeError(error) {\n    alterState(function () {\n      return transformError(error);\n    });\n  };\n  // Call handler function, props first, then rest of args\n  try {\n    var changeState = function changeState(stateChanger) {\n      alterState(stateChangerCatchingError(stateChanger, transformError));\n    };\n    var result = handler.apply(null, args);\n    // Can return multiple state changers, ensure array, and then loop through\n    [].concat(result).forEach(function (stateChanger) {\n      processStateChanger(changeState, stateChanger, storeError);\n    });\n  }\n  // Catch error within handler’s (first) function\n  catch (error) {\n    storeError(error);\n  }\n}\n\nvar defaultTransformErrorForKey = function defaultTransformErrorForKey(key) {\n  return function (error) {\n    var _ref2;\n\n    var stateKey = (key === 'load' ? 'load' : 'handler') + 'Error';\n    return _ref2 = {}, _ref2[stateKey] = error, _ref2;\n  };\n};\n\n// Returns a new stateful component, given the specified state handlers and a pure component to render with\nexport default (function (alterState, handlersIn) {\n  var _ref3 = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {},\n      _ref3$getProps = _ref3.getProps,\n      getProps = _ref3$getProps === undefined ? function () {\n    return {};\n  } : _ref3$getProps,\n      _ref3$transformErrorF = _ref3.transformErrorForKey,\n      transformErrorForKey = _ref3$transformErrorF === undefined ? defaultTransformErrorForKey : _ref3$transformErrorF,\n      adjustArgs = _ref3.adjustArgs;\n\n  var state = Object.assign({\n    loadError: null,\n    handlerError: null\n  }, handlersIn.initial(getProps()));\n\n  // Uses `load` handler, if present, to asynchronously load initial state\n  function loadAsync() {\n    if (handlersIn.load) {\n      for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) {\n        args[_key] = arguments[_key];\n      }\n\n      callHandler(handlersIn.load, transformErrorForKey('load'), args, alterState);\n    }\n  }\n\n  var handlers = Object.keys(handlersIn).reduce(function (out, key) {\n    // Special case for `load` handler to reload fresh\n    if (key === 'load') {\n      out.load = function () {\n        loadAsync(getProps(), null);\n      };\n      return out;\n    }\n\n    out[key] = function () {\n      for (var _len2 = arguments.length, args = Array(_len2), _key2 = 0; _key2 < _len2; _key2++) {\n        args[_key2] = arguments[_key2];\n      }\n\n      if (adjustArgs) {\n        args = adjustArgs(args);\n      }\n\n      callHandler(handlersIn[key], transformErrorForKey(key), [Object.assign({}, getProps(), { handlers: handlers })].concat(args), alterState);\n    };\n    return out;\n  }, {});\n\n  return {\n    state: state,\n    loadAsync: loadAsync,\n    handlers: handlers\n  };\n});\n\n\n//////////////////\n// WEBPACK FOOTER\n// ./node_modules/awareness/es/index.js\n// module id = null\n// module chunks = ","import React, { PureComponent } from 'react'\nimport makeAwareness from 'awareness'\n\n// Returns a new stateful component, given the specified state handlers and a pure component to render with\nexport default (\n  Pure,\n  handlersIn,\n  {\n    onChange,\n    adjustArgs\n  } = {}\n) => class Organism extends PureComponent {\n  static initialStateForProps(props) {\n    return handlersIn.initial(props)\n  }\n\n  get currentState() {\n    return this.props.getState ? this.props.getState() : this.state\n  }\n\n  alterState = (stateChanger) => {\n    // Can either be a plain object or a callback to transform the existing state\n    (this.props.setState || this.setState).call(\n      this,\n      stateChanger,\n      // Call onChange once updated with current version of state\n      onChange ? () => { onChange(this.currentState) } : undefined\n    )\n  }\n\n  awareness = makeAwareness(this.alterState, handlersIn, {\n    getProps: () => this.props,\n    adjustArgs\n  })\n\n  state = this.awareness.state\n\n  componentDidMount() {\n    this.awareness.loadAsync(this.props, null, this.currentState)\n  }\n\n  componentWillReceiveProps(nextProps) {\n    this.awareness.loadAsync(nextProps, this.props, this.currentState)\n  }\n\n  render() {\n    // Render the pure component, passing both props and state, plus handlers bundled together\n    return <Pure { ...this.props } { ...this.currentState } handlers={ this.awareness.handlers } />\n  }\n}\n\n\n\n// WEBPACK FOOTER //\n// ./src/index.js","module.exports = __WEBPACK_EXTERNAL_MODULE_2__;\n\n\n//////////////////\n// WEBPACK FOOTER\n// external {\"root\":\"React\",\"commonjs2\":\"react\",\"commonjs\":\"react\",\"amd\":\"react\"}\n// module id = 2\n// module chunks = 0"],"sourceRoot":""}


--------------------------------------------------------------------------------