Function createObserver

src/observe.ts:60–109

(options: IntersectionObserverInit)

}

function createObserver(options: IntersectionObserverInit) {
  // Create a unique ID for this observer instance, based on the root, root margin and threshold.
  const id = optionsToId(options);
  let instance = observerMap.get(id);

  if (!instance) {
    // Create a map of elements this observer is going to observe. Each element has a list of callbacks that should be triggered, once it comes into view.
    const elements = new Map<Element, Array<ObserverInstanceCallback>>();
    let thresholds: number[] | readonly number[];

    const observer = new IntersectionObserver((entries) => {
      entries.forEach((entry) => {
        // While it would be nice if you could just look at isIntersecting to determine if the component is inside the viewport, browsers can't agree on how to use it.
        // -Firefox ignores `threshold` when considering `isIntersecting`, so it will never be false again if `threshold` is > 0
        const inView =
          entry.isIntersecting &&
          thresholds.some((threshold) => entry.intersectionRatio >= threshold);

        // @ts-expect-error support IntersectionObserver v2
        if (options.trackVisibility && typeof entry.isVisible === "undefined") {
          // The browser doesn't support Intersection Observer v2, falling back to v1 behavior.
          // @ts-expect-error
          entry.isVisible = inView;
        }

        // Copy the callbacks array before iterating to prevent issues when callbacks are removed during iteration (e.g., when using triggerOnce)
        [...(elements.get(entry.target) ?? [])].forEach((callback) => {
          callback(inView, entry);
        });
      });
    }, options);

    // Ensure we have a valid thresholds array. If not, use the threshold from the options
    thresholds =
      observer.thresholds ||
      (Array.isArray(options.threshold)
        ? options.threshold
        : [options.threshold || 0]);

    instance = {
      id,
      observer,
      elements,
    };

    observerMap.set(id, instance);
  }

  return instance;
}

/**
 * @param element - DOM Element to observe