Page Bootstrap

Once a page has more than one component, the next question is usually how to bootstrap everything without scattering manual mount() calls across page code.

That is what createInitializer() is for.

It lets the page’s HTML declare which components should enhance which roots, while JavaScript provides the small registry that connects those names to real component constructors.

Mark up roots in HTML

Add a data-ornata attribute whose value matches the component name you want to initialize.

<section data-ornata="Counter" data-counter>
    <span data-count-value>0</span>
    <button type="button" data-count-button>Increment</button>
</section>

<section data-ornata="Disclosure" data-disclosure>
    <button type="button" data-disclosure-button>Toggle</button>
    <div data-disclosure-panel hidden>Panel content</div>
</section>

Build a component registry

JavaScript

import { Counter } from "./counter";
import { Disclosure } from "./disclosure";

export const components = {
    Counter,
    Disclosure,
};

TypeScript

import { Counter } from "./counter";
import { Disclosure } from "./disclosure";

export const components = {
    Counter,
    Disclosure,
};

Create the initializer

JavaScript

import { createInitializer } from "ornata";
import { components } from "./components";

const initialize = createInitializer(components);

TypeScript

import { createInitializer } from "ornata";
import { components } from "./components";

const initialize = createInitializer(components);

Run it once for the page

JavaScript

const instances = initialize();

TypeScript

const instances = initialize();

You can also inline the pattern when the registry already exists:

JavaScript

import { createInitializer } from "ornata";
import { components } from "./components";

createInitializer(components)();

TypeScript

import { createInitializer } from "ornata";
import { components } from "./components";

createInitializer(components)();

What happens during bootstrap

The initializer:

• finds all [data-ornata] roots
• reads the component name from data-ornata
• validates that the name maps to a real Ornata component constructor
• mounts each root
• removes the data-ornata attribute afterward
• returns the mounted instances

Important detail

The data-ornata value must match a real Ornata component constructor in the initializer map. If it does not, Ornata will report an error and skip that root.

Why this pattern scales

This keeps page bootstrap code small even as the page grows more interactive.

Instead of hand-writing:

• multiple querySelector() calls
• multiple mount() calls
• separate branching for each component

you let the HTML and the registry describe how the page gets enhanced.

A good mental model

Use mount() for direct single-root setup.

Use createInitializer() when the page’s HTML should declare which components get enhanced.