#view Region

Purpose

The #view region is for declaring components. It has its own parser (tape_parse_view) that only accepts component declarations — no bare functions, structs, or other #code constructs.

#view
component App {
    view {
        ui.Column {
            Header { title: "My App"; }
            Content {}
            Footer {}
        }
    }
}

Components declared in #view are merged into the module’s component list alongside any components defined directly in #code.

What #view supports

The same component features as #code:

View tree syntax

Inside view { }, declare a tree of child component instances:

view {
    ParentComponent {
        ChildA { prop: value; }
        ChildB {
            GrandchildC { on_click: handler; }
        }
    }
}

Each node is a component instantiation with prop and event bindings.

Conditionals in views

view {
    if (logged_in) {
        Dashboard {}
    } else {
        LoginScreen {}
    }
}

Lists in views

view {
    for (item in items) {
        ListItem { text: item.name; }
    }
}

Slots

component Layout {
    slot header;
    slot content;

    view {
        ui.Column {
            header;
            content;
        }
    }
}

Cross-region: accessing #code

#view components can reference functions, variables, and constants from #code:

#code
var count: i64 = 0;
fn increment() { count = count + 1; }

#view
component Counter {
    view {
        widgets.Label { text: str.from_i64(count); }
        widgets.Button { label: "+"; on_click: increment; }
    }
}

When to use #view vs #code

Both work for defining components. Use #view to visually separate UI declarations from logic in single-file modules. Use #code when components are tightly coupled with functions and data they use.

Last modified: 2026-05-27 20:22:46 UTC