SlotsLink to heading

LiveComponent supports adding (and removing) slots via an interface that mirrors ViewComponent's slots API.

Adding slotsLink to heading

Slots can be added using the with method when components are re-rendered.

import { live, LiveController } from "@camertron/live-component";

@live("TodoListComponent")
export class TodoListComponent extends LiveController {
  add_item(label: string) {
    this.render((component) => {
      component.with("item", { label })
    });
  }
}

import { live, LiveController } from "@camertron/live-component";

@live("TodoListComponent")
export class TodoListComponent extends LiveController {
  add_item(label: string) {
    this.render((component) => {
      component.with("item", { label })
    });
  }
}

Removing slotsLink to heading

Slots are stored as an array of objects. Removing them can be done by manipulating the array.

import { live, LiveController } from "@camertron/live-component";

@live("TodoListComponent")
export class TodoListComponent extends LiveController {
  remove_first_item() {
    this.render((component) => {
      delete component.slots["item"][0]
    });
  }
}

import { live, LiveController } from "@camertron/live-component";

@live("TodoListComponent")
export class TodoListComponent extends LiveController {
  remove_first_item() {
    this.render((component) => {
      delete component.slots["item"][0]
    });
  }
}

Slots in TypeScriptLink to heading

Slot types can be specified by passing a second type parameter to LiveController.

import { live, LiveController } from "@camertron/live-component";

type TodoListComponentProps = {
  name: string;
}

type TodoListComponentSlots = {
  item: { label: string };
}

@live("TodoListComponent")
export class TodoListComponent extends LiveController<TodoListComponentProps, TodoListComponentSlots> {
  add_item(label: string) {
    this.render((component) => {
      component.with("item", { label })
    });
  }
}

import { live, LiveController } from "@camertron/live-component";

type TodoListComponentProps = {
  name: string;
}

type TodoListComponentSlots = {
  item: { label: string };
}

@live("TodoListComponent")
export class TodoListComponent extends LiveController<TodoListComponentProps, TodoListComponentSlots> {
  add_item(label: string) {
    this.render((component) => {
      component.with("item", { label })
    });
  }
}

Now, attempting to call with with a slot name that's not defined in TodoListComponentSlots or with invalid arguments will result in a TypeScript error.

State tracking

Reflexes

Slots Link to heading

Adding slots Link to heading

Removing slots Link to heading

Slots in TypeScript Link to heading

SlotsLink to heading

Adding slotsLink to heading

Removing slotsLink to heading

Slots in TypeScriptLink to heading