dy / spect

Observable selectors in DOM
https://dy.github.io/spect
MIT License
76 stars 8 forks source link

23.0: API reconsiderations, half-a-year later #247

Closed dy closed 3 years ago

dy commented 3 years ago

1. v → ref

Looking at vue/ref, react/ref etc. - v seems to be very similar to refs, rather than to oldschool observ. Function creating a function is a bit brain-heating (java factories like). Also reference is though as a "pointer", a wrapper over dynamic value, it's not an action (getter/setter).

  $('#clock', el => {
    const date = v(new Date())

    h`<${el} datetime=${ date }>
      ${ v(date, d => d.toLocaleTimeString()) }
    </>`

    let id = setInterval(() => date.value = new Date(), 1000)

    return () => clearInterval(id)
  })

Also, vue ref-like way practically is cleaner: less code, less parentheses, less ambiguity.

2. v → unobservable

v has observable interface, mb a bit too much of overhead practice. It's easier and more natural to see map as - create new observable, mapped from old one, like Array.from - no need for map.

v(date, d => d.toLocaleTimeString()).

3. v → singlify

Multiple arguments create syntax confusion, although elegant

let sum = v(x, y, (x, y) => x + y)

but it's easy to confuse with v([x,y], ([x,y]) => x + y), and blocks proper init v([])

Having components manually react is simpler and makes more logic to dev:

let sum = v(0)
a.subscribe(v => sum.value = v + b.value)
b.subscribe(v => sum.value = a.value + b)