lukaszmakuch / todomvc-rosmaro

A Rosmaro implementation of the famous TodoMVC.

Rosmaro • TodoMVC

Rosmaro is a visual automata-based programming framework.

It's all about associating functions with (state machine) graph nodes.

Resources

• Website
• Documentation

Articles

• Decomposing the TodoMVC app with state diagrams

• An overview of the Rosmaro-TodoMVC app codebase

• Testing the TodoMVC app

• A JavaScript framework for functions of state and action

Support

• Twitter

Let us know if you discover anything worth sharing.

Implementation

The whole app is a single ({state, action}) => ({state, result}) function made of a graph drawn in the Rosmaro editor and code utilising the rosmaro-binding-utils bound to it using the Rosmaro CLI tools.

Here's part of the graph visible in the editor:

Here's a piece of code:

const noneCompleted = () => ({ arrow: 'none are completed' });

export default ({ dispatch }) => ({
  handler: makeHandler({
    NO_TODOS_COMPLETED: noneCompleted,
    NO_TODOS: noneCompleted,

    RENDER: () =>
      h(
        'button.clear-completed',
        {
          on: { click: () => dispatch({ type: 'CLEAR_COMPLETED' }) },
        },
        'Clear completed'
      ),
  }),
});

And here's a test:

describe('clear completed', () => {
  it('is not visible when there are no completed todos', () =>
    testFlow([
      addTodo({ value: 'todo A' }),
      addTodo({ value: 'todo B' }),
      addTodo({ value: 'todo C' }),

      clearCompletedInvisible,
    ]));

  it('is visible when there is at least one completed todo', () =>
    testFlow([
      addTodo({ value: 'todo A' }),

      addTodo({ value: 'todo B' }),
      toggleTodo({ value: 'todo B' }),

      addTodo({ value: 'todo C' }),

      clearCompletedVisible,
    ]));

  it('removes completed todos when clicked', () =>
    testFlow([
      addTodo({ value: 'todo A' }),

      addTodo({ value: 'todo B' }),
      toggleTodo({ value: 'todo B' }),

      addTodo({ value: 'todo C' }),

      addTodo({ value: 'todo D' }),
      toggleTodo({ value: 'todo D' }),

      clearCompletedVisible,
      clickClearCompleted,
      clearCompletedInvisible,

      assertTodoActive({ value: 'todo A' }),
      assertTodoNotPresent({ value: 'todo B' }),
      assertTodoActive({ value: 'todo C' }),
      assertTodoNotPresent({ value: 'todo D' }),
    ]));
});

The user flows are tested using the rosmaro-testing-library.

The state of the app lives in a Redux store connected to Redux-Saga.

The UI itself is built using Snabbdom with the snabbdom-signature module for protection and tested with snabbdom-testing-library based on the wonderful dom-testing-library.

Credit

Created by Łukasz Makuch