Language Reference
Application Reference
Application-level features and configuration
Application Reference
Application-level features for building complete Hypen applications.
Routing
Use Router and Route for navigation:
Router {
Route(path: "/") {
HomePage()
}
Route(path: "/about") {
AboutPage()
}
Route(path: "/users/:id") {
UserPage()
}
}Link Component
Link(href: "/about") {
Text("About Us")
}Programmatic Navigation
In your module:
.onAction("navigate", async ({ action, next }) => {
next.router.push("/about");
})HypenApp
Embed a remote Hypen app:
HypenApp("ws://localhost:3000")With options:
HypenApp(
url: "ws://localhost:3000",
autoReconnect: true,
reconnectInterval: 3000
)Control Flow
ForEach
Iterate over collections:
ForEach(items: @state.items) {
Text(@item.name)
}With key for efficient updates:
ForEach(items: @state.items, key: "id") {
ListItem(item: @item)
}When
Pattern matching:
When(value: @state.status) {
Case(match: "loading") {
Spinner()
}
Case(match: "error") {
ErrorMessage()
}
Case(match: "success") {
Content()
}
Else {
Text("Unknown")
}
}If
Boolean conditional:
If(condition: @state.isVisible) {
VisibleContent()
Else {
HiddenContent()
}
}Module System
Module Definition
module ModuleName {
// UI here
}TypeScript Module
import { app } from "@hypen-space/core";
interface State {
// state shape
}
export default app
.defineState<State>({ /* initial state */ })
.onCreated(async (state, context) => { /* setup */ })
.onAction("actionName", async ({ action, state, next, context }) => { /* handle */ })
.onDestroyed((state, context) => { /* cleanup */ });Platform Detection
Handle platform-specific rendering:
When(value: @platform) {
Case(match: "web") {
WebSpecificComponent()
}
Case(match: "android") {
AndroidSpecificComponent()
}
Case(match: "ios") {
IOSSpecificComponent()
}
}