New Age of ui composition

deps.js

export default new Map([
  [TodoItem, TodoItemDefaultDeps],
  [TodoHeader, TodoHeaderDefaultDeps],
  [TodoItemList, TodoItemListDefaultDeps],
  [TodoFooter, TodoFooterDefaultDeps],
  [TodoMain, TodoMainDefaultDeps]
])

TodoItem.js

type TodoItemModel = {
  id: string;
  title: string;
}

export default function TodoItem(
  item: TodoItemModel,
  beginEditing: () => void,
  endEditing: () => void,
  editingItem: TodoItemModel,
  isEditing: boolean,
  setEditingItem: () => void
) {
  return <div>
    {isEditing
      ? <input type="text" value={editingItem.title} onChange={setEditingItem} onEnter={endEditing} />
      : <div onDoubleClick={beginEditing}>{item.id}: {item.title}</div>
    }
  </div>
}

TodoItemDefaultDeps.js

import {actions, model} from '../app'
export const TodoItemDefaultDeps = {
  item: '@fromProps',
  actions.beginEditing,
  actions.endEditing,
  model.todo.editingItem,
  model.todo.isEditing,
  actions.setEditingItem
}

TodoItemList.js

type ITodoItem = Widget<{item: TodoItemModel}>;

export default function TodoItemList(
  items: Array<TodoItemModel>,
  TodoItem: ITodoItem
) {
  return (
    <ul>
      <li>
        {items.map(item =>
          <TodoItem item={item}/>
        )}
      </li>
    </ul>
  )
}

TodoItemListDefaultDeps.js

import TodoItem from './TodoItem'

import {actions, model} from '../app'
export const TodoItemDefaultDeps = {
  items: model.todo.todos,
  TodoItem
}

TodoMain.js

export default function TodoMain(
  TodoHeader: Widget<void>,
  TodoItemList: Widget<void>,
  TodoFooter: Widget<void>
) {
  return (
    <div>
      <TodoHeader/>
      <TodoItemList/>
      <TodoFooter/>
    </div>
  )
}

TodoMainDefaultDep.js

import TodoHeader from './TodoHeader'
import TodoFooter from './TodoFooter'
import TodoItemList from './TodoItemList'

export const TodoItemDefaultDeps = {
  TodoHeader,
  TodoItemList,
  TodoFooter
}