createInitializer

createInitializer() creates a function that mounts Ornata components from HTML.

It is the API that lets the markup declare which components should enhance the page.

JavaScript

import { createInitializer } from "ornata";

TypeScript

import { createInitializer } from "ornata";

Basic usage

JavaScript

const initialize = createInitializer({
    Counter,
    Disclosure,
});

initialize();

TypeScript

const initialize = createInitializer({
    Counter,
    Disclosure,
});

initialize();

Expected HTML

The initializer 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 createInitializer().

Return value

Calling the returned initializer function returns an array of mounted instances.

JavaScript

const instances = initialize();

TypeScript

const instances = initialize();

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

This makes it a good fit for page-level bootstrap code in HTML-first environments.

See Page Bootstrap for a fuller guide.