Skip to content

Quickstart

Each flavor exposes the same shape: wire a message hub and dispatcher, build a leaf ComponentVM, then compose child tabs in a CompositeVM.

IMessageHub hub = new MessageHub();
IDispatcher dispatcher = RxDispatcher.Immediate();

var homeTab = ComponentVM<TabModel>.Builder()
    .Name("home-tab")
    .Model(new TabModel("Home"))
    .Services(hub, dispatcher)
    .Build();

var settingsTab = ComponentVM<TabModel>.Builder()
    .Name("settings-tab")
    .Model(new TabModel("Settings"))
    .Services(hub, dispatcher)
    .Build();

var tabs = CompositeVM<ComponentVM<TabModel>>.Builder()
    .Name("tab-bar")
    .Services(hub, dispatcher)
    .Children(() => [homeTab, settingsTab])
    .Build();

tabs.Construct();
tabs.Current = settingsTab;
hub = MessageHub()
dispatcher = RxDispatcher.immediate()

home_tab = (
    ComponentVMOf.builder()
    .name("home-tab")
    .model(TabModel("Home"))
    .services(hub, dispatcher)
    .build()
)

settings_tab = (
    ComponentVMOf.builder()
    .name("settings-tab")
    .model(TabModel("Settings"))
    .services(hub, dispatcher)
    .build()
)

tabs = (
    CompositeVM.builder()
    .name("tab-bar")
    .services(hub, dispatcher)
    .children(lambda: [home_tab, settings_tab])
    .build()
)

tabs.construct()
tabs.current = settings_tab
const hub = new MessageHub();
const dispatcher = RxDispatcher.immediate();

const homeTab = ComponentVMOf.builder<TabModel>()
  .name("home-tab")
  .model({ title: "Home" })
  .services(hub, dispatcher)
  .build();

const settingsTab = ComponentVMOf.builder<TabModel>()
  .name("settings-tab")
  .model({ title: "Settings" })
  .services(hub, dispatcher)
  .build();

const tabs = CompositeVM.builder<ComponentVMOf<TabModel>>()
  .name("tab-bar")
  .services(hub, dispatcher)
  .children(() => [homeTab, settingsTab])
  .build();

tabs.construct();
tabs.current = settingsTab;
let hub = MessageHub()
let dispatcher = ImmediateDispatcher.INSTANCE

let homeTab = try ComponentVMOf<TabModel>.builder()
    .name("home-tab")
    .model(TabModel(title: "Home"))
    .services(hub: hub, dispatcher: dispatcher)
    .build()

let settingsTab = try ComponentVMOf<TabModel>.builder()
    .name("settings-tab")
    .model(TabModel(title: "Settings"))
    .services(hub: hub, dispatcher: dispatcher)
    .build()

let tabs = try CompositeVM<ComponentVMOf<TabModel>>.builder()
    .name("tab-bar")
    .services(hub: hub, dispatcher: dispatcher)
    .children { [homeTab, settingsTab] }
    .build()

try tabs.construct()
tabs.current = settingsTab

What This Shows

  • One spec, four idiomatic surfaces.
  • Builders stay immutable across flavors.
  • Construction and selection semantics stay aligned even as naming changes.