@gluonjs/core / src / PlatformObserverHandle

Interface: PlatformObserverHandle<ElementType, Entry>

Type Parameters

ElementType

ElementType extends Element

Entry

Entry

Properties

entries

readonly entries: Readonly<Ref<readonly Entry[]>>

The latest platform callback batch. It is empty before the first callback and after stop().

ref

readonly ref: (element) => void

Callback ref that observes its current element and disconnects when cleared.

Parameters

element

ElementType | undefined

Returns

void

supported

readonly supported: Readonly<Ref<boolean>>

Whether the current target's realm exposes the required observer constructor.

Methods

stop()

stop(): void

Disconnects permanently. Later ref assignments are ignored.

Returns

void

Example

Share the typed reactive entries, support state, callback ref, and permanent stop contract common to platform observers:

import {
  createIntersectionObserver,
  createMutationObserver,
  createResizeObserver,
  html,
  type PlatformObserverHandle,
} from '@gluonjs/core';

const visibility: PlatformObserverHandle<HTMLAnchorElement, IntersectionObserverEntry> =
  createIntersectionObserver({ rootMargin: '240px' }, (entries) => {
    if (entries.some((entry) => entry.isIntersecting)) visibility.stop();
  });
const size = createResizeObserver<HTMLAnchorElement>({ box: 'border-box' });
const changes = createMutationObserver<HTMLAnchorElement>({ attributes: true });

const card = html`<a ...=${{ ref: visibility.ref }} href="/products/orbit-lamp">Orbit Lamp</a>`;
console.log(card, size.entries.value, changes.supported.value);