Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/alexeyraspopov/react-coroutine
Make your async components compact and descriptive by leveraging the power of the language features
https://github.com/alexeyraspopov/react-coroutine
async coroutines generators iterators react react-components stateful
Last synced: 3 months ago
JSON representation
Make your async components compact and descriptive by leveraging the power of the language features
- Host: GitHub
- URL: https://github.com/alexeyraspopov/react-coroutine
- Owner: alexeyraspopov
- License: mit
- Created: 2016-09-07T09:40:27.000Z (about 8 years ago)
- Default Branch: master
- Last Pushed: 2020-04-22T21:16:34.000Z (over 4 years ago)
- Last Synced: 2024-07-10T16:46:29.854Z (4 months ago)
- Topics: async, coroutines, generators, iterators, react, react-components, stateful
- Language: JavaScript
- Homepage: https://react-coroutine.js.org/
- Size: 160 KB
- Stars: 263
- Watchers: 5
- Forks: 11
- Open Issues: 3
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- Contributing: CONTRIBUTING.md
- License: LICENSE
- Code of conduct: CODE_OF_CONDUCT.md
Awesome Lists containing this project
README
# React Coroutine
npm install react-coroutine
> **Coroutines** are computer program components that generalize subroutines for nonpreemptive multitasking, by allowing multiple entry points for suspending and resuming execution at certain locations. Coroutines are well-suited for implementing more familiar program components such as cooperative tasks, exceptions, event loop, iterators, infinite lists and pipes.
> — _[Wikipedia](https://en.wikipedia.org/wiki/Coroutine)_
Describe complex async state flows in your React components using only language
features like [generators][1], [async functions][2], and [async generators][3].
No API or new abstractions to learn, only JavaScript code as it intended to be.
## Motivation
React Coroutine attempts to use basic and known language features for the sake
of solving problems that are usually solved with APIs and new abstractions that
require particular knowledge about them or, sometimes, about internal processes.
## Examples
```javascript
import React from 'react';
import Coroutine from 'react-coroutine';
```
```javascript
async function UserListContainer() {
try {
// Wait for async data and render it in the same way as plain components
let users = await Users.retrieve();
return ;
} catch (error) {
// Handle failures in place with just JavaScript tools
return ;
}
}
export default Coroutine.create(UserListContainer);
```
```javascript
async function* PokemonInfoPage({ pokemonId, pokemonName }) {
// Use generators to provide multiple render points of your async component
yield
Loading {pokemonName} info...
;
// Easily import components asynchronously and render them on demand
let { default: PokemonInfo } = await import('./PokemonInfo.react');
let data = await PokemonAPI.retrieve(pokemonId);
return ;
}
export default Coroutine.create(PokemonInfoPage);
```
```javascript
function* MovieInfoLoader({ movieId }) {
// Assuming cache.read() return a value from cache or Promise
let movieData = yield movieCache.read(movieId);
return ;
}
export default Coroutine.create(MovieInfoLoader);
```
## Documentation
See [details page](https://react-coroutine.js.org/Details.html) for more.
## Installation
React Coroutine project is available as the `react-coroutine` package on NPM.
Installed package includes precompiled code (ECMAScript 5), ES Modules-friendly
artifact, [LICENSE](./LICENSE), and [the changelog](./CHANGELOG.md).
## Contributing
Current project has adopted a [Code of Conduct](./CODE_OF_CONDUCT.md) which is
expected to be adhered by project participants. Please also visit [the document
website](https://www.contributor-covenant.org/) to learn more.
Please read [the contributing guide](./CONTRIBUTING.md) to learn how to propose
bug fixes and improvements, and how to build and test your changes.
[1]: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/function*
[2]: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/async_function
[3]: https://github.com/tc39/proposal-async-iteration