ResizeObserver Mechanics & Triggers

// TypeScript — shared observer with per-element callback dispatch
interface ResizeCallback {
  (entry: ResizeObserverEntry): void;
}

const registry = new WeakMap<Element, ResizeCallback>();

const sharedObserver = new ResizeObserver(
  (entries: ResizeObserverEntry[]) => {
    for (const entry of entries) {
      const cb = registry.get(entry.target);
      if (cb) cb(entry);
    }
  }
);

// Plain JS equivalent: remove type annotations; WeakMap usage is identical

function observeElement(
  el: Element,
  callback: ResizeCallback,
  box: ResizeObserverBoxOptions = "border-box"
): void {
  registry.set(el, callback);
  sharedObserver.observe(el, { box });
  // The first callback fires asynchronously with the element's current dimensions —
  // use this baseline instead of getBoundingClientRect() to avoid forced reflow.
}

function handleResize(entry: ResizeObserverEntry): void {
  // Prefer the new array-based properties
  const [size] = entry.borderBoxSize;
  const width = size?.inlineSize ?? entry.contentRect.width;
  const height = size?.blockSize ?? entry.contentRect.height;

  // SAFE: reading layout properties inside the callback does not cause reflow
  console.log(`${entry.target.id}: ${width}px × ${height}px`);

  // UNSAFE without rAF: writing back to layout properties here
  // can trigger the loop-limit error — see Edge Cases section below
}

function handleResizeWithWrite(entry: ResizeObserverEntry): void {
  const [size] = entry.borderBoxSize;
  const inlineSize = size?.inlineSize ?? entry.contentRect.width;

  // Schedule the DOM write to the next frame
  requestAnimationFrame(() => {
    const canvas = document.getElementById("chart-canvas") as HTMLCanvasElement;
    if (canvas) {
      canvas.width = Math.round(inlineSize * devicePixelRatio);
      canvas.style.width = `${inlineSize}px`;
    }
  });
}

function unobserveElement(el: Element): void {
  sharedObserver.unobserve(el);
  registry.delete(el);
}

// Call when the entire feature is torn down (route change, app unmount)
function teardown(): void {
  sharedObserver.disconnect();
  // WeakMap keys are garbage-collected automatically — no manual clear needed
}

const physicalWidth =
  entry.devicePixelContentBoxSize?.[0]?.inlineSize ??
  Math.round(entry.contentRect.width * devicePixelRatio);

import { useEffect, useRef, useCallback } from "react";

interface UseBorderBoxSizeOptions {
  box?: ResizeObserverBoxOptions;
  onResize: (width: number, height: number) => void;
}

export function useBorderBoxSize<T extends Element>(
  { box = "border-box", onResize }: UseBorderBoxSizeOptions
): React.RefObject<T> {
  const ref = useRef<T>(null);
  // Stable reference to avoid re-registering on every render
  const onResizeRef = useRef(onResize);
  onResizeRef.current = onResize;

  useEffect(() => {
    const el = ref.current;
    if (!el) return;

    const observer = new ResizeObserver((entries) => {
      const entry = entries[0];
      if (!entry) return;
      const [size] = entry.borderBoxSize;
      requestAnimationFrame(() => {
        onResizeRef.current(
          size?.inlineSize ?? entry.contentRect.width,
          size?.blockSize ?? entry.contentRect.height
        );
      });
    });

    observer.observe(el, { box });
    return () => observer.disconnect();
    // 'box' is intentionally in the dep array — changing box model recreates the observer
  }, [box]);

  return ref;
}

// Usage
// const containerRef = useBorderBoxSize<HTMLDivElement>({
//   onResize: (w, h) => setDimensions({ w, h }),
// });
// <div ref={containerRef} />

import { ref, onMounted, onUnmounted, type Ref } from "vue";

export function useBorderBoxSize(
  box: ResizeObserverBoxOptions = "border-box"
): {
  targetRef: Ref<HTMLElement | null>;
  width: Ref<number>;
  height: Ref<number>;
} {
  const targetRef = ref<HTMLElement | null>(null);
  const width = ref(0);
  const height = ref(0);
  let observer: ResizeObserver | null = null;

  onMounted(() => {
    if (!targetRef.value) return;
    observer = new ResizeObserver((entries) => {
      const entry = entries[0];
      if (!entry) return;
      const [size] = entry.borderBoxSize;
      requestAnimationFrame(() => {
        width.value = size?.inlineSize ?? entry.contentRect.width;
        height.value = size?.blockSize ?? entry.contentRect.height;
      });
    });
    observer.observe(targetRef.value, { box });
  });

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

  return { targetRef, width, height };
}

// Usage in <script setup>:
// const { targetRef, width, height } = useBorderBoxSize();
// <div ref="targetRef">px wide</div>

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

@Directive({ selector: "[appResizeObserver]", standalone: true })
export class ResizeObserverDirective implements OnInit, OnDestroy {
  @Input() box: ResizeObserverBoxOptions = "border-box";
  @Output() resized = new EventEmitter<{ width: number; height: number }>();

  private observer: ResizeObserver | null = null;

  constructor(private el: ElementRef<HTMLElement>) {}

  ngOnInit(): void {
    this.observer = new ResizeObserver((entries) => {
      const entry = entries[0];
      if (!entry) return;
      const [size] = entry.borderBoxSize;
      requestAnimationFrame(() => {
        this.resized.emit({
          width: size?.inlineSize ?? entry.contentRect.width,
          height: size?.blockSize ?? entry.contentRect.height,
        });
      });
    });
    this.observer.observe(this.el.nativeElement, { box: this.box });
  }

  ngOnDestroy(): void {
    this.observer?.disconnect();
    this.observer = null;
  }
}

// Usage: <div appResizeObserver (resized)="onResize($event)"></div>

// Reproduction: this intentionally triggers the loop-limit error
const box = document.createElement("div");
document.body.appendChild(box);
const ro = new ResizeObserver((entries) => {
  // Synchronous DOM write in the same frame — causes the error
  box.style.width = entries[0].contentRect.width + 1 + "px";
});
ro.observe(box);
// Fix: wrap the style mutation in requestAnimationFrame(() => { ... })