How does it work?

[fiatjaf_]

I'm puzzled by the magic that seems to be happening here (also, it's not working in my case, so it means I've misunderstood everything).

Reading the source didn't work. I can't wrap my mind around the fact that a function may know beforehand that a variable will be used on its body then automatically call a function on that variable.

[Vesa Karvonen]

The introduction in the documentation repository gives some background on this (note the "Dispelling the Magic" section). Did that help?

[fiatjaf_]

Oh, I read that so many times before understanding!

The problem was that I had forgotten that karet actually wrapped React.createElement and not just user-created components.

Also, the example from the README

const oncePerSecond = Kefir.interval(1000).toProperty(() => {})

const Clock = () =>
  <div>
    The time is {oncePerSecond.map(() => new Date().toString())}.
  </div>

was confusing me, as I don't use JSX normally and I somehow thought of the <div> contents as equal to a single templated string like

h('div', `The time is ${oncePerSecond.map(() => new Date().toString())}.`)

and I was imagining how and where in the code did karet actually inspected these template strings to see if some observable was being used there as a variable.

Everything is clear now, thanks.