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)
})
For now the basic reactivity works but I need to rewrite the reaction part of Crafter to get rid of unecessary renders.
Hope to finish soon, can't wait to put a online demo.
Top comments (0)