# flowponent

> A small library for [Preact 10.x](https://preactjs.com/) (and [React](https://reactjs.org/) - see ["Usage with React"](#usage-with-react)) for defining workflow-like evolving views via generators.

Latest version **0.2.4** (published 2019-12-19) · MIT license · 0 weekly downloads

> **Deprecated.** This package is deprecated.

## Install

```sh
npm install flowponent
pnpm add flowponent
yarn add flowponent
bun add flowponent
```

## Health

**Score 10/100 (F)** — status: deprecated.

Negative: deprecated.

## Facts

| | |
|---|---|
| Version | 0.2.4 |
| Published | 2019-12-19 |
| First published | 2019-12-13 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | ESM + CommonJS |
| Dependencies | 0 |
| Unpacked size | 37.2 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 131 |
| Author | Joachim Viide |
| Maintainers | jviide |

## Links

- npm: https://www.npmjs.com/package/flowponent
- Repository: https://github.com/jviide/flowponent
- npm.io page: https://npm.io/package/flowponent

## Recent versions

- 0.2.4 (latest) — 2019-12-19
- 0.2.3 — 2019-12-16
- 0.2.2 — 2019-12-15
- 0.2.1 — 2019-12-15
- 0.2.0 — 2019-12-15
- 0.1.1 — 2019-12-14
- 0.1.0 — 2019-12-13
- 0.0.5 — 2019-12-13
- 0.0.4 — 2019-12-13
- 0.0.3 — 2019-12-13
- 0.0.2 — 2019-12-13
- 0.0.1 — 2019-12-13

## README

# flowponent [![npm](https://img.shields.io/npm/v/flowponent.svg)](https://www.npmjs.com/package/flowponent)

A small library for [Preact 10.x](https://preactjs.com/) (and [React](https://reactjs.org/) - see ["Usage with React"](#usage-with-react)) 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 step => (
      <div>
        <div>current value: {count}</div>
        <button onClick={() => step(1)}>+1</button>
        <button onClick={() => step(-1)}>-1</button>
      </div>
    );
  }
});

render(<App />, 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:

[![A Codesandbox sandbox demonstrating flowponent](https://user-images.githubusercontent.com/19776768/70826521-d10e8380-1def-11ea-82fd-0004f1caa6fc.png)](https://codesandbox.io/s/flowponent-in-action-88vb9)

## Installation

```sh
$ npm install --save flowponent
```

## Usage with React

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";

const App = flowponent(function*() {
  let count = 0;

  for (;;) {
    count += yield step => (
      <div>
        <div>current value: {count}</div>
        <button onClick={() => step(1)}>+1</button>
        <button onClick={() => step(-1)}>-1</button>
      </div>
    );
  }
});

render(<App />, document.getElementById("root"));
```

## 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).

---
_Source: https://npm.io/package/flowponent · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._