Component List
Manage a dynamic collection of components, like the rows of a table, without leaking memory.
Overview
hlivekit.ComponentList holds a growing and shrinking set of child components — search results, table rows, chat messages, anything added and removed at runtime. The problem it solves is cleanup: every item you add is required to be an l.Teardowner (what you get back from l.CM), and the list calls Teardown on an item the moment it's removed. Skip the list and manage a plain slice yourself, and it's easy to leave event bindings and mount state behind every time a row disappears.
For lists whose items don't need any cleanup — static rows you never remove, say — there's a lighter-weight hlivekit.ComponentListSimple, which skips the teardown bookkeeping entirely.
API
hlivekit.NewComponentList(name string, elements ...any) *ComponentList— create a list. (Shortcut:hlivekit.List.)(*ComponentList).AddItem(items ...l.Teardowner)— add one or more items to the list.(*ComponentList).RemoveItems(items ...l.Teardowner)— remove specific items and callTeardownon each.(*ComponentList).RemoveAllItems()— clear the list, tearing down every item.
Use case
A to-do list where each task is its own component with its own edit/delete buttons and event bindings. Tasks come and go as the user adds and deletes them, so each one needs to be an l.CM component (a Teardowner), and ComponentList makes sure deleting a task also cleans up everything that task registered.
Code sample
Adapted from the To Do List example:
taskList := hlivekit.NewComponentList("div")
func addTask(label string) {
// A ComponentMountable satisfies Teardowner, so the list can clean it up later.
task := l.NewComponentMountable("div")
task.Add(
Span(label), " ",
Button("Delete", l.On("click", func(_ context.Context, _ l.Event) {
// Removes the item and calls its Teardown, releasing its
// event bindings and mount state.
taskList.RemoveItems(task)
})),
)
taskList.AddItem(task)
}