flowponent

A small library for Preact 10.x (and React - see the note) for defining workflow-like evolving views via generators.

Here's the canonical counter example (also available at Codesandbox):

import { render } from "preact";
import flowponent from "flowponent";

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

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

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

For a more involved one see here's a Codesandbox demonstrating composition, additional props & cleanups upon unmount:

Installation

$ npm install --save flowponent

A Note on React Support

The use flowponent with React, import from "flowponent/react" instead of "flowponent":

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.

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):

const App = flowponent(function*() {
  try {
    const data = yield (resolve, reject) => (
      <Downloader onSuccess={resolve} onFailure={reject} />
    );
    yield () => <p>Download succeeded: {data}</p>
  } catch (err) {
    yield () => <p>Download failed: {err.message}</p>;
  }
});

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:

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

  for (;;) {
    const promise = yield resolve => (
      <div>
        <div>current value: {count}</div>
        <button onClick={() => resolve(1)}>+1</button>
        <button onClick={() => resolve(-1)}>-1</button>
      </div>
    );
    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

See Also

• The tweet with the initial idea, but still using async generators.
• For a more sophisticated approach check out concur-js from which this library stoleborrowed further ideas 🙂

License

This library is licensed under the MIT license. See LICENSE.