Wizar devlog 07 - Connect Crafter to React (wip)

#react #typescript

This week I was on a critical task for Ravioli MVP. I am still on it, there is a lot of work.
I need to enable the use of React with Ravioli. In short I need to recreate Mobx React.

Crafter, the underlying reactive library of Ravioli is very close to the design of Mobx. So I benefits of all the years of resolved issues that Mobx React has completed and it is a huge benefit.

It is like having a scrum board with right written tickets including acceptance tests.
It removes the mental charge of architecture overthinking and I can focus on implementation.

Here is a test example

    let store

    let todoCompleteRenderings
    const TodoComplete = observer(function TodoItem(props) {
        todoCompleteRenderings++
        return <>{props.todo.completed && ' - x'}</>
    })

    let todoItemRenderings
    const TodoTitle = observer(function TodoItem(props) {
        todoItemRenderings++
        return <li>|{props.todo.title}<TodoComplete todo={props.todo}/></li>
    })

    let todoListRenderings
    const TodoList = observer(
        class TodoList extends React.Component {
            public render() {
                todoListRenderings++
                const todos = store.todos
                return (
                    <div>
                        <span>{todos.length}</span>
                        {todos.map((todo, idx) => <TodoTitle key={idx} todo={todo} />)}
                    </div>
                )
            }
        }
    )

    beforeEach(() => {
        clearContainer()
        todoCompleteRenderings = 0
        todoItemRenderings = 0
        todoListRenderings = 0
        store = observable({
            todos: [
                {
                    title: "a",
                    completed: false
                }
            ]
        })
    })

    test("first rendering", () => {
        const { container } = render(<TodoList />)

        expect(todoListRenderings).toBe(1)
        expect(container.querySelectorAll("li").length).toBe(1)
        expect(container.querySelector("li")).toHaveTextContent("|a")
        expect(todoItemRenderings).toBe(1)
        expect(todoCompleteRenderings).toBe(1)
    })