Multiline Expressions

Demo#

Explanation#

<div
  data-signals="{duration:0, lastRenderTime:Date.now()}"
  data-on-raf="
    const now = Date.now()
    const delta = now - lastRenderTime.value
    duration.value += delta / 1000
    lastRenderTime.value = now
  "
>
  <div data-text="`Demo started ${Math.round(duration.value)} seconds ago`"></div>
</div>

Simple example showing the use of a multiline expression in a data-* attribute expression. While you want to long expressions, they can aid in locality of behavior.

Note: The data-on-raf attribute updating every frame but if you look at the DOM in devtools you’ll see it only updates the text every second. Signals allow for optimized updates as they only update the DOM when the value changes.