Component Instance

When you mount a component, Ornata returns a component instance.

That instance becomes the integration point between the component and surrounding page code.

JavaScript

const instance = Counter.mount(root);

TypeScript

const instance = Counter.mount(root);

Instance shape

The public instance currently exposes:

• root
• state
• dispose()
• addStateListener()

root

root is the resolved root element the component was mounted on.

state

state is the public reactive state object.

Updating writable public properties triggers the component update flow.

Properties marked private or readonly in state options are protected from external writes.

When a public state write succeeds, Ornata validates the new value, updates computed values, re-runs render callbacks, calls matching watch callbacks, and notifies state listeners.

dispose()

dispose() unmounts the instance and runs cleanup behavior, including:

• update cleanup
• state listener cleanup
• lifecycle.unmount()

addStateListener()

Use addStateListener() to subscribe to a specific state property.

JavaScript

const cleanup = instance.addStateListener("count", (event) => {
    console.log(event.newValue);
});

TypeScript

const cleanup = instance.addStateListener("count", (event) => {
    console.log(event.newValue);
});

The listener receives:

JavaScript

{
    property,
    newValue,
    oldValue,
    target,
}

TypeScript

{
    property,
    newValue,
    oldValue,
    target,
}

The method returns a cleanup function that removes the listener.

Use this when code outside the component needs to observe public state changes.

For the conceptual difference between this and watch, see State Listeners and Watchers.

Constructor helpers

The component constructor also provides instance-management helpers:

• mount(root, initialState?)
• getInstance(root)
• findInstance(root)
• unmount(root)

Use getInstance() when absence should throw, and findInstance() when absence is an expected branch.

For a fuller walkthrough, read Instances and Mounting.