Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/burntcaramel/awareness
Bring components to life with loaded data, animation, and multi-step asynchronous actions
https://github.com/burntcaramel/awareness
actions async es6 generators javascript
Last synced: 26 days ago
JSON representation
Bring components to life with loaded data, animation, and multi-step asynchronous actions
- Host: GitHub
- URL: https://github.com/burntcaramel/awareness
- Owner: BurntCaramel
- Created: 2017-11-08T14:03:36.000Z (over 7 years ago)
- Default Branch: master
- Last Pushed: 2017-12-24T01:39:04.000Z (about 7 years ago)
- Last Synced: 2024-11-19T12:10:11.300Z (3 months ago)
- Topics: actions, async, es6, generators, javascript
- Language: JavaScript
- Homepage: https://awareness.collected.design/
- Size: 11.7 KB
- Stars: 1
- Watchers: 2
- Forks: 0
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- Contributing: CONTRIBUTING.md
Awesome Lists containing this project
README
# awareness
[![Travis][build-badge]][build]
[![npm package][npm-badge]][npm]
[![Coveralls][coveralls-badge]][coveralls]
## Overview
- Easily create rich actions
- Use generator functions for animation
- Use async functions
- Transform existing state just like React’s functional `setState((prevState) => newState)`
## Libraries
- [React library](https://github.com/RoyalIcing/react-organism)
- [Preact library](https://github.com/RoyalIcing/preact-organism)
- [Redux library](https://github.com/RoyalIcing/redux-organism)
## Handler types
### Function returning new state
```js
const changeCarrots = () => ({
carrots: 25
})
```
### Function returning function that transforms old state to new state
```js
const addCarrots = () => ({ carrots }) => ({
carrots: carrots + 10
})
```
### Async function returning new state
```js
const changeCarrotsInFuture = async () => {
const res = await fetch('/api/carrots')
const data = res.json()
return { carrots: data.carrots }
}
```
Or with `Promise`:
```js
const changeCarrotsInFuture = () => {
return fetch('/api/carrots')
.then(res => res.json())
.then(data => ({ carrots: data.carrots }))
})
}
```
### Generator function yielding new state
```js
// Will update state on each frame: 0, 1, 2, 3, 4, 5
function * animateCarrotsZeroToFive() {
yield { carrots: 0 }
yield { carrots: 1 }
yield { carrots: 2 }
yield { carrots: 3 }
yield { carrots: 4 }
yield { carrots: 5 }
}
```
### Generator function yielding function that transforms old state to new state
```js
// Will update state for 10 frames: carrots+1, carrots+2, … carrots+9, carrots+10
function * animateCarrotsByTen() {
let total = 10
while (total > 0) {
yield ({ carrots }) => { carrots: carrots + 1 }
total -= 1
}
}
```
### Generator function yielding Promise resolving to new state
```js
// Will use result of fetching `url` and store it in state
function * loadURL(url) {
yield { loading: true }
yield fetch(url).then(res => res.json())
yield { loading: false }
}
```
[build-badge]: https://img.shields.io/travis/RoyalIcing/awareness/master.png?style=flat-square
[build]: https://travis-ci.org/RoyalIcing/awareness
[npm-badge]: https://img.shields.io/npm/v/awareness.png?style=flat-square
[npm]: https://www.npmjs.org/package/awareness
[coveralls-badge]: https://img.shields.io/coveralls/RoyalIcing/awareness/master.png?style=flat-square
[coveralls]: https://coveralls.io/github/RoyalIcing/awareness