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)