Rosmaro • TodoMVC

Rosmaro is a visual automata-based programming framework.

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

Resources

Articles

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