Instances and Mounting

Ornata supports both declarative page bootstrap and direct imperative control.

That balance is useful in HTML-first environments where some components are declared in markup and others are managed by surrounding integration code.

Mounting a component

You can mount a component with either an element or a selector.

JavaScript

const instanceA = Counter.mount(document.querySelector("[data-counter]"));
const instanceB = Counter.mount("[data-counter]");

TypeScript

const instanceA = Counter.mount(document.querySelector("[data-counter]"));
const instanceB = Counter.mount("[data-counter]");

You can also pass initialState at mount time.

Getting an existing instance

Use getInstance() when you expect the instance to exist and want absence to throw.

JavaScript

const instance = Counter.getInstance("[data-counter]");

TypeScript

const instance = Counter.getInstance("[data-counter]");

Use findInstance() when absence is a normal branch.

JavaScript

const maybeInstance = Counter.findInstance("[data-counter]");

TypeScript

const maybeInstance = Counter.findInstance("[data-counter]");

Unmounting and disposal

You can unmount from the constructor:

JavaScript

Counter.unmount("[data-counter]");

TypeScript

Counter.unmount("[data-counter]");

Or dispose from the instance:

JavaScript

const instance = Counter.mount("[data-counter]");
instance.dispose();

TypeScript

const instance = Counter.mount("[data-counter]");
instance.dispose();

Root lookup safeguards

When you pass a selector, Ornata resolves the root for you.

If the selector does not match an element, Ornata throws.

If the input is not a valid element or selector, Ornata also throws.

That makes the mounting API stricter and easier to trust.

A good mental model

• mount() creates an instance
• getInstance() retrieves an existing one and throws if missing
• findInstance() retrieves an existing one or returns null
• unmount() removes an instance by root
• dispose() removes the current instance directly