mljr-ui · showcase

Effects & Refs

data-effect runs side-effects when signals change. data-ref captures element references. data-init fires once on mount.

datastar ds-effects

Usage

// data-effect: runs whenever accessed signals change
// (like useEffect but reactive, no dependency array)
data-effect="document.title = 'Cart: '+$items+' items'"
data-effect="localStorage.setItem('theme', $theme)"

// data-ref: capture a DOM element reference as a signal
data-ref:canvas     // $canvas now points to this element
// use in another expression:
data-effect="$canvas.getContext('2d').clearRect(0,0,$canvas.width,$canvas.height)"

// data-init: run once when element mounts (not reactive)
data-init="$score = parseInt(localStorage.getItem('score')||'0')"