Meiosis Documentation

Views

In the previous lessons, we set up the Meiosis pattern with a temperature example. In this section, we'll wire this up to three different view libraries:

• Mithril
• Preact
• React

Actions

We had an actions object to update the state. To simplify, let's just have the increment action:

const actions = {
  increment: (cell, amount) =>
    cell.update({ value: (x) => x + amount })
};

This example uses Mergerino, but of course you can also use function patches if you prefer.

The view can call actions.increment to trigger updates.

Cells

Next, remember that in the previous section, we set up a stream of cells:

const createCell = (state) => ({ state, update });
const cells = states.map(createCell);

We can call cells() to get the current cell, or we can use cells.map(cell => ...) to render the view on every update.

View

The view is a function that gets the current cell as a parameter, from which the current state is available as cell.state. In the view, event handlers (onclick or onClick in the examples below) call actions, passing cell and any additional parameters.

Mithril

Let's see how we can wire up Meiosis to Mithril.

First, we can use Mithril Stream as a stream library. For our purposes, it works just like flyd. The only difference is that you call m.stream() instead of flyd.stream(), and m.stream.scan instead of flyd.scan.

Then, we use m.mount and pass the current cell to the view by calling cells():

m.mount(document.getElementById('app'), {
  view: () => app.view(cells())
});

The complete example is below.

With Mithril's auto-redraw system, the view is automatically re-rendered after user interaction. If our application updates the state outside of Mithril's auto-redraw scope (see When Mithril does not redraw), we can re-render the view on state updates simply by using map on our stream of cells and calling m.redraw():

cells.map(() => m.redraw());

Preact

To wire up Meiosis to Preact, we use cells.map to render the view whenever the state changes. We call preact.render to render the view:

const element = document.getElementById('app');
cells.map((cell) => {
  preact.render(app.view(cell), element);
});

You can see the complete example below.

React

Wiring Meiosis to React is essentially the same as with Preact, the only difference is that we use ReactDOM.createRoot and root.render to render the view:

const root = ReactDOM.createRoot(document.getElementById('app'));
cells.map((cell) => {
  root.render(app.view(cell));
});

You can see the complete example below.

Conclusion

In this section, we saw how to wire up Meiosis to a view library. Our base Meiosis pattern is complete!

The remainder of this documentation covers additional functionalities that we can add to Meiosis, starting with Services.