Tree demo: lists via manageTemplateList

A launch summary built with builtIns.tree from a JSON API response (data/launch.json, a fictional launch modeled on the SpaceX API v4 shape). The API response is used as-is (only UI state is overlaid), stateless formatting comes from named pipes, the rocket card and links bar each get an itemscope manager as their view model, and the tree config itself is pure JSON (shown below the log).

This variant delegates its lists to builtIns.manageTemplateList; the main tree demo uses Tree's native arrays instead. Prefer native arrays by default; reach for manageTemplateList when item markup lives in HTML (<template>s, possibly server-rendered, filled by infer), when an item is several sibling elements (e.g. <dt>/<dd> pairs, via configs), when a very long list needs time-slicing (yieldEvery) or waitForSettled, or when removed items should be hidden rather than discarded (forget: false).

What this demo exercises

Element specifications as [tag, pattern, children] tuples; patterns resolve against the key's value ('?.small' reads vm.patch.small).
Pipes: named functions used as path segments. The date is join: ['?.parseDate?.longUtc', ' UTC'] with parseDate: Date.parse and longUtc a preconfigured Intl.DateTimeFormat's format; core summaries are a pipe too.
Itemscope managers as view models: { tag: 'section', ish: 'rocket-manager' } attaches RocketManager to the rocket card (by registered name, so the config stays JSON; no itemscope attribute). The card's patterns read its getters ('?.heightLabel'). "Toggle units" sets rocket.ish.metric, whose setter calls ctx.rebind(): the card updates without a tree rerun, and the setting survives "Run again".
Async onAssigned: LinksManager marks the links "verifying…", awaits a simulated check, then "✓ verified". Tree binds right away and rebinds by itself when the promise settles.
Static children: the rocket card's heading and its three spec rows, all resolving against the card's manager.
Rebinding in place: every button re-runs the same tree with a new view model. The log reports how many of the previous elements were reused; only "Clear & rebuild" creates new ones.
Null values: keepNullish keeps the details paragraph when details is null, and a '??' ternary chain shows the placeholder.
$parent: the status badge hangs off the success key and reads its sibling upcoming from the enclosing view model, via ' ?=' ternaries (['$parent?.upcoming', 'Upcoming', ['?.', 'Success', 'Failure']]).
Arrays, by composition: the links, crew, cores and failures lists put a builtIns.manageTemplateList handler key inside the <ul>'s pattern, cloning <template>s from the page. That handler runs asynchronously (fire-and-forget inside the tree), so the lists fill in just after the tree.

By design:

Managers don't render DOM: structure stays in the tree config.
No microdata (itemscope/itemprop), by design.

Event log

API response

Loading…

Tree demo: lists via manageTemplateList

Event log

API response

Tree config