Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/jviide/flowponent
A small Preact/React library for defining workflow-like evolving views via generators
https://github.com/jviide/flowponent
generators higher-order-component preact react
Last synced: 3 months ago
JSON representation
A small Preact/React library for defining workflow-like evolving views via generators
- Host: GitHub
- URL: https://github.com/jviide/flowponent
- Owner: jviide
- License: mit
- Archived: true
- Created: 2019-12-13T14:08:16.000Z (almost 5 years ago)
- Default Branch: master
- Last Pushed: 2022-07-20T18:47:51.000Z (over 2 years ago)
- Last Synced: 2024-02-17T08:34:59.221Z (9 months ago)
- Topics: generators, higher-order-component, preact, react
- Language: JavaScript
- Homepage:
- Size: 354 KB
- Stars: 129
- Watchers: 3
- Forks: 1
- Open Issues: 5
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# flowponent [](https://www.npmjs.com/package/flowponent)
A small library for [Preact 10.x](https://preactjs.com/) (and [React](https://reactjs.org/) - see [the note](#a-note-on-react-support)) for defining workflow-like evolving views via generators.
Here's the canonical counter example (also available [at Codesandbox](https://codesandbox.io/s/flowponent-in-action-ebfq2)):
```js
import { render } from "preact";
import flowponent from "flowponent";
const App = flowponent(function*() {
let count = 0;
for (;;) {
count += yield resolve => (
current value: {count}
resolve(1)}>+1
resolve(-1)}>-1
);
}
});
render(, document.getElementById("root"));
```
For a more involved one see [here's a Codesandbox](https://codesandbox.io/s/flowponent-in-action-88vb9) demonstrating composition, additional props & cleanups upon unmount:
[](https://codesandbox.io/s/flowponent-in-action-88vb9)
## Installation
```sh
$ npm install --save flowponent
```
### A Note on React Support
The use flowponent with React, import from `"flowponent/react"` instead of `"flowponent"`:
```js
import React from "react";
import { render } from "react-dom";
import flowponent from "flowponent/react";
```
Otherwise it all works the same way as before. Here's a React example featuring a random selection of very good dogs: [Codesandbox](https://codesandbox.io/s/flowponentreact-in-action-8q16y).
## Error Propagation
If an error is throw inside the yielded functions it can be caught in the flowponent.
The function can also fail after it's result has been rendered by calling its second parameter (`reject`):
```js
const App = flowponent(function*() {
try {
const data = yield (resolve, reject) => (
);
yield () =>
Download succeeded: {data}
} catch (err) {
yield () => Download failed: {err.message}
;
}
});
```
## Async Mode
Async mode is activated by using async generators instead of regular ones. In fact, regular flowponents are actually just a special case of async ones! Here's the first example implemented with async flowponents:
```js
const App = flowponent(async function*() {
let count = 0;
for (;;) {
const promise = yield resolve => (
current value: {count}
resolve(1)}>+1
resolve(-1)}>-1
);
count += await promise;
}
});
```
This allows doing things between the time that the view has been rendered and `resolve` has been called.
Check out a bit more involved downloader widget example: [Codesandbox](https://codesandbox.io/s/flowponent-async-mode-in-action-97wk1)
## See Also
- The [tweet with the initial idea](https://twitter.com/jviide/status/1204492830594473985), but still using async generators.
- For a more sophisticated approach check out [`concur-js`](https://github.com/ajnsit/concur-js) from which this library ~~stole~~borrowed further ideas 🙂
## License
This library is licensed under the MIT license. See [LICENSE](./LICENSE).