Modules

Modules are the stateful building blocks of Hypen applications. They combine UI templates with TypeScript state management.

Overview

A module consists of:

Template (.hypen file) - The declarative UI
Definition (TypeScript) - State and action handlers

module Counter {
    Column {
        Text("Count: ${state.count}")
        Button { Text("+1") }
            .onClick(@actions.increment)
    }
}

import { app } from "@hypen-space/core";

export default app
  .defineState({ count: 0 })
  .onAction("increment", async ({ state }) => {
    state.count++;
  });

API Reference

defineState

Sets the initial state with TypeScript generics for type safety:

interface MyState {
  items: string[];
  loading: boolean;
}

app.defineState<MyState>({
  items: [],
  loading: false
})

onCreated

Lifecycle hook called when the module mounts:

.onCreated(async (state, context) => {
  const data = await fetchData();
  state.items = data;
})

onDestroyed

Lifecycle hook called when the module unmounts:

.onDestroyed((state, context) => {
  clearInterval(state.timerId);
})

onAction

Handler for UI actions:

.onAction("actionName", async ({ action, state, next, context }) => {
  // action.payload contains event data
  // state is the current state (auto-synced via Proxy)
  // next.router for navigation
  // context for cross-module communication
})

State Management

State is tracked via Proxy - mutations sync automatically:

.onAction("addItem", async ({ action, state }) => {
  state.items.push(action.payload.item);
  // UI updates automatically
})

Best Practices

Keep state minimal - Only store what the UI needs
Use TypeScript interfaces - Define state shape for type safety
Handle async properly - Show loading states
Name actions descriptively - saveDocument not handleClick

See State & Modules Guide for detailed documentation.

Modules

On this page