View Model Interfaces

Introduction

View Model Interfaces are a pattern for designing the boundary between view and business logic.

Benefits

Testability
Separation of concerns
Simplified UI

Example

export type TodoItemVM = {
  key: string;
  text$: LiveQuery<string>;
  completed$: LiveQuery<boolean>;
  toggleCompleted: () => void;
  remove: () => void;
};

export type TodoListVM = {
  header: {
    newTodoText$: LiveQuery<string>; 
    updateNewTodoText: (text: string) => void;
    addTodo: () => void;
  };
  itemList: {
    items$: LiveQuery<TodoItemVM[]>; 
  };
  footer: {
    incompleteCount$: LiveQuery<number>; 
    currentFilter$: LiveQuery<"all" | "active" | "completed">; 
    showAll: () => void;
    showActive: () => void;
    showCompleted: () => void;
    clearCompleted: () => void;
  };
};