Sources

Sources wrap browser state within a reactive stream that’s then mapped to a state internally.

x-closest gives you access to the element closest to display top within the selected elements:

x-scroll gives you access to the scrolling state of the viewport:

x-intersect triggers when the element is visible at the viewport. See IntersectionObserver documentation for available options.

In addition to the standard options, there’s an once flag that when set causes the state to be set only once. The behavior is useful for implementing patterns such as lazy loading.

Editor

The parent to target can also be the element itself:

Editor

x-interval wraps setInterval and exposes its delay parameters. When triggered, it sets state.

It’s possible to use the standard fetch() API on top of x-promise to handle data requests:

In case there’s an error, then the Error object is emitted to error state: