mount

Renders VNodes to the DOM with reactive updates and lifecycle management.

API

function mount(
  vNode: VNode | (() => VNode), 
  rootSelector?: string
): void

• vNode: A VNode object or a “component” function that returns one.
• rootSelector: A CSS selector for the container element where the app will be mounted. Defaults to "#app".

TypeScript

Components are functions that return a VNode. Props can be typed to ensure correctness.

import { type VNode } from '@hellajs/dom';

interface MyComponentProps {
  message: string;
}

// A component is just a function that returns a VNode
const MyComponent = (props: MyComponentProps): VNode => {
  return <div>{props.message}</div>;
};

mount(() => <MyComponent message="Hello, TypeScript!" />);

Basic Usage

Typically, you’ll pass a component function to mount. HellaJS will call this function to get the VNode tree and render it.

import { signal } from '@hellajs/core';
import { mount } from '@hellajs/dom';

// A simple component function
const Counter = () => {
  const count = signal(0);
  
  return (
    <div>
      <span>Count: {count()}</span>
      <button onClick={() => count(count() + 1)}>
        Increment
      </button>
    </div>
  );
};

// Mount the component into the element with id="app"
mount(Counter, '#app');

Key Concepts

Reactive Context

mount establishes the reactive root where signals automatically update the DOM when values change.

const count = signal(0);
const App = () => <div>Count: {count}</div>;
mount(App, '#app'); // DOM updates automatically when count changes

Component Functions

Components are plain functions that return VNodes - no classes or special syntax required.

const Greeting = (props) => <h1>Hello, {props.name}!</h1>;
const App = () => <Greeting name="World" />;
mount(App);

Lifecycle Hooks

Direct lifecycle management through onUpdate and onDestroy props on elements.

const App = () => (
  <div 
    onUpdate={() => console.log('Element updated')}
    onDestroy={() => console.log('Element destroyed')}
  >
    Content
  </div>
);

Event Handling

Standard event handling using on prefixes (onClick, onInput, etc.) passed as props.

const App = () => (
  <button onClick={() => console.log('clicked')}>
    Click me
  </button>
);

Fragment Support

Multiple top-level elements can be rendered without wrapper divs using fragments (<>...</>).

const App = () => (
  <>
    <header>Header</header>
    <main>Main content</main>
    <footer>Footer</footer>
  </>
);

Important Considerations

Single Mount Point

Each mount() call creates an independent reactive tree - avoid multiple mounts on the same element.

// ❌ Multiple mounts on same element
mount(App1, '#app');
mount(App2, '#app');
// ✅ Combine components
mount(() => <><App1 /><App2 /></>, '#app');

Memory Management

Always use onDestroy to clean up timers, intervals, and event listeners.

// ✅ Clean up resources
<div onDestroy={() => clearInterval(timerId)}>
  Content
</div>

Root Element Replacement

The root element is replaced entirely - ensure your CSS accounts for this.

// ✅ #app element itself is replaced
mount(App, '#app');