mount

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

API

function mount(
  hellaNode: HellaNode | (() => HellaNode), 
  rootSelector?: string
): void

• hellaNode: A JSX element (HellaNode)) object or a function that returns one.
• rootSelector: A CSS selector for the container element where the app will be mounted. Defaults to "#app".

Basic Usage

Typically, you’ll pass a component function to mount. HellaJS will call this function to get the HellaNode 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');

// Defaults to #app if no selector is provided
mount(Counter);

Key Concepts

Reactive Context

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

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

const count = signal(0);
mount(<div>Count: {count}</div>, '#app');

Component Functions

Components are plain functions that return HellaNodes, no classes or special syntax required.

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

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

Important Considerations

Single Mount Point

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

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

// ❌ Multiple mounts on same element
mount(App1, '#app');
mount(App2, '#app');

Lifecycle Hooks

Elements support lifecycle hooks for executing code at specific points in their lifecycle.

Mount Lifecycle

onBeforeMount - Called before the element is created, useful for initialization logic.

onMount - Called after the element is mounted to the DOM (via requestAnimationFrame).

const App = () => {
  let elementRef = null;

  return (
    <div
      onBeforeMount={() => console.log('About to create element')}
      onMount={() => {
        console.log('Element mounted to DOM');
        // Safe to access DOM here
      }}
    >
      Content
    </div>
  );
};

Update Lifecycle

onBeforeUpdate - Called before reactive properties or content update.

onUpdate - Called after reactive properties or content update.

const App = () => {
  const count = signal(0);

  return (
    <div
      data-count={count}
      onBeforeUpdate={() => console.log('About to update')}
      onUpdate={() => console.log('Element updated')}
    >
      Count: {count}
      <button onClick={() => count(count() + 1)}>Increment</button>
    </div>
  );
};

Destroy Lifecycle

onBeforeDestroy - Called before the element is removed from the DOM.

onDestroy - Called after the element is removed from the DOM and effects are cleaned up.

const App = () => {
  const timerId = setInterval(() => console.log('Tick'), 1000);

  return (
    <div
      onBeforeDestroy={() => console.log('About to be removed')}
      onDestroy={() => {
        clearInterval(timerId);
        console.log('Cleaned up');
      }}
    >
      Content
    </div>
  );
};

Lifecycle Order

Hooks execute in this order:

1. onBeforeMount - before element creation
2. onMount - after element is in DOM
3. onBeforeUpdate / onUpdate - on reactive updates (not during initial render)
4. onBeforeDestroy - before removal
5. onDestroy - after removal and cleanup

Memory Management

HellaJS automatically manages reactive effects and event handlers.

Use effects array for automatic cleanup of reactive logic.

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

const App = () => {
  const count = signal(0);
  const status = signal('idle');

  return (
    <div effects={[
      // Reactive effects with automatic cleanup
      () => console.log(`Count: ${count()}`),
      () => status() === 'loading' && console.log('Loading...')
    ]}>
      <span>Count: {count()}</span>
      <button onClick={() => count(count() + 1)}>Increment</button>
    </div>
  );
};

mount(App, '#app');

Reactive effects and DOM events are automatically cleaned up when elements are removed from the DOM. No manual cleanup is required for standard reactive bindings.