mountAll

The API for mountAll(); Ornata’s declarative API for initializing components from the HTML.

Import

import { mountAll } from 'ornata';

const { mountAll } = window.Ornata;

Basic usage

const instances = mountAll({
    Counter,
    Disclosure,
});

Expected HTML

mountAll() looks for elements with a data-ornata attribute:

<section data-ornata="Counter"></section>
<section data-ornata="Disclosure"></section>

The attribute value must match a key in the constructor map you pass to mountAll().

Return value

Calling mountAll() returns an array of mounted instances.

JavaScript

const instances = mountAll({
    Counter,
    Disclosure,
});

TypeScript

const instances = mountAll({
    Counter,
    Disclosure,
});

Behavior notes

• roots are selected with document.querySelectorAll("[data-ornata]")
• each matching constructor is validated with isComponent()
• each matching root is mounted with component.mount(rootElement)
• the data-ornata attribute is removed after mounting

See Mounting Instances for a fuller guide.