Skip to main content
mountComponent attaches a Solar component to a DOM container and starts the reactivity loop. It renders the component’s initial vnode tree into the container, wires up any hooks declared inside render, and returns a numeric instance ID you use to refer to that mounted instance. Call unmountComponent with that ID to remove the component from the DOM and run all cleanup callbacks.

​
mountComponent

mountComponent(fn, props, container, index?) → id

​
Parameters

​
fn
ComponentFn
required
A component function returned by defineComponent(). Solar checks the _isComponent flag and throws a ContractError if you pass a plain function. The component must also be registered via registry.register() before mounting — mountComponent throws a ContractError if it isn’t.
​
props
object
required
The initial props to pass to the component. Solar validates these against the component’s schema, applying the same ContractError behaviour as a direct component call.
​
container
HTMLElement
required
The DOM element to render into. Solar appends the component’s root DOM node as a child of this element (or inserts it at index if provided).
​
index
number
The child index within container at which to insert the component’s root node. Defaults to 0. Useful when you mount multiple components into the same container and need to control their order.

​
Return value

​
id
number
A unique numeric instance ID for this mounted component. Store this value — you pass it to unmountComponent() to remove the component later.

​
unmountComponent

unmountComponent(id) → void

​
Parameters

​
id
number
required
The instance ID returned by the corresponding mountComponent() call. If no instance with this ID exists, unmountComponent returns silently without throwing.
unmountComponent removes the component’s root DOM node from its container and runs every cleanup callback registered during the component’s lifetime — including onUnmount lifecycle callbacks, useSubscription detachments, and cancellation of in-flight useResource requests.

​
Examples

import { mountComponent, unmountComponent } from './solar/index.js'
import Button from './components/Button.js'

// Mount — store the returned ID
const instanceId = mountComponent(
  Button,
  {
    label:   'Click me',
    onClick: () => alert('clicked!'),
    variant: 'primary',
  },
  document.getElementById('app')
)

// Later — unmount using the ID
unmountComponent(instanceId)
unmountComponent runs all cleanup callbacks registered during the component’s lifetime — onUnmount lifecycle callbacks, useSubscription detachments, and useResource fetch cancellations — in the order the hooks were declared in render. After cleanup, the component’s root DOM node is removed from the container and the instance is deleted from Solar’s internal registry.