Знакомство с effector-dom на примере списка задач

[LestaD]

Я не очень много юзал effector-dom, но при этом заметил приятную особенность.

Можно использовать аналог render-props Реакта. Но при этом можно навешивать обработчики на элемент, внутри которого этот render-props используется.

function Example({ first, second }) {
  h("div", () => {
    h('i', () => {
      spec({ handler: { click: clickHandler } })
      first()
    })
    h('span', { text: "Example" })
    h('b', () => {
      spec({ attr: { class: "second" } })
      second()
    })
  });
}

Объявлено два props first, second. По месту их вызова появится всё, что будет передано в эти коллбеки.

function Usage() {
  Example({
    first() {
      spec({ handler: { click: anotherHandler }})
    },
    second() {
      attachListener()
    }
  })
}

function attachListener() {
  spec({ handler: { click: xtraHandler } })
}

При этом значения от spec смешиваются. Таким образом можно примешивать нужную функицональность, не прокидывая огромный список пропс.

Таким образом можно убрать из material-ui/button многие пропсы под вызов spec(). Код будет чище, API компонента проще