Slots

Named positions where children can be placed.

const phoneSlots = defineSlots({
  // A named region. Declaring a slot does not create a child.
  chrome: slot(),

  screen: slot(),

  // Constrained: only these blueprints may occupy it
  sidebar: slot({ accepts: [NavPanel, SettingsPanel] }),

  // Multi-child
  overlays: slot({ multiple: true }),
});

class Phone extends LayoutActor<typeof phoneSlots> {
  static slots = phoneSlots;
}

The typeof phoneSlots type parameter is what makes child(...) field names and hostInSlot("…") strings checkable.

Options

Populating

A Deck with one multi-child slot. hostInSlot("cards", Card, { label }) places each occupant; this.children("cards") gives the host a typed list to orchestrate — here a staggered enter() and exit(), which run each card’s onEnter/onExit hooks — without reaching into any child’s state. After exit() the slot is empty again.

• child(Child) declares an occupant in the slot matching the field name.
• hostInSlot("screen", Child) places an occupant during compilation.

class Phone extends LayoutActor<typeof phoneSlots> {
  static slots = phoneSlots;

  chrome = child(StatusBar); // field name === slot name

  onSpawn() {
    this.hostInSlot("screen", MailApp); // dynamic
  }
}