Dynamic Visibility Tracking

// Step 1: Feature detection and base config
if (!('IntersectionObserver' in window)) {
  // Graceful fallback: mark all tracked elements as visible
  document.querySelectorAll('[data-observe]').forEach((el) => {
    el.setAttribute('data-visible', 'true');
  });
} else {
  startVisibilityTracking();
}

// JS fallback note: replace the `if` block above identically; no TypeScript-specific syntax.

export interface VisibilityConfig extends IntersectionObserverInit {
  /** Fire callback only on the first intersection, then auto-unobserve. */
  once?: boolean;
  /** Called each time the element crosses any configured threshold. */
  onVisibilityChange?: (entry: IntersectionObserverEntry) => void;
}

export interface VisibilityManager {
  /** Start observing an element. Returns a teardown function. */
  observe: (element: Element, config?: Partial<VisibilityConfig>) => () => void;
  /** Stop all observation and release all references. */
  disconnect: () => void;
  /** Whether the manager is still active (false after disconnect). */
  readonly isActive: boolean;
}

export function createVisibilityManager(
  baseConfig: IntersectionObserverInit = {}
): VisibilityManager {
  // One IntersectionObserver instance per observed element gives independent
  // threshold configs. For identical configs, share an instance instead.
  const observers = new Map<Element, IntersectionObserver>();
  let active = true;

  function observe(
    element: Element,
    config: Partial<VisibilityConfig> = {}
  ): () => void {
    if (!active || !(element instanceof Element)) return () => {};
    if (observers.has(element)) return () => {};  // no duplicate observers

    const merged = { ...baseConfig, ...config };

    const io = new IntersectionObserver((entries) => {
      if (!active) return;
      entries.forEach((entry) => {
        config.onVisibilityChange?.(entry);
        if (config.once && entry.isIntersecting) {
          io.unobserve(entry.target);
          observers.delete(entry.target);
        }
      });
    }, merged);

    observers.set(element, io);
    io.observe(element);

    // Return a per-element teardown closure for precise cleanup
    return () => {
      const obs = observers.get(element);
      if (obs) {
        obs.unobserve(element);
        observers.delete(element);
      }
    };
  }

  function disconnect(): void {
    active = false;
    observers.forEach((io) => io.disconnect());
    observers.clear();
  }

  return {
    observe,
    disconnect,
    get isActive() { return active; },
  };
}

/*
 * Plain JS version — remove `: VisibilityConfig`, `: Element`, `: () => void`,
 * and the `export interface` blocks. Runtime behaviour is identical.
 */

const pendingUpdates = new Map<Element, IntersectionObserverEntry>();
let rafScheduled = false;

function flushUpdates(): void {
  pendingUpdates.forEach((entry, el) => {
    // Safe to write DOM or update store here — runs at frame boundary
    el.setAttribute('data-visible', String(entry.isIntersecting));
    el.setAttribute('data-ratio', entry.intersectionRatio.toFixed(2));
  });
  pendingUpdates.clear();
  rafScheduled = false;
}

const manager = createVisibilityManager({ threshold: [0, 0.5, 1.0] });

manager.observe(myElement, {
  onVisibilityChange: (entry) => {
    pendingUpdates.set(entry.target, entry);
    if (!rafScheduled) {
      rafScheduled = true;
      requestAnimationFrame(flushUpdates);
    }
  },
});

import { useEffect, useRef, useState, RefObject } from 'react';

interface UseVisibilityOptions extends IntersectionObserverInit {
  once?: boolean;
}

export function useVisibilityObserver<T extends Element>(
  options: UseVisibilityOptions = {}
): [RefObject<T>, boolean, number] {
  const ref = useRef<T>(null);
  const [isVisible, setVisible] = useState(false);
  const [ratio, setRatio] = useState(0);

  useEffect(() => {
    const el = ref.current;
    if (!el || !('IntersectionObserver' in window)) return;

    const { once, ...ioOptions } = options;
    const io = new IntersectionObserver(([entry]) => {
      setVisible(entry.isIntersecting);
      setRatio(entry.intersectionRatio);
      if (once && entry.isIntersecting) io.unobserve(el);
    }, ioOptions);

    io.observe(el);
    return () => io.disconnect(); // Cleanup on unmount
  // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [options.threshold, options.rootMargin, options.once]);

  return [ref, isVisible, ratio];
}

// Usage:
// const [ref, visible, ratio] = useVisibilityObserver<HTMLDivElement>({ threshold: 0.5 });
// <div ref={ref} className={visible ? 'in-view' : ''}>{ratio}</div>

import { ref, onMounted, onUnmounted, Ref } from 'vue';

export function useIntersection(
  target: Ref<Element | null>,
  options: IntersectionObserverInit = {}
) {
  const isVisible = ref(false);
  const ratio = ref(0);
  let observer: IntersectionObserver | null = null;

  onMounted(() => {
    if (!target.value || !('IntersectionObserver' in window)) return;
    observer = new IntersectionObserver(([entry]) => {
      isVisible.value = entry.isIntersecting;
      ratio.value = entry.intersectionRatio;
    }, options);
    observer.observe(target.value);
  });

  onUnmounted(() => {
    observer?.disconnect();
    observer = null;
  });

  return { isVisible, ratio };
}

import {
  Directive, ElementRef, EventEmitter, Input,
  OnDestroy, OnInit, Output
} from '@angular/core';

@Directive({ selector: '[appVisible]', standalone: true })
export class VisibleDirective implements OnInit, OnDestroy {
  @Input() threshold = 0.5;
  @Output() visibilityChange = new EventEmitter<boolean>();

  private observer?: IntersectionObserver;

  constructor(private host: ElementRef<Element>) {}

  ngOnInit(): void {
    if (!('IntersectionObserver' in window)) return;
    this.observer = new IntersectionObserver(
      ([entry]) => this.visibilityChange.emit(entry.isIntersecting),
      { threshold: this.threshold }
    );
    this.observer.observe(this.host.nativeElement);
  }

  ngOnDestroy(): void {
    this.observer?.disconnect();
  }
}
// Usage: <div appVisible (visibilityChange)="onVisible($event)">…</div>

// Run in console on the live page
const el = document.querySelector('#your-target');
console.log('In DOM:', el?.isConnected);
const io = new IntersectionObserver((entries) => {
  console.table(entries.map(e => ({
    target: e.target.id,
    isIntersecting: e.isIntersecting,
    ratio: e.intersectionRatio.toFixed(3),
    time: e.time.toFixed(1),
  })));
}, { threshold: [0, 0.5, 1] });
if (el) io.observe(el);
// Scroll to trigger — watch the console