Components

Components are first-class language constructs. The component keyword declares a composable unit with props, state, events, and an optional view tree.

Declaration syntax

tape
component Name {
    prop label: string = "";
    prop size: i64 = 48;

    var count: i64 = 0;

    state hovered: bool = false;

    event on_click();

    slot content;

    @dispatch fn refresh();     // a vtable slot of this component's own

    @tape { ui.drawable(); }     // emits the bounds vars and @dispatch fn paint

    fn increment() {
        count = count + 1;
    }

    view {
        widgets.Label { text: label; }
    }
}

Keywords inside components

KeywordPurpose
prop name: Type = default;Immutable input from parent
var name: Type = init;Mutable reactive state
state name: bool = init;Boolean interaction flag (targetable from #style)
event name(params);Typed callback channel
slot name;Named insertion point for child content
@dispatch fn name(params);Vtable slot for polymorphic dispatch
@dispatch(required) fn ...;Required dispatch (must be implemented)
@tape { ... }Compile-time code generation block
view { ... }Declarative visual tree
fire event_name(args);Emit an event to the parent’s handler

state and #style

state fields are bool-only and targetable from #style via :name pseudo-selectors:

tape
component Button {
    prop bg: color = #000000;
    prop hovered_bg: color = #000000;
    prop active_bg: color = #000000;
    state hovered: bool = false;
    state active: bool = false;
}
tape
#style
Button {
    bg: #444444;
    :hovered { bg: #555555; }
    :active { bg: #333333; }
}

:hovered { bg: #555555; } sets the prop hovered_bg: the component declares the state and a prop <state>_<prop> for each look it has, and paints with it while the state is on. The compiler checks that both exist; an unknown one is a compile error (State selectors).

Component constraint type

The *component[...] type constrains a pointer to components implementing specific dispatches:

tape
fn render(widget: *component[@dispatch fn paint(s: *gfx.Surface, x: i64, y: i64, w: i64, h: i64)], s: *gfx.Surface) {
    widget.paint(s, 0, 0, 100, 100);
}

The is operator checks constraints at runtime:

tape
if (widget is *component[@dispatch fn paint(s: *gfx.Surface, x: i64, y: i64, w: i64, h: i64)]) {
    widget.paint(s, x, y, w, h);
}

View tree syntax

View trees contain component instances, control flow, and slot references:

tape
view {
    ui.Column {
        if (show_header) {
            widgets.Label { text: "Header"; }
        }
        for (item in items) {
            ListItem { data: item; on_click: handle_select; }
        }
        content;
    }
}

Props bind with name: expr;. Slots fill with slot name { children };.

For full details on props, events, lifecycle, views, and dispatch, see the Components section.

Last modified: