REFERENCE / CORE API

mount()

Instantiates a component — or takes a node — and appends it to a target. Component functions run once; after mount, only the hole effects stay alive.

Signature

mount(component: (() => Node) | Node, target: Element): Node

Parameters

PARAMETERTYPEDESCRIPTION

component (() => Node) | Node A component function, called once inside an app-lifetime root so onCleanup() is legal anywhere in it — or a ready node.

target Element The element to append to. Nothing in it is touched or replaced.

Returns

The mounted node. Any onMount() callbacks registered during the build run right after the append.

Basic

import { html, mount } from '@amojs.dev/core';

function App() {
  return html`<h1>hello</h1>`;
}

mount(App, document.getElementById('app'));   // a component function: runs once
mount(html`<p>static</p>`, document.body);    // or a node you already have

As an island

On a server-rendered page, mount is how an interactive piece attaches to the static HTML: a container the server rendered (with its data in data-* attributes), and a module that mounts into it. The island builds its own DOM — there is no hydration, nothing to re-attach.

// src/islands/cart.ts — the only script a server-rendered page ships
const host = document.getElementById('cart');
if (host) mount(() => Cart(Number(host.dataset.stock)), host);

Tearing it down

mount itself never unmounts. Wrap the call in root() and keep the dispose function when the app must be removable.

Try it

src/islands/counter.ts

import { signal, html, mount } from '@amojs.dev/core';

const count = signal(0);

const Counter = () =>
  html`<button class="counter" onclick=${() => count.value++}>clicked ${count} times</button>`;

const host = document.getElementById('demo');
if (host) mount(Counter, host);

live preview● running