<?php // model (atoms) $cnt = state(0); $tick = state(0); $winW = state(0); $resp = state(null); $status = state(null); // UI $ui = el('div', [attrs(['class' => 'container p-3'])], [ el('h1', [], [ text(concat('Effects demo -- count=', read($cnt))) ]), el('p', [], [ text(concat('Window width: ', read($winW))) ]), el('p', [], [ text(concat('Tick: ', read($tick))) ]), el('div', [attrs(['class' => 'row gap-2 my-2'])], [ el('button', [ attrs(['class' => 'col-3 btn btn-primary']), on('click', inc($cnt, 1)) ], [ text('Inc') ]), el('button', [ attrs(['class' => 'col-3 btn btn-secondary']), on('click', inc($cnt, 5)) ], [ text('Add 5') ]), ]), el('div', [attrs(['style' => 'height: 1000px;'])], []), el('div', [attrs(['id' => 'lazy', 'class' => 'my-3'])], [ text('Scroll this into view to trigger fireworks onVisible()...'), ]), el('pre', [attrs(['class' => 'mt-3 bg-light p-2'])], [ text(concat('Last HTTP status: ', read($status))), ]), ]); // Effects (as non-visual nodes; place them alongside UI inside a fragment) // 1) On mount, bump the counter once. $fxOnMount = onMount([ inc($cnt, 1, true) ]); // 2) Watch count; when it changes, ping an endpoint (debounced), store result. $fxWatchCount = watch( read($cnt), [ http( // GET /api/ping?c=<cnt> concat('/api/ping?c=', read($cnt)), 'GET', $resp, // to $status, // status null, // headers null, // body 'text', // parse true ) ], immediate: false, debounceMs: 400 ); // 3) Interval: every 1s bump the tick. $fxEvery = every(1000, [ inc($tick, 1, true) ]); // 4) Window resize: update winW using the DOM event's value. $fxWindow = onWindow('resize', [ set($winW, ev('target.innerWidth'), true) ]); // 5) Visible: when #lazy becomes visible, fire a runtime action (demo). $fxVisible = onVisible( [ runtime('Caps.confetti.fireworks', [[ 'durationSec' => 6, 'intervalMs' => 160, 'defaults' => [ 'startVelocity' => 35, 'ticks' => 70, ], ]]) ], threshold: 0.1, rootMargin: '0px 0px -10% 0px', target: selectorTarget('#lazy') ); // Group everything in one fragment: $app = fragment([ $ui, $fxOnMount, $fxWatchCount, $fxEvery, $fxWindow, $fxVisible, ]);