getMountedInstances

getMountedInstances<T extends Base = Base>(name: string, root?: ParentNode): T[]
getMountedInstances<T extends Base = Base>(el: Element): T[]

The live instances of a component name, in DOM order — or the live ones on one element, in mount order.

Usage

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

// This is the safe list to call a method on.
getMountedInstances('Dialog').forEach((dialog) => dialog.$unmount());

This is the safe list to call a method on: every instance in it has run mounted() and has not yet run unmounted(). Prefer it over getInstances() whenever the result is going to be used rather than counted or inspected.

The two overloads

(name: string, root?: ParentNode): T[]
(el: Element): T[]

• The name form searches the descendants of root, which defaults to the document. root is a ParentNode and the call is querySelectorAll, so it never matches root itself.
• The element form reads the element's instance map directly and never consults the DOM, so it answers for a detached element as readily as for a connected one. The name form cannot: document.querySelectorAll() does not see a detached element. Pass the detached root as root when a name lookup has to reach inside it.

How the narrowing works

selectorFor(name) over-matches on purpose — it lists the responsive spellings of data-component too — and the instance-map read is what removes an inactive declaration, because a breakpoint-withdrawn component is destroyed and deleted from the map.

A matching element with no instance is skipped, and that is the whole narrowing. There is no mount filter, because it never did that work.

There is no getMountedInstance

The singular getInstance() returns one object, so a caller who needs the live one reads .$isMounted on it. A second export would only hide that check behind an undefined that means two things — no element, no instance, or an instance that is not mounted.