Skip to content
Ooidget

Ooidget Component Format 0.1Editor's Draft

Children

A widget’s children are interactive instances of other components, drawn after its layers. Unlike a use layer, a child keeps state of its own, runs its behaviour and takes input.

The child entry

PropertyTypeRequiredDescription
usestringyesThe component’s name.
propsobjectnoValues placed over the child’s initial state.
bindobjectno{ childKey: parentKey }: the child’s member childKey is the parent view’s member parentKey, read and written.
whenExpression<boolean>noThe child exists only while this holds, evaluated against the parent’s view (against the item’s view for a repeated child).
x, yExpression<number>noIts position at its design size, when it has no frame and the parent has no layout. Absent: 0.
frameFramenoIts box, anchored to the parent’s edges, evaluated against the parent’s view.
eachstringnoRepeat the child once for each element of the parent view’s array member of this name.
bindItemobjectnoFor a repeated child: { childKey: itemField } binds a child member to a field of its array element.
frameItemFramenoFor a repeated child: its frame, evaluated against the item’s view.
basis, flex, min, max, alignnoIts flex item properties.

The view of a child

The view of a child instance is computed from its parent’s view by these steps:

  1. Let v be a copy of the child component's initial state.
  2. For each member of the entry's props, set it on v.
  3. For each member the child itself has set (its own state, kept by the runtime per instance path), set it on v.
  4. For each childKey → parentKey of bind, if the parent's view has parentKey, set v.childKey to it.
  5. If the child is repeated, set v.index to its index, and for each childKey → itemField of bindItem set v.childKey to the element's itemField.
  6. Return v.

Writing state

When a child’s behaviour returns a state patch, the runtime routes each member:

  1. a member named in bind is written to the parent, as parentKey, and so on up;
  2. a member named in bindItem replaces that field of the element in the parent’s array, which is then written to the parent as a whole;
  3. any other member is kept as the child’s own state.

Writes to the parent are applied as if the parent’s behaviour had returned them.

Instance paths

Each instance has a path: "" for the root; for a child, its parent’s path, then /, then its index in children; for a repeated child, then . and its item index ("2/0.3"). Paths identify instances to the host, in diagnostics and in commands.