whenDOMSettled

whenDOMSettled(): Promise<void>

The completion boundary for morphing, fetch updates and breakpoint crossings.

Usage

import { whenDOMSettled } from '@studiometa/js-toolkit';

async function replace(el: Element, html: string) {
  el.innerHTML = html;
  await whenDOMSettled();
  // Every eager component in the new markup has mounted.
}

swap() awaits it for you.

What it waits for

• it drains the pending mutation records;
• it follows the mutation chains of eager lifecycle work, so markup a mounted() inserts is covered too;
• it resolves after the eager mounts and the teardown.

An eager lazy component is covered: the import promise joins the lifecycle-work set for the eager trigger only, so an awaited swap() waits for download, registration and mount.

Breakpoint work runs through the background lane, so a crossing's teardown, import and mount work is covered as well.

What it does not wait for

• visibility, interaction, idle or media conditions. A component with data-mount="visible" has not mounted when this resolves, and that is the point: waiting on a viewport would mean never resolving on a page that is not scrolled.
• the promises returned by mounted(). An async mounted() is the component's own business.

Where else it appears

• watchAttributes() records join the same queue, so a namespaced declaration is covered the way a mount is.
• A useMutation() subscriber that needs the framework's order rather than the platform's awaits this in its callback.