Add IntersectionObserver utilities
What does this MR do and why?
The recommended way to use IntersectionObserver
s is to use the gitlab-ui
GlIntersectionObserver
component.
However, User Interface components render interface elements, and this is essentially unworkable when using normally-inert tools like IntersectionObserver
.
Timeline
MR | Description |
---|---|
!71508 (merged) | Uses GlIntersectionObserver to implement visibility-based progress tracking |
!74948 (merged) |
|
This MR, which adds a programmatic-only utility for IntersectionObserver s |
|
!75068 (closed) | Re-enabling of the visibility-based progress tracking |
Additions
This MR adds a small utility wrapper around IntersectionObserver
which creates observers in a similar way to GlIntersectionObserver
, but without modifying the DOM tree (and thus breaking the application despite being a read-only / reactive set of logic).
What matches
The new utility still:
- memoizes the input so that identical Observers are not duplicated
- emits three events:
Update
(always),Appear
(onisIntersecting
), andDisappear
(on!isIntersecting
).
What doesn't match
- This is plain JS and browser APIs.
- The event names are a little different
- Consumers can continually reuse the same Observer by calling the
.observe
API rather than being required to use a<slot>
to abstract theIntersectionObserver
API.
Why
- Logic-based utilities (i.e. "back-of-the-front-end") do not belong in an interface component library (i.e. "front-of-the-front-end")
- I believe it's unlikely that the wrapping elements that
GlIntersectionObserver
adds to the DOM tree will be removed, and even if they are, it might require a conversion to Vue 3 - There should be a central place to manage
IntersectionObserver
s, even if it's minimal now. - "Data down, Events up" is the web-standard way of writing components.
Screenshots or screen recordings
This is all utility work, with no UI.
How to set up and validate locally
There is no UI to validate locally, but if you're familiar with IntersectionObservers, you can use import { create } from '~/lib/utils/intersection_observers';
to create one and see that it works as advertised.
MR acceptance checklist
This checklist encourages us to confirm any changes have been analyzed to reduce risks in quality, performance, reliability, security, and maintainability.
-
I have evaluated the MR acceptance checklist for this MR.