@gluonjs/core / src / createMutationObserver

Function: createMutationObserver()

createMutationObserver<ElementType>(options, onEntries?): PlatformObserverHandle<ElementType, MutationRecord>

Creates a reactive, callback-ref-owned MutationObserver.

Type Parameters

ElementType

ElementType extends Element = Element

Parameters

options

MutationObserverInit

onEntries?

(entries) => void

Returns

PlatformObserverHandle<ElementType, MutationRecord>

Example

Observe owned element attribute changes through a callback ref and publish each callback batch as reactive state:

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);