This package has been deprecated

Author message:

Package no longer supported. Contact Support at https://www.npmjs.com/support for more info.

flowponent

A small library for Preact 10.x (and React - see "Usage with React") 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 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 demonstrating composition, additional props & cleanups upon unmount:

Installation

$ npm install --save flowponent

Usage with React

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