@johngw/stream
Version:
Reactive programming tools using the WHATWG Streams API.
59 lines • 1.63 kB
JavaScript
/**
* Creates a ReadableStream from DOM Intersections.
*
* @group Sources
* @example
* ```
* const observe = fromDOMIntersections(
* {
* root: document.querySelector("#scrollArea"),
* rootMargin: "0px",
* threshold: 1.0,
* }
* )
*
* observe(document.querySelector("#listItem")).pipeTo(
* write(console.info)
* )
* ```
*
* If the queue is full when receiving DOM intersctions, you
* may notice some events being dropped. To avoid this you
* will need to increase the high water mark.
*
* ```
* const observe = fromDOMIntersections(
* {
* root: document.querySelector("#scrollArea"),
* rootMargin: "0px",
* threshold: 1.0,
* },
* new CountQueuingStrategy({ highWaterMark: 10 })
* )
*
* observe(document.querySelector("#listItem")).pipeTo(
* write(console.info)
* )
* ```
*/
export function fromDOMIntersections(options, queuingStrategy) {
const controllers = new WeakMap();
const observer = new IntersectionObserver((entries) => {
for (const entry of entries) {
const controller = controllers.get(entry.target);
if (controller?.desiredSize)
controller.enqueue(entry);
}
}, options);
return (target, targetQueuingStrategy = queuingStrategy) => new ReadableStream({
start(controller) {
controllers.set(target, controller);
observer.observe(target);
},
cancel() {
observer.unobserve(target);
controllers.delete(target);
},
}, targetQueuingStrategy);
}
//# sourceMappingURL=fromDOMIntersections.js.map